@media (max-width:720px){.topbar{display:none}.topbar-inner{gap:8px}}@media (max-width:720px){.topbar{display:none}.topbar-inner{gap:8px}}@media (max-width:720px){.topbar{display:none}.topbar-inner{gap:8px}}@media (max-width:768px){body:has(.home-top) .site-shell{padding-bottom:0}.site-shell{padding-bottom:64px}}label{display:grid;gap:6px;color:#26362d;font-weight:700}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:10px;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none!important;border:1.5px solid transparent;white-space:nowrap;min-height:44px}.btn-primary{background:#15803d;color:#fff!important;border-color:#15803d;box-shadow:0 2px 6px rgba(21,128,61,.25)}@media (max-width:640px){.btn{padding:14px 18px;font-size:.95rem;width:100%;justify-content:center}}.body-main>ul{margin:0 0 18px;padding-left:22px}.body-main>ul li{margin-bottom:8px;line-height:1.6}.body-main>h2+p{margin-top:0}.byline{color:var(--muted);line-height:1.5}.byline{font-size:.83rem;color:var(--muted,#5c6c5f);font-style:italic}h1,h2,h3{letter-spacing:0;line-height:1.08;margin:0}h3{font-size:1.2rem}.section .inner h3{margin-top:28px;margin-bottom:8px;font-size:1.15rem;line-height:1.35;color:#0b1a0f}.section .inner h3+p,.section .inner h3:first-child{margin-top:0}:root{--brand:#15803D;--brand:#15803D;--brand-soft:#4ADE80;--bg:#FFFFFF;--bg-soft:#FAFBFA;--bg-deep:#F2F7F3;--ink:#0B1A0F;--ink-warm:#1A2B1E;--muted:#5C6C5F;--muted-light:#5C6F60;--line:#E5E7EB;--rule:#D1D5DB;--card:#FFFFFF;--brand:#15803D;--brand-strong:#14532D;--brand-bright:#22C55E;--brand:#15803D;--brand:#15803D;--warning:#B45309;--danger:#9f1239;--success:#15803D;--font-display:"Manrope","Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--font-sans:"Be Vietnam Pro","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--accent-teal:#0E5E6F;--accent-teal-strong:#0a4651;--accent-amber:#F5A524;--accent-amber-strong:#d68d0e;--text-cool:#0F172A;--text-cool-muted:#475569;--border-cool:#E2E8F0;--surface-cool:#F1F5F9;--dmvq-green-900:#0f3d21;--dmvq-green-800:#14532d;--dmvq-green-700:#166534;--dmvq-green-600:#16a34a;--dmvq-green-500:#22c55e;--dmvq-green-100:#dcfce7;--dmvq-green-50:#f0fdf4;--dmvq-amber-600:#d97706;--dmvq-amber-50:#fffbeb;--dmvq-red-600:#dc2626;--dmvq-red-50:#fef2f2;--dmvq-blue-700:#1d4ed8;--dmvq-blue-600:#2563eb;--dmvq-blue-500:#3b82f6;--dmvq-blue-50:#eff6ff;--dmvq-ink:#0f172a;--dmvq-slate:#475569;--brand:#15803D;--brand:#15803D;--bg:#fff;--bg-deep:#F2F7F3;--ink:#0B1A0F;--ink-soft:#1A2B1E;--muted:#5C6C5F;--muted-light:#5C6F60;--line:#E5E7EB;--font-display:"Manrope","Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--font-sans:"Be Vietnam Pro","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--brand:#15803D;--brand:#15803D;--brand-soft:#4ADE80;--bg:#FFFFFF;--bg-soft:#FAFBFA;--bg-deep:#F2F7F3;--ink:#0B1A0F;--ink-warm:#1A2B1E;--muted:#5C6C5F;--muted-light:#5C6F60;--line:#E5E7EB;--rule:#D1D5DB;--card:#FFFFFF;--brand:#15803D;--brand-strong:#14532D;--brand-bright:#22C55E;--brand:#15803D;--brand:#15803D;--warning:#B45309;--danger:#9f1239;--success:#15803D;--font-display:"Manrope","Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--font-sans:"Be Vietnam Pro","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--accent-teal:#0E5E6F;--accent-teal-strong:#0a4651;--accent-amber:#F5A524;--accent-amber-strong:#d68d0e;--text-cool:#0F172A;--text-cool-muted:#475569;--border-cool:#E2E8F0;--surface-cool:#F1F5F9}html{color:var(--ink);background:var(--bg);font-family:var(--font-sans);font-feature-settings:"ss01","ss02";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%;color:var(--ink);background:var(--bg);font-family:var(--font-sans);font-feature-settings:"ss01","ss02";letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}a{color:inherit;color:var(--brand);text-decoration:none;color:inherit}.topbar{order:-1;border-bottom:1px solid var(--line);position:sticky;backdrop-filter:blur(10px)}.topbar-inner{display:flex;align-items:center;justify-content:space-between}.brand .brand-mark{flex:none;opacity:1}@media (max-width:480px){.brand .brand-mark{width:auto;height:38px}.brand .brand-text{font-size:1.25rem}}img{max-width:100%;height:auto;display:block}*,::after,::before{box-sizing:border-box}body{font-family:var(--font-sans);color:var(--ink);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0}main{flex:1}.topbar{border-bottom:1px solid var(--line);position:sticky;backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;order:-1;border-bottom:1px solid var(--line);position:sticky;backdrop-filter:blur(10px);background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.topbar-inner{max-width:1200px;padding:14px 24px;display:flex;align-items:center;justify-content:space-between}.topnav{gap:24px;align-items:center}.topnav a{color:var(--ink);font-weight:600;font-size:.95rem;color:#1f2937;text-decoration:none;padding:6px 4px;border-bottom:2px solid transparent}*{box-sizing:border-box}button,input{font:inherit}.site-shell{min-height:100vh;display:flex;flex-direction:column}#main-content{order:0}.topbar-inner{width:min(100% - 32px,1180px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#15803d}.topnav{display:none;align-items:center;gap:22px;font-size:.95rem;font-weight:600}@media (min-width:760px){.topnav{display:inline-flex}}.brand .brand-mark{flex:none;width:44px;height:44px}.brand .brand-text{font-family:var(--font-display, Arial, Helvetica, sans-serif);font-weight:800;font-size:1.65rem;line-height:1;letter-spacing:-.01em;color:#15803d;text-transform:none}@media (max-width:480px){.brand .brand-mark{width:36px;height:36px}.brand .brand-text{font-size:1.25rem}}h1,h2{letter-spacing:0;line-height:1.08;margin:0}h1{font-size:clamp(2.4rem,7vw,4.8rem);max-width:820px}h2{font-size:2rem}input{width:100%;border:1px solid #c8d0c4;border-radius:6px;min-height:44px;padding:10px 12px;background:#fff;color:var(--ink)}@media (max-width:620px){.topbar-inner{width:min(100% - 24px,1180px)}}.brand span{font-family:var(--font-sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:500}.brand-mark{display:inline-flex;align-items:baseline;gap:2px;font-style:normal;letter-spacing:-.02em;filter:grayscale(0%);opacity:.95;white-space:nowrap}@media (max-width:759px){.topbar{display:none}}@media (max-width:720px){.topbar{display:none}.topbar-inner{gap:8px}}@media (max-width:768px){.site-shell{padding-bottom:64px}}.kicker{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:#15803d;font-weight:700}.section{padding:64px 0}.body-main>.kicker{margin:0 0 6px}.body-main>h2{margin:0 0 14px;font-size:clamp(1.5rem,2.2vw,1.85rem);line-height:1.2;letter-spacing:-.01em}.body-main>p{margin:0 0 14px;line-height:1.65}.body-main>.kicker:first-child{margin-top:0}.inner{width:min(100% - 32px,1180px);margin:0 auto}.skip-to-content{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}.lede{font-size:1.05rem;color:var(--ink-warm,#1a2b1e);max-width:65ch;line-height:1.6}.page-hero{padding:56px 0 40px;background:#fff}.page-hero+.section{padding-top:40px}.page-hero-row{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}@media (min-width:880px){.page-hero-row{grid-template-columns:minmax(0,1fr) 360px;gap:16px}}.page-hero-text{min-width:0}.page-hero-cta{background:#f2f7f3;border:1px solid #d5e5d8;border-radius:14px;padding:18px 20px}.page-hero-cta-phone{display:block;font-size:1.55rem;font-weight:800;color:#15803d;text-decoration:none;margin:6px 0 8px;letter-spacing:-.01em}.page-hero-cta-meta{font-size:.86rem;color:#3a4f41;margin:0 0 14px;line-height:1.5}.page-hero-cta-btn{display:inline-block;padding:10px 16px;background:#15803d;color:#fff!important;font-weight:700;border-radius:999px;text-decoration:none;font-size:.92rem}.page-hero-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px;margin:24px 0 0;padding:18px 0 0;border-top:1px solid #e5e7eb}@media (min-width:720px){.page-hero-meta{grid-template-columns:repeat(4,minmax(0,1fr))}}.page-hero-meta-item{margin:0}.page-hero-meta-item dt{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#15803d;font-weight:700;margin:0 0 4px}.page-hero-meta-item dd{margin:0;font-size:.95rem;font-weight:600;color:#1a2b1e}.page-hero-inner{max-width:1180px}.page-hero-kicker{margin-top:12px}.page-hero-title{margin-top:6px;font-size:clamp(1.85rem,3.6vw,2.6rem);line-height:1.15;max-width:28ch;letter-spacing:-.015em}.page-hero-lede{margin-top:14px;margin-bottom:0;max-width:58ch;font-size:1.02rem;line-height:1.55;color:#3a4f41}.body-main{min-width:0;max-width:760px}.aside-kicker{font-size:1.0625rem;color:#050505;font-weight:700;letter-spacing:-.005em;margin:0 0 10px}@media (max-width:759px){body{padding-bottom:80px}}.breadcrumb{font-size:.85rem;color:var(--muted,#5c6c5f)}.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.breadcrumb li{display:inline-flex;align-items:center;gap:6px}.breadcrumb a{color:var(--muted,#5c6c5f);text-decoration:none}.breadcrumb-sep{color:#cbd5c8}.guide-faq details{border:1px solid var(--line,#e5e7eb);border-radius:10px;padding:14px 18px;margin-bottom:10px;background:#fff}.guide-faq summary{font-weight:700;font-family:var(--font-display, Arial, sans-serif)}.guide-faq p{margin:10px 0 0;color:var(--ink-warm,#1a2b1e)}
:root {
  /* ---------- Primitives ----------
     The only place a colour literal is allowed to live. Everything
     below refers to these; components refer to the semantic layer. */
  --qs-green-900: #0B1A0F;
  --qs-green-800: #14532D;
  --qs-green-700: #166534;
  --qs-green-650: #15803D;  /* brand primary, 4.7:1 on white */
  --qs-green-600: #16A34A;
  --qs-green-500: #22C55E;
  --qs-green-400: #4ADE80;
  --qs-green-100: #DCFCE7;
  --qs-green-50:  #F0FDF4;

  --qs-ink-900:  #0B1A0F;
  --qs-ink-800:  #1A2B1E;
  --qs-ink-700:  #0F172A;   /* cool ink, DMV + partner surfaces */
  --qs-slate-600: #475569;
  --qs-slate-500: #5C6C5F;

  --qs-line-300: #D1D5DB;
  --qs-line-200: #D6E5DC;
  --qs-line-100: #D6E5DC;

  --qs-white:    #FFFFFF;
  --qs-canvas:   #FAFBFA;
  --qs-canvas-deep: #F2F7F3;
  --qs-canvas-cool: #F1F5F9;

  --qs-teal-700: #0E5E6F;
  --qs-teal-800: #0A4651;
  --qs-amber-500: var(--qs-amber-700);
  --qs-amber-600: #D97706;
  --qs-amber-700: #B45309;
  --qs-amber-50:  #FFFBEB;
  --qs-red-600:  #DC2626;
  --qs-red-700:  #9F1239;
  --qs-red-50:   #FEF2F2;
  --qs-blue-700: #1D4ED8;
  --qs-blue-600: #2563EB;
  --qs-blue-500: #3B82F6;
  --qs-blue-50:  #EFF6FF;

  /* ---------- Semantic layer ----------
     What components actually reference. Renamed from the previous
     --indigo / --orange / --accent aliases, which all resolved to the
     same green and described colours the palette no longer contains. */
  --brand:        var(--qs-green-650);
  --brand-strong: var(--qs-green-800);
  --brand-bright: var(--qs-green-500);
  --brand-soft:   var(--qs-green-400);

  --bg:        var(--qs-white);
  --bg-soft:   var(--qs-canvas);
  --bg-deep:   var(--qs-canvas-deep);
  --card:      var(--qs-white);
  --surface-cool: var(--qs-canvas-cool);

  --ink:       var(--qs-ink-900);
  --ink-warm:  var(--qs-ink-800);
  --muted:     var(--qs-slate-500);
  --muted-light: #5C6F60;
  --text-cool: var(--qs-ink-700);
  --text-cool-muted: var(--qs-slate-600);

  --line:         var(--qs-line-200);
  --rule:         var(--qs-line-300);
  --border-cool:  var(--qs-line-100);

  --accent-teal:         var(--qs-teal-700);
  --accent-teal-strong:  var(--qs-teal-800);
  --accent-amber:        var(--qs-amber-500);
  --accent-amber-strong: #D68D0E;

  --warning: var(--qs-amber-700);
  --warning-bg:     #FEF3C7;
  --warning-border: var(--qs-amber-500);
  --warning-text:   #92400E;
  --warning-text-strong: #7C2D12;
  --success-bg:     var(--qs-green-50);
  --success-border: var(--brand-bright);
  --danger-text:    #B91C1C;
  --text-subtle:    #6B7280;
  --qs-amber-ring:  #FFD84D;
  /* 6% white composited over --qs-ink-deep, stated opaquely so contrast tools
     resolve it directly instead of walking past a translucent layer. */
  --qs-ink-card:    #191D1C;

  /* Dark surface system, ported from the Vietnamese sister site whose visual
     world the owner chose as the reference. Deep near-black greens, a bright
     green reserved for accent on dark, and a monospace for small label text. */
  --qs-authority:    #073B2A;
  --qs-ink-void:     #07120D;
  --qs-ink-deep:     #0A0F0D;
  --qs-green-neon:   #22E07A;
  --qs-green-mint:   #7DF0B0;
  --qs-on-dark:      #FFFFFF;
  --qs-on-dark-soft: #9FB6AB;
  --qs-on-dark-mute: #7D938A;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --danger:  var(--qs-red-700);
  --success: var(--qs-green-650);

  --font-display: "Manrope", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02";
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body { overflow-x: hidden; }

body {
  margin: 0;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#main-content {
  order: 0;
}

.topbar {
  order: -1;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.footer {
  order: 1;
}

.topbar-inner,
.section-inner {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
}

.topbar-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #15803D;
}

.topnav {
  display: none;
  align-items: center;
  gap: 22px;
  font-size: 0.95rem;
  font-weight: 600;
}
.topnav a {
  color: #1f2937;
  text-decoration: none;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
}
.topnav a:hover {
  color: #15803D;
  border-bottom-color: #15803D;
}
.topnav-muted { opacity: .7; }
@media (min-width: 760px) {
  .topnav { display: inline-flex; }
}

.brand .brand-mark {
  flex: none;
  width: auto;
  height: 46px;
  opacity: 1;
}

.brand .brand-text {
  font-family: var(--font-display, Arial, Helvetica, sans-serif);
  font-weight: 800;
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #15803D;
  text-transform: none;
}

@media (max-width: 480px) {
  .brand .brand-mark { width: auto; height: 38px; }
  .brand .brand-text { font-size: 1.2rem; }
}

.nav {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 0.88rem;
}

.hero {
  padding: 54px 0 36px;
}

.eyebrow {
  color: var(--brand);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

h1,
h2,
h3 {
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

h1 {
  font-size: clamp(2.4rem, 7vw, 4.8rem);
  max-width: 820px;
}

h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
  /* 20ch forced almost every heading onto two or three lines, which added
     40-60px per section for nothing. 32ch still prevents a heading running the
     full container width on wide screens. */
  max-width: 32ch;
}

h3 {
  /* 1.22rem rendered 18.4px against 16px body, a 1.15x step that is not a
     hierarchy level. Every card grid read as one flat texture because a card
     title was barely larger than its own body copy. */
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.chip {
  background: #e8eee5;
  color: #26362d;
  border: 1px solid #cfdbd0;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 0.88rem;
}

.section {
  padding: 44px 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.card,
.info-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.card p,
.info-panel p {
  color: var(--muted);
  line-height: 1.62;
}

/* Quote-prep checklist card (QuotePrepCard), used across the CA city pages */

/* Carrier detail: section content as cards with right-sized headings. */

/* Checklist: a scannable ✓ list for benefit/coverage bullets. */
.check-list {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.check-list li {
  position: relative;
  padding-left: 26px;
  line-height: 1.55;
}
.check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--brand);
  font-weight: 800;
}

/* Stat tiles: surface key figures (prices, limits) as cards. */

/* Metal-tier cards (health plan tiers) */

/* Guide step cards: turns a procedural <ol className="guide-steps"> into
   scannable numbered cards instead of a plain numbered list. */

label {
  display: grid;
  gap: 6px;
  color: #26362d;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #c8d0c4;
  border-radius: 6px;
  min-height: 44px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

.full {
  grid-column: 1 / -1;
}

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  font-weight: 500;
  color: var(--muted);
}

.checkbox input {
  width: 18px;
  min-height: 18px;
  margin-top: 3px;
}

.form-note {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.status {
  border-radius: 6px;
  padding: 12px;
  font-weight: 700;
}

.status.success {
  background: #dcfce7;
  color: #14532d;
}

.status.error {
  background: #ffe4e6;
  color: var(--danger);
}

.footer {
  background: var(--bg-deep);
  color: var(--ink-warm);
  padding: 56px 0 28px;
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
}
.footer a {
  color: var(--ink-warm);
  text-decoration: none;
  transition: color 0.12s;
}
.footer a:hover { color: var(--brand); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.footer-col h2.footer-col-h,
.footer-col h3 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  margin: 0 0 6px;
}
.footer-col a {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.4;
}
.footer-col a:hover { color: var(--brand); }

.footer-divider {
  height: 1px;
  background: var(--line);
  margin: 36px auto 22px;
  width: min(100% - 32px, 1180px);
}

.footer-fineprint {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-copy {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 8px 0 0;
}

@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }
}
@media (max-width: 720px) {
  .footer { padding: 36px 0 24px; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-divider { margin: 24px auto 18px; }
}

.faq {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
}

.faq summary {
  cursor: pointer;
  font-weight: 800;
}

@media (max-width: 860px) {
  .cards,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .nav {
    display: none;
  }
}

@media (max-width: 620px) {

  .topbar-inner,
  .section-inner {
    width: min(100% - 24px, 1180px);
  }
}

/* === Hero v2, Insurify-class split layout, Vietnamese personal-agent twist === */

/* ============================================================
   v4, Insurify-class · Vietnamese-American family agency
   Saturated indigo hero · orange CTA · floating phone mockup
   ============================================================ */

/* Header, light, white bg with indigo wordmark */
.topbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}
.topbar-inner { min-height: 72px; }
.brand strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
  line-height: 1;
}
.brand span {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 500;
}
.nav a {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-warm);
  transition: color 0.15s;
}
.nav a:hover { color: var(--brand); }

/* === Multiple-item nav bar === */

/* Hide the legacy single-dropdown styles (nav-dropdown / nav-mega) */

/* === Utility bar (above main nav) === */

/* === Mega-menu grids (3-col / 4-col / 2-col) === */

/* Hướng Dẫn 4-col keeps the shared icon-badge pattern compact */

/* Bundle CTA at the foot of the Bảo Hiểm mega menu */

/* Customer self-serve highlight item (Gửi declarations page) */

@media (max-width: 880px) {
  /* Show a single Menu fallback on mobile, TODO: build hamburger version */
}

/* Legacy single-dropdown nav menu (kept for reference) */
@keyframes nav-dd-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Mega menu panel === */

/* Feature column with phone CTA */

/* === Portal-style search hero (Naver architecture, burgundy/gold palette) === */

/* Split hero, left funnel + right quote-panel */

/* Left card, matches the right quote panel; wraps shortcuts + ZIP + trust */

/* Stacked "Top quotes" panel, green frame, matches the search box on left */

/* Bristol West circle B mark */

/* === ZIP + Compare component (Insurify-class) === */

/* Circle shortcuts row, Naver verticals pattern */
/* Tonal variants no longer used; kept as no-ops to avoid CSS regressions elsewhere */

/* Popular searches row */

/* Hide the old qw-hero overrides cleanly on this page */

@media (max-width: 720px) {
  /* 1.35rem shrank the h1 below the section headings beneath it. The clamp
     already handles narrow viewports; this override only fought it. */
}

/* === HERO, white with subtle green hint (legacy QuoteWizard variant, kept for fallback) === */

/* ZIP form row */

/* Trustpilot-style rating + recovery line */

/* RIGHT side, photo of Kevin + floating phone-mockup quote card */

/* The KILLER MOVE, phone-mockup card with example quotes */

/* Carrier strip on white below hero, brand-styled wordmarks */

.brand-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-style: normal;
  letter-spacing: -0.02em;
  filter: grayscale(0%);
  opacity: 0.95;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}
.brand-mark:hover { transform: translateY(-1px); }
.brand-mark sup {
  font-size: 0.55em;
  margin-left: 2px;
  font-weight: 500;
  vertical-align: super;
  line-height: 0;
}

/* Removed 2026-08-20: .brand-mercury reproduced Mercury's logo treatment for a
   carrier QualitySpace holds no appointment with. Carrier brand styling here is
   limited to carriers we are actually appointed to represent. */

/* Progressive, italic blue (darker for AA contrast on white) */

/* Removed 2026-08-23: .brand-travelers reproduced Travelers' logo treatment
   (brand red plus an umbrella mark) for a carrier QualitySpace holds no
   appointment with. Identical defect to .brand-mercury above, and left behind
   when that one was removed. Reproducing an unappointed carrier's brand is what
   "apparent code sharing based on website content" looks like from the outside.
   Carrier brand styling here is limited to carriers we actually represent. */

/* Allstate, italic blue, hands gesture */

/* Kemper, bold blue */

/* Safeco, bold red sans (Liberty Mutual subsidiary) */

/* Aspire General, navy + red, CA non-standard specialist */

/* === SECTIONS BELOW HERO === */

/* 3-step cards */
@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }
  .footer-col h3 { font-size: 0.88rem !important; margin-bottom: 6px !important; }
  .footer-col a { font-size: 0.78rem !important; padding: 4px 0 !important; }
}

/* Why us, 4-column reasons grid */

/* Carriers row */

/* State navigation panel */

/* FAQ accordion-style stack */

/* Closing CTA on dark */

/* === SmartFinancial-style sections === */

/* Slim carrier strip directly below hero */
@keyframes marquee-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Recent Guides, tabbed grid */

/* Learn More + FAQ split */

/* === Naver-style icon bar (between header and hero) === */

/* Mobile drawer (hamburger + slide-out nav) — visually mirrors the desktop
   topbar: white background, green heart-checkmark logo + "QualitySpace" text,
   matching colors and sizing. The desktop .topbar is hidden on mobile so the
   icon-bar is the sole header. */

/* Desktop keeps the rich .topbar (utility bar + .topnav). Hide .icon-bar.
   Mobile hides .topbar entirely so the icon-bar is the single header. */
@media (max-width: 759px) {
  .topbar { display: none; }
}

/* === COMPACT, reduce vertical padding so users see more above-fold === */
.footer { padding: 32px 0 20px !important; }

/* === MOBILE, horizontal-scroll strips === */
@media (max-width: 720px) {
  /* Vertical stacks on mobile (no horizontal carousels) */

  /* Mobile shortcuts: 2-column pill grid with full labels */

  /* Carriers strip stays horizontal (intentional brand marquee) */

  /* Tighten section inner padding on mobile so strips align with edges */

  /* Header/icon-bar mobile tweaks */
  .topbar { display: none; }
  .topbar-inner { gap: 8px; }

  /* Hero search bar slimmer on mobile */

  /* Section heading sizes */

  /* FAQ accordion stays vertical, too dense for horizontal */

  /* Footer 2-column on mobile to keep height down */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 18px !important;
  }
}

