:root {
  --bg: oklch(0.985 0.004 230); --surface: oklch(0.955 0.012 230); --surface-strong: oklch(0.91 0.022 230);
  --ink: oklch(0.19 0.04 230); --ink-raised: oklch(0.245 0.046 230); --muted: oklch(0.43 0.025 230);
  --blue: oklch(0.58 0.145 235); --blue-bright: oklch(0.72 0.145 230); --blue-deep: oklch(0.39 0.12 235);
  --copper: oklch(0.62 0.16 48); --line: oklch(0.86 0.018 230); --line-strong: oklch(0.72 0.03 230);
  --success: oklch(0.53 0.135 155); --warning-soft: oklch(0.95 0.05 85); --danger: oklch(0.53 0.18 25); --white: oklch(1 0 0);
  --shadow: 0 30px 80px oklch(0.19 0.04 230 / 0.16); --radius-xs: 7px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
svg { display: block; }
h1, h2, h3 { margin: 0; line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance; }
p { text-wrap: pretty; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 50; translate: 0 -150%; background: var(--blue-bright); color: var(--ink); padding: 10px 14px; border-radius: var(--radius-xs); font-weight: 850; }
.skip-link:focus { translate: 0; }

.site-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 max(24px, calc((100vw - 1320px) / 2)); background: var(--ink); color: var(--white); border-bottom: 1px solid oklch(1 0 0 / 0.13); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand > span { display: grid; line-height: 0.93; letter-spacing: 0.035em; }
.brand b { font-size: 10px; font-weight: 550; letter-spacing: 0.19em; color: oklch(0.83 0.018 230); }
.brand strong { font-family: Bahnschrift, "Arial Narrow", sans-serif; font-size: 19px; font-weight: 780; letter-spacing: -0.015em; }
.brand svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.brand .mark-hub { fill: var(--blue-bright); stroke: var(--blue-bright); }
.brand .mark-north { fill: var(--blue-bright); stroke: none; }
.prototype-status { display: inline-flex; align-items: center; gap: 8px; color: oklch(0.78 0.025 230); font-size: 12px; font-weight: 650; }
.prototype-status span { width: 8px; height: 8px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 5px oklch(0.62 0.16 48 / 0.13); }
.prototype-status b { padding-left: 7px; border-left: 1px solid oklch(1 0 0 / 0.2); color: var(--white); }

.hero { position: relative; isolation: isolate; min-height: 700px; display: grid; grid-template-columns: minmax(480px, .9fr) minmax(420px, 1.1fr); gap: 52px; align-items: center; padding: 76px max(24px, calc((100vw - 1320px) / 2)) 88px; overflow: hidden; color: var(--white); background-color: var(--ink); background-image: linear-gradient(90deg, var(--ink) 0%, oklch(0.19 0.04 230 / .98) 35%, oklch(0.19 0.04 230 / .62) 57%, oklch(0.19 0.04 230 / .08) 100%), url("/fitment-bay-hero.jpg"); background-position: center; background-size: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(oklch(0.72 0.145 230 / .06) 1px, transparent 1px), linear-gradient(90deg, oklch(0.72 0.145 230 / .06) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, black, transparent 54%); }
.hero-copy { position: relative; z-index: 2; max-width: 670px; }
.prototype-note { display: flex; align-items: center; gap: 10px; margin: 0 0 23px; color: var(--blue-bright); font-size: 13px; font-weight: 760; }
.prototype-note span { width: 28px; height: 2px; background: currentColor; }
.hero h1 { max-width: 700px; color: var(--white); font-family: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif; font-size: 5.35rem; font-stretch: condensed; font-weight: 820; letter-spacing: -0.04em; }
.hero h1 em { color: var(--blue-bright); font-style: normal; }
.hero-lede { max-width: 57ch; margin: 28px 0 30px; color: oklch(0.86 0.02 230); font-size: 19px; line-height: 1.58; }
.hero-actions { display: flex; align-items: center; gap: 20px; }
.hero-action { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 0 20px; border-radius: var(--radius-xs); background: var(--blue-bright); color: var(--ink); font-weight: 850; text-decoration: none; box-shadow: 0 12px 30px oklch(0.58 0.145 235 / .24); transition: transform 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease); }
.hero-action:hover { background: var(--white); transform: translateY(-2px); box-shadow: 0 18px 38px oklch(0.19 0.04 230 / .3); }
.hero-proof { max-width: 20ch; color: oklch(0.72 0.02 230); font-size: 11px; line-height: 1.35; }
.hero-proof b { color: var(--white); }
.hero-action:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid oklch(1 0 0 / .18); }
.hero-trust li { min-width: 150px; display: grid; gap: 2px; padding: 15px 24px 0 0; }
.hero-trust li + li { padding-left: 24px; border-left: 1px solid oklch(1 0 0 / .18); }
.hero-trust strong { color: var(--blue-bright); font-family: Bahnschrift, sans-serif; font-size: 11px; letter-spacing: .09em; }
.hero-trust span { color: oklch(0.83 0.018 230); font-size: 12px; font-weight: 650; }
.hero-instrument { position: relative; align-self: end; justify-self: end; width: min(100%, 360px); margin-bottom: 4px; padding: 17px 18px 15px; background: oklch(0.18 0.04 230 / .94); border-top: 2px solid var(--blue-bright); box-shadow: 0 24px 60px oklch(0.12 0.03 230 / .36); }
.hero-instrument::before { content: ""; position: absolute; left: -84px; top: -146px; width: 220px; height: 220px; border: 1px solid oklch(0.72 0.145 230 / .55); border-radius: 50%; box-shadow: inset 0 0 0 20px oklch(0.72 0.145 230 / .04), inset 0 0 0 42px oklch(0.72 0.145 230 / .03); }
.scan-line { position: absolute; left: 25px; right: 25px; top: -47px; height: 1px; background: var(--blue-bright); box-shadow: 0 0 14px var(--blue-bright); }
.scan-line::before, .scan-line::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--blue-bright); }
.scan-line::after { right: 0; }
.instrument-label { display: flex; align-items: center; gap: 8px; color: oklch(0.8 0.02 230); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
.instrument-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px oklch(0.53 0.135 155 / .12); }
.instrument-data { display: grid; grid-template-columns: 1fr 1fr; margin-top: 13px; }
.instrument-data > div { display: grid; }
.instrument-data > div + div { padding-left: 20px; border-left: 1px solid oklch(1 0 0 / .17); }
.instrument-data span { color: oklch(0.7 0.02 230); font-size: 10px; }
.instrument-data strong { color: var(--white); font-family: Bahnschrift, sans-serif; font-size: 30px; line-height: 1.2; letter-spacing: -.03em; }
.instrument-data small { color: var(--blue-bright); font-size: 12px; }
.hero-instrument p { margin: 13px 0 0; padding-top: 10px; border-top: 1px solid oklch(1 0 0 / .12); color: oklch(0.68 0.02 230); font-size: 10px; }
.hero-instrument p b { color: var(--copper); padding-inline: 4px; }

