/* driver-bc's whole theme/site.css: a full replacement of driver-sitekit's theme/site.css
   taken at sitekit commit e7f2b2c (m2) plus the U1 render patch (7bf42bb). When sitekit
   changes its default stylesheet, this file does not follow; copy the change over by hand.
   Structure, spacing, sizes and radii are the skeleton's, unchanged.
   Differences from the default, all values copied from the live BC site's stylesheet
   (driver-icbc, baseline 83b2aff1, site/pages/assets/site.css):
   - the light and dark palettes are icbc's :root table (lines 14-30 light, 48-64 dark):
     paper #eef2ec / card #ffffff / ink #13201a / muted #5d6d63 / rule #d3dcd2,
     green #046a38 with tint #e3f0e7, amber #ffc72c, red #c8102e; dark paper #121613,
     card #1a211c, ink #e9efe8, muted #9aa89e, rule #2a332c, lifted green #57b67e,
     green-soft #14291d, red #ff7a86;
   - type: icbc's font stacks (lines 35-36), body in --serif and headings in --sans,
     as icbc's body and headings do; sizes stay the skeleton's;
   - only the bcclass site pair is carried; the skeleton's other site pairs are dropped
     because this stylesheet is BC's.
   --page and --gutter already match icbc's (sitekit notes icbc site.css :39-40). */
:root {
  --ink: #13201a;
  --muted: #5d6d63;
  --paper: #eef2ec;
  --card: #ffffff;
  --line: #d3dcd2;
  --signal: #ffc72c;      /* icbc --amber, the sign yellow: main action and focus */
  --on-dark: #e9efe8;
  --brand: #046a38;
  --brand-tint: #e3f0e7;
  --sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --serif: Charter, "Iowan Old Style", Georgia, "PingFang SC", "Hiragino Sans GB", serif;
  --radius-lg: 14px;
  --radius-sm: 8px;
}

[data-site="bcclass"] { --brand: #046a38; --brand-tint: #e3f0e7; }

/* The bar's own height, breakpoint by breakpoint. The second row sticks at exactly
   this offset and the anchor targets clear it, so the two never overlap and no gap
   shows their seam. Each value must be at least the height the bar's contents need at
   that width: the bar wraps when the brand, Menu and the two pills do not fit one row.
   The content is 35 px tall in one row; it is 101 px in the 561–575 px band before the
   Menu word fits beside the pills, which is why the 72 px tier is not lower. Below 432 px
   both pills shrink to their icons (02-page.css) so brand, Menu and pills stay on one
   row down to 320 px, and the bar is 66 px tall there like at 366–560 px. */
:root { --header-h: 66px; }
@media (max-width: 62.5rem) { :root { --header-h: 72px; } }
@media (max-width: 35rem) { :root { --header-h: 66px; } }

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 17px/1.65 var(--serif);
  -webkit-text-size-adjust: 100%;
  /* Short pages keep the footer at the bottom of the window. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* icbc puts body copy in --serif and its chrome and controls in --sans
   (site.css:105 body, :111 headings, :215-227 bar/nav, :558 the call to action,
   :947 footer links). These selectors are where the skeleton has the same parts. */
.site-header, .site-nav, .pick-lang, .pick-list, .cta a, .options .option,
.answer summary, .back, .question-list a, .jurisdiction-nav a, .facts dt, .facts dd,
.site-footer { font-family: var(--sans); }

a { color: var(--brand); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
/* Yellow only where the ground is dark: on the light page it would fall below 3:1. */
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--signal); }
.site-header .pick-list :focus-visible { outline-color: var(--brand); }

h1, h2 { font-family: var(--sans); line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; margin: 2.25rem 0 .75rem; }

/* Header, footer and bands paint to the window edge with border-image (it does not clip
   the language list the way clip-path would); their content stays on the column. */
