@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(fonts/Archivo-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(fonts/HankenGrotesk-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/InstrumentSerif-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =========================================================
   Kei Truck Finder homepage mockup: "Yellow Plate", made easy.
   Rules from the usability research:
   1. Anything you can tap looks like a button and says what it does.
   2. Anything you can't tap never looks like a button.
   3. Every tap shows its result where your eyes already are.
   4. Plain words. Big text (18px body, nothing under 15px).
   5. Big targets (56px+), full width on phones.
   6. No hidden swiping. No questions that move on by themselves.
   7. Colour never works alone: always an icon and a word too.
   ========================================================= */
:root{
  --plate:#F4C21B; --plate-2:#FFD84A; --plate-ink:#1A1505;
  --ink:#17150F; --ink-2:#3F3A2F; --ink-3:#5E574A;
  --paper:#F6F1E6; --paper-2:#EDE5D3; --paper-3:#DDD2BA; --white:#FFFDF8;
  --shu:#C4421A;
  --yes:#1F6B35; --yes-bg:#E3F1E6;
  --limit:#1F5C8C; --limit-bg:#E2EDF6;
  --some:#7A5300; --some-bg:#F8EDCF; --some-fill:#F2A400; /* Nov. 9: dark amber for text (7:1), bright traffic amber for fills with dark text; no longer reads as the owner tan */
  --focus:#1F5C8C;
  --soon:#5B3F96; --soon-bg:#ECE6F7;
  --no:#A42B22; --no-bg:#F8E3E0;
  --unsure:#55504A; --unsure-bg:#ECE9E3;
  --display:"Archivo",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--body);-webkit-font-smoothing:antialiased}
@media(min-width:900px){body{font-size:19px}}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
@media(min-width:900px){.wrap{padding:0 40px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:4px solid var(--focus);outline-offset:3px}
body.sheet-open{overflow:hidden}

/* section label: words, not codes */
.label{display:inline-flex;align-items:center;gap:8px;font:700 1rem/1.2 var(--body);color:var(--ink-2)}
.label .n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--plate);font:800 1rem var(--body)}
h2.title{margin:12px 0 8px;font:800 clamp(2rem,6vw,3.25rem)/1.02 var(--display);font-stretch:110%;letter-spacing:-.03em;text-wrap:balance}
h2.title em{font:italic 400 1.06em var(--serif);font-stretch:normal;letter-spacing:-.01em;color:var(--shu)}
.intro{margin:0 0 24px;max-width:58ch;color:var(--ink-2);font-size:1.125rem}
section{padding:72px 0 0}

/* ---------- BUTTONS: always look tappable ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 28px;border-radius:16px;border:3px solid var(--ink);background:var(--ink);color:var(--plate);font:800 1.125rem/1.2 var(--body);text-decoration:none;cursor:pointer;text-align:center;box-shadow:0 4px 0 #000;transition:transform .1s,box-shadow .1s}
.btn:hover{background:#000}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.btn .arr{font-size:1.3em;line-height:1}
.btn.yellow{background:var(--plate);color:var(--plate-ink);border-color:var(--ink)}
.btn.yellow:hover{background:var(--plate-2)}
.btn.white{background:var(--white);color:var(--ink)}
.btn.white:hover{background:var(--paper-2)}
.btn.full{width:100%}
@media(max-width:699px){.btn.m-full{width:100%}}
.btn[disabled]{background:var(--paper-2);border-color:var(--paper-3);color:var(--ink-3);box-shadow:none;cursor:not-allowed}
.helper{display:block;margin-top:8px;font-size:1rem;color:var(--ink-3)}

/* ---------- HEADER ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(246,241,230,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:2px solid var(--ink)}
.top .wrap{display:flex;align-items:center;gap:12px;height:72px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);min-height:48px}
.plate-logo{position:relative;display:grid;place-items:center;width:58px;height:34px;background:var(--ink);border-radius:10px;box-shadow:inset 0 0 0 2px #3a352a}
.plate-logo::before,.plate-logo::after{content:"";position:absolute;top:5px;width:4px;height:4px;border-radius:50%;background:#6a6150}
.plate-logo::before{left:6px}.plate-logo::after{right:6px}
.plate-logo span{font:800 1rem/1 var(--display);font-stretch:112%;color:var(--plate)}
.logo-word{font:800 1.125rem/1 var(--display);font-stretch:106%}
.nav{display:none;gap:4px;margin-left:auto}
.nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:10px;font-weight:700;font-size:1rem;text-decoration:none;color:var(--ink)}
.nav a:hover{background:var(--paper-2)}
.menu-btn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:10px;border:2px solid var(--ink);background:var(--white);font:800 1rem var(--body);color:var(--ink);cursor:pointer}
.menu-btn svg{width:22px;height:22px}
@media(min-width:1000px){.nav{display:flex}.menu-btn{display:none}}
.menu{display:none;border-top:2px solid var(--ink);background:var(--white)}
.menu.open{display:block}
.menu a{display:flex;justify-content:space-between;align-items:center;min-height:64px;padding:0 20px;border-bottom:1px solid var(--paper-3);font:800 1.125rem var(--body);color:var(--ink);text-decoration:none}

/* ---------- HERO ---------- */
.hero-grid{display:grid;gap:16px}
@media(min-width:1000px){.hero-grid{grid-template-columns:1fr 1fr;gap:28px 48px;align-items:stretch;padding-top:12px}.hero-text{grid-column:1/-1}.hero-grid .photo{grid-column:1;grid-row:2;display:flex;flex-direction:column}.hero-grid .photo .frame{flex:1;aspect-ratio:auto;min-height:340px}.hero-grid .checker{grid-column:2;grid-row:2;display:flex;flex-direction:column;justify-content:center}}
.hero h1{margin:8px 0 0;font:800 clamp(2rem,6vw,4.5rem)/.98 var(--display);font-stretch:112%;letter-spacing:-.035em;text-wrap:balance;max-width:21ch}
.hero h1 em{font:italic 400 1.04em var(--serif);font-stretch:normal;letter-spacing:-.01em;color:var(--shu)}
.lede{margin:16px 0 0;max-width:46ch;font-size:1.125rem;color:var(--ink-2)}