/* Slightly bigger viewport, keep some grids 2-up but allow scroll for long ones */

/* === Bottom repeat ZIP CTA (SmartFinancial pattern) === */

/* === Mobile drawer === */

/* Hide drawer trigger (icon-bar hamburger) on desktop, keep main nav */

/* Visually hide H1 for SEO without affecting layout. */
.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;
}


/* Interactive broker tools */

/* Declarations decoder page */

/* Sticky mobile call bar */
@media (max-width: 768px) {
  body:has(.home-top) .site-shell {
    padding-bottom: 0;
  }
  /* keep page content above the bar */
  .site-shell {
    padding-bottom: 64px;
  }
}

/* Breadcrumbs */

/* Light text inside dark heroes (violation-hero / state-hero / guide-hero / product-hero) */

/* Hero variant for v3-section pages · green gradient to match product/state/violation heroes */

/* Article share bar (NYT/BBC-style horizontal row) */

/* White Chia sẻ label inside dark hero (top variant) */

/* Westminster flagship banner: desktop 2-column, mobile stack */

/* Westminster sticky CTA: mobile only */
@media (max-width: 767px) {
  body:has(.wm-sticky-cta) {
    padding-bottom: 84px;
  }
}

/* ===== qualityspace additions (Phase 0) ===== */