.site-header,
.site-main,
.site-footer {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding-top: .9rem;
  padding-bottom: .9rem;
  /* One height per breakpoint, so the second row's sticky top can equal the bar's
     bottom exactly (the live site's bar is a fixed 4rem). Measured with Playwright
     on this build: 66 px at 1280, 72 px at 768 (menu button with its word), 66 px
     from 320 to 560 (icon-only pills below 432 px). */
  height: var(--header-h);
  color: #fff;
  border-image: linear-gradient(var(--brand) 0 0) fill 0 / / 0 100vmax;
  /* The live site's bar is sticky (bcclass.vozai.com assets/site.css :180-190), so
     the menu stays reachable while the page scrolls. Sticky keeps the bar's height
     in the flow, so nothing has to reserve room for it. */
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header a { color: #fff; text-decoration: none; }
.site-header a:hover { text-decoration: underline; }
/* While a practice round is open the learning area adds site-header--compact: keep the brand
   and the controls, hide the site navigation, as its own compact header did. */
.site-header--compact .site-nav,
.site-header--compact .menu { display: none; }
/* The run page's checkout route has no header (site-header-init.js puts this attribute on <html>
   before the first paint); take it out of the flow, not just out of sight. */
[data-site-header-hidden] [data-site-header] { display: none; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-right: auto;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}
.brand-logo { display: block; width: 28px; height: auto; }
.site-nav { display: flex; flex-wrap: nowrap; gap: .35rem; margin-left: auto; font-size: .875rem; }
/* One pill per item, as the live site's bar draws them; the nav never wraps: below
   1000 px the same items fold into Menu instead (bcclass.vozai.com site.css :409-512). */
.site-nav > a,
.nav-group > summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: 99px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav > a:hover,
.nav-group > summary:hover,
.nav-group[open] > summary { background: var(--pill-hover); text-decoration: none; }
.site-nav > a[aria-current="page"],
.nav-group:has(a[aria-current]) > summary {
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7);
  font-weight: 650;
}
.nav-group { position: relative; }
.nav-group > summary { list-style: none; cursor: pointer; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.nav-group[open] .pick-caret { transform: translateY(1px) rotate(-135deg); }
.nav-group-panel {
  position: absolute;
  left: 0;
  top: calc(100% + .5rem);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .3rem;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--pop-shadow);
}
.nav-group-panel a {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem .5rem .55rem;
  border-radius: 8px;
  color: var(--ink);
  font-size: .9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav-group-panel a::before { content: ""; flex: 0 0 .9rem; }
.nav-group-panel a:hover { background: var(--brand-tint); text-decoration: none; }
.nav-group-panel a[aria-current] { background: var(--brand-tint); color: var(--brand); font-weight: 650; }
.nav-group-panel a[aria-current]::before { content: "\2713"; color: var(--brand); }
/* The open/closed marks: the caret on a drop-down, the gold crown on Learn (the
   live site's own two marks, site.css :292, :367). */
.pick-caret {
  width: .4rem; height: .4rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.tag-premium {
  --premium: #ffd45e;
  display: inline-block; width: .8em; height: .62em; margin-left: .2rem;
  position: relative; top: -.55em; vertical-align: baseline; color: var(--premium); flex: none;
}
.nav-group > summary .tag-premium {
  margin-left: -.1rem; margin-right: .1rem;
  left: -.65em; top: -.7em; transform: rotate(30deg); transform-origin: 100% 100%;
}
.menu-head .tag-premium, .foot-col h2 .tag-premium { width: .9em; height: .7em; }

.switches { display: flex; gap: .4rem; align-items: center; }

/* The folded menu: shown below 1000 px, the same width the live site folds at. */
.menu { display: none; position: relative; }
.menu > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .7rem;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 99px;
  color: #fff; cursor: pointer; font-weight: 600;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--pill-hover); }
.menu-bars {
  width: .85rem; height: .58rem;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  position: relative;
}
.menu-bars::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 2px solid currentColor; transform: translateY(-1px);
}
.menu-panel {
  position: absolute; right: 0; top: calc(100% + .5rem);
  z-index: 30;
  display: flex; flex-direction: column; gap: .15rem;
  min-width: 13.5rem; max-height: calc(100vh - 5rem); overflow-y: auto;
  padding: .4rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px var(--pop-shadow);
}
.menu-panel a {
  padding: .55rem .7rem; border-radius: 8px;
  text-decoration: none; color: var(--ink); font-size: .9375rem; white-space: nowrap;
}
.menu-panel a:hover { background: var(--brand-tint); }
.menu-panel a[aria-current] {
  background: var(--brand-tint); color: var(--brand);
  box-shadow: inset 0 0 0 1.5px var(--brand); font-weight: 650;
}
.menu-head {
  margin: .5rem .7rem .15rem;
  font-size: .75rem; font-weight: 600; color: var(--muted);
}
.menu-rule { height: 1px; background: var(--line); margin: .35rem .5rem .1rem; }
@media (max-width: 62.5rem) {
  .site-nav { display: none; }
  .menu { display: block; margin-left: auto; }
  .switches { margin-left: .6rem; }
}
@media (max-width: 35rem) {
  .menu { position: static; }
  .menu-panel { left: 1.25rem; right: 1.25rem; top: calc(100% - .25rem); min-width: 0; }
}
/* The Menu pill keeps only its bars until 576 px: with the word it is wide enough to push
   the two pills to a second row in the 561–575 px band, where the bar is 72 px tall. */
@media (max-width: 36rem) {
  .menu > summary { font-size: 0; gap: 0; padding: .4rem .55rem; }
  .menu > summary .menu-bars { font-size: 1rem; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Language picker: the current language on a pill; opens a list of every version of this page.
   The theme picker below is the same pill with a three-state list: header.js (driver-learn's
   static-page script) writes data-theme on <html> and localStorage `theme`; theme.js applies it
   before the first paint. Without the script the details stays hidden (data-needs-js). */
.pick-lang, .pick-theme { position: relative; font-size: .9rem; }
.pick-lang summary,
.pick-theme summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.pick-lang summary::-webkit-details-marker,
.pick-theme summary::-webkit-details-marker { display: none; }
.pick-lang summary::after,
.pick-theme summary::after {
  content: "";
  width: .4rem;
  height: .4rem;
  margin-left: .1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.pick-lang[open] summary, .pick-lang summary:hover,
.pick-theme[open] summary, .pick-theme summary:hover { background: rgba(255, 255, 255, .14); }
.pick-icon { width: 1rem; height: 1rem; }
.pick-short { display: none; }
.pick-list {
  position: absolute;
  right: 0;
  top: calc(100% + .4rem);
  z-index: 10;
  min-width: 10rem;
  margin: 0;
  padding: .35rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(23, 33, 43, .16);
}
.site-header .pick-list a {
  display: block;
  padding: .45rem .7rem;
  border-radius: 6px;
  color: var(--ink);
}
/* The theme list holds buttons, not links: same block and padding inside the pill. */
.pick-theme .pick-list button {
  display: block;
  width: 100%;
  padding: .45rem .7rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  text-align: left;
  cursor: pointer;
}
.pick-theme .pick-list button:hover { background: var(--brand-tint); }
.pick-theme .pick-list button[aria-pressed="true"] { color: var(--brand); font-weight: 700; }
.site-header .pick-list a:hover { background: var(--brand-tint); text-decoration: none; }
.site-header .pick-list a[aria-current] { color: var(--brand); font-weight: 700; }

.site-main { flex: 1 0 auto; padding-top: 2rem; padding-bottom: 1rem; }
/* Body copy runs the whole content column: the page width above minus its gutter, and nothing
   narrower. There is no 40em measure on this site (owner's rule, 2026-11-01): paragraphs,
   list items and article bodies take the same width as the column their block already has,
   so the only margin is the gutter on .site-header/.site-main/.site-footer. Cards and grids
   stay cards and grids (.learn-cards, .guides ul.card-grid, .plans, .steps, .counts,
   .signwall, .category-list …): they keep their own tracks, which is why none of them needs a
   width compensation any more. (Before this, the 40em cap made legal prose, blog bodies and
   the blog list rows 680 of 1112 px wide, and each block that wanted the column pinned
   `max-width: none` back on itself.) */

/* The blog sheet (assets/blog.css) is written by sitekit's renderer and linked after this one;
   it caps .post-body and .post-item at 40em. That is the same narrow measure removed above,
   one layer down: on the live site the article body and the list rows run the whole column
   (measured 1056 of 1056 at 1280, 2026-11-01). Each selector here is the sheet's own with one
   more ancestor, which is what lets this file win on an equal-or-later sheet without editing
   sitekit. No new styling: the declaration is the sheet's own `max-width: none`, applied to
   the two classes that still carried the cap. */
.post-list .post-item { max-width: none; }
.blog-post .post-body { max-width: none; }

.lede { color: var(--muted); font-size: 1.1rem; margin: 0 0 1.25rem; }

/* Home hero: title, one line of context, and the main action. */
.hero { padding-bottom: .5rem; }

.cta { margin: 0; }
.cta a {
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  background: var(--signal);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 rgba(23, 33, 43, .18);
}
.cta a:hover { background: #ffc61a; }

/* Exam facts: a tinted panel in the site colour. */
.exam {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem 1.1rem;
  background: var(--brand-tint);
  border-radius: var(--radius-lg);
}
.exam h2 { margin-top: 0; color: var(--brand); }
/* On the home page the facts panel becomes a full-width band. */
.exam.band {
  margin-top: 2.5rem;
  padding: 2rem 0 1.75rem;
  border-radius: 0;
  background: none;
  border-image: linear-gradient(var(--brand-tint) 0 0) fill 0 / / 0 100vmax;
}

.facts {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: 0 1.5rem;
  margin: 0;
}
.fact { display: contents; }
.facts dt, .facts dd { padding: .5rem 0; border-top: 1px solid rgba(23, 33, 43, .1); }
.fact:first-child dt, .fact:first-child dd { border-top: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 650; }
.facts dd a { font-weight: 400; font-size: .9rem; margin-left: .35rem; }

.authority { color: var(--muted); font-size: .9rem; margin: .75rem 0 0; }

/* Link lists (guides, questions, jurisdictions, sources) read as one bordered stack. */
.guides ul,
.question-list,
.jurisdiction-list,
.sources ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.guides li,
.question-list li,
.jurisdiction-list li,
.sources li { border-top: 1px solid var(--line); }
.guides li:first-child,
.question-list li:first-child,
.jurisdiction-list li:first-child,
.sources li:first-child { border-top: 0; }
.guides a,
.question-list a,
.jurisdiction-list a,
.sources a {
  display: block;
  padding: .8rem 1.1rem;
  border-left: 4px solid transparent;
  text-decoration: none;
  font-weight: 600;
}
.guides a:hover,
.question-list a:hover,
.jurisdiction-list a:hover,
.sources a:hover { background: var(--brand-tint); border-left-color: var(--brand); }
.question-list a { color: var(--ink); font-weight: 500; }

/* Guides and jurisdictions: separate white cards in a grid instead of one stack. */
.guides ul.card-grid,
.jurisdiction-list.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .75rem;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.card-grid li { border-top: 0; }
.card-grid li a {
  height: 100%;
  padding: 1rem 1.15rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.card-grid li a:hover { border-color: var(--brand); border-left-color: var(--brand); }
.sources a { font-weight: 500; }

.jurisdiction-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
}
.jurisdiction-nav a {
  padding: .35rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  text-decoration: none;
}

/* Guide article. */
.guide > p:not(.back) { margin: 0 0 1rem; }

.back { margin-top: 2rem; font-size: .95rem; }

/* Question page: the stem leads, options are tappable-looking cards. */
.question h1 { font-size: 1rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.stem { font-size: 1.3rem; font-weight: 650; line-height: 1.45; margin: .5rem 0 1.25rem; }

/* The signs are inline-block so a question with two of them keeps them side by side; the
   question page centres the line they sit on (below), the home card centres its one sign. */
.sign {
  margin: 1rem .25rem;
  padding: 1rem;
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
/* The figure is inline-block, so an svg with only max-width has no width to resolve and collapses to 0. */
.question { text-align: center; }
.question > :not(.sign) { text-align: start; }
.sign svg { display: block; width: 9rem; max-width: 100%; height: auto; }
.sign figcaption { color: var(--muted); font-size: .9rem; margin-top: .5rem; }

.options { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.options .option {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .8rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.option .key {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  text-transform: uppercase;
  line-height: 1;
  margin-top: .05rem;
}

.answer {
  margin-top: 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.answer summary {
  cursor: pointer;
  padding: .75rem 1rem;
  font-weight: 700;
  color: var(--brand);
}
.answer[open] summary { border-bottom: 1px solid var(--line); }
.answer > p { margin: 0; padding: .75rem 1rem 0; }
.answer > p:last-child { padding-bottom: .9rem; }
.answer-text { font-weight: 650; }
.manual-basis, .explanation { color: var(--muted); font-size: .95rem; }

/* Legal and not-found pages. */
.legal-body p { margin: 0 0 1rem; }

.site-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
  color: var(--on-dark);
  border-image: linear-gradient(var(--ink) 0 0) fill 0 / / 0 100vmax;
  font-size: .9rem;
}
.site-footer a { color: #fff; }

/* The live site's footer: five columns under rule-headed titles, the ICBC sentence
   below them, the legal links last (bcclass.vozai.com site.css :931-958). The column
   row wraps instead of fixing a track count, as the live rule does. */
.foot-cols {
  display: flex; flex-wrap: wrap;
  column-gap: clamp(2.5rem, 8vw, 6rem); row-gap: 1.75rem;
  margin: 0 0 2.25rem;
}
.foot-col h2 {
  display: inline-block; min-width: 4.5rem;
  margin: 0 0 .7rem; padding-bottom: .45rem;
  border-bottom: 2px solid rgba(255, 255, 255, .35);
  font-size: .9rem; line-height: 1.2; color: #fff;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin: 0 0 .45rem; }
.foot-col a { font-size: .875rem; text-decoration: none; }
.foot-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-col .foot-mail { margin-top: -.3rem; font-size: .75rem; }
@media (max-width: 35rem) {
  .foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .foot-col:last-child { grid-column: 1 / -1; }
}

/* Links to the other sites: the footer's one column. */
.other-places { padding-bottom: 1.5rem; }
.other-places h2 { font-size: .95rem; color: #fff; margin: 0 0 .6rem; }
.other-places ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

.disclaimer {
  margin: 0;
  padding-top: 1.25rem;
  /* The footer's one divider. It no longer carries a legal-links menu above it (the legal
     pages are still linked from the pages that need them), so this is the only line. */
  border-top: 1px solid rgba(255, 255, 255, .16);
  /* 12px, the size the live site's footer note has; the footer's own .9rem would be larger. */
  font-size: .75rem;
  line-height: 1.55;
}

@media (max-width: 30rem) {
  body { font-size: 16px; }
  .site-main { padding-top: 1.5rem; }
  .exam { padding: 1rem 1.1rem; margin-left: -.25rem; margin-right: -.25rem; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; }
  .facts dd { padding-top: .1rem; border-top: 0; }
  .cta a { display: block; text-align: center; }
  .stem { font-size: 1.15rem; }
  .exam.band { padding: 1.5rem 0 1.25rem; margin-left: 0; margin-right: 0; }
}

/* The two header pills show only their short form up to 520 px. With the full language and
   theme names they need about 238 px and push themselves under the brand in the 481–519 px
   band, where the bar is 66 px tall; the short forms keep them on the brand's row. */
@media (max-width: 32.5rem) {
  .pick-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pick-short { display: inline; }
}

/* Below 432 px the pills are icons only (the visible name stays in the list and in the hidden
   label): with a short name and a caret they push brand, Menu and pills onto two rows. */
@media (max-width: 26.9375rem) {
  .site-header { column-gap: .5rem; }
  .switches { margin-left: 0; }
  .pick-short { display: none; }
  .pick-lang summary::after, .pick-theme summary::after { display: none; }
  .pick-lang summary, .pick-theme summary { padding: .5rem; }
}
/* The English brand is 3 px too wide for one row at 320–322 px. */
@media (max-width: 22rem) {
  .brand { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 学习区样式默认值：跟随稿子的设计变量表，默认模板只使用其中既有变量。 */
:root {
  --signal-hover: #ffc61a;
  --on-signal: #13201a;        /* icbc --ink: text on the yellow plate, in both themes */
  --signal-edge: #13201a;      /* icbc --ink: the yellow plate needs an ink edge on the light paper */
  --on-brand: #ffffff;
  --link: #046a38;             /* icbc --green: links and the focus ring; the header fill is --brand */
  --logo-plate: #e3f0e7;       /* icbc --green-soft: the logo stays a light plate on the header */
  --footer-bg: #0d110f;        /* icbc dark --paper-deep */
  --scrim: rgba(19, 32, 26, .45);   /* icbc --ink at 45%, behind a dialog */
  --toast-bg: #13201a;         /* icbc --ink: the "not saved" bar */
  --on-toast: #ffffff;
  --pill-line: rgba(255, 255, 255, .55);
  --pill-hover: rgba(255, 255, 255, .14);
  --footer-rule: rgba(255, 255, 255, .16);
  --fact-rule: rgba(19, 32, 26, .1);
  --pop-shadow: rgba(19, 32, 26, .16);
  --clear: transparent;
  --sunken: #e4eae1;           /* icbc --paper-deep: neutral ground for the open row, the current tab and hover */
  --correct: #046a38;          /* icbc --green */
  --on-correct: #ffffff;
  --wrong: #c8102e;            /* icbc --red */
  --lane-dash: var(--muted);
  --art-red: #c8102e;
  --art-white: #ffffff;
  --art-edge: #5d6d63;         /* icbc --muted */
  --art-black: #13201a;        /* icbc --ink; the same in both themes, like the other sign colours */
  --font: system-ui, -apple-system, "Segoe UI", "Noto Sans", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --fs-body: 17px;
  --fs-body-narrow: 16px;
  --lh-body: 1.65;
  --lh-tight: 1.25;
  --lh-stem: 1.45;
  --fs-h1: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  --fs-h2: 1.25rem;
  --fs-brand: 1.2rem;
  --fs-lede: 1.1rem;
  --fs-nav: .95rem;
  --fs-small: .9rem;
  --fs-tab: .75rem;
  --fs-stem: 1.3rem;
  --fs-stem-narrow: 1.15rem;
  --fs-counter: 1rem;
  --fs-cell: .95rem;
  --fs-total: 2.5rem;
  --fs-plate: 3.5rem;
  --fs-plate-narrow: 2.75rem;
  --fs-plate-of: 1.4rem;
  --fs-art: 25px;
  --fw-text: 400;
  --fw-row: 500;
  --fw-semi: 600;
  --fw-stem: 650;
  --fw-bold: 700;
  --fw-num: 800;               /* scores and question numbers, as on a sign */
  --fw-label: 800;             /* the words Correct / Wrong and the counter */
  --track-tight: -.01em;
  --track-num: -.02em;
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3rem;
  --sp-hair: 2px;
  --radius: 6px;
  --radius-pill: 999px;        /* sitekit header language button only */
  --radius-focus: 3px;
  --radius-round: 50%;         /* option letters */
  --bw: 1px;
  --bw-strong: 2px;
  --bw-wrong: 3px;
  --bw-row: 4px;
  --focus-w: 3px;
  --focus-gap: 2px;
  --rule-at-sm: 3px;           /* the white rule inside a green plate: distance from the edge */
  --rule-w-sm: 1.5px;
  --rule-at-lg: 5px;
  --rule-w-lg: 2px;
  --lane-h: 4px;
  --lane-now-h: 14px;
  --lane-gap: 2px;
  --marker-h: 8px;
  --page: 72rem;               /* the page width, padding included (icbc site.css :39 --page, web/src/styles.css :117) */
  --gutter: clamp(1.1rem, 4vw, 3rem); /* the space left and right of the page (icbc site.css :40 --gutter) */
  --side: 18.75rem;
  --col-gap: 2.5rem;
  --bar-h: 3.25rem;
  --tap: 44px;
  --key: 1.75rem;
  --glyph: 1.25rem;
  --glyph-sm: 1rem;
  --icon: 22px;
  --logo-w: 28px;
  --sign-w: 9rem;
  /* --prose is not used by any page rule in this file: the site has no 40em measure (see the
     note at .site-main). It stays defined because the learning area's own stylesheet
     (learn/assets/…/app/styles/*) uses var(--prose) for its text column, and sitekit's
     「学习区样式变量」 gate fails the build if the site style does not define every variable
     that sheet uses. 40em is that sheet's value; changing it changes the app, not the pages. */
  --prose: 40em;
  --slash-w: .6rem;
  --dur: 120ms;
}

/* The dark palette, twice for two ways of asking for it: once under a system that prefers
   dark, once for the reader's own choice in the header's theme control (header.js writes
   data-theme on <html> and saves it; theme.js applies it before the first paint). A reader who
   chose Light keeps the light table above even when the system is dark, so the media block
   leaves :root[data-theme="light"] out. The two copies carry the same values: one choice must
   look the same under either system setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sunken: #0d110f;
    --signal-edge: #ffc72c;    /* icbc --amber; on the dark paper the yellow plate needs no edge */
    --footer-bg: #0d110f;
    --fact-rule: rgba(233, 239, 232, .12);
    --pop-shadow: rgba(0, 0, 0, .5);
    --scrim: rgba(0, 0, 0, .6);
    --toast-bg: #e9efe8;
    --on-toast: #121613;
    --correct: #57b67e;        /* icbc lifted green */
    --on-correct: #09150e;     /* icbc dark --on-green: text on the lifted green, 7.46:1 */
    --wrong: #ff7a86;          /* icbc lifted red */
    --ink: #e9efe8;
    --muted: #9aa89e;
    --paper: #121613;
    --card: #1a211c;
    --line: #2a332c;
    --brand: #57b67e;          /* icbc lifted green, as text and links on the dark paper */
    --brand-fill: #046a38;
    --brand-tint: #14291d;
    --link: #57b67e;
  }
  :root:not([data-theme="light"])[data-site="bcclass"] { --brand: #57b67e; --brand-fill: #046a38; --brand-tint: #14291d; --link: #57b67e; }
  /* --ink is light text here, so the surfaces that used it as a fill or sat under it as ink take their own colours. */
  :root:not([data-theme="light"]) .site-header { border-image: linear-gradient(var(--brand-fill) 0 0) fill 0 / / 0 100vmax; }
  :root:not([data-theme="light"]) .option .key { background: var(--brand-fill); }
  :root:not([data-theme="light"]) .site-footer { border-image: linear-gradient(var(--footer-bg) 0 0) fill 0 / / 0 100vmax; }
  :root:not([data-theme="light"]) .cta a { color: var(--on-signal); }
}

:root[data-theme="dark"] {
  --sunken: #0d110f;
  --signal-edge: #ffc72c;
  --footer-bg: #0d110f;
  --fact-rule: rgba(233, 239, 232, .12);
  --pop-shadow: rgba(0, 0, 0, .5);
  --scrim: rgba(0, 0, 0, .6);
  --toast-bg: #e9efe8;
  --on-toast: #121613;
  --correct: #57b67e;
  --on-correct: #09150e;
  --wrong: #ff7a86;
  --ink: #e9efe8;
  --muted: #9aa89e;
  --paper: #121613;
  --card: #1a211c;
  --line: #2a332c;
  --brand: #57b67e;
  --brand-fill: #046a38;
  --brand-tint: #14291d;
  --link: #57b67e;
}
:root[data-theme="dark"][data-site="bcclass"] { --brand: #57b67e; --brand-fill: #046a38; --brand-tint: #14291d; --link: #57b67e; }
:root[data-theme="dark"] .site-header { border-image: linear-gradient(var(--brand-fill) 0 0) fill 0 / / 0 100vmax; }
:root[data-theme="dark"] .option .key { background: var(--brand-fill); }
:root[data-theme="dark"] .site-footer { border-image: linear-gradient(var(--footer-bg) 0 0) fill 0 / / 0 100vmax; }
:root[data-theme="dark"] .cta a { color: var(--on-signal); }

:root:lang(zh-Hans) {
  --lh-body: 1.75;
  --lh-tight: 1.4;
  --lh-stem: 1.6;
  --fs-stem: 1.25rem;
  --fs-stem-narrow: 1.125rem;
  --fw-stem: 600;
  --fw-bold: 600;
  --fw-label: 600;
  --track-tight: 0;
}

/* ---------- learning-area entry page (/learn/) ----------
   The entry page template is sitekit's templates/learn_page.html; the skeleton's own
   site.css carries no rules for its classes, so an override that replaces that file whole
   (this one does) has to bring them. Selectors and values are copied from driver-on's
   theme/site.css, the accepted entry page: without them the lead, the button and the four
   cards fall back to browser defaults (and, before the 40em measure was removed above, to
   that cap, which is what made the text column about 60% of the page). Values are BC's
   variables (the same table as the rest of this file); nothing here is a new design. */
.learn-page .breadcrumb { margin: 0 0 var(--sp-3); font-size: var(--fs-small); color: var(--muted); }
.learn-page .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin: 0; padding: 0; list-style: none; }
.learn-page .breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); }
.learn-page .breadcrumb li + li::before { content: "›"; color: var(--muted); }
.learn-page .breadcrumb [aria-current="page"] { color: var(--ink); font-weight: var(--fw-semi); }
.learn-page .lead { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--fs-lede); }
.site-main .learn-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-6); }
.learn-cta .button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: var(--sp-3) var(--sp-6); background: var(--signal); border: var(--bw-strong) solid var(--signal-edge); border-radius: var(--radius); color: var(--on-signal); font-weight: var(--fw-bold); text-decoration: none; }
.learn-cta .button:hover { background: var(--signal-hover); }
/* auto-fit, not the copy's auto-fill: BC's column leaves 1112 px of content at 1280, which
   auto-fill cuts into five 13rem tracks, so four cards stop at 80% of the row. auto-fit drops
   the empty fifth track and the four cards take the whole content width. */
.learn-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--sp-3); }
.learn-cards li { margin: 0; padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.learn-cards strong { display: block; font-weight: var(--fw-semi); }
.learn-cards a { text-decoration: none; }
.learn-cards span { display: block; margin-top: var(--sp-1); color: var(--muted); }
/* Run page, site-header mode: the round bar sticks under the site header instead of at the top
   of the window, and stays below it (the header is z-index 40). --site-header-height is the
   height driver-learn measures; before the app mounts it is unset, so the bar uses the header's
   own breakpoint height. The id selector beats the learning area's own .learn-round-bar rule
   (top: 0) even though that stylesheet loads after this one. The default header_source=learn
   pages never match, so nothing changes there. */
#learn-root[data-header-source="site"] .learn-round-bar {
  top: var(--site-header-height, var(--header-h));
  z-index: 35;
}

/* ---------- home page blocks (A34) ----------
   Selectors and structure copied from driver-on's theme/site.css; BC's home template uses
   the same class names. Every value is one of BC's variables above (that table is icbc's),
   so against driver-on only the colour values differ. Sizes, spacing and radii are the
   skeleton/home variables, not new design.
   The option, verdict, answer and link-list rules in the middle are the ones the block-2
   card and the block-8/10 lists use; those selectors are not home-only, so BC's question
   pages follow driver-on's option styling too. */

/* Glyph symbols the try-a-question card references (#g-check, #g-x). */
.glyphs { position: absolute; width: 0; height: 0; overflow: hidden; }
.g { width: var(--glyph); height: var(--glyph); flex: none; }
.options { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.options .option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  line-height: var(--lh-tight);
  text-align: left;
}
button.option { cursor: pointer; }
button.option:disabled { cursor: default; }
button.option:not(:disabled):hover { background: var(--sunken); }
.option .key {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--key);
  height: var(--key);
  border-radius: var(--radius-round);
  background: var(--ink);
  color: var(--card);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: uppercase;
}
.opt-text { flex: 1 1 auto; min-width: 0; }
.mark { flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-small); font-weight: var(--fw-label); }
.options .option--right {
  border-color: var(--correct);
  background: var(--correct);
  color: var(--on-correct);
  box-shadow: inset 0 0 0 var(--rule-at-sm) var(--correct), inset 0 0 0 calc(var(--rule-at-sm) + var(--rule-w-sm)) var(--on-correct);
}
.options .option--right .key { background: var(--on-correct); color: var(--correct); }
.options .option--wrong { border-color: var(--wrong); box-shadow: inset 0 0 0 calc(var(--bw-wrong) - var(--bw)) var(--wrong); }
.options .option--wrong .mark { color: var(--wrong); }
/* Screen-reader-only verdict sentences inside each home option: answer.js marks the options with
   .option--right / .option--wrong, and only the matching sentence is turned on (display:none keeps the rest unread). */
.sr-verdict { display: none; }
.option--right .sr-verdict--right, .option--wrong .sr-verdict--wrong { display: block; }
.verdict { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.verdict[hidden] { display: none; }
.verdict p { margin: 0; }
.verdict-line { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); }
.verdict-line .g { color: var(--wrong); }
.verdict-word { color: var(--wrong); font-weight: var(--fw-label); }
.more-link { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-semi); }
/* Shown instead of the options when the page has no script (noscript) or the site ships none. */
.answer { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.answer summary { cursor: pointer; padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-bold); color: var(--link); }
.answer[open] summary { border-bottom: var(--bw) solid var(--line); }
.answer > p { margin: 0; padding: var(--sp-3) var(--sp-4); }
.site-main .link-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); overflow: hidden; }
.site-main .link-list li { border-top: var(--bw) solid var(--line); }
.site-main .link-list li:first-child { border-top: 0; }
.site-main .link-list a { display: flex; align-items: center; min-height: var(--tap); padding: var(--sp-3) var(--sp-4); border-left: 0; font-weight: var(--fw-row); line-height: var(--lh-stem); color: var(--ink); text-decoration: none; }
.site-main .link-list a:hover { background: var(--sunken); }
/* ---------- home page (A34) ---------- */
:root {
  --block-gap: var(--sp-9);         /* space above each home block */
  --hero-side: 27rem;               /* the try-a-question card beside the intro at 1024 px */
  --cond: "Avenir Next Condensed", "Helvetica Neue", "Arial Narrow", system-ui, sans-serif; /* the big fact line on a feature */
  --fs-hero: clamp(2.25rem, 1rem + 4.6vw, 4.1rem);   /* the home h1: icbc's 65.6 px at 1440 */
  --fs-fact: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-count: 2.25rem;              /* the counted numbers in the number strip */
  --fs-price: 1.75rem;              /* plan prices */
  --fs-step: 1.5rem;                /* step numbers in "How to start" */
  --sign-tile: 6.5rem;              /* one drawing on the sign wall */
  --sign-tile-narrow: 5rem;
  --tile-min: 15rem;                /* narrowest feature tile before the grid drops a column */
  --compare-label: 9.5rem;          /* first column of the free / Premium table */
}

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-6);
  border: var(--bw-strong) solid var(--muted);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) ease;
}
/* The main action is a yellow plate with an ink edge: yellow alone is 1.69:1 on the paper. */
.btn--primary { background: var(--signal); border-color: var(--signal-edge); color: var(--on-signal); }
.btn--small { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-small); font-weight: var(--fw-semi); }

