/* ===========================================================================
   allnightonlinetraffic.com — framework
   ---------------------------------------------------------------------------
   One stylesheet. The live site loaded Bootstrap 5.0.0-beta3 AND Bootstrap
   5.2.3 AND MDB UI Kit 9, plus FontAwesome and ScrollReveal — roughly 500KB of
   blocking third-party payload on a two-page site. All of it is gone. Icons
   are inline SVG.

   Layout uses flex/grid with gap, never margins between siblings: gap survives
   direct manipulation, whitespace text nodes do not.
   ======================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* A page must never scroll sideways. This is the safety net, not the fix — the
   causes are fixed at source (see .grid-side). Anything that genuinely needs to
   be wider than the screen scrolls inside its own container instead. */
html, body { overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); font-weight: 800; }
h2 { font-size: var(--step-4); font-weight: 800; }
h3 { font-size: var(--step-2); font-weight: 700; }
h4 { font-size: var(--step-0); font-weight: 700; }

p  { margin: 0; }
p + p { margin-top: var(--s-3); }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--amber-ink);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Keyboard users reach the content without walking the whole nav. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--night); color: #fff;
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-display); font-weight: 700;
}
.skip:focus { left: 0; text-decoration: none; color: #fff; }

/* ---- layout -------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.band { background: var(--band); border-block: 1px solid var(--line); }
.section { padding-block: var(--s-7); }
.stack { display: flex; flex-direction: column; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim);
}
.lead { font-size: var(--step-1); color: var(--muted); max-width: 34em; }
.muted { color: var(--muted); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---- a two-column block that MUST collapse on a phone --------------------- */
/* These were written as inline grid-template-columns:280px 1fr, which no media
   query could reach. On a 393px screen a 280px fixed column plus a 1fr column
   forces the document wider than the viewport, and everything on the page then
   renders clipped at the right edge. That was the cause of the mobile overflow,
   not the header. Any fixed-width grid column belongs in a class. */
.grid-side { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
@media (max-width: 900px) {
  .grid-side { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* ---- nav ----------------------------------------------------------------- */
.nav { border-bottom: 1px solid var(--line); padding-block: var(--s-3); }
.nav-inner { display: flex; align-items: center; gap: var(--s-5); }
.nav-brand { display: flex; align-items: center; gap: 0.7rem; flex-grow: 1; color: inherit; }
.nav-brand:hover { text-decoration: none; }
.nav-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1875rem; letter-spacing: 0.02em; line-height: 1; }
.nav-sub  { font-size: 0.6875rem; letter-spacing: 0.19em; color: var(--dim); text-transform: uppercase; line-height: 1.5; }
/* The landmark holds the collapsible group AND the login side by side. */
.nav-nav { display: flex; align-items: center; gap: var(--s-4); }
.nav-links { display: flex; align-items: center; gap: var(--s-4); font-size: 0.9375rem; font-weight: 500; }
.nav-links a { color: var(--ink); }
.nav-links a.is-here { color: var(--ca-ink); border-bottom: 2px solid var(--ca); padding-bottom: 3px; }
.nav-links a.is-here-va { color: var(--va-ink); border-bottom: 2px solid var(--va); padding-bottom: 3px; }

/* LOGIN IS A FIRST-CLASS NAV ITEM AT EVERY WIDTH.
   These are long courses and a large share of traffic is returning students.
   A returning student who cannot find login on a phone is a support call.
   nav-login-m is what the gate checks survives at phone widths — it must
   never be moved inside a hamburger-only container. */
.nav-login {
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  color: var(--ink); border: 1px solid var(--line);
  padding-inline: var(--s-3); border-radius: var(--radius-sm);
  min-height: var(--tap); display: inline-flex; align-items: center;
  flex-shrink: 0;
}
.nav-login:hover { text-decoration: none; border-color: var(--amber-ink); }

.nav-toggle {
  display: none;
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
}
@media (max-width: 860px) {
  /* Only .nav-links collapses. .nav-nav stays a flex row so the login, which is
     its sibling and not its child, is never pulled into the drawer. */
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav[data-open="true"] .nav-nav { flex-wrap: wrap; }
  .nav[data-open="true"] .nav-links {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--s-3); width: 100%; padding-top: var(--s-3); order: 3;
  }
  .nav-inner { flex-wrap: wrap; gap: var(--s-2); }
}

/* ---- buttons ------------------------------------------------------------- */
/* A button is a physical thing: lit from above, sitting on a darker edge of its
   own colour, casting a little shadow. Three layers do the work —
   1. a very shallow gradient, lighter at the top, so the face is not flat;
   2. a solid offset edge in the fill's own darker tone (grey under a saturated
      colour reads as dirt; the same hue darkened reads as moulding);
   3. a soft ambient shadow so it lifts off the paper.
   On hover it rises 1px and the edge deepens; on press it drops and the edge
   collapses. That is the whole trick, and it is why it feels expensive rather
   than decorated. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  letter-spacing: -0.005em;
  padding: 1rem 1.75rem; border-radius: var(--radius-sm); border: 0;
  min-height: 52px; cursor: pointer; text-align: center;
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 62%);
  background-color: var(--amber); color: var(--on-amber);
  box-shadow: 0 2px 0 var(--amber-dk), var(--shadow-1);
  transition: transform .13s cubic-bezier(.2,.7,.3,1),
              box-shadow .13s cubic-bezier(.2,.7,.3,1),
              filter .13s ease;
  will-change: transform;
}
.btn:hover {
  text-decoration: none; color: var(--on-amber);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--amber-dk), var(--shadow-2);
  filter: saturate(1.04);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--amber-dk), 0 1px 2px rgba(32,26,14,.10);
  filter: saturate(1);
}
.btn-ca { background-color: var(--ca); color: var(--on-ca); box-shadow: 0 2px 0 var(--ca-dk), var(--shadow-1); }
.btn-ca:hover { color: var(--on-ca); box-shadow: 0 3px 0 var(--ca-dk), var(--shadow-2); }
.btn-ca:active { box-shadow: 0 1px 0 var(--ca-dk), 0 1px 2px rgba(32,26,14,.10); }
.btn-va { background-color: var(--va); color: var(--on-va); box-shadow: 0 2px 0 var(--va-dk), var(--shadow-1); }
.btn-va:hover { color: var(--on-va); box-shadow: 0 3px 0 var(--va-dk), var(--shadow-2); }
.btn-va:active { box-shadow: 0 1px 0 var(--va-dk), 0 1px 2px rgba(32,26,14,.10); }

.btn-ghost {
  background-image: none; background-color: var(--surface);
  color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.btn-ghost:hover {
  color: var(--ink); border-color: var(--amber-ink);
  transform: translateY(-1px); box-shadow: var(--shadow-2); filter: none;
}
.btn-ghost:active { transform: translateY(1px); box-shadow: none; }

/* A control that CANNOT act yet renders as a visibly blocked state — never as
   a plausible-looking link. The Virginia registration button is this until the
   affiliate id is issued, and the gate fails the package while it is. It gets
   NO lift and NO shadow on purpose: it must not look pressable. */
.btn-blocked {
  background-image: none; background-color: var(--band);
  color: var(--dim); border: 1px dashed var(--line);
  cursor: not-allowed; box-shadow: none;
}
.btn-blocked:hover, .btn-blocked:active {
  filter: none; color: var(--dim); transform: none; box-shadow: none;
}

/* ---- cards --------------------------------------------------------------- */
/* Two shadow layers plus a white hairline along the top edge. The hairline is
   what sells it: a raised surface catches light on its top edge, and without
   it a card is just a rectangle with a border. */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
  box-shadow: var(--shadow-1), var(--edge-hi);
  transition: box-shadow .18s ease, transform .18s ease;
}
/* The state accent is a top rail, and it needs its own rounding or it squares
   off the corners it sits between. */
.card-ca, .card-va { border-top-width: 3px; border-top-style: solid; }
.card-ca { border-top-color: var(--ca); }
.card-va { border-top-color: var(--va); }

/* The two chooser cards are the primary action on the hub, so they lift on
   hover — the whole card is the target, not just the button inside it. */
.card-ca:hover, .card-va:hover { box-shadow: var(--shadow-3), var(--edge-hi); transform: translateY(-2px); }

.card-featured { border-color: var(--ca); position: relative; }
.card-flag {
  position: absolute; top: -13px; left: var(--s-5);
  background: var(--ca); color: var(--on-ca);
  font-family: var(--font-display); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.75rem; border-radius: 4px;
  box-shadow: 0 1px 0 var(--ca-dk), var(--shadow-1);
}

/* ---- the price ----------------------------------------------------------- */
/* Set like a shelf tag, not like a sentence: a small raised currency mark, the
   dollars large and tightly tracked, and the cents lifted to the cap line
   instead of sitting on the baseline. Tabular figures so a provider feed
   swapping one number for another cannot shift the layout by a pixel. */
.price {
  display: inline-flex; align-items: flex-start; gap: .06em;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1; color: var(--ink);
}
.price-cur {
  font-size: 1.375rem; font-weight: 700; color: var(--amber-ink);
  margin-top: .28em; margin-right: .04em;
}
.price-d {
  font-weight: 800; font-size: 3.5rem; letter-spacing: -0.04em;
}
.price-c {
  font-size: 1.5rem; font-weight: 700; color: var(--muted);
  margin-top: .16em; letter-spacing: -0.01em;
}
/* The secondary price (the booklet) recedes without changing shape. */
.price-muted { color: var(--muted); }
.price-muted .price-cur { color: var(--dim); }
.price-muted .price-d { font-size: 2.75rem; }
.price-muted .price-c { font-size: 1.25rem; color: var(--dim); }

/* A price sitting beside a promise. The rule under it is the brand accent doing
   one job: pointing at the number. */
.price-block { display: flex; flex-direction: column; gap: .4rem; }
.price-block .price { padding-bottom: .35rem; border-bottom: 3px solid var(--ca); width: max-content; }
.price-block.is-va .price { border-bottom-color: var(--va); }
.price-note {
  font-family: var(--font-display); font-weight: 700; font-size: .8125rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}

/* ---- header call to action ----------------------------------------------- */
/* Register sits in the nav beside Log in, so the two things a visitor might
   want on arrival - start, or come back - are both one tap away at every width.
   It is smaller than a body button but keeps the full 44px tap target. */
.nav-cta {
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  padding-inline: var(--s-3); border-radius: var(--radius-sm);
  min-height: var(--tap); display: inline-flex; align-items: center;
  flex-shrink: 0; border: 0; white-space: nowrap;
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 62%);
  background-color: var(--ca); color: var(--on-ca);
  box-shadow: 0 2px 0 var(--ca-dk), var(--shadow-1);
  transition: transform .13s cubic-bezier(.2,.7,.3,1), box-shadow .13s cubic-bezier(.2,.7,.3,1);
}
.nav-cta:hover { text-decoration: none; color: var(--on-ca); transform: translateY(-1px); box-shadow: 0 3px 0 var(--ca-dk), var(--shadow-2); }
.nav-cta:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ca-dk); }
.nav-cta-va { background-color: var(--va); color: var(--on-va); box-shadow: 0 2px 0 var(--va-dk), var(--shadow-1); }
.nav-cta-va:hover { color: var(--on-va); box-shadow: 0 3px 0 var(--va-dk), var(--shadow-2); }