.compare-section { padding: 94px max(24px, calc((100vw - 1240px) / 2)) 102px; background: var(--surface); border-bottom: 1px solid var(--line); }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 54px; margin-bottom: 32px; }
.section-intro > div { max-width: 770px; }
.section-intro > div > p { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: var(--blue-deep); font-size: 13px; font-weight: 830; }
.section-intro > div > p::before { content: ""; width: 22px; height: 2px; background: var(--blue); }
.section-intro h2 { max-width: 760px; font-family: Bahnschrift, "Segoe UI", sans-serif; font-size: 3.25rem; font-weight: 780; }
.section-intro > p { max-width: 45ch; margin: 0 0 4px; color: var(--muted); }
.vehicle-lookup { padding: 19px 20px 15px; background: var(--blue-deep); color: var(--white); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.lookup-heading { display: flex; align-items: center; gap: 13px; }
.lookup-heading > div { display: grid; }
.vehicle-lookup strong { font-size: 15px; }
.vehicle-lookup span { color: oklch(0.85 0.035 230); font-size: 12px; }
.lookup-icon { width: 44px; height: 44px; display: grid; place-items: center; background: oklch(1 0 0 / .11); border: 1px solid oklch(1 0 0 / .14); border-radius: var(--radius-xs); }
.lookup-icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lookup-source { min-height: 30px; display: inline-flex; align-items: center; gap: 7px; margin-left: auto; border: 1px solid oklch(1 0 0 / .14); border-radius: 999px; padding: 0 10px; white-space: nowrap; }
.lookup-source i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px oklch(0.53 0.135 155 / .13); }
.vehicle-lookup-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin-top: 16px; }
.vehicle-lookup-form label, .lookup-result label { display: grid; gap: 6px; color: oklch(0.83 0.018 230); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.vehicle-lookup select { width: 100%; min-height: 46px; border: 1px solid oklch(1 0 0 / .2); border-radius: var(--radius-xs); background: var(--ink-raised); color: var(--white); padding: 0 36px 0 12px; font-size: 13px; font-weight: 720; text-transform: none; letter-spacing: 0; }
.vehicle-lookup select:hover:not(:disabled) { border-color: var(--blue-bright); }
.vehicle-lookup select:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 4px oklch(0.72 0.145 230 / .14); outline: 0; }
.vehicle-lookup select:disabled { color: oklch(0.72 0.02 230); opacity: .76; }
.vehicle-lookup button { min-height: 46px; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--blue-bright); border-radius: var(--radius-xs); padding: 0 14px; background: var(--blue-bright); color: var(--ink); font-size: 12px; font-weight: 840; cursor: pointer; transition: background 160ms var(--ease), border-color 160ms var(--ease); }
.vehicle-lookup button:hover:not(:disabled) { border-color: var(--white); background: var(--white); }
.vehicle-lookup button:disabled { border-color: oklch(1 0 0 / .14); background: oklch(1 0 0 / .06); color: oklch(0.72 0.02 230); cursor: not-allowed; }
.lookup-result { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 10px; align-items: end; margin-top: 13px; padding-top: 13px; border-top: 1px solid oklch(1 0 0 / .12); }
.lookup-result[hidden] { display: none; }
.lookup-status { min-height: 18px; margin: 9px 0 0; color: oklch(0.72 0.025 230); font-size: 11px; font-weight: 650; }
.lookup-status[data-state="ready"], .lookup-status[data-state="applied"] { color: var(--blue-bright); }
.lookup-status[data-state="error"] { color: var(--copper); }
.tool-workspace { display: grid; grid-template-columns: minmax(350px, .78fr) minmax(540px, 1.22fr); background: var(--white); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.fitment-form { padding: 30px; background: var(--ink); color: var(--white); border-right: 1px solid oklch(1 0 0 / .1); }
.setup-heading { min-height: 34px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.setup-heading > div { display: flex; align-items: center; gap: 9px; }
.setup-heading strong { font-size: 15px; }
.setup-heading button { min-height: 44px; border: 0; background: transparent; color: var(--blue-bright); font-size: 12px; font-weight: 820; cursor: pointer; padding: 0 6px; }
.setup-key { width: 11px; height: 11px; border-radius: 2px; }
.current-key { border: 2px solid oklch(1 0 0 / .7); }
.proposed-key { background: var(--blue-bright); }
.proposed-heading { margin-top: 28px; padding-top: 22px; border-top: 1px solid oklch(1 0 0 / .12); }
.fitment-form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; }
.fitment-form legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fitment-form label { display: grid; grid-template-columns: 1fr auto; gap: 5px; color: oklch(0.94 0.01 230); font-size: 12px; font-weight: 730; }
.fitment-form label span { color: oklch(0.68 0.035 230); font-weight: 620; }
.fitment-form input { grid-column: 1 / -1; width: 100%; min-height: 49px; border: 1px solid oklch(1 0 0 / .17); border-radius: var(--radius-xs); background: var(--ink-raised); color: var(--white); padding: 0 13px; font-weight: 760; font-variant-numeric: tabular-nums; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease); }
.fitment-form input:hover { border-color: var(--blue-bright); background: oklch(0.27 0.05 230); }
.fitment-form input:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 4px oklch(0.72 0.145 230 / .15); outline: 0; }
.fitment-form input[aria-invalid="true"] { border-color: oklch(0.73 0.16 25); box-shadow: 0 0 0 4px oklch(0.53 0.18 25 / .16); }
.form-error { margin: 18px 0 0; padding: 11px 13px; border: 1px solid oklch(0.7 0.12 25); border-radius: var(--radius-xs); background: oklch(0.31 0.1 25); color: oklch(0.94 0.035 25); font-size: 13px; font-weight: 700; }
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 25px; }
.primary-button { min-height: 52px; flex: 1; display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: var(--radius-xs); background: var(--blue-bright); color: var(--ink); padding: 0 17px; font-weight: 850; cursor: pointer; transition: transform 160ms var(--ease), background 160ms var(--ease); }
.primary-button:hover { background: var(--white); transform: translateY(-1px); }
.primary-button:active { transform: translateY(0); }
.text-button { min-height: 46px; border: 0; background: transparent; color: oklch(0.68 0.03 230); padding: 0 7px; font-weight: 750; cursor: pointer; }
.text-button:hover { color: var(--white); }