.block { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--block-gap); scroll-margin-top: var(--sp-4); }
.block > h2 + .lede { margin-top: calc(-1 * var(--sp-2)); }

/* Block 1 + 2: the intro and the try-a-question card, one column, two at 1024 px. */
.front { display: grid; gap: var(--sp-7); align-items: start; }
.front-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.front-intro .lede { color: var(--ink); }
.front-intro .lede strong { font-weight: var(--fw-semi); }
.classline { display: flex; align-items: center; gap: var(--sp-3); margin: 0; color: var(--muted); font-size: var(--fs-small); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* The first screen follows the live BC site: a heavy tight headline, the licence-class plates
   before the eyebrow, a green main button with the Premium crown, and one line of note under it. */
.front-intro h1 { margin: 0; font-size: var(--fs-hero); font-weight: var(--fw-num); line-height: 1.02; letter-spacing: -.035em; }
.plates { display: inline-flex; border: var(--bw-strong) solid var(--ink); border-radius: 4px; overflow: hidden; font-family: var(--cond); font-weight: var(--fw-bold); font-size: .95rem; line-height: 1; }
.plates span { padding: .3rem .42rem; }
.plates span + span { border-left: var(--bw-strong) solid var(--ink); }
.front-intro .btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.front-intro .btn--primary:hover { background: var(--ink); border-color: var(--ink); }
.crown { width: 1.1rem; height: .9rem; flex: none; color: var(--signal); }
.hero-note { margin: 0; color: var(--muted); font-family: var(--sans); font-size: var(--fs-small); }

/* Block 2: the card is a quiet box; only the answered options carry plates. Compact on purpose:
   at 1024 px up it ends near the bottom of the intro beside it, as on the live BC site. */
.try { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius-lg); min-width: 0; }
.try-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.try .sign { display: block; margin: 0 auto; padding: 0; border: 0; width: fit-content; }
.try .sign svg { width: 5.5rem; }
.try .options { gap: var(--sp-2); }
.try .options .option { min-height: 0; padding: var(--sp-2) var(--sp-3); border: 0; background: var(--sunken); font-size: var(--fs-small); }
.try .stem { margin: 0 0 var(--sp-1); }
.counter { margin: 0; font-size: var(--fs-counter); font-weight: var(--fw-label); font-variant-numeric: tabular-nums; }
.counter__n { font-weight: var(--fw-num); }
.try .stem { font-size: var(--fs-lede); font-weight: var(--fw-stem); line-height: var(--lh-stem); }
.try-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-small); }
/* The card's own language switch (EN / 简 / 繁): three 44 px buttons, the chosen one ink. */
.qlang { display: inline-flex; border: var(--bw) solid var(--muted); border-radius: var(--radius); overflow: hidden; }
.qlang button {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--sp-2);
  border: 0;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  cursor: pointer;
}
.qlang button + button { border-left: var(--bw) solid var(--muted); }
.qlang button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.qlang button:focus-visible { outline-offset: calc(-1 * var(--focus-w)); }