/* photo explains "what is it" for people who don't read much */
.photo{margin:0}
.photo .frame{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-3);border:3px solid var(--ink)}
.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.photo .tag{position:absolute;left:12px;top:12px;padding:8px 12px;border-radius:10px;background:var(--plate);color:var(--plate-ink);font:800 1rem var(--body);border:2px solid var(--ink)}
.photo figcaption{margin-top:8px;font-size:1rem;color:var(--ink-2)}
.photo figcaption b{color:var(--ink)}
.credit{font:400 .8125rem/1.5 var(--body);color:var(--ink-3);margin-top:4px}
.credit a{color:inherit}

/* ---------- STATE CHECKER ---------- */
.checker{background:var(--ink);color:var(--white);border-radius:16px;padding:20px 16px;border:3px solid var(--ink)}
@media(min-width:700px){.checker{padding:28px}}
.checker h2{margin:0 0 4px;font:800 1.5rem/1.1 var(--display);font-stretch:108%;letter-spacing:-.02em;color:var(--white)}
.checker p{margin:0 0 12px;color:#E6DFCD}
.pick{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:68px;padding:0 20px;border-radius:16px;border:3px solid var(--plate);background:var(--plate);color:var(--plate-ink);font:800 1.25rem var(--body);cursor:pointer;text-align:left;box-shadow:0 4px 0 #000}
.pick:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.pick .chev{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--plate);font-size:1.25rem;flex:none}
.checker .helper{color:#CFC6B0}

/* ANSWER CARD: icon + word + colour, then plain bullets, then next steps */
.answer{display:none;margin-top:12px;border-radius:16px;background:var(--white);color:var(--ink);padding:16px 16px 16px;border:0;border-top:8px solid var(--unsure);scroll-margin-top:96px}
.answer.show{display:block;animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.answer .for{font:700 1rem var(--body);color:var(--ink-3);margin:0}
.verdict{display:flex;align-items:center;gap:12px;margin:0 0 4px}
.verdict .ic{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;color:#fff}
.verdict .ic svg{width:32px;height:32px}
.verdict small{display:block;font:700 1rem var(--body);color:var(--ink-3)}
.verdict strong{display:block;font:800 1.5rem/1.05 var(--display);font-stretch:106%;letter-spacing:-.02em}
.answer .plain{margin:8px 0 8px;font-size:1rem;color:var(--ink)}
.answer ul{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:4px}
.answer li{display:flex;gap:8px;align-items:flex-start;font-size:1rem;line-height:1.45}
.answer li::before{content:"";flex:none;width:10px;height:10px;margin-top:.55em;border-radius:50%;background:var(--c,var(--ink))}
.answer .actions{display:grid;grid-template-columns:1.25fr 1fr;gap:8px}
.answer .actions .btn{min-height:56px;padding:0 8px;font-size:1rem}
.answer details{margin-top:16px;border-top:2px dashed var(--paper-3);padding-top:4px}
.answer summary{cursor:pointer;min-height:52px;display:flex;align-items:center;font-weight:800;list-style:none}
.answer summary::-webkit-details-marker{display:none}
.answer summary::before{content:"+";display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;border-radius:50%;border:2px solid var(--ink);font-weight:800}
.answer details[open] summary::before{content:"–"}
.answer .law{font-size:1rem;color:var(--ink-2)}
.answer .checked{font-size:.875rem;color:var(--ink-3);margin:12px 0 0}
.checker.answered .ask{display:none}
.checker.answered .answer{margin-top:16px}
.t-mouse{display:none}
@media(hover:hover) and (pointer:fine){.t-mouse{display:inline}.t-touch{display:none}}
.s-yes{--c:var(--yes);--bg:var(--yes-bg)} .s-limit{--c:var(--limit);--bg:var(--limit-bg)} .s-some{--c:var(--some);--bg:var(--some-bg)}
.s-soon{--c:var(--soon);--bg:var(--soon-bg)} .s-no{--c:var(--no);--bg:var(--no-bg)} .s-unsure{--c:var(--unsure);--bg:var(--unsure-bg)}
.answer[class*=s-]{border-top-color:var(--c);background:var(--white)}
.answer[class*=s-] .ic{background:var(--c)}
.answer[class*=s-] .verdict strong{color:var(--c)}

/* STATE LIST (full screen on phones, easy for first-time phone users) */
.sheet{position:fixed;inset:0;z-index:200;display:none;background:var(--paper);flex-direction:column}
.sheet.open{display:flex}
@media(min-width:700px){.sheet{background:rgba(23,21,15,.55);align-items:center;justify-content:center;padding:28px}.sheet .panel{width:min(560px,100%);height:min(760px,100%);border-radius:16px;overflow:hidden;border:3px solid var(--ink)}}
.panel{display:flex;flex-direction:column;background:var(--paper);height:100%;width:100%}
.sheet-head{padding:16px 20px 12px;border-bottom:2px solid var(--ink);background:var(--white)}
.sheet-head .row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sheet-head h3{margin:0;font:800 1.5rem var(--display);font-stretch:106%}
.close{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 16px;border-radius:10px;border:2px solid var(--ink);background:var(--white);font:800 1rem var(--body);cursor:pointer;color:var(--ink)}
.search{display:block;margin-top:12px;position:relative}
.search input{width:100%;min-height:60px;border-radius:16px;border:3px solid var(--ink);padding:0 16px 0 52px;font:700 1.125rem var(--body);background:var(--white);color:var(--ink)}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;color:var(--ink-3)}
.near{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;margin-top:12px;padding:4px 16px;border-radius:16px;border:2px dashed var(--ink);background:transparent;font:800 1rem var(--body);color:var(--ink);cursor:pointer;text-align:left}
.near small{display:block;font-weight:400;font-size:.875rem;color:var(--ink-3)}
.near .ico{flex:none;width:24px;height:24px;color:var(--brand)} /* the pin icon (was sized only in home.css, so it was huge on every other page) */
.list{flex:1;overflow-y:auto;padding:4px 0 28px;-webkit-overflow-scrolling:touch}
.list .letter{position:sticky;top:0;padding:4px 20px;background:var(--paper-2);font:800 1rem var(--body);color:var(--ink-2)}
.list button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:62px;padding:0 20px;border:0;border-bottom:1px solid var(--paper-3);background:transparent;font:700 1.125rem var(--body);color:var(--ink);text-align:left;cursor:pointer}
.list button:focus-visible{background:var(--plate)}
@media(hover:hover){.list button:hover{background:var(--plate)}}
.list button:active{background:var(--plate)}
.list button .go{font-size:1.5rem;color:var(--ink-3)}
.empty{padding:24px 20px;color:var(--ink-2)}

/* ---------- SIZE ---------- */
.size-card{background:var(--white);border:3px solid var(--ink);border-radius:16px;padding:20px 16px 16px}
@media(min-width:900px){.size-card{padding:32px}}
.keys{display:grid;gap:12px;margin-bottom:8px}
@media(min-width:700px){.keys{grid-template-columns:1fr 1fr}}
.key{display:flex;gap:12px;align-items:center}
.key i{flex:none;width:34px;height:22px;border-radius:10px;border:2px solid var(--ink)}
.key b{display:block;font:800 1.5rem/1.1 var(--display);font-stretch:104%}
.key span{color:var(--ink-2);font-size:1rem}
.size-card svg{display:block;width:100%;height:auto;margin:8px 0 4px}
.note{font-size:.875rem;color:var(--ink-3);margin:8px 0 0}

/* ---------- QUICK ANSWERS ---------- */
.qa{display:grid;gap:16px}
@media(min-width:900px){.qa{grid-template-columns:repeat(3,1fr)}}
.qa-card{display:flex;flex-direction:column;background:var(--white);border:3px solid var(--ink);border-radius:16px;padding:24px 20px 20px}
.qa-card .q{display:flex;align-items:center;gap:12px;font:800 1.25rem/1.25 var(--body)}
.qa-card .q i{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--plate);border:2px solid var(--ink);font-style:normal}
.qa-card .q svg{width:24px;height:24px}
.qa-card .a{margin:16px 0 4px;font:800 2rem/1.05 var(--display);font-stretch:104%;letter-spacing:-.025em}
.qa-card p{margin:0 0 16px;color:var(--ink-2)}
.qa-card .btn{margin-top:auto}
.tally{list-style:none;margin:4px 0 16px;padding:0;display:grid;gap:8px}
.tally li{display:flex;align-items:center;gap:8px;font-size:1rem}
.tally .dot{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff}
.tally .dot svg{width:16px;height:16px}
.tally b{min-width:2ch;font:800 1.125rem var(--display)}

/* facts are information, not buttons: no borders, no arrows, no hover */
.facts{display:grid;grid-template-columns:1fr 1fr;margin-top:28px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
@media(min-width:900px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{padding:20px 12px}
.fact:nth-child(even){border-left:1px solid var(--paper-3)}
@media(min-width:900px){.fact+.fact{border-left:1px solid var(--paper-3)}}
.fact:nth-child(-n+2){border-bottom:1px solid var(--paper-3)}
@media(min-width:900px){.fact:nth-child(-n+2){border-bottom:0}}
.fact small{display:block;font:700 1rem var(--body);color:var(--ink-3)}
.fact strong{display:block;margin:4px 0;font:800 2rem/1 var(--display);font-stretch:106%;letter-spacing:-.03em}
.fact span{display:block;font-size:1rem;color:var(--ink-2);line-height:1.4}

/* ---------- MODELS: a plain vertical list on phones (no hidden swiping) ---------- */
.models{display:grid;gap:16px}
@media(min-width:1000px){.models{grid-template-columns:repeat(5,1fr)}}
.model{display:grid;grid-template-columns:1fr;background:var(--white);border:3px solid var(--ink);border-radius:16px;overflow:hidden}
@media(min-width:600px) and (max-width:999px){.model{grid-template-columns:45% 1fr}}
@media(min-width:1000px){.model{grid-template-columns:1fr;grid-template-rows:auto 1fr}}
.model img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 60%}
@media(min-width:600px) and (max-width:999px){.model img{height:100%;aspect-ratio:auto;min-height:200px}}
@media(min-width:1000px){.model img{aspect-ratio:4/3}}
.model .body{display:flex;flex-direction:column;padding:12px}
.model .maker{font:700 1rem var(--body);color:var(--ink-3)}
.model h3{margin:0 0 4px;font:800 1.5rem/1.05 var(--display);font-stretch:106%}
.model p{margin:0 0 12px;font-size:1rem;line-height:1.4;color:var(--ink-2)}
.model .btn{margin-top:auto;min-height:52px;padding:0 12px;font-size:1rem;border-radius:10px;box-shadow:0 3px 0 #000}

/* ---------- QUIZ: one question, pick, then press Next ---------- */
.quiz{background:var(--plate);border:3px solid var(--ink);border-radius:16px;padding:24px 16px}
@media(min-width:900px){.quiz{padding:44px;display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}}
.quiz h2.title em{color:var(--ink)}
.quiz .intro{color:#3a2f06}
.qbox{background:var(--white);border:3px solid var(--ink);border-radius:16px;padding:20px 16px;scroll-margin-top:96px}
.qprog{font:800 1rem var(--body)}
.bar{height:12px;border-radius:10px;background:var(--paper-2);border:2px solid var(--ink);margin:8px 0 16px;overflow:hidden}
.bar i{display:block;height:100%;width:25%;background:var(--ink);transition:width .4s}
.qbox fieldset{border:0;margin:0;padding:0;min-width:0}
.qbox legend{font:800 1.5rem/1.2 var(--display);font-stretch:104%;margin-bottom:4px;padding:0}
.qbox .hint{margin:0 0 12px;color:var(--ink-3);font-size:1rem}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:68px;padding:8px 16px;margin-bottom:8px;border-radius:16px;border:3px solid var(--paper-3);background:var(--white);cursor:pointer;font-weight:800;font-size:1.125rem;line-height:1.3}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .radio{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:3px solid var(--ink);background:var(--white)}
.opt small{display:block;font-weight:400;font-size:1rem;color:var(--ink-3)}
@media(hover:hover){.opt:hover{border-color:var(--ink)}}
.opt.on{border-color:var(--ink);background:#FFF6D6}
.opt.on .radio{background:var(--ink)}
.opt.on .radio::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--plate)}
.qnav{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-top:8px}
.qnav .btn.white{padding:0 16px}
.qnav .only{grid-column:1/-1}
.qmsg{min-height:1.6em;margin:8px 0 0;font-weight:700;color:var(--no)}
.result-card{border-radius:16px;background:var(--paper);padding:16px;margin:4px 0 12px}
.result-card b{display:block;font:800 1.5rem/1.15 var(--display);font-stretch:104%}

/* ---------- LAW CHANGES: a plain list, one clear button ---------- */
.changes{list-style:none;margin:0 0 20px;padding:0;background:var(--white);border:3px solid var(--ink);border-radius:16px;overflow:hidden}
.changes li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px}
.changes li+li{border-top:1px solid var(--paper-3)}
.changes .when{width:96px;font:800 1rem/1.4 var(--body);color:var(--ink-3)}
.changes b{display:block;font:800 1.125rem/1.3 var(--body)}
.changes span{display:block;color:var(--ink-2);font-size:1rem}
.changes .src{font-size:.875rem;color:var(--ink-3);margin-top:4px}

/* ---------- STEPS: a checklist, not buttons ---------- */
.steps-box{background:var(--ink);color:var(--white);border-radius:16px;padding:28px 20px}
@media(min-width:900px){.steps-box{padding:48px}}
.steps-box h2.title{color:var(--white)}
.steps-box h2.title em{color:var(--plate)}
.steps{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:4px}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:16px}}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.steps .num{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:3px solid #6b6352;font:800 1.25rem var(--display);color:#d8d0bd}
.steps li.first .num{background:var(--plate);border-color:var(--plate);color:var(--ink)}
.steps b{display:block;font:800 1.125rem var(--body)}
.steps span{color:#CFC6B0;font-size:1rem}
.steps .here{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;background:var(--plate);color:var(--ink);font:800 .875rem var(--body)}

/* ---------- FOOTER ---------- */
footer{margin-top:72px;padding:40px 0 128px;border-top:3px solid var(--ink)}
.foot-grid{display:grid;gap:24px}
@media(min-width:900px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
footer h4{margin:0 0 8px;font:800 1rem var(--body)}
footer ul{list-style:none;margin:0;padding:0}
footer li a{display:flex;align-items:center;min-height:46px;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.fine{margin-top:28px;font-size:.875rem;color:var(--ink-3)}

/* ---------- BOTTOM BAR: icon + word, current page marked ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);background:var(--white);border-top:3px solid var(--ink);padding-bottom:env(safe-area-inset-bottom)}
.dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:66px;color:var(--ink-2);text-decoration:none;font:800 .875rem var(--body)}
.dock a svg{width:26px;height:26px}
.dock a.on{color:var(--ink);background:var(--plate)}
@media(min-width:1000px){.dock{display:none}footer{padding-bottom:48px}}

/* ---------- v3 additions ---------- */
.jump{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px}
.jump span{font-weight:800;margin-right:4px}
.jump a{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:10px;border:2px solid var(--ink);background:var(--white);color:var(--ink);font-weight:700;text-decoration:none}
@media(hover:hover){.jump a:hover{background:var(--plate)}}
.two{display:grid;gap:24px}
@media(min-width:900px){.two{grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}}
.card{background:var(--white);border:3px solid var(--ink);border-radius:16px;padding:20px 20px}
.card h3{margin:0 0 8px;font:800 1.25rem var(--display);font-stretch:104%}
.card.wide{padding:28px 20px}
.big-p{font-size:1.25rem;margin:0 0 12px}
.small{font-size:1rem;color:var(--ink-3)}
.ticks{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.ticks li{padding-left:28px;position:relative}
.ticks li::before{content:"";position:absolute;left:4px;top:.45em;width:14px;height:14px;border-radius:10px;background:var(--plate);border:2px solid var(--ink)}
.makers{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:4px}
.makers li{padding:8px 12px;border-radius:10px;background:var(--paper)}
.makers span{color:var(--ink-3);font-size:1rem}
.specs{display:grid;gap:16px}
@media(min-width:700px){.specs{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.specs{grid-template-columns:repeat(4,1fr)}}
.spec{background:var(--white);border:3px solid var(--ink);border-radius:16px;padding:20px}
.spec small{display:block;font:800 1rem var(--body);color:var(--ink-2)}
.spec strong{display:block;margin:4px 0;font:800 2rem/1.05 var(--display);font-stretch:104%;letter-spacing:-.02em}
.spec p{margin:0 0 4px;color:var(--ink-2);font-size:1rem}
.textlink{display:inline-flex;align-items:center;min-height:48px;color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.actions-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.ranges{display:grid;gap:12px;margin:8px 0}
.rg{display:grid;grid-template-columns:1fr auto;gap:4px 8px;font-size:1rem}
.rg b{font-weight:800}
.rg i{grid-column:1/-1;position:relative;height:12px;border-radius:10px;background:var(--paper-2)}
.rg i::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--a)*1%);right:calc(100% - var(--b)*1%);border-radius:10px;background:var(--ink)}
.axis{display:flex;justify-content:space-between;font-size:.875rem;color:var(--ink-3);border-top:2px dashed var(--paper-3);padding-top:4px}
.ways,.steps-light{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
@media(min-width:900px){.ways{grid-template-columns:repeat(3,1fr)}}
.ways li{background:var(--white);border:3px solid var(--ink);border-radius:16px;padding:16px}
.ways b,.steps-light b{display:block;font:800 1.125rem/1.3 var(--body)}
.ways span,.steps-light span{display:block;color:var(--ink-2);font-size:1rem}
.steps-light li{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:3px solid var(--ink);border-radius:16px;padding:16px}
.steps-light .num{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--plate);border:3px solid var(--ink);font:800 1.25rem var(--display);color:var(--ink)}
.uses{display:grid;gap:16px}
@media(min-width:800px){.uses{grid-template-columns:repeat(3,1fr)}}
.use{background:var(--white);border:3px solid var(--ink);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.use img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.use div{padding:16px;display:flex;flex-direction:column;flex:1}
.use h3{margin:0 0 4px;font:800 1.25rem var(--display);font-stretch:104%}
.use p{margin:0 0 4px;color:var(--ink-2);font-size:1rem}
.use .credit{margin-top:auto}
.procon{display:grid;gap:16px}
@media(min-width:800px){.procon{grid-template-columns:1fr 1fr}}
.pc{border:3px solid var(--ink);border-radius:16px;padding:20px;background:var(--white)}
.pc h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:800 1.5rem var(--display)}
.pc h3 span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;font-size:1.25rem}
.pro h3 span{background:var(--yes)} .con h3 span{background:var(--no)}
.pc ul{margin:0;padding-left:20px;display:grid;gap:8px}
.faq{display:grid;gap:8px;max-width:820px}
.faq details{background:var(--white);border:3px solid var(--ink);border-radius:16px}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px;padding:12px 16px;font:800 1.125rem/1.3 var(--body);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--plate);border:2px solid var(--ink);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 16px 16px}
.faq p{margin:0}
/* quiz v3: auto-advance; compact so the whole question fits on a phone screen */
.qtop{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px}
.qback{display:inline-flex;align-items:center;gap:4px;min-height:48px;padding:0 16px;border-radius:10px;border:2px solid var(--ink);background:var(--white);font:800 1rem var(--body);color:var(--ink);cursor:pointer}
.qback[hidden]{visibility:hidden;display:inline-flex}
.qbox .bar{margin:4px 0 12px}
.qbox legend{font-size:1.25rem;margin-bottom:8px}
.qbox .opt{min-height:60px;margin-bottom:8px;padding:8px 12px}
.opt.picked{border-color:var(--ink);background:var(--plate)}
.opt.picked .radio{background:var(--ink)}
.opt.picked .radio::after{content:"✓";color:var(--plate);font-weight:800;font-size:1rem;line-height:1}

.toast{position:fixed;left:16px;right:16px;bottom:84px;z-index:300;max-width:520px;margin:0 auto;padding:12px 16px;border-radius:16px;background:var(--ink);color:var(--white);font:700 1rem var(--body);box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:none}
@media(min-width:1000px){.toast{bottom:24px}}

/* ---------- your-state header (shape = memory cue) ---------- */
.mystate{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"sh lb ch" "sh nm nm";align-items:center;column-gap:12px;row-gap:2px;padding:0 0 12px;margin:0 0 12px;border-bottom:2px dashed var(--paper-3)}
.shape{grid-area:sh;align-self:start;display:grid;place-items:center;width:52px;height:52px;border-radius:10px;background:var(--paper)}
.shape svg{width:40px;height:40px;overflow:visible}
.shape path{fill:var(--plate);stroke:var(--ink);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mystate .lb{grid-area:lb;font:700 1rem var(--body);color:var(--ink-3)}
.mystate .nm{grid-area:nm;font:800 1.5rem/1.1 var(--display);font-stretch:102%;letter-spacing:-.02em}
.mystate .nm.long{font-size:min(1.25rem,6.4vw)}
.chg{grid-area:ch;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 12px;border-radius:10px;border:2px solid var(--ink);background:var(--white);font:800 1rem var(--body);color:var(--ink);cursor:pointer}
@media(hover:hover){.chg:hover{background:var(--plate)}}
.chg svg{width:18px;height:18px}
.answer .actions{display:block}
.answer .actions .btn{width:100%}
.answer .remember{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:1rem;font-weight:700;color:var(--ink-2)}
.answer .remember svg{flex:none;width:18px;height:18px;color:var(--yes)}
/* state list: outline next to each name; current state pinned on top */
.list button .sh{flex:none;width:34px;height:34px;margin-right:12px;display:grid;place-items:center}
.list button .sh svg{width:30px;height:30px;overflow:visible}
.list button .sh path{fill:var(--paper-3);stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke}
.list button .nm{flex:1}
.list button.current{background:#FFF6D6}
.list button.current .sh path{fill:var(--plate)}
.list .cur-tag{font:800 .875rem var(--body);background:var(--ink);color:var(--plate);padding:3px 8px;border-radius:999px;margin-right:8px}
/* bottom bar remembers the state */
.dock a .dsh{width:26px;height:26px;display:grid;place-items:center}
.dock a .dsh svg{width:26px;height:26px;overflow:visible}
.dock a .dsh path{fill:var(--plate);stroke:currentColor;stroke-width:2.2;vector-effect:non-scaling-stroke}

/* one footer line under the answer: remembered + checked */
.answer .foot-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:12px 0 0;font-size:.875rem;color:var(--ink-3)}
.answer .foot-line b{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2)}
.answer .foot-line svg{width:16px;height:16px;color:var(--yes)}
/* ---------- short phones (iPhone SE 375x667 and smaller): same content, tighter spacing ---------- */
@media(max-height:740px) and (max-width:999px){
  .hero{padding-top:8px!important}
  .hero-text .label{display:none}
  .hero h1{font-size:1.5rem;margin-top:0}
  .lede{margin-top:8px;font-size:1rem}
  .hero-grid{gap:12px}
  .checker{padding:16px 12px}
  .checker h2{font-size:1.25rem}
  .checker p{margin-bottom:8px}
  .pick{min-height:60px}
  .checker .helper{margin-top:4px}
  .answer{padding:12px 12px 12px}
  .mystate{padding-bottom:8px;margin-bottom:8px}
  .shape{width:44px;height:44px}.shape svg{width:34px;height:34px}
  .mystate .nm{font-size:1.25rem}
  .verdict .ic{width:42px;height:42px}.verdict .ic svg{width:26px;height:26px}
  .verdict strong{font-size:1.25rem}
  .answer .plain{font-size:1rem;margin:4px 0 8px}
  .answer li{font-size:1rem}
  .answer ul{margin-bottom:8px}
  .answer .actions .btn{min-height:52px}
  .qbox{padding:12px}
  .qbox .bar{margin:4px 0 8px}
  .qbox legend{font-size:1.125rem;margin-bottom:8px}
  .qbox .opt{min-height:54px;padding:4px 12px;margin-bottom:4px}
  .result-card{padding:12px;margin-bottom:8px}
}
/* ---------- design pass: rhythm, trust strip, owner stories ---------- */
section.band{background:var(--white);border-top:2px solid var(--paper-3);border-bottom:2px solid var(--paper-3);margin-top:72px;padding:64px 0}
section.band + section{padding-top:72px}
section.band + section.band{margin-top:0;border-top:0}
section.band .card,section.band .spec,section.band .model,section.band .ways li,section.band .use,section.band .pc,section.band .owner{background:var(--paper)}
.trust-strip{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px;margin-bottom:0}
@media(min-width:900px){.trust-strip{grid-template-columns:repeat(4,1fr);gap:16px}}
.trust-strip li{display:flex;align-items:center;gap:8px;padding:12px;border-radius:16px;background:var(--white);border:2px solid var(--paper-3)}
.trust-strip .ti{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--plate);border:2px solid var(--ink)}
.trust-strip .ti svg{width:20px;height:20px}
.trust-strip b{display:block;font:800 1rem/1.2 var(--body)}
.trust-strip li span:last-child{font-size:.875rem;line-height:1.3;color:var(--ink-2)}
.owners{display:grid;gap:16px}
@media(min-width:800px){.owners{grid-template-columns:1fr 1fr}}
.owner{position:relative;border:3px solid var(--ink);border-radius:16px;padding:20px 20px 16px;display:flex;flex-direction:column}
.owner .who{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.owner .shape{width:48px;height:48px;background:var(--white)}
.owner .shape svg{width:36px;height:36px}
.owner .who b{display:block;font:800 1.125rem/1.15 var(--display);font-stretch:104%}
.owner .who small{display:block;font:700 .875rem var(--body);color:var(--ink-3)}
.owner p{margin:0 0 8px;font-size:1.125rem;line-height:1.5}
.owner .src{margin-top:auto;display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;font-weight:700;color:var(--ink-2)}
.owner::before{content:"\201C";position:absolute;right:16px;top:-6px;font:400 4.5rem/1 var(--serif);color:var(--plate)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* tablets: use cards side by side (photo left, text right) instead of huge stacked photos */
@media(min-width:600px) and (max-width:799px){
  .use{flex-direction:row}
  .use img{width:42%;flex:none;aspect-ratio:4/3;align-self:center}
}
/* very narrow phones (under 340px): trust strip in one column so nothing pushes the page sideways */
.trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:339px){.trust-strip{grid-template-columns:1fr}}
@media(min-width:900px){.trust-strip{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Links to pages that are not built yet stay in the code (data-soon) but are hidden, so no button goes nowhere.
   When a page goes live: set its href and remove data-soon. */
[data-soon]{display:none !important}
.actions-row:not(:has(> a:not([data-soon]))){display:none}
/* Very narrow phones: the date goes above the change, so the words get the full width */
@media (max-width:359px){.changes li{grid-template-columns:1fr;gap:4px}.changes .when{width:auto}}
/* 280px phones: the answer's state row (shape, name, Change button) must stay inside the card */
@media(max-width:300px){.mystate{column-gap:8px}.mystate .chg{padding-left:8px;padding-right:8px}.mystate .shape{width:34px}}
/* very short phones (iPhone SE 1st gen, 568px tall): the state answer must still fit on one screen.
   "Saved on this device" goes (the bottom bar already shows the saved state); the check date and sources stay. */
@media(max-height:600px) and (max-width:999px){.answer .foot-line b{display:none}.answer{padding-top:12px;padding-bottom:12px}.mystate{padding-bottom:8px;margin-bottom:8px}}

/* keyboard users: "Skip to main content" appears on the first Tab */
.skip{position:absolute;left:12px;top:-60px;z-index:300;padding:12px 16px;border-radius:10px;background:var(--ink);color:#fff;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
/* the site is designed light only: stop phones (Samsung Internet, Chrome dark mode) from auto-darkening it,
   which turned the SPEED LIMIT road sign into a blank white box */
:root{color-scheme:only light}
/* keyboard focus is never hidden under the bottom bar (phones/tablets) or the top bar */
@media(max-width:999px){html{scroll-padding-bottom:96px}}

/* plain link rows (model pages: year guides) */
.year-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:12px 0 0;line-height:1.3}
.year-links b{width:100%}
@media(min-width:700px){.year-links b{width:auto;margin-right:4px}}
.year-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--brand-d)}
/* very short phones (568px tall): one-line state row, no foot line, so the whole answer fits between the bars */
@media(max-height:600px) and (max-width:999px){
  .mystate{grid-template-areas:"sh nm ch";grid-template-columns:auto 1fr auto}
  .mystate .lb{display:none}
  .answer .foot-line{display:none}
}
@media(max-height:600px) and (max-width:999px){
  .answer .plain,.answer ul li{font-size:1rem;line-height:1.4}
  .answer ul{margin-top:4px;margin-bottom:8px}
  .answer .verdict{margin-bottom:4px}
  .answer .ic.sign{height:46px}
  .answer .verdict strong{font-size:1.25rem}
}
@media(max-height:600px) and (max-width:999px){.verdict .ic.sign svg{height:46px}}

/* =========================================================
   PRINT (all pages). People print state pages to take to the DMV:
   keep the verdict, the law, the steps and forms, the costs, the roads rules, the FAQ and the sources;
   drop everything that only works on a screen. Target: a state page in about 3-4 Letter pages.
   ========================================================= */
@media print{
  @page{margin:.55in .6in}
  html{scroll-padding:0}
  body{background:#fff !important;color:#000 !important;font-size:11pt;line-height:1.4}
  /* screen-only parts */
  .top,.dock,.menu,.sheet,.toast,.skip,.crumbs,.jump,.chips,.checker,#check,.photo,.mapcard,.saying,
  .qtiles,.tiles-title,#quiz,.qbox,.yeartool,#year,.btn,.actions-row,.state-links,.year-links,
  #buy,#owners,#nearby,#plan,.uses,#about-page .about-page a[href="#"],
  footer .foot-grid,.credit,.textlink,noscript,.trust-line,.cur-tag{display:none !important}
  /* calm, compact layout on paper */
  main>section,section{padding:12pt 0 0 !important;margin:0 !important;border:0 !important;background:none !important;content-visibility:visible !important}
  .wrap{max-width:none !important;padding:0 !important}
  .card,.spec,.size-card,.changes,.ways3 li,.steps-light li,.faq details,.law,.rrule,.pc,.verdict,.answer,.model,.owner{background:#fff !important;box-shadow:none !important}
  .card,.spec,.size-card,.steps-light li,.ways3 li,.faq details,.law,.rrule,.pc,.verdict,table,tr,li,figure,.changes li,.key{break-inside:avoid}
  h1,h2,h3,h4{break-after:avoid;color:#000 !important}
  .label{display:flex !important;break-after:avoid;break-inside:avoid}
  .faq details{padding:6pt 10pt !important;margin:0 0 6pt !important}
  .faq summary{font-size:11pt !important;padding:0 !important;min-height:0 !important}
  .faq details>div p{margin:4pt 0 0 !important;font-size:10.5pt}
  .faq{gap:0 !important}
  .steps-box{display:none !important} /* "next step" promos only work on screen */
  h2.title{font-size:17pt !important;margin-top:6pt}
  .hero h1,.mhero h1{font-size:24pt !important}
  .label .n{border:1px solid #000;color:#000 !important;background:#fff !important}
  img{max-width:100% !important}
  /* every folded FAQ answer prints open (mockup.js opens them before printing) */
  .faq summary::after,.faq summary::before{display:none !important}
  /* sources on paper: print the web address after each outside link */
  main a[href^="http"]:not(.btn)::after{content:" (" attr(href) ")";font-size:8.5pt;font-weight:400;color:#333;word-break:break-all}
  a{color:#000 !important;text-decoration:underline}
  /* header line on the first page: where it came from and when it was printed (set by mockup.js) */
  body::before{content:attr(data-print);display:block;margin:0 0 10pt;padding-bottom:6pt;border-bottom:1px solid #000;font:700 10pt/1.3 Arial,sans-serif}
  footer{padding:10pt 0 0 !important;border-top:1px solid #000;background:none !important}
  footer .fine{display:block !important;font-size:9pt;color:#000}
}
/* "Forget my state" (state list): quiet, clearly a different action from picking a state */
.list button.forget{justify-content:flex-start;gap:8px;min-height:52px;font-weight:700;color:var(--no,#A42B22);background:#fff}
.list button.forget small{font-weight:400;font-size:.875rem;color:var(--ink-3)}

/* ---- Long words and large text (Nov. 9, 2026).
   Normal text: the layout is unchanged except on phones under 340 px, where long names and lists get room (below).
   Large text: the stronger rules below switch on only when the reader's own text size is large. A media query in em follows the
   browser/phone text-size setting, not the page, so at normal text size on a 280 px phone (17.5em) none of this applies. */
.vers b{flex-wrap:wrap} /* the hp tag drops under the version name when there's no room */
@media(max-width:340px){h1.kw.kw-long{font-size:min(2.5rem,12.4vw) !important}}
@media(max-width:340px){body:has(h1.kw-long) .dmv-top{grid-template-columns:40px minmax(0,1fr)}body:has(h1.kw-long) .dmv-top .btn{grid-column:2;justify-self:start}} /* same pages: the Print button goes under "Your Massachusetts RMV checklist" */ /* headings with a 12+ letter word (Massachusetts) fit a 280 px phone */
@media(max-width:17em){
  body{overflow-wrap:anywhere}
  main :is(div,li,dd,dt,td,th,article,figure,details,summary,label,span,p,a,section,ul,ol,dl,b,em,i,button){min-width:0}
  .top .wrap{height:auto;min-height:72px;flex-wrap:wrap;row-gap:4px;padding-top:4px;padding-bottom:4px}
  .logo{min-width:0}
  .btn,.menu-btn{max-width:100%;white-space:normal;text-align:center;height:auto}
  .receipt dd{white-space:normal;overflow-wrap:normal}
  .dock a{font-size:.625rem;overflow-wrap:normal;word-break:normal} /* 4 tabs at 200% text on a 280 px phone: smaller label, no mid-word breaks */
  body .kt-word{white-space:normal} /* body prefix: home.css (loaded later) sets nowrap on .kt-word at equal specificity */
}