.byline {
  font-size: 0.83rem;
  color: var(--muted, #5C6C5F);
  font-style: italic;
}

/* Eyebrow labels above headings are gone. They restate what the heading says
   at a smaller size, and they made every section open identically, which is the
   main reason the page read as one long template. The heading now carries the
   section on its own. Kept in the DOM for the surfaces that use .kicker text as
   a real standalone label rather than a heading preamble; those set
   .kicker--label explicitly. */
.kicker { display: none; }

/* ===== qualityspace section utilities (Phase 0) ===== */

.section {
  padding: 64px 0;
}

/* Article body rhythm: tighten the kicker → h2 → prose vertical rhythm so
   the section doesn't feel like floating chunks. Targets only article bodies,
   not nav/hero/aside. */
.body-main > .kicker { margin: 0 0 6px; }
.body-main > h2 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.body-main > h2 + p,
.body-main > h2 + ul,
.body-main > h2 + ol { margin-top: 0; }
.body-main > p { margin: 0 0 14px; line-height: 1.65; }
.body-main > p:last-child { margin-bottom: 0; }
.body-main > ul,
.body-main > ol { margin: 0 0 18px; padding-left: 22px; }
.body-main > ul li,
.body-main > ol li { margin-bottom: 8px; line-height: 1.6; }
.body-main > .kicker:not(:first-child) { margin-top: 36px; }
.body-main > .kicker:first-child { margin-top: 0; }

.inner {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
}

.dmvq-section { padding: 44px 0; }
.dmvq-container { width: min(100% - 32px, 1180px); margin: 0 auto; }
.dmvq-lede { max-width: 72ch; margin: 0 0 1.25rem; color: var(--muted, #4b5563); }
.dmvq-howto { margin: 1rem 0 0 1.25rem; display: grid; gap: .5rem; }

/* a11y skip-link: hidden offscreen until keyboard-focused */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-to-content:focus {
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  z-index: 9999;
  background: #fff;
  color: #15803D;
  border: 2px solid #15803D;
  border-radius: 6px;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
}

.lede {
  font-size: 1.05rem;
  color: var(--ink-warm, #1A2B1E);
  max-width: 65ch;
  line-height: 1.6;
}

a.card,
a.card * {
  text-decoration: none !important;
}
a.card {
  color: inherit;
  display: block;
  transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
a.card:hover {
  border-color: #15803D;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.08);
}
a.card h3, a.card strong {
  color: #15803D;
}

/* PageHero — center title + lede with sensible max-widths so the hero
   doesn't look like it's missing a right column */
.page-hero {
  padding: 56px 0 40px;
  background: #fff;
}
/* Dark-green hero band (baohiemxe pattern) for interior pages */
.page-hero--dark {
  background: linear-gradient(180deg, #0F4F2C 0%, #0d4427 100%);
  color: #f6fbf6;
  position: relative;
  overflow: hidden;
}
.page-hero--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(74, 222, 128, 0.18), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(74, 222, 128, 0.12), transparent 60%);
  pointer-events: none;
}
.page-hero--dark .inner { position: relative; z-index: 1; }
.page-hero--dark .breadcrumb,
.page-hero--dark .breadcrumb a { color: rgba(246, 251, 246, 0.72); }
.page-hero--dark .breadcrumb a:hover { color: #ffffff; }
.page-hero--dark .breadcrumb-sep { color: rgba(246, 251, 246, 0.4); }
.page-hero--dark .page-hero-kicker { color: #b9f5cf; }
.page-hero--dark .page-hero-title { color: #ffffff; }
.page-hero--dark .page-hero-lede { color: rgba(246, 251, 246, 0.88); }
.page-hero--dark .page-hero-meta { border-top-color: rgba(246, 251, 246, 0.25); }
.page-hero--dark .page-hero-meta-item dt { color: #b9f5cf; }
.page-hero--dark .page-hero-meta-item dd { color: #ffffff; }

.dmvq-hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.dmvq-hero-sunburst {
  position: absolute;
  top: 18px;
}

.dmvq-hero-sunburst--left {
  left: 24px;
}

.dmvq-hero-sunburst--right {
  right: 24px;
  top: 40px;
}

.dmvq-hero-skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 90px;
}

.dmvq-hero-car {
  position: absolute;
  bottom: 22px;
  left: 8%;
  width: 64px;
  height: 32px;
}

/* Eat the .section padding-top on the first section after a hero so it
   doesn't double-up vertical whitespace */
.page-hero + .section { padding-top: 40px; }

/* Hero 2-column: text left, mini CTA right */
.page-hero-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 880px) {
  .page-hero-row { grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; }
}
.page-hero-text { min-width: 0; }
.page-hero-cta {
  background: #F2F7F3;
  border: 1px solid #D5E5D8;
  border-radius: 14px;
  padding: 18px 20px;
}
.page-hero-cta-phone {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  color: #15803D;
  text-decoration: none;
  margin: 6px 0 8px;
  letter-spacing: -0.01em;
}
.page-hero-cta-phone:hover { text-decoration: underline; }
.page-hero-cta-meta {
  font-size: 0.88rem;
  color: #3a4f41;
  margin: 0 0 14px;
  line-height: 1.5;
}
.page-hero-cta-btn {
  display: inline-block;
  padding: 10px 16px;
  background: #15803D;
  color: #fff !important;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.88rem;
}
.page-hero-cta-btn:hover { background: #0f6630; }

/* Meta strip at the bottom of the hero — 3-4 column dt/dd row */
.page-hero-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #D6E5DC;
}
@media (min-width: 720px) {
  .page-hero-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.page-hero-meta-item { margin: 0; }
.page-hero-meta-item dt {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #15803D;
  font-weight: 700;
  margin: 0 0 4px;
}
.page-hero-meta-item dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1A2B1E;
}
.page-hero-inner { max-width: 1180px; }
.page-hero-kicker { margin-top: 12px; }
.page-hero-title {
  margin-top: 6px;
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  max-width: 28ch;
  letter-spacing: -0.015em;
}
.page-hero-lede {
  margin-top: 14px;
  margin-bottom: 0;
  max-width: 58ch;
  font-size: 1.02rem;
  line-height: 1.55;
  color: #3a4f41;
}

/* Two-column PageHero: title/lede left, trust card right */
/* (legacy .page-hero-cta pill-button removed — the new .page-hero-cta is the
   hero right-column card; pill buttons live under .page-hero-cta-btn) */

/* Centered narrow content for prose-heavy section bodies */

/* Narrow prose inners (inline style maxWidth: 760 etc) should left-align
   with the page hero left edge, not center within the viewport.
   Otherwise the body content visually drifts right of the hero h1. */
.section .inner[style*="max-width"],
.section .inner[style*="maxWidth"] {
  margin-left: max(16px, calc((100vw - 1180px) / 2));
  margin-right: auto;
}

/* Body-with-aside: prose left, sticky aside right (baohiemxe pattern) */
.body-main { min-width: 0; max-width: 760px; }
/* (CTA kicker color is set by the rule below — white on green) */
.aside-kicker {
  font-size: 1.0625rem;
  color: #050505;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
}

/* YMYL byline: self-bounded to standard content width so it never
   hugs the page edge when rendered outside a .section .inner */
.ymyl-byline-wrap {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
  padding: 24px 0;
}
.ymyl-byline { margin: 0; }

/* Guide list (used on /guides) - styled cards in a vertical stack */

.card {
  background: #fff;
  border: 1px solid var(--line, #D6E5DC);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

/* Index card grids (e.g. /compare, /tools): title + one-line description +
   arrow, replacing flat hairline link rows. Reuses a.card hover styling. */

/* Q&A spacing fix — H3 questions get breathing room from previous answer */
.section .inner h3 {
  margin-top: 28px;
  margin-bottom: 8px;
  font-size: 1.2rem;
  line-height: 1.35;
  color: #0B1A0F;
}
.section .inner h3:first-child { margin-top: 0; }
.section .inner h3 + p {
  margin-top: 0;
}

/* Mobile sticky call CTA */
@media (max-width: 759px) {
  /* Add space at bottom of pages so content isn't hidden under sticky CTA */
  body { padding-bottom: 80px; }
}

/* NAP map card */

.footer {
  background: #0B1A0F;
  color: #cbd5c8;
  padding: 56px 24px 32px;
  font-size: 0.95rem;
}

/* Dark-footer overrides — high contrast on bg-deep */
.footer { background: #0F1B14; color: #ffffff; padding: 64px 0 32px; }
.footer a { color: #ffffff; text-decoration: none; }
.footer a:hover { color: #4ade80; }
.footer .footer-col a { color: #e6ede7 !important; font-size: 0.88rem !important; }
.footer .footer-col a:hover { color: #4ade80 !important; }
.footer .footer-col h2,
.footer .footer-col h3 {
  color: #4ade80 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.16em !important;
  opacity: 1 !important;
}
.footer .footer-divider {
  background: rgba(255,255,255,0.14);
  margin: 40px auto;
  max-width: 1180px;
}
.footer .footer-copy { color: #9bb0a0 !important; font-size: 0.78rem; line-height: 1.55; }
.footer-grid {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .dmvq-footer .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.footer-fineprint {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
  padding: 24px 0 0;
}
.footer .footer-divider {
  width: min(100% - 32px, 1180px);
  margin: 40px auto;
}

@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
}

/* Breadcrumb */
.breadcrumb { font-size: 0.88rem; color: var(--muted, #5C6C5F); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb a { color: var(--muted, #5C6C5F); text-decoration: none; }
.breadcrumb a:hover { color: #15803D; text-decoration: underline; }
.breadcrumb-sep { color: #CBD5C8; }

/* Guide FAQ accordion */
.guide-faq details { border: 1px solid var(--line, #D6E5DC); border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; background: #fff; }
.guide-faq summary { cursor: pointer; font-weight: 700; font-family: var(--font-display, Arial, sans-serif); }
.guide-faq details[open] summary { color: #15803D; }
.guide-faq p { margin: 10px 0 0; color: var(--ink-warm, #1A2B1E); }

/* Senior guide comparison tables remain readable on small screens. */

/* Phase 1.1 ContactForm */

/* Glossary list */

/* Hero office photo. CSS background allows graceful degradation when /office.jpg
   is missing (renders as a styled gradient with the address chip). Drop the real
   file in /public to upgrade the visual. */

/* Why Choose 6-up grid. Conversion-focused, scannable. */
.why-choose-section { padding: 56px 0; }
.why-choose-head { text-align: center; margin-bottom: 32px; }
.why-choose-head .kicker { color: #15803D; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.88rem; }
.why-choose-head h2 { margin: 6px 0 0; font-size: clamp(1.5rem, 3vw, 2rem); color: #0F1B14; }
.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.why-choose-card {
  background: #ffffff;
  border: 1.5px solid #D6E5DC;
  border-radius: 14px;
  padding: 24px 22px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.why-choose-card:hover {
  border-color: #15803D;
  box-shadow: 0 8px 24px -8px rgba(21, 128, 61, 0.2);
  transform: translateY(-2px);
}
.why-choose-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--qs-green-50);
  color: var(--brand);
}
.why-choose-title { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; color: #0F1B14; line-height: 1.3; }
.why-choose-body { margin: 0; font-size: 0.88rem; line-height: 1.55; color: #1A2B1E; }
@media (max-width: 900px) {
  .why-choose-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .why-choose-grid { grid-template-columns: 1fr; }
}

/* Compare table: Independent broker vs Captive agent. CDI 2017-7 compliant
   (structural comparison, no specific carrier disparagement). */
/* Left, not centred. The sister site aligns every heading to its own content
   at delta 0; here two sections centred their heading inside a narrower box, so
   the h2 sat 210-230px right of the grid it belonged to and read as unattached
   to anything. */

/* CTA buttons. Used in service page footers, guide page footers, contact CTAs */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
  white-space: nowrap;
  min-height: 44px;
}
.btn + .btn { margin-left: 10px; }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid rgba(21, 128, 61, 0.4); outline-offset: 2px; }

.btn-primary {
  background: #15803D;
  color: #ffffff !important;
  border-color: #15803D;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.25);
}
.btn-primary:hover {
  background: #0F4F2C;
  border-color: #0F4F2C;
  box-shadow: 0 6px 18px -4px rgba(21, 128, 61, 0.45);
}

.btn-ghost {
  background: #ffffff;
  color: #15803D !important;
  border-color: #15803D;
}
.btn-ghost:hover {
  background: #F2F7F3;
  color: #0F4F2C !important;
  border-color: #0F4F2C;
}

@media (max-width: 640px) {
  .btn { padding: 14px 18px; font-size: 0.95rem; width: 100%; justify-content: center; }
  .btn + .btn { margin-left: 0; margin-top: 10px; }
}

/* ============================================================
   Reviews / social proof (homepage Reviews.tsx + /reviews)
   Real 5.0-star Google reviews from lib/reviews-data.ts.
   ============================================================ */

/* Hero rating badge (above-the-fold social proof) */

/* ============================================================
   Trust: reusable RatingBadge, TrustStrip, reviewer photos
   ============================================================ */
/* Pill rating badge (RatingBadge.tsx, variant="pill") */

/* Compact rating (header utility bar) */

/* Compact trust strip (TrustStrip.tsx) */
.trust-strip {
  background: #f8fafc;
  border-top: 1px solid #D6E5DC;
  border-bottom: 1px solid #D6E5DC;
}
.trust-strip-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 0;
}
.trust-strip-item {
  position: relative;
  padding: 2px 18px;
  font-size: 0.88rem;
  color: #334155;
  text-decoration: none;
  white-space: nowrap;
}
.trust-strip-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: #d8e0ea;
}
a.trust-strip-item:hover { color: #15803D; }
.trust-strip-rating { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.trust-strip-rating strong { color: #0f172a; }
.trust-strip-stars { color: var(--qs-amber-700); letter-spacing: 1px; font-size: 0.88rem; }
.trust-strip-verify { color: #15803D; font-weight: 600; }

/* Reviewer profile photos on review-card avatars */

/* ============================================================
   Quote funnel (/quote) + quote CTAs
   ============================================================ */
/* Quote page: let the funnel fill the full main column (left-aligned, matching
   the hero) so it uses the available width instead of leaving dead space. */

/* Hero "Get a free quote" CTA */

/* Mobile drawer quote CTA variant (primary green) */

/* Mobile: lead with headline + shortcuts so the LCP is text (fast), office photo below the fold */
/* The photo used to be the left column's first child, pushing the h1 to 535px
   and the primary CTA to 1043px on a 900px viewport, so the fold carried no
   action at all. It now follows the headline and CTAs at every width; mobile
   already did this, desktop did not. */


/* Mobile: comparison table fits the phone instead of clipping the 'theirs' column */

/* Legal pages: cohesive nav + contact/license/operator aside */

/* === DMV practice quiz (ported from baohiemxe dmv-quiz.css) === */
/* DMV practice quiz — premium free-forever face of the brand.
   Original design system; layout ideas (icon feature rows, card grids,
   gradient CTAs, trust-badge blocks) drawn from general UI conventions
   observed across the market, restyled entirely in our own green identity. */

:root {
  /* DMV widget suite keeps its own namespace, but every value now
     resolves to a shared primitive rather than a parallel palette. */
  --dmvq-green-900: #0F3D21;
  --dmvq-green-800: var(--qs-green-800);
  --dmvq-green-700: var(--qs-green-700);
  --dmvq-green-600: var(--qs-green-600);
  --dmvq-green-500: var(--qs-green-500);
  --dmvq-green-100: var(--qs-green-100);
  --dmvq-green-50:  var(--qs-green-50);
  --dmvq-amber-600: var(--qs-amber-600);
  --dmvq-amber-50:  var(--qs-amber-50);
  --dmvq-red-600:   var(--qs-red-600);
  --dmvq-red-50:    var(--qs-red-50);
  --dmvq-blue-700:  var(--qs-blue-700);
  --dmvq-blue-600:  var(--qs-blue-600);
  --dmvq-blue-500:  var(--qs-blue-500);
  --dmvq-blue-50:   var(--qs-blue-50);
  --dmvq-ink:       var(--qs-ink-700);
  --dmvq-slate:     var(--qs-slate-600);
}

.dmvq {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background:
    radial-gradient(circle, rgba(22, 163, 74, 0.07) 1.5px, transparent 1.5px) 0 0/22px 22px,
    #ffffff;
  border: 1px solid #e6ece8;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 24px 60px -20px rgba(15, 61, 33, 0.22);
  overflow: hidden;
}

.dmvq-title,
.dmvq-mode-title,
.dmvq-question {
  font-family: var(--font-dmvq-display), "Be Vietnam Pro", Arial, sans-serif;
}

.dmvq::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--dmvq-green-600), var(--dmvq-green-500), var(--dmvq-green-600));
  background-size: 200% 100%;
  animation: dmvq-shimmer 4s linear infinite;
}

@keyframes dmvq-shimmer {
  to {
    background-position: -200% 0;
  }
}

.dmvq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dmvq-green-700);
  background: var(--dmvq-green-50);
  border: 1px solid var(--dmvq-green-100);
  border-radius: 999px;
}

.dmvq-progress {
  position: relative;
  height: 10px;
  background: #eef2f0;
  border-radius: 999px;
  overflow: hidden;
  margin: 14px 0 24px;
}

.dmvq-progress-fill {
  position: relative;
  height: 100%;
  background: linear-gradient(90deg, var(--dmvq-green-600), var(--dmvq-green-500));
  border-radius: 999px;
  width: 100%;
  clip-path: inset(0 calc(100% - var(--dmvq-pct, 0%)) 0 0);
  transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.dmvq-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -14px 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dmvq-green-700);
  font-variant-numeric: tabular-nums;
}

.dmvq-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--dmvq-green-50);
  border: 1px solid var(--dmvq-green-100);
  border-radius: 12px;
}

.dmvq-resume p {
  margin: 0;
  flex: 1 1 auto;
  min-width: 200px;
  font-size: 0.88rem;
}

.dmvq-start-cta {
  padding-top: 18px;
  padding-bottom: 18px;
}

.dmvq-start-cta-link {
  font-size: 1.05rem;
}

.dmvq-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: dmvq-progress-shine 1.8s ease-in-out infinite;
}

@keyframes dmvq-progress-shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.dmvq-question {
  display: block;
  margin: 0 0 20px;
  font-size: clamp(20px, 2.8vw, 25px);
  font-weight: 800;
  line-height: 1.35;
  color: var(--dmvq-ink);
  letter-spacing: -0.01em;
}

.dmvq-question-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 20px;
}

.dmvq-question-row .dmvq-question {
  margin: 0;
  flex: 1 1 auto;
}

.dmvq-audio-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 2px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(120deg, #22e07a, #7df0b0);
  color: #0f3d21;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(34, 224, 122, 0.55);
  transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.dmvq-audio-icon:hover {
  filter: brightness(0.94);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(34, 224, 122, 0.65);
}

.dmvq-audio-icon:active {
  transform: translateY(0);
}

.dmvq-choices {
  display: grid;
  gap: 11px;
}

.dmvq-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 15px 18px;
  font-size: 16px;
  line-height: 1.45;
  color: #1e293b;
  background: #fafcfb;
  border: 1.5px solid #dde5e0;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.dmvq-choice:hover:not(:disabled) {
  border-color: var(--dmvq-green-600);
  background: var(--dmvq-green-50);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(22, 101, 52, 0.25);
}

.dmvq-choice:active:not(:disabled) {
  transform: translateY(0);
}

.dmvq-choice:disabled {
  cursor: default;
}

.dmvq-letter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #e8efe9;
  color: var(--dmvq-green-700);
  font-weight: 800;
  font-size: 14px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dmvq-choice--correct {
  border-color: var(--dmvq-green-600);
  background: var(--dmvq-green-50);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.dmvq-choice--correct .dmvq-letter {
  /* Darker green keeps the white letter above 4.5:1. */
  background: var(--dmvq-green-700);
  color: #fff;
  transform: scale(1.08);
}

.dmvq-choice--wrong {
  border-color: var(--dmvq-red-600);
  background: var(--dmvq-red-50);
}

.dmvq-choice--wrong .dmvq-letter {
  background: var(--dmvq-red-600);
  color: #fff;
}

.dmvq-choice--dim {
  opacity: 0.5;
}

.dmvq-choice--picked {
  border-color: var(--dmvq-green-700);
  background: var(--dmvq-green-50);
}

.dmvq-btn--audio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e6fbef;
  color: #0c7a3d;
  border: 1.5px solid #9ce8bd;
  padding: 10px 20px;
  font-size: 14px;
}

.dmvq-btn--audio:hover {
  background: #d3f7e2;
  border-color: #22e07a;
}

.dmvq-explain {
  position: relative;
  margin: 18px 0 0;
  padding: 15px 18px;
  border-radius: 14px;
  background: var(--dmvq-green-50);
  border: 1px solid var(--dmvq-green-100);
  color: #26313f;
  font-size: 15px;
  line-height: 1.6;
  animation: dmvq-rise 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dmvq-explain--wrong {
  background: var(--dmvq-red-50);
  border-left-color: var(--dmvq-red-600);
}

.dmvq-explain strong {
  color: var(--dmvq-ink);
}

@keyframes dmvq-rise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dmvq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* Mobile question shell: pin the answered-question actions (Next / Read
   explanation) to the thumb zone so the primary action is always reachable
   without scrolling past a long explanation. Fixed, not sticky, because the
   .dmvq card uses overflow:hidden which would trap a sticky child. This block
   only renders in practice mode after an answer is picked; exam mode
   auto-advances and never shows it. .dmvq--answered reserves matching bottom
   space so the bar never hides the tail of the explanation. */
@media (max-width: 720px) {
  .dmvq-actions--sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    margin: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid #e6ece8;
    box-shadow: 0 -6px 22px -10px rgba(15, 61, 33, 0.22);
    flex-wrap: nowrap;
  }
  .dmvq-actions--sticky .dmvq-btn {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .dmvq-actions--sticky .dmvq-btn--primary {
    flex: 1 1 auto;
    text-align: center;
  }
  .dmvq-actions--sticky .dmvq-btn--audio {
    flex: 0 0 auto;
  }
  .dmvq.dmvq--answered {
    padding-bottom: 84px;
  }
}

.dmvq-btn {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.dmvq-btn--primary {
  background: linear-gradient(135deg, var(--dmvq-green-600), var(--dmvq-green-800));
  color: #ffffff;
  box-shadow: 0 10px 24px -6px rgba(22, 101, 52, 0.45);
}

.dmvq-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -6px rgba(22, 101, 52, 0.5);
}

.dmvq-btn--primary:active {
  transform: translateY(0);
}

.dmvq-btn--ghost {
  background: #ffffff;
  color: var(--dmvq-green-700);
  border: 1.5px solid #bfd8c7;
}

.dmvq-btn--ghost:hover {
  background: var(--dmvq-green-50);
  border-color: var(--dmvq-green-600);
  transform: translateY(-1px);
}

/* Start + result screens */
.dmvq-title {
  display: block;
  margin: 4px 0 16px;
  font-size: clamp(21px, 3.2vw, 28px);
  font-weight: 900;
  color: var(--dmvq-ink);
  line-height: 1.28;
  letter-spacing: -0.015em;
}

/* Mode-selector card grid: replaces a plain stacked button list with an
   icon + title + subtitle card grid (a common pattern across test-prep
   sites), styled entirely in our own palette. */
.dmvq-modes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}

.dmvq-stage {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(160deg, #ffffff, #fafcfb);
  border: 1.5px solid #e2e8e4;
  border-radius: 18px;
  box-shadow: 0 12px 30px -24px rgba(15, 23, 42, 0.35);
}

.dmvq-stage::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(180deg, rgba(34, 224, 122, 0.45), rgba(125, 240, 176, 0.12));
}

.dmvq-stage-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.dmvq-stage-badge {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(120deg, #22e07a, #7df0b0);
  color: #063d24;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 10px 20px -12px rgba(34, 224, 122, 0.85);
}

.dmvq-stage-copy {
  min-width: 0;
}

.dmvq-stage-title {
  margin: 0;
  color: var(--dmvq-ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
}

.dmvq-stage-description {
  margin: 3px 0 0;
  color: var(--dmvq-slate);
  font-size: 12.5px;
  line-height: 1.45;
}

.dmvq-stage-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  min-width: 0;
}

.dmvq-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  padding: 18px 16px;
  background: #fafcfb;
  border: 1.5px solid #e2e8e4;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.dmvq-mode:hover {
  transform: translateY(-3px);
  border-color: var(--dmvq-green-600);
  background: var(--dmvq-green-50);
  box-shadow: 0 14px 26px -12px rgba(22, 101, 52, 0.35);
}

.dmvq-mode-icon {
  font-size: 26px;
  line-height: 1;
}

.dmvq-mode-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--dmvq-ink);
}

.dmvq-mode-sub {
  font-size: 12.5px;
  color: var(--dmvq-slate);
  line-height: 1.4;
}

.dmvq-mode--primary {
  background: linear-gradient(160deg, var(--dmvq-green-50), #ffffff);
  border-color: var(--dmvq-green-600);
  box-shadow: 0 10px 24px -12px rgba(22, 101, 52, 0.3);
}

.dmvq-mode--primary .dmvq-mode-title {
  color: var(--dmvq-green-800);
}

/* Each mode gets its own accent color so the grid reads as a palette of
   choices instead of five identical cards. */
.dmvq-mode--sky {
  background: linear-gradient(160deg, #eff8ff, #ffffff);
  border-color: #bfe0f7;
}
.dmvq-mode--sky:hover {
  border-color: #38bdf8;
  background: #eff8ff;
}
.dmvq-mode--sky .dmvq-mode-title {
  color: #0369a1;
}

.dmvq-mode--violet {
  background: linear-gradient(160deg, #f6f0ff, #ffffff);
  border-color: #ddd0fb;
}
.dmvq-mode--violet:hover {
  border-color: #a78bfa;
  background: #f6f0ff;
}
.dmvq-mode--violet .dmvq-mode-title {
  color: #6d28d9;
}

.dmvq-mode--amber {
  background: linear-gradient(160deg, #fff8ec, #ffffff);
  border-color: #fde3ad;
}
.dmvq-mode--amber:hover {
  border-color: #f59e0b;
  background: #fff8ec;
}
.dmvq-mode--amber .dmvq-mode-title {
  color: #b45309;
}

.dmvq-mode--rose {
  background: linear-gradient(160deg, #fff1f3, #ffffff);
  border-color: #fbd0d8;
}
.dmvq-mode--rose:hover {
  border-color: #fb7185;
  background: #fff1f3;
}
.dmvq-mode--rose .dmvq-mode-title {
  color: #be123c;
}

.dmvq-mode--ember {
  background: linear-gradient(160deg, #fff2ec, #ffffff);
  border-color: #fbcbb3;
}
.dmvq-mode--ember:hover {
  border-color: #ea580c;
  background: #fff2ec;
}
.dmvq-mode--ember .dmvq-mode-title {
  color: #c2410c;
}

/* Hero mascot band on the start screen. */
.dmvq-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: -6px 0 6px;
}

@keyframes dmvq-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Confetti burst behind a passing score. */
.dmvq-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.dmvq-confetti span {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: dmvq-confetti-fall 2.6s ease-in forwards;
}

@keyframes dmvq-confetti-fall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(220px) rotate(340deg);
    opacity: 0;
  }
}

.dmvq-score {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 12px 0 20px;
  padding: 20px;
  flex-wrap: wrap;
  background: radial-gradient(circle at 15% 20%, var(--dmvq-green-50), transparent 60%);
  border-radius: 18px;
}

.dmvq-ring {
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 14px rgba(22, 101, 52, 0.18));
}

.dmvq-ring text {
  font-weight: 900;
  font-size: 26px;
  fill: var(--dmvq-ink);
}

.dmvq-verdict {
  flex: 1 1 240px;
  font-size: 16px;
  line-height: 1.6;
  color: #26313f;
}

.dmvq-verdict strong {
  color: var(--dmvq-green-700);
}

.dmvq-verdict--fail strong {
  color: var(--dmvq-amber-600);
}

.dmvq-badge {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 34px;
  animation: dmvq-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dmvq-pop {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-15deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.dmvq-next {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.dmvq-next li {
  padding: 13px 15px;
  background: #fafcfb;
  border: 1px solid #e4ebe6;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: #26313f;
}

.dmvq-email {
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--dmvq-green-50), #ffffff);
  border: 1.5px solid #bfd8c7;
}

.dmvq-email label {
  display: block;
  font-weight: 800;
  font-size: 14px;
  color: var(--dmvq-ink);
  margin-bottom: 8px;
}

.dmvq-email input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid #cbd5d1;
  border-radius: 12px;
  font-size: 15px;
  margin-bottom: 10px;
}

.dmvq-email input:focus {
  outline: none;
  border-color: var(--dmvq-green-600);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
}

.dmvq-sign {
  display: flex;
  justify-content: center;
  margin: 4px 0 18px;
  padding: 22px;
  background: linear-gradient(160deg, #f6f8f7, #eef2ef);
  border-radius: 16px;
  border: 1px solid #e6ece8;
}

.dmvq-sign img {
  height: 128px;
  max-width: 100%;
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.12));
}

.dmvq-review {
  margin: 18px 0 0;
  border: 1.5px solid #f3d9a4;
  background: var(--dmvq-amber-50);
  border-radius: 16px;
  padding: 14px 18px;
}

.dmvq-review summary {
  cursor: pointer;
  font-weight: 800;
  color: #92580a;
  font-size: 15px;
}

.dmvq-review ul {
  margin: 12px 0 4px;
  padding-left: 18px;
  display: grid;
  gap: 12px;
}

.dmvq-review li {
  font-size: 14px;
  line-height: 1.6;
  color: #26313f;
}

.dmvq-note {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--dmvq-slate);
}

.dmvq-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  margin: 0 6px 6px 0;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--dmvq-green-100);
  color: var(--dmvq-green-800);
}

@media (max-width: 640px) {
  .dmvq {
    padding: 20px;
    border-radius: 18px;
  }

  .dmvq-stage {
    padding: 14px;
  }

  .dmvq-stage-actions {
    grid-template-columns: 1fr;
  }

  .dmvq-actions .dmvq-btn {
    width: 100%;
    text-align: center;
  }

  .dmvq-score {
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dmvq-progress-fill,
  .dmvq-choice,
  .dmvq-btn,
  .dmvq-mode,
  .dmvq::before,
  .dmvq-progress-fill::after,
  .dmvq-badge,
  .dmvq-confetti span {
    transition: none;
    animation: none;
  }

  .dmvq-confetti {
    display: none;
  }

  .dmvq-explain {
    animation: none;
  }
}

/* Gradient hero band for the DMV quiz landing page (scoped, not global). */

/* Trust strip + stat row + topic tags, inside the dark gradient hero. */

/* Value banner: makes the free-vs-paid differentiator large and unmissable. */
.dmvq-value-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 30px;
  align-items: center;
  margin: 20px 0 0;
  padding: 30px 34px;
  background: linear-gradient(135deg, var(--dmvq-green-700), var(--dmvq-green-600));
  border-radius: 22px;
  color: #ffffff;
  box-shadow: 0 20px 48px -22px rgba(16, 80, 40, 0.6);
}
.dmvq-value-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-right: 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.dmvq-value-was {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 214, 140, 0.9);
}
.dmvq-value-free {
  font-family: var(--font-dmvq-display), "Be Vietnam Pro", sans-serif;
  font-size: 66px;
  font-weight: 800;
  line-height: 1;
  margin: 2px 0;
}
.dmvq-value-free-label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d6f5e2;
}
.dmvq-value-body h2 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.2;
  color: #ffffff;
}
.dmvq-value-body p {
  margin: 0 0 12px;
  color: #e6f5ec;
  font-size: 15px;
  line-height: 1.55;
}
.dmvq-value-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 20px;
}
.dmvq-value-list li {
  position: relative;
  padding-left: 25px;
  color: #f0faf3;
  font-size: 14px;
  line-height: 1.4;
}
.dmvq-value-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #7ff0b0;
  font-weight: 800;
}
.dmvq-value-source {
  display: block;
  margin-top: 12px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 720px) {
  .dmvq-value-banner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 20px;
  }
  .dmvq-value-price {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    padding: 0 0 16px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }
  .dmvq-value-free {
    font-size: 46px;
  }
  .dmvq-value-list {
    grid-template-columns: 1fr;
  }
}

/* Two-column layout during a live quiz: question card + progress sidebar.
   Fixed (not fluid) widths so it doesn't grow arbitrarily on wide screens,
   and stays inside the page's normal content column (no full-bleed) so its
   left edge lines up with the hero text and topic tags above it. */
.dmvq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .dmvq-layout {
    grid-template-columns: 760px 380px;
    justify-content: flex-start;
    align-items: start;
  }
  .dmvq-layout .dmvq {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 40px 44px;
  }
  .dmvq-layout .dmvq-question {
    font-size: clamp(22px, 2.2vw, 30px);
  }
  .dmvq-layout .dmvq-choice {
    padding: 18px 22px;
    font-size: 17px;
  }
}

.dmvq-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 4px;
}

.dmvq-sidebar-head .dmvq-sidebar-title {
  margin: 0;
}

.dmvq-restart-btn {
  appearance: none;
  border: 1.5px solid #dde5e0;
  background: #fafcfb;
  color: var(--dmvq-slate);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dmvq-restart-btn:hover {
  border-color: var(--dmvq-green-600);
  background: var(--dmvq-green-50);
  color: var(--dmvq-green-700);
}

.dmvq-progress-cell--clickable {
  cursor: pointer;
}

.dmvq-progress-cell--clickable:hover {
  transform: scale(1.08);
}

.dmvq-sidebar {
  background: #ffffff;
  border: 1px solid #e6ece8;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 20px 44px -20px rgba(15, 61, 33, 0.18);
  position: sticky;
  top: 16px;
}

.dmvq-sidebar-title {
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 16px;
  color: var(--dmvq-ink);
  font-family: var(--font-dmvq-display), "Be Vietnam Pro", Arial, sans-serif;
}

.dmvq-sidebar-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--dmvq-slate);
}

.dmvq-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 6px;
}

/* Mobile progress header: on phones the right sidebar drops off, so surface a
   compact, horizontally scrollable per-question status strip at the top of the
   card (glanceable score + tap-to-review), and hide the now-redundant sidebar.
   Reuses the same .dmvq-progress-cell markup as the desktop grid. */
.dmvq-progress-mobile {
  display: none;
}
.dmvq-progress-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dmvq-slate);
}
.dmvq-progress-track {
  position: relative;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 5px 2px 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dmvq-progress-track::-webkit-scrollbar {
  display: none;
}
.dmvq-progress-track .dmvq-progress-cell {
  flex: 0 0 auto;
  /* Thumb-size targets on phones (44px minimum). */
  min-width: 44px;
  height: 44px;
}
@media (max-width: 899px) {
  .dmvq-progress-mobile {
    display: block;
    margin: 0 0 18px;
  }
  .dmvq-layout .dmvq-sidebar {
    display: none;
  }
}

.dmvq-progress-cell {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f2;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  border: 1.5px solid transparent;
  cursor: default;
  transition: transform 0.15s ease;
}

.dmvq-progress-cell:disabled {
  opacity: 1;
}

.dmvq-progress-cell--correct {
  background: var(--dmvq-green-100);
  color: var(--dmvq-green-800);
}

.dmvq-progress-cell--wrong {
  background: #fecdd3;
  color: #9f1239;
}

.dmvq-progress-cell--current {
  border-color: var(--dmvq-green-600);
  transform: scale(1.1);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.dmvq-sidebar-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid #eef2f0;
  font-size: 12.5px;
  color: var(--dmvq-slate);
  line-height: 1.5;
}

.dmvq-topic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #ffffff;
  color: var(--dmvq-ink);
}

.dmvq-topic-row strong {
  color: var(--dmvq-green-700);
  white-space: nowrap;
}

.dmvq-topic-miss {
  margin: 18px 0 0;
}

.dmvq-topic-miss-title {
  margin-bottom: 10px;
}

.dmvq-topic-miss-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 12px;
  border: 1px solid var(--dmvq-amber-50);
  border-radius: 8px;
  background: var(--dmvq-amber-50);
  color: var(--dmvq-ink);
  margin-bottom: 6px;
  font-size: 14px;
}

.dmvq-topic-miss-row strong {
  color: var(--dmvq-amber-600);
  white-space: nowrap;
}

.dmvq-static-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.dmvq-static-item { border: 1px solid var(--dmvq-border, #e5e7eb); border-radius: 12px; padding: 1rem 1.25rem; background: #fff; }
.dmvq-static-q { font-weight: 600; margin: 0 0 .5rem; }
.dmvq-static-n { color: var(--dmvq-accent, #1d4ed8); margin-right: .25rem; }
.dmvq-static-choices { margin: 0 0 .5rem 1.25rem; }

.dmvq-sample-grid {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

@media (min-width: 760px) {
  .dmvq-sample-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dmvq-sample {
  padding: 18px;
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #ffffff;
}

.dmvq-sample-topic {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--dmvq-green-700);
}

.dmvq-sample h3 {
  margin: 0 0 12px;
  color: var(--dmvq-ink);
}

.dmvq-sample ol {
  margin: 0 0 12px 20px;
}

.dmvq-sample details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef2f0;
}

.dmvq-sample summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--dmvq-green-700);
}

@media (prefers-reduced-motion: reduce) {
  .dmvq-progress-cell {
    transition: none;
  }
}


.dmvq-topic-tags-light {
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dmvq-cheat-sheet {
  break-inside: avoid;
}

.dmvq-cheat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.dmvq-cheat-header h2 {
  margin-top: 0;
}

.dmvq-print-button {
  appearance: none;
  border: 0;
  border-radius: 8px;
  background: var(--dmvq-green-700);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 11px 16px;
  white-space: nowrap;
}

.dmvq-print-button:hover {
  background: var(--dmvq-green-800);
}

/* Numbers are printed inline (<strong>1.</strong>) so they survive print styling; hide the browser marker. */
.dmvq-print-questions,
.dmvq-print-key-list {
  list-style: none;
  padding-left: 0;
}

.dmvq-print-questions > li {
  margin: 0 0 1rem;
  break-inside: avoid;
}

.dmvq-print-key {
  page-break-before: always;
}

@media print {
  body:has(.dmvq-print-page) .topbar { display: none !important; }
}

.dmvq-source-note {
  color: var(--dmvq-slate);
  font-size: 14px;
}

.dmvq-fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.dmvq-fact-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(160deg, #ffffff, #fafcfb);
  border: 1.5px solid #e2e8e4;
  border-radius: 16px;
  box-shadow: 0 10px 26px -22px rgba(15, 23, 42, 0.35);
}

.dmvq-fact-icon {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(120deg, #22e07a, #7df0b0);
  font-size: 20px;
}

.dmvq-fact-label {
  margin: 0 0 3px;
  color: var(--dmvq-green-700);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.dmvq-fact-value {
  margin: 0;
  color: var(--dmvq-ink);
  font-size: 14px;
  line-height: 1.45;
}

.dmvq-topic-bars {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.dmvq-topic-bar-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: 12px;
}

.dmvq-topic-bar-label {
  font-size: 14px;
  color: var(--dmvq-ink);
  font-weight: 700;
}

.dmvq-topic-bar-track {
  height: 10px;
  border-radius: 999px;
  background: #eef2f0;
  overflow: hidden;
}

.dmvq-topic-bar-fill {
  height: 100%;
  border-radius: 999px;
}

.dmvq-topic-bar-fill--primary { background: linear-gradient(90deg, #22e07a, #7df0b0); }
.dmvq-topic-bar-fill--sky { background: linear-gradient(90deg, #38bdf8, #93d9fb); }
.dmvq-topic-bar-fill--violet { background: linear-gradient(90deg, #a78bfa, #d4c4fc); }
.dmvq-topic-bar-fill--amber { background: linear-gradient(90deg, #f59e0b, #fbcd7e); }
.dmvq-topic-bar-fill--rose { background: linear-gradient(90deg, #fb7185, #fcb4bf); }

.dmvq-topic-bar-count {
  color: var(--dmvq-green-700);
  font-size: 12.5px;
  white-space: nowrap;
}

.dmvq-cta-band {
  background: linear-gradient(160deg, var(--dmvq-green-50), #ffffff);
  border-radius: 20px;
  padding: 8px 0 28px;
}

.dmvq-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.dmvq-link-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(160deg, #ffffff, #fafcfb);
  border: 1.5px solid #e2e8e4;
  border-radius: 16px;
  box-shadow: 0 10px 26px -22px rgba(15, 23, 42, 0.35);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dmvq-link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -20px rgba(15, 23, 42, 0.45);
}

.dmvq-link-card-icon {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 12px;
  font-size: 19px;
  color: #0f3d21;
}

.dmvq-link-card-icon--primary { background: linear-gradient(120deg, #22e07a, #7df0b0); }
.dmvq-link-card-icon--sky { background: linear-gradient(120deg, #38bdf8, #93d9fb); color: #072e42; }
.dmvq-link-card-icon--violet { background: linear-gradient(120deg, #a78bfa, #d4c4fc); color: #2c1a5c; }
.dmvq-link-card-icon--amber { background: linear-gradient(120deg, #f59e0b, #fbcd7e); color: #4a2c02; }

.dmvq-link-card-title {
  display: block;
  color: var(--dmvq-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.dmvq-link-card-meta {
  display: block;
  margin-top: 3px;
  color: var(--dmvq-slate);
  font-size: 12.5px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .dmvq-topic-bar-row {
    grid-template-columns: 110px 1fr auto;
  }
}

.dmvq-sign-glossary {
  display: grid;
  gap: 16px;
}

.dmvq-sign-card {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #ffffff;
}

.dmvq-sign-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  border-radius: 8px;
  background: #f8fafc;
}

.dmvq-sign-card-image img {
  width: min(140px, 60vw);
  max-height: 140px;
  object-fit: contain;
}

.dmvq-sign-card h2 {
  margin-top: 0;
  color: var(--dmvq-ink);
}

@media (min-width: 720px) {
  .dmvq-sign-card {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

@media print {
  @page {
    size: letter;
    margin: 0.45in;
  }

  html,
  body {
    background: #ffffff !important;
  }

  body {
    color: #111827 !important;
    font-size: 11pt;
  }

  .topbar,
  .footer,
  .skip-to-content,
  .dmvq-print-hidden {
    display: none !important;
  }

  .site-shell,
  #main-content,
  .section {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  .dmvq-cheat-sheet {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .dmvq-cheat-header {
    display: block;
    margin-bottom: 12px;
  }

  .dmvq-cheat-header h2 {
    font-size: 20pt;
    line-height: 1.15;
    margin-bottom: 6px;
  }

  .dmvq-topic-row {
    break-inside: avoid;
    box-shadow: none !important;
  }

  .dmvq-topic-row {
    padding: 6px 8px;
  }

  .dmvq-topic-row strong {
    color: #111827;
  }

  a {
    color: #111827 !important;
    text-decoration: underline;
  }
}

.dmvq-test-nav { display:flex; justify-content:space-between; gap:1rem; margin:1.5rem 0; }

/* DMV fixed-test tile grid on /dmv/practice-test-california */
.dmvq-test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 12px;
  margin: 20px 0 8px;
}
.dmvq-test-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 16px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-deep);
  text-decoration: none;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.dmvq-test-tile:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 40, 24, 0.1);
}
.dmvq-test-tile-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7d6f;
}
.dmvq-test-tile-num {
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  color: var(--brand);
}

/* Numbered-test hub links on /dmv/states/[state]/practice-test */
.dmvq-test-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.75rem; list-style:none; padding:0; }

/* Sample license card on /dmv/states/* (DmvLicenseSample) */
.dmvq-license-official {
  font-weight: 600;
}
.dmvq-license-official a {
  color: var(--brand);
  text-decoration: underline;
}
.dmvq-license-layout {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}
@media (max-width: 720px) {
  .dmvq-license-layout { grid-template-columns: minmax(0, 1fr); }
}
.dmvq-license-card {
  width: 100%;
  max-width: 360px;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(20, 83, 45, 0.12));
}
.dmvq-license-facts p { margin: 0 0 12px; }

/* Quiz start anchor: clear the 72px sticky topbar when deep-linked */
#dmvq-quiz-start { scroll-margin-top: 88px; }

/* Mobile hero picker: the .hero-left-card .naver-shortcuts 5-column rule
   out-specifies the plain .naver-shortcuts override in the 720px media block,
   so phones rendered a ~460px grid inside a 390px viewport (clipped hero).
   Same-specificity override wins the cascade back. */

/* ===== Road sign flashcard trainer (DmvSignFlashcards) ===== */
.dmvq-flash {
  max-width: 560px;
  margin: 8px auto 0;
}

.dmvq-flash-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dmvq-ink);
}

.dmvq-flash-progress {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--dmvq-green-50);
  color: var(--dmvq-green-700);
}

.dmvq-flash-remaining {
  color: #5a6b60;
  font-weight: 600;
}

.dmvq-flash-shuffle {
  margin-left: auto;
  appearance: none;
  border: 1.5px solid #bfd8c7;
  background: #ffffff;
  color: var(--dmvq-green-700);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.dmvq-flash-shuffle:hover:not(:disabled) {
  background: var(--dmvq-green-50);
  border-color: var(--dmvq-green-600);
}

.dmvq-flash-shuffle:disabled {
  opacity: 0.5;
  cursor: default;
}

.dmvq-flash-card {
  border: 1px solid #dde5e0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 30px -18px rgba(22, 101, 52, 0.35);
  padding: 24px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dmvq-flash-card:not(.is-revealed):hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -18px rgba(22, 101, 52, 0.45);
}

.dmvq-flash-card:focus-visible {
  outline: 3px solid var(--dmvq-green-600);
  outline-offset: 2px;
}

.dmvq-flash-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  border-radius: 10px;
  background: #f8fafc;
  padding: 16px;
}

.dmvq-flash-image img {
  width: min(200px, 66vw);
  max-height: 200px;
  object-fit: contain;
}

.dmvq-flash-hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
  color: #5a6b60;
}

.dmvq-flash-back {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eef2ee;
  text-align: center;
}

.dmvq-flash-meaning {
  margin: 0 0 8px;
  font-size: clamp(19px, 3vw, 23px);
  font-weight: 900;
  color: var(--dmvq-ink);
  line-height: 1.3;
}

.dmvq-flash-explain {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  color: #40514a;
}

.dmvq-flash-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.dmvq-flash-actions--reveal {
  margin-top: 16px;
}

.dmvq-flash-actions .dmvq-btn {
  padding: 12px 24px;
  font-size: 15px;
}

.dmvq-flash-done {
  text-align: center;
  padding: 32px 24px;
  border: 1px solid #dde5e0;
  border-radius: 14px;
  background: #ffffff;
}

.dmvq-flash-done-title {
  margin: 0 0 6px;
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 900;
  color: var(--dmvq-ink);
}

.dmvq-flash-done-sub {
  margin: 0 0 20px;
  color: #5a6b60;
}

@media (max-width: 520px) {
  .dmvq-flash-card {
    padding: 18px;
  }
  .dmvq-flash-actions .dmvq-btn {
    flex: 1 1 auto;
  }
}

/* Gamification reward panel (XP, levels, achievements). Cosmetic only. */
.dmvq-xp-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 14px;
}

.dmvq-xp-level {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dmvq-green-600), var(--dmvq-green-800));
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 6px 16px -6px rgba(15, 61, 33, 0.55);
}

.dmvq-xp-headcopy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dmvq-xp-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--dmvq-ink);
}

.dmvq-xp-sub {
  font-size: 12.5px;
  color: var(--dmvq-slate);
}

.dmvq-xp-total {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--dmvq-green-700);
  background: var(--dmvq-green-50);
  border: 1px solid var(--dmvq-green-100);
  border-radius: 999px;
  padding: 4px 12px;
}

.dmvq-xp-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: #eef2f0;
  overflow: hidden;
}

.dmvq-xp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dmvq-green-500), var(--dmvq-green-700));
  width: 100%;
  clip-path: inset(0 calc(100% - var(--dmvq-pct, 0%)) 0 0);
  transition: clip-path 0.5s ease;
}

.dmvq-xp-badges-title {
  margin: 16px 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dmvq-slate);
}

.dmvq-xp-badges {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.dmvq-xp-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #e6ece8;
  background: #f8fafc;
  opacity: 0.5;
  filter: grayscale(0.7);
}

.dmvq-xp-badge--on {
  opacity: 1;
  filter: none;
  background: var(--dmvq-green-50);
  border-color: var(--dmvq-green-100);
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.12);
}

/* Study planner day-by-day plan steps (elevated from a plain numbered list) */
.dmvq-plan-steps {
  list-style: none;
  padding: 0;
  margin: 16px 0 4px;
  display: grid;
  gap: 10px;
}
.dmvq-plan-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--dmvq-green-50);
  border: 1px solid var(--dmvq-green-100);
  transition: box-shadow 0.12s, transform 0.12s;
}
.dmvq-plan-step:hover {
  box-shadow: 0 4px 14px rgba(16, 40, 24, 0.07);
  transform: translateY(-1px);
}
.dmvq-plan-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12.5px;
  color: #fff;
  background: linear-gradient(135deg, var(--dmvq-green-600), var(--dmvq-green-800));
}
.dmvq-plan-step-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--dmvq-ink);
  padding-top: 3px;
}

/* Active test tile: the current /test/[n] in the grid */
.dmvq-test-tile--current {
  background: linear-gradient(135deg, var(--dmvq-green-600), var(--dmvq-green-800));
  border-color: var(--dmvq-green-700);
  cursor: default;
}
.dmvq-test-tile--current .dmvq-test-tile-label {
  color: rgba(255, 255, 255, 0.82);
}
.dmvq-test-tile--current .dmvq-test-tile-num {
  color: #ffffff;
}

/* DMV cluster spacing: the marketing sections use 64px vertical padding, which
   stacks into large gaps on the content-dense DMV pages. Scope a tighter rhythm
   to /dmv routes only (wrapper set in app/dmv/layout.tsx). */
.dmvq-page .section {
  padding: 36px 0;
}
.dmvq-page .page-hero + .section {
  padding-top: 28px;
}
.dmvq-page .section + .section {
  padding-top: 8px;
}
@media (max-width: 640px) {
  .dmvq-page .section {
    padding: 26px 0;
  }
  .dmvq-page .section + .section {
    padding-top: 6px;
  }
}

/* Inline callout: a compact bordered note so a lone linking paragraph reads as
   an intentional aside instead of floating prose */
.dmvq-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--dmvq-green-50);
  border: 1px solid var(--dmvq-green-100);
  border-radius: 14px;
  margin: 0;
}
.dmvq-callout-icon {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1.5;
}
.dmvq-callout p {
  margin: 0;
}