/* The verdict box after a public question: no explanation, only right/wrong, one sentence and a link. */
.verdict--right .verdict-line .g,
.verdict--right .verdict-word { color: var(--correct); }
.verdict .copy-note { color: var(--muted); }

/* Block 3: three counted numbers and the fixed language count in a ruled row; two by two on a phone. */
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: var(--sp-4) 0; border-top: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line); }
.count { display: flex; flex-direction: column; gap: var(--sp-1); padding: 0 var(--sp-3); }
.count + .count { border-left: var(--bw) solid var(--line); }
.count dt { order: 2; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-tight); }
.count dd { order: 1; margin: 0; font-size: var(--fs-count); font-weight: var(--fw-num); font-variant-numeric: tabular-nums; letter-spacing: var(--track-num); line-height: 1; }
.counts-note { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-small); }

/* Block 4: the exam facts. On the home page they are a band drawn to the window edge. From
   1024 px up they sit beside the guides in one row, and there the band becomes a card in the
   same tint: the bleed would paint over the block next to it. */
.home .exam.band { margin-top: var(--block-gap); }
.exam-guides { display: grid; gap: var(--block-gap); margin-top: var(--block-gap); }
.home .exam-guides > .exam.band,
.exam-guides > .block { margin-top: 0; }

/* Block 5: what the learning area does, one card per item: the label above the title and body. */
.feature-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sp-8); }
/* No box: each item opens with one large green fact line, like the live BC site; a thin rule above separates the rows. */
.feature-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6) 0 var(--sp-5); border-top: var(--bw) solid var(--line); }
.feature-card .feature-label { margin: 0; color: var(--brand); font-family: var(--cond); font-size: var(--fs-fact); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: var(--track-tight); }
.feature-card h3 { margin: 0; font-size: var(--fs-body); letter-spacing: 0; }
.feature-card p { margin: 0; color: var(--muted); }