/* Below the hamburger breakpoint the nav carries brand + Register + Log in +
   toggle. The subline is dropped and the labels tighten so all four fit without
   pushing Log in out - which is the one thing that must never happen. */
@media (max-width: 560px) {
  .nav-sub { display: none; }
  .nav-cta, .nav-login, .nav-lang { font-size: .8125rem; padding-inline: .6rem; }
  .nav-inner { gap: .4rem; }
  .nav-nav { gap: .4rem; }
  /* The brand must be allowed to shrink, or it holds the row wider than the
     screen and pushes the controls off the right edge. */
  .nav-brand { min-width: 0; flex-shrink: 1; }
  .nav-name { font-size: 1rem; }
  .lang-callout { padding: var(--s-3); gap: var(--s-3); }
  .lang-callout-go { font-size: .9375rem; }
  .price-d { font-size: 2.75rem; }
  .price-muted .price-d { font-size: 2.25rem; }
  .card { padding: var(--s-4); }
  .section { padding-block: var(--s-6); }
  .disclosure-cell, .disclosure-stmts, .disclosure-status, .disclosure-head { padding-inline: var(--s-3); }
}

/* Anything that genuinely cannot wrap gets its own scroller rather than
   widening the document. */
.disclosure, .faq, .card { min-width: 0; }
.nav-inner > * { min-width: 0; }

