.compare-page{--ui:'BikeSize UI','Segoe UI',sans-serif;--display:'BikeSize Display','Arial Narrow',sans-serif;--bike-a:#176544;--bike-b:#b85c30;--bg:#f7f8f5;--surface:#fff;--surface2:#edf2eb;--text:#12231b;--text2:#36473d;--text3:#56675b;--border:#dce4dc;--border2:#c9d6ca;--accent:#105d39;--accent-text:#fff;font-family:var(--ui);color:var(--text);background:var(--bg)}
.compare-page main{padding-top:0}
.compare-shell{width:min(1240px,calc(100% - 80px));margin-inline:auto}
.compare-header{display:flex;align-items:center;gap:28px;min-height:100px;border-bottom:1px solid var(--border)}
.compare-header .site-brand{font:italic 900 36px/1 var(--display);letter-spacing:-1px;text-decoration:none;color:var(--text)}
.compare-header .site-brand span{color:var(--accent)}
.back-link{margin-left:auto;font-size:13px;font-weight:650;color:var(--text2);text-decoration:none}
.text-button{appearance:none;border:0;background:none;color:var(--text);font:650 13px/1.4 var(--ui);min-height:44px;padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:5px}
.compare-page :is(a,button,select,input,summary):focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.compare-intro{display:grid;grid-template-columns:1.65fr 1fr;gap:70px;align-items:end;padding:64px 0 50px}
.compare-kicker{margin:0 0 16px;font:700 11px/1.5 var(--ui);letter-spacing:.13em;text-transform:uppercase;color:var(--text3)}
.compare-page h1{font:italic 900 clamp(58px,6.5vw,92px)/.98 var(--display);letter-spacing:-1px;margin:0;text-wrap:balance}
.intro-note{padding-bottom:4px}.intro-note p{font:500 15px/1.8 var(--ui);max-width:39ch;margin:14px 0}
.intro-note>a{color:var(--accent);font-size:13px;font-weight:700;text-underline-offset:5px}
.preview-label{font:650 10px/1.5 var(--ui);color:var(--text3);border-bottom:1px solid var(--border2);padding-bottom:5px}
.bike-picker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;position:relative}
.bike-column{min-width:0;background:var(--surface);border-top:4px solid var(--bike-a);padding:24px 28px 20px}.bike-b{border-color:var(--bike-b)}
.bike-column-top{display:flex;align-items:center;gap:9px}.bike-letter{width:24px;height:24px;display:grid;place-items:center;background:var(--bike-a);color:white;font:800 11px/1 var(--ui)}
.bike-b .bike-letter{background:var(--bike-b)}.bike-brand{font:750 12px/1.4 var(--ui)}.bike-category{margin-left:auto;color:var(--text3);font:500 11px/1.4 var(--ui)}
.bike-column h2{font:750 clamp(22px,2.3vw,30px)/1.3 var(--ui);margin:16px 0 6px;letter-spacing:-.035em;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.model-reference{font:600 12px/1.6 var(--ui);color:var(--text3);margin:0}
.bike-photo{aspect-ratio:1.85;display:grid;place-items:center;background:#f2f2f2;margin:22px -7px 20px;overflow:hidden}
.bike-photo img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.bike-controls{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:14px}.bike-controls>div{min-width:0}
.bike-controls label{display:block;font:650 11px/1.4 var(--ui);margin-bottom:7px;color:var(--text2)}
.bike-controls :is(select,.model-trigger){width:100%;height:48px;min-width:0;border:1px solid var(--border2);border-radius:3px;padding:0 24px 0 11px;font:600 12px/1.4 var(--ui);background:var(--bg);color:var(--text);cursor:pointer}
.source-link{font:550 11px/1.5 var(--ui);color:var(--text3);display:inline-block;margin-top:15px;text-underline-offset:4px}
.swap-button{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border:1px solid var(--border2);border-radius:50%;background:var(--bg);color:var(--text);font:500 25px/1 var(--ui);cursor:pointer;z-index:1;transition:background .2s}
.swap-button:hover{background:var(--surface2)}
.comparison{margin-top:64px;padding-top:38px;border-top:1px solid var(--border2);scroll-margin-top:28px}
.comparison-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.compare-page .comparison h2,.compare-page .understand h2{font:italic 900 clamp(34px,3.5vw,48px)/1.05 var(--display);margin:0;letter-spacing:-.4px}
.comparison .compare-kicker{margin-bottom:12px}.compare-legend{display:flex;gap:30px;margin:0 0 24px;flex-wrap:wrap}
.compare-legend>span{display:inline-flex;align-items:center;gap:9px;font:650 12px/1.5 var(--ui)}
.compare-legend i{width:20px;height:3px;background:var(--bike-a)}.compare-legend .legend-b{background:var(--bike-b)}
.compare-details{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:55px;align-items:center}
.metric-table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-family:var(--ui)}
.metric-table th,.metric-table td{padding:19px 8px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}
.metric-table thead th{padding-top:8px;font:650 11px/1.5 var(--ui);color:var(--text3)}.metric-table th:first-child{padding-left:0;text-align:left}
.metric-table tbody th{font:650 14px/1.5 var(--ui)}.metric-table td{font:600 clamp(18px,2vw,25px)/1.4 var(--ui)}
.metric-table td:last-child{font-size:16px;color:var(--text3)}.metric-table td:nth-child(2){color:var(--bike-a)}.metric-table td:nth-child(3){color:var(--bike-b)}
.metric-note,.geometry-view>p{font:500 11px/1.7 var(--ui);color:var(--text3);margin-top:16px;max-width:55ch}
.geometry-view{min-width:0}.geometry-view svg{width:100%;height:auto;display:block;color:var(--border2)}
.axis{stroke:var(--border2);stroke-width:1}.geo-line{fill:none;stroke-width:3;stroke-linejoin:round}.geo-a{stroke:var(--bike-a)}.geo-b{stroke:var(--bike-b);stroke-dasharray:7 5}.geo-point-a{fill:var(--bike-a)}.geo-point-b{fill:var(--bike-b)}.origin{fill:var(--text2)}.svg-label{fill:var(--text3);font:500 11px var(--ui)}
.comparison-summary{margin-top:26px;padding:22px 25px;background:var(--surface2);border-left:3px solid var(--accent)}
.comparison-summary h3{font:750 14px/1.5 var(--ui);margin:0 0 8px}.comparison-summary p{font:500 14px/1.8 var(--ui);max-width:86ch;margin:0}
.share-status{font:600 12px/1.5 var(--ui);color:var(--accent);min-height:20px;margin:10px 0 0}
.understand{padding:60px 0 56px}.explain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;margin-top:32px}
.explain-grid>div{border-top:1px solid var(--border2);padding-top:17px}.explain-grid span{font:550 11px/1.4 var(--ui);color:var(--text3)}
.explain-grid h3{font:italic 900 29px/1.1 var(--display);margin:10px 0 13px}.explain-grid p{font:500 13px/1.85 var(--ui);color:var(--text2);max-width:36ch}
.compare-next{display:flex;justify-content:space-between;gap:40px;align-items:center;background:var(--accent);color:var(--accent-text);padding:32px 36px}
.compare-next h2{font:italic 900 38px/1.05 var(--display);margin:0 0 10px;color:inherit}.compare-next p{font:500 13px/1.8 var(--ui);max-width:58ch;margin:0}
.compare-cta{color:inherit;font:750 13px/1.4 var(--ui);text-underline-offset:6px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.compare-footnote{padding:30px 0 40px;color:var(--text3);font:500 11px/1.8 var(--ui)}.compare-footnote p{max-width:110ch;margin:0 0 10px}.compare-footnote nav{display:flex;gap:24px;flex-wrap:wrap;margin-top:20px}.compare-footnote a{color:var(--text3);text-underline-offset:4px}
.compare-notice{padding:20px;background:var(--surface2);color:var(--text);font:600 14px/1.8 var(--ui)}
[data-theme=dark] .compare-page{--bike-a:#7dcaa4;--bike-b:#eeac86;--bg:#132019;--surface:#1c2b22;--surface2:#243b2c;--text:#f1f5ee;--text2:#d4e1d4;--text3:#aec4b1;--border:#38503d;--border2:#56725c;--accent:#b2ddb8;--accent-text:#132019}[data-theme=dark] .bike-letter{color:#15241c}
@media(max-width:900px){.compare-shell{width:calc(100% - 40px)}.compare-intro{gap:30px;grid-template-columns:1.3fr 1fr}.compare-page h1{font-size:64px}.bike-picker{gap:20px}.bike-column{padding:20px}.bike-controls{grid-template-columns:minmax(0,1fr) 70px;gap:10px}.bike-controls :is(select,.model-trigger){font-size:12px;padding-left:9px}.compare-details{gap:25px}.compare-next{padding:28px}.explain-grid{gap:24px}}
/* Model selection: searchable native dialog, shared by the two bicycles. */
.bike-photo{position:relative;display:block;min-width:0;background:#fff}
.bike-photo img{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;padding:6px;object-fit:contain;object-position:center;mix-blend-mode:normal}
.bike-controls select{min-width:0;max-width:100%;text-overflow:ellipsis}
.bike-controls .model-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:12px;text-align:left;transition:background .18s,border-color .18s}
.model-trigger:hover{background:var(--surface2);border-color:var(--accent)}
.model-trigger span{font-size:18px;font-weight:500}
.model-name-details{font:500 12px/1.6 var(--ui);margin-top:8px;color:var(--text2)}
.model-name-details summary{cursor:pointer;min-height:28px;text-underline-offset:4px;text-decoration:underline;display:list-item}
.model-name-details p{margin:6px 0 12px;overflow-wrap:anywhere}
.compare-header.with-catalog{gap:20px}
.with-catalog .catalog-nav{margin-left:auto;color:var(--text2);font:650 13px/1.5 var(--ui);text-underline-offset:4px;min-height:44px;display:flex;align-items:center}
.with-catalog .back-link{margin-left:0}
@supports(grid-template-rows:subgrid){.bike-picker{row-gap:0}.bike-column{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}.bike-column>*{min-width:0}}
.model-picker{box-sizing:border-box;width:min(680px,calc(100% - 32px));height:min(740px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);max-width:none;padding:0;border:1px solid var(--border2);border-radius:8px;background:var(--surface);color:var(--text);overflow:hidden}
.model-picker[open]{display:flex;flex-direction:column}
.compare-page.has-model-picker{overflow:hidden}
.model-picker::backdrop{background:rgb(8 22 14 / .58)}
.model-picker-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--border);flex-shrink:0}
.model-picker-header h2{font:750 23px/1.3 var(--ui);letter-spacing:-.04em;margin:0}
.model-picker-close{width:44px;height:44px;flex-shrink:0;border:1px solid var(--border2);border-radius:4px;background:var(--bg);color:var(--text);font:500 28px/1 var(--ui);cursor:pointer}
.model-search-wrap{padding:14px 22px 0;flex-shrink:0}
.model-search-wrap>p:first-child{margin:0 0 14px;color:var(--text2);font:500 13px/1.6 var(--ui)}
.model-search-wrap label{display:block;font:650 12px/1.5 var(--ui);margin-bottom:7px}
.model-search-wrap input{box-sizing:border-box;display:block;width:100%;min-height:48px;padding:11px 12px;border:1px solid var(--border2);border-radius:4px;background:var(--bg);color:var(--text);font:500 16px/1.5 var(--ui)}
#model-search-status{margin:10px 0 12px;min-height:38px;color:var(--text3);font:500 12px/1.6 var(--ui)}
.model-results{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:0 22px 20px;flex:1}
.model-result{display:block;box-sizing:border-box;width:100%;text-align:left;border:0;border-top:1px solid var(--border);padding:14px 10px;background:var(--surface);color:var(--text);cursor:pointer;transition:background .18s}
.model-result:hover,.model-result:focus-visible{background:var(--surface2)}
.model-result span{display:block;overflow-wrap:anywhere}
.model-result-brand{font:750 11px/1.6 var(--ui);color:var(--accent)}
.model-result-name{font:650 15px/1.6 var(--ui);margin:3px 0}
.model-result-detail{font:500 12px/1.6 var(--ui);color:var(--text3)}
.model-results .model-result:focus-visible{outline-offset:-3px}
@media(max-width:620px){
  .compare-shell{width:calc(100% - 32px)}
  .compare-header{min-height:78px}.compare-header .site-brand{font-size:30px}
  .compare-header.with-catalog{gap:10px}.with-catalog .catalog-nav,.back-link{font-size:11px}
  .compare-intro{grid-template-columns:1fr;gap:16px;padding:28px 0}
  .compare-page h1{font-size:clamp(40px,10vw,52px);max-width:none}
  .compare-kicker{font-size:10px;letter-spacing:.08em;margin-bottom:12px}
  .intro-note p{font-size:14px;max-width:43ch;margin:9px 0}.intro-note>a{font-size:13px;display:inline-flex;align-items:center;min-height:36px}
  .bike-picker{grid-template-columns:minmax(0,1fr);gap:14px}
  .bike-column{display:block;grid-row:auto;padding:18px 18px 20px}
  .bike-column h2{font-size:22px;margin:12px 0 5px;min-height:0;line-height:1.35}
  .bike-category{display:inline;font-size:11px}.bike-brand{font-size:12px}
  .model-reference{font-size:12px;min-height:0}
  .model-name-details summary{min-height:32px;padding-top:3px}
  .bike-photo{margin:14px 0;aspect-ratio:1.85}
  .bike-controls{grid-template-columns:minmax(0,1fr) 96px;gap:12px}
  .bike-controls label{font-size:12px;margin-bottom:7px}
  .bike-controls select{font-size:16px;padding-left:10px}
  .bike-controls .model-trigger{font-size:13px;padding-left:11px}
  .swap-button{position:static;justify-self:center;transform:none;width:44px;height:44px;font-size:25px}
  .comparison{margin-top:36px;padding-top:28px}
  .comparison-heading{align-items:start;gap:12px}.comparison-heading h2{font-size:36px}
  .share-button{font-size:12px;max-width:105px;padding-top:10px;text-align:right}
  .compare-legend{gap:18px;margin-bottom:20px}.compare-legend>span{font-size:11px}
  .compare-details{grid-template-columns:1fr;gap:20px}
  .geometry-view{max-width:390px;margin:auto}.geometry-view>p{margin-top:0}
  .metric-table td{font-size:21px}.metric-table td:last-child{font-size:14px}.metric-table th,.metric-table td{padding:16px 6px}.metric-table tbody th{font-size:13px}
  .comparison-summary{padding:18px}.comparison-summary p{font-size:13px}
  .understand{padding:36px 0 30px}.explain-grid{grid-template-columns:1fr;gap:18px;margin-top:24px}
  .explain-grid>div{display:grid;grid-template-columns:30px 1fr;column-gap:8px}.explain-grid span{padding-top:8px}.explain-grid h3{margin:0 0 8px}.explain-grid p{grid-column:2;max-width:none;margin:0}
  .compare-next{display:block;padding:25px}.compare-next h2{font-size:34px}.compare-cta{margin-top:14px}.compare-footnote{font-size:11px}
  .model-picker{width:calc(100% - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);border-radius:6px}
  .model-picker-header{padding:12px 16px}.model-picker-header h2{font-size:21px}
  .model-search-wrap{padding:12px 16px 0}.model-results{padding:0 16px 16px}
}