/* Block 6: free and subscription side by side, one row per line of the engine contract §8. */
.compare-wrap { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare th, .compare td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; line-height: var(--lh-tight); overflow-wrap: anywhere; }
.compare thead th { background: var(--sunken); font-size: var(--fs-small); }
/* Row labels break only at spaces: "Explanations" must not become "Explanation" / "s" in a narrow column. */
.compare tbody th { font-weight: var(--fw-semi); overflow-wrap: normal; }
.compare tbody tr { border-top: var(--bw) solid var(--line); }
.compare col.c-label { width: var(--compare-label); }

.plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-3); }
.plan { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.plan h3 { margin: 0; font-size: var(--fs-body); letter-spacing: 0; }
.price { margin: 0; font-size: var(--fs-price); font-weight: var(--fw-num); font-variant-numeric: tabular-nums; letter-spacing: var(--track-num); line-height: 1; }
.price small { font-size: var(--fs-small); font-weight: var(--fw-semi); letter-spacing: 0; color: var(--muted); }
.plan .btn { align-self: stretch; margin-top: var(--sp-2); }
.small-print { margin: 0; color: var(--muted); font-size: var(--fs-small); }

/* Block 6b: three learning-area screenshots in a row, each with its caption underneath, as in the draft.
   The pictures are 360 wide phone screens, so they keep their own proportions and sit in a card frame. */
.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-3); }
.shots figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.shots img { display: block; width: 100%; height: auto; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.shots figcaption { color: var(--muted); font-size: var(--fs-small); }

/* The app block, outside the 12 numbered blocks: one card per install channel (Google Play,
   this site's APK, the iPhone/iPad test build by email). Words and addresses come from
   home.app in the site copy; the cards drop to two or one column by themselves. */
.app-channels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--sp-3); }
.app-channel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.app-channel-label { margin: 0; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-semi); }
.app-channel-lead { margin: 0; }
.app-channel .btn { margin-top: auto; }