.ticks { display: flex; flex-direction: column; gap: 0.7rem; font-size: 1rem; color: var(--muted); }
.tick { display: flex; gap: 0.7rem; align-items: flex-start; }
.tick svg { margin-top: 4px; flex-shrink: 0; }

/* ---- FAQ ----------------------------------------------------------------- */
/* Native <details>. The live site hid most of its FAQ behind a "Load More"
   button; every answer here is in the HTML whether or not it is open. */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding-block: 1.25rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem;
  min-height: var(--tap);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 14px; height: 14px;
  border-right: 2.2px solid var(--dim); border-bottom: 2.2px solid var(--dim);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .15s;
}
.faq details[open] summary::after {
  border-color: var(--amber-ink);
  transform: rotate(-135deg) translate(-3px, -3px);
}
.faq details > *:not(summary) { padding-bottom: 1.25rem; color: var(--muted); }

/* ---- Virginia DMV disclosure panel --------------------------------------- */
/* CONSPICUOUS, IMMEDIATELY AFTER THE HERO, IN A STANDARD FONT.
   Virginia DMV views the site within 10 days of approval and checks that these
   items are displayed conspicuously on the home page in standard fonts. Do not
   move this below the fold, do not restyle it, and do not let it inherit the
   site's webfonts. */