@media(prefers-reduced-motion:reduce){.compare-page *{scroll-behavior:auto!important;transition:none!important}}

.catalog-language-nav{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-block:12px 0;font:600 12px/1.5 var(--ui);color:var(--text3)}.catalog-language-nav select{min-height:44px;min-width:76px;max-width:100%;border:1px solid var(--border2);border-radius:3px;background:var(--surface);color:var(--text);padding:8px 12px;font:700 13px/1.4 var(--ui)}.bike-photo[data-photo-missing],.photo-viewport[data-photo-missing]{position:relative;background:#fff}.bike-photo[data-photo-missing]::after,.photo-viewport[data-photo-missing]::after{content:attr(data-photo-missing);position:absolute;bottom:10%;left:10%;right:10%;text-align:center;color:#56675b;font:600 12px/1.5 var(--ui)}.component-language-note{font:500 12px/1.8 var(--ui);color:var(--muted);margin-block:0 20px}@media(max-width:620px){.catalog-selection .selection-open{white-space:normal;text-align:center;min-width:0}.model-sheet .primary-link{overflow-wrap:anywhere;min-width:0}}
.manufacturer-destination{grid-column:1/-1;min-width:0;margin-top:4px}.manufacturer-link{display:inline-flex;align-items:center;min-height:44px;padding-block:8px;color:var(--accent);font:700 12px/1.5 var(--ui);text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}.manufacturer-link:hover{text-decoration-thickness:2px}.manufacturer-link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.manufacturer-note{margin:0 0 4px;color:var(--text2);font:500 11px/1.65 var(--ui);max-width:65ch;text-wrap:pretty}.manufacturer-link[hidden],.manufacturer-note[hidden]{display:none!important}