/* The front page (web/index.html, web/es/index.html), drawn in the app's own language
 * (the Claude Design canvas "Open Road Ready App", approved 2026-10-22) and built on its
 * kit: tokens, type and the sign buttons come from /kit/tokens.css and /kit/base.css, so
 * the page and the app read as one product, by day and on a night drive.
 *
 * The page is the road the app is: it opens on the app's windshield with the next step
 * hung on a gantry, each section is an exit, numbers and prices sit on plaques, and
 * every screen of the app is shown whole, inside the phone, tablet or laptop it was
 * recorded on. Motion is transform and opacity only, and stops for anyone who asks
 * for less of it. */

body { padding-bottom: 0; overflow-x: hidden; }
main { display: block; overflow-x: clip; }
.wrap { max-width: 1200px; }
.eyebrow { font: 800 13px/1 var(--sign-face); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--muted); max-width: 62ch; }
.fine { font-size: 14.5px; color: var(--muted); margin: 14px 0 0; }
h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; margin: 0; letter-spacing: -.02em; }
h3 { font-size: 21px; margin: 0; }

/* the bar: the app's own brand sign and a plain row of links */
header.bar { padding: 14px 20px 12px; max-width: 1200px; margin: 0 auto; }
.bar .mark svg { width: 14px; height: 14px; }
.bar nav { display: flex; align-items: center; gap: 20px; font: 600 15px/1 var(--sign-face); }
.bar nav a:not(.sign) { color: var(--ink); text-decoration: none; }
.bar nav a:not(.sign):hover { color: var(--guide-ink); }
@media (max-width: 780px) { .bar nav a:not(.sign):not([lang]) { display: none; } .bar nav { gap: 14px; } }
/* Spanish words are longer: its full bar needs about 40px more than English */
@media (max-width: 840px) { html[lang=es] .bar nav a:not(.sign):not([lang]) { display: none; } }
.bar a.sign { white-space: nowrap; }
@media (max-width: 420px) { header.bar { padding-left: 14px; padding-right: 14px; } .bar nav { gap: 10px; }
  .bar a.sign.small { padding: 6px 11px; font-size: 14px; } }
@media (max-width: 380px) { header.bar { gap: 10px; } .bar .mark { padding: 0 9px 0 10px; font-size: 14px; }
  .bar nav { gap: 8px; } .bar a.sign.small { padding: 6px 9px; } }
@media (max-width: 340px) { .bar nav a[lang] { display: none; } }
.hint { text-align: center; margin: 0; padding: 8px 20px; background: var(--zone); font-size: 15px; }

/* links that are signs: the same recipe as the app's buttons */
a.sign {
  --c: var(--guide); --edge: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 10px 24px; border-radius: var(--radius);
  color: #fff; text-decoration: none; font: 700 17.5px/1.15 var(--sign-face); letter-spacing: .005em;
  background:
    linear-gradient(100deg, transparent 38%, rgb(255 255 255 / .34) 48%, rgb(255 255 255 / .08) 54%, transparent 62%) 160% 0 / 260% 100% no-repeat,
    var(--c);
  box-shadow: inset 0 0 0 4px var(--c), inset 0 0 0 6.5px var(--edge), var(--glow) var(--c);
  transition: background-position .9s ease, transform .45s var(--spring);
}
a.sign.ghost { --c: var(--plate); --edge: var(--plate-ink); color: var(--plate-ink);
  box-shadow: inset 0 0 0 4px var(--c), inset 0 0 0 6.5px var(--edge), 0 0 0 1px var(--line-2); }
a.sign.small { min-height: 40px; padding: 6px 15px; font-size: 15px; border-radius: 9px;
  box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 5px var(--edge), 0 0 0 1px var(--line-2); }
a.sign svg, button svg { width: 20px; height: 20px; flex: none; }
@media (hover: hover) { a.sign:hover { background-position: -60% 0, 0 0; transform: translateY(-1px); } }
a.sign:focus-visible { background-position: -60% 0, 0 0; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 26px 0 0; }
.cta button { width: auto; margin: 0; }

