/* DriverMods, the new look (the redesign, look A, Matt's pick on 3 Nov 2026): Polestar's
   configurator, refined. White, a pale grey panel behind every photo, one plain sans (Inter Tight,
   served by the site), square corners, hairline boxes, and DriverMods orange only as the accent: the
   chosen box's line, chosen chips and the arrow in the main button. One stylesheet for the homepage,
   Find My Fit and the kit pages, in place of the copied ones (the other pages keep theirs until
   stage 2). Hand-written; nothing generates it. */

/* Inter Tight, SIL Open Font License 1.1 (The Inter Tight Project Authors), latin, variable weight, from Fontsource. */
@font-face { font-family: "Inter Tight"; src: url(/static/fonts/inter-tight-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #fff; --panel: #f2f2f0; --surface: #fff;
  --ink: #111; --ink-2: #4f4f4f; --muted: #737373; --line: #e2e2e0; --line-2: #c4c4c1;
  --accent: #ff6a14;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { font: 400 15px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
h1, h2, h3 { font-weight: 500; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; font-size: 14px; text-decoration: none; }
.skip-link:focus { top: 8px; }
.preview-bar { background: var(--ink); color: #fff; font-size: 13px; text-align: center; padding: 8px 16px; }
.wrap { max-width: 1280px; margin: 0 auto; padding-inline: 32px; }
.link { font-size: 14px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--accent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; font-size: 14px; font-weight: 500; text-decoration: none; border: 1px solid var(--ink); background: var(--ink); color: #fff; transition: background-color .2s, border-color .2s, color .2s; }
.btn .arr { color: var(--accent); transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.light { background: #fff; color: var(--ink); border-color: #fff; }
.btn:disabled { opacity: .45; cursor: default; }
.h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.kicker { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.sub { margin-top: 10px; color: var(--ink-2); max-width: 60ch; }
.dots li { position: relative; padding-left: 16px; }
.dots li + li { margin-top: 6px; }
.dots li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 1px; background: var(--ink); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* The top bar: white, the wordmark on the left, the menu's links, a hairline under it */
.bar { position: sticky; top: 0; z-index: 20; height: 60px; background: var(--bg); border-bottom: 1px solid var(--line); view-transition-name: bar; }
.bar .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo img { height: 30px; width: auto; filter: brightness(0); }
.nav { display: flex; gap: 28px; font-size: 14px; }
.nav a { text-decoration: none; opacity: .75; transition: opacity .2s; }
.nav a:hover, .nav a[aria-current] { opacity: 1; }
.nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.menu { display: none; width: 40px; height: 40px; margin-right: -9px; place-items: center; }
.menu span { display: block; width: 22px; height: 9px; border-block: 1.5px solid currentColor; transition: transform .2s; }
.bar.open .menu span { height: 0; border-bottom: 0; transform: rotate(45deg); box-shadow: none; }

/* Footer */
.foot { margin-top: 32px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 28px 32px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 24px; }
.foot a { text-decoration: none; color: var(--ink-2); }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Homepage: the hero */
.hero { position: relative; height: clamp(520px, 76vh, 760px); background: #0d0d0d; color: #fff; overflow: hidden; }
.h-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.8), rgba(0,0,0,.55) 40%, rgba(0,0,0,0) 75%), linear-gradient(0deg, rgba(0,0,0,.45), transparent 50%); }
.hero-in { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; padding-bottom: 72px; }
.copy { max-width: 840px; }
.hero .kicker { color: rgba(255,255,255,.7); margin-bottom: 16px; }
.hero h1 { font-size: clamp(42px, 5.2vw, 76px); line-height: .98; font-weight: 500; letter-spacing: -.045em; }
.hero p:not(.kicker) { margin-top: 24px; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.78); max-width: 52ch; }
.hero .btn { margin-top: 32px; }
.proof { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 28px; font-size: 13px; color: rgba(255,255,255,.7); }

/* The finder and the kit cards */
.find { padding-top: 104px; }
.fmf .find { padding-top: 24px; }
.find-h h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.find-h p { margin-top: 8px; color: var(--muted); }
.step { margin-top: 32px; }
.step-l { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.step.reveal { animation: rise .5s var(--ease) both; }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.chips.yrs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.chip { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; line-height: 1.25; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.chip small { font-size: 12px; color: var(--muted); }
.chip:hover { border-color: var(--line-2); }
.chip[aria-pressed=true], .chip[aria-current] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.res-h { display: flex; align-items: baseline; gap: 12px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); }
.res-h h2, .res-h h3 { font-size: 16px; font-weight: 500; }
.rn { font-size: 14px; color: var(--muted); }
.res-h .link { margin-left: auto; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 16px; margin-top: 24px; }
.card { display: block; text-decoration: none; }
.ph, .stage, .tb, .u-ph, .fm { position: relative; aspect-ratio: 4 / 3; background: var(--panel); overflow: hidden; isolation: isolate; }
.ph img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transform: scale(1.06); transition: transform .7s var(--ease); }
.card:hover .ph img { transform: scale(1.11); }
.ct { padding-top: 14px; }
.cn { font-weight: 500; }
.cm { margin-top: 2px; font-size: 14px; color: var(--muted); }
.fit-empty { margin-top: 24px; padding: 14px 16px; background: var(--panel); color: var(--ink-2); font-size: 14px; }

/* Homepage: the bands under the finder */
.band { margin-top: 128px; padding-top: 40px; border-top: 1px solid var(--line); }
.after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; counter-reset: s; }
.after.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 32px; }
.after li { counter-increment: s; padding-top: 14px; border-top: 1px solid var(--ink); font-size: 14px; color: var(--ink-2); }
.after li::before { content: "0" counter(s); display: block; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.after b { display: block; margin-bottom: 4px; font-weight: 500; color: var(--ink); }
.after strong { font-weight: 500; color: var(--ink); }
.units { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.hu .row { margin-top: 14px; }
.hu p { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.u-ph img, .fm img.p { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 9%; }
.cmp-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.trio li { font-size: 14px; color: var(--ink-2); }
.trio b { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 500; color: var(--ink); }
.learn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.learn a { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid var(--line); text-decoration: none; font-size: 14px; color: var(--ink-2); transition: border-color .2s; }
.learn a:hover { border-color: var(--line-2); }
.learn .k { font-size: 12px; color: var(--muted); }
.learn b { font-size: 15px; font-weight: 500; color: var(--ink); }
.learn .go { margin-top: auto; padding-top: 10px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.show { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.show img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--panel); }
.show figcaption { padding-top: 14px; font-size: 14px; color: var(--ink-2); max-width: 56ch; }
.show figcaption b { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 500; color: var(--ink); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.two > div { padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.two h3 { margin-bottom: 10px; font-size: 16px; color: var(--ink); }
.cant { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; margin-block: 128px; padding-top: 40px; border-top: 1px solid var(--line); }
.cant p { margin-top: 12px; color: var(--ink-2); max-width: 56ch; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px !important; }

/* Find My Fit */
.fmf-h { padding-top: 56px; }
.fmf-h h1 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.fmf-h .lead { margin-top: 16px; max-width: 72ch; color: var(--ink-2); }
.note-t { margin-top: 12px; max-width: 72ch; font-size: 14px; color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }
.zero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px 64px; margin-block: 128px 96px; padding-top: 40px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.zero p { margin-top: 12px; color: var(--ink-2); }
.enq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; scroll-margin-top: 80px; }
.f { display: block; }
.f.wide, .send, .enq .msg { grid-column: 1 / -1; }
.f > span { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.f input, .f textarea { display: block; width: 100%; border: 1px solid var(--line); background: var(--surface); padding: 12px 14px; font-size: 16px; border-radius: 0; outline: none; transition: border-color .2s; }
.f input:focus, .f textarea:focus { border-color: var(--ink); }
.f input[type=file] { padding: 10px; font-size: 14px; }
.f small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.msg { padding: 12px 14px; font-size: 14px; background: var(--panel); }
.msg.bad { box-shadow: inset 2px 0 0 #b42318; }
.msg.good { box-shadow: inset 2px 0 0 var(--ink); }

/* Kit page: the configurator */
.cfg { display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "media head" "media choices" "media sum"; column-gap: 72px; align-items: start; max-width: 1200px; padding-top: 40px; }
.media { grid-area: media; position: sticky; top: 92px; }
.stage img { width: 100%; height: 100%; }
.stage img.p { object-fit: contain; mix-blend-mode: multiply; padding: 7%; transform: scale(1.14); }
.stage img.c { object-fit: cover; }
.arrow { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; display: grid; place-items: center; background: rgba(255,255,255,.92); transition: background-color .2s; }
.arrow:hover { background: #fff; }
.arrow.prev { left: 14px; }
.arrow.next { right: 14px; }
html:not(.js) .arrow, html:not(.js) .thumbs { display: none; }
.under { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.thumbs { display: flex; gap: 8px; }
.tb { width: 76px; opacity: .65; outline: 1px solid transparent; outline-offset: -1px; transition: opacity .2s, outline-color .2s; }
.tb[aria-pressed=true] { opacity: 1; outline-color: var(--ink); }
.tb img { width: 100%; height: 100%; }
.tb img.p { object-fit: contain; mix-blend-mode: multiply; padding: 6%; }
.tb img.c { object-fit: cover; }
.cap { display: flex; gap: 16px; font-size: 13px; }
.cap span + span { color: var(--muted); }
.build { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); }
.build h2 { font-size: 13px; font-weight: 400; color: var(--muted); margin-bottom: 6px; }
.build li { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 14px; animation: rise .4s var(--ease) both; }
.head { grid-area: head; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); text-decoration: none; transition: color .2s; }
.back:hover { color: var(--ink); }
.head h1 { margin-top: 18px; font-size: 30px; line-height: 1.12; font-weight: 500; letter-spacing: -.025em; }
.km { margin-top: 6px; font-size: 14px; color: var(--muted); }
.choices { grid-area: choices; }
.grp { margin-top: 36px; }
.grp > legend { float: left; width: 100%; margin-bottom: 12px; font-size: 16px; font-weight: 500; }
.grp > legend + * { clear: both; }
.opts { display: grid; gap: 8px; align-items: start; }
.opts.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opts.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { position: relative; display: block; padding: 17px 18px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.opt:hover { border-color: var(--line-2); }
.opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.opt-l { display: block; cursor: pointer; }
.opt-l::after { content: ""; position: absolute; inset: 0; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nm { font-weight: 500; }
.pr { color: var(--ink-2); white-space: nowrap; }
.tag { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--muted); }
.more { position: relative; z-index: 1; display: grid; grid-template-rows: 0fr; cursor: auto; transition: grid-template-rows .45s var(--ease); }
.opt:has(input:checked) .more { grid-template-rows: 1fr; }
.more > div { overflow: hidden; min-height: 0; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.specs dt { font-size: 12px; color: var(--muted); }
.specs dd { margin: 1px 0 0; font-size: 14px; }
.more .note { margin-top: 16px; max-width: none; }
.more .dots { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.more .dots li + li { margin-top: 2px; }
.ln { margin: 14px 0 10px; font-size: 14px; color: var(--ink-2); }
.more .link { display: inline-block; margin-bottom: 2px; }
.tile { padding: 14px 16px; }
.tile .nm, .tile .pr { display: block; font-size: 14px; }
.tile .pr { margin-top: 2px; font-size: 13px; color: var(--muted); }
.xs .row { align-items: center; }
.sl { display: block; font-size: 13px; color: var(--muted); }
.ck { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 14px; vertical-align: -3px; border: 1px solid var(--line-2); transition: background-color .2s, border-color .2s; }
.ck svg { opacity: 0; transition: opacity .2s; }
.opt:has(input:checked) .ck { background: var(--ink); border-color: var(--ink); }
.opt:has(input:checked) .ck svg { opacity: 1; }
.dc { display: none; margin-top: 8px; padding: 14px 16px; background: var(--panel); font-size: 14px; color: var(--ink-2); animation: rise .4s var(--ease) both; }
.grp:has(input[value="11505"]:checked) .dc[data-for="11505"], .grp:has(input[value="11500"]:checked) .dc[data-for="11500"] { display: block; }
.dc h3 { font-size: 14px; color: var(--ink); }
.dc p { margin-top: 4px; }
.dc .dots { margin-top: 8px; }
.summary { grid-area: sum; position: sticky; bottom: 0; z-index: 5; margin-top: 36px; padding: 18px 0 24px; background: var(--bg); border-top: 1px solid var(--line); }
.sum-t { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.lbl { display: block; font-size: 12px; color: var(--muted); }
.eta { font-size: 14px; }
.tot { text-align: right; }
.tot b { font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.sum-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.buy-note { margin-top: 10px; font-size: 13px; color: var(--ink-2); }

/* Kit page: everything else the old page carried, in quiet rows below the configurator */
.info { max-width: 1200px; padding-top: 112px; padding-bottom: 96px; }
.irow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; padding: 36px 0; border-top: 1px solid var(--line); }
.irow > h2 { font-size: 20px; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; }
.irow > div { min-width: 0; color: var(--ink-2); }
.irow > div > p, .irow .dots { max-width: 62ch; }
.irow > div > * + * { margin-top: 14px; }
.irow .lead { color: var(--ink); font-size: 16px; }
.irow em { font-style: normal; color: var(--muted); }
.irow strong { font-weight: 500; color: var(--ink); }
.shot { max-width: 560px; }
.shot img { width: 100%; height: auto; }
.kv > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv > div:first-child { padding-top: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); }
.note { padding: 14px 16px; font-size: 14px; background: var(--panel); color: var(--ink-2); max-width: 62ch; }
.note p { margin: 0; }
.pill { display: inline-block; padding: 3px 10px; border: 1px solid var(--line-2); font-size: 12px; color: var(--ink); }
.ask { font-size: 14px; }
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
.irow > div > .feats { margin-top: 28px; }
.feat h3 { margin-top: 14px; font-size: 15px; color: var(--ink); }
.fb { margin-top: 6px; font-size: 14px; }
.feat .dots { margin-top: 10px; font-size: 14px; }
.fm { aspect-ratio: 16 / 10; }
.fm img:not(.p) { width: 100%; height: 100%; object-fit: cover; }
.fm video { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vid video { cursor: pointer; }
.play { position: absolute; left: 14px; bottom: 14px; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--ink); transition: background-color .2s, opacity .2s; }
.play:hover { background: #fff; }
.vid.playing .play { opacity: 0; pointer-events: none; }
.acc details, .faq details { border-bottom: 1px solid var(--line); }
.acc details:first-child, .faq details:first-child { border-top: 1px solid var(--line); }
.acc summary, .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; cursor: pointer; list-style: none; color: var(--ink); font-size: 15px; font-weight: 500; }
.acc summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.acc summary::after, .faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.acc details[open] > summary::after, .faq details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary h3 { font: inherit; }
.acc-b, .faq .dm-faq-a { padding-bottom: 18px; font-size: 14px; color: var(--ink-2); max-width: 62ch; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tags li { padding: 3px 10px; border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); }
.irow .learn { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }

/* The compare pop-up */
dialog.cmp { margin: auto; width: min(1040px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; background: var(--surface); color: var(--ink); overflow: hidden; }
dialog.cmp::backdrop { background: rgba(12,12,12,.45); }
dialog.cmp[open] { display: flex; flex-direction: column; animation: pop .4s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(14px); } }
.cmp-in { display: flex; flex-direction: column; min-height: 0; padding: 28px 32px 32px; }
.cmp-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cmp-h h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.x { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); }
.cmp-s { overflow: auto; min-height: 0; }
.cmp table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.cmp thead th, .cmp thead td { position: sticky; top: 0; z-index: 2; border-top: 0; padding-top: 0; background: var(--surface); }
.cmp tbody th { width: 128px; font-weight: 400; color: var(--muted); }
.cmp tbody th, .cmp thead td:first-child, .cmp tr.pick td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.cmp thead td:first-child { z-index: 3; }
.cmp .on { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.tn { font-size: 15px; font-weight: 500; }
.tp { margin-top: 2px; color: var(--ink-2); }
.cmp small { display: block; font-size: 13px; color: var(--ink-2); }
.btn.sm { width: 100%; height: 38px; padding: 0 12px; font-size: 13px; }

/* The other pages: a page's top (its heading, words and buttons, with its big photo or clip on the pale
   panel beside it), bands, boxes and, on phones, a bar pinned to the bottom with the main button */
.top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px 64px; align-items: center; padding-top: 56px; }
.top h1, .pg-h h1 { font-size: clamp(32px, 3.8vw, 50px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.top .lead, .pg-h .lead { margin-top: 18px; max-width: 60ch; font-size: 16px; color: var(--ink-2); }
.top-m { position: relative; aspect-ratio: 4 / 3; background: var(--panel); overflow: hidden; isolation: isolate; }
.top-m img, .top-m video { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 6%; }
.pg-h { padding-top: 56px; }
.band-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin-bottom: 28px; }
.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sw { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.sw input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.btn.s { height: 38px; padding: 0 14px; font-size: 13px; }
.cant.one { grid-template-columns: minmax(0, 1fr); }
.cant .links { margin-top: 24px; }
.stick { display: none; }

/* Compare head units: the scorecards as boxes, the compare table on its own, the spec sheet */
.tcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tc { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--surface); }
.tc.rec { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tc-b { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 18px; }
.tc h3 { margin-top: 12px; font-size: 18px; letter-spacing: -.01em; }
.tc .specs { align-self: stretch; margin-top: 14px; }
.specs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tc-d { margin: 14px 0 20px; font-size: 14px; color: var(--ink-2); }
.tc .btn { margin-top: auto; }
.cmp-page .cmp-s { overflow: visible; }
.cmp-page thead th, .cmp-page thead td { top: 60px; padding-top: 12px; box-shadow: inset 0 -1px var(--line); }
.cmp tbody th[colspan] { position: static; width: auto; padding-top: 28px; font-size: 13px; font-weight: 500; color: var(--ink); }
.cmp tbody:first-of-type th[colspan] { padding-top: 16px; }
#snapshot:has(#dm-diff-only:checked) [data-same] { display: none; }
.sh { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sh .u-ph { flex: none; width: 92px; }
.sh .u-ph img { padding: 6%; }
.sh-n { display: block; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 400; color: var(--ink-2); }
.meta span { padding: 2px 8px; border: 1px solid var(--line); }
.acc-b.sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; max-width: none; padding-top: 8px; }
.sg { margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.sheet .kv > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.sheet .kv > div:first-child { padding-top: 11px; border-top: 1px solid var(--line); }
#spec-sheet:has(#dm-hide-empty:checked) .is-empty { display: none; }

/* The feature pages (CarPlay, Android Auto, Android head units): points, boxes, specs in the box
   style, the app tabs, a clip beside its words, and the questions beside their heading */
.pts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; margin-top: 32px; }
.pts li { padding-top: 14px; border-top: 1px solid var(--ink); font-size: 14px; color: var(--ink-2); }
.pts h3, .boxes h3 { margin-bottom: 6px; font-size: 16px; color: var(--ink); }
.boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 32px; }
.boxes > li { padding: 18px; border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.specbox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.specbox.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.specbox > li, .specbox > div { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line); font-size: 14px; }
.specbox dt { font-size: 12px; color: var(--muted); }
.specbox dd { margin: 2px 0 0; }
.band-h .pill { margin-bottom: 6px; }
.feat-h .mark { width: 88px; margin-bottom: 16px; }
.feat-h .mark img { width: 100%; height: auto; }
.note.wide { max-width: none; margin-top: 24px; }
.pp .note em { font-style: normal; color: var(--ink); }
.pp .note strong { font-weight: 500; color: var(--ink); }
.tc .dots { font-size: 14px; color: var(--ink-2); }
.band > .btns { margin-top: 28px !important; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 64px; align-items: start; }
.split .note { margin-top: 28px; }
.faq .faq-a { padding-bottom: 18px; font-size: 14px; color: var(--ink-2); max-width: 62ch; }
.faq .faq-a strong { font-weight: 500; color: var(--ink); }
.tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.tablist .chip { min-width: 128px; }
.chip[aria-selected=true] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tabpanel { margin-top: 24px; }
html.js .tabpanel[aria-hidden=true] { display: none; }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; margin-top: 16px; }
.apps li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px 14px; border: 1px solid var(--line); font-size: 13px; text-align: center; }
.apps img { width: 40px; height: 40px; object-fit: contain; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px 64px; align-items: center; }
.duo .dots { margin-top: 18px; color: var(--ink-2); }
.duo .note-t { margin-top: 14px; }
.how { margin-top: 24px; border: 1px solid var(--line); padding: 0 18px; }
.how summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; font-weight: 500; cursor: pointer; list-style: none; }
.how summary::-webkit-details-marker { display: none; }
.how summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.how[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.h2 + .tcs { margin-top: 32px; }
.how ol { list-style: decimal; padding: 0 0 16px 20px; font-size: 14px; color: var(--ink-2); }
.how li + li { margin-top: 6px; }
.kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--line-2); font-size: 13px; color: var(--ink); }
.vt { position: absolute; left: 14px; bottom: 14px; padding: 8px 12px; background: rgba(255,255,255,.92); font-size: 13px; opacity: 0; pointer-events: none; }
.vt:focus-visible { opacity: 1; pointer-events: auto; }
.top-m video { cursor: pointer; }

/* After you pay (/order/): what happens next as a tracker (order.js marks the steps done and the one
   the order is at, in orange), and the dash photo upload with its four photo slots as boxes: the
   file field lies over them, so a tap or a dropped photo anywhere on them chooses photos */
.ord { padding-bottom: 32px; }
.trk { margin-top: 72px; }
.track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px; margin-top: 28px; counter-reset: s; }
.track li { counter-increment: s; padding-top: 14px; border-top: 2px solid var(--line); font-size: 14px; color: var(--ink-2); transition: border-color .3s; }
.track li::before { content: "0" counter(s); display: block; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.track b { display: block; margin-bottom: 4px; font-weight: 500; color: var(--ink); }
.track [data-state=done] { border-top-color: var(--ink); }
.track [data-state=now] { border-top-color: var(--accent); }
.up { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px 64px; margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--line); }
.up .dots { margin-top: 16px; color: var(--ink-2); }
.f-l { display: block; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.drop { position: relative; }
.drop input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); background: var(--panel); transition: border-color .2s; }
.slot:not(.full)::before, .slot:not(.full)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.3px; margin: -.65px 0 0 -9px; background: var(--muted); }
.slot:not(.full)::after { transform: rotate(90deg); }
.drop:hover .slot { border-color: var(--line-2); }
.slot.full { background: var(--surface); }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot span { padding: 8px; font-size: 12px; color: var(--ink-2); text-align: center; overflow-wrap: anywhere; }
.f-note { margin-top: 8px; font-size: 12px; color: var(--muted); }
.up-f .btns { margin-top: 20px !important; }
.up-f .msg { margin-top: 16px; }
.msg:empty { display: none; }
.ord .split { margin-top: 96px; }
.split p + p { margin-top: 6px; }

/* Max's page (/supplier/): Simplified Chinese first, English underneath; static/supplier.js draws the orders */
.sup { padding-bottom: 32px; }
.sup .en { display: block; margin-top: 4px; font-size: max(.7em, 13px); color: var(--ink-2); }
.sup > h2 { margin-top: 56px; font-size: 20px; letter-spacing: -.015em; }
.orders { display: grid; gap: 16px; margin-top: 20px; }
.order { padding: 18px; border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.order h3 { font-size: 16px; color: var(--ink); }
.order p { margin-top: 10px; }
.order b { font-weight: 500; color: var(--ink); }
.order small { font-size: 12px; color: var(--muted); }
.order .photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.order .photos img { width: 120px; height: 90px; object-fit: cover; background: var(--panel); }
.order form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 12px; }
.order textarea, .order input { flex: 1 1 240px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; font-size: 16px; }
.order textarea:focus, .order input:focus { border-color: var(--ink); outline: none; }
.order button { display: inline-block; height: auto; min-height: 48px; padding: 8px 18px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; line-height: 1.3; text-align: center; }
.order button small { color: rgba(255,255,255,.75); }
.order button:disabled { opacity: .45; cursor: default; }
.sup .small, .form-note { font-size: 13px; color: var(--ink-2); }
.form-note { flex-basis: 100%; }

/* Contact, refunds and terms: plain pages in the same type */
.doc { padding-bottom: 32px; }
.boxes.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.boxes > li { display: flex; flex-direction: column; }
.boxes > li > p + p, .boxes > li > .dots { margin-top: 8px; }
.boxes > li > .btns { margin-top: auto !important; padding-top: 16px; }
.boxes strong { font-weight: 500; color: var(--ink); }
.prose { max-width: 72ch; color: var(--ink-2); }
.prose > * + * { margin-top: 12px; }
.prose h2:not(.h2), .prose h3 { margin-top: 40px; font-size: 20px; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose .h2 + h3 { margin-top: 28px; }
.prose ul > li { position: relative; padding-left: 16px; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .75em; width: 6px; height: 1px; background: var(--ink); }
.prose ol { list-style: decimal; padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose li p { margin: 0; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--accent); }
.legal { margin-top: 48px; }
.legal.band { margin-top: 96px; }

/* The 404 */
.nf { padding-block: 96px 128px; }
.nf-n { font-size: clamp(88px, 14vw, 180px); font-weight: 500; line-height: .9; letter-spacing: -.06em; color: var(--line-2); }
.nf h1 { margin-top: 24px; font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }

/* The move between a kit card and its page (static/move.js): the card's photo panel glides into the
   kit page's framed image while the page cross-fades under it, as look sample A did. */
::view-transition-group(kit) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .75, .15, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

@media (max-width: 1100px) {
  .nav { gap: 20px; }
  .units { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-b.sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pts, .specbox.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boxes, .boxes.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .wrap { padding-inline: 20px; }
  .menu { display: grid; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 60px; flex-direction: column; gap: 0; padding: 8px 20px 20px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 16px; }
  .bar.open .nav { display: flex; }
  .nav a { padding: 12px 0; opacity: 1; border-bottom: 1px solid var(--line); }
  .nav a[aria-current] { text-decoration: none; font-weight: 500; }
  .hero { height: 82svh; min-height: 540px; }
  .hero-in { padding-bottom: 44px; }
  .find { padding-top: 72px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .band { margin-top: 96px; }
  .after.four, .units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio, .learn, .irow .learn, .show, .two, .cant, .zero { grid-template-columns: 1fr; }
  .cant { margin-block: 96px; }
  .zero { margin-block: 96px 72px; }
  .enq { grid-template-columns: 1fr; }
  .cfg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "choices" "sum"; padding-top: 20px; }
  .media { position: static; margin-top: 20px; }
  .build, [data-n] { display: none; }
  .tb { width: 60px; }
  .head h1 { margin-top: 14px; font-size: 26px; }
  .summary { margin: 28px -20px 0; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); }
  .info { padding-top: 72px; }
  .irow { grid-template-columns: 1fr; gap: 16px; }
  .kv > div { grid-template-columns: 128px 1fr; gap: 16px; }
  .cmp-in { padding: 20px; }
  .top, .duo, .split { grid-template-columns: minmax(0, 1fr); }
  .top { padding-top: 32px; }
  .up { grid-template-columns: minmax(0, 1fr); margin-top: 72px; }
  .trk { margin-top: 56px; }
  .track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .track li { padding: 0 0 20px 18px; border-top: 0; border-left: 2px solid var(--line); }
  .track li::before { margin-bottom: 4px; }
  .track [data-state=done] { border-left-color: var(--ink); }
  .track [data-state=now] { border-left-color: var(--accent); }
  .pg-h { padding-top: 32px; }
  .cmp-page .cmp-s { overflow-x: auto; }
  .cmp-page thead th, .cmp-page thead td { top: 0; }
  .stick { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); transform: translateY(110%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s; }
  .stick.show { transform: none; visibility: visible; }
  .stick .btn { width: 100%; }
}
@media (max-width: 560px) {
  .after, .after.four, .feats, .acc-b.sheet, .pts, .boxes, .boxes.four, .specbox { grid-template-columns: 1fr; }
  .tcs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 2px 20px 6px; scroll-padding-inline: 20px; }
  .tcs > * { scroll-snap-align: start; }
  .foot .wrap { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}