/* usadmv.app — one stylesheet, no framework. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans.woff2") format("woff2"); }
:root {
  --paper: #f5f8fd;
  --surface: #ffffff;
  --tint: #e9f0fb;
  --ink: #0e1a2f;
  --ink-2: #3a4659;
  --muted: #667085;
  --line: #e1e7f0;
  --line-2: #cbd5e3;
  --navy: #0f2a5c;
  --navy-ink: #ffffff;
  --blue: #2457d6;
  --blue-soft: #dce7fb;
  --deep: #0b1d3f;
  --sign: #f4c20d;
  --right: #157a45;
  --right-bg: #e7f5ec;
  --wrong: #b42318;
  --wrong-bg: #fdeceb;
  --radius: 12px;
  --wrap: 1160px;
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: var(--font);
  --shadow: 0 1px 2px rgba(14, 26, 47, .06), 0 12px 32px -12px rgba(14, 26, 47, .18);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #0a1120; --surface: #111b2e; --tint: #0f1a2f; --ink: #e9eef8; --ink-2: #c4cedd; --muted: #8b97ab;
  --line: #1d2a42; --line-2: #2b3b58; --navy: #8fb0f5; --navy-ink: #08132a; --blue: #8fb0f5; --blue-soft: #16264a; --deep: #070e1c;
  --right: #6fcf97; --right-bg: #12291d; --wrong: #f08a7e; --wrong-bg: #33191a;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.62 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01"; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; letter-spacing: -0.025em; margin: 0; font-weight: 750; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); letter-spacing: -0.04em; font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); }
.lede { font-size: 1.16rem; color: var(--ink-2); max-width: 40em; }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--surface); padding: 8px 12px; z-index: 10; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------- header ---------- */
.top { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: -0.02em; font-size: 1.08rem; white-space: nowrap; }
.brand .mark { width: 30px; height: 30px; flex: none; border-radius: 7px; }
.brand .tld { color: var(--muted); font-weight: 500; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; font-size: .94rem; }
.nav a { text-decoration: none; color: var(--ink-2); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
@media (max-width: 720px) { .nav .nav-opt { display: none; } .top .wrap { gap: 14px; } }
.nav a.btn { color: var(--paper); }
.nav a.btn:hover { color: var(--paper); }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px;
  font: 600 .96rem/1 var(--font); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--ink-2); }
.btn-green { background: var(--navy); color: var(--navy-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { height: 36px; padding: 0 14px; font-size: .88rem; }
.store-badges { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.store-badges img { height: 44px; width: auto; }

/* ---------- sections ---------- */
section { padding: 88px 0; }
section + section { border-top: 1px solid var(--line); }
.sec-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 46em; }
@media (max-width: 720px) { section { padding: 60px 0; } .sec-head { margin-bottom: 32px; } }

/* hero */
.hero { padding: 72px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero h1 { margin: 18px 0 22px; max-width: 12em; }
.hero .picker { margin-top: 34px; }
.hero-shot { justify-self: center; width: min(330px, 80%); }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-shot { display: none; } .hero { padding: 48px 0 56px; } }

.picker { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.picker select { flex: 1 1 100%; height: 50px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font: 500 1rem var(--font); padding: 0 44px 0 20px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236e6d68' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; }
.picker .btn { height: 50px; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--line); padding-top: 22px; max-width: 560px; }
.facts div { padding-right: 14px; }
@media (max-width: 480px) { .facts b { font-size: 1.25rem; } .facts span { font-size: .8rem; } }
.facts b { display: block; font: 700 1.5rem/1.1 var(--display); letter-spacing: -0.02em; }
.facts span { font-size: .86rem; color: var(--muted); }

/* state index */
.states { columns: 4 200px; column-gap: 32px; }
.states a { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; break-inside: avoid; }
.states a:hover .n { color: var(--ink); }
.states a .n { font-size: .82rem; color: var(--muted); }
.states a:hover { color: var(--navy); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.steps li { list-style: none; padding: 26px 28px 0 0; }
.steps .k { font: 600 .82rem var(--font); color: var(--muted); display: block; margin-bottom: 14px; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink-2); }
ol.steps { margin: 0; padding: 0; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } .steps li { padding: 22px 0; border-bottom: 1px solid var(--line); } }

/* app cards */
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.app-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: grid; gap: 18px; align-content: start; }
.app-card .head { display: flex; gap: 16px; align-items: center; }
.app-card .icon { width: 64px; height: 64px; border-radius: 15px; border: 1px solid var(--line); }
.app-card .meta { font-size: .9rem; color: var(--muted); }
.app-card ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
.app-card ul li { margin: 3px 0; }
@media (max-width: 760px) { .apps { grid-template-columns: 1fr; } }

/* feature split with phones */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 460px; }
.phones img:nth-child(2) { margin-top: 48px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 40px; } .phones { max-width: 380px; } }
.checks { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; gap: 14px; }
.checks li { padding-left: 28px; position: relative; color: var(--ink-2); }
.checks li b { color: var(--ink); font-weight: 600; }
.checks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); }

/* faq */
.faq { border-top: 1px solid var(--line); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.4rem; font-weight: 300; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 44em; }

/* notice (disclaimer) */
.notice { font-size: .88rem; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); }
.notice b { color: var(--ink-2); font-weight: 600; }

/* ---------- state page ---------- */
.crumbs { font-size: .86rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.page-head { padding-top: 56px; padding-bottom: 48px; }
@media (max-width: 720px) { .page-head { padding-top: 36px; padding-bottom: 32px; } }
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); max-width: 16em; margin-bottom: 18px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-top: 36px; }
.stat-row div { padding: 22px 22px; border-left: 1px solid var(--line); }
.stat-row div:first-child { border-left: 0; }
.stat-row b { display: block; font: 700 2rem/1 var(--display); letter-spacing: -0.03em; margin-bottom: 8px; }
.stat-row span { font-size: .86rem; color: var(--muted); }
@media (max-width: 720px) { .stat-row { grid-template-columns: 1fr 1fr; } .stat-row div:nth-child(3) { border-left: 0; } .stat-row div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.source { font-size: .82rem; color: var(--muted); margin-top: 12px; }

.tests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.test-card { display: grid; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; align-content: start; transition: border-color .15s; }
.test-card:hover { border-color: var(--ink); }
.test-card .t { font: 700 1.2rem var(--display); letter-spacing: -0.015em; }
.test-card .d { font-size: .9rem; color: var(--muted); }
.test-card .best { font-size: .86rem; color: var(--right); font-weight: 600; min-height: 1.3em; }
.test-card .go { font-weight: 600; font-size: .92rem; margin-top: 6px; }
@media (max-width: 760px) { .tests { grid-template-columns: 1fr; } }

.topics { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; border-top: 1px solid var(--line); }
.topics div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); }
.topics span:last-child { color: var(--muted); font-size: .9rem; }
@media (max-width: 640px) { .topics { grid-template-columns: 1fr; } }

.cta-band { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 36px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.cta-band .icon { width: 76px; height: 76px; border-radius: 18px; border: 1px solid var(--line); }
.cta-band h3 { font-size: 1.35rem; margin-bottom: 6px; }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; padding: 26px; } }

.prose { max-width: 720px; }
.prose h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.prose h3 { margin: 26px 0 8px; }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 20px; }
.legal { font-size: .95rem; }
.legal p + p { margin-top: 10px; }

/* ---------- quiz ---------- */
.quiz-wrap { max-width: 760px; margin: 0 auto; }
.quiz-bar { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.progress { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 28px; }
.progress i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .25s ease; }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.q { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 30px; }
.q .qn { font-size: .82rem; color: var(--muted); margin-bottom: 10px; display: flex; justify-content: space-between; gap: 12px; }
.q h2 { font: 650 1.3rem/1.35 var(--display); letter-spacing: -0.012em; margin-bottom: 22px; }
.opts { display: grid; gap: 10px; }
.opt { display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; padding: 15px 16px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); font: 500 1rem/1.45 var(--font); cursor: pointer; transition: border-color .12s, background .12s; }
.opt:hover:not([disabled]) { border-color: var(--ink); }
.opt .l { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: .8rem; font-weight: 600; color: var(--muted); }
.opt[disabled] { cursor: default; }
.opt.is-right { border-color: var(--right); background: var(--right-bg); }
.opt.is-right .l { background: var(--right); border-color: var(--right); color: var(--surface); }
.opt.is-wrong { border-color: var(--wrong); background: var(--wrong-bg); }
.opt.is-wrong .l { background: var(--wrong); border-color: var(--wrong); color: var(--surface); }
.reveal { margin-top: 16px; font-size: .95rem; color: var(--ink-2); }
.reveal summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.reveal .ans { margin: 10px 0 6px; font-weight: 600; color: var(--right); }
.verdict { font-weight: 700; margin-right: 6px; }
.verdict.ok { color: var(--right); } .verdict.no { color: var(--wrong); }
.q-actions { margin-top: 22px; display: flex; justify-content: flex-end; }

/* js-on quiz: one at a time */
.js .q { display: none; }
.js .q.current { display: block; }
.js .reveal summary { display: none; }
.js .reveal:not(.shown) { display: none; }
.js.review .q { display: block; }
.js .no-js-only { display: none; }
html:not(.js) .js-only { display: none !important; }
.review [data-next] { display: none !important; }
mark { background: linear-gradient(transparent 58%, var(--sign) 58%, var(--sign) 92%, transparent 92%); color: inherit; padding: 0 .06em; }
:root[data-theme="dark"] mark { background: none; color: var(--sign); }