/* Block 7: a real sequence, so it is numbered. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--sp-3); }
.steps li { counter-increment: step; display: grid; grid-template-columns: var(--tap) minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: start; align-content: start; padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.steps li::before { content: counter(step); grid-row: span 2; font-size: var(--fs-step); font-weight: var(--fw-num); font-variant-numeric: tabular-nums; line-height: 1; }
.steps h3 { margin: 0; font-size: var(--fs-body); letter-spacing: 0; }
.steps p { margin: 0; color: var(--muted); }

/* Block 8: latest articles and the guides. */
.reading { display: grid; gap: var(--sp-6); }
.reading h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-body); letter-spacing: 0; }
/* Titles and guide rows read as links (site colour, underlined), as in the draft; the .home prefix beats .site-main .link-list a. */
.home .reading .link-list a { color: var(--link); text-decoration: underline; text-underline-offset: .18em; }
/* The title in an article row sits flush with its date (the row carries the padding). */
.home .reading .link-row a { padding: 0; }

/* Block 9: the sign wall. Drawings only use the art-* classes from styles.css. From 1024 px up
   the intro and the wall sit side by side; the link goes to this language's sign chart. */
.signs-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.signs-copy h2 { margin: 0; }
.signs-copy .lede { margin: 0; }
.signwall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--sign-tile-narrow), 1fr)); gap: var(--sp-3); }
.signwall li { display: grid; place-items: center; aspect-ratio: 1; padding: var(--sp-3); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.signwall svg { display: block; width: 100%; height: auto; max-width: var(--sign-tile); }

/* Block 10: questions people ask first. */
.faq { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.faq details + details { border-top: var(--bw) solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--tap); padding: var(--sp-3) var(--sp-5); font-weight: var(--fw-semi); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .5rem; height: .5rem; border-right: var(--bw-strong) solid currentColor; border-bottom: var(--bw-strong) solid currentColor; transform: translateY(-2px) rotate(45deg); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary:focus-visible { outline-offset: calc(-1 * var(--focus-w)); }
/* The FAQ answer is not the question page's "Answer" disclosure (.answer above): no box of its own, no stacked padding. */
.faq .answer { padding: 0 var(--sp-5) var(--sp-4); background: none; border: 0; border-radius: 0; }
.faq .answer > p { padding: 0; }
/* display:inline-flex would beat the browser's [hidden]: a control that needs script stays hidden until header.js shows it. */
.btn[hidden], .qlang[hidden] { display: none; }
/* Latest articles: title link, then the date, in one row of the link list. */
.link-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0 var(--sp-4); padding: var(--sp-1) var(--sp-4); }
.link-row a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; font-weight: var(--fw-semi); }
.link-row time { flex: none; white-space: nowrap; color: var(--muted); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.faq .answer p { margin: 0; }
.faq .answer a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-semi); }