.results { min-width: 0; padding: 32px 34px 34px; background: var(--white); }
.verdict-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.verdict { min-height: 31px; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; background: oklch(0.92 0.045 155); color: oklch(0.34 0.1 155); padding: 4px 10px; font-size: 12px; font-weight: 820; }
.verdict.warning { background: var(--warning-soft); color: oklch(0.36 0.08 65); }
.verdict.alert { background: oklch(0.94 0.04 25); color: oklch(0.37 0.14 25); }
.verdict svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.result-id { color: var(--muted); font-size: 11px; font-weight: 720; text-transform: uppercase; letter-spacing: .08em; }
.results h3 { max-width: 700px; margin-top: 17px; font-family: Bahnschrift, "Segoe UI", sans-serif; font-size: 2.65rem; font-weight: 780; }
.results h3 span { color: var(--blue-deep); }
.results > p { max-width: 67ch; margin: 13px 0 23px; color: var(--muted); }
.fitment-diagram { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); background-color: var(--surface); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; overflow: hidden; }
.fitment-diagram svg { width: 100%; height: auto; }
.suspension-label, .fender-label { position: absolute; top: 12px; color: var(--muted); font-size: 10px; font-weight: 800; }
.suspension-label { left: 13px; } .fender-label { right: 13px; }
.guide { stroke: var(--copper); stroke-width: 3; stroke-dasharray: 6 6; }
.hub-label { fill: oklch(0.41 0.12 48); font: 800 10px system-ui, sans-serif; letter-spacing: .05em; }
.current-bar { fill: var(--ink); } .new-bar { fill: var(--blue); }
#current-wheel-bar text, #new-wheel-bar text { fill: var(--white); font: 800 11px system-ui, sans-serif; letter-spacing: .05em; }
.dimension-line { fill: none; stroke: var(--copper); stroke-width: 2; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metrics div { min-width: 0; padding: 15px 14px 15px 0; }
.metrics div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.metrics dt { color: var(--muted); font-size: 11px; font-weight: 720; }
.metrics dd { margin: 5px 0 1px; font-family: Bahnschrift, sans-serif; font-size: 24px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metrics span { display: block; color: var(--muted); font-size: 10px; line-height: 1.25; }
.limits { margin-top: 18px; border: 1px solid oklch(0.78 0.09 75); border-radius: var(--radius-sm); background: var(--warning-soft); padding: 14px 15px; color: oklch(0.31 0.05 65); }
.limits strong { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.limits svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.limits p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; }
.intent-test { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.intent-test > div:first-child { display: grid; gap: 2px; }
.intent-test strong { font-size: 14px; } .intent-test span { color: var(--muted); font-size: 11px; }
.intent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.intent-actions button { min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--white); color: var(--ink); padding: 0 12px; font-size: 12px; font-weight: 780; cursor: pointer; transition: border-color 160ms var(--ease), background 160ms var(--ease); }
.intent-actions button:hover, .intent-actions button[aria-pressed="true"] { border-color: var(--blue); background: oklch(0.95 0.025 230); }
#intent-status { min-height: 18px; margin: 8px 0 0; color: var(--blue-deep); font-size: 11px; font-weight: 750; }

.explanation { width: min(1240px, calc(100% - 48px)); margin: auto; padding: 104px 0 88px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 82px; align-items: start; }
.explanation h2 { max-width: 560px; font-family: Bahnschrift, "Segoe UI", sans-serif; font-size: 3.65rem; font-weight: 780; }
.explanation > div p { max-width: 58ch; color: var(--muted); font-size: 18px; }
.explanation ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: steps; }
.explanation li { counter-increment: steps; display: grid; grid-template-columns: 34px 110px 1fr; gap: 18px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.explanation li::before { content: "0" counter(steps); color: var(--blue); font-family: Bahnschrift, sans-serif; font-size: 12px; font-weight: 800; }
.explanation li strong { color: var(--ink); } .explanation li span { color: var(--muted); }
.method { width: min(900px, calc(100% - 48px)); margin: 0 auto; padding: 0 0 104px; }
.method h2 { margin-bottom: 22px; font-family: Bahnschrift, "Segoe UI", sans-serif; font-size: 2.25rem; }
.method details { border-top: 1px solid var(--line); } .method details:last-child { border-bottom: 1px solid var(--line); }
.method summary { min-height: 66px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 800; }
.method summary::after { content: "+"; color: var(--blue); font-size: 22px; } .method details[open] summary::after { content: "−"; }
.method details p { max-width: 72ch; margin: -2px 0 22px; color: var(--muted); }
footer { min-height: 156px; display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 28px max(24px, calc((100vw - 1240px) / 2)); background: var(--ink); color: var(--white); }
.footer-brand svg { stroke: var(--white); width: 34px; height: 34px; }
footer p { color: oklch(0.74 0.025 230); font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.footer-links a { color: var(--blue-bright); font-size: 12px; font-weight: 750; }
.legal-page { min-height: 100vh; background: var(--surface); }
.legal-back { color: var(--blue-bright); font-size: 13px; font-weight: 800; text-decoration: none; }
.legal-content { width: min(760px, calc(100% - 36px)); margin: 0 auto; padding: 86px 0 110px; }
.legal-kicker { margin: 0 0 16px; color: var(--blue-deep); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.legal-content h1 { max-width: 700px; font-family: Bahnschrift, "Segoe UI", sans-serif; font-size: clamp(3rem, 8vw, 5.2rem); font-weight: 820; }
.legal-lede { max-width: 58ch; margin: 25px 0 55px; color: var(--muted); font-size: 19px; }
.legal-content h2 { margin-top: 34px; font-family: Bahnschrift, "Segoe UI", sans-serif; font-size: 1.45rem; font-weight: 780; letter-spacing: -.02em; }
.legal-content h2::before { content: ""; display: block; width: 30px; height: 2px; margin-bottom: 12px; background: var(--blue); }
.legal-content h2 + p { color: var(--muted); }
.legal-content a { color: var(--blue-deep); font-weight: 760; }
.legal-updated { margin-top: 52px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr .62fr; min-height: 680px; } .hero h1 { font-size: 4.6rem; }
  .vehicle-lookup-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vehicle-lookup-form > button { grid-column: 1 / -1; }
  .tool-workspace { grid-template-columns: 1fr; } .fitment-form { border-right: 0; border-bottom: 1px solid oklch(1 0 0 / .1); }
  .fitment-form fieldset { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .explanation { grid-template-columns: 1fr; gap: 38px; }
}
@media (max-width: 760px) {
  .site-header { min-height: 70px; padding-inline: 18px; } .brand svg { width: 37px; height: 37px; } .brand b { font-size: 9px; } .brand strong { font-size: 17px; }
  .prototype-status { font-size: 0; gap: 0; } .prototype-status span { margin-right: 8px; } .prototype-status b { border: 0; padding: 0; font-size: 11px; }
  .hero { min-height: 780px; grid-template-columns: 1fr; align-content: space-between; gap: 46px; padding: 56px 18px 40px; background-image: linear-gradient(180deg, var(--ink) 0%, oklch(0.19 0.04 230 / .95) 45%, oklch(0.19 0.04 230 / .36) 73%, oklch(0.19 0.04 230 / .88) 100%), url("/fitment-bay-hero.jpg"); background-position: center, 63% center; }
  .hero::before { background-size: 48px 48px; mask-image: linear-gradient(180deg, black, transparent 58%); }
  .hero h1 { font-size: 3.55rem; letter-spacing: -.035em; } .hero-lede { margin-block: 22px 24px; font-size: 17px; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 12px; } .hero-action { width: 100%; justify-content: space-between; } .hero-proof { max-width: none; } .hero-trust { display: none; }
  .hero-instrument { justify-self: stretch; width: 100%; margin: 0; } .hero-instrument::before { left: auto; right: 4px; top: -118px; width: 170px; height: 170px; }
  .section-intro { align-items: start; flex-direction: column; gap: 18px; } .section-intro h2 { font-size: 2.5rem; }
  .lookup-heading { align-items: flex-start; flex-wrap: wrap; } .lookup-source { margin-left: 57px; }
  .lookup-result { grid-template-columns: 1fr; } .lookup-result button { width: 100%; }
  .fitment-form fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics { grid-template-columns: 1fr 1fr; } .metrics div + div { border-left: 0; } .metrics div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); } .metrics div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .explanation li { grid-template-columns: 32px 90px 1fr; gap: 10px; }
}
@media (max-width: 520px) {
  .compare-section { padding: 68px 14px 72px; } .section-intro { padding-inline: 4px; } .section-intro h2 { font-size: 2.2rem; }
  .vehicle-lookup { padding: 17px 14px 13px; } .lookup-heading { gap: 10px; } .lookup-heading > div { flex: 1; min-width: 200px; } .lookup-source { margin-left: 54px; }
  .vehicle-lookup-form { grid-template-columns: 1fr; } .vehicle-lookup-form > button { grid-column: auto; width: 100%; }
  .tool-workspace { border-radius: 0 0 var(--radius-md) var(--radius-md); } .fitment-form, .results { padding: 23px 17px; }
  .fitment-form fieldset { gap: 11px 9px; } .fitment-form label { font-size: 11px; } .results h3 { font-size: 2.05rem; } .result-id { display: none; }
  .fitment-diagram { margin-inline: -2px; } .intent-actions { display: grid; }
  .explanation { width: calc(100% - 28px); padding: 72px 0 60px; } .explanation h2 { font-size: 2.65rem; } .explanation > div p { font-size: 16px; }
  .explanation li { grid-template-columns: 28px 1fr; } .explanation li span { grid-column: 2; }
  .method { width: calc(100% - 28px); padding-bottom: 76px; }
  footer { align-items: flex-start; flex-direction: column; min-height: 0; padding: 38px 18px; }
  .footer-links { justify-content: flex-start; }
  .legal-content { padding-block: 60px 80px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }