/* Hallmark · shape: Workbench (draw da150d, swapped from Marquee Hero: its fold carries no product and makes a visitor scroll before they understand, and a Short's visitor has seconds) · genre: editorial · theme: Sport (deal 3/3, seed dmv-permit-practice-test-3f00·df5fe11e·2026-10-30·r0) · redesign: full · job: try, then buy the Pass Pack · draw: da150d
 * hero: Counter, the head, one sentence and the state form set large on 5 columns, the live question from the picked state answerable on 7 · nav: masthead, the wordmark centred over the bar rule, section links left, the language switch and one outlined action right · footer: index columns, the page builder's state, CDL and guide links, a pages column and one legal line · imagery: the product, captures of our own quiz and the live question, no photographs · signature: a real permit question in the hero, graded with its handbook section the moment it is answered
 * axes: light/display-condensed/chromatic-volt · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a test-prep page argues little; the argument is the real question answerable in the first screen and the price stated once a test is done, never a promise to pass */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved (the diagram spans the well, the question before the picture on a phone, the head a step larger, the answered state captured and lifted into the first screen) · 1 for the owner: the head is the category's search phrase, kept as the owner's words */
/* Hallmark · finish-review: subagent · 8 findings · 7 resolved (captures paired with captions beside them, the ink band back above them with the state table between, the offer capture cropped under its button, plans across the container with the Pass Pack lifted a paper step, the answered picture aligned left, answers the full column on a phone, the footer pages stacked and the Spanish head a step smaller) · 1 partial (the facts under the hero two steps larger at --text-3xl, not display-s: the first is a phrase that would run three lines in a third of the row) · old page better: the site directory under the quiz, kept · gap: none */
/* Hallmark · dismissed 41 · --color-on-ink only ever sits on --color-ink in the band; the answer washes carry --color-ink text */
/* Hallmark · dismissed 69 · the $9.99 price is the owner's offer, printed once per screen a visitor sees: the hero note, the plan, and the offer, result and limit screens that replace each other */
/* Hallmark · answered F4 · the two filled answer states are the quiz's right and wrong marks, not buttons to press; volt start and Pass Pack buttons are the page's one primary recipe */
/* Hallmark · answered F7 · one control recipe for every button with two fills by role: volt for start and buy, an ink outline for the second action */
/* Hallmark · answered F1 · app.js rewrites these strings at load with straight apostrophes; the HTML copy matches them so no line shifts on load */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/SairaCondensed-800-latin.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/AlbertSans-latin.woff2") format("woff2"); }

:root {
  --nav-h: 64px;
  --control: 52px;
  --control-sm: 44px;
  --quiz: 680px;
  --doc: 760px;
  --text-hero: clamp(2.75rem, 4.6vw + 1rem, 6.5rem);
  --text-price: clamp(3rem, 2vw + 2.25rem, 4.25rem);
  --color-on-ink: var(--color-paper);
  --color-on-ink-muted: oklch(82% 0.02 250);
  --color-rule-ink: oklch(36% 0.05 258);
  --color-ok-bg: oklch(95% 0.035 150);
  --color-no-bg: oklch(95.5% 0.022 27);
  --color-ok-ink: oklch(40% 0.11 150);
  --color-no-ink: oklch(45% 0.17 27);
  --ok: var(--color-success);   /* app.js paints the score ring with these two */
  --warn: var(--color-error);
}

/* type: Saira Condensed 800 in capitals for heads and figures, Albert Sans 400 and 500 for reading */
body { font-synthesis: none; }
b, strong { font-weight: 500; }
h1, h2, h3 { text-transform: uppercase; line-height: 1.02; }
h1 { font-size: var(--text-hero); line-height: 1; }
input, select { caret-color: var(--color-ink); }
a { text-decoration-color: color-mix(in oklab, currentColor 45%, var(--color-paper)); transition: text-decoration-color var(--dur-short) var(--ease-out); }
@media (hover: hover) { a:hover { text-decoration-color: var(--color-accent-deep); } }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* masthead: the wordmark centred over the bar rule; section links left; language and one outlined action right */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: var(--nav-h); max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--control-sm); font: var(--display-weight) var(--text-xl)/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.brand .mark { flex-shrink: 0; }
.nav { display: none; }
.top-r { display: flex; align-items: center; gap: var(--space-xs); }
.lang { display: flex; }
.lang button { font: 500 var(--text-sm)/1 var(--font-body); min-height: var(--control-sm); padding-inline: var(--space-xs); border: 0; background: none; color: var(--color-muted); cursor: pointer; white-space: nowrap; text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.lang button:hover { color: var(--color-ink); }
.lang button:active { color: var(--color-ink-2); }
.lang button[aria-pressed="true"] { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: var(--rule-bar); text-underline-offset: 0.45em; text-decoration-color: var(--color-ink); }
.top .other { font-size: var(--text-sm); color: var(--color-ink); min-height: var(--control-sm); display: inline-flex; align-items: center; }
@media (min-width: 60rem) {
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 72px; }
  .brand { grid-column: 2; grid-row: 1; font-size: var(--text-2xl); }
  .nav { grid-column: 1; grid-row: 1; display: flex; gap: var(--space-lg); }
  .nav a { font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-ink); text-decoration: none; min-height: var(--control-sm); display: inline-flex; align-items: center; white-space: nowrap; }
  .nav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent-deep); text-underline-offset: 0.35em; }
  .nav a:active { color: var(--color-ink-2); }
  .top-r { grid-column: 3; grid-row: 1; justify-self: end; gap: var(--space-md); }
  .top .other { grid-column: 3; grid-row: 1; justify-self: end; }
  .nav-go { display: inline-flex; }
  body:has(#home[hidden]) .nav, body:has(#home[hidden]) .nav-go { display: none; }   /* the quiz and offer screens: no anchors to the home page */
}

/* controls: one volt fill for the action, an ink outline for the second, both 4px, display capitals */
.go, .buy, #next, #again, .alt, .code-go, .nav-go, #copy-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--control); padding-inline: var(--space-lg);
  border: var(--rule-bar) solid transparent; border-radius: var(--radius-card); cursor: pointer; text-decoration: none; white-space: nowrap;
  font: var(--display-weight) var(--text-lg)/1 var(--font-display); letter-spacing: 0;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.go, .buy, #next, #again, .alt, .code-go { text-transform: uppercase; }   /* the display voice; the nav action and the copy button stay sentence case */
.go, .buy, #next, #again { background: var(--color-accent); color: var(--color-accent-ink); }
.go:hover, .buy:hover, #next:hover, #again:hover { background: color-mix(in oklab, var(--color-accent) 82%, var(--color-ink)); }
.go:active, .buy:active, #next:active, #again:active { background: color-mix(in oklab, var(--color-accent) 70%, var(--color-ink)); }
.go:disabled, #next:disabled, #again:disabled { opacity: 0.55; cursor: not-allowed; }
.alt, .nav-go, .code-go, #copy-link { background: var(--color-paper); border-color: var(--color-ink); color: var(--color-ink); }
.alt:hover, .nav-go:hover, .code-go:hover, #copy-link:hover { background: var(--color-paper-3); }
.alt:active, .nav-go:active, .code-go:active, #copy-link:active { background: var(--color-rule); }
.alt:disabled, .code-go:disabled { opacity: 0.55; cursor: not-allowed; }
.nav-go { min-height: var(--control-sm); font: 500 var(--text-sm)/1 var(--font-body); padding-inline: var(--space-md); }
@media (max-width: 59.99rem) { .nav-go { display: none; } }   /* the hero's own button is on a phone's first screen */
.alt.wide, .plan .buy { width: 100%; }
@media (max-width: 40rem) { .go, .buy, #next, #again, .alt, .code-go { font-size: 1.125rem; padding-inline: var(--space-md); } }   /* the longest Spanish label fits a 375 phone on one line */
@media (max-width: 22.5rem) {
  .go, .buy, #next, #again, .alt, .code-go { font-size: var(--text-md); }
  #offer-tests .alt { white-space: normal; text-align: center; line-height: 1.1; padding-block: var(--space-xs); }   /* a 320 phone: a long Spanish full-test label wraps rather than clips */
}

/* hero (Counter): the head, one sentence and the state form on 5 columns; the live question on 7 */
.hero { padding-block: var(--space-xl) var(--space-2xl); }
.hero-grid { display: grid; gap: var(--space-xl); }
.intro h1 { max-width: 14ch; }
html[lang="es"] .intro h1 { font-size: clamp(2.5rem, 3.4vw + 1rem, 5rem); max-width: 18ch; }
.intro .lead { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 44ch; }
.start { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); max-width: 34rem; }
.pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
.start.one .pick, .pick:has(> label[hidden]) { grid-template-columns: minmax(0, 1fr); }   /* one format, or a school page that fixes the state */
.pick > label { display: grid; gap: var(--space-2xs); margin: 0; }
.pick > label > span, .age legend { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); }
.age legend { padding: 0; margin-bottom: var(--space-2xs); }
select { width: 100%; min-width: 0; height: var(--control); padding-inline: var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-md)/1.2 var(--font-body); cursor: pointer; }
select:hover { border-color: var(--color-ink); }
select:disabled { opacity: 0.55; cursor: not-allowed; }
.age { border: 0; padding: 0; margin: 0; min-width: 0; }
.seg { display: flex; height: var(--control); padding: var(--space-2xs); gap: var(--space-2xs); border: 1px solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); }
.seg label { flex: 1 1 0; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; padding-inline: var(--space-2xs); border-radius: 2px; cursor: pointer; white-space: nowrap; font: 500 var(--text-sm)/1.1 var(--font-body); color: var(--color-ink); transition: background-color var(--dur-micro) var(--ease-out); }
.seg label:hover { background: var(--color-paper-3); }
.seg label:has(input:checked) { background: var(--color-ink); color: var(--color-paper); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
button.go { width: 100%; }
.go-note { font-size: var(--text-sm); line-height: 1.45; color: var(--color-muted); max-width: 46ch; }
.appstore { margin-top: var(--space-md); }
.es-note, .hero-ready { margin-top: var(--space-md); max-width: 34rem; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-ink-2); }
@media (min-width: 60rem) {
  .hero { min-height: min(calc(100svh - 72px), 52rem); display: grid; align-items: center; padding-block: var(--space-xl); }   /* one screen, capped for very tall windows */
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: stretch; }
  .intro { align-self: center; }
  .sample { align-content: center; }
  .start { margin-top: var(--space-xl); }
}

/* the live question: a real one from the picked state, answerable here (it never uses the free daily test) */
.sample { margin: 0; background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); padding: var(--space-lg); display: grid; gap: var(--space-lg); align-items: start; }
#s-q, #question { font: 500 var(--text-title)/1.3 var(--font-body); text-transform: none; letter-spacing: 0; max-width: 36ch; }
@media (max-width: 40rem) { .sample { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } }   /* edge to edge on a phone: the answers keep their width */
@media (max-width: 22.5rem) {
  .choices button { padding-left: calc(var(--space-xl) + var(--space-2xs)); padding-right: var(--space-sm); }
  .choices button::before { left: var(--space-xs); width: 24px; height: 24px; }
}
@media (max-width: 59.99rem) {   /* on a phone the question comes first, so it reaches the first screen; the picture follows it */
  .sample { display: flex; flex-direction: column; align-items: stretch; }
  .sample-body { display: contents; }
  #s-q { order: -1; }
  .sample .choices { margin-top: 0; }
}
@media (min-width: 60rem) {
  .sample { padding: var(--space-xl); gap: var(--space-lg); }
  .sample .pic img { max-height: min(44svh, 26rem); object-fit: contain; }   /* the picture across the well, the question and answers under it, all inside the first screen */
  .sample:has(#s-feedback:not([hidden])) #s-pic img { max-height: 20svh; width: auto; margin-inline: 0; }   /* once answered, the grade and its handbook section come up into the screen */
  #s-q { max-width: 40ch; }
}
.pic { margin: 0; }
.pic img { width: 100%; height: auto; border-radius: var(--radius-card); background: var(--color-paper-3); }
.pic.sign { background: var(--color-paper); border-radius: var(--radius-card); padding: var(--space-md); display: flex; justify-content: center; }
.sample .pic.sign, .feedback .pic.sign { background: var(--color-paper); }
.pic.sign img { width: auto; height: 150px; background: none; border-radius: 0; }
.pic.sign.tall img { height: 240px; }

.choices { display: grid; gap: var(--space-xs); margin-top: var(--space-md); counter-reset: choice; }
.choices button {
  counter-increment: choice; position: relative; display: block; width: 100%; min-height: var(--control); text-align: left; cursor: pointer;
  padding: var(--space-sm) var(--space-md) var(--space-sm) calc(var(--space-2xl) - var(--space-xs));
  border: 1px solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-md)/1.35 var(--font-body);
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.choices button::before {
  content: counter(choice, upper-alpha); position: absolute; left: var(--space-sm); top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 2px; background: var(--color-paper-3); color: var(--color-ink);
  font: var(--display-weight) var(--text-md)/1 var(--font-display);
}
.choices button:hover:not(:disabled) { border-color: var(--color-ink); }
.choices button:hover:not(:disabled)::before { background: var(--color-accent); }
.choices button:active:not(:disabled) { background: var(--color-paper-3); }
.choices button:disabled { cursor: not-allowed; }
.choices button:disabled:not(.ok):not(.no) { color: var(--color-muted); border-color: var(--color-rule); }
.choices button.ok { border-color: var(--color-success); background: var(--color-ok-bg); font-weight: 500; }
.choices button.ok::before { content: "\2713"; background: var(--color-success); color: var(--color-paper); }
.choices button.no { border-color: var(--color-error); background: var(--color-no-bg); font-weight: 500; }
.choices button.no::before { content: "\2715"; background: var(--color-error); color: var(--color-paper); }

.feedback { margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); }
#verdict, #s-verdict { font: 500 var(--text-lg)/1.35 var(--font-body); margin-bottom: var(--space-2xs); }
#verdict.ok, #s-verdict.ok { color: var(--color-ok-ink); }
#verdict.no, #s-verdict.no { color: var(--color-no-ink); }
#explain, #s-explain { color: var(--color-ink-2); margin-bottom: var(--space-sm); }
.feedback .pic { margin-bottom: var(--space-sm); }
.cite { font-size: var(--text-sm); line-height: 1.5; margin-bottom: var(--space-sm); }
.cite a { color: var(--color-ink); font-weight: 500; text-decoration: underline; padding-block: var(--space-sm); }   /* inline padding: a taller tap area, the same line */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.link { font: 400 var(--text-sm)/1.2 var(--font-body); min-height: var(--control-sm); padding-inline: var(--space-2xs); border: 0; background: none; color: var(--color-muted); text-decoration: underline; cursor: pointer; }
.link:hover { color: var(--color-ink); }
.link:active { color: var(--color-ink-2); }
.link:disabled { text-decoration: none; cursor: not-allowed; opacity: 0.55; }

/* the facts under the hero: count and source, the real pass mark with its source, the day we last checked */
.spec { border-top: 1px solid var(--color-rule); }
.strip { display: grid; gap: 0; margin: 0; }
.strip > div { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.strip dt { font: var(--display-weight) var(--text-3xl)/1 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; margin-bottom: var(--space-2xs); }
.strip dd { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); max-width: 40ch; }
.strip dd a { font-weight: 500; padding-block: var(--space-sm); }
.format-note { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-sm); max-width: 65ch; }
.spec .format-note { margin-block: var(--space-md) 0; }
@media (min-width: 60rem) {
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip > div { border-bottom: 0; border-left: 1px solid var(--color-rule); padding: var(--space-lg) var(--space-xl); }
  .strip > div:first-child { border-left: 0; padding-left: 0; }
  .strip > div:last-child { padding-right: 0; }
}

/* sections below the hero */
.sec { padding-block: var(--section-gap); }
.sec h2 { margin-bottom: var(--space-2xl); }

/* the product in use: captures of our own quiz, each with the fact it shows */
.feats-grid h2 { max-width: 18ch; }
.feat-list { display: grid; border-top: var(--rule-bar) solid var(--color-rule-2); }
.feat { margin: 0; display: grid; gap: var(--space-lg); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.feat:first-child { border-top: 0; }
.shot { width: 100%; max-width: 18rem; height: auto; border-radius: var(--radius-card); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; background: var(--color-paper-2); }
.feat figcaption h3 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.feat figcaption p { color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.5; max-width: 40ch; }
@media (min-width: 60rem) {
  .feat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
  .feat figcaption h3 { font-size: var(--text-2xl); }
}
@media (min-width: 75rem) {   /* two captures to a row, each with its caption beside it */
  .feat-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap-columns); }
  .feat:nth-child(2) { border-top: 0; }
}

/* the ink band: what every practice test holds */
.band-ink { background: var(--color-ink); color: var(--color-on-ink); padding-block: var(--section-gap-s); }
.band-ink h2, .band-ink h3 { color: var(--color-on-ink); }
.band-ink :focus-visible { outline-color: var(--color-accent); }
.how-grid { display: grid; gap: var(--space-xl); }
.how-head p { color: var(--color-on-ink-muted); font-size: var(--text-lead); line-height: 1.45; margin-block: var(--space-md) var(--space-lg); max-width: 46ch; }
.band-ink .alt { background: var(--color-ink); border-color: var(--color-on-ink); color: var(--color-on-ink); }
.band-ink .alt:hover { background: var(--color-ink-2); }
.band-ink .alt:active { background: var(--color-rule-ink); }
.kcards { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-on-ink-muted); }
.kcards li { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule-ink); display: grid; gap: var(--space-2xs); }
.kcards h3 { font-size: var(--text-xl); }
.kcards p { color: var(--color-on-ink-muted); max-width: 52ch; }
@media (min-width: 60rem) {
  .how-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
  .kcards li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: baseline; }
}

/* the real test, by state: a results sheet, the bar rule opening and closing it */
#states-table { padding-block: var(--section-gap-s) var(--section-gap); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-md); line-height: 1.5; border-top: var(--rule-bar) solid var(--color-rule-2); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: var(--space-md) var(--space-sm); border-top: 1px solid var(--color-rule); }
.tbl th { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); white-space: nowrap; border-top: 0; }
.tbl td:first-child { font-weight: 500; white-space: nowrap; }
.tbl td:first-child a { color: var(--color-ink); }
.tbl td a { font-weight: 500; padding-block: var(--space-sm); }
@media (max-width: 59.99rem) {
  .tbl thead { display: none; }
  .tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
  .tbl tbody tr:first-child { border-top: 0; }
  .tbl td { display: block; border: 0; padding: 0; }
  .tbl td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--color-ink-2); }
  .tbl td:last-child { grid-column: 2; grid-row: 1; text-align: right; }
}
@media (min-width: 60rem) {
  .tbl th:first-child, .tbl td:first-child { padding-left: 0; }
  .tbl th:last-child, .tbl td:last-child { padding-right: 0; text-align: right; }
  .tbl td:first-child { font: var(--display-weight) var(--text-xl)/1.1 var(--font-display); text-transform: uppercase; }
}

/* pricing: two plans side by side, the Pass Pack carries the volt button */
.pricing { padding-block: var(--section-gap-s); }
.plans { display: grid; gap: var(--space-lg); }
.plan { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); padding: var(--space-lg); display: flex; flex-direction: column; }
.plans > .plan:not(.pro) { background: none; border-top: 1px solid var(--color-rule); }   /* Free on the paper, the Pass Pack lifted one step */
@media (max-width: 40rem) { .plan { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } }   /* edge to edge on a phone, like the question well: the Spanish labels keep one line */
.plan-name { font: var(--display-weight) var(--text-xl)/1.05 var(--font-display); text-transform: uppercase; color: var(--color-ink); margin-bottom: var(--space-xs); }
.plan .offer-h { font: 500 var(--text-lg)/1.35 var(--font-body); text-transform: none; }
.plan-price { color: var(--color-muted); font-size: var(--text-md); margin-bottom: var(--space-md); }
.plan-price b { font: var(--display-weight) var(--text-price)/1 var(--font-display); color: var(--color-ink); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; margin-right: var(--space-2xs); }
.checks { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; gap: var(--space-xs); }
.checks li { position: relative; padding-left: var(--space-lg); color: var(--color-ink-2); line-height: 1.45; }
.checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 500; color: var(--color-ink); }
.plan .buy, .plan .alt { margin-top: auto; }
.fine { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.fine a { color: var(--color-muted); padding-block: var(--space-sm); }
.cdl-hint { margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-sm); }
.cdl-hint a { font-weight: 500; color: var(--color-ink); white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--control-sm); }
@media (min-width: 60rem) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
  .plan { padding: var(--space-xl); }
}

/* the driving school code */
.code { margin-top: var(--space-lg); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
#paywall .code { border-bottom: 0; padding-top: var(--space-md); }
.code p { margin-bottom: var(--space-xs); }
.code-form { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-bottom: var(--space-md); }
.code-in { height: var(--control); width: 13em; max-width: 100%; padding-inline: var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); text-transform: uppercase; }
.code-in::placeholder { color: var(--color-muted); text-transform: none; }
.code-in:hover { border-color: var(--color-ink); }
.code-in:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.code-in:disabled { opacity: 0.55; cursor: not-allowed; }
.code-go { font-size: var(--text-md); }
.code-msg { flex-basis: 100%; font-size: var(--text-sm); }
.code-msg.ok { color: var(--color-ok-ink); }
.code-msg.no { color: var(--color-no-ink); }

/* disclosure rows: the questions, the code box, the review list */
summary { cursor: pointer; list-style: none; position: relative; min-height: var(--control-sm); padding: var(--space-sm) var(--space-xl) var(--space-sm) 0; font: 500 var(--text-lg)/1.4 var(--font-body); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: var(--space-xs); top: 50%; width: 10px; height: 10px; border-right: var(--rule-bar) solid var(--color-ink); border-bottom: var(--rule-bar) solid var(--color-ink); transform: translateY(-75%) rotate(45deg); transition: transform var(--dur-short) var(--ease-in-out); }
details[open] > summary::after { transform: translateY(-25%) rotate(225deg); }
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }
summary:hover { text-decoration: underline; text-decoration-color: var(--color-accent-deep); text-underline-offset: 0.3em; }
.code summary { font-size: var(--text-md); }
.faq-rows details { border-bottom: 1px solid var(--color-rule); padding-block: var(--space-xs); }
.faq-rows details:first-child { border-top: var(--rule-bar) solid var(--color-rule-2); }
.faq-rows details p { color: var(--color-ink-2); margin-block: var(--space-2xs) var(--space-sm); max-width: 62ch; }
.faq-grid { display: grid; gap: var(--space-lg); }
.faq-grid h2 { margin-bottom: 0; }
@media (min-width: 60rem) { .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; } }

/* the close: the start button again on a paper band */
.band-close { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); padding-block: var(--section-gap-s); }
.close-in { display: grid; gap: var(--space-lg); }
.close-in p { color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.45; max-width: 46ch; }
.close-in h2 { max-width: 16ch; }
@media (min-width: 60rem) {
  .close-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap-columns); align-items: end; }
  .close-in h2, .close-in p { grid-column: 1; }
  .close-in .band-go { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; width: auto; }
}

/* footer: index columns the page builder writes, a pages column, one legal line */
footer { padding-block: var(--space-2xl) var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }
footer h2 { font: 500 var(--text-md)/1.3 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--color-ink); margin-bottom: var(--space-2xs); max-width: none; }
footer a { color: var(--color-ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--control-sm); }
footer a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent-deep); }
.states { margin: 0; }
.states p { margin-bottom: var(--space-lg); line-height: 1.4; break-inside: avoid; }
.states a { display: flex; }   /* one link per line; a long guide title wraps inside itself on a 320 px phone */
.states p + h2 { break-before: column; }
.foot-pages p { display: grid; justify-items: start; }
.legal { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
@media (min-width: 60rem) {
  footer { border-top: var(--rule-bar) solid var(--color-rule-2); max-width: var(--container); margin-inline: auto; }
  main + footer, .doc + footer { border-top: 0; }
  .foot-grid { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: var(--gap-columns); }
  .states { column-count: 3; column-gap: var(--gap-columns); }
}
/* doc pages and school pages write their footer as plain paragraphs: give them the gutter */
footer > p:not(.legal) { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
footer > p + p { margin-top: var(--space-xs); }

/* the quiz, the result, the daily limit and the offer: one 680 px column */
#quiz, #result, #paywall, #offer { max-width: calc(var(--quiz) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-lg) var(--gutter) var(--space-3xl); }
#quick { font: var(--display-weight) var(--text-xl)/1.05 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--color-ink); margin-bottom: var(--space-xs); }
.quick-states { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-xs); }
.quick-states a { color: var(--color-ink); white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--control-sm); }
.bar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-xs); font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-ink); }
#score { color: var(--color-muted); font-variant-numeric: tabular-nums; }
progress { display: block; width: 100%; height: 6px; appearance: none; border: 0; border-radius: 0; background: var(--color-paper-3); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--color-paper-3); }
progress::-webkit-progress-value { background: var(--color-ink); }
progress::-moz-progress-bar { background: var(--color-ink); }
.qcard { margin-block: var(--space-md) 0; display: grid; gap: var(--space-md); }
#quiz .pic img { max-height: 34svh; object-fit: contain; }   /* the picture, the question and all three answers fit a phone's first screen */
#quiz .pic.sign img { height: min(150px, 20svh); }
#quiz .pic.sign.tall img { height: min(240px, 30svh); }
#question:focus, #question:focus-visible { outline: none; }   /* app.js moves focus here for screen readers on each question; it is not a control */
.label { font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); margin-bottom: var(--space-2xs); }
.instant #home { display: none !important; }   /* boot.js: a Short's visit opens on the quiz before the first paint */
.instant #quiz { display: block !important; }

