:root {
  --bg: #F7F1E7; --bg-soft: #F1E7D8; --card: #FFFDF9;
  --text: #2A241D; --text-secondary: #6F6459;
  --accent: #8A6F58; --accent-deep: #6D563F; --accent-soft: rgba(138,111,88,0.12);
  --divider: #E2D6C6; --line: rgba(109,86,63,0.16);
  --gold: #D99A2B; --green: #2F8A52; --green-soft: #DDF2E4; --red: #C0483F; --red-soft: #FBE3E1;
  /* Text-safe variants of the two accent colours. The plain --gold/--green are
     decorative fills (XP bar, score ring) and fail WCAG AA as text on --card:
     #D99A2B is 2.4:1 and #2F8A52 is 4.24:1. These pass at 5.11:1 and 5.96:1. */
  --gold-text: #96620A; --green-text: #237042;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --shadow-sm: 0 1px 2px rgba(58,44,30,0.05), 0 4px 14px rgba(58,44,30,0.06);
  --shadow-md: 0 2px 4px rgba(58,44,30,0.06), 0 14px 34px rgba(58,44,30,0.10);
  /* One radius scale. Card components used nine different values, so a corner
     radius told the reader nothing; now it tracks the size of the thing. */
  --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-pill: 999px;
  --focus: #3C2E1F;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* One visible focus ring for everything interactive. Previously only .site-nav a
   and .feature-route had one; every button, card-link, tab, pill and summary
   fell back to the UA default ring over a custom fill. */
:where(a, button, summary, select, input, [tabindex]):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--accent-deep);
  color: #fff; font-weight: 700; padding: 12px 18px; border-radius: var(--r-sm); text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }
/* The site animates hover lifts, confetti, an XP pop and smooth scrolling.
   Honour a stated preference for less of it rather than overriding the OS. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .btn:hover, .btn-lg:hover, .cta-banner a:hover, .next-btn:hover,
  .feature-route:hover, .study-module:hover, .mode-card:hover, .state-grid a:hover,
  .quiz-option:hover:not([disabled]), header.site a.cta:hover, .store-links a:hover img { transform: none; }
}
body {
  margin: 0; color: var(--text);
  background: linear-gradient(180deg, #F9F3E9 0%, var(--bg) 340px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 24px; }
header.site {
  position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: 12px 24px; background: rgba(249,243,233,0.86); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
header.site a.logo { font-family: var(--serif); font-weight: 700; color: var(--text); text-decoration: none; font-size: 20px; letter-spacing: -0.01em; }
header.site a.logo span { color: var(--accent); }
.site-nav { display: flex; align-items: center; justify-content: center; gap: 4px; }
.site-nav a {
  color: var(--text-secondary); text-decoration: none; font-weight: 700; font-size: .86rem;
  padding: 10px 11px; border-radius: var(--r-pill); white-space: nowrap;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--text); background: var(--accent-soft); }
.site-nav a.active, .site-nav a[aria-current="page"] {
  color: var(--accent-deep); background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
}
/* "You are in this section" — quieter than "you are on this page". No pill, no
   aria-current: the link still goes somewhere other than here. */
.site-nav a.is-section { color: var(--text); }
/* Visible breadcrumb trail. 551 pages emitted BreadcrumbList JSON-LD but showed
   nothing; now the same list renders here. Aligned to the content column. */
.crumbs { max-width: 760px; margin: 0 auto; padding: 16px 24px 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 0; font-size: 0.85rem; }
.crumbs li { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); min-width: 0; }
.crumbs li:not(:last-child)::after { content: "›"; color: var(--line); }
.crumbs a { color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--text); text-decoration: underline; }
/* Wrap a long current-page title rather than forcing the row wider than the
   viewport — an overflowing breadcrumb was scrolling the whole page sideways. */
.crumbs li[aria-current="page"] { color: var(--text); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.header-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.search-trigger {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid var(--line); background: var(--card); border-radius: var(--r-pill); cursor: pointer;
  font-size: 1rem; color: var(--text-secondary); transition: border-color .12s ease, color .12s ease;
}
.search-trigger:hover, .search-trigger:focus-visible { border-color: var(--accent); color: var(--text); }
.search-dialog {
  width: min(640px, calc(100vw - 32px)); max-width: 640px; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 0; background: var(--card); box-shadow: var(--shadow-md); color: var(--text); margin-top: 8vh;
}
.search-dialog::backdrop { background: rgba(42,36,29,0.32); backdrop-filter: blur(2px); }
.search-box { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--divider); margin: 0; }
.search-box input {
  flex: 1; border: none; background: none; font-size: 1.05rem; color: var(--text); font-family: inherit; padding: 6px 4px;
}
.search-box input:focus { outline: none; }
.search-close { border: none; background: none; font-size: 1.5rem; line-height: 1; color: var(--text-secondary); cursor: pointer; padding: 0 6px; }
.search-results { max-height: min(60vh, 480px); overflow-y: auto; padding: 6px; }
.search-results:empty::after { content: attr(data-empty); display: block; color: var(--text-secondary); padding: 18px 12px; font-size: 0.9rem; }
.search-group-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); padding: 12px 12px 4px; }
.search-hit {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--text); text-decoration: none;
}
.search-hit:hover, .search-hit.is-active { background: var(--accent-soft); }
.search-hit .search-hit-kind { margin-left: auto; font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; }
/* EN | ES switch, shown only when this page has a real counterpart in the other
   language. Current language is plain text; the other is the link. */