/* the windshield: the state's road, a gantry, the next step on a green sign */
.windshield { position: relative; overflow: hidden; background: var(--zone); height: clamp(430px, 52vw, 600px); }
.windshield .ws-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
@media (prefers-color-scheme: dark) { .windshield .ws-art { filter: brightness(.9); } }
.windshield .gantry { position: absolute; left: -10px; right: -10px; top: 26px; height: 16px;
  background:
    linear-gradient(#8e99a3, #8e99a3) 0 0 / 100% 2.5px no-repeat,
    linear-gradient(#8e99a3, #8e99a3) 0 100% / 100% 2.5px no-repeat,
    repeating-linear-gradient(60deg, transparent 0 8px, #8e99a3 8px 10px, transparent 10px 16px); }
.windshield .gantry::before, .windshield .gantry::after { content: ""; position: absolute; top: 16px; width: 5px; height: 36px; background: #8e99a3; border-radius: 1px; }
.windshield .gantry::before { left: 22%; } .windshield .gantry::after { left: 70%; }
.overhead { position: absolute; z-index: 1; left: 50%; top: 76px; width: min(880px, calc(100% - 32px)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: clamp(20px, 3vw, 30px) clamp(22px, 4vw, 40px) clamp(22px, 3vw, 30px); border-radius: 20px;
  background: var(--guide); color: #fff;
  box-shadow: inset 0 0 0 6px var(--guide), inset 0 0 0 10px #fff, var(--glow) var(--guide); }
.overhead .tab { position: absolute; right: 28px; bottom: calc(100% - 4px); height: 36px; padding: 2px 14px 0;
  display: inline-flex; align-items: center; border-radius: 10px; background: var(--guide); color: #fff;
  font: 800 14px/1 var(--sign-face); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: inset 0 0 0 4.5px var(--guide), inset 0 0 0 7.5px #fff; }
.overhead .kicker { font: 800 14px/1 var(--sign-face); letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .85); }
.overhead h1, .overhead .legend { margin: 0; padding-right: 64px; font: 700 clamp(34px, 5.2vw, 64px)/1.02 var(--sign-face); letter-spacing: -.02em; color: #fff; }
.overhead .sub { margin: 0; font: 600 clamp(16px, 1.7vw, 21px)/1.3 var(--sign-face); color: rgb(255 255 255 / .9); }
.overhead::after { content: ""; position: absolute; right: clamp(20px, 3vw, 32px); top: clamp(26px, 3.4vw, 40px);
  width: clamp(38px, 4.4vw, 56px); height: clamp(38px, 4.4vw, 56px); background: #fff;
  clip-path: polygon(0 38%, 58% 38%, 58% 6%, 100% 50%, 58% 94%, 58% 62%, 0 62%); transform: rotate(-45deg); }
.overhead a.sign { --c: #fff; --edge: var(--guide); color: var(--guide); margin-top: 12px; }
.overhead a.sign:hover { color: var(--guide); }

/* the opening, under the windshield: words on the left, the film on the right */
.opening { display: grid; gap: 34px; padding-top: 36px; padding-bottom: 56px; align-items: center; }
@media (min-width: 1000px) { .opening { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; padding-top: 56px; } }

/* devices: the app shown whole, on what it was recorded on */
.dev { position: relative; background: #0e1317; margin: 0;
  box-shadow: 0 34px 50px -30px rgb(10 16 22 / .55), 0 12px 24px -16px rgb(10 16 22 / .35); }
.dev img, .dev video { display: block; width: 100%; height: auto; }
.dev.phone { border-radius: 38px; padding: 9px; width: min(290px, 74vw); }
.dev.phone img { border-radius: 30px; }
.dev.tablet { border-radius: 26px; padding: 12px; width: min(440px, 88vw); }
.dev.tablet img { border-radius: 14px; }
.dev.laptop { border-radius: 16px 16px 5px 5px; padding: 10px 10px 13px; }
.dev.laptop img, .dev.laptop video { border-radius: 5px; }
.dev.laptop::after { content: ""; position: absolute; left: -5%; right: -5%; top: 100%; height: 16px;
  border-radius: 0 0 14px 14px; background: linear-gradient(#d9dee2, #b4bcc3); }
.film { position: relative; }
.film video { aspect-ratio: 16 / 9; background: #0e1317; object-fit: cover; }
.film .sound { position: absolute; right: 22px; bottom: 26px; z-index: 2; width: auto; min-height: 42px; margin: 0;
  padding: 6px 14px; gap: 8px; font-size: 15px; border-radius: 10px;
  --c: var(--orr-amber); --edge: #14191e; color: #14191e;
  box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 5px var(--edge), 0 10px 22px -10px rgb(0 0 0 / .5); }
.film.playing .sound { display: none; }

/* plaques: a number, the way a speed-limit sign holds one */
.plaques { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 64px; }
@media (min-width: 900px) { .plaques { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.plaque { margin: 0; text-align: center; border-radius: 16px; padding: 22px 14px 20px; background: var(--plate); color: var(--plate-ink);
  box-shadow: inset 0 0 0 6px var(--plate), inset 0 0 0 9px var(--plate-ink), 0 0 0 1px var(--line-2); }
.plaque b { display: block; font: 800 clamp(34px, 4vw, 52px)/1 var(--sign-face); letter-spacing: -.02em; }
.plaque span { display: block; margin-top: 8px; font: 800 13px/1.25 var(--sign-face); letter-spacing: .08em; text-transform: uppercase; }

/* each section is an exit off the same road */
.exit-row { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 800 13px/1 var(--sign-face);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.exit-row b { display: inline-flex; align-items: center; height: 32px; padding: 2px 12px 0; border-radius: 9px;
  background: var(--guide); color: #fff; box-shadow: inset 0 0 0 4px var(--guide), inset 0 0 0 6.5px #fff; }
.stretch { padding: clamp(56px, 8vw, 104px) 0; border-top: 1.5px solid var(--line); }
.stretch.zone { background: var(--zone); border-top: 0; }
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; }
  .split.flip > :first-child { order: 2; } }
.words > p { margin: 18px 0 0; }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 34px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 6px; background: var(--guide); }
.ticks li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 12px; height: 12px; background: #fff;
  clip-path: polygon(0 38%, 58% 38%, 58% 6%, 100% 50%, 58% 94%, 58% 62%, 0 62%); }

/* groups of devices */
.shelf { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2vw, 22px); }
.shelf .dev.phone { width: 27%; border-radius: 26px; padding: 7px; }
.shelf .dev.phone img { border-radius: 20px; }
.shelf .dev.tablet { width: 42%; }
@media (max-width: 640px) { .shelf .dev.phone { border-radius: 18px; padding: 5px; } .shelf .dev.phone img { border-radius: 14px; }
  .shelf .dev.tablet { border-radius: 16px; padding: 7px; } .shelf .dev.tablet img { border-radius: 9px; } }
.pair { display: flex; justify-content: center; gap: clamp(14px, 3vw, 30px); }
.pair .dev.phone { width: min(270px, 44vw); }
.anywhere { position: relative; max-width: 1040px; margin: 40px auto 0; padding-bottom: 20px; }
.anywhere .dev.laptop { width: 74%; margin: 0 auto; }
.anywhere .dev.tablet { position: absolute; left: 0; bottom: -6%; width: 27%; }
.anywhere .dev.phone { position: absolute; width: 17%; bottom: -8%; }
.anywhere .dev.phone.day { right: 9%; }
.anywhere .dev.phone.night { right: 0; bottom: -3%; transform: rotate(3deg); }
@media (max-width: 640px) { .anywhere .dev.phone { border-radius: 18px; padding: 5px; } .anywhere .dev.phone img { border-radius: 14px; }
  .anywhere .dev.tablet { border-radius: 14px; padding: 6px; } .anywhere .dev.tablet img { border-radius: 8px; } }

/* a source, the way the app shows one: a blue services sign */
.source-sign { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 16px 20px; border-radius: 14px;
  background: var(--info); color: #fff; font: 700 18px/1.25 var(--sign-face);
  box-shadow: inset 0 0 0 5px var(--info), inset 0 0 0 7.5px #fff; }
.source-sign svg { width: 30px; height: 30px; flex: none; }

/* plans on plaques; the family plan in school-zone green */
.plans { display: grid; gap: 20px; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.plan { text-align: center; padding: 28px 22px 26px; border-radius: 22px; background: var(--plate); color: var(--plate-ink);
  box-shadow: inset 0 0 0 8px var(--plate), inset 0 0 0 12px var(--plate-ink), 0 0 0 1px var(--line-2); }
.plan h3 { font: 800 19px/1 var(--sign-face); letter-spacing: .1em; text-transform: uppercase; }
.plan .price { margin: 12px 0 4px; font: 800 clamp(72px, 7vw, 96px)/1 var(--sign-face); letter-spacing: -.03em; }
.plan .per { display: block; font: 800 14px/1 var(--sign-face); letter-spacing: .12em; text-transform: uppercase; }
.plan p { margin: 16px 0 0; font-size: 15.5px; }
.plan.family { --plate: var(--school); background: var(--school); color: #14191e;
  box-shadow: inset 0 0 0 8px var(--school), inset 0 0 0 12px #14191e; }
.note { margin: 26px 0 0; max-width: 72ch; color: var(--muted); }
.note b { color: var(--ink); }

/* the end of the page: the road again */
.windshield.end { height: clamp(420px, 46vw, 560px); }
.windshield.end .overhead { top: 72px; }

footer { max-width: 1200px; margin: 0 auto; padding: 30px 20px 44px; color: var(--muted); font-size: 15px; }
footer p { margin: 0; } footer p + p { margin-top: 8px; }

/* motion: things settle into place on a spring as they come into view; the sign on
   the gantry swings down onto its hangers once */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(34px); }
  .js [data-rise].in { opacity: 1; transform: none; transition: opacity .45s ease, transform .95s var(--spring); transition-delay: var(--d, 0s); }
  .js .dev[data-rise] { transform: perspective(1200px) rotateX(16deg) translateY(50px); }
  .js .dev[data-rise].in { transform: none; }
  .js .anywhere .dev.phone.night[data-rise].in { transform: rotate(3deg); }
  .js .windshield .overhead { animation: hang 1.1s var(--spring) .25s both; transform-origin: 50% -40px; }
  @keyframes hang { from { transform: translateX(-50%) perspective(900px) rotateX(-80deg); opacity: 0; }
                    to { transform: translateX(-50%); opacity: 1; } }
  /* the picker's sign sits in the flow, centred by its margins */
  .js .pick-shield .overhead { animation-name: hang-in-place; }
  @keyframes hang-in-place { from { transform: perspective(900px) rotateX(-80deg); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---- the state comes first ------------------------------------------------------
 * The front door asks where the permit test is, then every page is about that state:
 * /ca, /fl, ... The picked card's picture becomes the state's road as the page changes
 * (a cross-document view transition, where the browser has one). */
@view-transition { navigation: auto; }
.state .windshield:first-child .ws-art { view-transition-name: road; }
::view-transition-group(road) { animation-duration: .7s; animation-timing-function: var(--spring); }

/* the chip in the bar: your state, and the way to change it */
.here { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; margin-left: 14px; padding: 4px 12px 4px 6px;
  border-radius: 999px; background: var(--zone); color: var(--ink); text-decoration: none; font: 700 14.5px/1 var(--sign-face); }
.here .shield, .card .shield, .picks .shield, .tile b { display: grid; place-items: center; font: 800 12px/1 var(--sign-face); letter-spacing: .02em; }
.here .shield { width: 26px; height: 29px; padding-bottom: 6px; background: var(--state-accent); color: var(--state-accent-ink);
  clip-path: path("M0 0H26V15.4C26 22.6 20 26.6 13 28.8 6 26.6 0 22.6 0 15.4Z"); }
.here-change { color: var(--guide-ink); font-weight: 600; font-size: 13.5px; }
/* on a phone the chip takes a row of its own under the bar, name and all */
@media (max-width: 700px) { header.bar:has(.here) { flex-wrap: wrap; row-gap: 0; }
  header.bar:has(.here)::after { content: ""; flex-basis: 100%; order: 2; } .here { order: 3; margin: 8px 0 0; } }

/* the picker: the sign asks, and holds every way to answer; the states' postcards drift
 * past below it, each the same size, none of them first */
.pick-shield { height: auto; padding: 76px 16px clamp(28px, 4vw, 44px); }
.pick-shield .overhead h1 { font-size: clamp(32px, 4.4vw, 54px); }
.pick-shield .overhead { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; width: min(880px, 100%); }
.find { align-self: stretch; margin: 14px 0 0; }
.find label, .picks-label { display: block; margin: 0 0 8px; font: 800 13px/1 var(--sign-face); letter-spacing: .12em;
  text-transform: uppercase; color: rgb(255 255 255 / .85); }
.find-row { display: flex; gap: 10px; }
.find input { flex: 1 1 auto; min-width: 0; width: auto; height: 52px; padding: 0 16px; border-radius: 12px;
  background: #fff; color: #14191e; font: 600 19px/1 var(--sign-face); box-shadow: none; }
.find input::placeholder { color: #66727d; }
.find input:focus { box-shadow: none; }
.find button { --c: #fff; --edge: var(--guide); flex: none; width: auto; min-height: 52px; margin: 0; padding: 0 22px; color: var(--guide); }
@media (max-width: 480px) { .find input { font-size: 17px; padding: 0 12px; } .find button { padding: 0 16px; } }
.find-say { margin: 12px 0 0; font: 600 16px/1.35 var(--sign-face); color: #fff; }
.find-say:empty { display: none; }
.find-wait { display: inline-block; margin-top: 6px; color: #fff; font: 600 15px/1.3 var(--sign-face); }
.find-wait[hidden] { display: none; }
/* several states fit what was typed: each a white plate to choose */
.find-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.find-picks[hidden] { display: none; }
.find-picks button { --c: #fff; --edge: var(--guide); width: auto; min-height: 42px; margin: 0; padding: 0 15px; border-radius: 10px;
  color: var(--guide); font-size: 15.5px; box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 5px var(--edge); }
.picks-label { margin-top: 18px; align-self: stretch; }
.picks { align-self: stretch; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.picks a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 14px 6px 7px; border-radius: 11px;
  background: #fff; color: #14191e; text-decoration: none; font: 700 16px/1 var(--sign-face);
  box-shadow: 0 2px 0 rgb(0 0 0 / .22); transition: transform .35s var(--spring); }
@media (hover: hover) { .picks a:hover { transform: translateY(-2px); } }
.picks .shield { width: 28px; height: 31px; padding-bottom: 6px; font-size: 11.5px; background: var(--state-accent); color: var(--state-accent-ink);
  clip-path: path("M0 0H28V16.6C28 24.2 21.5 28.5 14 30.8 6.5 28.5 0 24.2 0 16.6Z"); }
/* past twenty open states the buttons show their shields alone, the name read out */
.picks.many a { padding: 6px; }
.picks.many .pick-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.strip-wrap { padding: clamp(24px, 3vw, 36px) 0 8px; }
.strip-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.strip-top h2 { font-size: clamp(26px, 2.8vw, 36px); }
.strip-go { display: flex; gap: 10px; }
.strip-go[hidden] { display: none; }
.strip-go button { width: 46px; padding: 0; }
.strip-go [data-go="-1"] svg { transform: scaleX(-1); }
.strip { overflow-x: auto; overscroll-behavior-x: contain; padding: 6px 0 18px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.js .strip { scrollbar-width: none; }
.js .strip::-webkit-scrollbar { display: none; }
.strip .cards { list-style: none; margin: 0; padding: 0 clamp(16px, 4vw, 40px); display: flex; gap: clamp(12px, 1.6vw, 18px); width: max-content; }
.strip .cards > li { flex: none; display: flex; width: clamp(232px, 21vw, 280px); }
/* a postcard: the state's picture with its name sign, and under it, on the white of the
 * card, the checks it has passed, each with a tick drawn in green */
.card { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: 20px;
  background: #fff; color: #14191e; text-decoration: none;
  box-shadow: inset 0 0 0 1.5px #14191e, 0 12px 26px -20px rgb(10 16 22 / .55); transition: transform .5s var(--spring), box-shadow .3s ease; }
.card img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: 50% 40%;
  border-bottom: 1.5px solid #14191e; }
.card-top { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 9px;
  padding: 7px 12px 7px 9px; border-radius: 12px; background: var(--guide); color: #fff;
  box-shadow: inset 0 0 0 3px var(--guide), inset 0 0 0 5px #fff; }
.card .shield { flex: none; width: 32px; height: 36px; padding-bottom: 7px; font-size: 13px; background: var(--state-accent); color: var(--state-accent-ink);
  clip-path: path("M0 0H32V19C32 27.6 24.6 32.6 16 35.2 7.4 32.6 0 27.6 0 19Z"); }
.card-name { font: 700 clamp(16px, 1.4vw, 19px)/1.05 var(--sign-face); }
.card-checks { flex: 1; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 9px; font: 600 13.5px/1.25 var(--sign-face); }
.check { position: relative; padding-left: 26px; }
.check::before { content: ""; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; border-radius: 50%; background: var(--orr-green); }
.check::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.card .tag { align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 9px;
  border-radius: 8px; background: var(--warn); color: #14191e; font: 700 12.5px/1 var(--sign-face); }
@media (hover: hover) { .card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 0 0 2px var(--guide), 0 22px 40px -24px rgb(10 16 22 / .5); } }
.card:focus-visible { outline: 3px solid var(--orr-amber); outline-offset: 3px; }
.card.going { transform: scale(1.03); }

/* the country as tiles, and the road ahead */
.coverage { display: grid; gap: 30px 56px; padding-top: 50px; padding-bottom: 70px; align-items: center; }
@media (min-width: 980px) { .coverage { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .road-ahead { grid-column: 1 / -1; } }
.coverage-words > p { margin: 16px 0 0; }
.map { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); gap: 5px; }
.tile { grid-column: calc(var(--x) + 1); grid-row: calc(var(--y) + 1); position: relative; aspect-ratio: 1; border-radius: 9px;
  display: grid; place-items: center; background: var(--zone); color: var(--faint); text-decoration: none; }
.tile b { font-size: clamp(9px, 1.1vw, 13px); }
/* the states opening soon, shaded and without numbers: each says its week when pointed at,
 * focused or tapped, on the line under the map */
.map button.tile { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 9px; font: inherit; cursor: pointer;
  background: var(--warn); color: #14191e; box-shadow: none; transition: transform .35s var(--spring); }
@media (hover: hover) { .map button.tile:hover { transform: scale(1.12); } }
.map [data-week] { cursor: pointer; }
.map-say { margin: 12px 0 0; min-height: 1.3em; font: 700 17px/1.3 var(--sign-face); color: var(--ink); }
/* a vote for a state still to come: one button, an address where needed, plain words */
.vote { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.vote[hidden], .vote-go[hidden], .vote-mail[hidden] { display: none; }
.vote .map-say { margin: 0; }
button.vote-go { width: auto; margin: 0; min-height: 46px; padding: 8px 18px; border-radius: 10px; font-size: 16px;
  box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 5px var(--edge), var(--glow) var(--c); }
button.vote-go:disabled { opacity: 1; --c: var(--plate); --edge: var(--guide); color: var(--guide); cursor: default; }
.vote-mail { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.vote-mail label { font: 800 13px/1 var(--sign-face); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vote-row { display: flex; flex-wrap: wrap; gap: 8px; }
.vote-row input { flex: 1 1 220px; width: auto; min-width: 0; height: 46px; padding: 0 12px; }
.vote-row button { width: auto; margin: 0; min-height: 46px; padding: 0 16px; font-size: 15.5px; border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 5px var(--edge), 0 0 0 1px var(--line-2); }
.vote-hint, .vote-why { margin: 0; font-size: 14px; color: var(--muted); max-width: 54ch; }
.vote-say { margin: 0; font: 700 16px/1.35 var(--sign-face); }
.vote-say:empty { display: none; }
/* on the green sign the words are white and the buttons white plates */
.vote-sign { align-self: stretch; margin-top: 4px; }
.vote-sign button.vote-go, .vote-sign .vote-row button { --c: #fff; --edge: var(--guide); color: var(--guide);
  box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 5px var(--edge); }
.vote-sign .vote-mail label, .vote-sign .vote-hint, .vote-sign .vote-why { color: rgb(255 255 255 / .85); }
.vote-sign .vote-say { color: #fff; }
.vote-sign .vote-row input { background: #fff; color: #14191e; box-shadow: none; }
/* the line a mailed vote link lands on */
.vote-note { margin: 0; padding: 12px 20px; text-align: center; background: var(--guide); color: #fff; font: 700 17px/1.3 var(--sign-face); }
.vote-note[hidden] { display: none; }
/* the road ahead: each sign is a button that picks its state */
.convoy button { all: unset; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; cursor: pointer; }
.convoy button:focus-visible { outline: 3px solid var(--orr-amber); outline-offset: 6px; border-radius: 6px; }
.tile.open { background: var(--guide); color: #fff; box-shadow: 0 0 0 2px var(--guide); }
.tile.open[aria-current] { background: var(--state-accent); color: var(--state-accent-ink); box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--state-accent); }
@media (hover: hover) { .tile.open:hover { transform: scale(1.12); transition: transform .4s var(--spring); } }
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: -9px; background: var(--zone); vertical-align: -2px; }
.key.open { background: var(--guide); } .key.soon { background: var(--warn); }
/* on the concrete of a zone the states still to come need a shade of their own */
.zone .tile:not(.open, .soon), .zone .key:not(.open, .soon) { background: var(--line); }
.road-ahead { position: relative; display: flex; overflow: hidden; padding: 18px 0 34px; border-radius: 16px; background: var(--asphalt);
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.road-ahead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--stud) 0 40px, transparent 40px 76px); }
.convoy { list-style: none; margin: 0; padding: 0 0 0 16px; display: flex; gap: 16px; flex: none; }
.convoy li { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 18px 13px;
  border-radius: 12px; background: var(--orr-green); color: #fff; box-shadow: inset 0 0 0 4px var(--orr-green), inset 0 0 0 6.5px #fff; }
.convoy b { font: 700 19px/1 var(--sign-face); white-space: nowrap; }
.exit-tab { font: 800 11.5px/1 var(--sign-face); letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .85); }
@media (prefers-reduced-motion: no-preference) {
  .convoy { animation: drive 38s linear infinite; }
  .road-ahead:hover .convoy { animation-play-state: paused; }
  @keyframes drive { to { transform: translateX(-100%); } }
}
@media (prefers-reduced-motion: reduce) { .road-ahead { flex-wrap: wrap; } .convoy[aria-hidden] { display: none; } .convoy { flex-wrap: wrap; } }

/* two seats in the car */
.seat-pic, .study-pic { margin: 28px 0 0; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--zone); }
.seat-pic img, .study-pic img { width: 100%; height: 100%; object-fit: cover; }
.seats { display: grid; gap: 22px; margin-top: 28px; }
@media (min-width: 860px) { .seats { grid-template-columns: 1fr 1fr; } }
.seat { padding: 24px 24px 26px; border-radius: var(--radius-lg); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.seat h3 { display: flex; align-items: center; gap: 12px; font-size: 21px; }
.seat h3 svg { width: 28px; height: 28px; flex: none; color: var(--info-ink); }
.study-pic { margin-top: 26px; max-width: 520px; }
.plaque-tags { grid-column: 1 / -1; margin: 0; display: flex; justify-content: center; gap: 10px; }
.plaque-tags:empty { display: none; }
.plaque-tags .tag { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px;
  background: var(--warn); color: #14191e; font: 700 14px/1 var(--sign-face); }
/* the whole sign is the button, so there is a full finger's height to tap (it was 37px) */
.convoy li { padding: 0; }
.convoy button { padding: 12px 18px 13px; min-height: 44px; box-sizing: border-box; justify-content: center; }
/* on a phone the tiles take all the width the country's eleven columns leave them */
@media (max-width: 640px) { .map { gap: 2px; } .tile b { font-size: 10px; } }