/* Desktop sheet. The shell is a white top bar over one centred column; the report is a hero, a
   strip of four figures, then the evidence on the left and the checks on the right. Every legacy
   class the other pages use (.card, table.fields, .btn, .alerts, .comps, .kpi, .wrow, .ev …) is
   kept, so a page that has not been re-laid still renders. */
:root{--blue:#0073cf;--blue-dark:#005ba6;--red:#b71234;--red-dark:#960e2a;--grey:#9a9b9c;--ink:#14181c;--ink2:#5a6470;--ink3:#7b8794;
  --line:#e3e8ee;--bg:#f4f6f9;--ok:#2e7d32;--warn:#e08a00;--alert:#b71234;--pending:#6b7280;--r:12px;--sh:0 1px 2px rgba(16,24,40,.05)}
*{box-sizing:border-box}
body{margin:0;font-family:Lato,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14.5px;line-height:1.5}
a{color:var(--blue)}
b,strong{font-weight:700}

/* Licenz is the New Zealand number plate typeface (SparkyType, 2006). It is free for personal
   use and not redistributable, so static/Licenz.ttf is gitignored; a clone without it falls back. */
@font-face{font-family:"Licenz";src:url("/static/Licenz.ttf") format("truetype");font-display:swap}

/* ---------------------------------------------------------------- shell */
header.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top-in{max-width:1080px;margin:0 auto;padding:0 20px;height:58px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{height:26px;display:block}
.brand .product{font-weight:700;font-size:14px;color:var(--ink2);padding-left:10px;border-left:1px solid var(--line);line-height:1;white-space:nowrap}
.topnav{display:flex;align-items:center;gap:4px;font-size:14px}
.topnav a{color:var(--ink2);text-decoration:none;padding:7px 10px;border-radius:8px;font-weight:700;white-space:nowrap}
.topnav a:hover{background:#f1f4f8;color:var(--ink)}
.topnav a.on{color:var(--blue);background:#eaf3fc}
.topnav details.more{position:relative;flex:none}
/* inline-flex with a gap keeps the caret beside the word: as a " \25BE" in ::after it was a
   break opportunity, and the one shrinkable item in the bar wrapped its caret to a second line. */
.topnav details.more summary{list-style:none;cursor:pointer;color:var(--ink2);font-weight:700;padding:7px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.topnav details.more summary:hover{background:#f1f4f8;color:var(--ink)}
.topnav details.more[open] summary{background:#f1f4f8;color:var(--ink)}
.topnav details.more summary::-webkit-details-marker{display:none}
.topnav details.more summary::after{content:"\25BE";font-size:11px;line-height:1;transition:transform .15s}
.topnav details.more[open] summary::after{transform:rotate(180deg)}
.topnav details.more .menu{position:absolute;top:38px;left:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(16,24,40,.12);padding:6px;min-width:220px;display:flex;flex-direction:column;z-index:30}
.topnav details.more .menu a{padding:9px 12px;font-weight:400}
.top-cta{white-space:nowrap}
.wrap{max-width:1080px;margin:20px auto 30px;padding:0 20px}
footer{max-width:1080px;margin:10px auto 40px;padding:0 20px;font-size:12px;color:var(--ink3);text-align:center}

/* ---------------------------------------------------------------- cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;box-shadow:var(--sh)}
.card h2{margin:0;padding:13px 18px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line)}
.card h2 .h2i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:#eaf3fc;color:var(--blue);flex:none;margin:0}
.card h2 .h2x{margin-left:auto;font-weight:400;font-size:12px;color:var(--ink3)}
.card .body{padding:16px 18px}
.card .body>:first-child{margin-top:0}
.legend{font-size:12px;color:var(--ink3);margin:10px 0 0;line-height:1.45}
.muted{color:var(--ink3)}
.ai{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7a5a00;background:#fff4d6;border-radius:4px;padding:2px 6px;vertical-align:middle}

/* Small-caps key and the status colours, shared by the strip, the specs and the check rows */
.k{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.c-clear{color:var(--ok)}.c-check{color:var(--warn)}.c-problem{color:var(--alert)}.c-waiting{color:var(--pending)}.c-unknown{color:#9aa5b1}.c-soon{color:var(--pending)}
.mk{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.chip{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#f1f4f8;white-space:nowrap}
.chip.c-clear{background:#e6f4ea}.chip.c-check{background:#fff3e0}.chip.c-problem{background:#fde8ec}.chip.c-waiting{background:#eef0f3}.chip.c-unknown{background:#f3f4f6}

/* ---------------------------------------------------------------- hero */
.hero-card{display:grid;grid-template-columns:1fr 400px;border-top:3px solid var(--blue);overflow:hidden;margin-bottom:14px}
.hero-l{padding:22px 26px 24px}
.hid{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.plate{font-family:"Licenz","Archivo Black","Helvetica Neue",Arial,sans-serif;font-size:19px;letter-spacing:1px;line-height:1;
  padding:6px 12px 4px;border-radius:6px;background:linear-gradient(180deg,#fdfdfb 0%,#f1f2ee 52%,#e7e8e3 100%);
  border:1px solid #b9bcb6;box-shadow:inset 0 0 0 2px #16181b,0 1px 2px rgba(0,0,0,.25);color:#16181b;white-space:nowrap}
.vsrc{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.vsrc svg{color:var(--ok)}
.hero-l h1{margin:0 0 4px;font-size:36px;line-height:1.1;letter-spacing:-.4px;font-weight:900}
.hsub{margin:0 0 12px;font-size:15px;color:var(--ink2)}
.hchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.hchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;background:#f1f4f8;color:var(--ink2)}
.hchip i{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.18);display:inline-block}
.hrate{display:flex;gap:18px;margin-bottom:14px}
.stars{display:inline-flex;align-items:center;gap:1px}
.stars svg{fill:#d9dee5}.stars svg.on{fill:#f0a500}
.stars small{margin-left:6px;font-size:12.5px;color:var(--ink2)}
.hprice{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.hprice b{font-size:30px;color:var(--blue);line-height:1}
.was{font-size:13px;color:var(--ink3);text-decoration:line-through}
.hprice small{font-size:12px;color:var(--ink3)}
.hcta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cta-note{font-size:12px;color:var(--ink3)}
.hero-r{position:relative;background:#eef1f5;min-height:280px}
.hero-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-r img.model{object-fit:contain;padding:18px;background:#fff}
.hero-r .cap{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.72);color:var(--ink3);font-size:10.5px;font-weight:600;border-radius:6px;padding:3px 8px;opacity:.8;backdrop-filter:blur(3px);max-width:calc(100% - 24px)}
.hero-r .cap svg{opacity:.7}
.nopic{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-dark));padding:20px}
.nopic b{font-family:"Licenz","Archivo Black",sans-serif;font-size:40px;letter-spacing:3px}
.nopic span{opacity:.85;font-size:13px}

/* ---------------------------------------------------------------- the strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 18px}
.strip.in{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0 0 14px;border-radius:10px}
.stat{background:#f8fafc;padding:13px 16px;display:block;color:inherit;text-decoration:none;min-width:0}
a.stat:hover{background:#eef3f9}
.stat .k{justify-content:space-between}
.stat .k svg{color:#9aa5b1;flex:none;margin-left:auto}
.stat .stag{font-size:9.5px;letter-spacing:.06em;color:#7a5a00;background:#fff4d6;border-radius:4px;padding:1px 5px}
.stat .v{display:block;margin-top:6px;font-size:20px;font-weight:900;line-height:1.15;letter-spacing:-.2px;color:var(--ink)}
.stat .v small{display:inline;font-size:12px;font-weight:700;color:var(--ink3);margin:0 0 0 2px}
.stat .v.ok{color:var(--ok)}.stat .v.warn{color:var(--warn)}.stat .v.alert{color:var(--alert)}.stat .v.pending{color:var(--pending);font-size:16px;font-weight:700}
.stat small{display:block;margin-top:3px;font-size:11.5px;color:var(--ink3);line-height:1.35}

/* ---------------------------------------------------------------- two columns */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.side{position:sticky;top:96px}
.foot{margin:6px 0 0}

/* Vehicle details and running costs: a three-column grid of key over value. A locked cell is a
   check waiting on a data connection: grey, with the lock, and the hover title carries the
   source and what unlocks it. */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.spec{background:#fff;box-shadow:0 0 0 1px var(--line);padding:11px 14px;display:block;color:inherit;text-decoration:none;min-height:62px;min-width:0}
.spec .k svg{flex:none;color:#9aa5b1}
.spec .v{display:block;margin-top:3px;font-size:16px;font-weight:700;letter-spacing:-.2px;line-height:1.25;overflow-wrap:anywhere}
.spec .v .u{font-size:12px;font-weight:600;color:var(--ink3);margin-left:4px}
.spec .v .stars{margin-right:6px;vertical-align:-2px}
.spec .n{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px}
.spec.s-pending .v,.spec.s-soon .v,.spec.s-unknown .v{color:var(--pending);font-weight:600;font-size:13.5px}
.spec.s-warn .v{color:var(--warn)}
.spec.s-alert .v{color:var(--alert)}
a.spec:hover{background:#f7fafd}
a.spec .go{color:var(--blue)}

/* Safety */
.srate{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:14px}
.srate .stars svg{width:18px;height:18px}
.fg{margin:0 0 10px}
.fg small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:2px}
.fg p{margin:0;font-size:13px;color:var(--ink2);line-height:1.5}

/* Faults */
.sev{display:flex;height:6px;border-radius:3px;background:#e6eaef;overflow:hidden;margin:2px 0 10px}
.sev span{display:block;height:100%}
.fmostly{margin:0 0 12px;font-size:13.5px;color:var(--ink2)}

/* Three years */
.tyhead{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.tyhead b{font-size:24px;font-weight:900;letter-spacing:-.3px}
.tyhead small{font-size:12.5px;color:var(--ink3)}
table.fields.ty td.l{width:34%;font-weight:700}
.tymiss{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--ink2)}
.tymiss li{padding:2px 0}

/* Check rows and record folds: a summary line that opens to the rows behind it */
.chks,.recs{padding:12px 14px 14px}
.chk,.rec{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fff}
.chk>summary,.rec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:13.5px}
.chk>summary::-webkit-details-marker,.rec>summary::-webkit-details-marker{display:none}
.chk>summary .t,.rec>summary .t{font-weight:700;flex:1;min-width:0;line-height:1.2}
.chk>summary .tag,.chk>summary .chip,.rec>summary .chip,.rec>summary small{flex:none}
.rec>summary small{font-size:11.5px;color:var(--ink3);white-space:nowrap}
.chk>summary .tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.chk>summary .chev,.rec>summary .chev{color:#9aa5b1;display:inline-flex;transition:transform .15s}
.chk[open]>summary .chev,.rec[open]>summary .chev{transform:rotate(90deg)}
.chk[open]>summary,.rec[open]>summary{border-bottom:1px solid var(--line)}
.chk:hover,.rec:hover{border-color:#cfd6de}
.chk-body{padding:10px 12px 6px}
.chk-body .lead{margin:0 0 8px;font-size:13px;color:var(--ink2)}
.chk-body .lead b{color:var(--ink)}
.chk-h{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin:14px 0 8px}
.chks table.fields td,.recs table.fields td{font-size:12.5px;padding:6px 4px}
.chks table.fields td.l{width:44%}
.chks table.fields td.s{display:none}
.recs table.fields{margin:0;padding:4px 12px}
.recs .rec>table{display:block;padding:6px 12px 8px}
details.fold.rec>summary{padding:9px 12px}
details.fold.rec>summary::after{content:none}
details.fold.rec>summary small{margin-left:8px}
.rec>ul{padding:6px 12px 8px 30px}

/* Sidebar offers: the listing, the guide */
.card.offer{border-top:3px solid var(--red)}
.ohead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.pillx{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#fde8ec;color:var(--red);white-space:nowrap}
.pillx.grey{background:#f1f4f8;color:var(--ink2)}
.oprice{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.oprice b{font-size:32px;font-weight:900;line-height:1;letter-spacing:-.5px}
.oprice.guide b{color:var(--blue)}
.oprice small{font-size:12.5px;color:var(--ink3)}
.obasis{margin:0 0 12px;font-size:13px;color:var(--ink2)}
.oticks{list-style:none;margin:0 0 14px;padding:0;font-size:13.5px}
.oticks li{display:flex;align-items:center;gap:8px;padding:3px 0}
.oticks svg{color:var(--ok);flex:none}
.btn.wide{display:flex;justify-content:center;width:100%;margin-bottom:8px}

/* Next steps */
.nxs{padding:6px 8px}
.nx{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;text-decoration:none;color:inherit}
.nx:hover{background:#f4f7fa}
.nx .ico{width:30px;height:30px;border-radius:8px;background:#eaf3fc;color:var(--blue);display:inline-flex;align-items:center;justify-content:center;flex:none}
.nx .g{flex:1;min-width:0;line-height:1.25}
.nx .g b{display:block;font-size:13.5px}
.nx .g small{font-size:11.5px;color:var(--ink3)}
.nx .chev{color:#9aa5b1;display:inline-flex}

/* Sources */
.srcs{list-style:none;margin:0;padding:0;font-size:13px}
.srcs li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #eef0f3}
.srcs li:last-child{border-bottom:0}
.srcs b{color:var(--ink2)}

/* Pinned bar: appears once the hero has scrolled off */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:25;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(16,24,40,.08);transform:translateY(110%);transition:transform .18s}
.stick.show{transform:none}
.stick-in{max-width:1080px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
.stick .g{flex:1;min-width:0;line-height:1.2}
.stick .g b{display:block;font-size:15px}
.stick .g small{font-size:12px;color:var(--ink3)}
.stick .plate{font-size:16px}

/* ---------------------------------------------------------------- legacy components */
.hero{display:grid;grid-template-columns:1fr 380px;gap:16px}
.hero .title{font-size:24px;font-weight:700;margin:0 0 4px}
.hero .sub{color:#555;margin:0 0 12px}
.hero img{width:100%;border-radius:8px;object-fit:cover;aspect-ratio:4/3;background:#eee}
.price{font-size:26px;font-weight:700;color:var(--blue)}
.pill{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:#eef2f7;color:#333;margin-right:6px}
.pill.ok{background:#e6f4ea;color:var(--ok)}.pill.warn{background:#fff3e0;color:var(--warn)}.pill.alert{background:#fde8ec;color:var(--alert)}.pill.pending{background:#eef0f3;color:var(--pending)}.pill.unknown{background:#f3f4f6;color:#555}
.alerts{border-left:4px solid var(--ok);padding:12px 16px;background:#fff;border-radius:var(--r);margin-bottom:16px;border:1px solid var(--line)}
.alerts.bad{border-left-color:var(--alert)}
.alerts h3{margin:0 0 6px;font-size:15px}
table.fields{width:100%;border-collapse:collapse}
table.fields td{padding:8px 6px;border-bottom:1px solid #eef0f3;vertical-align:top}
table.fields td.l{width:38%;color:#444}
table.fields td.v{font-weight:600}
table.fields td.s{width:26%;color:#777;font-size:12px}
table.fields tr:last-child td{border-bottom:0}
.note{display:block;color:#777;font-size:12px;font-weight:400;margin-top:2px}
details.fold>summary{cursor:pointer;list-style:none;display:block}
details.fold>summary .fold-line{display:inline}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:'\25BE';color:#999;font-size:11px;margin-left:6px;display:inline-block;transition:transform .15s}
details.fold[open]>summary::after{transform:rotate(180deg)}
details.fold>.note{margin-top:6px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.alert{background:var(--alert)}.dot.pending{background:var(--pending)}.dot.unknown{background:#bbb}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* The home page's plate search: the plate centred at a size a desktop hero can carry, and the
   odometer and the button on the line under it. The plate itself is lib/plate.py. */
.search{display:flex;gap:8px}
.search input{flex:1;padding:12px 14px;font-size:16px;border:1px solid var(--grey);border-radius:8px;font-family:inherit}
.btn{background:var(--red);color:#fff;border:0;border-radius:8px;padding:11px 18px;font-weight:700;font-size:14.5px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px;font-family:inherit;line-height:1.2}
.btn:hover{background:var(--red-dark)}
.btn.blue{background:var(--blue)}.btn.blue:hover{background:var(--blue-dark)}
.btn.ghost{background:#fff;color:var(--blue);border:1px solid #cfd6de}.btn.ghost:hover{background:#f4f7fa;border-color:var(--blue)}
.btn.sm{padding:7px 12px;font-size:13px}
table.comps{width:100%;border-collapse:collapse;font-size:13.5px}
table.comps th,table.comps td{padding:7px 6px;border-bottom:1px solid #eef0f3;text-align:left}
table.comps th{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
table.comps tr.me{background:#eaf3fc;font-weight:700}
.feat{display:flex;flex-wrap:wrap;gap:6px}
.feat span{background:#f1f4f8;border-radius:6px;padding:3px 9px;font-size:12.5px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;align-items:center}
.thumbs{display:flex;gap:6px;margin-top:8px}.thumbs img{width:70px;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi div{background:#f8fafc;border-radius:8px;padding:10px;text-align:center}
.kpi b{display:block;font-size:20px;color:var(--blue)}
.kpi small{color:#666}
.kpi b.ok{color:var(--ok)}.kpi b.warn{color:var(--warn)}.kpi b.alert{color:var(--alert)}

/* Stop blocks, record score, timeline, odometer integrity */
.stop{background:#fff;border:1px solid var(--alert);border-left:6px solid var(--alert);border-radius:var(--r);padding:14px 16px;margin-bottom:16px}
.stop-tag{display:inline-block;background:var(--alert);color:#fff;font-size:11px;font-weight:700;letter-spacing:2px;padding:2px 8px;border-radius:3px}
.stop h3{margin:8px 0 6px;font-size:19px}
.stop-next{font-size:11px;font-weight:700;letter-spacing:1.5px;color:#666;margin:0 0 6px}
.stop-steps{margin:0;padding-left:20px}
.stop-steps li{padding:3px 0}
.scorewrap{display:flex;gap:16px;align-items:center}
.scoreval{flex:0 0 96px;text-align:center;border-radius:10px;padding:10px 6px;background:#f8fafc;border:1px solid var(--line)}
.scoreval b{display:block;font-size:34px;line-height:1}
.scoreval small{color:#666}
.scoreval.ok b{color:var(--ok)}.scoreval.warn b{color:var(--warn)}.scoreval.alert b{color:var(--alert)}
td.num{text-align:right;white-space:nowrap}
td.num.bad{color:var(--alert);font-weight:700}
.comps td.bad{color:var(--alert);font-weight:700}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:flex;gap:14px;padding:8px 0;border-left:2px solid var(--line);margin-left:6px;padding-left:16px;position:relative}
.timeline li:before{content:"";position:absolute;left:-6px;top:14px;width:9px;height:9px;border-radius:50%;background:var(--blue)}
.tl-date{flex:0 0 96px;color:#666;font-size:13px}
.tl-body{flex:1}
.ev{background:#fff;border:1px solid var(--line);border-left:6px solid var(--pending);border-radius:var(--r);padding:12px 16px;margin-bottom:12px}
.ev.alert{border-left-color:var(--alert)}.ev.warn{border-left-color:var(--warn)}.ev.info{border-left-color:var(--blue)}
.ev.new{box-shadow:0 0 0 2px #fff8e6 inset}
.ev h4{margin:0 0 4px;font-size:16px}
.ev .move{font-size:12px;color:#666;margin:0 0 8px}
.ev .move b{color:var(--ink)}
.ev ol{margin:0;padding-left:20px}
.wrow{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #eef0f3}
.wrow:last-child{border-bottom:0}
.wrow .plate{font-weight:700;font-size:18px;letter-spacing:1px;flex:0 0 116px}
.wrow .meta{flex:1;min-width:0}
.wrow .acts{display:flex;gap:6px;white-space:nowrap;align-items:center}
.badge{background:var(--alert);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:2px 7px;margin-left:6px}
.tierbox{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:pointer;display:block}
.tierbox b{margin-left:4px}

/* ---------------------------------------------------------------- home hero (design 6, "sky tint")
   Every page wears the pill (nav, plate box, CTA); the home page drops the plate box, and floats
   the pill over a pale blue wash with its own plate drawn large. Everything below the pill rules is
   scoped to body.home so no other page picks it up. */
body.home{background:linear-gradient(#dcecf9 0%,#f4f9fd 45%,#fff 70%,var(--bg) 100%) fixed;position:relative}
body.home::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;z-index:2;
  background:linear-gradient(90deg,var(--red) 0 33%,var(--blue) 33% 66%,var(--grey) 66%)}
body.home .wrap{max-width:none;margin:0;padding:0}
/* The pill sits at the top of the page and scrolls away with it. It was sticky; Will asked for it
   anchored, on every page. */
header.hnav{position:relative;z-index:20;display:flex;justify-content:center;padding:22px 20px 0;pointer-events:none}
/* One bar, one width, every page. It used to be shrink-to-fit and carried a small plate box on
   some pages and not others, so it measured 939px here and 704px there and resized on every
   navigation. The plate box went on 2026-09-23 (every page that had it owns a plate box of
   its own), and the width is now the content plus a little air, with the CTA pinned right. */
.hnav-in{pointer-events:auto;background:#fff;border-radius:999px;box-shadow:0 8px 30px rgba(16,24,40,.12);display:flex;align-items:center;gap:18px;padding:8px 10px 8px 22px;height:58px;width:720px;max-width:100%}
.hnav-in .top-cta{margin-left:auto}
.hnav-in .brand img{height:28px}
.hnav-in .topnav{gap:2px}
.hnav-in .top-cta{border-radius:999px}
/* The watermark sits on the page, not inside the hero, so the product pages get it too. It is
   absolute rather than fixed: it belongs to the wash at the top and should scroll away with
   it, not float over the sections below. Whole, not bled off the edge — cropped, a logo
   stops reading as the mark and becomes a shape. */
.wash-ghost{position:absolute;left:0;top:260px;width:50vw;height:21.8vw;z-index:0;pointer-events:none;
  background:url(/static/mark-turners.svg) no-repeat left center/contain;opacity:.05}
.hh{position:relative;overflow:hidden;min-height:calc(100vh - 80px);padding:96px 20px 60px;text-align:center}
.hh-in{position:relative;max-width:780px;margin:0 auto}
.hh .eyebrow,.hs .eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--ink2);font-weight:700}
.hh .eyebrow::before,.hs .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.hh h1{font-size:58px;line-height:1.05;margin:18px 0 12px;letter-spacing:-.02em;font-weight:900;color:var(--ink)}
.hh .sub{font-size:19px;color:#3a4652;margin:0 auto;max-width:720px;line-height:1.45}
/* The plate: a white plate with a black rim and the NZ block, drawn from the same form fields
   search_box() posts (q and odo to /report), so the report route sees no difference. */
/* The hero types into the real plate: lib/plate.py draws it, so the home page and the phone
   are the same object. The button sits under it rather than beside it — a plate is 360x124, so
   a field stretched to a button's height stops being plate-shaped. */
.bigplate{margin:32px auto 0;max-width:560px;text-align:center}
.bigplate .nzp{max-width:560px}
.bigplate .row{display:flex;justify-content:center;margin-top:16px}
.bigplate .btn.big{display:inline-flex;align-items:center;justify-content:center;height:58px;min-width:230px;font-size:21px;line-height:1;padding:0 40px;border-radius:14px;text-align:center;box-shadow:0 12px 26px rgba(183,18,52,.3)}
.bigplate .odoline{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:12px;font-size:13.5px;color:var(--ink2)}
.bigplate .odoline label{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:700;color:var(--ink2)}
.bigplate .odoline input{width:110px;padding:7px 10px;font-size:14px;border:1px solid #cfd6de;border-radius:8px;font-family:inherit;background:#fff}
/* The ten checks as a native dropdown: <details>, so it opens and closes with no script. */
details.checks{margin:16px auto 0;text-align:left}
details.checks summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:0 18px;height:50px;font-size:16px;font-weight:700;color:var(--ink);box-shadow:0 2px 8px rgba(16,24,40,.05)}
details.checks summary::-webkit-details-marker{display:none}
details.checks summary::after{content:"\25BE";color:var(--grey);font-size:14px;transition:transform .15s}
details.checks[open] summary{border-radius:10px 10px 0 0;border-bottom-color:transparent;box-shadow:none}
details.checks[open] summary::after{transform:rotate(180deg)}
details.checks summary .l{display:flex;align-items:center;gap:10px}
details.checks summary .n{background:#eaf3fc;color:var(--blue);border-radius:999px;font-size:12px;font-weight:700;padding:3px 9px}
details.checks .menu{background:#fff;border:1.5px solid var(--line);border-top:0;border-radius:0 0 10px 10px;padding:10px 8px 12px;display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;box-shadow:0 14px 30px rgba(16,24,40,.12)}
details.checks .it{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:7px;font-size:14px;line-height:1.3}
details.checks .it:hover{background:#eaf3fc}
details.checks .it i{flex:0 0 18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-size:11px;display:flex;align-items:center;justify-content:center;margin-top:1px}
details.checks .it small{display:block;color:var(--ink2);font-size:12px;margin-top:1px}
.hh .chips{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:18px}
.hh .chips span{background:#fff;border:1.5px solid #cfe0f0;color:var(--blue-dark);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700}
.hh .legend{max-width:640px;margin:22px auto 0;text-align:center}
/* The sample report walkthrough under the hero (design C). Six radio-driven tabs, no script:
   the inputs sit before the tab strip and the panels so :checked can reach both. Everything is
   prefixed hs- because .tabs, .tile, .strip and .stat already mean things on the report. */
.hs{position:relative;padding:64px 20px 80px;background:linear-gradient(#fff,var(--bg));border-top:1px solid var(--line)}
.hs-in{max-width:1080px;margin:0 auto}
.hs h2{font-size:38px;line-height:1.1;letter-spacing:-.02em;margin:12px 0 8px;font-weight:900}
.hs .sub{font-size:16.5px;color:var(--ink2);margin:0;max-width:760px}
/* The car above the tabs: picture left, identity right, always visible whichever tab is open. */
.hs-car{display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:22px;box-shadow:var(--sh)}
.hs-pic{margin:0;position:relative;border-radius:9px;overflow:hidden;background:#eef2f7;aspect-ratio:4/3}
.hs-pic img{width:100%;height:100%;object-fit:cover;display:block}
.hs-pic img.model{object-fit:contain;padding:12px}
.hs-pic figcaption{position:absolute;left:10px;bottom:10px;background:rgba(20,24,28,.78);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:4px 9px}
.hs-idtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hs-plate{display:inline-block;border:2px solid #111;border-radius:6px;padding:2px 10px;font-family:"Licenz","Archivo Black","Arial Black",Lato,sans-serif;font-weight:900;font-size:16px;letter-spacing:.12em;background:#fff}
.hs-sub{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);background:#f1f4f8;border-radius:6px;padding:4px 9px}
.hs-name{font-size:30px;font-weight:900;letter-spacing:-.02em;margin:8px 0 2px}
.hs-spec{font-size:14px;color:var(--ink2)}
.hs-price{font-size:26px;font-weight:900;color:var(--blue);margin-top:8px}.hs-price small{font-size:12px;font-weight:400;color:var(--ink3);margin-left:8px}
.hs-tabs{position:relative;margin-top:14px}
.hs-tabs>input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.hs-tl{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.hs-tl label{padding:10px 16px;font-weight:700;color:var(--ink2);border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;font-size:14.5px;margin-bottom:-1px}
.hs-tl label:hover{color:var(--ink)}
.hs-p{display:none;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;padding:20px 22px;box-shadow:var(--sh)}
#hs-1:checked~.hs-tl label[for=hs-1],#hs-2:checked~.hs-tl label[for=hs-2],#hs-3:checked~.hs-tl label[for=hs-3],
#hs-4:checked~.hs-tl label[for=hs-4],#hs-5:checked~.hs-tl label[for=hs-5],#hs-6:checked~.hs-tl label[for=hs-6]{color:var(--blue);border-color:var(--blue)}
#hs-1:checked~.hs-p1,#hs-2:checked~.hs-p2,#hs-3:checked~.hs-p3,#hs-4:checked~.hs-p4,#hs-5:checked~.hs-p5,#hs-6:checked~.hs-p6{display:block}
.hs-cols{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}
.hs-list{display:flex;flex-direction:column;gap:6px}
.hs-list .k,.hs-cols>div>.k{margin-bottom:4px}
.hs-row{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px}
.hs-row b{font-weight:700}
.hs-row .hs-val{color:var(--ink2);margin-left:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-row .hs-src{margin-left:auto;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-weight:700;flex:none}
.hs-row .hs-st{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px;flex:none}
.hs-row .hs-src+.hs-st{margin-left:0}
.hs-row .hs-st:last-child:not(.hs-src+.hs-st){margin-left:auto}
.hs-mark{width:8px;height:8px;border-radius:50%;flex:none}
.hs-mark.ok,.hs-st.ok{background:#e7f4eb;color:var(--ok)}.hs-mark.ok{background:var(--ok)}
.hs-mark.warn,.hs-st.warn{background:#fdf2e2;color:#8a5200}.hs-mark.warn{background:var(--warn)}
.hs-mark.alert,.hs-st.alert{background:#fcebef;color:var(--alert)}.hs-mark.alert{background:var(--alert)}
.hs-mark.pending,.hs-st.pending{background:#edf0f3;color:var(--pending)}.hs-mark.pending{background:#b9c2cc}
.hs-note{font-size:12.5px;color:var(--ink3);margin:10px 0 0;line-height:1.45}
.hs-stop{border:1px solid var(--alert);border-left:6px solid var(--alert);border-radius:9px;padding:10px 12px}
.hs-stop b{display:block;font-size:15px;margin:5px 0 2px}.hs-stop p{margin:0;font-size:12.5px;color:var(--ink2)}
.hs-okbox{border:1px solid var(--line);border-left:6px solid var(--ok);border-radius:9px;padding:10px 12px}
.hs-okbox b{display:block;font-size:15px}.hs-okbox p{margin:3px 0 0;font-size:12.5px;color:var(--ink2)}
.hs-score{display:flex;gap:16px;align-items:center;margin-top:14px;font-size:13px;color:var(--ink2)}
.hs-num{font-size:40px;font-weight:900;line-height:1}.hs-num small{font-size:13px;color:var(--ink3);font-weight:400;margin-left:3px}
.hs-num.ok{color:var(--ok)}.hs-num.warn{color:var(--warn)}.hs-num.alert{color:var(--alert)}
.hs-fault{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.hs-fault:last-of-type{border-bottom:0}
.hs-fault i{flex:none;width:32px;height:32px;border-radius:9px;background:#fdf2e2;color:#8a5200;font-style:normal;font-weight:900;display:flex;align-items:center;justify-content:center}
.hs-fault i.hi{background:#fcebef;color:var(--alert)}
.hs-fault b{display:block;font-size:14px}.hs-fault span{font-size:12.5px;color:var(--ink2);display:block}
.hs-fault .hs-like{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--alert);background:#fcebef;border-radius:999px;padding:2px 8px;margin:3px 0 3px}
.hs-caveat{margin-top:12px;border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:9px;padding:10px 12px;font-size:13px;line-height:1.45;color:var(--ink2);background:#fffdf7}
.hs-caveat b{color:var(--ink)}
.hs-fault em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;background:#f1f4f8;border-radius:6px;padding:4px 8px;white-space:nowrap;color:var(--ink2);text-align:right;flex:none}
.hs-kvs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.hs-kvs.one{grid-template-columns:1fr}
.hs-kv.pending b{color:var(--pending);font-weight:700}
.hs-kv{border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.hs-kv b{display:block;font-size:16px;margin-top:2px}.hs-kv small{font-size:10.5px;color:var(--ink3)}
.hs-big{font-size:30px;font-weight:900;letter-spacing:-.01em;margin:2px 0 6px}.hs-big.blue{color:var(--blue)}
.hs-curve{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.hs-curve .k{margin-bottom:8px}
.hs-curve svg{display:block;max-width:560px}
.hs-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.hs-tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--sh)}
.hs-tile b{display:block;font-size:22px;font-weight:900;letter-spacing:-.01em}.hs-tile span{font-size:12.5px;color:var(--ink2)}
.hs-tile small{display:block;font-size:10.5px;color:var(--ink3);margin-top:5px}
.hs .legend{margin-top:18px}
@media (max-width:760px){
  .hs{padding:40px 16px 50px}
  .hs h2{font-size:28px}
  .hs-cols{grid-template-columns:1fr}
  .hs-car{grid-template-columns:1fr;padding:12px}
  .hs-name{font-size:24px}
  .hs-tiles{grid-template-columns:1fr}
  .hs-kvs{grid-template-columns:1fr}
  .hs-row{flex-wrap:wrap}
  .hs-row .hs-val{white-space:normal;width:100%;order:9}
  .hs-p{padding:14px}
}
/* ---------------------------------------------------------------- home page: under the sample
   Four bands, alternating grey and white like the rest of the page, each a centred 1080 column.
   Prefixed hb- (band), hw- (how it works), ht- (trust), hv- (vault), hq- (faq). */
.hb{padding:72px 20px;border-top:1px solid var(--line)}
.hb.hw,.hb.hv,.hb.hf{background:var(--bg)}
.hb.ht,.hb.hd{background:#fff}
.hb-in{max-width:1080px;margin:0 auto}
.hb .k{margin-bottom:10px}
.hb h2{font-size:34px;line-height:1.12;letter-spacing:-.02em;margin:0 0 8px;font-weight:900;color:var(--ink)}
.hb-two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.hb-lead{font-size:16.5px;line-height:1.55;color:var(--ink2);margin:14px 0 0}
.hb-narrow{max-width:760px}
.hw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.hw-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;box-shadow:var(--sh)}
.hw-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.hw-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:#eaf3fc;color:var(--blue);flex:none}
.hw-n{font-family:Menlo,monospace;font-size:12px;color:var(--ink3)}
.hw-card b{display:block;font-size:16px;margin-bottom:6px}
.hw-card p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.ht-rows{display:flex;flex-direction:column;gap:22px;padding-top:6px}
.ht-row{display:flex;gap:14px;align-items:flex-start}
.ht-row b{display:block;font-size:16px;margin-bottom:3px}
.ht-row p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.hb.hv{padding:56px 20px 60px}
.hv-flow{line-height:1}
.hv-title{float:left;max-width:440px;margin:0 40px 18px 0}
.hv-title h2{margin-bottom:10px}
.hv-sub{font-size:13.5px;line-height:1.45;color:var(--ink2);margin:0}
.hv-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 14px;margin:0 8px 10px 0;font-size:14px;font-weight:700;color:var(--ink);box-shadow:var(--sh);white-space:nowrap;vertical-align:top}
.hv-mk{height:18px;width:auto;max-width:30px;display:block}
.hv-pill i{font-style:normal;font-size:11px;font-weight:700;color:var(--blue);background:#eaf3fc;border-radius:999px;padding:2px 7px;line-height:1}
.hv-flow::after{content:"";display:block;clear:both}
.hd-grid{display:grid;grid-template-columns:1fr 520px;gap:48px;align-items:start}
.hd-hs{display:flex;gap:10px;margin:22px 0 26px;flex-wrap:wrap}
.hd-h{flex:1 1 110px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.hd-h.now{border-color:var(--blue);background:#eaf3fc}
.hd-h b{display:block;font-size:20px;font-weight:900;letter-spacing:-.01em;margin:3px 0 1px}
.hd-h small{font-size:11px;color:var(--ink3)}
.hd-rows{gap:16px}
.hd-chart{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;box-shadow:var(--sh)}
.hd-cap{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:700;color:var(--ink2);margin-bottom:12px}
.hd-chart svg{display:block}
.hq-list{margin-top:22px;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;box-shadow:var(--sh)}
details.hq{border-bottom:1px solid var(--line)}
details.hq:last-child{border-bottom:0}
details.hq summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:700;font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:16px}
details.hq summary::-webkit-details-marker{display:none}
details.hq summary::after{content:"+";color:var(--blue);font-size:20px;font-weight:400;line-height:1;flex:none}
details.hq[open] summary::after{content:"\2212"}
details.hq[open] summary{background:#f7f9fb}
details.hq p{margin:0;padding:0 20px 18px;font-size:14px;line-height:1.55;color:var(--ink2)}
@media (max-width:760px){
  .hb{padding:44px 16px}
  .hb h2{font-size:26px}
  .hb-two{grid-template-columns:1fr;gap:28px}
  .hd-grid{grid-template-columns:1fr;gap:24px}
  .hw-grid{grid-template-columns:1fr}
  .hv-title{float:none;max-width:none;margin:0 0 18px}
  .hv-pill{padding:8px 12px;font-size:13px}
}
/* Under this the hero fills the width and the watermark would sit under the heading, so it
   drops beside the plate instead, where the margin is still empty. */
@media (max-width:1150px){
  .wash-ghost{top:300px}
}
@media (max-width:1000px){
  .hnav-in .topnav{display:none}
  /* With the nav gone the fixed width would leave the brand and the CTA at opposite ends of an
     empty pill, so below this the bar hugs its content instead. */
  .hnav-in{width:auto}
}
@media (max-width:760px){
  header.hnav{padding:calc(16px + env(safe-area-inset-top)) 12px 0}
  .hnav-in{height:auto;min-height:52px;padding:6px 6px 6px 16px;flex-wrap:wrap;border-radius:26px;gap:14px}
  .hnav-in .top-cta{margin-left:auto}
  .hh{padding:80px 16px 40px;min-height:0}
  .wash-ghost{display:none}
  .hh h1{font-size:34px}
  .hh .sub{font-size:16px}
  .bigplate .row{flex-direction:column}
  /* Nothing sizes the plate's own type here. It is lib/plate.py's component and it sizes itself
     in cqw off its own width, so it is right at any width; the font-size and letter-spacing
     overrides that used to sit here were left from the black-tab plate the component replaced,
     and they rendered a 340px plate with 15px placeholder text on a phone. Removed 2026-09-27,
     when the phone started serving this hero. */
  .bigplate .btn.big{height:56px;font-size:18px}
  .bigplate .odoline{flex-direction:column;align-items:stretch;text-align:left}
  details.checks .menu{grid-template-columns:1fr}
}

/* Similar cars in Turners stock, only for a car that is not itself in stock. Two shapes share
   the sim- names and are scoped apart: the compact rows in the side column (.card.sim, current)
   and the wide strip of square cards between the hero and the figures (section.sim, the shape
   before 2026-09-24). Both are kept because the public server has served the old markup with
   the new sheet during a deploy, and the strip fell apart. Either build renders right now. */
.card.sim .body{padding-top:12px}
.card.sim .sim-sub{margin:0 0 10px;font-size:12.5px;color:var(--ink3)}
.card.sim .sim-row{display:flex;gap:12px;align-items:stretch;padding:10px 0;border-top:1px solid var(--line)}
.card.sim .sim-pic{position:relative;flex:0 0 96px;height:72px;border-radius:9px;overflow:hidden;background:#eef2f7}
.card.sim .sim-b{flex:1;min-width:0;display:flex;flex-direction:column}
.card.sim .sim-t{font-size:13.5px;line-height:1.25;font-weight:800;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.sim .sim-s{font-size:12px;color:var(--ink2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.sim .sim-w{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.sim .sim-f{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding-top:4px}
.card.sim .sim-p b{font-size:14.5px;font-weight:900;display:block;line-height:1.1}
.card.sim .sim-p s{font-size:11px;color:var(--ink3);font-weight:400}
.card.sim .sim-p i{display:block;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--warn)}
.card.sim .sim-f .btn{flex:none;padding:5px 10px;font-size:12px}
.card.sim .sim-yr{left:6px;top:6px;font-size:10px;border-radius:5px;padding:2px 6px}
.card.sim .sim-pic.sim-nopic{font-size:10px;text-align:center;padding:4px}
/* shared by both shapes */
.sim-pic img{width:100%;height:100%;object-fit:cover;display:block}
.sim-pic.sim-nopic{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e6eef7,#f4f7fb);color:var(--ink3);font-weight:700}
.sim-pic.sim-nopic::after{content:"No photo on the listing"}
.sim-yr{position:absolute;left:10px;top:10px;background:rgba(20,24,28,.78);color:#fff;font-size:11.5px;font-weight:700;border-radius:6px;padding:3px 8px}
/* the wide strip */
section.sim{margin:16px 0}
section.sim .sim-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px;padding:0 2px}
section.sim .sim-h h3{margin:2px 0 0;font-size:17px;font-weight:800}
section.sim .sim-n{font-size:12.5px;color:var(--ink3);white-space:nowrap}
section.sim .sim-grid{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
section.sim .sim-card{width:300px;height:316px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh)}
section.sim .sim-pic{position:relative;flex:0 0 140px;height:140px;overflow:hidden;background:#eef2f7}
section.sim .sim-b{flex:1;display:flex;flex-direction:column;padding:11px 14px 13px;min-height:0;overflow:hidden}
section.sim .sim-t{font-size:14.5px;line-height:1.25;font-weight:800;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
section.sim .sim-s{font-size:12.5px;color:var(--ink2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
section.sim .sim-w{font-size:12px;color:var(--ink3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
section.sim .sim-f{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
section.sim .sim-p b{font-size:17px;font-weight:900;display:block;line-height:1.1}
section.sim .sim-p s{font-size:11.5px;color:var(--ink3);font-weight:400}
section.sim .sim-p i{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--warn)}
section.sim .sim-f .btn{flex:none}
@media (max-width:760px){
  section.sim .sim-card{width:100%;max-width:340px;height:auto}
  section.sim .sim-pic{flex:0 0 160px;height:160px}
}

/* Report sections fold. The card's own h2 sits inside the summary, so it keeps its styling;
   the chevron and the hidden marker are the only additions. rfold/rtools/rbtn/rchev. */
details.rfold>summary{list-style:none;cursor:pointer}
details.rfold>summary::-webkit-details-marker{display:none}
details.rfold:not([open])>summary h2{border-bottom:0}
details.rfold>summary h2:hover{background:#f8fafc}
.rchev{margin-left:auto;color:#9aa5b1;display:inline-flex;transition:transform .15s;transform:rotate(90deg)}
.card h2 .h2x+.rchev{margin-left:10px}
details.rfold[open]>summary .rchev{transform:rotate(-90deg)}
.rtools{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:0 2px}
.rtools .k{margin-right:4px}
.rbtn{font:inherit;font-size:12.5px;font-weight:700;color:var(--blue);background:#fff;border:1px solid #cfd6de;border-radius:999px;padding:5px 12px;cursor:pointer}
.rbtn:hover{border-color:var(--blue);background:#f4f7fa}

/* ---------------------------------------------------------------- print and narrow screens */
@media print{header.top,.stick,.noprint{display:none}.cols{grid-template-columns:1fr}.side{position:static}body{background:#fff}.card{box-shadow:none;break-inside:avoid}}
/* Between the full shell and the phone the bar is the tightest thing on the page: the product
   label goes first, so the nav, the plate box and the CTA all keep their own width. */
@media (max-width:1120px){ .brand .product{display:none} }
@media (max-width:1000px){
  /* minmax(0,...) has to survive the collapse: a bare 1fr is minmax(auto,1fr), so one wide
     child (the specs grid, a comparables table) pushes the column past the viewport and the
     whole page scrolls sideways. .main and .side need min-width:0 for the same reason. */
  .cols{grid-template-columns:minmax(0,1fr)}
  .main,.side{min-width:0}
  .side{position:static}
  .hero-card{grid-template-columns:1fr}
  .hero-r{min-height:240px}
  .strip{grid-template-columns:1fr 1fr}
  .topnav{display:none}
}
@media (max-width:640px){
  body{font-size:15px;overflow-wrap:break-word}
  img{max-width:100%}
  .top-in{height:auto;padding:10px 14px;flex-wrap:wrap;gap:10px}
  .top-cta{display:none}
  .wrap{margin:12px auto;padding:0 12px}
  footer{padding:0 12px}
  .card .body{padding:12px 13px}
  .card h2{padding:11px 13px}
  .hero-l{padding:16px}
  .hero-l h1{font-size:26px}
  .hprice b{font-size:24px}
  .strip{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
  .hero .title{font-size:20px}
  .price{font-size:22px}
  .kpi{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi b{font-size:18px}
  .search{flex-wrap:wrap}
  .search input,.search button{flex:1 1 100%!important}
  .btn{padding:12px 14px;justify-content:center}
  .btn.sm{display:inline-flex;padding:8px 12px}
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .actions>*{width:100%;margin:0}
  .actions>*:first-child{grid-column:1/-1}
  .thumbs img{width:56px}
  table.fields td{display:block;border-bottom:0;padding:2px 0}
  table.fields tr{display:block;border-bottom:1px solid #eef0f3;padding:9px 0}
  table.fields tr:last-child{border-bottom:0}
  table.fields td.l{width:auto;color:#444}
  table.fields td.v{font-size:16px}
  table.fields td.s{font-size:11px;color:#888}
  table.fields td.num{text-align:left}
  table.comps{display:block;overflow-x:auto;white-space:nowrap;width:100%}
  .scorewrap{flex-direction:column;align-items:flex-start;gap:10px}
  .scoreval{flex:0 0 auto;width:100%}
  .wrow{flex-direction:column;align-items:stretch;gap:8px;padding:14px 0}
  .wrow .plate{flex:0 0 auto;font-size:20px}
  .wrow .acts{flex-wrap:wrap}
  .wrow .acts .btn,.wrow .acts form{flex:1 1 30%}
  .wrow .acts form .btn{width:100%}
  .ev{padding:12px 13px}
  .ev h4{font-size:15px}
  .feat span{font-size:12px}
  .stick .g small{display:none}
}

/* ---------------------------------------------------------------- sky pages (stolen check, watch a plate, price guide)
   The same wash and pill as the home page, with a page hero (eyebrow, one line, the page's own
   input) over full-width sections. .hs-* pieces (tiles, rows, marks, the small plate, the photo
   figure) are reused as they are: they are not scoped to the walkthrough. */
body.sky{background:linear-gradient(#dcecf9 0%,#f4f9fd 40%,#fff 62%,var(--bg) 100%) fixed;position:relative}
body.sky::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;z-index:2;
  background:linear-gradient(90deg,var(--red) 0 33%,var(--blue) 33% 66%,var(--grey) 66%)}
body.sky .wrap{max-width:none;margin:0;padding:0}
.ph{position:relative;padding:60px 20px 26px;text-align:center}
.ph-in{position:relative;max-width:780px;margin:0 auto}
.ph-in.wide{max-width:860px}
.ph .eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--ink2);font-weight:700;max-width:100%}
.ph .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.ph h1{font-size:46px;line-height:1.05;margin:16px 0 10px;letter-spacing:-.02em;font-weight:900;color:var(--ink)}
.ph .sub{font-size:17px;color:#3a4652;margin:0 auto;max-width:640px;line-height:1.45}
.ph .bigplate{margin-top:26px}
.ph-msg{display:inline-block;margin:16px auto 0;padding:9px 16px;border-radius:10px;font-size:14px;background:#fff;border:1px solid var(--line)}
.ph-msg.ok{border-color:#bfe3c6;color:var(--ok)}.ph-msg.ok b{color:var(--ink)}
.ph-msg.bad{border-color:#f3c1cb;color:var(--alert)}
.sky-in{max-width:1080px;margin:0 auto;padding:6px 20px 44px}
.sky-in.narrow{max-width:760px}
.sky-in .hs-tiles{margin-top:16px}
.hs-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--sh);margin-top:16px}
.hs-card>.k{margin-bottom:8px}

/* the stolen check's answer */
.sc{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:0 8px 30px rgba(16,24,40,.08);text-align:left}
.sc.good{border-top:4px solid var(--ok)}.sc.bad{border-top:4px solid var(--alert)}
.sc .ico{flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e6f4ea}
.sc.bad .ico{background:#fde8ec}
.sc h2{margin:2px 0 4px;font-size:26px;line-height:1.15;letter-spacing:-.01em;font-weight:900}
.sc-d{margin:0;font-size:15px;color:var(--ink)}
.sc-n{margin:6px 0 0;font-size:13px;color:var(--ink2);line-height:1.45}
.sc-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.sc-b{min-width:0;flex:1}

/* the watch form under its plate, and the list beside what a watch reads */
.bigplate.wform{max-width:640px}
.wfields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;text-align:left}
.wfields input{width:100%;padding:11px 13px;font-size:14.5px;border:1.5px solid #cfd6de;border-radius:10px;font-family:inherit;background:#fff}
.wfields input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px #eaf3fc}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;text-align:left}
.tier{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;box-shadow:var(--sh)}
.tier input{margin:3px 0 0;accent-color:var(--blue);flex:none}
.tier:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 3px #eaf3fc}
.tier .t{display:flex;flex-direction:column;gap:3px;min-width:0}
.tier b{font-size:14.5px}
.tier small{font-size:12.5px;color:var(--ink2);line-height:1.35}
.tier em{font-style:normal;font-size:11.5px;color:var(--ink3);line-height:1.4}
.wcols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.wl{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.wl:last-of-type{border-bottom:0}
.wl .hs-plate{text-decoration:none;color:#16181b;flex:none;font-size:18px}
.wl-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wl-m b{font-size:15px;display:flex;align-items:center;gap:6px}
.wl-ev{font-size:13px;font-weight:700}
.wl-n{font-size:12px;color:var(--ink3)}
.wl-a{display:flex;gap:6px;white-space:nowrap;align-items:center}
.wl-a form{margin:0}

/* the price guide: the pickers in the hero, the model card, the filters, the cars */
.pgs{display:flex;gap:10px;max-width:760px;margin:26px auto 0}
.pgs .combo{flex:1;min-width:0}
.pgs input{flex:1;min-width:0;width:100%;height:56px;font-size:17px;font-family:inherit;border:1.5px solid #cfd6de;border-radius:12px;padding:0 16px;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.05)}
.pgs input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px #eaf3fc}
.pgs .btn{flex:none;height:56px;padding:0 30px;font-size:17px;border-radius:12px;box-shadow:0 10px 22px rgba(183,18,52,.25)}
.pgs .combo-list{text-align:left}
.pop{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px;align-items:center}
.pop .k{width:100%;justify-content:center;margin-bottom:2px}
.pop a{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid #cfe0f0;color:var(--blue-dark);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;text-decoration:none}
.pop a:hover{border-color:var(--blue);background:#eaf3fc}
.pop a small{font-size:11px;font-weight:700;color:var(--ink3);background:#f1f4f8;border-radius:999px;padding:1px 7px}
.ph.pgh{padding-bottom:22px}
.pgm{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 8px 30px rgba(16,24,40,.08);text-align:left}
.pgm.pgm-nopic{grid-template-columns:1fr}
.pgm a.hs-pic{display:block;text-decoration:none;color:inherit}
.pgm .hs-pic img{width:100%;height:100%;object-fit:cover;display:block}
.pgm-b{min-width:0}
.pg-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 2px}
.pg-tiles.wide{grid-template-columns:repeat(3,1fr);margin:0 0 6px}
.pg-tile{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.pg-tiles.wide .pg-tile{background:#fff;box-shadow:var(--sh);padding:16px 18px;text-align:center}
.pg-tile b{display:block;font-size:19px;font-weight:900;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-tiles.wide .pg-tile b{font-size:26px}
.pg-tile span{display:block;font-size:12px;color:var(--ink2);margin-top:1px}
.pg-tile small{display:block;font-size:11px;color:var(--ink3);margin-top:3px}
.pg-how{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.pg-how .ht-row p{font-size:13px}
.pgm .hs-name{font-size:34px;margin:6px 0 2px}
/* Beside the photo the tiles have 620px between them, so a range like "$12,105 to $15,498"
   wraps to a second line rather than clipping to "$12,105 to $..." */
.pgm .pg-tile b{white-space:normal;font-size:17px;line-height:1.2}
.pgm .prange{margin:16px 0 0}
.pgf{margin-top:16px}
.pgf .filters{margin-top:0}
.pgf .filter-count{margin:10px 0 0}
.pgt-wrap{padding:6px 20px 16px;overflow-x:auto}
table.pgt{width:100%;border-collapse:collapse;font-size:14px}
.pgt th{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.pgt td{padding:9px 8px;border-bottom:1px solid #eef0f3;vertical-align:middle}
.pgt tr:last-child td{border-bottom:0}
.pgt tbody tr:hover td{background:#f8fafc}
.pgt .pt{width:64px;padding-left:0}
.pgt .th{width:64px;height:48px;object-fit:cover;border-radius:6px;background:#eef2f7;display:block}
.pgt .yr{width:52px;font-weight:700;color:var(--ink2)}
.pgt .car a{font-weight:700;color:var(--ink);text-decoration:none}
.pgt .car a:hover{color:var(--blue);text-decoration:underline}
.pgt .car small{display:block;font-size:12px;color:var(--ink3);margin-top:1px}
.pgt .odo{white-space:nowrap;font-variant-numeric:tabular-nums}
.pgt .pr{white-space:nowrap;font-variant-numeric:tabular-nums}
.pgt .pr b{font-size:15px}
.pgt .pr s{display:block;font-size:11.5px;color:var(--ink3);font-weight:400}
.pgt .pr i{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7a5a00}
.pgt .wh{color:var(--ink2);white-space:nowrap}
.sky-in .sf-card{margin-top:16px}
@media (max-width:900px){
  .ph h1{font-size:36px}
  .wcols,.pgm{grid-template-columns:1fr}
  .pg-tiles,.pg-tiles.wide,.pg-how{grid-template-columns:1fr 1fr}
  .pg-how{grid-template-columns:1fr}
  .tiers,.wfields{grid-template-columns:1fr}
  .pgs{flex-wrap:wrap}.pgs .btn{width:100%}
  .sky-in .hs-tiles{grid-template-columns:1fr}
}
.wcols .hs-row b{flex:1;min-width:0}
.wcols .hs-row .hs-src{white-space:nowrap}

/* the sell funnel on the desktop: the shared form (lib/sellform.py) on the left, the car beside it */
.ph.sell-ph{padding:52px 20px 18px}
.sell-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.sell-aside{position:sticky;top:96px}
.sell-cols .sf{max-width:none}
body.sky .sf-card{box-shadow:var(--sh)}
body.sky .sf-btn:not(.ghost){background:var(--red)}
body.sky .sf-btn:not(.ghost):hover{background:var(--red-dark)}
.sell-aside .hs-pic{aspect-ratio:4/3;margin:0}
.sell-aside .hs-pic img.model{object-fit:contain;padding:12px;background:#fff}
.sell-aside .hs-plate{font-size:15px}
.sell-aside .hs-row{font-size:12.5px;align-items:flex-start}
.sell-aside .hs-row .hs-mark{margin-top:5px}
.sell-aside .hs-row b{flex:1;min-width:0;font-weight:400;color:var(--ink)}
.sell-aside .hs-row b small{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-top:3px;font-weight:700}
.sell-cols svg.curve{max-width:440px;display:block}
.sky-in.narrow .hs-row b{flex:1;min-width:0;font-weight:400;color:var(--ink);line-height:1.4}
.sky-in.narrow .hs-row .hs-src{white-space:nowrap}
@media (max-width:900px){.sell-cols{grid-template-columns:1fr}.sell-aside{position:static}}

/* The iOS app shows this page full screen with no content inset of its own (the web view sets
   contentInsetAdjustmentBehavior = .never), so the shell carries the safe area: the floating pill
   clears the status bar, the pinned bar clears the home indicator, and the tricolour stripe sits
   below the notch rather than under it. env() is 0 in a desktop browser, so nothing moves there.
   It only resolves at all because render.page() asks for viewport-fit=cover. */
header.hnav{padding-top:calc(22px + env(safe-area-inset-top))}
header.top{padding-top:env(safe-area-inset-top)}
.stick-in{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
body.home::before,body.sky::before{top:env(safe-area-inset-top)}