.lang-switch { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; font-size: 0.78rem; font-weight: 700; }
.lang-switch a, .lang-switch span { padding: 6px 10px; line-height: 1; text-decoration: none; }
.lang-switch span[aria-current="true"] { background: var(--accent-soft); color: var(--accent-deep); }
.lang-switch a { color: var(--text-secondary); }
.lang-switch a:hover, .lang-switch a:focus-visible { background: var(--card); color: var(--text); }
header.site a.cta {
  background: var(--accent-deep); color: white; text-decoration: none; font-weight: 700;
  padding: 10px 18px; border-radius: var(--r-pill); font-size: 14px; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease; text-align: center;
}
header.site a.cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
#lang-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px 16px;
  flex-wrap: wrap; text-align: center; background: var(--accent-soft); color: var(--text);
  padding: 10px 24px; font-size: 0.86rem; border-bottom: 1px solid var(--line);
}
#lang-banner[hidden] { display: none; }
#lang-banner a { color: var(--accent-deep); font-weight: 700; text-decoration: underline; }
#lang-banner button {
  background: none; border: none; color: var(--text-secondary); font-size: 1.15rem;
  line-height: 1; cursor: pointer; padding: 0 4px;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
h1 { font-size: clamp(2.1rem, 5.5vw, 2.9rem); text-wrap: balance; margin: 18px 0 8px; }
h2 { font-size: 1.45rem; margin-top: 44px; }
p.lede { color: var(--text-secondary); font-size: 1.08rem; max-width: 58ch; }
.eyebrow-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
/* Chip scale. The pill shape used to mean nothing: static labels (.eyebrow,
   .stat-chip, .mode-badge, .frequency-badge, .weak-topic-chip, .module-progress)
   were raised, bordered and shadowed exactly like the things you can actually
   press (.pill-btn, nav items, buttons). Static chips are now flat tint with no
   border or shadow; only interactive ones keep the raised treatment. */
.chip, .eyebrow {
  display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); border: 0;
  color: var(--text-secondary); font-size: 0.78rem; font-weight: 700; padding: 6px 12px;
  border-radius: var(--r-pill); box-shadow: none;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; }
.btn-lg {
  display: inline-block; text-decoration: none; font-weight: 800; font-size: 1rem; border-radius: var(--r-pill);
  padding: 15px 30px; transition: transform .15s ease, box-shadow .15s ease; box-shadow: var(--shadow-sm);
}
.btn-lg:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-lg.solid { background: var(--accent-deep); color: white; }
.btn-lg.ghost { background: var(--card); color: var(--accent-deep); border: 1.5px solid var(--accent-deep); }
.facts { display: flex; gap: 14px; flex-wrap: wrap; margin: 26px 0; }
.fact {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 20px;
  text-align: center; min-width: 104px; box-shadow: var(--shadow-sm); flex: 1;
}
.fact .n { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; font-family: var(--serif); }
.fact .l { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px;
  margin: 20px 0; box-shadow: var(--shadow-sm);
}
/* A heading is often the first child of a .card; it should hug the top rather
   than inherit the 44px h2 top margin. Replaces 16 style="margin-top:0". */