/* Block 11: what we do not do. */
.refusals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), 1fr)); gap: var(--sp-3); }
.refusals li { padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--radius); }
.refusals h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-body); letter-spacing: 0; }
.refusals p { margin: 0; color: var(--muted); }

/* Block 12: other provinces and states, a row of links. */
.places { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); list-style: none; margin: 0; padding: 0; }
.places a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-semi); }

/* Entrance, number strip and sign wall (home.js adds .in). Only when scripts run and motion is welcome. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .rise:not(.in) { opacity: 0; transform: translateY(.75rem); }
  .rise { transition: opacity .5s ease, transform .5s ease; }
  .signwall li { transition: opacity .4s ease, transform .4s ease; }
  .signwall:not(.in) li { opacity: 0; transform: scale(.92); }
}
@media (hover: hover) {
  .qlang button:not([aria-pressed="true"]):hover,
  .faq summary:hover { background: var(--sunken); }
}

@media (max-width: 30rem) {
  .cta-row { flex-direction: column; align-self: stretch; }
  .cta-row .btn { align-self: stretch; }
  .try { padding: var(--sp-4); }
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-4); }
  .count { padding: 0 var(--sp-2); }
  .count:nth-child(odd) { border-left: 0; }
  .count dd { font-size: var(--fs-h1); }
  .compare th, .compare td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); }
  .compare col.c-label { width: 36%; }
  .steps li { padding: var(--sp-3) var(--sp-4); }
  .faq summary { padding: var(--sp-3) var(--sp-4); }
  .faq .answer { padding: 0 var(--sp-4) var(--sp-4); }
}

/* On a 320 px phone the label column is about 100 px wide; "Explanations" needs a smaller size to fit whole. */
@media (max-width: 22.5rem) {
  .compare tbody th { font-size: .8rem; }
}

@media (min-width: 45rem) {
  .feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .signwall { grid-template-columns: repeat(auto-fill, minmax(var(--sign-tile), 1fr)); }
}