/* The regulatory panel. Virginia requires a standard font on the home page, so
   .va-disclosure states the stack LITERALLY rather than through a token - a
   token can be redefined elsewhere, and this one must not be. */
.va-disclosure { font-family: Arial, Helvetica, sans-serif; }
.disclosure {
  background: var(--surface); border: 2px solid var(--va);
  border-radius: var(--radius); font-family: var(--font-legal);
}
.disclosure h2, .disclosure h3 { font-family: var(--font-legal); letter-spacing: 0; }
.disclosure-head {
  padding: 1.375rem var(--s-5); border-bottom: 1px solid var(--line);
  background: rgba(55, 185, 160, .14);
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.disclosure-head h2 { font-size: 1.125rem; font-weight: 700; }
.disclosure-status {
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
  background: rgba(255, 182, 39, .22); color: #6B4A00;
  font-size: 1rem; line-height: 1.65;
}
.disclosure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .disclosure-grid { grid-template-columns: minmax(0, 1fr); } }
.disclosure-cell {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.625rem;
  font-size: 0.96875rem; line-height: 1.7;
}
.disclosure-grid > .disclosure-cell:nth-child(odd) { border-right: 1px solid var(--line); }
@media (max-width: 760px) { .disclosure-grid > .disclosure-cell:nth-child(odd) { border-right: 0; } }
.disclosure-label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim);
}
.disclosure-stmts { padding: 1.625rem var(--s-5); display: flex; flex-direction: column; gap: 1.125rem; }
.disclosure-stmts p { font-size: 0.96875rem; line-height: 1.7; }
/* A fact we do not have yet renders as a visible gap, never as a guess. */
.pending {
  display: inline-block; margin-top: 0.5rem; padding: 0.4rem 0.75rem;
  border: 1px dashed var(--dim); border-radius: 5px;
  color: var(--muted); font-size: 0.875rem;
}

/* ---- footer -------------------------------------------------------------- */
.foot { padding-block: var(--s-6) var(--s-5); font-size: 0.9375rem; }
.foot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.foot-legal {
  display: flex; justify-content: space-between; gap: var(--s-4);
  flex-wrap: wrap; font-size: var(--step--1); color: var(--dim);
  padding-top: var(--s-4);
}

.hero-media { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; object-fit: cover; }
.hero-placeholder {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 330px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.625rem; color: var(--dim);
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase;
}

/* ===========================================================================
   POLISH
   ---------------------------------------------------------------------------
   The difference between a page that works and one that feels expensive is
   almost entirely in this block, and none of it is ornament: better numerals,
   a lit edge on raised things, links that do not sit on their own baseline,
   and hover states that acknowledge the pointer.
   ======================================================================== */

/* Old-style figures are wrong for prices and phone numbers; lining tabular
   figures are what a receipt uses. */
.price, .nav-login, .foot-legal, .disclosure { font-variant-numeric: tabular-nums lining-nums; }