.result { display: none; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 36px; text-align: center; margin-bottom: 26px; }
.result.show { display: block; }
.result .score { font: 700 4.2rem/1 var(--display); letter-spacing: -0.04em; margin: 10px 0 8px; }
.result .pass { color: var(--right); font-weight: 700; }
.result .fail { color: var(--wrong); font-weight: 700; }
.result .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 56px 0 40px; margin-top: 0; font-size: .92rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; font-weight: 600; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { text-decoration: none; color: var(--ink-2); }
.foot-grid a:hover { color: var(--ink); }
.foot-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .84rem; display: grid; gap: 8px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }

/* ---------- imagery ---------- */
.photo { margin: 0; }
.photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 18px; }
.photo figcaption { font-size: .78rem; color: var(--muted); margin-top: 8px; }
@media (max-width: 720px) { .photo img { aspect-ratio: 4 / 3; border-radius: 12px; } }
.hero-shot img { border-radius: 26px; box-shadow: 0 1px 0 var(--line), 0 30px 60px -30px rgba(10, 20, 40, .35); }
.shots { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.shots img { border-radius: 18px; scroll-snap-align: start; border: 1px solid var(--line); }
@media (max-width: 720px) { .shots { grid-auto-columns: 62%; } }
.flag { width: 28px; height: 19px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); flex: none; }
.states a .s { display: flex; align-items: center; gap: 12px; }
.page-head .flag { width: 44px; height: 30px; margin-bottom: 18px; }

/* road signs */
.sign-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sign-strip a { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: block; transition: transform .15s ease; }
.sign-strip a:hover { transform: translateY(-2px); }
.sign-strip img { width: 100%; height: auto; aspect-ratio: 1; }
.sign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
.sign { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; align-content: start; }
.sign .art { background: #fff; border-bottom: 1px solid var(--line); }
.sign .art img { width: 100%; height: auto; aspect-ratio: 1; }
.sign h3 { font-size: .98rem; padding: 14px 16px 0; }
.sign p { font-size: .86rem; color: var(--ink-2); line-height: 1.5; padding: 6px 16px 16px; }
.cat-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.q .q-art { background: #fff; border: 1px solid var(--line); border-radius: 14px; width: 220px; max-width: 70%; margin: 0 auto 22px; overflow: hidden; }
.q .q-art img { width: 100%; height: auto; aspect-ratio: 1; }
.rating { font-size: .9rem; color: var(--muted); }
.rating b { color: var(--ink); }

.theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

/* readiness check */
.check-card { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; margin-top: 28px; }
.check-card h3 { font-size: 1.2rem; margin-bottom: 4px; }
.check-card .done { font-size: .9rem; color: var(--right); font-weight: 600; margin-top: 6px; }
@media (max-width: 640px) { .check-card { grid-template-columns: 1fr; } }
.level { text-align: left !important; }
.level .lvl-name { font: 700 2.4rem/1.05 var(--display); letter-spacing: -0.03em; margin: 8px 0 6px; }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 22px 0 8px; }
.meter i { height: 8px; border-radius: 4px; background: var(--line); }
.meter i.on { background: var(--ink); }
.meter-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: .78rem; color: var(--muted); }
.meter-labels span.on { color: var(--ink); font-weight: 600; }
.breakdown { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 12px; margin: 26px 0; }
.breakdown div { padding: 16px 18px; border-left: 1px solid var(--line); }
.breakdown div:first-child { border-left: 0; }
.breakdown b { display: block; font: 700 1.5rem/1 var(--display); margin-bottom: 6px; }
.breakdown span { font-size: .84rem; color: var(--muted); }
.plan { margin: 0; padding-left: 20px; color: var(--ink-2); display: grid; gap: 8px; }
.weak { font-size: .95rem; color: var(--ink-2); margin-top: 6px; }
.level .actions { justify-content: flex-start !important; }

/* locked (app-only) cards */
.test-card.locked { background: transparent; border-style: dashed; }
.test-card.locked .t { display: flex; align-items: center; gap: 8px; }
.test-card.locked .t svg { width: 15px; height: 15px; flex: none; color: var(--muted); }