.card > :first-child { margin-top: 0; }
/* Grid of reference cards (road-test sources), so .card children stop borrowing
   the .features feature-tile grid they don't belong to. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 20px 0; }
.card-grid .card { margin: 0; }
.cta-banner {
  position: relative; overflow: hidden; background: linear-gradient(125deg, #6D563F, #7E6650 60%, #82705F);
  color: white; border-radius: var(--r-lg); padding: 34px 28px; text-align: center; margin: 40px 0; box-shadow: var(--shadow-md);
}
.cta-banner::after {
  content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,0.08); pointer-events: none;
}
.cta-banner strong { font-family: var(--serif); font-size: 1.35rem; }
.cta-banner a {
  display: inline-block; margin-top: 14px; background: white; color: var(--accent-deep); font-weight: 800;
  text-decoration: none; padding: 13px 30px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
  transition: transform .15s ease;
}
.cta-banner a:hover { transform: translateY(-2px); }
.store-links { display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
.store-links img { height: 48px; width: auto; display: block; transition: transform .15s ease, opacity .15s ease; }
.store-links a:hover img { transform: translateY(-2px); opacity: 0.92; }
.quiz-option {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1.5px solid var(--divider);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 10px; font-size: 1rem; cursor: pointer; color: var(--text);
  position: relative; transition: border-color .12s ease, transform .12s ease, background .12s ease; font-family: inherit; line-height: 1.4;
}
.quiz-option .opt-letter { font-weight: 800; color: var(--accent-deep); flex-shrink: 0; }
.quiz-option .quiz-mark { margin-left: auto; font-weight: 800; font-size: 1.1rem; }
.quiz-option.correct .quiz-mark { color: var(--green-text); }
.quiz-option.wrong .quiz-mark { color: var(--red); }
.quiz-option:hover:not([disabled]) { border-color: var(--accent); transform: translateY(-1px); }
.quiz-option.correct { background: var(--green-soft); border-color: #7fcf9a; }
.quiz-option.correct .opt-letter { color: var(--green-text); }
.quiz-option.wrong { background: var(--red-soft); border-color: #e79a9a; }
.quiz-option.wrong .opt-letter { color: var(--red); }
.quiz-option[disabled] { cursor: default; }
.quiz-progress { color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; margin: 0 0 8px; }
.quiz-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.quiz-topbar .quiz-progress { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* CDL family: credential/guide cross-links, requirement tables, and the
   dual-language study control. Every class the CDL templates emit is styled
   here — an unstyled class is invisible in this design system, which is how
   50 CTAs once shipped as bare text (see DMV_WEBSITE_UX_AUDIT.md). */
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 20px 0; }
.link-grid a {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px;
  text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 4px;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.link-grid a:hover { border-color: var(--accent); transform: translateY(-1px); }
.link-grid a strong { font-weight: 700; font-size: 0.95rem; }
.link-grid a span { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.4; }
.link-grid--compact { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.link-grid--compact a { padding: 10px 12px; font-weight: 600; font-size: 0.88rem; }
.fine-print { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.5; }
.process-list { margin: 18px 0; padding-left: 22px; }
.process-list li { margin-bottom: 12px; line-height: 1.6; }
.process-list li strong { color: var(--text); }
.card.callout { border-left: 3px solid var(--accent); background: var(--card); }
.card.callout p { margin: 0 0 10px; }
.card.callout p:last-child { margin-bottom: 0; }
.facts-table { width: 100%; border-collapse: collapse; }
.facts-table th, .facts-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts-table th { font-weight: 600; width: 42%; }
.facts-table tr:last-child th, .facts-table tr:last-child td { border-bottom: 0; }
.dual-language-toggle {
  display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 0.9rem; cursor: pointer;
}
.dual-language-toggle input { margin-top: 3px; flex: none; }
.quiz-alt-text { color: var(--text-secondary); font-size: 0.95rem; margin: 4px 0 0; font-style: italic; }
.quiz-alt-option { display: block; color: var(--text-secondary); font-size: 0.82rem; margin-top: 2px; font-style: italic; }
.state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 20px 0; }
.state-grid a {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; text-align: center;
  text-decoration: none; color: var(--text); font-weight: 600; font-size: 0.9rem;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.state-grid a:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.sign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 20px 0; }
/* The whole card is the link now, not just the title. Previously the image and
   body were dead pixels while a second, fully-clickable copy of the same 115
   signs sat right below in a .state-grid. */
.sign-card {
  display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.sign-card:hover, .sign-card:focus-visible { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.sign-card strong { color: var(--accent-deep); }
.sign-card .sign-meaning { color: var(--text-secondary); font-size: 0.9rem; margin: 4px 0 0; }
.sign-card .sign-action { font-size: 0.85rem; margin: 6px 0 0; }
.sign-card img { display: block; }
.sign-image { width: 100px; height: 100px; object-fit: contain; margin-bottom: 12px; }
.quiz-sign-image { display: block; width: 160px; height: 160px; object-fit: contain; margin: 0 auto 14px; }
.search-answer { background: var(--card); border-left: 4px solid var(--accent-deep); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.trust-badge { color: var(--text-secondary); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; font-size: 0.86rem; }
/* privacy.html / terms.html are hand-authored but now share this stylesheet
   instead of shipping their own palette. */
.legal-updated { color: var(--text-secondary); font-size: 0.86rem; margin-top: 0; }
footer { text-align: center; color: var(--text-secondary); font-size: 0.85rem; padding: 48px 24px; border-top: 1px solid var(--line); margin-top: 56px; }
a { color: var(--accent-deep); }
/* The permit-requirements comparison (51 rows x 5 columns) had no table CSS at
   all — browser defaults inside a bare overflow-x:auto div, so on a phone it was
   a sideways scroll through unpadded, unruled cells. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: var(--card); }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--divider); }
.data-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--bg-soft); font-family: var(--serif);
  font-size: 0.88rem; white-space: nowrap; border-bottom: 2px solid var(--line);
}
.data-table tbody tr:nth-child(even) { background: rgba(109,86,63,0.035); }
.data-table tbody tr:hover { background: var(--accent-soft); }
.data-table td:not(:first-child) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table th:first-child, .data-table td:first-child { font-weight: 600; }
@media (max-width: 640px) {
  /* Stack each row into a labelled card instead of scrolling a 5-column grid
     sideways. Labels come from data-label on each cell. */
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .data-table tr {
    margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--card); padding: 6px 4px;
  }
  .data-table tbody tr:nth-child(even) { background: var(--card); }
  .data-table td { border-bottom: 1px solid var(--divider); display: flex; justify-content: space-between; gap: 16px; }
  .data-table tr td:last-child { border-bottom: 0; }
  .data-table td::before {
    content: attr(data-label); font-weight: 700; color: var(--text-secondary); flex-shrink: 0;
  }
  /* The first cell is the row's title, not a label/value pair — it has no
     data-label, so space-between would shove the lone state name to the right. */
  .data-table td:first-child { font-size: 1.05rem; justify-content: flex-start; padding-bottom: 10px; }
  .data-table td:first-child::before { display: none; }
}

/* Card system. One recipe, two states — and the difference has to survive on a
   touch screen, where the old hover-lift-only cue was invisible. A raised,
   shadowed, chevron-bearing card is something you can open; a flat tinted panel
   is something you can only read. The home page put both kinds in adjacent
   grids ("Use the right tool" vs "Why learners trust DMV Prep") with literally
   identical pixels, which is the complaint this rule answers. */
.surface { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.surface--static { background: var(--bg-soft); box-shadow: none; }
.surface--interactive {
  display: block; color: var(--text); text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.surface--interactive:hover, .surface--interactive:focus-visible {
  transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md);
}
/* Home sections */
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 20px 0; }
.feature { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: none; }
.feature .ico { font-size: 1.6rem; display: block; margin-bottom: 8px; }
.feature b { display: block; margin-bottom: 4px; font-size: 1rem; }
.feature p { color: var(--text-secondary); font-size: 0.88rem; margin: 0; }
.feature-route {
  display: block; color: var(--text); text-decoration: none; cursor: pointer;
  background: var(--card); box-shadow: var(--shadow-sm);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.feature-route:hover, .feature-route:focus-visible { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.feature-route .feature-action { display: inline-block; color: var(--accent-deep); font-size: .84rem; font-weight: 800; margin-top: 12px; }
.feature-route .feature-action::after { content: ""; }
.track-card.active { border-color: var(--accent); background: var(--accent-soft); }
.track-card.active .feature-action { color: var(--text-secondary); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 20px 0; counter-reset: step; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.step::before {
  counter-increment: step; content: counter(step); display: inline-flex; width: 30px; height: 30px;
  align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-deep); color: white;
  font-weight: 800; font-size: 0.9rem; margin-bottom: 10px;
}
.step b { display: block; margin-bottom: 4px; }
.step p { color: var(--text-secondary); font-size: 0.88rem; margin: 0; }
.appband {
  display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: linear-gradient(125deg, #2A241D, #4A3B2C); color: #F7F1E7; border-radius: var(--r-lg);
  padding: 36px 32px; margin: 48px 0; box-shadow: var(--shadow-md);
}
.appband h2 { margin: 0 0 8px; color: white; font-size: 1.6rem; }
.appband p { color: rgba(247,241,231,0.75); margin: 0 0 18px; font-size: 0.95rem; max-width: 40ch; }
.appband .btn-lg.solid { background: #F7F1E7; color: #2A241D; }
.appband ul { list-style: none; padding: 0; margin: 0 0 18px; }
.appband li { padding: 3px 0; font-size: 0.92rem; color: rgba(247,241,231,0.9); }
.phone {
  width: 200px; height: 400px; border-radius: 36px; background: #1B1712; padding: 10px; flex-shrink: 0;
  box-shadow: 0 24px 48px rgba(0,0,0,0.35); margin: 0 auto;
}
.phone .screen {
  width: 100%; height: 100%; border-radius: 28px; background: linear-gradient(180deg, #F9F3E9, #F1E7D8);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}
.phone .p-ring {
  width: 86px; height: 86px; border-radius: 50%; margin: 8px auto 2px;
  background: conic-gradient(var(--green) 0 92%, var(--divider) 92% 100%);
  display: flex; align-items: center; justify-content: center;
}
.phone .p-ring i { width: 64px; height: 64px; border-radius: 50%; background: #FFFDF9; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; color: var(--text); }
.phone .p-cap { text-align: center; font-size: 0.62rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.phone .p-row { background: #FFFDF9; border-radius: var(--r-sm); padding: 8px 10px; font-size: 0.68rem; font-weight: 700; color: var(--text); display: flex; justify-content: space-between; box-shadow: var(--shadow-sm); }
.phone .p-row span:last-child { color: var(--green); }

/* Study app */
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.pill-btn {
  background: var(--card); border: 1px solid var(--divider); color: var(--text); font-weight: 600;
  font-size: 0.85rem; padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer; transition: all .12s ease;
}
.pill-btn:hover { border-color: var(--accent); }
.pill-btn.active { background: var(--accent-deep); color: white; border-color: var(--accent-deep); }
select.state-select {
  background: var(--card); border: 1px solid var(--divider); color: var(--text); font-weight: 600;
  padding: 8px 14px; border-radius: var(--r-pill); font-size: 0.85rem;
}
.gamebar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.stat-chip {
  display: inline-flex; align-items: center; gap: 5px; background: var(--accent-soft); border: 0;
  border-radius: var(--r-pill); padding: 6px 13px; font-size: 0.82rem; font-weight: 700; color: var(--text);
  box-shadow: none;
}
.stat-chip b { font-variant-numeric: tabular-nums; }
.stat-chip.level { background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); }
.xp-bar { flex: 1 1 90px; min-width: 90px; height: 7px; background: var(--divider); border-radius: var(--r-pill); overflow: hidden; }
.xp-bar > div { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--gold), #E8B54D); transition: width .5s ease; }
.xp-pop {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--gold-text); font-weight: 800;
  font-size: 0.85rem; pointer-events: none; animation: xp-pop .9s ease forwards;
}
@keyframes xp-pop { 0% { opacity: 0; margin-top: 4px; } 25% { opacity: 1; } 100% { opacity: 0; margin-top: -14px; } }
.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 16px 0 28px; }
.mode-section { margin: 26px 0 34px; }
.mode-section h2 { margin: 0 0 12px; font-size: 1.2rem; }
.recommended-section { margin-top: 22px; }
.recommended-section .mode-card { max-width: 520px; }
.section-kicker {
  display: block; color: var(--accent-deep); font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 8px;
}
.mode-card {
  background: var(--card); border-radius: var(--r-lg); padding: 18px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--divider); font-family: inherit; color: var(--text); box-shadow: var(--shadow-sm);
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.mode-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mode-card.recommended { border-color: var(--accent-deep); background: linear-gradient(135deg, var(--card), var(--accent-soft)); box-shadow: var(--shadow-md); }
.mode-card:disabled { opacity: 0.5; cursor: not-allowed; }
.mode-card:disabled:hover { border-color: var(--divider); transform: none; box-shadow: var(--shadow-sm); }
.mode-card .mode-ico { font-size: 1.35rem; display: block; margin-bottom: 6px; }
.mode-card .mode-title { font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; }
.mode-card .mode-desc { color: var(--text-secondary); font-size: 0.85rem; }
.mode-card .mode-badge {
  display: inline-block; margin-top: 8px; font-size: 0.72rem; font-weight: 700; color: var(--accent-deep);
  background: var(--accent-soft); padding: 3px 9px; border-radius: var(--r-pill);
}
.study-context {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px; font-size: .86rem;
}
.study-context span { color: var(--text-secondary); }
.study-context.compact { display: inline-flex; margin-bottom: 10px; padding: 7px 11px; font-size: .78rem; }
.state-picker { margin: 14px 0 18px; }
.state-picker label { display: block; font-size: .78rem; font-weight: 800; margin-bottom: 6px; }
.state-picker p { color: var(--text-secondary); font-size: .8rem; margin: 6px 0 0; }
.state-picker select { min-height: 44px; }
.resume-card, .next-step-card, .empty-dashboard {
  background: linear-gradient(135deg, var(--card), var(--accent-soft)); border: 1.5px solid var(--accent-deep);
  border-radius: var(--r-lg); padding: 22px; margin: 20px 0 28px; box-shadow: var(--shadow-md);
}
.resume-card { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; }
.resume-card h2, .next-step-card h2, .empty-dashboard h2 { margin: 0 0 6px; font-size: 1.25rem; }
.resume-card p, .next-step-card p, .empty-dashboard p { color: var(--text-secondary); margin: 4px 0; }
.resume-card .btn-row { margin: 0; }
.resume-context { font-size: .82rem; font-weight: 700; }
.session-label { font-weight: 800; font-size: .88rem; margin-bottom: 2px; }
/* Segmented control, not underlined text. `background: none; border: none` read
   as a heading rather than something you could press. */
.app-tabs {
  display: inline-flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px;
}
.app-tab {
  background: none; border: none; padding: 8px 16px; font-weight: 700; font-size: 0.92rem;
  color: var(--text-secondary); cursor: pointer; border-radius: var(--r-pill);
  font-family: inherit; transition: background .12s ease, color .12s ease;
}
.app-tab:hover { color: var(--text); }
.app-tab.active, .app-tab[aria-selected="true"] {
  color: var(--accent-deep); background: var(--card); box-shadow: var(--shadow-sm);
}
.progress-bar-track { background: var(--divider); border-radius: var(--r-pill); height: 8px; overflow: hidden; }
.progress-bar-fill { background: linear-gradient(90deg, var(--accent), var(--accent-deep)); height: 100%; border-radius: var(--r-pill); transition: width .35s ease; }
.score-ring {
  width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800; color: white; margin: 0 auto 8px;
}
.ring { width: 128px; height: 128px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.ring .ring-center {
  width: 98px; height: 98px; border-radius: 50%; background: var(--card); display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-weight: 800; font-size: 1.6rem; font-family: var(--serif);
}
.ring .ring-center small { font-size: 0.62rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-family: -apple-system, sans-serif; }
.outlook-label { font-weight: 800; margin: 4px 0 2px; }
.outlook-label.good { color: var(--green-text); }
.outlook-label.mid { color: var(--gold-text); }
.outlook-label.low { color: var(--red); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 16px 0; }
.dash-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; text-align: center; box-shadow: var(--shadow-sm); }
.dash-stat .n { font-size: 1.3rem; font-weight: 800; font-family: var(--serif); }
.dash-stat .l { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.result-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--divider); font-size: 0.9rem; }
.result-row:last-child { border-bottom: none; }
.badge-pass { color: var(--green-text); font-weight: 700; }
.badge-fail { color: var(--red); font-weight: 700; }
.result-hero { position: relative; overflow: hidden; text-align: center; }
.result-meta { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.app-cta-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; margin: 18px 0;
}
.app-cta-card p { margin: 0; font-size: 0.92rem; max-width: 46ch; }
.confetti-piece {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: 0;
  animation: confetti-fall 2.4s ease-in forwards;
}
@keyframes confetti-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0.9; transform: translateY(420px) rotate(560deg); }
}
.sign-flash {
  position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px; text-align: center; max-width: 420px; margin: 20px auto; box-shadow: var(--shadow-md);
}
.sign-flash img { width: 140px; height: 140px; object-fit: contain; margin-bottom: 16px; }
/* Flashcards: the single primary action (mark mastered) is separated from the
   Previous/Shuffle/Next navigation, which is uniformly secondary. */
.sign-action-row { display: flex; justify-content: center; margin: 14px 0 6px; }
.sign-nav { margin-top: 8px; }
.btn-row { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
/* Button scale. `.btn` alone used to set `border: none` with no background, so
   a bare class="btn" rendered as bold text floating in stray padding — which is
   exactly what 50 pages of "Get the free app" CTAs were doing. The base class
   now carries a full appearance, so an un-modified .btn can never be invisible
   again; the modifiers only re-colour it.
   .btn-primary/.btn-secondary are retained aliases: assets/app.js is cached
   separately from this stylesheet, so a visitor holding a stale app.js must not
   meet a stylesheet that has dropped the class names it renders. */
.btn {
  background: var(--card); color: var(--accent-deep); border: 1.5px solid var(--accent-deep);
  border-radius: var(--r-pill); padding: 12px 22px; font-weight: 700; font-size: 0.92rem; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease; text-decoration: none; display: inline-block;
  font-family: inherit; line-height: 1.2; text-align: center;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn--primary, .btn-primary { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); box-shadow: var(--shadow-sm); }
.btn--secondary, .btn-secondary { background: var(--divider); color: var(--text); border-color: transparent; }
.btn--quiet { background: transparent; color: var(--text-secondary); border-color: var(--line); font-weight: 600; }
.btn--quiet:hover { color: var(--text); border-color: var(--accent); }
.btn--lg { padding: 15px 30px; font-size: 1rem; font-weight: 800; }
.btn--sm { padding: 7px 13px; font-size: 0.82rem; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.next-btn {
  display: block; width: 100%; margin-top: 14px; background: var(--accent-deep); color: white; border: none;
  border-radius: var(--r-md); padding: 14px; font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.next-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.app-loading { color: var(--text-secondary); padding: 20px 0; }
/* The "faster starting point" next step used to be a bare paragraph link under
   the study app — the single most useful shortcut on the page, rendered as body
   text. Now a real card you can see is an action. */
.quick-start {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 8px;
  padding: 16px 18px; background: var(--bg-soft);
}
.quick-start .ico { font-size: 1.5rem; flex-shrink: 0; }
.quick-start .quick-start-copy { flex: 1 1 240px; }
.quick-start .quick-start-copy strong { display: block; }
.quick-start .quick-start-copy span { color: var(--text-secondary); font-size: 0.9rem; }
.quick-start .btn { flex-shrink: 0; }
.weak-topic-chip {
  display: inline-block; background: var(--accent-soft); color: var(--accent-deep); font-weight: 700;
  font-size: 0.8rem; padding: 5px 12px; border-radius: var(--r-pill); margin: 4px 6px 4px 0;
}
.app-store-secondary {
  border: 1px solid var(--line); background: var(--card); border-radius: var(--r-lg); padding: 16px 18px; margin: 28px 0;
  font-size: 0.88rem; color: var(--text-secondary); display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; box-shadow: var(--shadow-sm);
}
.app-store-secondary a { font-weight: 700; }
.app-store-secondary .store-links { justify-content: flex-start; }
details.faq {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
details.faq summary { font-weight: 700; cursor: pointer; }
details.faq p { color: var(--text-secondary); margin: 10px 0 2px; }
ol.sample-questions { padding-left: 20px; }
ol.sample-questions > li { margin-bottom: 22px; }
ol.sample-questions .sq-text { font-weight: 600; margin-bottom: 8px; }
.module-drill { margin: 34px 0; }
.drill-cta { margin-top: 18px; padding: 18px 20px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--divider); }
.drill-cta strong { display: block; margin-bottom: 4px; }
.drill-cta .btn { display: inline-block; margin-top: 12px; }
ol.sample-questions .sq-source { font-size: .82rem; color: var(--muted); margin: 8px 0 0; }
ol.sample-questions .sq-source a { color: inherit; text-decoration: underline; }
.q-source { font-size: .82rem; color: var(--muted); margin: 4px 0 14px; }
.q-source a { color: inherit; text-decoration: underline; }
ol.sample-questions ul { list-style: none; padding: 0; margin: 0 0 8px; }
ol.sample-questions ul li {
  background: var(--card); border: 1px solid var(--divider); border-radius: var(--r-sm);
  padding: 8px 12px; margin-bottom: 6px; font-size: 0.95rem;
}
ol.sample-questions details summary { color: var(--accent-deep); font-weight: 700; cursor: pointer; font-size: 0.9rem; }
ol.sample-questions details p { color: var(--text-secondary); font-size: 0.92rem; margin: 8px 0 0; }
@media (max-width: 560px) {
  header.site { grid-template-columns: 1fr auto; gap: 8px 12px; padding: 10px 16px 8px; }
  header.site a.logo { grid-column: 1; grid-row: 1; align-self: center; }
  header.site .header-actions { grid-column: 2; grid-row: 1; }
  /* The header CTA (long in Spanish) plus the toggle are too wide together on a
     phone; drop the toggle here — language switching stays available via the
     auto banner and the footer. */
  .lang-switch { display: none; }
  .nav-scroll { position: relative; grid-column: 1 / -1; grid-row: 2; margin: 0 -16px; }
  /* Hidden scrollbar means a clipped last item has no visible cue that the
     strip scrolls — this trailing fade plus the chevron below is that cue
     (2026-07-27 audit: nav items were "inaccessible without an obvious
     affordance" at 390px). */
  .nav-scroll::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 32px;
    background: linear-gradient(to right, rgba(249,243,233,0), rgba(249,243,233,0.95) 65%);
    pointer-events: none;
  }
  .nav-scroll::before {
    content: "›"; position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
    font-size: 1.1rem; font-weight: 700; color: var(--text-secondary); pointer-events: none; z-index: 1;
  }
  .site-nav {
    justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    padding: 0 22px 0 12px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 10px; }
  .hero-ctas .btn-lg { width: 100%; text-align: center; }
  .appband { padding: 28px 22px; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card { min-height: 44px; }
  .resume-card .btn-row, .resume-card .btn { width: 100%; }
  .wrap { padding: 20px 16px; }
}

.study-path-grid { display: grid; gap: 14px; margin: 22px 0; }
.study-module {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px;
  color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.study-module:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.module-number {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent-deep); color: white; font-weight: 800;
}
.study-module strong { display: block; font-family: var(--serif); font-size: 1.08rem; }
.study-module p { margin: 3px 0 0; color: var(--text-secondary); font-size: .9rem; }
.frequency-badge { font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--accent-deep); white-space: nowrap; }
.module-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.module-progress {
  font-size: .72rem; font-weight: 800; white-space: nowrap; border-radius: var(--r-pill);
  padding: 3px 9px; background: var(--accent-soft, rgba(47,138,82,.12)); color: var(--green, #2F8A52);
}
.module-progress[data-level="low"] { background: rgba(192,72,63,.12); color: #C0483F; }
.module-progress-summary {
  margin: 0 0 6px; font-weight: 700; color: var(--text-secondary); font-size: .9rem;
}
.study-module.practiced { border-color: var(--green, #2F8A52); }
.study-copy {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; margin: 18px 0;
  box-shadow: var(--shadow-sm);
}
.study-copy h2 { margin: 0 0 8px; font-size: 1.05rem; }
.study-copy p { margin: 0; color: var(--text-secondary); }
.study-reading-list { margin: 14px 0; padding-left: 20px; }
.study-reading-list li { margin-bottom: 6px; color: var(--text-secondary); }
.study-reading-list a { font-weight: 600; text-decoration: none; }
/* The same rules the app shows before a lesson — the substance of the page, so
   they get more room than the reference text around them. */
.study-key-rules { margin: 14px 0 0; padding-left: 22px; }
.study-key-rules li { margin-bottom: 10px; color: var(--text); line-height: 1.55; }
.study-key-rules li::marker { font-weight: 700; color: var(--accent); }
/* "Read this in the handbook" — the link is the point of the block, so it gets
   button weight; the title/agency lines under it are the trust signal.
   The [hidden] rules are load-bearing: `display` set here beats the UA
   stylesheet's `[hidden] { display: none }`, so without them the state picker
   stays on screen next to the resolved link and asks a question it already
   has the answer to. */
.handbook-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 14px 0 0; }
.handbook-cta[hidden] { display: none; }
.handbook-cta .btn { align-self: stretch; text-align: center; }
.handbook-title { font-weight: 600; color: var(--text); line-height: 1.4; }
.handbook-meta { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.45; }
.handbook-change {
  border: none; background: none; padding: 0; font: inherit; font-size: 0.85rem;
  color: var(--accent-deep); text-decoration: underline; cursor: pointer;
}
.handbook-picker { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.handbook-picker[hidden] { display: none; }
.handbook-picker label { color: var(--text-secondary); }
.handbook-picker select {
  font: inherit; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--text); max-width: 100%;
}
@media (min-width: 560px) { .handbook-cta .btn { align-self: flex-start; } }
.module-nav { display: flex; justify-content: space-between; gap: 14px; margin: 32px 0; }
.module-nav a { font-weight: 700; text-decoration: none; }
/* Lesson videos. The 93 EDU lessons are 1080x1920 portrait renders, so every
   surface here is 9:16 — a 16:9 tile letterboxed the artwork into a strip. */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin: 20px 0; }
.video-item { min-width: 0; }
.video-facade {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; padding: 0; background: #17130f; cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.video-facade img, .video-facade iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
/* Revealed by app.js when oar2.jpg turns out to be YouTube's 120x90 grey
   placeholder (a video with no custom cover uploaded), which would otherwise
   stretch across the tile as a blur. */
.video-fallback {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2A241D, #17130f); color: rgba(255,253,249,.62);
  font-family: var(--serif); font-size: 15px; letter-spacing: .04em;
}
.video-item.is-placeholder .video-thumb { visibility: hidden; }
.video-item.is-placeholder .video-fallback { display: flex; }
.video-play {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: rgba(42,36,29,.82); color: white; font-size: 20px; padding-left: 3px;
}
.video-duration {
  position: absolute; right: 7px; bottom: 7px; padding: 2px 6px; border-radius: 6px;
  background: rgba(23,19,15,.82); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.video-check {
  position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; display: none;
  align-items: center; justify-content: center; border-radius: var(--r-pill);
  background: var(--green); color: #fff; font-size: 13px; font-weight: 700;
}
.video-item.is-complete .video-check { display: flex; }
.video-title { display: block; margin-top: 8px; font-weight: 700; font-size: 14px; line-height: 1.35; }
.video-module { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
/* Ring on the tile the reader left the feed on, so closing it lands them back
   where they were rather than at the top of the grid. */
.video-item.is-last-watched .video-facade { outline: 2px solid var(--accent); outline-offset: 2px; }
.video-shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.video-shelf-head .video-count { font-size: 13px; color: var(--text-secondary); font-weight: 600; }

/* Library page */
.video-search {
  width: 100%; max-width: 420px; padding: 11px 14px; margin: 4px 0 8px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--text);
}
.video-section { margin: 30px 0; scroll-margin-top: 84px; }
.video-empty { color: var(--text-secondary); }

/* Shorts-style feed. Only the settled page holds an iframe (app.js swaps it in),
   so memory stays flat no matter how long the run is. */
.video-feed {
  position: fixed; inset: 0; z-index: 60; background: #000; overflow-y: auto;
  scroll-snap-type: y mandatory; overscroll-behavior: contain;
}
.video-feed-page {
  position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
}
/* Phone-width column on desktop — a full-bleed 9:16 video on a wide monitor is
   unreadable. Matches how YouTube Shorts itself handles the desktop case. */
.video-feed-stage { position: relative; width: 100%; max-width: min(430px, calc((100dvh - 24px) * 9 / 16)); aspect-ratio: 9 / 16; background: #17130f; }
.video-feed-stage img, .video-feed-stage iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-feed-stage .video-play { pointer-events: none; }
.video-feed-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; pointer-events: none;
  background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff;
}
.video-feed-caption b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .78; }
.video-feed-caption span { font-size: 12px; opacity: .6; }
.video-feed-close {
  position: fixed; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: var(--r-pill); background: rgba(0,0,0,.5); color: #fff; font-size: 17px; cursor: pointer;
}
.video-feed-nav {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 2;
  display: none; flex-direction: column; gap: 10px;
}
.video-feed-nav button {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: rgba(255,255,255,.14); color: #fff; font-size: 16px; cursor: pointer;
}
.video-feed-nav button:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (min-width: 900px) { .video-feed-nav { display: flex; } }
body.feed-open { overflow: hidden; }
@media (max-width: 560px) {
  .study-module { grid-template-columns: 38px 1fr; }
  .study-module .module-meta { grid-column: 2; flex-direction: row; align-items: center; gap: 8px; }
}