/* Tip cards: turns flat prose sections into scannable cards with an icon */
.dmvq-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
  margin: 8px 0;
}
@media (max-width: 640px) {
  .dmvq-tips {
    grid-template-columns: 1fr;
  }
}
.dmvq-tip {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid #e6ece8;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 40, 24, 0.05);
  transition: box-shadow 0.12s, transform 0.12s;
}
.dmvq-tip:hover {
  box-shadow: 0 8px 22px rgba(16, 40, 24, 0.08);
  transform: translateY(-1px);
}
.dmvq-tip-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  border-radius: 14px;
  background: var(--dmvq-green-50);
  border: 1px solid var(--dmvq-green-100);
}
.dmvq-tip-body {
  min-width: 0;
}
.dmvq-tip-body .kicker {
  margin-top: 0;
}
.dmvq-tip-body h2,
.dmvq-tip-body h3 {
  margin: 2px 0 8px;
  font-size: 1.2rem;
}
.dmvq-tip-body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 560px) {
  .dmvq-tip {
    padding: 16px;
    gap: 12px;
  }
  .dmvq-tip-icon {
    width: 40px;
    height: 40px;
    font-size: 21px;
  }
}

/* Answer cards: long-tail Q&A blocks ("how much", "how many") as scannable
   cards with a green accent, matching the tip-card treatment */
.dmvq-answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
  margin: 8px 0 20px;
}
@media (max-width: 640px) {
  .dmvq-answers {
    grid-template-columns: 1fr;
  }
}
.dmvq-answer-card {
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid #d5e3da;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 40, 24, 0.05);
  transition: box-shadow 0.12s, transform 0.12s;
}
.dmvq-answer-card:hover {
  box-shadow: 0 8px 22px rgba(16, 40, 24, 0.08);
  transform: translateY(-1px);
}
.dmvq-answer-card h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}
.dmvq-answer-card p {
  margin: 0;
}

/* Fee table: styled version of the at-a-glance fee grid (replaces inline styles) */
.dmvq-fee-table-wrap {
  overflow-x: auto;
  margin: 16px 0 20px;
  border: 1px solid #e6ece8;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 40, 24, 0.05);
}
.dmvq-fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.dmvq-fee-table thead th {
  text-align: left;
  padding: 13px 18px;
  background: var(--dmvq-green-50);
  color: var(--dmvq-green-800);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--dmvq-green-100);
}
.dmvq-fee-table tbody td {
  padding: 12px 18px;
  border-top: 1px solid #eef2ef;
}
.dmvq-fee-table tbody tr:first-child td {
  border-top: none;
}
.dmvq-fee-table tbody tr:nth-child(even) {
  background: #f8faf9;
}
.dmvq-fee-table tbody td:first-child {
  font-weight: 600;
  color: var(--dmvq-ink);
}

/* Cheat-sheet topic cards: turns the bullet-wall reference into scannable cards
   with an icon header and a green checklist. */
.dmvq-cheat-card {
  margin: 16px 0;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid #e6ece8;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 40, 24, 0.05);
}
.dmvq-cheat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1.2rem;
}
.dmvq-cheat-head span {
  font-size: 23px;
  line-height: 1;
}
.dmvq-cheat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.dmvq-cheat-list li {
  position: relative;
  padding-left: 25px;
  line-height: 1.5;
  color: #334155;
}
.dmvq-cheat-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--dmvq-green-600);
  font-weight: 800;
}

.dmvq-xp-badge-emoji {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.dmvq-xp-badge-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dmvq-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .dmvq-xp-total {
    display: none;
  }
  .dmvq-xp-badges {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
}

/* ============================================================
   Baseline accessibility layer
   Site-wide floors that every page inherits. Scoped rules above
   may override these; nothing here needs !important except the
   reduced-motion contract.
   ============================================================ */

/* Focus: one visible, high-contrast ring everywhere, including on
   pages whose components predate the scoped :focus-visible rules. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
/* On dark or saturated surfaces the green ring disappears, so those
   invert to a light ring instead. */
:where(.dmvq-page-hero, .site-footer, .sticky-call-bar, .naver-hero, [data-surface="dark"])
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--qs-amber-ring, #FFD84D);
}

/* Reduced motion: remove movement through space, keep the feedback.
   Colour, opacity, border and shadow transitions run at full duration
   so every state change is still legible; keyframe animations jump to
   their final frame rather than being cancelled mid-way. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-property: color, background-color, border-color, outline-color,
      opacity, box-shadow, fill, stroke, clip-path;
    animation-iteration-count: 1 !important;
    animation-duration: 1ms !important;
    animation-fill-mode: forwards !important;
  }
  html { scroll-behavior: auto; }
}

/* Horizontal overflow is clipped, not hidden: `clip` contains stray
   wide children without creating a scroll container, which is what
   breaks position: sticky under `overflow-x: hidden`. */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* Press-kit pull quote. Replaces four inline off-palette blue rules. */

/* Persistent Vietnamese entry point in the mobile bar.
   Sized as a real control (44px minimum) rather than a utility link, and
   given diacritic headroom: Tiếng Việt stacks tone marks above the vowel,
   which the tight display leading elsewhere on the page clips. */

/* Vietnamese needs more vertical room than English at display sizes. Applied
   wherever content is explicitly marked lang="vi". */
:where([lang="vi"]) { line-height: 1.5; }
h1:where([lang="vi"]), h2:where([lang="vi"]) {
  line-height: 1.28;
}

/* The bar is space-between with no shrink allowance, so adding the language
   control pushed the wordmark under it. Let the left group shrink; keep the
   controls at their intrinsic size. */

@media (max-width: 430px) {
  /* Both fit. Hiding the wordmark here left the business name unreadable on the
     mobile first screen: the emblem is abstract and the h1 does not contain
     "QualitySpace", so a visitor sent to a specific agency by a family member had
     no way to confirm they were in the right place. The emblem and the wordmark
     both shrink instead. */
}

/* Example rates disclosure. The numbers are illustrative, so they no longer
   open as the loudest element in the fold; the summary reads as a quiet offer
   to show them. */

/* Primary conversion action gets the only filled button in the CTA block; the
   other two channels stay available but stop competing with it. */


/* The right hero column ended ~370px short of the left once the rates card
   collapsed, leaving the fold looking unfinished at the moment the page is
   establishing competence. The photo takes up the slack instead of the gap. */

/* Carriers card: its own label, visually distinct from the rates disclosure so
   neither can be read as the other. */

/* Mobile coverage-tile expander. The checkbox is a real focusable control kept
   off-canvas rather than display:none, so keyboard and screen-reader users can
   still operate it. */

@media (max-width: 760px) {
  /* A text control, deliberately not a button: as a full-width bordered button
     it sat directly above the filled primary CTA and read as a second option
     rather than a disclosure. */
}

/* Desktop has no use for the coverage expander (all tiles render), so the
   control leaves the accessibility tree entirely rather than sitting there
   unlabelled next to a display:none label. */

/* Keyboard-focusable scroll region needs a visible focus ring. */

/* Tap targets. Footer and aside links rendered between 21.8px and 28.6px tall,
   roughly half the 44px floor, and the footer is where someone hunting for
   hours, a phone number, or the Vietnamese site ends up. Padding rather than
   height so the text position is unchanged. */
@media (max-width: 900px) {
  .footer-col a,
  .trust-strip-item {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col a { padding: 2px 0; }
}

/* Second pass: the mobile drawer nav is the primary navigation on a phone and
   its links rendered well under the 44px floor, as did the service stack and
   the aside link lists. */


/* Star glyphs measured 1.88 to 2.04:1 against white and the soft section
   backgrounds. On the review cards they are the ONLY indicator of that card's
   rating (no adjacent numeral), and they carry an aria-label rather than
   aria-hidden, so they are exposed text and 4.5:1 applies. Darkened to the
   amber-700 token, which clears 4.63:1 on the worst of the three backgrounds.
   Applied to every star on the page rather than only the review cards, because
   two different golds for the same symbol is its own defect. */
.trust-strip-stars { color: var(--qs-amber-700); }

/* ============================================================
   Polish pass
   ============================================================ */

/* The fixed call bar and the hero's own phone block are the same action in the
   same colour, and the bar physically covers the block in the opening mobile
   view (bar 775-828, block 807-855). The bar is persistent at every scroll
   position, so the in-hero duplicate is redundant as well as occluded. Desktop
   has no bar and keeps the block. */

/* The end CTA is the page's terminal action and rendered 224px wide, narrower
   than the 358px sticky bar button sitting just below it: the most important
   button on the page was the smaller of two adjacent identical actions. The
   420px cap was inert because the button shrink-wrapped its label. */

/* Tap targets: second pass on the remainder. */

/* Browser surfaces. Selection was browser-default blue on a green-branded page,
   which is the cheapest tell that a page was assembled rather than built. */
::selection {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--ink);
}
:where(input, textarea, select) { caret-color: var(--brand); }

/* Forward action at the persuasive peak. Sized below the end-CTA button so the
   page still has one terminal action, not two competing ones. */


/* ============================================================
   Hero: dark surface world
   Ported from the sister site. The page previously opened on white with a
   48px headline, which read as a template regardless of what was fixed inside
   it. A dark hero gives the headline somewhere to be loud and lets one bright
   green carry accent duty that the AA-safe brand green cannot on white.
   ============================================================ */
/* DETECTOR EXCEPTION, intentional: codex-grid-background.
   A tiled hairline grid is a generated-UI signature when it is decoration on a
   plain surface. Kept because it is a literal element of the pinned reference,
   and it is masked by a radial so it reads as texture falling off behind the
   headline rather than a field tiled to the edges. */
/* DETECTOR EXCEPTION, intentional: gradient-text.
   The detector flags gradient text as a generated-UI tell, and by default it is
   right. It is kept here because the owner pinned this exact treatment by
   choosing the sister site as the reference, and it falls on the one phrase
   that is the actual differentiator rather than on a decorative word. */

/* Panels on the dark surface: translucent white rather than a second colour, so
   depth comes from the surface itself. */

/* Small label text moves to mono on dark: it reads as a system label rather
   than shrunken body copy. */

/* The primary action uses the bright green on dark, where the AA-safe brand
   green would sink into the background. */

/* Children that set their own colour never inherited the dark-surface rule, so
   the rating figure and the rate rows were dark text on a near-black hero. */

/* The brand green is AA on white and 3.85:1 on the dark hero. On this surface
   the bright green carries it. */

/* ============================================================
   Header actions, ported from the sister site
   The two conversion actions used to sit inside the nav list as plain links,
   indistinguishable from the eight destinations beside them. They are now an
   outlined secondary and a filled primary, both real 44px controls with an
   icon, so the header states what the page wants you to do.
   ============================================================ */

/* The nav row now carries brand, links and two controls. Let the link list
   shrink and the controls hold their size, and tighten the labels before
   anything wraps or collides. */
.topbar-inner { gap: 16px; }
.topnav { min-width: 0; flex: 0 1 auto; }
@media (max-width: 1180px) {
  .topnav { font-size: 0.88rem; gap: 14px; }
}

/* ============================================================
   Inked section band, ported from the sister site
   The page previously ran light from the hero to the footer, so nothing
   between them changed register. One dark band mid-page gives the scroll a
   rhythm and lets the credibility statement carry weight the tinted band
   could not.
   ============================================================ */

/* Links on the inked band: the AA-safe brand green is 3.85:1 here, so the
   bright green carries them, as it does in the hero. */

/* Cards sitting on the band become translucent rather than white, so the band
   stays one surface instead of a dark strip with light boxes punched out. */


/* Corrections after measuring the band with axe rather than by eye.
   Three real failures, all introduced by the band itself. */

/* .body-aside-cta kept its white background, so the muted text I set for a dark
   surface landed on white at 3.27:1. */

/* The button took the bright green fill but kept the brand green label from a
   more specific existing rule: 2.86:1. Ink on bright green instead. */

/* Links sitting inside body copy on the band were green on sage at 1.23:1
   against the surrounding text and carried no other affordance, so colour was
   the only thing marking them as links. Underline them; standalone links and
   buttons keep their clean treatment. */

/* Review cards sit in a row, so an 787-character review used to set the height
   for every card beside it. The body is capped for display only; the full
   verbatim text still goes to structured data. */


/* ============================================================
   Vertical rhythm
   Sections were 56-64px top and bottom, so every boundary cost 112-128px of
   empty band, and the reviews block spent 188px between its heading and its
   first card. Tightened across the board.
   ============================================================ */
.section { padding: 28px 0; }

/* Section headings were carrying their own top margin on top of the section
   padding. The padding owns that space. */
.section > .inner > h2:first-child { margin-top: 0; }


/* ============================================================
   Density pass. Measured with a per-pixel ink map: the page was 32% empty
   rows on desktop and 41% on mobile. These are the specific leaks.
   ============================================================ */

/* A Q&A rule was leaking into the value-prop cards. .section .inner h3 sets a
   28px top margin for prose headings and beat .why-choose-card h3's own
   margin:0 on specificity, so every card had a 42px icon-to-title gap where
   14px was intended. Six cards. */
.why-choose-card h3 { margin-top: 0; }

/* Each service item paid a 16px link margin on top of 20px card padding,
   leaving 38px of dead space under every one of the twelve. */

/* Five short paragraphs with 16px margins collapsed into four 32px gaps in a
   card whose content is only 253px of a 462px box. */

/* Two headings sat just inside their max-width and wrapped to two lines for a
   few percent of overflow. */
.why-choose-head h2 { max-width: 52ch; }

/* Card padding: these grids stretch to the tallest card, so internal slack is
   multiplied by the row. */
.why-choose-card { padding: 20px; }

/* ============================================================
   Ultra-audit fixes
   ============================================================ */

/* The dark-hero sweep used a blanket `.naver-hero span` to force white onto
   hero text. That also caught the arrow inside the bright-green CTA, putting
   white on #22E07A at 1.75:1 while the button's own label sat at 10.91:1. axe
   did not catch it because the span is aria-hidden. Controls own their
   foreground; decorative glyphs inside them inherit it. */

/* My earlier attempt at this lost on specificity: .why-choose-card h3 is
   (0,1,1) against .section .inner h3 at (0,2,1), so the 28px prose margin kept
   winning and every value-prop card carried a 42px icon-to-title gap where 14px
   was intended. */
.section .inner .why-choose-card h3 { margin-top: 0; }

/* Tap targets. 31 elements under 44px on mobile, and the worst are conversion
   links rather than chrome: the in-card "See how this works" repeats eleven
   times, and two of the three named conversion actions in the closing block
   were under half the minimum. */

/* office.jpg carried no intrinsic size, so nothing reserved its box. CLS
   measured 0 by luck of ordering, not by construction. */


/* The aggregate rating sat under a centred heading and kept its own centring. */

/* The closing block centred everything inline. Left-aligned to the same
   container edge as every other section. */

/* Every section heading, lede and kicker aligns to the container's left edge,
   matching the sister site where every heading sits at delta 0 from its own
   content. Three different heading alignments were in use on this one page. */
.section > .inner > h2,
.section > .inner > .lede,
.section > .inner > p.lede,
.why-choose-head,
.why-choose-head h2,
.why-choose-head .lede {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}
.why-choose-head { max-width: 78ch; }


/* Final density pass. Sections were still averaging 90px of empty band at each
   boundary after the earlier cut; the heading block and the first row of content
   carry their own margins on top of the section padding. */
.section { padding: 24px 0; }
.section > .inner > h2 { margin-bottom: 10px; }
.section > .inner > .lede { margin-bottom: 16px; }
.why-choose-grid { margin-top: 4px; }

/* ============================================================
   Footer balance
   The five-track grid gave every column the same width regardless of how much
   it held, so column heights ran 426 / 593 / 359 / 210px on desktop and the
   cities column alone reached 1,062px on mobile. The footer was 12% of the
   desktop page and 16% of mobile. The fix is to let the long column flow in
   sub-columns rather than run twenty links deep.
   ============================================================ */
/* Not `span 2`: with five tracks, spanning pushed the last column onto a second
   row and made the footer taller than before. The cities track is widened in
   place instead, so the row stays one row. */

/* Tighter link rhythm: the footer set 44px minimum touch targets on every link,
   which is correct on mobile and pure height on desktop where the pointer is
   precise. */
@media (min-width: 901px) {
  /* 24px, not 0: WCAG 2.2 target-size wants 24px minimum even on a precise
     pointer, and min-height:0 dropped these to 23.9px. */
  .footer-col a { min-height: 24px; line-height: 1.6; }
}

@media (max-width: 900px) {
  /* Links are 44px tall for tap targets, which is correct and non-negotiable,
     so twenty cities is 880px of column no matter how the grid is arranged.
     The only lever is rows: each column takes the full width and flows its own
     links in two sub-columns, halving the row count.

     display:block matters. .footer-col is display:flex by default and CSS
     multi-column is ignored on a flex container, so an earlier attempt at this
     changed nothing while appearing to apply. */
  .footer-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .footer-col {
    display: block;
    columns: 2;
    column-gap: 14px;
  }
  .footer-col-h { column-span: all; margin-bottom: 4px; }
  .footer-col a { break-inside: avoid; }
}


/* The five tracks were equal-width regardless of content, so a twenty-link
   column ran 593px deep beside a two-link column at 210px. The cities track is
   widened so its list can flow in two sub-columns at the same row height as its
   neighbours. */
.footer-grid {
  grid-template-columns:
    minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 0.9fr);
}


/* Footer links fill their column rather than shrink-wrapping their text. As
   inline-flex, a short label like "Life" collapsed to a 23.7px-wide target in a
   sub-column, under the 24px floor. Block-level flex keeps the 44px height and
   gives the full column width as hit area. */
@media (max-width: 900px) {
  .footer-col a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
  }
}

/* ============================================================
   Card system
   Twenty-four treatments were in play. Borders were unified earlier; radius and
   elevation were not, so r12 / r14 sat side by side and some cards carried a
   shadow while their neighbours in the same grid were flat. One light card, one
   dark card, one pill.
   ============================================================ */
.why-choose-card {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  /* One elevation: an offset and a soft blur, not a halo. Cards read as sitting
     on the surface rather than glowing on it. */
  box-shadow: 0 1px 2px rgba(11, 26, 15, 0.04), 0 6px 16px -10px rgba(11, 26, 15, 0.10);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.18s;
}

/* Interactive cards lift; static ones do not, so movement means "this is a
   link" rather than decoration. */
.why-choose-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  box-shadow: 0 2px 4px rgba(11, 26, 15, 0.05), 0 12px 26px -12px rgba(11, 26, 15, 0.16);
}

/* Cards keep equal heights per row, because a ragged bottom edge across a
   4 + 4 grid reads as broken rather than airy. The slack is moved instead of
   removed: the card is a column and the attribution is pinned to the bottom, so
   a short review shows space between quote and byline rather than a hole
   beneath it. */
.why-choose-card { display: flex; flex-direction: column; }
.why-choose-card p:last-child { margin-bottom: 0; }

/* The dark hero keeps its own card treatment; it is a different surface. */


/* ---- Section balance: three shapes that were leaving dead space ---- */

/* KevinCard aside: the duplicate "Your broker" card is gone, so the operating
   name rides out as an attribution line on the CTA card instead. */

/* Vietnamese hub: intro at reading measure, destinations as a card row. */
/* The auto site is a different destination from the four guides, so it reads as
   a strip rather than a fifth peer card. */

/* Closing row: cities left, call to action right. */
/* Both columns end on the same line. The cities column is the shorter of the
   two, so rather than leaving its slack as a hole under the section, the
   "view all" link is pushed to the bottom edge and the slack becomes
   separation above a link that wants separating anyway. Same move as the
   review cards: relocate the gap, do not pretend it is not there. */