@media (min-width: 64rem) {
  .front { grid-template-columns: minmax(0, 1fr) var(--hero-side); gap: var(--col-gap); }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps li { grid-template-columns: minmax(0, 1fr); }
  .steps li::before { grid-row: auto; }
  .exam-guides { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--col-gap); align-items: stretch; }
  .home .exam-guides > .exam.band { padding: 2rem 1.5rem 1.75rem; border-radius: var(--radius-lg); background: var(--brand-tint); border-image: none; }
  /* The guides block beside the exam facts is the same tinted card at this width, so the pair
     reads as one row of two blocks. Below 64rem both stay transparent and stacked. */
  .exam-guides > #guides { padding: 2rem 1.5rem 1.75rem; background: var(--brand-tint); border-radius: var(--radius-lg); }
  .exam-guides > #guides > h2 { margin-top: 0; }
  .exam-guides .reading { grid-template-columns: minmax(0, 1fr); }
  .feature-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .signs-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--col-gap); align-items: start; }
  .signs-block .signwall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- BC's own content pages: site pages, /road-signs/, /link-to-us/ ----------
   These classes come from BC's own page bodies in content/pages/ and from sitekit's
   site_page.html and notfound.html, so the skeleton stylesheet has no rules for
   them. On the test site that showed as: the 88 drawings kept their 200×226 size
   and stacked in one column (page 29864 px against the live site's 6879), the copy
   button fell back to the browser's grey default, and paragraphs of a site page ran
   into each other.
   Sources, nothing new: the sign and link rules are the live site's own bank.css
   (bcclass.vozai.com /assets/bank.css?v=9bbf1108b9bc, the sheet the old engine
   served with these pages), value for value; the paragraph rhythm is the live
   site's global `p { margin: 0 0 1rem }` (site.css:160) and its
   `.link-to-us-page section { margin: 0 }` (bank.css:87). Colours, radii and type
   families use BC's variables (--rule → --line, --green → --brand, --green-soft →
   --brand-tint, --sans → --sans, the 8 px card radius → --radius-sm, also 8 px);
   spacing and image sizes stay the live sheet's own numbers, which is what makes
   the 58×65 thumbnail and the two-column grid at 1280 match it. Their responsive
   behaviour is the live sheet's too: minmax(min(100%, 24rem), 1fr) drops to one
   column by itself once the text column is narrower than 24rem, so no extra media
   query is added. */

/* The live site's paragraph margin, scoped to the two page kinds and kept at zero
   specificity with :where() so the page-specific rules below (and .sign-row p) still
   win on their own margins. */
.site-page :where(p), .not-found :where(p) { margin: 0 0 1rem; }
.site-page :where(section) { margin: 0; }

/* /road-signs/ */
/* The live sheet caps this one-line intro at 46rem (bank.css:99). The owner's rule for this site
   is that prose runs the content column (see .site-main), so the cap is not carried over: at
   1280 the sentence is 1112 wide here, 736 on the live site. Reported, not copied. */
.road-signs-download { margin: 1.5rem 0 0; }
.sign-download {
  display: inline-block;
  padding: .6rem .9rem;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  font-family: var(--sans);
  font-weight: 650;
  text-decoration: none;
}
.sign-groups {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 1.5rem 0 0;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
}
.sign-group h2 { margin-top: 2.5rem; }
.sign-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 0 2rem;
  margin-top: 1rem;
}
.sign-row { display: flex; align-items: flex-start; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.sign-thumb { flex: 0 0 3.6rem; width: 3.6rem; height: auto; background: #fff; border-radius: 4px; }
.sign-row strong { font-family: var(--sans); }
.sign-row p { margin: .25rem 0 0; font-size: .95rem; }
.road-signs-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
}

/* /link-to-us/ */
.link-logos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.link-logos a { display: block; color: var(--ink); text-decoration: none; }
.link-logos img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.link-logos span { display: block; margin-top: .4rem; font-family: var(--sans); font-size: .875rem; color: var(--muted); }
.link-code {
  margin: 0 0 .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.link-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
.link-copy {
  font-family: var(--sans);
  font-size: .95rem;
  padding: .45rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.link-copy:hover, .link-copy:focus-visible { border-color: var(--brand); color: var(--brand); }

/* ---- the second row: /#try, /#signs, /#app, /#price, /#faq on the home page, and the
   three Free study destinations on handbook, questions, concepts and road-sign pages --------
   The live site carries it (bcclass.vozai.com site.css :1205-1228): a sticky row under the
   bar, underlined tabs, no pills. layout.html decides which page gets which set; a page
   never gets both. */
.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.subnav nav {
  display: flex;
  align-items: center;
  gap: 3rem;
  min-height: 3.5rem;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.subnav a {
  padding: .375rem 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}
.subnav a:hover { color: var(--ink); }
/* The current destination: the live site's dark text and underline (site.css:1223).
   The home page's scroll script sets the same attribute on the tab it is passing. */
.subnav a[aria-current] { color: var(--ink); border-bottom-color: var(--brand); }
.subnav a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* Six tabs do not fit a phone: the row scrolls sideways, without a bar (the live
   site's own rule at 560 px). */
@media (max-width: 35rem) {
  .subnav nav { gap: 2rem; overflow-x: auto; scrollbar-width: none; }
  .subnav nav::-webkit-scrollbar { display: none; }
}
/* At 360 px the six tabs must all show whole, not with the last one cut mid-word: smaller
   type and gap fit them in every language; narrower phones still scroll. */
@media (max-width: 26.9375rem) {
  .subnav nav { gap: .75rem; }
  .subnav a { font-size: .875rem; }
}
/* The three-link row (handbook, questions, road signs) in English is 14 px too wide at 340–353 px. */
@media (max-width: 22.5rem) {
  .subnav a { font-size: .8125rem; }
}

/* The sticky bar hides the top of whatever an in-page anchor jumps to, so every
   target clears it; on the home page the second row is sticky too and is part of
   what a target must clear (the live site does the same at site.css :636). */
[id] { scroll-margin-top: calc(var(--header-h) + .75rem); }
.subnav ~ main [id] { scroll-margin-top: calc(var(--header-h) + 3.5625rem + .75rem); }
/* The changelog (/changelog/, /changelog/app/, /changelog/content/): rows between rules,
   entry title at list size, the date muted under it. Same rules as the old site's
   bank.css; its --rule is this stylesheet's --line. */
.changelog-entries { list-style: none; padding: 0; margin: 1.5rem 0; border-top: 1px solid var(--line); }
.changelog-entry { border-bottom: 1px solid var(--line); padding: 1.1rem .5rem; }
.changelog-entry h2, .changelog-entry h3 { font-size: 1.1rem; font-weight: 650; line-height: 1.45; letter-spacing: 0; margin: 0; }
.changelog-date { display: block; margin: .2rem 0 .5rem; color: var(--muted); font-family: var(--sans); font-size: .875rem; }
.changelog-text p { margin: 0 0 .6rem; }
.changelog-text p:last-child { margin-bottom: 0; }