/* result: the score ring, readiness against the pass mark, the mistakes to review */
#result-title, #offer-title, #paywall h2 { font-size: var(--text-section); margin-block: var(--space-xs) var(--space-sm); }
#result-text { color: var(--color-ink-2); margin-bottom: var(--space-lg); }
.scorecard { display: flex; align-items: center; gap: var(--space-lg); padding-block: var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule-2); border-bottom: 1px solid var(--color-rule); margin-bottom: var(--space-lg); }
.ring { --v: 0; --c: var(--color-ink); flex: 0 0 auto; width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--color-paper-3) 0); }
.ring::after { content: ""; position: absolute; inset: var(--space-sm); border-radius: 50%; background: var(--color-paper); }
.ring b { position: relative; z-index: var(--z-raised); font: var(--display-weight) var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ready { flex: 1; min-width: 0; }
.ready strong { display: block; font: var(--display-weight) var(--text-xl)/1.05 var(--font-display); text-transform: uppercase; margin-bottom: var(--space-2xs); }
.ready p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.45; }
.meter { position: relative; height: 10px; background: var(--color-paper-3); margin-block: var(--space-sm) var(--space-xs); }
.meter span { display: block; height: 100%; width: 0; background: var(--color-ink); }
.meter.low span { background: var(--color-error); }
.meter em { position: absolute; top: -6px; width: 3px; height: 22px; margin-left: -1.5px; background: var(--color-ink); }
.meter.big { height: 16px; }
.meter.big em { top: -8px; height: 32px; }
#review { margin-block: var(--space-lg); }
#review h3 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
#review details { border-top: 1px solid var(--color-rule); padding-block: var(--space-2xs); }
#review details:last-child { border-bottom: 1px solid var(--color-rule); }
#review summary { font-size: var(--text-md); }
#review p { color: var(--color-ink-2); }
#review a { font-size: var(--text-sm); color: var(--color-ink); display: inline-flex; align-items: center; min-height: var(--control-sm); }
.source { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.source p { font-weight: 500; margin-bottom: var(--space-sm); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips button { min-height: var(--control-sm); padding-inline: var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.chips button:hover { border-color: var(--color-ink); }
.chips button:active { background: var(--color-paper-3); }
.chips button:disabled { opacity: 0.55; cursor: not-allowed; }

/* the offer after the free questions: the score against the real pass mark, the Pass Pack, today's free full test */
.vs { margin-block: var(--space-md); }
.vs-legend { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xs); font: var(--display-weight) var(--text-xl)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
#offer-vs { color: var(--color-ink-2); margin-bottom: var(--space-lg); }
#offer .plan, #result .plan, #paywall .plan { margin-block: var(--space-lg); }
#offer-paid { font-weight: 500; margin-bottom: var(--space-md); }
#offer-free { font-weight: 500; margin-bottom: var(--space-sm); }
#offer-tests .alt { flex: 1 1 14em; }
#offer-share { margin-top: var(--space-lg); }
#paywall > p { color: var(--color-ink-2); }

/* doc pages (state pages, guides, privacy, terms, credits, schools): the same paper, type and controls */
main.doc { max-width: calc(var(--doc) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-xl) var(--gutter) var(--space-3xl); }
.doc h1 { font-size: var(--text-display-s); line-height: 1.02; max-width: 18ch; margin-bottom: var(--space-md); }
.doc h2 { font-size: var(--text-2xl); margin-block: var(--space-2xl) var(--space-sm); }
.doc h3 { font: 500 var(--text-lg)/1.35 var(--font-body); text-transform: none; letter-spacing: 0; margin-bottom: var(--space-xs); }
.doc p, .doc ul, .doc ol { margin-bottom: var(--space-md); }
.doc .lead { color: var(--color-ink-2); }
.doc a { text-decoration: underline; }
.doc .buy, .doc .code-go { text-decoration: none; }
.doc p:has(> .buy) { margin-block: var(--space-lg); }
.sq { margin: 0; padding-block: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-rule); }
.sq h3 { margin-bottom: var(--space-sm); }
.sq ol { padding-left: var(--space-lg); margin-bottom: var(--space-sm); }
.sq ol li { margin-bottom: var(--space-2xs); }
.sq details { border: 0; }
.sq summary { font-size: var(--text-md); padding-block: var(--space-xs); }
.sq .cite { margin-top: var(--space-xs); }
.sq .label { margin-bottom: var(--space-xs); }
.doc table.facts { border-collapse: collapse; width: 100%; font-size: var(--text-sm); margin-block: var(--space-xs) var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule-2); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.doc table.facts th, .doc table.facts td { text-align: left; vertical-align: top; padding: var(--space-xs) var(--space-sm); border-top: 1px solid var(--color-rule); }
.doc table.facts th { color: var(--color-muted); font-weight: 500; }
@media (max-width: 30rem) {
  .doc table.facts th, .doc table.facts td { padding: var(--space-xs) var(--space-2xs); }
  .doc table.facts td { overflow-wrap: anywhere; }
}
.doc ul.facts li { margin-bottom: var(--space-sm); }
.doc ul.facts a.cite { font-size: var(--text-sm); white-space: nowrap; }
.doc ul.links { padding-left: var(--space-lg); }
.doc ul.links li { margin-block: var(--space-xs); }
.doc .credit { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.doc pre { white-space: pre-wrap; font: 400 var(--text-sm)/1.45 var(--font-body); color: var(--color-ink-2); }
.doc + footer { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.doc + footer a, main.doc + footer a { margin-right: var(--space-md); }

/* a driving school's page (/school/<slug>): the school's name and city in the masthead, no logo */
.school-id { min-width: 0; }
.school-id .school-name { font: var(--display-weight) var(--text-lg)/1.1 var(--font-display); text-transform: uppercase; }
.school-id .school-city { color: var(--color-muted); font-size: var(--text-sm); }
.top:has(.school-id) { padding-block: var(--space-xs); }
@media (min-width: 60rem) { .school-id { grid-column: 2; grid-row: 1; text-align: center; } }
.top .lang { flex-shrink: 0; }
.share { margin-top: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
#copy-link { font: 500 var(--text-sm)/1 var(--font-body); min-height: var(--control-sm); }
#copied { color: var(--color-ok-ink); font-size: var(--text-sm); }

/* the codes page after a school pays (/school-codes) */
.codes { padding-left: var(--space-lg); }
.codes li { padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule); overflow-wrap: anywhere; }
.codes code { font: var(--display-weight) var(--text-lg)/1.4 var(--font-display); letter-spacing: 0.02em; margin-right: var(--space-xs); }
.codes a { font-size: var(--text-sm); }