/* KevinCard prose is shorter than the aside beside it. The reviewed-by line is
   an attribution, so pinning it to the bottom edge both squares the two columns
   and puts the separation where an attribution wants it. */

/* ===== DMV world (Vua Bao Hiem house style) ===== */
/* DMV surface, Vua Bao Hiem house world.
   Scoped to .dmv-world (set on the DMV layout) so every rule here beats the
   single-class rules in globals.css without touching insurance pages.
   Copy, markup, and behavior are untouched; this file changes only the look. */

.dmv-world {
  --dw-ink: #07120d;
  --dw-ink-2: #0a0f0d;
  --dw-ink-soft: #10201a;
  --dw-authority: #073b2a;
  --dw-green: #16a34a;
  --dw-green-bright: #22e07a;
  --dw-green-deep: #0b5d33;
  --dw-green-text: #0c7a3d;
  --dw-green-50: #eafff2;
  --dw-green-100: #cdebd6;
  --dw-gold: #c9a24a;
  --dw-gold-soft: #e7cd86;
  --dw-danger: #9f1239;
  --dw-danger-50: #fff1f2;
  --dw-danger-100: #fecdd3;
  --dw-bg: #ffffff;
  --dw-bg-soft: #f5f7f6;
  --dw-bg-deep: #eef2f0;
  --dw-line: #e8ecea;
  --dw-rule: #d8dedb;
  --dw-muted: #586660;
  --dw-muted-light: #7d8c82;
  --dw-shadow: 0 18px 50px rgba(7, 20, 14, 0.12);
  --dw-shadow-sm: 0 6px 20px rgba(7, 20, 14, 0.08);
  --dw-font: var(--font-dmvq-display), "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --dw-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --dmvq-green-900: var(--dw-authority);
  --dmvq-green-800: var(--dw-green-deep);
  --dmvq-green-700: var(--dw-green-text);
  --dmvq-green-600: var(--dw-green);
  --dmvq-green-500: var(--dw-green-bright);
  --dmvq-green-100: var(--dw-green-100);
  --dmvq-green-50: var(--dw-green-50);
  --dmvq-red-600: var(--dw-danger);
  --dmvq-red-50: var(--dw-danger-50);
  --dmvq-ink: var(--dw-ink);
  --dmvq-slate: var(--dw-muted);
  font-family: var(--dw-font);
  color: var(--dw-ink);
  background: var(--dw-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02";
}

.dmv-world ::selection {
  background: rgba(34, 224, 122, 0.35);
  color: var(--dw-ink);
}

.dmv-world :focus-visible {
  outline: 2px solid var(--dw-green);
  outline-offset: 3px;
  border-radius: 6px;
}

.dmv-world .dmvq-page h1,
.dmv-world .dmvq-page h2,
.dmv-world .dmvq-page h3,
.dmv-world .dmvq-title,
.dmv-world .dmvq-question,
.dmv-world .dmvq-mode-title,
.dmv-world .dmvq-stage-title,
.dmv-world .page-hero-title {
  font-family: var(--dw-font);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--dw-ink);
}

.dmv-world .dmvq-page h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  margin: 0 0 14px;
  max-width: 820px;
}

.dmv-world .dmvq-page h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

.dmv-world .dmvq-page p,
.dmv-world .dmvq-page li {
  line-height: 1.6;
}

.dmv-world .dmvq-page a:not(.btn):not(.dmvq-btn):not(.page-hero-cta-btn):not(.page-hero-cta-phone):not(.dmvq-start-cta-link):not(.dmvq-test-list li a):not(.dmvq-dir-name):not(.dmvq-path) {
  color: var(--dw-green-text);
  font-weight: 700;
  text-decoration-color: rgba(12, 122, 61, 0.35);
  text-underline-offset: 3px;
}

/* Section rhythm: quiet sections alternate white and soft ground. */
.dmv-world .dmvq-page .section,
.dmv-world .dmvq-page .dmvq-section {
  padding: 56px 0;
}

.dmv-world .dmvq-page .section + .section,
.dmv-world .dmvq-page .section + .dmvq-section,
.dmv-world .dmvq-page .dmvq-section + .section,
.dmv-world .dmvq-page .dmvq-section + .dmvq-section {
  padding-top: 0;
}

.dmv-world .dmvq-page .inner,
.dmv-world .dmvq-page .dmvq-container {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
}

/* ---------- Hero: ink, one glow, pill, heavy title, fact strip ---------- */

.dmv-world .page-hero.page-hero--dark {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 56px 0 44px;
  background:
    radial-gradient(700px 360px at 82% 0%, rgba(34, 224, 122, 0.16) 0, rgba(34, 224, 122, 0) 60%),
    linear-gradient(180deg, #07120d 0%, #0a0f0d 100%);
}

.dmv-world .page-hero--dark::before,
.dmv-world .page-hero--dark::after,
.dmv-world .dmvq-hero-scene {
  display: none;
}

.dmv-world .page-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

.dmv-world .page-hero--dark .breadcrumb,
.dmv-world .page-hero--dark .breadcrumb a {
  color: #9fb6ab;
  font-size: 0.82rem;
  font-weight: 500;
}

.dmv-world .page-hero--dark .breadcrumb a:hover {
  color: #ffffff;
}

.dmv-world .page-hero-kicker,
.dmv-world .page-hero--dark .page-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 18px;
  padding: 6px 13px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dw-green-bright);
  background: rgba(34, 224, 122, 0.12);
  border: 1px solid rgba(34, 224, 122, 0.3);
  border-radius: 999px;
}

.dmv-world .page-hero-title,
.dmv-world .page-hero--dark .page-hero-title {
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 900;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0 0 16px;
  max-width: 900px;
  text-wrap: balance;
}

.dmv-world .page-hero-lede,
.dmv-world .page-hero--dark .page-hero-lede {
  color: #9fb6ab;
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 62ch;
  margin: 0 0 28px;
}

.dmv-world .page-hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.dmv-world .page-hero-meta-item {
  padding: 14px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.dmv-world .page-hero-meta-item:last-child {
  border-right: 0;
}

.dmv-world .page-hero-meta-item dt,
.dmv-world .page-hero--dark .page-hero-meta-item dt {
  margin: 0 0 4px;
  font-family: var(--dw-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fb6ab;
}

.dmv-world .page-hero-meta-item dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.dmv-world .page-hero-meta-item:first-child dd {
  color: var(--dw-gold-soft);
}

.dmv-world .page-hero-cta {
  background: linear-gradient(150deg, #0a2a1d, #07120d);
  border: 1px solid rgba(34, 224, 122, 0.3);
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: var(--dw-shadow);
  color: #ffffff;
}

.dmv-world .page-hero-cta .aside-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9fb6ab;
}

.dmv-world .page-hero-cta-phone {
  display: block;
  font-family: var(--dw-mono);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--dw-green-bright);
  text-decoration: none;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.dmv-world .page-hero-cta-meta {
  margin: 0 0 18px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #9fb6ab;
}

.dmv-world .page-hero-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.94rem;
  color: #04140b;
  background: linear-gradient(145deg, var(--dw-green-bright), var(--dw-green));
  text-decoration: none;
  box-shadow: var(--dw-shadow-sm);
  transition: transform 0.16s, box-shadow 0.16s;
}

.dmv-world .page-hero-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(11, 93, 51, 0.32);
}

/* ---------- Primary action band under the hero ---------- */

.dmv-world .dmvq-start-cta {
  padding: 0 !important;
  background: var(--dw-bg);
}

.dmv-world .dmvq-start-cta .inner {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding: 16px 18px;
  background:
    radial-gradient(420px 160px at 90% 0%, rgba(34, 224, 122, 0.22) 0, rgba(34, 224, 122, 0) 65%),
    linear-gradient(150deg, #0a2a1d, #07120d);
  border: 1px solid rgba(34, 224, 122, 0.3);
  border-radius: 20px;
  box-shadow: var(--dw-shadow);
}

.dmv-world .dmvq-start-cta-link.btn {
  min-height: 52px;
  padding: 0 28px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  color: #04140b;
  background: linear-gradient(145deg, var(--dw-green-bright), var(--dw-green));
  border: 0;
  box-shadow: var(--dw-shadow-sm);
}

/* ---------- Buttons ---------- */

.dmv-world .dmvq-btn,
.dmv-world .dmvq-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  font-family: var(--dw-font);
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s, background 0.16s, border-color 0.16s;
}

.dmv-world .dmvq-btn--primary,
.dmv-world .dmvq-page .btn-primary {
  background: linear-gradient(145deg, var(--dw-green-bright), var(--dw-green));
  color: #04140b;
  box-shadow: var(--dw-shadow-sm);
}

.dmv-world .dmvq-btn--primary:hover,
.dmv-world .dmvq-page .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(11, 93, 51, 0.32);
}

.dmv-world .dmvq-btn--ghost,
.dmv-world .dmvq-btn--secondary,
.dmv-world .dmvq-btn--audio {
  background: #ffffff;
  color: var(--dw-green-deep);
  border-color: var(--dw-line);
  box-shadow: none;
}

.dmv-world .dmvq-btn--ghost:hover,
.dmv-world .dmvq-btn--secondary:hover,
.dmv-world .dmvq-btn--audio:hover {
  border-color: var(--dw-green);
  background: var(--dw-bg-soft);
  transform: none;
}

/* ---------- The quiz card ---------- */

.dmv-world .dmvq {
  background: #ffffff;
  border: 1px solid var(--dw-line);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--dw-shadow-sm);
  overflow: visible;
}

.dmv-world .dmvq::before {
  display: none;
}

.dmv-world .dmvq-eyebrow {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-family: var(--dw-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dw-muted);
}

.dmv-world .dmvq-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 14px;
  max-width: 30ch;
  text-wrap: balance;
}

.dmv-world .dmvq-hero {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.dmv-world .dmvq-note {
  margin: 10px 0 0;
  font-size: 0.92rem;
  color: var(--dw-muted);
}

.dmv-world .dmvq-note strong {
  color: var(--dw-ink);
  font-weight: 700;
}

.dmv-world .dmvq-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--dw-bg-soft);
  border: 1px solid var(--dw-line);
  border-radius: 14px;
}

.dmv-world .dmvq-resume p {
  font-weight: 600;
  color: var(--dw-ink);
}

/* Mode picker: three numbered stages, one card language, no colour costumes. */
.dmv-world .dmvq-modes {
  gap: 12px;
  margin-top: 22px;
}

.dmv-world .dmvq-stage {
  padding: 18px;
  background: var(--dw-bg-soft);
  border: 1px solid var(--dw-line);
  border-radius: 16px;
  box-shadow: none;
}

.dmv-world .dmvq-stage::before {
  display: none;
}

.dmv-world .dmvq-stage-badge {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  font-family: var(--dw-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dw-authority);
  background: #ffffff;
  border: 1px solid var(--dw-rule);
  box-shadow: none;
}

.dmv-world .dmvq-stage-title {
  font-size: 1.05rem;
  font-weight: 800;
}

.dmv-world .dmvq-stage-description {
  font-size: 0.86rem;
  color: var(--dw-muted);
}

.dmv-world .dmvq-mode,
.dmv-world .dmvq-mode--primary,
.dmv-world .dmvq-mode--sky,
.dmv-world .dmvq-mode--violet,
.dmv-world .dmvq-mode--amber,
.dmv-world .dmvq-mode--rose,
.dmv-world .dmvq-mode--ember {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--dw-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(11, 26, 15, 0.05);
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}

.dmv-world .dmvq-mode:hover {
  transform: translateY(-2px);
  border-color: var(--dw-green);
  background: #ffffff;
  box-shadow: var(--dw-shadow-sm);
}

.dmv-world .dmvq-mode--primary {
  border-color: var(--dw-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

.dmv-world .dmvq-mode-icon {
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--dw-green-50);
  color: var(--dw-green-deep);
  font-size: 0;
  line-height: 0;
}

.dmv-world .dmvq-mode--primary .dmvq-mode-icon {
  background: var(--dw-authority);
  color: var(--dw-green-bright);
}

.dmv-world .dmvq-mode-title,
.dmv-world .dmvq-mode--sky .dmvq-mode-title,
.dmv-world .dmvq-mode--violet .dmvq-mode-title,
.dmv-world .dmvq-mode--amber .dmvq-mode-title,
.dmv-world .dmvq-mode--rose .dmvq-mode-title,
.dmv-world .dmvq-mode--ember .dmvq-mode-title,
.dmv-world .dmvq-mode--primary .dmvq-mode-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--dw-ink);
  letter-spacing: -0.01em;
}

.dmv-world .dmvq-mode-sub {
  font-size: 0.8rem;
  color: var(--dw-muted);
  font-variant-numeric: tabular-nums;
}

/* Question view */
.dmv-world .dmvq-progress {
  height: 6px;
  margin: 10px 0 22px;
  background: var(--dw-bg-deep);
}

.dmv-world .dmvq-progress-fill {
  background: var(--dw-green);
}

.dmv-world .dmvq-progress-fill::after {
  display: none;
}

.dmv-world .dmvq-timer {
  font-family: var(--dw-mono);
  color: var(--dw-authority);
}

.dmv-world .dmvq-sign {
  display: grid;
  place-items: center;
  margin: 0 0 20px;
  padding: 22px;
  background: var(--dw-bg-soft);
  border: 1px solid var(--dw-line);
  border-radius: 16px;
}

.dmv-world .dmvq-sign img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(7, 20, 14, 0.18));
}

.dmv-world .dmvq-question {
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  text-wrap: balance;
}

.dmv-world .dmvq-audio-icon {
  width: 42px;
  height: 42px;
  background: var(--dw-authority);
  color: var(--dw-green-bright);
  box-shadow: none;
}

.dmv-world .dmvq-audio-icon:hover {
  filter: none;
  background: var(--dw-green-deep);
  box-shadow: none;
}

.dmv-world .dmvq-choices {
  gap: 8px;
}

.dmv-world .dmvq-choice {
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--dw-ink);
  background: #ffffff;
  border: 1px solid var(--dw-line);
  border-radius: 12px;
  box-shadow: none;
}

.dmv-world .dmvq-choice:hover:not(:disabled) {
  transform: none;
  background: var(--dw-bg-soft);
  border-color: var(--dw-green);
  box-shadow: none;
}

.dmv-world .dmvq-letter {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-family: var(--dw-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dw-authority);
  background: var(--dw-bg-deep);
}

.dmv-world .dmvq-choice--correct {
  background: var(--dw-green-50);
  border-color: var(--dw-green);
  box-shadow: inset 0 0 0 1px var(--dw-green);
  font-weight: 600;
}

.dmv-world .dmvq-choice--correct .dmvq-letter {
  background: var(--dw-green-deep, #0b5d33);
  color: #ffffff;
  transform: none;
}

.dmv-world .dmvq-choice--wrong {
  background: var(--dw-danger-50);
  border-color: var(--dw-danger);
  box-shadow: inset 0 0 0 1px var(--dw-danger);
}

.dmv-world .dmvq-choice--wrong .dmvq-letter {
  background: var(--dw-danger);
  color: #ffffff;
}

.dmv-world .dmvq-choice--picked {
  background: var(--dw-bg-soft);
  border-color: var(--dw-authority);
  box-shadow: inset 0 0 0 1px var(--dw-authority);
}

.dmv-world .dmvq-choice--dim {
  opacity: 0.55;
}

.dmv-world .dmvq-explain {
  margin: 16px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--dw-green-50);
  border: 1px solid var(--dw-green-100);
  color: var(--dw-ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
}

.dmv-world .dmvq-explain--wrong {
  background: var(--dw-danger-50);
  border-color: var(--dw-danger-100);
}

.dmv-world .dmvq-explain strong {
  color: var(--dw-ink);
  font-weight: 800;
}

.dmv-world .dmvq-source-citation {
  display: block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--dw-muted);
}

/* Layout with progress sidebar */
.dmv-world .dmvq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

.dmv-world .dmvq-sidebar {
  position: sticky;
  top: 88px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--dw-line);
  border-radius: 16px;
  box-shadow: none;
}

.dmv-world .dmvq-sidebar-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dw-muted);
  font-family: var(--dw-mono);
}

.dmv-world .dmvq-sidebar-sub,
.dmv-world .dmvq-progress-mobile-head {
  font-size: 0.86rem;
  color: var(--dw-muted);
  font-variant-numeric: tabular-nums;
}

.dmv-world .dmvq-restart-btn {
  font-family: var(--dw-font);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dw-green-deep);
  background: #ffffff;
  border: 1px solid var(--dw-line);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
}

.dmv-world .dmvq-restart-btn:hover {
  border-color: var(--dw-green);
}

.dmv-world .dmvq-progress-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-top: 12px;
}

.dmv-world .dmvq-progress-cell {
  height: 30px;
  border-radius: 6px;
  font-family: var(--dw-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dw-muted);
  background: var(--dw-bg-soft);
  border: 1px solid var(--dw-line);
  box-shadow: none;
}

.dmv-world .dmvq-progress-cell--correct {
  background: var(--dw-green-50);
  border-color: var(--dw-green-100);
  color: var(--dw-green-deep);
}

.dmv-world .dmvq-progress-cell--wrong {
  background: var(--dw-danger-50);
  border-color: var(--dw-danger-100);
  color: var(--dw-danger);
}

.dmv-world .dmvq-progress-cell--current {
  outline: 2px solid var(--dw-authority);
  outline-offset: 0;
  color: var(--dw-ink);
  background: #ffffff;
}

.dmv-world .dmvq-sidebar-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--dw-line);
  font-size: 0.82rem;
  color: var(--dw-muted);
}

/* Results */
.dmv-world .dmvq-score {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px;
  margin: 0 0 18px;
  background: var(--dw-bg-soft);
  border: 1px solid var(--dw-line);
  border-radius: 16px;
}

.dmv-world .dmvq-ring text {
  font-family: var(--dw-font);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.dmv-world .dmvq-verdict {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--dw-ink-soft);
}

.dmv-world .dmvq-verdict strong {
  color: var(--dw-green-deep);
  font-weight: 800;
}

.dmv-world .dmvq-verdict--fail strong {
  color: var(--dw-danger);
}

.dmv-world .dmvq-badge {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--dw-authority);
  color: var(--dw-green-bright);
  font-size: 0;
}

.dmv-world .dmvq-topic-miss {
  margin: 18px 0 0;
}

.dmv-world .dmvq-topic-miss-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dw-muted);
  font-family: var(--dw-mono);
}

.dmv-world .dmvq-topic-miss-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--dw-line);
  border-radius: 0;
  font-size: 0.94rem;
}

.dmv-world .dmvq-topic-miss-row strong {
  font-family: var(--dw-mono);
  color: var(--dw-danger);
  font-weight: 700;
}

.dmv-world .dmvq-review {
  margin-top: 18px;
  padding: 0;
  background: none;
  border: 0;
}

.dmv-world .dmvq-review summary {
  padding: 14px 16px;
  border: 1px solid var(--dw-line);
  border-radius: 12px;
  background: #ffffff;
  font-weight: 700;
  color: var(--dw-green-deep);
  cursor: pointer;
}

.dmv-world .dmvq-review li {
  padding: 12px 0;
  border-bottom: 1px solid var(--dw-line);
}

.dmv-world .dmvq-email {
  margin-top: 18px;
  padding: 18px;
  background: var(--dw-bg-soft);
  border: 1px solid var(--dw-line);
  border-radius: 14px;
}

.dmv-world .dmvq-email input {
  font-family: var(--dw-font);
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--dw-rule);
  border-radius: 10px;
  background: #ffffff;
  color: var(--dw-ink);
}

.dmv-world .dmvq-email input:focus {
  border-color: var(--dw-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* Sticky mobile action bar keeps the world's surface */
@media (max-width: 720px) {
  .dmv-world .dmvq-actions--sticky {
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--dw-line);
    box-shadow: 0 -10px 30px rgba(7, 20, 14, 0.08);
  }
}

/* ---------- Hub page furniture ---------- */

.dmv-world .dmvq-pill {
  display: inline-flex;
  align-items: center;
  margin: 0 6px 6px 0;
  padding: 3px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--dw-green-deep);
  background: var(--dw-green-50);
  border: 1px solid var(--dw-green-100);
  border-radius: 6px;
}

.dmv-world .dmvq-topic-tags-light {
  margin: 14px 0 22px;
}

.dmv-world .dmvq-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--dw-bg-soft);
  border: 1px solid var(--dw-line);
  border-radius: 14px;
}

.dmv-world .dmvq-callout p {
  margin: 0;
  color: var(--dw-ink-soft);
}

.dmv-world .dmvq-callout-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--dw-line);
  color: var(--dw-green-deep);
  font-size: 0;
}

.dmv-world .dmvq-howto {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dmv-step;
  display: grid;
  gap: 0;
  border: 1px solid var(--dw-line);
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.dmv-world .dmvq-howto li {
  counter-increment: dmv-step;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border-bottom: 1px solid var(--dw-line);
  color: var(--dw-ink-soft);
}

.dmv-world .dmvq-howto li:last-child {
  border-bottom: 0;
}

.dmv-world .dmvq-howto li::before {
  content: counter(dmv-step);
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-family: var(--dw-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dw-authority);
  background: var(--dw-bg-soft);
  border: 1px solid var(--dw-line);
}

.dmv-world .dmvq-lede {
  color: var(--dw-muted);
  font-size: 1.02rem;
  margin: 0 0 22px;
  max-width: 70ch;
}

.dmv-world .dmvq-test-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.dmv-world .dmvq-test-list li a {
  display: grid;
  place-items: center;
  min-height: 64px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--dw-line);
  border-radius: 12px;
  font-weight: 800;
  color: var(--dw-ink);
  text-decoration: none;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.dmv-world .dmvq-test-list li a:hover {
  border-color: var(--dw-green);
  transform: translateY(-2px);
  box-shadow: var(--dw-shadow-sm);
}

.dmv-world .dmvq-test-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--dw-line);
  border-bottom: 1px solid var(--dw-line);
  margin-bottom: 18px;
}

.dmv-world .dmvq-test-nav a {
  font-weight: 700;
}

.dmv-world .dmvq-source-note {
  font-size: 0.86rem;
  color: var(--dw-muted);
}

/* FAQ and prose */
.dmv-world .body-main details {
  border: 1px solid var(--dw-line);
  border-radius: 12px;
  padding: 0 18px;
  margin: 0 0 8px;
  background: #ffffff;
}

.dmv-world .body-main details summary {
  padding: 14px 0;
  font-weight: 700;
  color: var(--dw-ink);
  cursor: pointer;
}

.dmv-world .body-main details p {
  margin: 0 0 14px;
  color: var(--dw-muted);
}

.dmv-world .body-main .kicker {
  display: none;
}

/* Static question list (crawlable copy of the bank) */
.dmv-world .dmvq-static-list {
  gap: 10px;
}

.dmv-world .dmvq-static-item {
  border: 1px solid var(--dw-line);
  border-radius: 12px;
  padding: 16px 18px;
  background: #ffffff;
}

.dmv-world .dmvq-static-q {
  font-weight: 700;
  color: var(--dw-ink);
}

.dmv-world .dmvq-static-n {
  font-family: var(--dw-mono);
  color: var(--dw-green-text);
  font-weight: 700;
}

.dmv-world .dmvq-static-choices {
  color: var(--dw-muted);
}

/* ---------- State facts page ---------- */

.dmv-world .info-panel {
  padding: 22px;
  border: 1px solid var(--dw-line);
  border-radius: 14px;
  background: #ffffff;
}

.dmv-world .check-list li {
  color: var(--dw-ink-soft);
}

.dmv-world .dmvq-fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.dmv-world .dmvq-fact-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--dw-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(11, 26, 15, 0.05);
}

.dmv-world .dmvq-fact-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--dw-green-50);
  color: var(--dw-green-deep);
  font-size: 0;
}

.dmv-world .dmvq-fact-label {
  font-family: var(--dw-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dw-muted);
}

.dmv-world .dmvq-fact-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dw-ink);
  line-height: 1.4;
}

.dmv-world .dmvq-tips {
  display: grid;
  gap: 10px;
}

.dmv-world .dmvq-tip {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--dw-line);
  border-radius: 14px;
}