/* sample questions */
.samples { display: grid; gap: 14px; max-width: 820px; }
.sample { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.sample h3 { font-size: 1.05rem; line-height: 1.4; margin-bottom: 12px; }
.sample ol { margin: 0 0 4px; padding-left: 0; list-style: none; display: grid; gap: 4px; color: var(--ink-2); }
.sample ol li span { display: inline-block; width: 24px; color: var(--muted); font-weight: 600; }
.sample details { margin-top: 10px; font-size: .95rem; color: var(--ink-2); }
.sample summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.sample .ans { color: var(--right); font-weight: 600; margin: 8px 0 4px; }

/* honest-free promise, tips, report link */
.promise { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .88rem; color: var(--ink-2); }
.promise li { position: relative; padding-left: 18px; }
.promise li::before { content: ""; position: absolute; left: 1px; top: .45em; width: 9px; height: 5px; border-left: 2px solid var(--right); border-bottom: 2px solid var(--right); transform: rotate(-45deg); }
.promise.compact { margin-top: 12px; }
.tip { margin-top: 14px; font-size: .92rem; color: var(--ink-2); max-width: 44em; }
.report { margin-top: 10px; font-size: .84rem; }
.report a { color: var(--muted); }

/* sign shape + color guide */
.shape-guide { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.shape-guide figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.shape-guide img { width: 100%; height: auto; aspect-ratio: 1; background: #fff; border-bottom: 1px solid var(--line); }
.shape-guide figcaption { padding: 12px 14px 14px; display: grid; gap: 4px; }
.shape-guide figcaption span { font-size: .86rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 900px) { .shape-guide { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .shape-guide { grid-template-columns: repeat(2, 1fr); } }
.color-guide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 28px; border-top: 1px solid var(--line); }
.color-guide div { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); align-items: start; }
.color-guide i { grid-row: span 2; width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.18); margin-top: 1px; }
.color-guide span { font-size: .86rem; color: var(--muted); }
@media (max-width: 900px) { .color-guide { grid-template-columns: repeat(2, 1fr); } }

/* flashcards */
.fc { max-width: 560px; margin: 0 auto; }
.fc-bar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.fc-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); font: 500 .84rem var(--font); cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fc-toggle { font-size: .86rem; color: var(--ink-2); display: flex; gap: 6px; align-items: center; cursor: pointer; }
.fc-progress { display: flex; justify-content: space-between; font-size: .86rem; color: var(--muted); margin-bottom: 8px; }
.fc .progress { margin-bottom: 18px; }
.fc .progress i { background: var(--right); }
.fc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; cursor: pointer; outline-offset: 4px; }
.fc-front { background: #fff; display: grid; place-items: center; }
.fc-front img { width: min(320px, 80%); height: auto; aspect-ratio: 1; }
.fc-card.flipped .fc-front img { width: min(160px, 40%); }
.fc-back { padding: 20px 26px 26px; border-top: 1px solid var(--line); }
.fc-back h2 { font-size: 1.5rem; margin: 8px 0 10px; }
.fc-back p:last-child { color: var(--ink-2); }
.fc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.fc-actions [data-fc-flip] { grid-column: 1 / -1; }
.fc-done { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 40px 24px; }

/* US map picker */
.usmap { position: relative; }
.usmap svg { width: 100%; height: auto; display: block; overflow: visible; }
.usmap .st path { fill: var(--tone); stroke: var(--paper); stroke-width: 1.4; stroke-linejoin: round; transition: opacity .2s, filter .2s, fill .2s; }
.usmap .st:focus { outline: none; }
.map-small { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; font-size: .86rem; }
.chip-link { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 8px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; color: var(--ink-2); background: var(--surface); }
.chip-link:hover { border-color: var(--ink); color: var(--ink); }
.chip-link img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.all-states { margin-top: 28px; }
.all-states summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.all-states .states { margin-top: 12px; }

/* question dots + pass meter */
.dots { display: flex; flex-wrap: wrap; gap: 5px; margin: -16px 0 24px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.dots i.cur { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.dots i.ok { background: var(--right); }
.dots i.no { background: var(--wrong); }
.meter-txt b { color: var(--ink); }
.meter-txt.over b { color: var(--wrong); }
.kbd-hint { font-size: .78rem; color: var(--muted); margin-top: 14px; text-align: right; }
.kbd-hint kbd { font: 600 .74rem var(--font); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; background: var(--surface); }
@media (hover: none) { .kbd-hint { display: none; } }
.topics-result { text-align: left; margin: 24px auto 0; max-width: 480px; display: grid; gap: 8px; }
.topics-result div { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: .9rem; }
.topics-result i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: block; }
.topics-result i b { display: block; height: 100%; background: var(--right); }
.topics-result i b.low { background: var(--wrong); }
.empty { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 40px 24px; }
.sign-search input { width: 100%; max-width: 520px; height: 48px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 500 1rem var(--font); padding: 0 20px; }
.sign-search input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
:root[data-theme="dark"] .usmap .st path { stroke: #8f8c84; stroke-width: 1; }

/* =================================================================== redesign (Nov 2026) */
/* top bar + header */
.topbar { background: var(--deep); color: #c9d6ef; font-size: .8rem; }
.topbar .wrap { display: flex; justify-content: center; gap: 22px; height: 34px; align-items: center; flex-wrap: wrap; overflow: hidden; }
.topbar span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sign); }
@media (max-width: 640px) { .topbar span:nth-child(n+2) { display: none; } }
.top { background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { height: 70px; }
.brand { font-weight: 800; font-size: 1.12rem; letter-spacing: -0.03em; }
.brand .mark { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 2px 6px rgba(14, 26, 47, .25); }
.nav { gap: 6px; }
.nav a.nav-opt { padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.nav a.nav-opt:hover { background: var(--tint); color: var(--ink); }
.nav a.nav-opt[aria-current] { background: var(--blue-soft); color: var(--navy); }
:root[data-theme="dark"] .nav a.nav-opt[aria-current] { color: var(--ink); }
.nav .theme-toggle { margin-left: 6px; }
.nav a.btn { margin-left: 4px; }

/* buttons */
.btn { font-weight: 700; letter-spacing: -0.01em; }
.btn-primary { background: var(--navy); color: var(--navy-ink); box-shadow: 0 1px 2px rgba(14, 26, 47, .2); }
.btn-primary:hover { background: var(--blue); }
:root[data-theme="dark"] .btn-primary:hover { background: #b3cbff; }
.nav a.btn, .nav a.btn:hover { color: var(--navy-ink); }
.btn-ghost { background: var(--surface); }
.btn-lg { height: 54px; padding: 0 26px; font-size: 1rem; }

/* hero */
.hero2 { position: relative; padding: 72px 0 88px; background: linear-gradient(180deg, var(--tint), var(--paper)); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero2-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .84rem; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow); }
.pill b { background: var(--blue); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: .74rem; letter-spacing: .02em; }
:root[data-theme="dark"] .pill b { color: var(--navy-ink); }
.hero2 h1 { margin: 22px 0 20px; max-width: 11.5em; }
.hero2 h1 em { font-style: normal; color: var(--blue); position: relative; white-space: nowrap; }
.hero2 h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .12em; border-radius: 4px; background: var(--sign); z-index: -1; opacity: .85; }
.hero2 .lede { font-size: 1.18rem; max-width: 34em; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero2 .promise { margin-top: 22px; }
.trust { display: flex; gap: 0; margin-top: 38px; border-top: 1px solid var(--line); padding-top: 22px; max-width: 520px; }
.trust div { flex: 1; padding-right: 16px; }
.trust div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.trust b { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; }
.trust span { font-size: .84rem; color: var(--muted); }

.hero-visual { position: relative; justify-self: end; width: min(460px, 100%); }
.hero-photo { border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; background: var(--tint); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.float { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 48px -16px rgba(14, 26, 47, .35), 0 2px 6px rgba(14, 26, 47, .08); }
.float-q { left: -64px; bottom: 34px; width: 300px; padding: 18px; }
.float-q .qmeta { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.float-q p { font-weight: 700; font-size: .95rem; line-height: 1.35; margin-bottom: 12px; }
.float-q .o { display: flex; align-items: center; gap: 10px; font-size: .84rem; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; color: var(--ink-2); }
.float-q .o i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; display: grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 800; }
.float-q .o.ok { border-color: var(--right); background: var(--right-bg); color: var(--ink); }
.float-q .o.ok i { background: var(--right); border-color: var(--right); color: #fff; }
.float-lvl { right: -34px; top: 40px; padding: 14px 16px; width: 210px; }
.float-lvl small { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.float-lvl b { display: block; font-size: 1.15rem; margin: 2px 0 10px; letter-spacing: -0.02em; }
.float-lvl .seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.float-lvl .seg i { height: 6px; border-radius: 3px; background: var(--line); }
.float-lvl .seg i.on { background: var(--blue); }
.float-sign { right: 26px; bottom: -26px; width: 92px; padding: 8px; border-radius: 16px; }
.float-sign img { width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 1080px) { .float-q { left: -24px; } .float-lvl { right: -12px; } }
@media (max-width: 900px) {
  .hero2 { padding: 44px 0 64px; }
  .hero2-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { justify-self: center; width: min(420px, 92%); }
  .float-q { left: -14px; width: 260px; bottom: 22px; }
  .float-lvl { right: -10px; top: 22px; width: 180px; }
}
@media (max-width: 480px) { .float-sign { display: none; } .float-q { width: 230px; padding: 14px; } .trust b { font-size: 1.3rem; } }

/* centered section heads */
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.sec-head.center .lede { margin: 0 auto; }

/* how it works split */
.how { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.how-photo { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 11; }
.how-photo img { width: 100%; height: 100%; object-fit: cover; }
.how-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.how-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.how-steps .n { width: 48px; height: 48px; border-radius: 14px; background: var(--blue-soft); color: var(--navy); display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; }
:root[data-theme="dark"] .how-steps .n { color: var(--ink); }
.how-steps h3 { margin-bottom: 4px; }
.how-steps p { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 900px) { .how { grid-template-columns: 1fr; gap: 36px; } }

/* stats band */
.band { background: var(--deep); color: #fff; padding: 64px 0; border: 0 !important; }
.band + section { border-top: 0; }
.band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.band-grid div { padding: 6px 24px; border-left: 1px solid rgba(255, 255, 255, .14); }
.band-grid div:first-child { border-left: 0; padding-left: 0; }
.band-grid b { display: block; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.band-grid span { display: block; margin-top: 10px; color: #b6c4de; font-size: .92rem; }
@media (max-width: 760px) { .band-grid { grid-template-columns: 1fr 1fr; gap: 28px 0; } .band-grid div:nth-child(3) { border-left: 0; padding-left: 0; } }

/* final CTA */
.final { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: center; background: var(--tint); border: 1px solid var(--line); border-radius: 28px; padding: 48px 48px 48px 56px; overflow: hidden; }
.final h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 12px; }
.final img { border-radius: 20px; width: 100%; height: auto; box-shadow: var(--shadow); }
@media (max-width: 820px) { .final { grid-template-columns: 1fr; padding: 32px; } .final img { max-width: 260px; } }

/* FAQ, centered */
.faq.center { margin: 0 auto; border-top: 0; max-width: 780px; display: grid; gap: 10px; }
.faq.center details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0 22px; transition: box-shadow .15s; }
.faq.center details[open] { box-shadow: var(--shadow); }
.faq.center summary { padding: 18px 36px 18px 0; }
.faq.center summary::after { top: 13px; }
.faq.center details p { padding-bottom: 20px; }
.faq-foot { text-align: center; margin-top: 26px; color: var(--muted); font-size: .95rem; }
.notice.center { margin: 32px auto 0; max-width: 780px; }

/* footer */
footer { background: var(--deep); color: #b6c4de; border-top: 0; padding: 72px 0 36px; }
footer .brand { color: #fff; }
footer .muted { color: #93a3c0 !important; }
.foot-grid h4 { color: #fff; opacity: .9; }
.foot-grid a { color: #c9d6ef; }
.foot-grid a:hover { color: #fff; }
.foot-legal { border-top: 1px solid rgba(255, 255, 255, .12); color: #8798b8; }
.foot-legal b { color: #fff; }
.foot-app { margin-top: 22px; }
.foot-app img { height: 40px; width: auto; }
.hero2 h1 { isolation: isolate; }
.final img { aspect-ratio: 1; object-fit: cover; max-width: 300px; justify-self: end; }
@media (max-width: 820px) { .final img { justify-self: start; } }

/* =================================================================== illustrated look (Nov 2026, round 2) */
/* headline word in a solid block, like a road-sign label */
.hero2 h1 em.block, .ah h1 em.block { color: var(--deep); background: var(--sign); padding: 0 .16em .04em; border-radius: .14em; display: inline-block; transform: rotate(-1.5deg); box-shadow: 0 6px 0 -1px #c99a00; }
.hero2 h1 em.block::after { display: none; }
:root[data-theme="dark"] .hero2 h1 em.block, .ah h1 em.block { color: #0b1d3f; }
.label { display: inline-block; background: var(--sign); color: var(--deep); font-weight: 800; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; padding: 6px 12px 6px 14px; border-radius: 4px; }

/* road strip: asphalt with a dashed centre line */
.road { height: 56px; background: #232b3b; position: relative; overflow: hidden; }
.road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 5px; margin-top: -2.5px; background: repeating-linear-gradient(90deg, var(--sign) 0 44px, transparent 44px 84px); }
.road::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; bottom: 7px; border-top: 2px solid rgba(255,255,255,.55); border-bottom: 2px solid rgba(255,255,255,.55); }
.road.thin { height: 34px; }
.road.thin::after { top: 4px; bottom: 4px; }
.road.thin::before { height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, var(--sign) 0 30px, transparent 30px 58px); }


/* band: crosswalk stripes */
.band { position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; right: -40px; top: 0; bottom: 0; width: 220px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 26px, transparent 26px 52px); transform: skewX(-12deg); }

/* final CTA illustration */
.final .illo { background: #fff; border-radius: 22px; padding: 18px; box-shadow: var(--shadow); justify-self: end; width: 100%; max-width: 300px; }
.final .illo img { width: 100%; height: auto; display: block; border-radius: 0; box-shadow: none; aspect-ratio: auto; max-width: none; }
@media (max-width: 820px) { .final .illo { justify-self: start; max-width: 240px; } }

/* page heads with a line illustration */
.page-head.with-illo { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: center; }
.page-head.with-illo .illo { background: #fff; border-radius: 24px; padding: 14px; border: 1px solid var(--line); }
.page-head.with-illo .illo img { width: 100%; height: auto; display: block; }
@media (max-width: 820px) { .page-head.with-illo { grid-template-columns: 1fr; } .page-head.with-illo .illo { max-width: 240px; } }

/* footer road */
footer { padding-top: 0; }
footer > .road { margin-bottom: 64px; }
.hero-visual .float-q { left: -48px; bottom: -44px; top: auto; }
.hero2 { padding-bottom: 110px; }
.stage .scene { left: 24%; width: 74%; }
@media (max-width: 900px) { .hero-visual .float-q { left: -10px; bottom: -40px; } .hero2 { padding-bottom: 96px; } }
/* official SVG signs: a hairline edge so white borders (stop, yield, regulatory) read on white tiles */
img[src$=".svg"][src*="/assets/signs/"] { filter: drop-shadow(0 0 .6px rgba(14, 26, 47, .45)); }


/* =================================================================== hero v3: signs on posts by a road */
.hero2 { padding: 64px 0 0; border-bottom: 0; }
.hero2-grid { align-items: end; }
.hero2-grid > div:first-child { align-self: center; padding-bottom: 72px; }
.hero-visual { position: relative; height: 540px; width: 100%; justify-self: stretch; }
.hero-visual .float { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.hero-visual .float-lvl { right: 0; top: 4px; bottom: auto; z-index: 3; }
.hero-visual .float-q { left: 0; top: 64px; bottom: auto; width: 300px; z-index: 3; }
/* road under the hero */
.hero-road { position: relative; height: 78px; background: #232b3b; overflow: hidden; }
.hero-road::before { content: ""; position: absolute; left: 0; right: -120px; top: 50%; height: 5px; margin-top: -2.5px; background: repeating-linear-gradient(90deg, var(--sign) 0 48px, transparent 48px 96px); animation: dashes 2.2s linear infinite; }
.hero-road::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; bottom: 8px; border-top: 2px solid rgba(255,255,255,.55); border-bottom: 2px solid rgba(255,255,255,.55); pointer-events: none; }
@keyframes dashes { to { transform: translateX(-96px); } }
.hero-road .car { position: absolute; bottom: 30px; left: -180px; width: 120px; height: auto; animation: drive 16s linear infinite; z-index: 1; }
@keyframes drive { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100vw + 360px)); } }
@media (prefers-reduced-motion: reduce) { .hero-road::before, .hero-road .car, .post:hover .flip { animation: none; } .hero-road .car { left: 8%; } }
@media (max-width: 900px) {
  .hero2 { padding-top: 40px; }
  .hero2-grid > div:first-child { padding-bottom: 8px; }
  .hero-visual { height: 420px; }
  .hero-visual .float-q { width: 250px; top: 40px; }
}
@media (max-width: 600px) {
  .hero-visual { height: 380px; }
  .hero-visual .float-lvl { display: none; }
  .hero-visual .float-q { width: 220px; top: 0; padding: 13px; }
  .hero-visual .float-q .o:not(.ok) { display: none; }
  .post { height: calc(var(--h) * .72); }
  .post .flip { width: calc(var(--w) * .72); height: calc(var(--w) * .72); }
  .posts .post:nth-child(5) { display: none; }
  .hero-road .car { width: 90px; bottom: 34px; }
}

.hero-visual { height: 590px; }
.post .flip { margin-bottom: -14px; }
.hero-road { height: 100px; }
.hero-road .car { width: 104px; bottom: 9px; }
@media (max-width: 900px) { .hero-visual { height: 470px; } }
@media (max-width: 600px) { .hero-visual { height: 400px; } .post { height: calc(var(--h) * .62); } .post .flip { width: calc(var(--w) * .62); height: calc(var(--w) * .62); } .hero-road { height: 84px; } .hero-road .car { width: 84px; bottom: 7px; } }

.hero2 { padding-top: 44px; }
.hero2 h1 { margin: 16px 0 16px; }
.hero2 .cta-row { margin-top: 26px; }
.hero2 .promise { margin-top: 16px; }
.hero2 .trust { margin-top: 26px; padding-top: 18px; }
.hero2-grid > div:first-child { padding-bottom: 36px; }
.hero-visual { height: 548px; }
.posts { left: -36px; right: -10px; justify-content: space-between; }
.posts .post:nth-child(1) { margin-left: 0; }
.hero-visual .float-q { left: 10px; top: 52px; }

.hero-visual .float-lvl { top: 0; z-index: 4; }
.hero-visual .float-q { top: 92px; width: 286px; }

/* =================================================================== how it works: road trip */
.journey { background: linear-gradient(180deg, var(--paper), var(--tint)); overflow: hidden; }
.trip { position: relative; --sign-h: 168px; --post-h: 54px; --road-h: 64px; }
.trip-road { position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); top: calc(var(--sign-h) + var(--post-h)); height: var(--road-h); background: #232b3b; }
.trip-road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, var(--sign) 0 40px, transparent 40px 80px); }
.trip-road::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; bottom: 6px; border-top: 2px solid rgba(255,255,255,.5); border-bottom: 2px solid rgba(255,255,255,.5); }
.trip-car { position: absolute; bottom: 6px; width: 84px; height: auto; z-index: 1; left: calc(50vw - 580px + var(--p, 0) * (min(1160px, 100vw) - 84px)); transition: left .12s linear; }
.exits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }
.exit { display: grid; grid-template-rows: var(--sign-h) var(--post-h) var(--road-h) auto; justify-items: center; text-align: center; }
.gsign { position: relative; width: 100%; max-width: 320px; height: var(--sign-h); background: #006747; color: #fff; border-radius: 16px; box-shadow: inset 0 0 0 4px #006747, inset 0 0 0 7px #fff, 0 18px 30px -18px rgba(0, 60, 40, .7); display: grid; align-content: center; justify-items: center; gap: 6px; padding: 18px 22px; text-decoration: none; transition: transform .25s, box-shadow .25s, filter .25s; filter: saturate(.65) brightness(.96); }
.gsign b { font-size: 1.32rem; letter-spacing: -0.01em; }
.gsign .gsub { font-size: .86rem; opacity: .85; font-weight: 600; }
.gsign .tab { position: absolute; top: -16px; right: 18px; background: #006747; color: #fff; font-weight: 800; font-size: .74rem; letter-spacing: .08em; padding: 5px 10px 9px; border-radius: 8px 8px 0 0; box-shadow: inset 0 0 0 3px #006747, inset 0 0 0 5px #fff; clip-path: inset(0 0 4px 0); }
.gsign .garrow { width: 26px; height: 26px; margin-top: 2px; }
.exit.on .gsign, .gsign:hover { filter: none; transform: translateY(-3px); box-shadow: inset 0 0 0 4px #006747, inset 0 0 0 7px #fff, 0 24px 40px -18px rgba(0, 60, 40, .85); }
.gposts { width: 46%; height: 100%; background: linear-gradient(90deg, #8f9bb0 0 8px, transparent 8px calc(100% - 8px), #8f9bb0 calc(100% - 8px)); }
.exit p { max-width: 30ch; color: var(--ink-2); margin-top: 22px; font-size: .97rem; }
@media (max-width: 860px) {
  .trip { --sign-h: auto; }
  .trip-road { left: 8px; right: auto; top: 0; bottom: 0; width: 46px; height: auto; }
  .trip-road::before { left: 50%; right: auto; top: 0; bottom: 0; width: 4px; height: auto; margin: 0 0 0 -2px; background: repeating-linear-gradient(180deg, var(--sign) 0 30px, transparent 30px 60px); }
  .trip-road::after { top: 0; bottom: 0; left: 5px; right: 5px; border: 0; border-left: 2px solid rgba(255,255,255,.5); border-right: 2px solid rgba(255,255,255,.5); }
  .trip-car { display: none; }
  .exits { grid-template-columns: 1fr; gap: 34px; padding-left: 74px; }
  .exit { grid-template-rows: auto auto; justify-items: start; text-align: left; }
  .gsign { height: auto; min-height: 130px; max-width: none; }
  .gposts, .exit > .gposts { display: none; }
  .exit p { margin-top: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .trip-car { transition: none; } }
.exit p { grid-row: 4; }
.gsign .tab { clip-path: none; top: -15px; padding: 4px 10px 6px; border-radius: 8px 8px 0 0; box-shadow: inset 0 0 0 3px #006747, inset 3px 3px 0 3px #fff, inset -3px 0 0 3px #fff; }
@media (max-width: 860px) { .exit p { grid-row: auto; } }



/* =================================================================== app section */
.appx { background: var(--deep); color: #fff; position: relative; overflow: hidden; border-top: 0 !important; }
.appx::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.4px); background-size: 24px 24px; mask-image: linear-gradient(90deg, transparent, #000 60%); }
.appx::after { content: ""; position: absolute; width: 640px; height: 640px; right: -120px; top: 50%; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle, rgba(36, 87, 214, .55), transparent 65%); }
.appx-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.app-id { display: flex; gap: 14px; align-items: center; }
.app-id img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.app-id b { display: block; font-size: 1.05rem; }
.app-id span { font-size: .86rem; color: #b6c4de; display: flex; align-items: center; gap: 8px; }
.stars { --pct: calc(var(--r) / 5 * 100%); width: 76px; height: 14px; display: inline-block; background: linear-gradient(90deg, var(--sign) var(--pct), rgba(255,255,255,.25) var(--pct)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 14'%3E%3Cg%3E%3Cpath id='s' d='M7 0l2.1 4.5 4.9.5-3.7 3.3 1.1 4.9L7 10.7 2.6 13.2l1.1-4.9L0 5l4.9-.5z'/%3E%3Cuse href='%23s' x='15.5'/%3E%3Cuse href='%23s' x='31'/%3E%3Cuse href='%23s' x='46.5'/%3E%3Cuse href='%23s' x='62'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 14'%3E%3Cg%3E%3Cpath id='s' d='M7 0l2.1 4.5 4.9.5-3.7 3.3 1.1 4.9L7 10.7 2.6 13.2l1.1-4.9L0 5l4.9-.5z'/%3E%3Cuse href='%23s' x='15.5'/%3E%3Cuse href='%23s' x='31'/%3E%3Cuse href='%23s' x='46.5'/%3E%3Cuse href='%23s' x='62'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat; }
.appx h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 26px 0 14px; max-width: 13em; }
.appx .lede { color: #c9d6ef; }
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0 30px; }
.feat div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px 18px; display: grid; gap: 3px; }
.feat svg { width: 26px; height: 26px; fill: none; stroke: var(--sign); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.feat b { font-size: .98rem; }
.feat span { font-size: .86rem; color: #b6c4de; }
.appx .cta-row { align-items: center; margin-top: 0; }
.appx-more { color: #fff; font-weight: 700; text-decoration: none; opacity: .85; }
.appx-more:hover { opacity: 1; }
.fan { position: relative; height: 560px; }
.ph { position: absolute; top: 50%; left: 50%; width: 236px; height: auto; border-radius: 30px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ph.p1 { transform: translate(-50%, -50%) translateX(-118px) rotate(-9deg) scale(.88); }
.ph.p3 { transform: translate(-50%, -50%) translateX(118px) rotate(9deg) scale(.88); }
.ph.p2 { transform: translate(-50%, -50%); z-index: 2; }
.fan:hover .ph.p1 { transform: translate(-50%, -50%) translateX(-178px) rotate(-13deg) scale(.88); }
.fan:hover .ph.p3 { transform: translate(-50%, -50%) translateX(178px) rotate(13deg) scale(.88); }
.fan:hover .ph.p2 { transform: translate(-50%, -52%) scale(1.03); }
@media (max-width: 900px) { .appx-grid { grid-template-columns: 1fr; } .fan { height: 440px; } .ph { width: 190px; } }
@media (max-width: 480px) { .feat { grid-template-columns: 1fr; } .ph.p1 { transform: translate(-50%, -50%) translateX(-84px) rotate(-9deg) scale(.86); } .ph.p3 { transform: translate(-50%, -50%) translateX(84px) rotate(9deg) scale(.86); } }

/* =================================================================== final CTA: practice license */
.final { grid-template-columns: 1fr 360px; }
.lic { position: relative; width: 100%; max-width: 360px; justify-self: end; background: linear-gradient(135deg, #ffffff 0%, #eef3fc 100%); border-radius: 20px; box-shadow: 0 30px 50px -24px rgba(11, 29, 63, .45), 0 0 0 1px var(--line); overflow: hidden; color: #0e1a2f; transform: rotate(3deg); }
.lic-top { display: flex; align-items: center; gap: 10px; background: var(--navy); color: #fff; padding: 12px 16px; font-weight: 800; letter-spacing: -0.01em; }
:root[data-theme="dark"] .lic-top { background: #0f2a5c; }
.lic-top img { width: 26px; height: 26px; border-radius: 6px; }
.lic-top em { margin-left: auto; font-style: normal; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sign); }
.lic-body { display: grid; grid-template-columns: 96px 1fr; gap: 18px; padding: 18px 18px 10px; }
.lic-photo { background: #dce7fb; border-radius: 12px; display: grid; place-items: end center; overflow: hidden; aspect-ratio: 4/5; }
.lic-photo svg { width: 78%; fill: #8aa3cf; }
.lic dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-content: center; font-size: .9rem; }
.lic dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: #667085; align-self: center; }
.lic dd { margin: 0; font-weight: 700; }
.lic-bar { display: flex; gap: 4px; padding: 6px 18px 18px; }
.lic-bar i { height: 22px; flex: 1; background: #0e1a2f; opacity: .85; border-radius: 1px; }
.lic-bar i:nth-child(3n) { flex: .4; } .lic-bar i:nth-child(4n) { flex: 1.6; }
.lic-stamp { position: absolute; right: 18px; bottom: 16px; border: 3px solid #c8102e; color: #c8102e; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 4px 12px; border-radius: 8px; font-size: 1.15rem; transform: rotate(-14deg) scale(2.2); opacity: 0; mix-blend-mode: multiply; }
.lic.in-view .lic-stamp { animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) .35s forwards; }
@keyframes stamp { to { transform: rotate(-14deg) scale(1); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .lic-stamp { transform: rotate(-14deg); opacity: .9; animation: none !important; } }
@media (max-width: 820px) { .final { grid-template-columns: 1fr; } .lic { justify-self: start; max-width: 320px; } }

@media (max-width: 600px) { .posts { left: 0; right: 0; } .hero-visual { margin-top: -24px; } .hero2-grid { gap: 24px; } }

/* =================================================================== map v3: plain map, flag switch, fade others on hover */
.usmap.flags .st path { fill: var(--flag); }
.usmap .st:hover path, .usmap .st:focus path { fill: var(--navy); }
.usmap.flags .st:hover path, .usmap.flags .st:focus path { fill: var(--flag); }
:root[data-theme="dark"] .usmap .st path { stroke: var(--paper); }
:root[data-theme="dark"] .usmap:not(.flags) .st path { fill: color-mix(in srgb, var(--tone) 22%, #111b2e); }
:root[data-theme="dark"] .usmap:not(.flags) .st:hover path { fill: var(--navy); }
.usmap.hovering .st path { opacity: .38; filter: blur(1.2px) saturate(.6); }
.usmap.hovering .st:hover path, .usmap.hovering .st:focus path { opacity: 1; filter: drop-shadow(0 6px 10px rgba(11, 29, 63, .3)); }
.map-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 44px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s; flex: none; }
.switch .track i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch input:checked + .track { background: var(--blue); }
.switch input:checked + .track i { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--blue); outline-offset: 2px; }
.minis { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; font-size: .84rem; }
.minis::-webkit-scrollbar { display: none; }
.minis .muted { white-space: nowrap; margin-right: 2px; }
.mini { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 7px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--ink-2); font-weight: 700; font-size: .8rem; white-space: nowrap; flex: none; }
.mini:hover { border-color: var(--ink); color: var(--ink); }
.mini img { width: 18px; height: 12px; object-fit: cover; border-radius: 2px; }
.map-stage { position: relative; }
.map-card { position: absolute; left: 64%; top: 85%; width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); pointer-events: none; }
.map-card b { display: block; font-size: 1rem; letter-spacing: -0.01em; }
.map-card span { font-size: .82rem; color: var(--muted); display: block; }
.mc-full { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.mc-full img { width: 44px; height: 30px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
.mc-full[hidden], .mc-empty[hidden] { display: none; }
@media (max-width: 900px) { .map-card { display: none; } .map-bar { justify-content: flex-start; } .minis { width: 100%; } }
/* A–Z list */
.all-states { margin-top: 30px; text-align: center; }
.all-states summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 700; cursor: pointer; }
.all-states summary::-webkit-details-marker { display: none; }
.all-states summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.all-states[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.all-states .states { text-align: left; margin-top: 22px; columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.all-states .states a { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.all-states .states a:hover { border-color: var(--blue); }

/* =================================================================== hero v4: winding road + floating sign cluster */
.posts { display: none; }
.hero-visual { height: 560px; }
.wind { position: absolute; inset: 0; width: 100%; height: 100%; }
.wind .asph { fill: #232b3b; }
.wind .dash { fill: none; stroke: var(--sign); stroke-width: 5; stroke-dasharray: 22 18; animation: wdash 1.6s linear infinite; }
@keyframes wdash { to { stroke-dashoffset: -40; } }
.cluster { position: absolute; inset: 0; }
.fs { position: absolute; width: var(--w); height: var(--w); transition: translate .5s cubic-bezier(.2,.8,.2,1); outline: none; z-index: 2; }
.fs img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 12px rgba(11, 29, 63, .28)); animation: bob var(--dur) ease-in-out infinite; transform-origin: 50% 60%; transition: scale .25s; rotate: var(--rot); }
.fs:nth-child(2n) img { animation-direction: reverse; }
.fs:hover img, .fs:focus-visible img { scale: 1.12; }
.fs em { position: absolute; left: 50%; top: calc(100% + 4px); translate: -50% 4px; background: var(--deep); color: #fff; font-style: normal; font-size: .74rem; font-weight: 700; padding: 5px 9px; border-radius: 8px; white-space: nowrap; opacity: 0; transition: opacity .18s, translate .18s; pointer-events: none; z-index: 5; }
.fs:hover em, .fs:focus-visible em { opacity: 1; translate: -50% 0; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
.hero-visual .float-q { left: 4%; top: 32%; z-index: 4; }
.hero-visual .float-lvl { right: 4%; top: 6%; z-index: 4; }
.hero-visual .float { transition: translate .5s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .fs img, .wind .dash { animation: none; } }
@media (max-width: 900px) { .hero-visual { height: 470px; } }
@media (max-width: 600px) { .hero-visual { height: 400px; } .fs { width: calc(var(--w) * .72); height: calc(var(--w) * .72); } .cluster .fs:nth-child(n+8) { display: none; } .hero-visual .float-q { top: 30%; left: 2%; } }

/* =================================================================== road signs: physics pile on the road */
.sign-pile { padding-bottom: 0; background: linear-gradient(180deg, var(--paper) 0%, var(--tint) 100%); overflow: hidden; }
.sign-pile + section { border-top: 0; }
.hwy-road { height: 74px; background: #232b3b; position: relative; }
.hwy-road::before { content: ""; position: absolute; left: 0; right: -100px; top: 50%; height: 5px; margin-top: -2.5px; background: repeating-linear-gradient(90deg, var(--sign) 0 46px, transparent 46px 92px); }
.hwy-road::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; bottom: 8px; border-top: 2px solid rgba(255,255,255,.55); border-bottom: 2px solid rgba(255,255,255,.55); }
.pile { position: relative; margin-top: 24px; }
.pile-items { height: 360px; position: relative; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; align-items: flex-end; gap: 6px 10px; padding: 0 20px; overflow: hidden; }
.pi { width: var(--w); height: var(--w); flex: none; user-select: none; -webkit-user-select: none; }
.pi img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 8px rgba(11, 29, 63, .25)); pointer-events: none; }
.pile.live .pile-items { display: block; padding: 0; cursor: grab; touch-action: pan-y; }
.pile.live .pi { position: absolute; left: 0; top: 0; will-change: transform; }
.pile.dragging .pile-items { cursor: grabbing; }
.pile-tip { position: absolute; z-index: 5; background: var(--deep); color: #fff; font-size: .78rem; font-weight: 700; padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; transform: translate(-50%, -100%); }
.pile-hint { position: absolute; left: 50%; top: 12px; translate: -50% 0; font-size: .84rem; color: var(--muted); margin: 0; opacity: 0; transition: opacity .4s; }
.pile.live .pile-hint { opacity: 1; }
@media (max-width: 700px) { .pile-items { height: 340px; } .pile-hint { display: none; } }
@media (hover: none) { .pile-hint { display: none; } }
@media (max-width: 700px) { .pi { width: calc(var(--w) * .66); height: calc(var(--w) * .66); } .pile-items { height: 320px; } }

/* =================================================================== app: 3D screenshot carousel */
.fan { display: none; }
.cf { position: relative; }
.cf-stage { position: relative; height: 540px; perspective: 1400px; transform-style: preserve-3d; }
.cf-item { position: absolute; left: 50%; top: 50%; width: 238px; height: auto; border-radius: 30px; margin: -258px 0 0 -119px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s, filter .7s; cursor: pointer; user-select: none; }
.cf-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.cf-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; }
.cf-btn:hover { background: rgba(255,255,255,.14); }
.cf-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cf-dots { display: flex; gap: 6px; }
.cf-dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.3); transition: width .3s, background .3s; }
.cf-dots i.on { width: 22px; background: var(--sign); }
@media (max-width: 900px) { .cf-stage { height: 440px; } .cf-item { width: 190px; margin: -206px 0 0 -95px; border-radius: 24px; } }

/* final CTA: two practice-license cards (Freepik artwork, our wording) */
.final { grid-template-columns: 1fr 400px; }
.licstack { position: relative; width: 100%; max-width: 400px; aspect-ratio: 670 / 520; justify-self: end; }
.lc { position: absolute; width: 88%; height: auto; border-radius: 16px; box-shadow: 0 26px 44px -22px rgba(11, 29, 63, .5); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.lc.back { right: 0; top: 0; transform: rotate(7deg); }
.lc.front { left: 0; bottom: 0; transform: rotate(-4deg); }
.licstack:hover .lc.back { transform: rotate(10deg) translate(10px, -10px); }
.licstack:hover .lc.front { transform: rotate(-6deg) translate(-8px, 6px); }
.licstack .lic-stamp { right: auto; left: 46%; bottom: 14%; z-index: 2; }
.licstack.in-view .lic-stamp { animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) .35s forwards; }
@media (max-width: 820px) { .final { grid-template-columns: 1fr; } .licstack { justify-self: center; max-width: 340px; } }
.final .lc { aspect-ratio: auto; max-width: none; object-fit: fill; justify-self: auto; box-shadow: 0 26px 44px -22px rgba(11, 29, 63, .5); }
.licstack .lic-stamp { left: auto; right: 22%; bottom: 3%; }

/* hero road starts at the top of the hero, right under the header */
.wind { top: -300px; height: calc(100% + 300px); }
@media (max-width: 900px) { .hero-visual { overflow: hidden; } }
/* Do Not Enter: show only the round face, keep the shadow on the wrapper */
.fs.round { filter: drop-shadow(0 10px 12px rgba(11, 29, 63, .28)); }
.fs.round img { filter: none; clip-path: circle(35.3% at 50% 50%); }
/* replay button for the sign pile */
.pile-again { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); transition: transform .2s, border-color .2s; }
.pile-again:hover { border-color: var(--ink); }
.pile-again:hover svg { transform: rotate(-200deg); }
.pile-again svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.3,1.3,.5,1); }
.pile-again[hidden] { display: none; }

/* bigger signs in the pile */
.pile-items { height: 520px; }
@media (max-width: 700px) { .pi { width: calc(var(--w) * .52); height: calc(var(--w) * .52); } .pile-items { height: 400px; } }
.pi.round { filter: drop-shadow(0 6px 8px rgba(11, 29, 63, .25)); }
.pi.round img { filter: none; clip-path: circle(35.3% at 50% 50%); }

/* signs fall from above the page, over the header, into the pile */
.sign-pile { overflow: visible; }
.pile.live .pile-items { overflow: visible; }
.pile.live .pi { z-index: 60; }
.sign-pile + section { position: relative; z-index: 61; }
body { overflow-x: clip; }

/* =================================================================== your state chip + emoji-style flags */
.my-state { display: inline-flex; align-items: center; height: 36px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); margin-left: 6px; overflow: hidden; }
.my-state a { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px 0 9px; height: 100%; text-decoration: none; color: var(--ink); font-weight: 700; font-size: .86rem; white-space: nowrap; }
.my-state button { border: 0; background: none; color: var(--muted); font-size: 1.05rem; line-height: 1; width: 28px; height: 100%; cursor: pointer; border-radius: 0 999px 999px 0; }
.my-state button:hover { color: var(--ink); background: var(--tint); }
@media (max-width: 720px) { .my-state a span { display: none; } .my-state a { padding-right: 2px; } }
/* flags: small, rounded, with a hairline and soft sheen, like emoji flags */
.my-state img, .mini img, .flag, .chip-link img, .mc-full img, .states a .flag { border-radius: 4px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(14, 26, 47, .25); }
.my-state img { width: 22px; height: 16px; }
.usmap .st.mine path { stroke: var(--sign); stroke-width: 3; }

/* =================================================================== /app/ page */
.ah { background: var(--deep); color: #fff; position: relative; overflow: hidden; padding: 72px 0 40px; border: 0 !important; }
.ah::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.4px); background-size: 24px 24px; }
.ah::after { content: ""; position: absolute; width: 760px; height: 760px; right: -160px; top: 50%; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle, rgba(36, 87, 214, .55), transparent 65%); }
.ah-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.ah-icon { width: 132px; height: 132px; border-radius: 30px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 24px 60px -10px rgba(36, 87, 214, .7), 0 10px 24px rgba(0,0,0,.4); }
.ah-icon img { width: 100%; height: 100%; display: block; }
.ah-rating { display: flex; align-items: center; gap: 8px; margin-top: 26px; color: #c9d6ef; font-size: .92rem; }
.ah-rating b { color: #fff; }
.ah h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 3.8rem); margin: 14px 0 18px; max-width: 12em; }
.ah h1 em.block { color: var(--deep); }
.ah .lede { color: #c9d6ef; max-width: 34em; }
.ah-cta { display: flex; align-items: center; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.badge-big img { height: 68px; width: auto; display: block; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.badge-big:hover img { box-shadow: 0 0 0 2px var(--sign); }
.qr { display: flex; align-items: center; gap: 14px; background: #fff; color: var(--ink); border-radius: 16px; padding: 10px 16px 10px 10px; max-width: 300px; }
.qr img { width: 76px; height: 76px; }
.qr span { font-size: .8rem; color: #55607a; line-height: 1.35; }
.qr b { display: block; color: var(--ink); font-size: .9rem; margin-bottom: 2px; }
@media (hover: none), (max-width: 760px) { .qr { display: none; } }
.ah .cf-stage { height: 560px; }
.ah + .hero-road { margin-top: 0; }
@media (max-width: 900px) { .ah-grid { grid-template-columns: 1fr; } .ah-icon { width: 104px; height: 104px; border-radius: 24px; } .ah .cf-stage { height: 440px; } }
/* bento of App Store screenshots */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bt { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-height: 470px; transition: transform .25s, box-shadow .25s; }
.bt:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.bt:nth-child(2n) { background: var(--tint); }
.bt-copy { padding: 26px 26px 0; }
.bt-n { font-weight: 800; font-size: .8rem; color: var(--blue); letter-spacing: .08em; }
.bt h3 { font-size: 1.25rem; margin: 6px 0 6px; }
.bt p { color: var(--ink-2); font-size: .94rem; }
.bt-shot { position: relative; overflow: hidden; margin-top: 18px; }
.bt-shot img { position: absolute; left: 50%; top: 0; width: 62%; translate: -50% 0; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px -12px rgba(11, 29, 63, .35); transition: translate .4s cubic-bezier(.2,.8,.2,1); }
.bt:hover .bt-shot img { translate: -50% -14px; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bt { min-height: 420px; } }
/* built for your state */
.state-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.ss-shot { justify-self: center; width: min(300px, 80%); rotate: -4deg; }
.ss-shot img { width: 100%; height: auto; border-radius: 28px; box-shadow: var(--shadow); }
@media (max-width: 800px) { .state-split { grid-template-columns: 1fr; } }
/* final */
.ah-final { text-align: center; background: var(--deep); color: #fff; border-radius: 32px; padding: 56px 24px; display: grid; justify-items: center; position: relative; overflow: hidden; }
.ah-final::before { content: ""; position: absolute; width: 600px; height: 600px; left: 50%; top: -340px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgba(36, 87, 214, .6), transparent 65%); }
.ah-final > * { position: relative; }
.ah-final > img { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 16px 40px -8px rgba(36, 87, 214, .8); }
.ah-final h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 22px 0 8px; }
.ah-final .lede { color: #c9d6ef; }
.ah-final .ah-cta { justify-content: center; }
.ah h1 { isolation: isolate; }

/* phones: the winding road runs the full height of the hero, behind the text, joining the road below */
.wind-m { display: none; }
@media (max-width: 900px) {
  .hero2 { position: relative; }
  .hero2 > .wrap { position: relative; z-index: 1; }
  .wind-m { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .wind-m .asph { fill: #232b3b; }
  .wind-m .dash { fill: none; stroke: var(--sign); stroke-width: 5; stroke-dasharray: 22 18; animation: wdash 1.6s linear infinite; }
  .hero-visual .wind { display: none; }
  /* soften the road where it passes behind the copy */
  .hero2-grid > div:first-child { position: relative; }
  .hero2-grid > div:first-child::before { content: ""; position: absolute; inset: -18px -14px; background: color-mix(in srgb, var(--paper) 62%, transparent); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); border-radius: 24px; z-index: -1; }
  .hero-visual { overflow: visible; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .wind-m .dash { animation: none; } }

/* phones: How it works road runs along the bottom, with the car */
@media (max-width: 860px) {
  .trip { padding-bottom: 92px; }
  .trip-road { left: calc(50% - 50vw); right: calc(50% - 50vw); width: auto; top: auto; bottom: 0; height: 60px; }
  .trip-road::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 4px; margin: -2px 0 0; background: repeating-linear-gradient(90deg, var(--sign) 0 36px, transparent 36px 72px); }
  .trip-road::after { top: 6px; bottom: 6px; left: 0; right: 0; border: 0; border-top: 2px solid rgba(255,255,255,.5); border-bottom: 2px solid rgba(255,255,255,.5); }
  .trip-car { display: block; width: 72px; bottom: 5px; left: calc(var(--p, 0) * (100vw - 80px)); }
  .exits { padding-left: 0; }
}

/* pile: bigger stage, larger signs on phones, only a few shown before JS runs */
.pile-items { height: 640px; }
.pile:not(.live) .pi:nth-child(n+11) { display: none; }
.pile:not(.live) .pi img[data-src] { visibility: hidden; }
@media (max-width: 700px) { .pi { width: calc(var(--w) * .78); height: calc(var(--w) * .78); } .pile-items { height: 560px; } }

/* no sideways scrolling on phones */
html, body { overflow-x: hidden; max-width: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
.map-bar > * { min-width: 0; max-width: 100%; }
.minis { max-width: 100%; }
.cf { overflow: hidden; padding: 10px 0; contain: paint; }
.ah, .appx, .ah-final, .journey { contain: paint; }

/* =================================================================== /app/ v2: balanced CTA, themed promo cards, mini map */
.ah-cta { gap: 14px; align-items: stretch; }
.badge-big img { height: 64px; border-radius: 13px; }
.qr { height: 64px; box-sizing: border-box; background: #000; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 13px; padding: 6px 16px 6px 6px; gap: 12px; max-width: none; }
.qr-code { width: 50px; height: 50px; background: #fff; border-radius: 8px; display: grid; place-items: center; padding: 3px; flex: none; }
.qr .qr-code img { width: 100%; height: 100%; }
.qr-txt { display: grid; font-size: .74rem; color: rgba(255,255,255,.75); line-height: 1.25; white-space: nowrap; }
.qr-txt b { color: #fff; font-size: .98rem; letter-spacing: -0.01em; margin: 0; }
/* promo cards in the App Store screenshot style */
.promo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pc { --bg: #2457d6; --fg: #fff; --sub: rgba(255,255,255,.82); background: var(--bg); color: var(--fg); border-radius: 26px; padding: 26px 26px 0; min-height: 440px; display: grid; grid-template-rows: auto auto auto 1fr; overflow: hidden; position: relative; transition: transform .25s, box-shadow .25s; }
.pc::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.1) 1.2px, transparent 1.4px); background-size: 20px 20px; pointer-events: none; }
.pc:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -24px rgba(11, 29, 63, .6); }
.pc-blue { --bg: linear-gradient(160deg, #3a6cf0, #1e4ccf); }
.pc-yellow { --bg: linear-gradient(160deg, #ffd23f, #f6b81c); --fg: #0e1a2f; --sub: rgba(14,26,47,.75); }
.pc-navy { --bg: linear-gradient(160deg, #13295a, #0b1d3f); }
.pc-cream { --bg: linear-gradient(160deg, #fbf3e3, #f3e6cb); --fg: #0e1a2f; --sub: rgba(14,26,47,.72); }
.pc-yellow::before, .pc-cream::before { background-image: radial-gradient(rgba(14,26,47,.08) 1.2px, transparent 1.4px); }
.pc-tag { justify-self: start; background: var(--sign); color: #0e1a2f; font-weight: 800; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; position: relative; }
.pc-tag::before, .pc-tag::after { content: "•"; margin: 0 6px 0 0; }
.pc-tag::after { margin: 0 0 0 6px; }
.pc-yellow .pc-tag { background: #0e1a2f; color: var(--sign); }
.pc h3 { color: var(--fg); font-size: 1.75rem; line-height: 1.08; letter-spacing: -0.035em; margin: 16px 0 10px; font-weight: 800; position: relative; }
.pc h3 em { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; letter-spacing: -0.01em; background: var(--sign); color: #0e1a2f; padding: 0 .18em; border-radius: 4px; display: inline-block; transform: rotate(-1.5deg); }
.pc-yellow h3 em { background: #fff; }
.pc p { color: var(--sub); font-size: .95rem; position: relative; }
.pc-ui { position: relative; align-self: end; margin-top: 22px; }
/* mini UIs */
.ui-q, .ui-levels, .ui-review, .ui-cards .top { background: #fff; color: #0e1a2f; border-radius: 18px 18px 0 0; padding: 16px 16px 20px; box-shadow: 0 -12px 30px -14px rgba(0,0,0,.4); }
.ui-q small, .ui-cards small { display: block; font-size: .7rem; color: #667085; font-weight: 600; margin-bottom: 6px; }
.ui-q b { display: block; font-size: .92rem; line-height: 1.3; margin-bottom: 10px; }
.ui-q i { display: block; font-style: normal; font-size: .8rem; border: 1px solid #e1e7f0; border-radius: 10px; padding: 7px 10px; margin-top: 6px; color: #3a4659; }
.ui-q i.ok { border-color: #157a45; background: #e7f5ec; color: #0e1a2f; font-weight: 600; }
.ui-q i.ok::before { content: "✓ "; color: #157a45; font-weight: 800; }
.ui-levels { display: grid; gap: 10px; }
.ui-levels span { display: grid; grid-template-columns: 1fr; gap: 5px; font-size: .82rem; font-weight: 700; }
.ui-levels em { display: block; height: 8px; border-radius: 4px; background: #eef1f6; position: relative; overflow: hidden; }
.ui-levels em::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: #2457d6; border-radius: 4px; }
.ui-levels .tm { color: #b42318; }
.ui-review { display: grid; gap: 8px; }
.ui-review span { display: flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 600; padding: 8px 10px; border-radius: 10px; background: #f5f7fb; }
.ui-review span::before { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; color: #fff; flex: none; }
.ui-review .ok::before { content: "✓"; background: #157a45; }
.ui-review .no::before { content: "↻"; background: #e5484d; }
.ui-ring { display: grid; justify-items: center; padding-bottom: 26px; position: relative; }
.ui-ring svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.ui-ring circle { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 12; }
.ui-ring circle.v { stroke: var(--sign); stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: calc(314.16 * (1 - var(--p))); }
.ui-ring b { position: absolute; top: 50px; font-size: 2rem; letter-spacing: -0.04em; text-align: center; line-height: 1; }
.ui-ring b small { display: block; font-size: .72rem; font-weight: 600; opacity: .8; letter-spacing: .04em; margin-top: 4px; }
.ui-ring .streak { margin-top: 12px; background: rgba(255,255,255,.14); border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 700; }
.ui-signs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-bottom: 26px; }
.ui-signs img { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(11, 29, 63, .25)); transition: transform .3s; }
.pc:hover .ui-signs img:nth-child(odd) { transform: rotate(-6deg) translateY(-4px); }
.pc:hover .ui-signs img:nth-child(even) { transform: rotate(6deg) translateY(-4px); }
.ui-cards { position: relative; height: 170px; }
.ui-cards span { position: absolute; left: 8%; right: 8%; bottom: 0; height: 150px; border-radius: 18px 18px 0 0; background: #fff; }
.ui-cards span:nth-child(1) { transform: translateY(-22px) scale(.86); opacity: .35; }
.ui-cards span:nth-child(2) { transform: translateY(-11px) scale(.93); opacity: .6; }
.ui-cards .top { left: 4%; right: 4%; height: 150px; }
.ui-cards b { display: block; font-size: .95rem; line-height: 1.3; }
.ui-cards em { display: block; margin-top: 12px; font-style: normal; font-size: .76rem; color: #2457d6; font-weight: 700; }
@media (max-width: 960px) { .promo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .promo { grid-template-columns: 1fr; } .pc { min-height: 400px; } }
/* mini map */
.ss-map { justify-self: center; width: 100%; max-width: 480px; }
.minimap { width: 100%; height: auto; display: block; }
.minimap path { fill: var(--tone); stroke: var(--paper); stroke-width: 1.4; stroke-linejoin: round; transition: fill .15s; }
.minimap a:hover path, .minimap a:focus path { fill: var(--navy); }
:root[data-theme="dark"] .minimap path { fill: color-mix(in srgb, var(--tone) 22%, #111b2e); }
:root[data-theme="dark"] .minimap a:hover path { fill: var(--navy); }
.badge-big img { box-shadow: none; }
.badge-big:hover img { box-shadow: none; filter: brightness(1.15); }
.qr { border-color: #a6a6a6; }
/* phones: frosted panel behind the hero copy reads as a distinct rounded card */
@media (max-width: 900px) {
  .hero2-grid > div:first-child { padding: 22px 20px 24px; margin: 0 -4px; }
  .hero2-grid > div:first-child::before { inset: 0; border-radius: 26px; background: color-mix(in srgb, var(--paper) 72%, transparent); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 1px solid color-mix(in srgb, var(--line-2) 80%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -22px rgba(11, 29, 63, .45); }
  :root[data-theme="dark"] .hero2-grid > div:first-child::before { box-shadow: 0 18px 40px -22px rgba(0,0,0,.7); }
}

/* header App Store button */
.as-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 11px; border-radius: 10px; background: #000; color: #fff; text-decoration: none; border: 1px solid #a6a6a6; margin-left: 6px; transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.as-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); }
.as-btn svg { width: 17px; height: 21px; flex: none; }
.as-t { display: grid; line-height: 1; font-weight: 700; font-size: .98rem; letter-spacing: -0.01em; }
.as-t small { font-size: .58rem; font-weight: 500; letter-spacing: .01em; margin-bottom: 2px; }
:root[data-theme="dark"] .as-btn { border-color: #5b6478; }
@media (max-width: 1100px) { .nav a.nav-opt[href="/app/"] { display: none; } }
@media (max-width: 400px) { .as-btn { padding: 0 11px 0 9px; } .as-t small { display: none; } .as-t { font-size: .88rem; } }
/* pile: sign-name label always above the signs */
.pile-tip { z-index: 90; }
/* section order: app now sits after How it works */
.journey + .appx { border-top: 0; }
.nav a.as-btn, .nav a.as-btn:hover { color: #fff; }

/* =================================================================== per-sign pages */
.sign h3 a { color: inherit; text-decoration: none; }
.sign h3 a:hover { text-decoration: underline; }
.sign-page { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: center; }
.sign-art { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.sign-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.sign-page h1 { margin: 12px 0 14px; }
.sign-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.sign-facts div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.sign-facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sign-facts dd { margin: 3px 0 0; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.sign-facts i { width: 16px; height: 16px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, .25); flex: none; }
:root[data-theme="dark"] .sign-facts i { border-color: rgba(255, 255, 255, .35); }
.sign-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.sign-body > div { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; min-width: 0; }
.sign-body > div:only-child { grid-column: 1 / -1; }
.sign-body h2 { font-size: 1.3rem; margin-bottom: 4px; }
.sign-body .checks { margin: 18px 0 0; }
.sign-read p { color: var(--ink-2); margin-top: 14px; }
.sign-read p b { color: var(--ink); }
.sign-rels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sign-rel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ink); display: grid; transition: transform .15s ease; }
.sign-rel:hover { transform: translateY(-2px); }
.sign-rel img { width: 100%; height: auto; aspect-ratio: 1; background: #fff; border-bottom: 1px solid var(--line); }
.sign-rel span { padding: 12px 14px 14px; font-weight: 700; font-size: .92rem; }
.sign-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .92rem; font-weight: 600; }
.sign-nav a:last-child { text-align: right; }
@media (max-width: 760px) {
  .sign-page { grid-template-columns: 1fr; gap: 24px; }
  .sign-art { max-width: 240px; }
  .sign-body { grid-template-columns: 1fr; }
  .sign-body > div { padding: 22px 20px; }
  .sign-rels { grid-template-columns: repeat(2, 1fr); }
  .sign-nav { grid-template-columns: 1fr 1fr; }
  .sign-nav a:nth-child(2) { grid-column: 1 / -1; grid-row: 2; text-align: center; }
}

/* =================================================================== state guides */
.quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 26px; }
.quick span { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.quick a { background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 14px; font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.quick a:hover { border-color: var(--navy); }
.gfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; border-top: 1px solid var(--line); }
.gfacts div { padding: 16px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.gfacts dt { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gfacts dd { margin: 5px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.gsrc { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); margin-top: 6px; }
.gsrc a { color: var(--muted); }
.guide-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.guide-cards a { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; text-decoration: none; color: var(--ink); display: grid; gap: 8px; border-left: 4px solid var(--sign); transition: transform .15s ease; }
.guide-cards a:hover { transform: translateY(-2px); }
.guide-cards span { font-size: .86rem; color: var(--muted); }
.official { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.official a { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--ink); display: grid; gap: 3px; background: var(--surface); min-width: 0; }
.official a:hover { border-color: var(--navy); }
.official span { font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
.official + .source { margin-bottom: 8px; }
.wrap.narrow { max-width: 820px; }
.gsteps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 14px; }
.gsteps li { counter-increment: step; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px 18px 68px; }
.gsteps li::before { content: counter(step); position: absolute; left: 20px; top: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--sign); color: #0b1d3f; font-weight: 800; display: grid; place-items: center; }
.gsteps p { font-weight: 600; }
@media (max-width: 760px) {
  .gfacts { grid-template-columns: 1fr; }
  .guide-cards, .official { grid-template-columns: 1fr; }
  .gsteps li { padding: 18px 18px 16px 60px; }
  .gsteps li::before { left: 16px; }
}

.cite { margin-top: 8px; font-size: .84rem; color: var(--muted); }
.cite a { color: var(--ink-2); }

/* ---------- bilingual quiz text (main.js sets html.lang-es) ---------- */
.l-es { display: none; }
html.lang-es .l-en { display: none; }
html.lang-es .l-es { display: inline; }

/* ---------- quiz tools: language + text size ---------- */
.quiz-tools { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; background: var(--surface); }
.seg button { font: 600 .86rem/1 var(--font); color: var(--ink-2); background: transparent; border: 0; padding: 0 15px; min-height: 38px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button[aria-pressed="true"] { background: var(--navy); color: var(--navy-ink); }
.seg button:disabled { opacity: .35; cursor: default; }
.seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.seg sup { font-size: .72em; }
.quiz-wrap { --qs: 1; }
.quiz-wrap .q h2 { font-size: calc(1.3rem * var(--qs)); }
.quiz-wrap .opt { font-size: calc(1rem * var(--qs)); }
.quiz-wrap .reveal { font-size: calc(.95rem * var(--qs)); }
.reveal .streak { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--tint); font-weight: 600; color: var(--ink-2); }
.reveal .streak.done { background: var(--right-bg); color: var(--right); }

/* ---------- study path on state hubs ---------- */
.path { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px 26px; }
.path-head h2 { font-size: 1.25rem; margin-bottom: 2px; }
.path-head p { font-size: .92rem; }
.path-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.path-steps a { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 14px 16px; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .12s; }
.path-steps a:hover { border-color: var(--navy); }
.pn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--tint); color: var(--navy); }
.pt { font-weight: 700; font-size: .98rem; margin-top: 6px; }
.pd { font-size: .85rem; line-height: 1.45; color: var(--muted); }
.ps { margin-top: auto; padding-top: 6px; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.path-steps li.done .ps { color: var(--right); }
.ps:empty { display: none; }
.path-steps li.done .pn { background: var(--right); color: var(--surface); font-size: 0; }
.path-steps li.done .pn::after { content: "✓"; font-size: .95rem; }
.path-steps li.next a { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.path-steps li.next a::before { content: "Next"; position: absolute; top: 14px; right: 14px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.path-steps li[data-step="exam"] a { background: var(--surface); border-style: dashed; }
.app-tag { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: var(--sign); color: #1a1a1a; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
@media (max-width: 900px) {
  .path { padding: 20px 18px 20px; }
  .path-steps { grid-template-columns: 1fr; gap: 8px; }
  .path-steps a { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; row-gap: 2px; padding: 12px 14px; }
  .pn { grid-row: 1 / span 3; }
  .pt { margin-top: 2px; padding-right: 44px; }
  .ps { padding-top: 2px; }
}

/* states that test only in English */
.lang-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--tint); border: 1px solid var(--line); font-size: .88rem; color: var(--ink-2); }
.lang-note a { font-weight: 600; white-space: nowrap; }
.page-head .lang-note { margin-top: 14px; }

/* app CTA: badges plus a QR code for desktop visitors */
.cta-get { display: grid; gap: 12px; justify-items: start; }
.cta-qr { display: flex; align-items: center; gap: 10px; max-width: 250px; }
.cta-qr img { width: 64px; height: 64px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 10px; flex: none; }
.cta-qr span { font-size: .78rem; line-height: 1.35; color: var(--muted); }
.cta-qr b { display: block; color: var(--ink); font-size: .84rem; }
@media (hover: none), (max-width: 760px) { .cta-qr { display: none; } }

/* free website vs app comparison */
.compare-wrap { max-width: 820px; margin: 0 auto; overflow-x: auto; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: .95rem; }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--tint); }
.compare thead th span { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--right); margin-left: 4px; }
.compare tbody th { font-weight: 600; color: var(--ink); width: 46%; }
.compare td { color: var(--ink-2); }
.compare td:last-child { font-weight: 600; color: var(--ink); }
.compare .ok { color: var(--right); font-weight: 800; font-size: 1.1rem; }
.compare .no { color: var(--muted); }
@media (max-width: 640px) { .compare th, .compare td { padding: 12px 12px; font-size: .88rem; } .compare tbody th { width: 40%; } }

/* why the other options are wrong */
.why { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--tint); }
.why-h { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.why ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.why li { font-size: .92em; line-height: 1.45; color: var(--ink-2); }
.why li b { color: var(--wrong); margin-right: 2px; }