/* VIN Service Planner — model pages (same visual system as the app) */
@font-face{font-family:'Onest';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2190-21FF,U+2212,U+2248,U+2713}
@font-face{font-family:'Onest';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/onest-latin-ext.woff2) format('woff2');unicode-range:U+0100-017F}
@font-face{font-family:'Unbounded';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/unbounded-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2190-21FF,U+2212,U+2248,U+2713}
@font-face{font-family:'Unbounded';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/unbounded-latin-ext.woff2) format('woff2');unicode-range:U+0100-017F}
:root{
  --bg:#F3F4F6; --surface:#FFFFFF; --surface-2:#ECEEF2; --ink:#0B0E13; --muted:#5C6675; --line:#DCE0E6;
  --accent:#1D5BFF; --accent-soft:#E5ECFF; --accent-ink:#1042C9; --on-accent:#FFFFFF;
  --now:#CF3327; --now-soft:#FBE6E3; --soon:#A86400; --soon-soft:#F8EBD3; --later:#1B8650; --later-soft:#DDF1E6;
  --cl-bg:#0B0D11; --cl-bg2:#161A21; --cl-bg3:#1E232C; --cl-ink:#F3F5F8; --cl-muted:#8E98A7; --cl-line:#272C36;
  --cl-accent:#7CA4FF; --cl-glow:rgba(92,138,255,.24); --cl-now:#FF6B5E; --cl-soon:#F2B441; --cl-later:#57D08D;
  --seg1:#7CA4FF; --seg2:#A9B2BF; --seg3:#F2B441; --seg4:#57D08D; --seg5:#C39BFF; --seg6:#6B7482;
  --shadow:0 1px 2px rgba(11,14,19,.05),0 14px 44px rgba(11,14,19,.09);
  --display:"Unbounded","Onest",system-ui,sans-serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:14px; --r-lg:28px; --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#060709; --surface:#0F1115; --surface-2:#181B21; --ink:#EEF1F5; --muted:#909AA8; --line:#242831;
    --accent:#7CA4FF; --accent-soft:#141F3D; --accent-ink:#BBD0FF; --on-accent:#06122E;
    --now:#FF6B5E; --now-soft:#3A1A17; --soon:#F2B441; --soon-soft:#33270F; --later:#57D08D; --later-soft:#11301F;
    --cl-bg:#101318; --cl-bg2:#191D25; --cl-bg3:#222731;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 44px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#060709; --surface:#0F1115; --surface-2:#181B21; --ink:#EEF1F5; --muted:#909AA8; --line:#242831;
  --accent:#7CA4FF; --accent-soft:#141F3D; --accent-ink:#BBD0FF; --on-accent:#06122E;
  --now:#FF6B5E; --now-soft:#3A1A17; --soon:#F2B441; --soon-soft:#33270F; --later:#57D08D; --later-soft:#11301F;
  --cl-bg:#101318; --cl-bg2:#191D25; --cl-bg3:#222731;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 44px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;padding-inline:16px;padding-block:0 56px;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.wrap{max-width:1000px;margin:0 auto}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;margin:0;text-wrap:balance;line-height:1.1}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:20px 16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--ink);text-decoration:none}
.bar-right{display:flex;gap:6px;flex-wrap:wrap}
.bar-right a{font-size:13px;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.bar-right a:hover{border-color:var(--ink)}
.eyebrow{font-family:var(--display);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cluster{--ink:var(--cl-ink);--muted:var(--cl-muted);--line:var(--cl-line);--accent:var(--cl-accent);--on-accent:#06122E;color:var(--ink);border-radius:var(--r-lg);padding:clamp(22px,4vw,48px);
  background:radial-gradient(90% 120% at 100% 0%,var(--cl-glow),transparent 60%),linear-gradient(180deg,var(--cl-bg2),var(--cl-bg) 70%)}
.cluster h1{font-size:clamp(32px,6vw,64px);letter-spacing:-.045em;line-height:1;margin-top:12px}
.car-sub{color:var(--muted);margin:12px 0 0;font-size:clamp(15px,1.6vw,18px)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:18px 28px;margin-top:clamp(22px,3vw,36px);padding-top:22px;border-top:1px solid var(--line)}
.facts .v{font-family:var(--display);font-weight:300;font-size:clamp(24px,3vw,34px);line-height:1.1}
.facts .s,.cluster .s{font-size:13px;color:var(--muted);margin-top:4px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:13px 24px;font-weight:600;font-size:15px;text-decoration:none;transition:filter .2s,transform .15s}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink);filter:none}
.lead{max-width:68ch;margin:clamp(26px,4vw,44px) 0 0;font-size:clamp(16px,1.6vw,18px)}
.lead p{margin:0 0 12px}
.hero{padding-block:clamp(28px,6vw,72px) 8px}
.hero h1{font-size:clamp(34px,6vw,68px);letter-spacing:-.045em;line-height:1;max-width:14ch}
.lede{color:var(--muted);max-width:56ch;font-size:clamp(15px,1.5vw,18px);margin:18px 0 0}
.sheet{background:var(--surface);border-radius:var(--r-lg);margin-top:clamp(26px,4vw,44px);padding:clamp(6px,2vw,18px) clamp(16px,3.4vw,40px) clamp(22px,3.4vw,40px)}
.sheet section{padding-top:clamp(22px,3vw,34px)}
.sheet section+section{margin-top:clamp(22px,3vw,34px);border-top:1px solid var(--line)}
h2{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.03em}
h3{font-size:17px;margin-top:26px}
.note{font-size:14px;color:var(--muted);margin:10px 0 0;max-width:76ch}
.scroll{overflow-x:auto;margin-top:14px}
.tab{border-collapse:collapse;width:100%;font-size:14.5px}
.tab.stat{font-variant-numeric:tabular-nums}
.tab th,.tab td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tab thead th{font-size:12.5px;color:var(--muted);font-weight:500;white-space:nowrap}
.tab th[scope=row]{font-weight:500;padding-left:0;min-width:150px}
.tab thead th:first-child{padding-left:0}
.tab th small{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
.tab .r{text-align:right;white-space:nowrap}
.tab td.hi{color:var(--now);font-weight:600}.tab td.lo{color:var(--later);font-weight:600}
.watch{margin-top:6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:0 clamp(24px,4vw,48px)}
.fault{padding:18px 0;border-bottom:1px solid var(--line)}
.fault h4{font-size:16px;line-height:1.3;letter-spacing:-.01em}
.fault .r{font-size:13px;color:var(--k);margin-top:5px;font-weight:500;display:flex;align-items:center;gap:7px}
.fault .r::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--k);flex:none}
.fault p{margin:8px 0 0;font-size:14px;color:var(--muted)}
.fault p b{color:var(--ink);font-weight:500}
.fault .c{font-size:14.5px;font-weight:500;margin-top:10px}
.conds{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.conds span{font-size:12px;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:1px 8px}
.sev-high{--k:var(--now)}.sev-med{--k:var(--soon)}.sev-low{--k:var(--later)}
.bars{display:grid;margin-top:8px}
.brow{display:grid;grid-template-columns:minmax(0,1fr) 140px 46px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.brow b{font-weight:500}.brow .note{margin:2px 0 0;font-size:13px}
.brow>span{text-align:right;font-weight:500;font-size:14px}
.bar i{display:block;height:6px;background:var(--ink);border-radius:3px}
.brow .bar{display:block;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;padding:0}
.rc{list-style:none;margin:12px 0 0;padding:0}
.rc li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.rc small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.rc .cat{display:inline-block;font-size:11px;font-weight:600;border-radius:999px;padding:1px 8px;margin-right:4px;background:var(--surface-2);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.chip{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px;color:var(--ink);text-decoration:none}
.chip:hover{border-color:var(--ink)}
.chip small{color:var(--muted);font-size:12px;margin-left:4px}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cluster,.hero{animation:rise .7s var(--ease) both}.lead{animation:rise .7s .1s var(--ease) both}.sheet{animation:rise .7s .2s var(--ease) both}
@media (max-width:640px){.brow{grid-template-columns:minmax(0,1fr) 46px}.brow .bar{grid-column:1/-1;order:3}.tab{font-size:13.5px}.tab th[scope=row]{min-width:120px}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
@media print{.bar,.cta{display:none}.cluster{background:none;color:#111;padding:0;--ink:#111;--muted:#555;--line:#ccc}body{background:#fff}}