.dmv-world .dmvq-tip-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--dw-green-50);
  color: var(--dw-green-deep);
}

.dmv-world .dmvq-topic-bars {
  display: grid;
  gap: 8px;
}

.dmv-world .dmvq-topic-bar-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
}

.dmv-world .dmvq-topic-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--dw-bg-deep);
  overflow: hidden;
}

.dmv-world .dmvq-topic-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--dw-green) !important;
}

.dmv-world .dmvq-topic-bar-count {
  font-family: var(--dw-mono);
  font-weight: 700;
  color: var(--dw-green-text);
  text-align: right;
}

.dmv-world .dmvq-cheat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .dmv-world .page-hero-row {
    grid-template-columns: 1fr;
  }

  .dmv-world .dmvq-layout {
    grid-template-columns: 1fr;
  }

  .dmv-world .dmvq-sidebar {
    position: static;
  }
}

@media (max-width: 720px) {
  .dmv-world .page-hero.page-hero--dark {
    padding: 36px 0 28px;
  }

  .dmv-world .page-hero-meta {
    grid-template-columns: repeat(2, 1fr);
  }

  .dmv-world .page-hero-meta-item:nth-child(2n) {
    border-right: 0;
  }

  .dmv-world .page-hero-meta-item:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .dmv-world .dmvq {
    padding: 18px;
    border-radius: 16px;
  }

  .dmv-world .dmvq-start-cta .inner {
    margin-top: 18px;
    padding: 16px 18px;
  }

  .dmv-world .dmvq-start-cta-link.btn {
    width: 100%;
  }

  .dmv-world .dmvq-topic-bar-row {
    grid-template-columns: 110px minmax(0, 1fr) 56px;
  }

  .dmv-world .dmvq-page .section,
  .dmv-world .dmvq-page .dmvq-section {
    padding: 36px 0;
  }
}


/* Mobile overflow guard: the grid children must be allowed to shrink and the
   progress strip scrolls inside the card instead of widening it. */
.dmv-world .dmvq-layout > * {
  min-width: 0;
}

.dmv-world .dmvq-progress-track {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--dw-rule) transparent;
}

.dmv-world .dmvq-progress-track .dmvq-progress-cell {
  flex: 0 0 34px;
}

.dmv-world .dmvq-progress-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}

@media (max-width: 720px) {
  .dmv-world .dmvq {
    overflow: hidden;
  }

  .dmv-world .dmvq-actions--sticky .dmvq-btn {
    white-space: nowrap;
    padding: 0 16px;
    min-height: 46px;
  }

  .dmv-world .dmvq-actions--sticky .dmvq-btn--audio {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.dmv-world .dmvq-ring circle:first-of-type {
  stroke: var(--dw-bg-deep);
}

.dmv-world .dmvq-ring circle:last-of-type {
  stroke: var(--dw-gold);
}


/* ---------- Fix round 1 (finish review) ---------- */

/* Mode picker: no card inside a card. Stages are hairline groups, modes are rows. */
.dmv-world .dmvq-modes {
  gap: 0;
  margin-top: 18px;
  border-top: 1px solid var(--dw-line);
}

.dmv-world .dmvq-stage {
  padding: 18px 0 20px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--dw-line);
  border-radius: 0;
  box-shadow: none;
}

.dmv-world .dmvq-stage-head {
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.dmv-world .dmvq-stage-badge {
  width: auto;
  height: auto;
  flex-basis: auto;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--dw-mono);
  font-size: 0.78rem;
  color: var(--dw-muted);
}

.dmv-world .dmvq-stage-badge::after {
  content: " /";
}

.dmv-world .dmvq-stage-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--dw-line);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.dmv-world .dmvq-mode,
.dmv-world .dmvq-mode--primary,
.dmv-world .dmvq-mode--sky,
.dmv-world .dmvq-mode--violet,
.dmv-world .dmvq-mode--amber,
.dmv-world .dmvq-mode--rose,
.dmv-world .dmvq-mode--ember {
  border: 0;
  border-top: 1px solid var(--dw-line);
  border-radius: 0;
  box-shadow: none;
  padding: 13px 16px;
}

.dmv-world .dmvq-stage-actions > .dmvq-mode:first-child {
  border-top: 0;
}

.dmv-world .dmvq-mode:hover {
  transform: none;
  box-shadow: none;
  background: var(--dw-bg-soft);
  border-color: var(--dw-line);
}

.dmv-world .dmvq-mode--primary {
  background: var(--dw-green-50);
}

.dmv-world .dmvq-mode--primary:hover {
  background: var(--dw-green-50);
}

.dmv-world .dmvq-mode-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.dmv-world .dmvq-mode-icon svg {
  width: 17px;
  height: 17px;
}

/* Quick facts: a hairline definition table, not a card grid. */
.dmv-world .dmvq-fact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--dw-line);
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.dmv-world .dmvq-fact-card {
  display: grid;
  grid-template-columns: 32px 220px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: 14px 18px;
  border: 0;
  border-top: 1px solid var(--dw-line);
  border-radius: 0;
  box-shadow: none;
}

.dmv-world .dmvq-fact-grid > .dmvq-fact-card:first-child {
  border-top: 0;
}

.dmv-world .dmvq-fact-card > div {
  display: contents;
}

.dmv-world .dmvq-fact-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  margin-top: 1px;
}

.dmv-world .dmvq-fact-icon svg {
  width: 17px;
  height: 17px;
}

.dmv-world .dmvq-fact-label {
  margin: 6px 0 0;
  align-self: start;
}

.dmv-world .dmvq-fact-value {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--dw-ink);
  line-height: 1.55;
}

/* Results: the score is the display figure, not a nub on a ring. */
.dmv-world .dmvq-score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 22px 24px;
}

.dmv-world .dmvq-ring {
  width: auto;
  height: auto;
  overflow: visible;
}

.dmv-world .dmvq-ring circle {
  display: none;
}

.dmv-world .dmvq-ring text {
  font-family: var(--dw-font);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.04em;
  fill: var(--dw-gold);
  font-variant-numeric: tabular-nums;
}

/* Sticky mobile action bar: two buttons share the row inside the gutter. */
@media (max-width: 720px) {
  .dmv-world .dmvq-actions--sticky {
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .dmv-world .dmvq-actions--sticky .dmvq-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dmv-world .dmvq-actions--sticky .dmvq-btn--audio {
    flex: 1 1 0;
  }
}

/* Rhythm and one container on the practice hub. */
.dmv-world .body-main {
  max-width: none;
  margin: 0;
}

.dmv-world .dmvq-page .section,
.dmv-world .dmvq-page .dmvq-section {
  padding: 40px 0;
}

.dmv-world .dmvq-page .section + .section,
.dmv-world .dmvq-page .section + .dmvq-section,
.dmv-world .dmvq-page .dmvq-section + .section,
.dmv-world .dmvq-page .dmvq-section + .dmvq-section {
  padding-top: 0;
}

.dmv-world .dmvq-page .section > .inner > p:last-child,
.dmv-world .dmvq-page .dmvq-container > p:last-child {
  margin-bottom: 0;
}

.dmv-world .dmvq-test-list {
  margin-bottom: 12px;
}

.dmv-world .dmvq-section[aria-labelledby="numbered-heading"] {
  background: var(--dw-bg-soft);
  border-top: 1px solid var(--dw-line);
  border-bottom: 1px solid var(--dw-line);
  padding: 40px 0 !important;
  margin: 24px 0;
}

.dmv-world section:has(> .inner > .dmvq-static-list),
.dmv-world section:has(.dmvq-static-list) {
  background: var(--dw-bg-soft);
  border-top: 1px solid var(--dw-line);
  padding: 44px 0 !important;
  margin-top: 24px;
}

.dmv-world section:has(.dmvq-static-list) h2 {
  padding: 22px 26px;
  border-radius: 16px;
  color: #ffffff;
  background:
    radial-gradient(500px 200px at 90% 0%, rgba(34, 224, 122, 0.2) 0, rgba(34, 224, 122, 0) 65%),
    linear-gradient(150deg, #0a2a1d, #07120d);
  border: 1px solid rgba(34, 224, 122, 0.3);
  max-width: none;
  margin-bottom: 18px;
}

.dmv-world section:has(.dmvq-static-list) h2 + p {
  color: var(--dw-muted);
}

.dmv-world .dmvq-page .section:has(.dmvq-callout) {
  padding-top: 24px;
}

@media (max-width: 720px) {
  .dmv-world .dmvq-fact-card {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .dmv-world .dmvq-fact-label {
    grid-column: 2;
    margin-top: 0;
  }

  .dmv-world .dmvq-fact-value {
    grid-column: 2;
  }
}


.dmv-world .dmvq-stage-badge {
  white-space: nowrap;
  align-self: baseline;
}

.dmv-world .dmvq-ring,
.dmv-world .dmvq-ring text,
.dmv-world .dmvq-score {
  filter: none;
  text-shadow: none;
}


.dmv-world .dmvq-stage-badge {
  display: inline-flex;
  gap: 4px;
  place-items: unset;
}


/* Verdict-pass fixes: score legibility on light ground, one row idiom. */
.dmv-world .dmvq-ring text {
  fill: var(--dw-authority);
}

.dmv-world .dmvq-mode--primary,
.dmv-world .dmvq-mode--primary:hover {
  background: #ffffff;
}

.dmv-world .dmvq-mode--primary:hover {
  background: var(--dw-bg-soft);
}

.dmv-world .dmvq-mode--primary .dmvq-mode-title {
  color: var(--dw-green-deep);
}


/* ---------- Fix round (baohiemxe finish review), applied to both sites ---------- */

/* Mono only for counts. Labels and eyebrow lines use the house face. */
.dmv-world .dmvq-eyebrow,
.dmv-world .dmvq-sidebar-title,
.dmv-world .dmvq-topic-miss-title,
.dmv-world .dmvq-fact-label,
.dmv-world .dmvq-sample-topic,
.dmv-world .page-hero-meta-item dt,
.dmv-world .page-hero--dark .page-hero-meta-item dt,
.dmv-world .page-hero-cta .aside-kicker {
  font-family: var(--dw-font);
  letter-spacing: 0.06em;
}

/* The quiz card's first line is an information line, not a kicker. */
.dmv-world .dmvq-eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--dw-muted);
}

.dmv-world .dmvq-topic-miss-title,
.dmv-world .dmvq-sidebar-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.84rem;
  font-weight: 600;
}

.dmv-world .dmvq-stage-badge {
  font-family: var(--dw-font);
  font-weight: 700;
}

/* Results: figure over verdict on narrow screens, left aligned. */
@media (max-width: 720px) {
  .dmv-world .dmvq-score {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: left;
    padding: 18px;
  }

  .dmv-world .dmvq-ring {
    justify-self: start;
  }

  .dmv-world .dmvq-verdict {
    text-align: left;
    margin: 0;
  }
}

/* Mobile progress strip: scrollable with a visible edge fade. */
.dmv-world .dmvq-progress-mobile {
  position: relative;
}

.dmv-world .dmvq-progress-track {
  padding-right: 28px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

/* Source line inside the explanation sits on its own line. */
.dmv-world .dmvq-explain .dmvq-source-citation {
  display: block;
  margin-top: 8px;
}

/* Native disclosure marker drawn as a chevron in the world's stroke. */
.dmv-world details > summary {
  list-style: none;
  position: relative;
  padding-left: 22px;
}

.dmv-world details > summary::-webkit-details-marker {
  display: none;
}

.dmv-world details > summary::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.75px solid var(--dw-green-deep);
  border-bottom: 1.75px solid var(--dw-green-deep);
  transform: translateY(-60%) rotate(-45deg);
  transition: transform 0.16s;
}

.dmv-world details[open] > summary::before {
  transform: translateY(-70%) rotate(45deg);
}

.dmv-world .dmvq-restart-btn svg {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 4px;
}


.dmv-world .body-main details summary,
.dmv-world .dmvq-review summary {
  padding-left: 22px;
}


/* Counts in mono, the word beside them in the house face. */
.dmv-world .dmvq-topic-miss-row strong {
  font-family: var(--dw-font);
  font-weight: 700;
}

.dmv-world .dmvq-topic-miss-row strong .dmvq-num {
  font-family: var(--dw-mono);
  font-variant-numeric: tabular-nums;
}

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

/* ===== House world, sitewide (Vua Bao Hiem style) =====
   Appended last so it wins at equal specificity. Tokens first, then the
   shared primitives every template uses. Page bodies keep their markup. */

:root {
  --font-display: var(--font-dmvq-display), "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans: var(--font-dmvq-display), "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --brand: #0c7a3d;
  --brand-strong: #0b5d33;
  --brand-bright: #22e07a;
  --brand-soft: #4ade80;
  --bg: #ffffff;
  --bg-soft: #f5f7f6;
  --bg-deep: #eef2f0;
  --card: #ffffff;
  --surface-cool: #f5f7f6;
  --ink: #0a0f0d;
  --ink-warm: #10201a;
  --muted: #586660;
  --muted-light: #7d8c82;
  --text-cool: #0a0f0d;
  --text-cool-muted: #586660;
  --line: #e8ecea;
  --rule: #d8dedb;
  --border-cool: #e8ecea;
  --qs-authority: #073b2a;
  --hw-gold: #c9a24a;
  --hw-shadow: 0 18px 50px rgba(7, 20, 14, 0.12);
  --hw-shadow-sm: 0 6px 20px rgba(7, 20, 14, 0.08);
}

html {
  font-family: var(--font-sans);
  color: var(--ink);
}

::selection {
  background: rgba(34, 224, 122, 0.35);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid #16a34a;
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1 { font-weight: 900; letter-spacing: -0.035em; }
h2 { font-weight: 800; }
h3 { font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Header ---------- */

.topbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.topbar-inner { min-height: 72px; }

.brand .brand-text,
.brand strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--ink);
  line-height: 1;
}

.brand .brand-mark { height: 48px; width: auto; }

.topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  margin-right: 10px;
}

.topnav a {
  border-radius: 8px;
  color: var(--ink-warm);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 8px 12px;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.topnav a:hover {
  background: var(--bg-deep);
  color: var(--brand);
}

.topnav a.topnav-muted { color: var(--muted); }

.btn-primary,
button.btn:not(.btn-ghost):not(.btn-secondary):not(.btn-dark),
a.btn:not(.btn-ghost):not(.btn-secondary):not(.btn-dark) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: linear-gradient(145deg, var(--brand-bright), #16a34a);
  color: #04140b;
  box-shadow: var(--hw-shadow-sm);
  transition: transform 0.16s, box-shadow 0.16s, background 0.16s, border-color 0.16s;
}

.btn-primary:hover,
a.btn:not(.btn-ghost):not(.btn-secondary):not(.btn-dark):hover,
button.btn:not(.btn-ghost):not(.btn-secondary):not(.btn-dark):hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(11, 93, 51, 0.32);
  background: linear-gradient(145deg, var(--brand-bright), #16a34a);
  color: #04140b;
  border-color: transparent;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.96rem;
  text-decoration: none;
  cursor: pointer;
  background: #ffffff;
  color: var(--brand-strong);
  border: 1px solid var(--line);
  box-shadow: none;
  transition: border-color 0.16s, background 0.16s;
}

.btn-ghost:hover {
  border-color: #16a34a;
  background: var(--bg-soft);
  color: var(--brand-strong);
}

/* Utility bar */

/* Mobile bar and drawer */

/* DMV lean header: visible on phones with a details menu. */
.dmv-mobile-nav { display: none; }

@media (max-width: 759px) {
  .topbar.dmvq-topbar { display: block; }
  .dmvq-topbar .topbar-inner { min-height: 60px; gap: 10px; }
  .dmvq-topbar .topnav { display: none; }
  .dmvq-topbar .brand .brand-mark { height: 36px; }
  .dmvq-topbar .brand .brand-text { font-size: 1.3rem; }
  .dmv-mobile-nav { display: block; margin-left: auto; }
  .dmv-mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    color: var(--ink);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    list-style: none;
  }
  .dmv-mobile-nav-toggle::-webkit-details-marker { display: none; }
  .dmv-mobile-nav-toggle::marker { content: ""; }
  .dmv-mobile-nav-bars {
    width: 16px;
    height: 12px;
    background: linear-gradient(var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 7px, transparent 7px 10px, var(--ink) 10px 12px);
  }
  .dmv-mobile-nav[open] .dmv-mobile-nav-toggle { border-color: #16a34a; background: var(--bg-soft); }
  .dmv-mobile-nav-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: grid;
    gap: 2px;
    padding: 10px 16px 14px;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(11, 26, 15, 0.16);
  }
  .dmv-mobile-nav-panel a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--ink-warm);
    font-weight: 600;
    text-decoration: none;
  }
  .dmv-mobile-nav-panel a:hover { background: var(--bg-soft); color: var(--brand); }
  .dmv-mobile-nav-panel a.topnav-muted { color: var(--muted); border-top: 1px solid var(--line); margin-top: 6px; border-radius: 0; }
  .dmvq-topbar { position: sticky; top: 0; z-index: 30; }
  .dmvq-topbar .topbar-inner { position: relative; }
}

/* All-states picker: native details, server-rendered links, no JS required. */
.dmv-all-states { position: relative; }
.dmv-all-states-toggle { cursor: pointer; list-style: none; font-weight: 600; }
.dmv-all-states-toggle::-webkit-details-marker { display: none; }
.dmv-all-states-toggle::marker { content: ""; }
.dmv-all-states-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  width: min(560px, 92vw);
  max-height: 60vh;
  overflow: auto;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(11, 26, 15, 0.16);
}
.dmv-all-states--footer .dmv-all-states-panel { position: static; width: auto; max-height: none; box-shadow: none; }
.dmv-all-states-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dmv-all-states-list a { display: block; padding: 6px 4px; }

/* Key facts: a dedicated definition table (label | value + source), kept
   separate from the Quick facts dmvq-fact-* grid, whose first column is
   reserved for an icon this block does not render. */
.dmv-keyfacts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}
.dmv-keyfacts-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}
.dmv-keyfacts-row:first-child { border-top: 0; }
.dmv-keyfacts-label {
  grid-column: 1;
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.dmv-keyfacts-body { grid-column: 2; min-width: 0; }
.dmv-keyfacts-value { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.dmv-keyfacts-source { margin: 4px 0 0; font-size: 0.86rem; }
.dmv-keyfacts-source a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 720px) {
  .dmv-keyfacts-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .dmv-keyfacts-label, .dmv-keyfacts-body { grid-column: 1; }
}

/* ---------- Sections, headings, cards ---------- */

.section { padding: 72px 0; }

.lede {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.55;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #166534;
  background: #e2f0e7;
  padding: 6px 13px;
  border-radius: 999px;
}

a.card,
.card,
.info-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(11, 26, 15, 0.05);
}

a.card:hover {
  border-color: #16a34a;
  box-shadow: var(--hw-shadow-sm);
  transform: translateY(-2px);
}

a.card h3, a.card strong { color: var(--brand-strong); }

/* ---------- Heroes: every dark hero is the ink hero ---------- */

.page-hero--dark {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(700px 360px at 82% 0%, rgba(34, 224, 122, 0.16) 0, rgba(34, 224, 122, 0) 60%),
    linear-gradient(180deg, #07120d 0%, #0a0f0d 100%);
}

.page-hero--dark::before,
.page-hero--dark::after { display: none; }

.page-hero--dark .page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: #ffffff;
  max-width: 900px;
  text-wrap: balance;
}

.page-hero--dark .page-hero-lede { color: #9fb6ab; }

.page-hero--dark .page-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-bright);
  background: rgba(34, 224, 122, 0.12);
  border: 1px solid rgba(34, 224, 122, 0.3);
  border-radius: 999px;
  padding: 6px 13px;
}

.page-hero--dark .breadcrumb a { color: #9fb6ab; }

.page-hero-cta-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.74rem;
  line-height: 1.5;
  color: #9fb6ab;
}

/* Light page hero (insurance interiors) */
.page-hero:not(.page-hero--dark) {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.page-hero:not(.page-hero--dark) .page-hero-title {
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--ink);
}