/* Optical refinement on large display type. Big text needs tighter tracking
   than body text set from the same face, or it reads loose and cheap. */
h1 { letter-spacing: -0.028em; }
h2 { letter-spacing: -0.024em; }
h1, h2, h3 { text-wrap: balance; }
.lead, p { text-wrap: pretty; }

/* Underlines that clear the descenders instead of cutting through them. */
a:hover { text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }

::selection { background: rgba(255, 182, 39, .32); color: var(--ink); }

/* The nav follows you down the page. A hairline shadow appears only once the
   page has scrolled under it, so it is flat at rest and lifted in use. */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 250, 247, .88);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  box-shadow: 0 1px 0 var(--line);
}
@supports not (backdrop-filter: blur(2px)) { .nav { background: var(--paper); } }
.nav-links a { position: relative; padding-block: .2rem; }
/* The underline grows from the centre rather than appearing whole. */
.nav-links a:not(.is-here):not(.is-here-va)::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -2px; height: 2px;
  background: var(--amber); border-radius: 2px;
  transition: left .16s ease, right .16s ease;
}
.nav-links a:not(.is-here):not(.is-here-va):hover { text-decoration: none; }
.nav-links a:not(.is-here):not(.is-here-va):hover::after { left: 0; right: 0; }

/* Photographs get the same lit-edge treatment as cards, plus an inner hairline
   so a light image does not bleed into a light page. */
.hero-media {
  box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(32, 26, 14, .07);
  border: 0;
}
.hero-placeholder { box-shadow: var(--edge-hi); }

/* Ticks: the check mark is the only place a brand colour appears at small size,
   so it carries a faint tinted disc behind it to hold its weight. */
.tick svg { border-radius: 50%; }

/* FAQ rows respond to the pointer across the whole row, not just the text. */
.faq summary { transition: color .14s ease; }
/* --amber-ink clears the bar for icons and large text but not for an 18px
   summary row, so hover uses the link colour instead. */
.faq summary:hover { color: var(--link); }

/* ---- language callout ---------------------------------------------------- */
/* The Spanish course is the same product at the same price, and it was
   reachable only from the ribbon at the very top of the page — the first thing
   a reader scrolls past. This is a full-width target in the reading order. */
.lang-callout {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface); border: 1px solid var(--ca);
  border-left: 5px solid var(--ca);
  border-radius: var(--radius);
  color: var(--ink); box-shadow: var(--shadow-1), var(--edge-hi);
  transition: box-shadow .18s ease, transform .18s ease;
  flex-wrap: wrap;
}
.lang-callout:hover { text-decoration: none; color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-3), var(--edge-hi); }
.lang-callout-mark {
  font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem;
  background: var(--ca); color: var(--on-ca);
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 2px 0 var(--ca-dk);
}
.lang-callout-body { flex: 1 1 22rem; font-size: 1rem; color: var(--muted); }
.lang-callout-body strong { display: block; color: var(--ink); font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; margin-bottom: .2rem; }
.lang-callout-go {
  font-family: var(--font-display); font-weight: 700; color: var(--ca-ink);
  white-space: nowrap; flex-shrink: 0;
}

/* The language switch in the nav. Deliberately not styled as a plain link:
   it is a choice, and a Spanish speaker should find it without reading English. */
.nav-lang {
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  color: var(--ca-ink); border: 1px solid var(--ca);
  padding-inline: .7rem; border-radius: var(--radius-sm);
  min-height: var(--tap); display: inline-flex; align-items: center;
  flex-shrink: 0; white-space: nowrap;
}
.nav-lang:hover { text-decoration: none; background: var(--ca); color: var(--on-ca); }
.faq details[open] summary { color: var(--ink); }

/* The disclosure panel keeps its standard font — that is a Virginia DMV
   requirement, not a style choice — but it may still be built well. Depth and
   a lit top edge do not change a single glyph. */
.disclosure { box-shadow: var(--shadow-2), var(--edge-hi); }
.disclosure-head { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }

/* Section bands get a hairline of light on their upper edge, so a change of
   background reads as a change of plane rather than a colour swap. */
.band { box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }

/* A blocked control must never animate or lift: it is not pressable and it
   should not pretend otherwise. */
.btn-blocked { transition: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:hover, .card-ca:hover, .card-va:hover, .btn-ghost:hover { transform: none; }
}