.page-hero:not(.page-hero--dark) .page-hero-cta {
  background: linear-gradient(150deg, #0a2a1d, #07120d);
  border: 1px solid rgba(34, 224, 122, 0.3);
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: var(--hw-shadow);
  color: #ffffff;
}

.page-hero:not(.page-hero--dark) .page-hero-cta .aside-kicker { color: #9fb6ab; }
.page-hero:not(.page-hero--dark) .page-hero-cta-phone { color: var(--brand-bright); font-family: var(--font-mono); font-weight: 700; font-size: 1.5rem; }
.page-hero:not(.page-hero--dark) .page-hero-cta-meta { color: #9fb6ab; }

.page-hero-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 12px;
  font-weight: 700;
  color: #04140b;
  background: linear-gradient(145deg, var(--brand-bright), #16a34a);
  text-decoration: none;
  box-shadow: var(--hw-shadow-sm);
}

/* Homepage hero keeps its light ground, in the house type and materials */

/* ---------- Forms ---------- */

input, select, textarea {
  border: 1px solid #cfdbd0;
  border-radius: 11px;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font-sans);
}

input:focus, select:focus, textarea:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
  outline: 0;
}

/* ---------- FAQ ---------- */

/* ---------- Footer ---------- */

.footer {
  background: #0f1b14;
  color: #9fb0a3;
  border-top: 1px solid #1c3026;
}

.footer a { color: #94a399; }
.footer a:hover { color: #4ade80; }

.footer-col h2.footer-col-h,
.footer-col h3,
.footer-col-h {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #cbd6cf;
}

.footer-copy,
.footer-fineprint p { color: #9fb0a3; }
.footer-divider { background: #1c3026; }

/* ---------- Tables ---------- */

table { border-collapse: collapse; }
th {
  text-align: left;
  background: var(--bg-soft);
  color: var(--qs-authority);
  font-weight: 800;
  font-size: 0.8rem;
  border-bottom: 2px solid #16a34a;
}
td { border-bottom: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary, a.card { transition: none; }
}

/* ---------- House world, round 2 ---------- */

/* Homepage hero is the ink hero, like the sister site. */

/* Body aside contact card: the dark feature card, not a flat green block. */

/* Mobile phone button keeps its glyph visible */

.dmv-world .dmv-mobile-nav-toggle::before { display: none; }
.dmv-world .dmv-mobile-nav-toggle { padding-left: 12px; }

/* Button text stays dark on the green gradient; beats the legacy !important whites. */
.btn-primary, .btn-primary:hover, .page-hero-cta-btn, .page-hero-cta-btn:hover { color: #04140b !important; }

/* ---------- House world, round 3 (finish review) ---------- */

/* Review pill on dark panels reads white. */

/* Stars: the world's gold, darkened enough to hold 3:1 on white. */
.stars, .stars svg { color: #a8862f; fill: #a8862f; }

/* Sticky call bar never covers the page's own last control. */
@media (max-width: 759px) {
  .site-shell #main-content { padding-bottom: 84px; }
  .dmvq-shell #main-content { padding-bottom: 0; }
}

/* Body cards carry the world's lift. */
a.card, .info-panel { box-shadow: var(--hw-shadow-sm); }

/* One dark band on the homepage body, and gold earns the license number. */
.section:has(> .inner > .scenarios) {
  position: relative;
  color: #ffffff;
  background:
    radial-gradient(700px 360px at 82% 0%, rgba(34, 224, 122, 0.16) 0, rgba(34, 224, 122, 0) 60%),
    linear-gradient(180deg, #07120d 0%, #0a0f0d 100%);
}
.section:has(> .inner > .scenarios) h2 { color: #ffffff; }
.section:has(> .inner > .scenarios) p { color: #9fb6ab; }

.page-hero:not(.page-hero--dark) .page-hero-meta-item:nth-child(2) dd { color: #a8862f; font-family: var(--font-mono); font-weight: 700; }

/* ---------- House world, round 4 ---------- */
.trust-strip-stars, .trust-strip-stars svg, .trust-strip-stars span { color: #a8862f !important; fill: #a8862f; }

/* /quote aside: one contact card, not two identical ones. */

/* License value: house face, normal tracking. */
.page-hero:not(.page-hero--dark) .page-hero-meta-item:nth-child(2) dd { font-family: var(--font-display); letter-spacing: 0; }

@media (max-width: 759px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* /quote aside: the page supplies its own broker card; hide the generic duplicate. */

/* Header primary action: solid deep green with white text. */

/* DMV practice accessibility: preserve readable labels and 44px hit areas. */
.dmv-world .breadcrumb a,
.dmv-world .dmvq-test-nav a,
.dmv-world .dmvq-test-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}
.dmv-world .dmvq-test-tile,
.dmv-world .dmvq-link-card {
  min-height: 44px;
  min-width: 44px;
}
.dmv-world .dmvq-test-tile-label { color: #526158; }
.dmv-world .dmvq-xp-badge { opacity: 1; filter: none; }
.dmv-world .dmvq-xp-badge:not(.dmvq-xp-badge--on) .dmvq-xp-badge-emoji {
  opacity: 0.5;
  filter: grayscale(0.7);
}
.dmvq-score { scroll-margin-top: 104px; }
.dmv-world .dmvq-test-tile--current { background: #0b5d33; }
.dmv-world .dmvq-test-tile--current .dmvq-test-tile-label { color: #ffffff; }

/* Age group picker for states whose test length depends on age (CA: 36/30 at 18+, 46/38 under 18). */
.dmvq-age {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 12px 0 16px;
}

.dmvq-age-label {
  flex-basis: 100%;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dw-ink, #0b1a0f);
}

.dmvq-age-option {
  display: grid;
  gap: 2px;
  flex: 1 1 150px;
  min-height: 44px;
  padding: 10px 14px;
  text-align: left;
  font: inherit;
  color: var(--dw-ink, #0b1a0f);
  background: #ffffff;
  border: 1px solid var(--dw-line, #d9e2dc);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.dmvq-age-option:hover {
  border-color: var(--dw-green, #16a34a);
}

.dmvq-age-option:focus-visible {
  outline: 3px solid var(--dw-green, #16a34a);
  outline-offset: 2px;
}

.dmvq-age-option--selected {
  border-color: var(--dw-green, #16a34a);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.dmvq-age-option-title {
  font-weight: 700;
}

.dmvq-age-option-sub {
  font-size: 0.8rem;
  color: var(--dw-muted, #4b5a50);
  font-variant-numeric: tabular-nums;
}

.dmvq-age-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

/* DMV first-screen entry: hero without the call panel, state picker, hub start button. */
.dmv-world .page-hero-row--solo {
  grid-template-columns: minmax(0, 1fr);
}
.dmv-world .page-hero-text > .btn {
  margin-top: 18px;
}
.dmv-world .page-hero-text > .btn + .page-hero-lede,
.dmv-world .page-hero-text > .dmvq-state-picker + .page-hero-lede {
  margin-top: 20px;
}
.dmvq-state-picker {
  margin: 20px 0 4px;
  max-width: 520px;
}
.dmvq-state-picker-label {
  display: block;
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 1rem;
  color: #ffffff;
}
.dmvq-state-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dmvq-state-picker select {
  flex: 1 1 220px;
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 1rem;
  color: #0b1a0f;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
}
.dmvq-state-picker select:focus-visible {
  outline: 3px solid #22e07a;
  outline-offset: 2px;
}
.dmv-world .dmvq-state-picker .dmvq-state-picker-go {
  flex: 1 0 120px;
  width: auto;
  max-width: 100%;
  min-height: 48px;
  margin: 0;
}
@media (min-width: 560px) {
  .dmv-world .dmvq-state-picker .dmvq-state-picker-go {
    flex: 0 0 auto;
  }
}
.dmvq-state-picker-hint {
  margin: 8px 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fde68a;
}
.dmvq-call-section .page-hero-cta {
  max-width: 420px;
}

/* Answered-question bar: the audio label wraps instead of being clipped. */
@media (max-width: 720px) {
  .dmv-world .dmvq-actions--sticky .dmvq-btn--audio {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
    line-height: 1.2;
    gap: 6px;
    padding: 4px 10px;
  }
  .dmv-world .dmvq-actions--sticky .dmvq-btn--audio svg {
    flex: 0 0 auto;
  }
}
.dmvq-btn-audio-label {
  text-align: left;
}

/* Results: next step for numbered tests. */
.dmvq-next-step {
  margin-top: 16px;
}
.dmvq-next-step .dmvq-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Finished numbered tests: best score on the tile / list item. */
.dmvq-test-tile-score {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #0b5d33;
  font-variant-numeric: tabular-nums;
}
.dmvq-test-tile--done {
  border-color: #16a34a;
}
.dmv-world .dmvq-test-tile--current .dmvq-test-tile-score {
  color: #ffffff;
}
.dmvq-test-done {
  font-weight: 700;
  font-size: 0.85em;
  color: #0b5d33;
  font-variant-numeric: tabular-nums;
}
.dmv-world .dmvq-test-list li.dmvq-test-list-item--done a {
  border-color: #16a34a;
}

/* Dark DMV heroes: breadcrumb links keep the light hero color (the generic
   .dmvq-page link green is 3.5:1 on the ink hero; this is about 9:1). */
.dmv-world .dmvq-page .page-hero--dark .breadcrumb a:not(.btn):not(.dmvq-btn):not(.page-hero-cta-btn):not(.page-hero-cta-phone):not(.dmvq-start-cta-link):not(.dmvq-test-list li a):not(.dmvq-dir-name):not(.dmvq-path) {
  color: #9fb6ab;
  font-weight: 500;
}
.dmv-world .dmvq-page .page-hero--dark .breadcrumb a:not(.btn):not(.dmvq-btn):not(.page-hero-cta-btn):not(.page-hero-cta-phone):not(.dmvq-start-cta-link):not(.dmvq-test-list li a):hover {
  color: #ffffff;
}
.dmv-world .page-hero--dark .breadcrumb-sep {
  color: rgba(246, 251, 246, 0.62);
}

/* ===== DMV learning engine (wave 2): topic mastery, drills, why-not, report, stars ===== */
.dmv-world .dmvq-star {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: 1px;
  padding: 0;
  border: 1px solid var(--dw-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--dw-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.dmv-world .dmvq-star:hover {
  color: var(--dw-ink);
  border-color: var(--dw-rule);
}
.dmv-world .dmvq-star--on,
.dmv-world .dmvq-star--on:hover {
  color: #a16207;
  background: #fffbeb;
  border-color: #f3d98b;
}

.dmv-world .dmvq-drill-tag {
  display: inline-block;
  margin: 6px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--dw-green-50);
  border: 1px solid var(--dw-green-100);
  color: var(--dw-green-deep);
  font-size: 0.8rem;
  font-weight: 700;
}
.dmv-world .dmvq-adapt-note {
  padding: 8px 12px;
  border-left: 3px solid var(--dw-green);
  background: var(--dw-bg-soft);
  border-radius: 0 10px 10px 0;
}

.dmv-world .dmvq-why-not {
  display: block;
  margin: 8px 0 10px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--dw-danger-100);
  border-radius: 10px;
  color: var(--dw-ink-soft);
}
.dmv-world .dmvq-why-not strong {
  color: var(--dw-danger);
}

.dmv-world .dmvq-report {
  margin: 8px 0 0;
}
.dmv-world .dmvq-report-link {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--dw-muted);
  font: inherit;
  font-size: 0.84rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.dmv-world .dmvq-report-link:hover {
  color: var(--dw-ink);
}
.dmv-world .dmvq-report-form {
  display: grid;
  gap: 6px;
  margin-top: 4px;
  padding: 14px 16px;
  background: var(--dw-bg-soft);
  border: 1px solid var(--dw-line);
  border-radius: 14px;
}
.dmv-world .dmvq-report-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--dw-ink);
}
.dmv-world .dmvq-report-form select,
.dmv-world .dmvq-report-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--dw-rule);
  border-radius: 10px;
  background: #ffffff;
  color: var(--dw-ink);
  font: inherit;
  font-size: 16px;
}
.dmv-world .dmvq-report-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.dmv-world .dmvq-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.dmv-world .dmvq-report-error {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: var(--dw-danger);
}
.dmv-world .dmvq-report-error a {
  color: inherit;
  font-weight: 700;
}
.dmv-world .dmvq-report-thanks {
  margin: 10px 0 0;
  font-size: 0.88rem;
  color: var(--dw-green-deep);
  font-weight: 600;
}
.dmv-world .dmvq-feedback {
  margin-top: 14px;
}
.dmv-world .dmvq-feedback-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dmv-world .dmvq-community-qa {
  margin-top: 8px;
}
.dmv-world .dmvq-community-answer {
  margin: 8px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--dw-green);
  background: var(--dw-bg-soft);
  border-radius: 0 10px 10px 0;
}
.dmv-world .dmvq-community-answer-text {
  margin: 4px 0 0;
  white-space: pre-wrap;
}
.dmv-world .dmvq-feedback-choices [aria-pressed="true"] {
  border-color: var(--dw-green);
  background: var(--dw-bg-soft);
  font-weight: 700;
}

.dmv-world .dmvq-topics {
  margin: 22px 0 0;
  padding: 18px;
  background: var(--dw-bg-soft);
  border: 1px solid var(--dw-line);
  border-radius: 16px;
}
.dmv-world .dmvq-topics-head {
  margin: 0 0 10px;
}
.dmv-world .dmvq-topics-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dw-ink);
}
.dmv-world .dmvq-topics-summary {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--dw-muted);
}
.dmv-world .dmvq-topics-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dmv-world .dmvq-topics-list li {
  margin: 0;
}
.dmv-world .dmvq-topic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name chip" "meta go";
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid var(--dw-line);
  border-radius: 12px;
  color: var(--dw-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dmv-world .dmvq-topic-row:hover {
  border-color: var(--dw-green);
  box-shadow: var(--dw-shadow-sm);
}
.dmv-world .dmvq-topic-name {
  grid-area: name;
  color: var(--dw-ink);
  font-weight: 700;
  font-size: 0.95rem;
}
.dmv-world .dmvq-topic-meta {
  grid-area: meta;
  font-size: 0.8rem;
  color: var(--dw-muted);
  font-variant-numeric: tabular-nums;
}
.dmv-world .dmvq-topic-go {
  grid-area: go;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dw-green-text);
}
.dmv-world .dmvq-topic-chip {
  grid-area: chip;
  justify-self: end;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.dmv-world .dmvq-topic-chip--aced {
  background: var(--dw-green-50);
  border-color: var(--dw-green-100);
  color: var(--dw-green-deep);
}
.dmv-world .dmvq-topic-chip--fair {
  background: #fffbeb;
  border-color: #f3d98b;
  color: #854d0e;
}
.dmv-world .dmvq-topic-chip--weak {
  background: var(--dw-danger-50);
  border-color: var(--dw-danger-100);
  color: var(--dw-danger);
}
/* Without a status chip the drill cue takes the top row. */
.dmv-world .dmvq-topic-row:not(:has(.dmvq-topic-chip)) {
  grid-template-areas: "name go" "meta go";
}
.dmv-world .dmvq-topics-legend {
  margin: 12px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--dw-muted);
}
@media (max-width: 720px) {
  .dmv-world .dmvq-topics {
    padding: 14px;
  }
  .dmv-world .dmvq-topics-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .dmv-world .dmvq-topic-row {
    min-height: 48px;
    padding: 8px 12px;
  }
}

/* ===== DMV comfort + study plan (wave 2 items 9 and 10) =====
   Display menu (theme + larger text), first-visit study setup card, quiz keyboard
   hint, and the DMV dark theme. Every dark rule sits under html[data-dmv-dark]
   .dmv-world, which lib/dmv-comfort.ts sets before first paint, so insurance pages
   are never touched. Sign images keep a light backing in dark mode. */

/* ---------- Display menu in the DMV header ---------- */
.dmv-comfort { position: relative; margin-left: auto; }
.dmv-comfort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--dw-line, #e8ecea);
  border-radius: 10px;
  background: transparent;
  color: var(--dw-ink, #07120d);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.dmv-comfort-toggle::-webkit-details-marker { display: none; }
.dmv-comfort-toggle::marker { content: ""; }
.dmv-world .dmv-comfort-toggle::before { display: none; }
.dmv-world .dmv-comfort-toggle { padding: 0 12px; }
.dmv-comfort[open] .dmv-comfort-toggle { border-color: var(--dw-green, #16a34a); }
.dmv-comfort-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  display: grid;
  gap: 14px;
  width: min(290px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--dw-line, #e8ecea);
  border-radius: 14px;
  background: var(--dw-bg, #ffffff);
  color: var(--dw-ink, #07120d);
  box-shadow: 0 24px 60px rgba(7, 20, 14, 0.18);
}
.dmv-comfort-group { display: grid; gap: 7px; }
.dmv-comfort-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dw-muted, #586660);
}
.dmv-comfort-hint { font-size: 0.8rem; color: var(--dw-muted, #586660); }
.dmv-comfort-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--dw-bg-soft, #f5f7f6);
  border: 1px solid var(--dw-line, #e8ecea);
}
.dmv-comfort-opt {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--dw-ink, #07120d);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.dmv-comfort-opt--on {
  background: var(--dw-bg, #ffffff);
  border-color: var(--dw-green, #16a34a);
  box-shadow: inset 0 0 0 1px var(--dw-green, #16a34a);
}
.dmv-comfort-text {
  justify-self: start;
  border-color: var(--dw-line, #e8ecea);
  padding: 0 14px;
}
.dmv-comfort-text.dmv-comfort-opt--on::before { content: "\2713\00a0"; }
/* Phones: the header has room for the logo and Menu only; the same controls sit
   flat at the bottom of the Menu panel instead. */
@media (max-width: 759px) {
  .dmvq-topbar .dmv-comfort { display: none; }
}
@media (max-width: 374px) {
  .dmvq-topbar .brand .brand-text { font-size: 1.15rem; }
}
.dmv-comfort-inline {
  display: grid;
  gap: 12px;
  margin-top: 6px;
  padding: 12px 12px 4px;
  border-top: 1px solid var(--dw-line, #e8ecea);
  color: var(--dw-ink, #07120d);
}
@media (min-width: 760px) {
  .dmvq-topbar .topbar-inner { gap: 16px; }
  .dmvq-topbar .dmv-comfort { order: 3; margin-left: 0; }
}

/* Contrast fixes found by the wave 2 contrast sweep (light theme):
   the muted "Insurance" nav link sat at 3.1:1 through opacity; the /dmv/practice-test
   hero is a light hero but read the dark hero's pale text colors; the /dmv fee
   note under the table was white at 60% on white. */
.dmvq-topbar .topnav-muted { opacity: 1; color: var(--dw-muted, #586660); }
.dmv-world .page-hero:not(.page-hero--dark) :is(.page-hero-lede, .page-hero-meta-item dt) { color: var(--dw-muted); }
.dmv-world .page-hero:not(.page-hero--dark) .page-hero-meta-item dd { color: var(--dw-ink); }
.dmv-world .page-hero:not(.page-hero--dark) .page-hero-meta-item:first-child dd { color: #7a5a12; }
.dmv-world .page-hero:not(.page-hero--dark) .page-hero-kicker { color: var(--dw-green-text); }
.dmv-world p.dmvq-value-source { color: var(--dw-muted); }

/* ---------- Larger text ----------
   The DMV rules mix px and rem, so a root font-size change would miss half of them.
   zoom scales the whole content area evenly and reflows it to the viewport width. */
html[data-dmv-text="large"] .dmv-world .dmvq-page { zoom: 1.15; }
html[data-dmv-text="large"] .dmv-world .dmvq-topbar { zoom: 1.08; }

/* ---------- Quiz keyboard hint (desktop pointers only) ---------- */
.dmvq-kbd-hint { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .dmv-world .dmvq-kbd-hint {
    display: block;
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--dw-muted);
  }
}
.dmv-world .dmvq-kbd-hint kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 5px;
  border: 1px solid var(--dw-rule);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--dw-bg-soft);
  color: var(--dw-ink);
  font-family: var(--dw-mono);
  font-size: 0.78rem;
  text-align: center;
}

/* ---------- First-visit study setup and plan ---------- */
.dmv-world .dmvq-setup {
  margin: 14px 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--dw-line);
  border-left: 4px solid var(--dw-green);
  border-radius: 14px;
  background: var(--dw-bg-soft);
}
.dmv-world .dmvq-setup--collapsed { padding: 10px 16px; }
.dmv-world .dmvq-setup--collapsed p { margin: 0; font-size: 0.92rem; }
.dmv-world .dmvq-setup-head { display: grid; gap: 2px; margin-bottom: 12px; }
.dmv-world .dmvq-setup .dmvq-setup-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.dmv-world .dmvq-setup-sub { margin: 0; font-size: 0.9rem; color: var(--dw-muted); }
.dmv-world .dmvq-setup-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
@media (max-width: 719px) {
  .dmv-world .dmvq-setup-fields { grid-template-columns: 1fr 1fr; }
  .dmv-world .dmvq-setup-age { grid-column: 1 / -1; order: -1; }
}
.dmv-world .dmvq-setup-field { display: grid; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dmv-world .dmvq-setup-label {
  padding: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--dw-ink);
}
.dmv-world .dmvq-setup-optional { font-weight: 500; color: var(--dw-muted); }
.dmv-world .dmvq-setup select,
.dmv-world .dmvq-setup input[type="date"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--dw-rule);
  border-radius: 10px;
  background: var(--dw-bg);
  color: var(--dw-ink);
  font: inherit;
  font-size: 0.95rem;
}
.dmv-world .dmvq-setup select:focus,
.dmv-world .dmvq-setup input[type="date"]:focus { border-color: var(--dw-green); outline: 2px solid var(--dw-green); outline-offset: 1px; }
.dmv-world .dmvq-setup input[aria-invalid="true"] { border-color: var(--dw-danger); }
.dmv-world .dmvq-setup-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--dw-rule);
  border-radius: 11px;
  background: var(--dw-bg);
}
.dmv-world .dmvq-setup-seg-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dw-ink);
  cursor: pointer;
  text-align: center;
}
.dmv-world .dmvq-setup-seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dmv-world .dmvq-setup-seg-opt--on { background: var(--dw-green-50); box-shadow: inset 0 0 0 2px var(--dw-green); }
.dmv-world .dmvq-setup-seg-opt:has(input:focus-visible) { outline: 2px solid var(--dw-green); outline-offset: 2px; }
.dmv-world .dmvq-setup-help { margin: 8px 0 0; font-size: 0.84rem; color: var(--dw-muted); }
.dmv-world .dmvq-setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.dmv-world .dmvq-setup-actions .dmvq-btn { min-height: 44px; padding: 0 18px; }
.dmv-world .dmvq-setup-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--dw-green-text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(12, 122, 61, 0.4);
  text-underline-offset: 3px;
  cursor: pointer;
}
.dmv-world .dmvq-setup-link:hover { text-decoration-color: currentColor; }
/* Return card (components/dmv/DmvReturnCard.tsx): resume, reviews due, test date, clear my progress. */
.dmv-world .dmvq-return-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dmv-world .dmvq-return-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 0.93rem;
  line-height: 1.45;
}
.dmv-world .dmvq-return-row > span:first-child { flex: 1 1 240px; min-width: 0; }
.dmv-world .dmvq-return-row .dmvq-setup-help:empty { display: none; }
.dmv-world .dmvq-return-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dmv-world .dmvq-return-actions .dmvq-btn { min-height: 44px; padding: 0 18px; }
.dmv-world .dmvq-return-row .dmvq-setup-link,
.dmv-world .dmvq-return-privacy .dmvq-setup-link { min-height: 44px; }
.dmv-world .dmvq-return-confirm {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--dw-line);
  border-radius: 12px;
  background: var(--dw-bg);
}
.dmv-world .dmvq-return--quiet { margin: 10px 0 14px; }
.dmv-world .dmvq-setup-link--muted { color: var(--dw-muted); font-weight: 600; }
.dmv-world .dmvq-setup-actions .dmvq-setup-link { min-height: 44px; }
.dmv-world .dmvq-setup-today {
  padding: 12px 14px;
  border: 1px solid var(--dw-line);
  border-radius: 12px;
  background: var(--dw-bg);
}
.dmv-world .dmvq-setup-today-head { margin: 0 0 6px; font-size: 0.92rem; }
.dmv-world .dmvq-setup-tasks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dmv-world .dmvq-setup-task {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  align-items: baseline;
  gap: 8px;
  font-size: 0.93rem;
  line-height: 1.45;
}
.dmv-world .dmvq-setup-kind {
  font-family: var(--dw-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dw-muted);
}
.dmv-world .dmvq-setup-all { margin-top: 12px; }
.dmv-world .dmvq-setup-all > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--dw-green-text);
  cursor: pointer;
}
.dmv-world .dmvq-setup-days { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.dmv-world .dmvq-setup-day {
  padding: 10px 12px;
  border: 1px solid var(--dw-line);
  border-radius: 12px;
  background: var(--dw-bg);
}
.dmv-world .dmvq-setup-day--today { border-color: var(--dw-green); box-shadow: inset 3px 0 0 var(--dw-green); }
.dmv-world .dmvq-setup-day--past { opacity: 0.8; }
.dmv-world .dmvq-setup-day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; font-size: 0.9rem; }
.dmv-world .dmvq-setup-day-head span { color: var(--dw-muted); }
.dmv-world .dmvq-setup .dmvq-setup-now {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--dw-green-50);
  border: 1px solid var(--dw-green-100);
  color: var(--dw-green-deep);
  font-size: 0.74rem;
  font-weight: 800;
}

/* ---------- Dark theme ----------
   Tokens first: every DMV rule that reads --dw-* or the site tokens flips with them.
   Text tokens become light; the hero, the featured band and the primary buttons were
   already dark-on-bright or light-on-ink and keep their own colors. */
html[data-dmv-dark] { color-scheme: dark; }
html[data-dmv-dark]:has(.dmv-world),
html[data-dmv-dark]:has(.dmv-world) body { background: #0b1210; }
html[data-dmv-dark] .dmv-world {
  color-scheme: dark;
  --dw-ink: #e7eeea;
  --dw-ink-soft: #d3ddd7;
  --dw-authority: #86efac;
  --dw-green-deep: #7ee2a8;
  --dw-green-text: #5ee39a;
  --dw-green-50: #11281c;
  --dw-green-100: #1f4a33;
  --dw-danger: #fda4af;
  --dw-danger-50: #2b1318;
  --dw-danger-100: #5e2632;
  --dw-bg: #121b18;
  --dw-bg-soft: #0e1614;
  --dw-bg-deep: #17221e;
  --dw-line: #26352f;
  --dw-rule: #34463e;
  --dw-muted: #a9b8b0;
  --dw-muted-light: #93a39a;
  --dw-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --dw-shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.35);
  --brand: #5ee39a;
  --brand-strong: #7ee2a8;
  --bg: #121b18;
  --bg-soft: #0e1614;
  --bg-deep: #17221e;
  --card: #121b18;
  --surface-cool: #0e1614;
  --ink: #e7eeea;
  --ink-warm: #d3ddd7;
  --muted: #a9b8b0;
  --muted-light: #93a39a;
  --text-cool: #e7eeea;
  --text-cool-muted: #a9b8b0;
  --line: #26352f;
  --rule: #34463e;
  --border-cool: #26352f;
  --qs-authority: #86efac;
  --qs-green-50: #11281c;
  --qs-green-100: #1f4a33;
  --qs-amber-50: #2a2211;
  --qs-red-50: #2b1318;
  --warning-bg: #2a2211;
  --warning-text: #fcd34d;
  --warning-text-strong: #fde68a;
  --success-bg: #11281c;
  background: #0b1210;
  color: var(--dw-ink);
}
html[data-dmv-dark] .dmv-world ::selection { color: #ffffff; }
html[data-dmv-dark] .dmv-world .topbar { background: rgba(11, 18, 16, 0.94); border-bottom-color: var(--dw-line); }
html[data-dmv-dark] .dmv-world .dmv-mobile-nav-toggle,
html[data-dmv-dark] .dmv-world .dmv-mobile-nav-panel { background: var(--dw-bg); }
html[data-dmv-dark] .dmv-world .dmv-mobile-nav-bars {
  background: linear-gradient(var(--dw-ink) 0 2px, transparent 2px 5px, var(--dw-ink) 5px 7px, transparent 7px 10px, var(--dw-ink) 10px 12px);
}
/* Road sign art is drawn for a white ground: keep a light plate behind every sign. */
html[data-dmv-dark] .dmv-world .dmvq-sign { background: var(--dw-bg-soft); border-color: var(--dw-line); }
html[data-dmv-dark] .dmv-world img[src*="/signs/"],
html[data-dmv-dark] .dmv-world img[src*="sign"] {
  background: #f4f6f5;
  border-radius: 10px;
}

/* Surfaces that were white or near-white paper become the dark card. */
html[data-dmv-dark] .dmv-world :is(
  .dmvq, .dmvq-static-item, .dmvq-topic-row, .dmvq-callout-icon, .dmvq-tip, .dmvq-fact-grid, .dmvq-fact-card,
  .dmvq-howto, .info-panel, .dmvq-flash-card, .dmvq-cheat-card, .dmvq-category-card, .dmvq-answer-card,
  .dmvq-flash-shuffle, .dmvq-sign-card, .dmvq-sample, .dmvq-journey-pill, .dmvq-mode, .dmvq-age-option,
  .dmvq-choice, .dmvq-progress-cell, .dmvq-star, .dmvq-restart-btn, .dmvq-sidebar, .dmvq-stage, .dmvq-stage-badge,
  .dmvq-review, .dmvq-topics, .dmvq-test-tile, .dmvq-link-card, .dmvq-xp-badge, .dmvq-xp, .trust-strip,
  .page-hero:not(.page-hero--dark), .dmvq-resume, .dmvq-score, .dmvq-topic-miss, .dmvq-age-result,
  .dmvq-next li, .dmvq-free-note, .dmvq-logistics-item, .dmvq-fee-table tbody tr,
  details, summary, input, select, textarea, table, th, td, tr
) {
  background-color: var(--dw-bg);
  background-image: none;
  border-color: var(--dw-line);
}
html[data-dmv-dark] .dmv-world .dmvq-page .section:nth-of-type(even),
html[data-dmv-dark] .dmv-world :is(.dmvq-xp-track, .trust-strip) { background-color: var(--dw-bg-soft); }
html[data-dmv-dark] .dmv-world :is(.dmvq-btn--ghost, .dmvq-btn--secondary, .dmvq-btn--audio) {
  background: var(--dw-bg);
  border-color: var(--dw-rule);
  color: var(--dw-green-deep);
}
html[data-dmv-dark] .dmv-world :is(.dmvq-btn--ghost, .dmvq-btn--secondary, .dmvq-btn--audio):hover { background: var(--dw-bg-deep); }
html[data-dmv-dark] .dmv-world .dmvq-print-button { background: var(--dw-green-bright); color: #04140b; }
html[data-dmv-dark] .dmv-world .dmvq-print-button:hover { background: #4ade80; }
html[data-dmv-dark] .dmv-world .dmvq-test-tile-label { color: var(--dw-muted); }
html[data-dmv-dark] .dmv-world .dmvq-test-tile-score { color: var(--dw-green-text); }
html[data-dmv-dark] .dmv-world .dmvq-test-tile--current { background: #0b5d33; }
html[data-dmv-dark] .dmv-world .dmvq-test-tile--current :is(.dmvq-test-tile-label, .dmvq-test-tile-score) { color: #ffffff; }
html[data-dmv-dark] .dmv-world .breadcrumb-sep { color: var(--dw-muted); }
html[data-dmv-dark] .dmv-world .dmvq-flash-remaining { color: var(--dw-muted); }
html[data-dmv-dark] .dmv-world .page-hero:not(.page-hero--dark) :is(.page-hero-kicker, .kicker) { background: var(--dw-green-50); color: var(--dw-green-text); }
html[data-dmv-dark] .dmv-world .page-hero:not(.page-hero--dark) :is(.page-hero-lede, .page-hero-meta-item dt) { color: var(--dw-muted); }
html[data-dmv-dark] .dmv-world .page-hero:not(.page-hero--dark) .page-hero-meta-item dd { color: var(--dw-ink); }
html[data-dmv-dark] .dmv-world .page-hero:not(.page-hero--dark) .page-hero-meta-item:first-child dd { color: var(--dw-gold-soft); }
html[data-dmv-dark] .dmv-world .dmvq-page a:not(.btn):not(.dmvq-btn):not(.page-hero-cta-btn):not(.page-hero-cta-phone):not(.dmvq-start-cta-link):not(.dmvq-test-list li a):not(.dmvq-dir-name):not(.dmvq-path) {
  color: var(--dw-green-text);
  text-decoration-color: rgba(94, 227, 154, 0.4);
}
html[data-dmv-dark] .dmv-world .dmvq-setup-link { text-decoration-color: rgba(94, 227, 154, 0.45); }

/* CSS module pages (handbook, flashcards, methodology, daily signup) hardcode light
   paper colors; match their stable module prefixes. */
html[data-dmv-dark] .dmv-world :is([class*="handbook-module__"], [class*="DmvFlashcards-module__"], [class*="how-we-check-module__"], [class*="DmvDailySignup-module__"]) {
  border-color: var(--dw-line);
}
html[data-dmv-dark] .dmv-world :is(
  [class*="handbook-module__"][class*="__toc"], [class*="handbook-module__"][class*="__tableWrap"],
  [class*="how-we-check-module__"][class*="__toc"], [class*="how-we-check-module__"][class*="__caption"],
  [class*="DmvFlashcards-module__"][class*="__segmented"], [class*="DmvFlashcards-module__"][class*="__topicTag"],
  [class*="DmvFlashcards-module__"][class*="__knownTag"]
) { background-color: var(--dw-bg-soft); color: var(--dw-ink-soft); }
html[data-dmv-dark] .dmv-world :is(
  [class*="handbook-module__"][class*="__card"], [class*="handbook-module__"][class*="__check"],
  [class*="handbook-module__"][class*="__tocLink"]:hover, [class*="handbook-module__"][class*="__tocCurrent"],
  [class*="how-we-check-module__"][class*="__toc"] a, [class*="how-we-check-module__"][class*="__facts"] li,
  [class*="how-we-check-module__"] thead th, [class*="how-we-check-module__"] tbody th,
  [class*="DmvFlashcards-module__"][class*="__chip"], [class*="DmvFlashcards-module__"][class*="__navButton"],
  [class*="DmvFlashcards-module__"][class*="__face"]:not([class*="__back"]), [class*="DmvFlashcards-module__"][class*="__segmented"] button[aria-pressed="true"],
  [class*="DmvDailySignup-module__"][class*="__card"], [class*="DmvDailySignup-module__"][class*="__input"]
) { background-color: var(--dw-bg); color: var(--dw-ink); }
html[data-dmv-dark] .dmv-world [class*="handbook-module__"] :is(thead th, blockquote) { background-color: var(--dw-bg-soft); color: var(--dw-ink-soft); }
html[data-dmv-dark] .dmv-world :is(
  [class*="handbook-module__"][class*="__tocLink"], [class*="handbook-module__"][class*="__cardTitle"] a,
  [class*="handbook-module__"][class*="__numValue"], [class*="DmvFlashcards-module__"][class*="__mono"],
  [class*="DmvFlashcards-module__"][class*="__question"], [class*="DmvDailySignup-module__"][class*="__label"],
  [class*="DmvDailySignup-module__"][class*="__title"]
) { color: var(--dw-ink); }
html[data-dmv-dark] .dmv-world :is(
  [class*="handbook-module__"][class*="__tocCount"], [class*="handbook-module__"][class*="__tocChapter"],
  [class*="handbook-module__"][class*="__muted"], [class*="handbook-module__"][class*="__cardTop"],
  [class*="handbook-module__"][class*="__cardMeta"], [class*="handbook-module__"][class*="__numPage"],
  [class*="handbook-module__"][class*="__sourceNote"],
  [class*="how-we-check-module__"][class*="__caption"], [class*="how-we-check-module__"] thead th,
  [class*="DmvFlashcards-module__"][class*="__meterText"], [class*="DmvFlashcards-module__"][class*="__position"],
  [class*="DmvFlashcards-module__"][class*="__keys"], [class*="DmvFlashcards-module__"][class*="__hint"],
  [class*="DmvFlashcards-module__"][class*="__reportToggle"], [class*="DmvFlashcards-module__"][class*="__chipCount"],
  [class*="DmvFlashcards-module__"][class*="__segmented"] button,
  [class*="DmvDailySignup-module__"][class*="__lede"], [class*="DmvDailySignup-module__"][class*="__fine"]
) { color: var(--dw-muted); }
html[data-dmv-dark] .dmv-world [class*="DmvFlashcards-module__"][class*="__segmented"] button[aria-pressed="true"] { color: var(--dw-ink); }
html[data-dmv-dark] .dmv-world :is(
  [class*="handbook-module__"][class*="__tocNum"], [class*="handbook-module__"][class*="__eyebrow"],
  [class*="handbook-module__"][class*="__cardNum"], [class*="handbook-module__"][class*="__cite"] summary,
  [class*="handbook-module__"][class*="__check"] summary, [class*="handbook-module__"][class*="__point"]::before,
  [class*="handbook-module__"][class*="__pagerDir"],
  [class*="DmvFlashcards-module__"][class*="__textButton"], [class*="DmvFlashcards-module__"][class*="__faceLabel"]:not([class*="__back"] *),
  [class*="DmvDailySignup-module__"][class*="__statusOk"]
) { color: var(--dw-green-text); }
html[data-dmv-dark] .dmv-world [class*="DmvDailySignup-module__"][class*="__statusError"] { color: var(--dw-danger); }
html[data-dmv-dark] .dmv-world [class*="DmvFlashcards-module__"][class*="__textButton"]:hover { background: var(--dw-green-50); }
html[data-dmv-dark] .dmv-world [class*="handbook-module__"][class*="__topicPill"] { background: var(--dw-green-50); color: var(--dw-green-deep); }
html[data-dmv-dark] .dmv-world [class*="DmvFlashcards-module__"][class*="__meter"]:not([class*="__meterText"]):not([class*="__meterFill"]) { background: var(--dw-line); }
html[data-dmv-dark] .dmv-world [class*="DmvFlashcards-module__"][class*="__chip"][aria-pressed="true"] { background: var(--dw-green-bright); border-color: var(--dw-green-bright); color: #04140b; }
html[data-dmv-dark] .dmv-world [class*="DmvFlashcards-module__"][class*="__face"] { box-shadow: 6px 6px 0 var(--dw-line); }
html[data-dmv-dark] .dmv-world [class*="DmvFlashcards-module__"][class*="__back"] { background: #1a2b24; border-color: var(--dw-rule); }
/* Sign plates in module pages stay light. */
html[data-dmv-dark] .dmv-world :is([class*="handbook-module__"][class*="__sign"], [class*="DmvFlashcards-module__"][class*="__sign"]) { background-color: #f4f6f5; }
html[data-dmv-dark] .dmv-world [class*="handbook-module__"][class*="__sign"] :is(figcaption, span, p) { color: #0a0f0d; }

html[data-dmv-dark] .dmv-world [style*="background:#fff"] { background: var(--dw-bg) !important; }
html[data-dmv-dark] .dmv-world :is(.dmvq-cheat-list li, .trust-strip-item) { color: var(--dw-ink-soft); }
html[data-dmv-dark] .dmv-world .dmvq-cheat-list strong { color: var(--dw-ink); }
html[data-dmv-dark] .dmv-world .dmvq-flash-hint { color: var(--dw-muted); }
html[data-dmv-dark] .dmv-world :is(.dmvq-topic-chip--fair, .dmvq-star--on, .dmvq-star--on:hover) {
  background: #2a2211;
  border-color: #6b5416;
  color: #fcd34d;
}
html[data-dmv-dark] .dmv-world .dmvq-test-list li a { background: var(--dw-bg); }
html[data-dmv-dark] .dmv-world :is(.dmvq-explain, .dmvq-verdict, .dmvq-next li, .dmvq-review li) { color: var(--dw-ink-soft); }
html[data-dmv-dark] .dmv-world :is(.dmvq-review li strong, .hero-rating-text strong, .rating-badge-text strong, .trust-strip-rating strong, .review-author) { color: var(--dw-ink); }

/* Wave 4 in the quiz: scenario diagrams, community stats line, rating prompt, daily email. */
.dmv-world .dmvq-scene {
  margin: 0 auto 18px;
  padding: 8px;
  max-width: 418px;
  background: var(--dw-bg-soft);
  border: 1px solid var(--dw-line);
  border-radius: 16px;
}
.dmv-world .dmvq-scene img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
}
/* The SVG scenes are drawn on a light ground: keep a light plate around them in dark mode too. */
html[data-dmv-dark] .dmv-world .dmvq-scene img {
  background: #f4f6f5;
  padding: 4px;
  box-sizing: border-box;
}
.dmv-world .dmvq-community {
  margin: 8px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--dw-muted);
}
.dmv-world .dmvq-community--inline {
  display: block;
  margin-top: 6px;
}
.dmv-world .dmvq-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--dw-bg-soft);
  border: 1px solid var(--dw-line);
  border-radius: 14px;
}
.dmv-world .dmvq-rating-title {
  margin: 0;
  flex: 1 1 100%;
  font-weight: 700;
  color: var(--dw-ink);
}
.dmv-world .dmvq-rating-stars {
  display: inline-flex;
  gap: 2px;
}
.dmv-world .dmvq-rating-star {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--dw-muted-light);
  cursor: pointer;
}
/* Hovering or focusing star N lights stars 1 to N. */
.dmv-world .dmvq-rating-stars:is(:hover, :focus-within) .dmvq-rating-star { color: #d97706; }
.dmv-world .dmvq-rating-star:is(:hover, :focus-visible) ~ .dmvq-rating-star { color: var(--dw-muted-light); }
.dmv-world .dmvq-rating-star:focus-visible { outline: 3px solid var(--dw-green); outline-offset: 1px; }
.dmv-world .dmvq-rating-star:disabled { cursor: default; opacity: 0.6; }
.dmv-world .dmvq-rating-dismiss {
  margin-left: auto;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--dw-muted);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}
.dmv-world .dmvq-rating-thanks {
  margin: 0;
  color: var(--dw-green-text);
  font-weight: 600;
}
html[data-dmv-dark] .dmv-world .dmvq-rating-stars:is(:hover, :focus-within) .dmvq-rating-star { color: #fbbf24; }
html[data-dmv-dark] .dmv-world .dmvq-rating-star:is(:hover, :focus-visible) ~ .dmvq-rating-star { color: var(--dw-muted-light); }
.dmv-world .dmvq-daily {
  margin: 18px 0;
}
@media print {
  .dmv-world .dmvq-rating, .dmv-world .dmvq-daily { display: none; }
}

/* Listen button for a "Why not" line or a handbook key point (components/dmv/DmvClipListen). */
.dmv-clip-listen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: 0 6px 0 0;
  padding: 0;
  vertical-align: middle;
  border: none;
  border-radius: 999px;
  background: var(--dw-authority, #0f3d21);
  color: var(--dw-green-bright, #7df0b0);
  cursor: pointer;
}
.dmv-clip-listen:hover {
  background: var(--dw-green-deep, #14532d);
}
.dmv-clip-listen:focus-visible {
  outline: 2px solid var(--dw-green, #16a34a);
  outline-offset: 2px;
}
@media print {
  .dmv-clip-listen { display: none; }
}

/* Medicare TPMO disclaimer and labeled agent section (senior benefits guides). */
/* 1rem (16px): CMS requires disclosures in at least 12 point type (42 CFR 422.2267(a)(1)). */

/* Medicare callback form (posts to vuabaohiem's Kevin-only Medicare pipeline). */
.medicare-callback { display: grid; gap: 18px; margin: 0 0 24px; }
.medicare-callback label { display: grid; gap: 6px; font-weight: 600; font-size: 1rem; }
.medicare-callback input:not([type="checkbox"]), .medicare-callback select { min-height: 48px; padding: 10px 12px; border: 1px solid #c9d1cc; border-radius: 10px; font-size: 1rem; background: #fff; }
.medicare-callback input:focus-visible, .medicare-callback select:focus-visible { outline: 3px solid #0b5d33; outline-offset: 2px; }

/* ── /senior-benefits: hub for older readers (matches vuabaohiem /phuc-loi) ──────────────
   18px+ body, 22px+ row titles, 52px+ tap targets, AA contrast, AA focus outlines. */

/* Starter quiz: the mode picker folds under the live question (state practice pages). */
.dmvq-more-modes { margin-top: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); }
.dmvq-more-modes > summary {
  display: flex; align-items: center; min-height: 52px; padding: 12px 18px; cursor: pointer;
  font-size: 17px; font-weight: 700; color: var(--brand-strong); list-style: none;
}
.dmvq-more-modes > summary::-webkit-details-marker { display: none; }
.dmvq-more-modes > summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 600; }
.dmvq-more-modes[open] > summary::after { content: "\2212"; }
.dmvq-more-modes > summary:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; border-radius: 12px; }
.dmvq-more-modes > .dmvq { margin: 0; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; }
.dmvq-results-actions { margin-top: 16px; }


/* Quiz polish (2026-10-10 critique): name the right answer on a miss, fold secondary results tools,
   and keep question 1 near the top of practice pages on phones. */
.dmvq-correct-line {
  display: block;
  margin: 6px 0 10px;
  font-weight: 800;
  color: var(--dmvq-green-800);
}
.dmvq-more-results {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
}
.dmvq-more-results > summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 18px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-strong);
  list-style: none;
}
.dmvq-more-results > summary::-webkit-details-marker { display: none; }
.dmvq-more-results > summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 600; }
.dmvq-more-results[open] > summary::after { content: "\2212"; }
.dmvq-more-results > summary:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; border-radius: 12px; }
.dmvq-more-results[open] { padding: 0 16px 16px; }
.dmvq-more-results[open] > summary { padding-left: 2px; padding-right: 2px; }
/* Scoped like the .dmv-world theme rules so these win on phones. */
@media (max-width: 600px) {
  .dmv-world .dmvq-practice-page .page-hero { padding-top: 20px; padding-bottom: 22px; }
  .dmv-world .dmvq-practice-page .page-hero .page-hero-kicker { display: none; }
  .dmv-world .dmvq-practice-page .page-hero .page-hero-title { font-size: 28px; line-height: 1.12; margin-bottom: 8px; }
  .dmv-world .dmvq-practice-page .page-hero .page-hero-lede { font-size: 16px; margin-bottom: 0; }
}
.dmv-world .dmvq-progress-track .dmvq-progress-cell { min-width: 44px; height: 44px; }

.dmvq-explain-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--dmvq-green-800);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.dmvq-explain-more:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 600px) {
  /* Scenario diagrams stay readable but no longer push the answers below the first screen. */
  .dmv-world .dmvq-scene { padding: 6px; margin-bottom: 12px; }
  .dmv-world .dmvq-scene img { width: auto; max-width: 100%; max-height: 200px; }
}

/* Library and school sessions (lib/dmv-via.ts): server HTML always carries
   the normal-visitor tree; the DMV layout boot script sets data-via-mode
   before paint so gated blocks (.dmv-insurance-cta) never flash in those
   sessions, and InsuranceGate removes them from the DOM after hydration. */
.dmv-insurance-gate { display: contents; }
[data-via-mode] .dmv-insurance-cta { display: none !important; }

/* ===== DMV hub (/dmv) organization pass ===== */
.dmv-world .dmvq-hub-head { margin-bottom: 28px; }
.dmv-world .dmvq-hub-head h2 { margin: 0 0 8px; text-wrap: balance; }
.dmv-world .dmvq-hub-head p { margin: 0; max-width: 62ch; color: var(--dw-muted); }

/* State directory: one entry per state. The first link (icon, name, summary)
   opens the state hub; the second opens its practice test. Both are 44px tall. */
.dmv-world .dmvq-dir {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  column-gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--dw-line);
}
.dmv-world .dmvq-dir-item {
  display: grid;
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--dw-line);
}
.dmv-world .dmvq-dir a.dmvq-dir-name {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 2px 4px 2px 2px;
  border-radius: 10px;
  color: var(--dw-ink);
  text-decoration: none;
}
.dmv-world .dmvq-dir-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--dw-bg-soft);
  color: var(--dw-ink);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.dmv-world .dmvq-dir-icon svg { width: 24px; height: 24px; }
.dmv-world .dmvq-dir-text { display: grid; min-width: 0; }
.dmv-world .dmvq-dir-title { font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; }
.dmv-world .dmvq-dir-meta { color: var(--dw-muted); font-size: 0.78rem; font-weight: 500; line-height: 1.35; }
.dmv-world .dmvq-dir a.dmvq-dir-name:hover .dmvq-dir-title { color: var(--dw-green-text); }
.dmv-world .dmvq-dir a.dmvq-dir-name:hover .dmvq-dir-icon { background: var(--dw-green-50); color: var(--dw-green-deep); }
.dmv-world .dmvq-dir-test {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  padding: 0 8px 0 54px;
  border-radius: 10px;
  color: var(--dw-green-text);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}
.dmv-world .dmvq-dir-test::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-top: 1.75px solid currentColor;
  border-right: 1.75px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.dmv-world .dmvq-dir-test:hover { text-decoration: underline; text-underline-offset: 3px; }
.dmv-world .dmvq-dir-test:hover::after { transform: translateX(3px) rotate(45deg); }

/* Where to start: three routes, same weight, one row on desktop. */
.dmv-world .dmvq-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.dmv-world .dmvq-paths a.dmvq-path {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid var(--dw-rule);
  border-radius: 14px;
  background: var(--dw-bg);
  color: var(--dw-ink);
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.dmv-world .dmvq-paths a.dmvq-path:hover { border-color: var(--dw-green); background: var(--dw-bg-soft); }
.dmv-world .dmvq-path-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--dw-green-50);
  color: var(--dw-green-deep);
}
.dmv-world .dmvq-path-icon svg { width: 22px; height: 22px; }
.dmv-world .dmvq-path-label { flex: 1; font-weight: 800; font-size: 1.05rem; line-height: 1.25; }
.dmv-world .dmvq-path-arrow { display: grid; color: var(--dw-muted); transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease; }
.dmv-world .dmvq-path-arrow svg { width: 20px; height: 20px; }
.dmv-world .dmvq-path:hover .dmvq-path-arrow { transform: translateX(3px); color: var(--dw-green-text); }

/* Resource shelf: flat columns under a rule, no boxed cards. */
.dmv-world .dmvq-shelf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 28px;
  margin-top: 40px;
}
.dmv-world .dmvq-shelf-group { padding-top: 16px; border-top: 2px solid var(--dw-ink); }
.dmv-world .dmvq-shelf-group h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.dmv-world .dmvq-shelf-group ul + h3 { margin-top: 26px; }
.dmv-world .dmvq-shelf-group ul { display: grid; margin: 0; padding: 0; list-style: none; }
.dmv-world .dmvq-shelf-group li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
  color: var(--dw-green-text);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.dmv-world .dmvq-shelf-group li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dmv-world .dmvq-shelf-pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dmv-world .dmvq-shelf-group li a.dmvq-shelf-tag {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--dw-rule);
  border-radius: 999px;
  color: var(--dw-muted);
  font-family: var(--dw-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.dmv-world .dmvq-hub-fees-intro { max-width: 70ch; }

@media (max-width: 960px) {
  .dmv-world .dmvq-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dmv-world .dmvq-paths { grid-template-columns: 1fr; }
  .dmv-world .dmvq-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .dmv-world .dmvq-dir-icon { width: 34px; height: 34px; }
  .dmv-world .dmvq-dir-icon svg { width: 20px; height: 20px; }
  .dmv-world .dmvq-dir a.dmvq-dir-name { gap: 10px; }
  .dmv-world .dmvq-dir-test { padding-left: 46px; }
}
@media (max-width: 520px) {
  .dmv-world .dmvq-shelf { grid-template-columns: 1fr; }
}