/* The homepage (PRD-59 §2). Loaded by index.html alone; landing.css — the
   shared base of the marketing pages — is untouched, and so are the dialog,
   the vote card and the check card's own sheets: their markup did not change,
   so their styles still apply. What lives here is the page chrome (the
   homepage header variant, the order bar), the new sections, and the
   homepage's light-mode component overrides (the tokens are in tokens.css).
   The order bar, the hero's route map and the technology band stay dark in
   both modes (decision 8), on the --screen-* roles below. */

/* Body scroll lock while any modal is open. */
:root:has(dialog[open]) {
  overflow: hidden;
}

.check-dialog {
  border: none;
  background: transparent;
  padding: 0;
  width: min(34rem, calc(100vw - 2rem));
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: check-dialog-in 200ms ease;
}

.check-dialog:focus:not(:focus-visible) {
  outline: none;
}

.check-dialog::backdrop {
  background: rgba(1, 11, 27, 0.72);
  backdrop-filter: blur(4px);
}

@keyframes check-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.check-dialog .stage {
  width: 100%;
}

.check-dialog__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--paper);
  background: rgba(1, 11, 27, 0.55);
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

.check-dialog__close:hover {
  background: rgba(1, 11, 27, 0.8);
}

.check-dialog__close:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* The echo row the check card gains on close (§5.6), above its form. */
.check-echo {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.check-echo strong {
  color: var(--ink);
}

.check-echo__exit {
  margin-inline: 0.35rem;
  white-space: nowrap;
}

/* The address field and the autocomplete element it becomes share one
   reserved box, so the swap moves nothing (CLS, §9.2). */
#address-form .check-row,
#dialog-address-form .check-row {
  min-height: 44px;
}

gmp-place-autocomplete {
  display: block;
  min-height: 44px;
}

/* Panel C's compact app row (PRD-32 §5.5): the sign-up form stays first,
   then this, then the vote nudge. The badges reuse landing.css; the row
   only tightens their spacing inside the dialog. */
.dialog-app-row {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.dialog-app-row .badges {
  margin-inline: auto;
  gap: 0.5rem;
}

/* ── The dialog as a bottom sheet below 768 px (§6) ─────────────────── */

@media (max-width: 767px) {
  .check-dialog {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    max-height: 92dvh;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 16px 16px 0 0;
    animation-name: check-sheet-in;
  }

  /* A drag-handle decoration; the sheet is never dragged. */
  .check-dialog::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 0.6rem auto 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
  }

  @keyframes check-sheet-in {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .check-dialog {
    animation-name: check-dialog-fade;
  }

  .check-dialog::backdrop {
    backdrop-filter: none;
  }

  @keyframes check-dialog-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* ── The homepage canvas ──────────────────────────────────────────────
   Full-bleed bands: body is a plain block (landing.css's centred 32 rem
   flex row is for the narrow marketing pages). The header and the order bar
   stick together at the top of the viewport, so no top padding is reserved;
   scroll-padding-top covers both. The body grows with the page: base.css
   pins html and body to 100% height, and a sticky box sticks only inside
   its parent, so on a body one screen tall the top scrolled away after the
   first screen. */

body.home {
  display: block;
  height: auto;
  min-height: 100%;
  padding: 0;
  background: var(--page);
  color: var(--page-ink);

  /* Deliberately dark pieces (PRD-59 decision 8): fixed in both modes, so
     they never read the light block. */
  --screen: #070c13;
  --screen-raise: #111a24;
  --screen-fg: #ffffff;
  --screen-muted: #aab3bb;
  --screen-line: #26313c;
  --screen-street: #18222d;
  --screen-block: #202c38;
  --screen-grid: rgba(244, 98, 14, 0.07);
}

html:has(body.home) {
  scroll-padding-top: calc(var(--site-header-h) + 3.25rem + 0.5rem);
}

main.home {
  display: block;
  max-width: none;
  padding: 0;
  text-align: left;
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* The type base. :where() keeps the specificity at an element's, so every
   component's own size wins and only bare headings read these. Two-line
   section heads set tight (the draft's ~1.1), never at the body's 1.55. */
:where(main.home) h1,
:where(main.home) h2,
:where(main.home) h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

:where(main.home) h1,
:where(main.home) h2 {
  line-height: 1.08;
}

:where(main.home) h3 {
  line-height: 1.25;
}

:where(main.home) h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  margin: 0 0 0.75rem;
}

:where(main.home) h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  margin: 0 0 0.75rem;
}

:where(main.home) h3 {
  font-size: 1.125rem;
  font-weight: 700;
}

main.home img {
  max-width: 100%;
  height: auto;
}

main.home :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

main.home .eyebrow {
  color: var(--faint);
}

main.home .eyebrow--accent {
  color: var(--accent-text);
}

main.home .accent {
  color: var(--accent-text);
}

main.home .lede {
  font-size: 1.2rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 1.5rem;
}

main.home .micro {
  text-align: left;
}

/* Section head: eyebrow + h2 + lede, shared rhythm. */
.head {
  display: grid;
  gap: 0.9rem;
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.head h2 {
  margin: 0;
}

.head--row {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 1rem 2rem;
}

.head--row > div {
  display: grid;
  gap: 0.9rem;
  max-width: 44rem;
}

.band--tight {
  padding-block: 0;
}

.band--alt {
  background: var(--bg-alt);
}

.link-cta {
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: none;
}

.link-cta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

.arrow-link__c {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.95rem;
  line-height: 1;
  flex: none;
  transition: transform 150ms ease;
}

.arrow-link:hover .arrow-link__c {
  transform: translateX(3px);
}

.arrow-link.link-cta {
  color: var(--accent-text);
}

/* ── The top: the homepage header and, under it, the order bar ──────────
   Sticky together, as the fixed header was. The header follows the page
   (R2 decision 1): --page/--page-ink flip it in the light block. */

body.home .top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
}

body.home .site-header {
  position: static;
  background: var(--page);
  color: var(--page-ink);
  border-bottom: 1px solid var(--line-soft);
}

body.home .site-header__end {
  gap: 1rem;
}

.site-nav__links {
  display: flex;
  gap: 1.75rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.site-nav__links a {
  text-decoration: none;
  color: var(--muted);
}

.site-nav__links a:hover {
  color: var(--page-ink);
}

@media (max-width: 799px) {
  .site-nav__links {
    display: none;
  }
}

.orderbar {
  background: var(--screen);
  color: var(--screen-fg);
  color-scheme: dark;
  border-bottom: 1px solid var(--screen-line);
}

.orderbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding-block: 0.4rem;
}

.orderbar__where {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
}

.orderbar__where b {
  font-weight: 700;
}

.orderbar__deal {
  color: var(--screen-muted);
  white-space: nowrap;
}

.orderbar__end {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: none;
}

.orderbar__app {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--screen-muted);
  text-decoration: none;
  white-space: nowrap;
}

.orderbar__app:hover {
  color: var(--screen-fg);
}

.orderbar__go {
  height: 2.35rem;
  min-width: 0;
  white-space: nowrap;
}

.orderbar__live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.orderbar__live::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  animation: orderbar-pulse 2s ease-in-out infinite;
  flex: none;
}

@keyframes orderbar-pulse {
  50% {
    opacity: 0.3;
  }
}

@media (max-width: 719px) {
  .orderbar__deal {
    display: none;
  }
}

@media (max-width: 479px) {
  .orderbar__app {
    display: none;
  }

  /* The bar keeps the city and the button on one line: the prefix goes,
     leaving the dot and "Mason, OH". */
  .orderbar__now {
    display: none;
  }

  .orderbar__where {
    font-size: 0.85rem;
  }
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--grid);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}

.hero-grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  }
}

.hero-text {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  align-content: start;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--accent-text);
}

.hero-text h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
}

.price-line {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-line span {
  padding: 0.55rem 0.95rem;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}

.price-line span:last-child {
  border-right: 0;
}

.price-line b {
  color: var(--page-ink);
  font-weight: 800;
}

.price-line span:last-child b {
  color: var(--accent-text);
}

.hero-text .lede {
  margin: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

/* The campaign's glow on the hero's primary buttons. */
.campaign .hero .btn--primary {
  box-shadow: var(--glow);
}

/* Wrapped onto two rows, the cells' right borders left a stub at the end of
   the first row and nothing between the rows: here every divider is a 1px
   gap over the line color instead. */
@media (max-width: 420px) {
  .price-line {
    gap: 1px;
    border-radius: 14px;
    background: var(--line);
  }

  .price-line span {
    flex: 1 1 auto;
    text-align: center;
    border-right: 0;
    background: var(--page);
  }
}

.hero-visual {
  position: relative;
  min-width: 0;
  padding-bottom: 1.5rem;
}

/* The route map's dispatch screen: dark in both modes. */
.screen {
  position: relative;
  background: var(--screen);
  color: var(--screen-fg);
  color-scheme: dark;
  border: 1px solid var(--screen-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}

.screen__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--screen-line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--screen-muted);
}

.screen__bar b {
  color: var(--screen-fg);
  font-weight: 700;
}

.route-map {
  display: block;
  width: 100%;
  height: auto;
}

.route-map .grid {
  fill: var(--screen);
}

.route-map .street {
  stroke: var(--screen-street);
  stroke-width: 16;
  fill: none;
  stroke-linecap: square;
}

.route-map .house {
  fill: var(--screen-block);
}

/* The one home on the map: lighter than its neighbours, with B at its door. */
.route-map .house--home {
  fill: var(--screen-muted);
}

.route-map .leg-car {
  stroke: var(--accent);
  stroke-width: 5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-map .leg-noah {
  stroke: var(--screen-fg);
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.route-map .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  fill: var(--screen-muted);
  text-transform: uppercase;
}

.route-map .lbl--strong {
  fill: var(--screen-fg);
  font-weight: 700;
}

.route-map .mark-txt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  text-anchor: middle;
  dominant-baseline: central;
}

.fee-chip {
  position: absolute;
  top: 3.6rem;
  right: 1rem;
  width: 11.5rem;
  background: #ffffff;
  color: #010b1b;
  color-scheme: light;
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.6);
  font-size: 0.85rem;
  display: grid;
  gap: 0.3rem;
}

.fee-chip p {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.fee-chip b {
  font-weight: 800;
}

.fee-chip .zero {
  color: #b0490f;
}

.fee-chip small {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a5568;
  border-top: 1px dashed #e3e8ef;
  padding-top: 0.4rem;
}

.hero-noah {
  position: absolute;
  left: -0.5rem;
  bottom: -0.25rem;
  width: 38%;
  max-width: 15rem;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.55)) drop-shadow(0 22px 26px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.screen__foot {
  display: flex;
  justify-content: flex-end;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--screen-line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--screen-muted);
}

@media (max-width: 520px) {
  /* The chip floats over the map's top right: compact, without its third
     line, so the kitchen, the car leg, A and B stay visible — the
     same rule as Noah's photo (PRD-59 §2.1). */
  .fee-chip {
    top: 3.1rem;
    right: 0.6rem;
    width: 7.5rem;
    font-size: 0.72rem;
    padding: 0.5rem 0.6rem;
    gap: 0.15rem;
  }

  .fee-chip small {
    display: none;
  }

  .hero-noah {
    left: 0;
    width: 34%;
  }

  .screen__foot {
    padding-left: 36%;
    text-align: right;
  }
}

/* ── The statement card: orange with navy text ────────────────────────── */

.mission-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  background: var(--accent);
  color: var(--ink);
  --muted: var(--ink);
  --faint: var(--ink);
  --focus-ring: var(--ink);
  border-radius: 20px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 820px) {
  .mission-card {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 2.5rem;
  }
}

.mission-card__claim {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0;
}

.mission-card .arrow-link {
  font-size: 1.1rem;
  justify-self: start;
}

@media (min-width: 820px) {
  .mission-card .arrow-link {
    justify-self: end;
    padding-left: 2rem;
    border-left: 1.5px solid rgba(1, 11, 27, 0.25);
    min-height: 4rem;
  }
}

/* ── The big number beside the receipt ────────────────────────────────── */

.stat-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 960px) {
  .stat-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.stat {
  display: grid;
  gap: 1rem;
  min-width: 0;
  align-content: start;
}

.stat__num {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
}

.stat__big {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(5rem, 13vw, 9.5rem);
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  flex: 1 1 10rem;
  min-width: 10rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  padding-bottom: 0.4rem;
}

.stat__label span {
  display: block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 0.35rem;
}

.stat .lede {
  margin: 0;
}

.stat__foot {
  font-size: 0.8rem;
  color: var(--faint);
  max-width: 32rem;
  margin: 0;
}

/* The receipt: paper in both modes, each slide's numbers its own receipt
   page's verbatim (crumbl.html, jerseymikes.html, buffalowildwings.html,
   chipotle.html, fiveguys.html and the ten from chickfila.html to
   tacobell.html). */
.receipt {
  margin: 0;
  background: var(--paper-bright);
  color: var(--ink);
  color-scheme: light;
  border: 1px solid var(--paper-line-soft);
  border-radius: var(--r-card);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-pop);
  min-width: 0;
}

.receipt__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}

/* The order beside its caption, one fixed height across the slides so the
   caption row never changes as they turn. The stronger selector beats
   main.home img's height: auto. Crumbl's and Five Guys' photos are squares
   on their own ground (cream, foil), not cutouts, so they round into tiles. */
main.home .receipt__photo {
  flex: none;
  width: auto;
  height: clamp(3.5rem, 9vw, 5.25rem);
}

.price-slide[data-brand="crumbl"] .receipt__photo,
.price-slide[data-brand="fiveguys"] .receipt__photo,
.price-slide[data-brand="panera"] .receipt__photo,
.price-slide[data-brand="tacobell"] .receipt__photo {
  border-radius: 10px;
}

.receipt__title mark {
  background: #fde2ec;
  color: inherit;
  padding: 0 0.3rem;
  border-radius: 4px;
}

.receipt__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

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

.receipt__col {
  border: 1px dashed var(--paper-line-soft);
  border-radius: 12px;
  padding: 1rem;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  min-width: 0;
}

.receipt__col--notip {
  border: 2px solid var(--accent);
  background: #fff8f3;
}

.receipt__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  margin: 0;
  min-height: 1.6rem;
  display: flex;
  align-items: center;
}

/* NoTip's own name is its wordmark (the kit's navy lockup, as on /order):
   today's 5.25 rem wide, never the column. The stronger selector beats
   main.home img's height: auto. */
main.home .receipt__brand img {
  display: block;
  width: 5.25rem;
  height: auto;
}

.receipt__note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.5rem;
}

.receipt__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.receipt__lines li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.receipt__lines small {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.receipt__lines .x {
  color: #b42318;
}

.receipt__lines .zero {
  color: #b0490f;
  font-weight: 700;
}

.receipt__total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--ink);
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Phones: the stat as the desktop lockup at a smaller scale (the number
   beside its label, never "less" alone on a line), a 17px lede, tighter
   gaps, and the receipt one notch denser. Fifteen slides share this. */
@media (max-width: 599px) {
  .stat-grid {
    gap: 1.5rem;
  }

  .stat {
    gap: 0.75rem;
  }

  /* landing.css's eyebrow margin (0.8rem) doubled the grid gap above the
     number; the gap alone spaces it on a phone. */
  .stat .eyebrow {
    margin: 0;
  }

  .stat__num {
    gap: 0.25rem 1rem;
  }

  .stat__big {
    font-size: clamp(4rem, 19vw, 5rem);
  }

  .stat__label {
    flex: 1 1 7rem;
    min-width: 0;
    font-size: 1.25rem;
    padding-bottom: 0.3rem;
  }

  .stat__label span {
    font-size: 0.9rem;
    line-height: 1.35;
    margin-top: 0.25rem;
  }

  .stat .lede {
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  .stat__foot {
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .receipt {
    padding: 1rem;
    border-radius: 14px;
  }

  .receipt__title {
    font-size: 1.05rem;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
  }

  main.home .receipt__photo {
    height: 3rem;
  }

  .receipt__cols {
    gap: 0.75rem;
  }

  .receipt__col {
    padding: 0.85rem 0.9rem;
    gap: 0.3rem;
  }

  .receipt__brand {
    font-size: 0.95rem;
    min-height: 1.5rem;
  }

  main.home .receipt__brand img {
    width: 4.5rem;
  }

  .receipt__note {
    margin-bottom: 0.35rem;
  }

  .receipt__lines {
    gap: 0.4rem;
    font-size: 0.875rem;
  }

  .receipt__lines small {
    font-size: 0.72rem;
  }

  .receipt__total {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }
}

/* ── The examples, one order at a time (js/landing/priceRotator.js) ───── */

/* Under the slides: the Stop/Start button, then one dot per example. The
   picker shows only once the script runs; display: flex would otherwise
   beat the hidden attribute. */
.price-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}

.price-controls[hidden] {
  display: none;
}

/* Phones: the controls sit closer under the receipt. */
@media (max-width: 599px) {
  .price-controls {
    margin-top: 1rem;
  }
}

/* The tablist takes the row beside the Stop/Start button and the fifteen
   tabs share it equally: 24px each from ~445px up, narrower on a phone
   (15.7px at 320, 19.4px at 375), and 44px tall throughout, so one row is
   the rule at every width (his call, 2026-10-14: below the 24px of WCAG
   2.5.8 rather than a second row). */
.price-tabs {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  max-width: calc(15 * 1.5rem);
}

.price-tab,
.price-play {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

/* The dot is the button's currentColor, so the contrast spec reads it as a
   control against the band: --muted unchosen, the accent chosen, each 3:1
   in both modes (WCAG 1.4.11). The chosen dot stretches to a short bar. */
.price-tab {
  flex: 1 1 0;
  min-width: 0;
  max-width: 1.5rem;
  height: 2.75rem;
  border-radius: 999px;
  color: var(--muted);
}

.price-tab::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: currentColor;
  transition: width 160ms ease, background-color 160ms ease;
}

.price-tab[aria-selected="true"] {
  color: var(--accent);
}

.price-tab[aria-selected="true"]::before {
  width: 1.25rem;
}

/* Phones: a 6px dot and a 14px bar fit the 15.7px tab a 320 screen allows. */
@media (max-width: 479.98px) {
  .price-tab::before {
    width: 0.375rem;
    height: 0.375rem;
  }

  .price-tab[aria-selected="true"]::before {
    width: 0.875rem;
  }
}

.price-play {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--muted);
}

.price-play__play,
.price-play[data-paused] .price-play__pause {
  display: none;
}

.price-play[data-paused] .price-play__play {
  display: block;
}

.price-tab:focus-visible,
.price-play:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
}

@media (hover: hover) {
  .price-tab:not([aria-selected="true"]):hover,
  .price-play:hover {
    color: var(--page-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .price-tab::before {
    transition: none;
  }
}

/* Every slide sits in the same grid cell, so the band is as tall as the
   tallest receipt and never jumps when the example turns. The outgoing
   slide fades out before the next fades in, so two sets of numbers never
   overlap; inert (set with the class) keeps the hidden ones out of reach. */
.price-slides {
  display: grid;
}

.price-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.price-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease 0.25s, visibility 0s linear 0.25s;
}

/* Each receipt's highlighter takes a pale tint of its own page's color. */
.price-slide[data-brand="jerseymikes"] .receipt__title mark {
  background: #dce6f8;
}

.price-slide[data-brand="buffalowildwings"] .receipt__title mark {
  background: #ffeaa3;
}

.price-slide[data-brand="chipotle"] .receipt__title mark {
  background: #f3e7d6;
}

.price-slide[data-brand="fiveguys"] .receipt__title mark {
  background: #fde3e1;
}

.price-slide[data-brand="chickfila"] .receipt__title mark {
  background: #fde4e8;
}

.price-slide[data-brand="raisingcanes"] .receipt__title mark {
  background: #fff1c4;
}

.price-slide[data-brand="arbys"] .receipt__title mark {
  background: #fde6d5;
}

.price-slide[data-brand="panera"] .receipt__title mark {
  background: #ecf3dc;
}

.price-slide[data-brand="jimmyjohns"] .receipt__title mark {
  background: #fbe6e6;
}

.price-slide[data-brand="wendys"] .receipt__title mark {
  background: #e5f3fc;
}

.price-slide[data-brand="potbelly"] .receipt__title mark {
  background: #fbefd6;
}

.price-slide[data-brand="pandaexpress"] .receipt__title mark {
  background: #fde4e1;
}

.price-slide[data-brand="subway"] .receipt__title mark {
  background: #e6f4e2;
}

.price-slide[data-brand="tacobell"] .receipt__title mark {
  background: #efe6f9;
}

/* ── How it works: order, cook, roll ──────────────────────────────────
   A side-on scene of the ride over three outlined cards, drawn like a
   side-scroller: one ground line, silhouettes in the page ink, NoTip
   orange for the awning, the car's stripe and the bags. One 16 s loop:

     0–13%   the car pulls up to the kitchen     Restaurant hand-off
     13–24%  the bag hops from the door into it
     24–50%  it drives off while the view pans   Travel to customer
     50–84%  Noah rolls out the back, up the     Noah the NoTip robot
             driveway, sets the bag at the door,  deploys
             rolls back and in
     85–95%  the car leaves the frame
     97–100% the scene fades, and starts again

   Everything is placed in --u (1px on phones, 1.3px wide) from the
   world's left edge (the kitchen) or its right edge (the house), so the
   road between them is what stretches. The world is the frame plus --pan
   wide, and slides --pan to the left as the car drives. Each mover rides
   a lane as wide as the world, so a translate in % is a share of the
   world, and the movers stay on the compositor.

   The static styles are the frame of Noah at the door: that is what a
   reduced-motion visitor and the visual baselines (which cancel infinite
   animations) see. Every keyframe below therefore sets 0% and 100%
   itself. main.js pauses the loop while the scene is off screen. */

.how-scene {
  --u: 1px;
  --ground: calc(36 * var(--u));
  --pan: clamp(360px, 55vw, 680px);
  --how-loop: 16s;
  position: relative;
  height: calc(156 * var(--u));
  margin-bottom: clamp(1rem, 2.4vw, 1.75rem);
  overflow: hidden;
}

.how-stage,
.how-sky,
.how-world,
.how-lane {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.how-stage {
  animation: how-stage var(--how-loop) linear infinite;
}

.how-sky {
  right: auto;
  width: calc(100% + var(--pan) / 3);
  transform: translateX(calc(var(--pan) / -3));
  animation: how-sky var(--how-loop) linear infinite;
}

.how-world {
  right: auto;
  width: calc(100% + var(--pan));
  transform: translateX(calc(-1 * var(--pan)));
  animation: how-world var(--how-loop) linear infinite;
}

.how-stage svg {
  position: absolute;
  display: block;
}

/* The art's colour roles: silhouettes in the page ink, cut-outs in the
   band, walls outlined so the buildings sit behind the car and Noah. */
.how-ink {
  fill: var(--page-ink);
}

.how-cut {
  fill: var(--bg-alt);
}

.how-accent {
  fill: var(--accent);
}

.how-wall {
  fill: var(--bg-alt);
  stroke: var(--page-ink);
  stroke-width: 2;
}

.how-thin {
  fill: none;
  stroke: var(--page-ink);
  stroke-width: 1.5;
}

.how-sign {
  fill: var(--ink);
  font-family: inherit;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-anchor: middle;
}

.how-handle {
  fill: none;
  stroke: var(--page-ink);
  stroke-width: 1.2;
  stroke-linecap: round;
}

/* The car is drawn after a BMW i3, with no badge: white paint under a
   black band that runs over the hood, roof and tailgate, the rear door's
   window line dropping toward the back, big thin-spoke wheels, and NoTip
   orange where the i3 has its blue sill trim. Like Noah it keeps its own
   colours in both modes, with a page-ink edge so the black band still
   reads on the dark band. */
.how-car__belt {
  fill: #0b0f16;
}

.how-car__paint {
  fill: #f2f4f7;
}

.how-car__glass {
  fill: #43566e;
}

.how-car__seam {
  fill: none;
  stroke: #c3ccd6;
  stroke-width: 0.6;
}

.how-car__led {
  fill: #ffffff;
}

.how-car__tail {
  fill: #e5484d;
}

.how-car__edge {
  fill: none;
  stroke: var(--page-ink);
  stroke-width: 1.1;
  stroke-linejoin: round;
}

.how-car__tire {
  fill: #0b0f16;
  stroke: var(--page-ink);
  stroke-width: 1;
}

.how-car__rim {
  fill: #c7ced8;
}

.how-car__spoke {
  fill: none;
  stroke: #6b7686;
  stroke-width: 1.1;
  stroke-linecap: round;
}

.how-car__hub {
  fill: #6b7686;
}

/* Noah keeps its own colours in both modes, as the hero's Noah does. */
.how-shell {
  fill: #ffffff;
  stroke: var(--page-ink);
  stroke-width: 1.5;
}

.how-eye {
  fill: #0b0f16;
}

.how-smile {
  fill: none;
  stroke: #4da3ff;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* The ground: one line and a scatter of pebbles under it. It belongs to
   the world, so it scrolls with the pan. */
.how-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ground);
  border-top: calc(2 * var(--u)) solid var(--page-ink);
  background:
    linear-gradient(90deg, var(--faint) 0 6px, transparent 6px) 0 7px / 47px 1.5px repeat-x,
    linear-gradient(90deg, var(--faint) 0 3px, transparent 3px) 19px 14px / 31px 1.5px repeat-x,
    linear-gradient(90deg, var(--faint) 0 2px, transparent 2px) 7px 21px / 73px 1.5px repeat-x;
}

.how-cloud {
  top: calc(30 * var(--u));
  left: 18%;
  width: calc(46 * var(--u));
  height: calc(16 * var(--u));
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.5;
  opacity: 0.6;
}

.how-cloud--2 {
  top: calc(52 * var(--u));
  left: 52%;
  width: calc(34 * var(--u));
  height: calc(12 * var(--u));
}

.how-cloud--3 {
  top: calc(22 * var(--u));
  left: 84%;
}

/* The kitchen, at the world's left edge. Its door's right edge is at 95u,
   where the car's back pulls up. */
.how-store {
  left: calc(14 * var(--u));
  bottom: var(--ground);
  width: calc(96 * var(--u));
  height: calc(74 * var(--u));
  overflow: visible; /* the steam rises above the roof */
}

/* Something's cooking: two puffs off the chimney, on their own clock. */
.how-steam {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: how-steam 2.6s ease-out infinite;
}

.how-steam--late {
  animation-delay: -1.3s;
}

/* Street furniture along the road, between the kitchen and the house. */
.how-props {
  position: absolute;
  left: calc(140 * var(--u));
  right: calc(330 * var(--u));
  bottom: var(--ground);
  height: calc(50 * var(--u));
}

.how-prop {
  bottom: 0;
  fill: none;
  stroke: var(--faint);
  stroke-width: 2;
  stroke-linecap: round;
}

.how-prop--tree {
  width: calc(28 * var(--u));
  height: calc(46 * var(--u));
}

.how-prop--lamp {
  width: calc(18 * var(--u));
  height: calc(50 * var(--u));
}

.how-prop--hydrant {
  width: calc(14 * var(--u));
  height: calc(18 * var(--u));
}

.how-prop:nth-child(1) {
  left: 4%;
}

.how-prop:nth-child(2) {
  left: 26%;
}

.how-prop:nth-child(3) {
  left: 48%;
}

.how-prop:nth-child(4) {
  left: 70%;
}

.how-prop:nth-child(5) {
  left: 90%;
}

/* The customer's lot, 18u up, and the driveway down to the road. The
   polyline's ends sit on the road line; from the world's right edge:
   lot from 314u to 184u, driveway foot at 130u, the car parked in the
   last 104u. */
.how-hill {
  right: 0;
  bottom: calc(var(--ground) - 2 * var(--u));
  width: calc(320 * var(--u));
  height: calc(20 * var(--u));
  fill: none;
  stroke: var(--page-ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* The house on the lot. Its door's centre is 222.5u from the right. */
.how-house {
  right: calc(198 * var(--u));
  bottom: calc(var(--ground) + 18 * var(--u));
  width: calc(78 * var(--u));
  height: calc(76 * var(--u));
}

/* ── The movers. Each lane is the world's width; its child stands on the
   ground at the lane's left edge. ── */

.how-car__art {
  left: 0;
  bottom: var(--ground);
  width: calc(88 * var(--u));
  height: calc(38 * var(--u));
}

.how-car {
  z-index: 4;
  transform: translateX(calc(100% - 104 * var(--u)));
  animation: how-car var(--how-loop) linear infinite;
}

.how-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: how-wheel var(--how-loop) linear infinite;
}

.how-noah {
  z-index: 2;
  transform: translate(calc(100% - 212 * var(--u)), calc(-18 * var(--u)));
  animation: how-noah var(--how-loop) linear infinite;
}

.how-noah__body {
  position: absolute;
  left: 0;
  bottom: var(--ground);
  width: calc(15 * var(--u));
  height: calc(34 * var(--u));
}

.how-noah__bot {
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation: how-tilt var(--how-loop) linear infinite;
}

/* The name rides under the wheels and stays level on the driveway. Its
   band-coloured backing keeps it clear of the driveway line it crosses. */
.how-noah__name {
  position: absolute;
  top: calc(100% + 3 * var(--u));
  padding: 2px 3px;
  border-radius: 3px;
  background: var(--bg-alt);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--page-ink);
  animation: how-name var(--how-loop) linear infinite;
}

/* The bags: one hops from the kitchen door into the car (the lane moves
   it across, the art arcs it up and down), one pops out of Noah and lands
   on the doorstep, where it stays until the scene fades. */
.how-bag__art {
  left: 0;
  bottom: var(--ground);
  width: calc(12 * var(--u));
  height: calc(14 * var(--u));
}

.how-bag {
  z-index: 1;
  opacity: 0;
  animation: how-bag var(--how-loop) linear infinite;
}

.how-bag__art--hop {
  animation: how-bag-arc var(--how-loop) linear infinite;
}

.how-drop {
  z-index: 3;
  transform: translate(calc(100% - 229 * var(--u)), calc(-18 * var(--u)));
  animation: how-drop var(--how-loop) linear infinite;
}

.how-bag__art--drop {
  animation: how-drop-arc var(--how-loop) linear infinite;
}

/* The phase, top right, where a side-scroller keeps its score. */
.how-hud {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.how-hud__line {
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
  opacity: 0;
}

.how-hud__line--kitchen {
  animation: how-hud-kitchen var(--how-loop) linear infinite;
}

.how-hud__line--road {
  animation: how-hud-road var(--how-loop) linear infinite;
}

.how-hud__line--noah {
  opacity: 1;
  animation: how-hud-noah var(--how-loop) linear infinite;
}

@media (max-width: 599px) {
  .how-prop:nth-child(3),
  .how-prop:nth-child(5) {
    display: none;
  }
}

@media (min-width: 820px) {
  .how-scene {
    --u: 1.3px;
  }

  .how-hud {
    font-size: 0.75rem;
  }

  .how-noah__name {
    font-size: 0.7rem;
  }
}

.how-scene.is-off *,
.how-scene.is-off {
  animation-play-state: paused;
}

/* Every animated piece is a single class, so this outranks them all. */
@media (prefers-reduced-motion: reduce) {
  .how-scene * {
    animation: none;
  }
}

/* ── The loop ── */

@keyframes how-stage {
  0% {
    opacity: 0;
  }

  3%,
  97% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* The view holds on the kitchen, pans with the car, then holds on the
   house until the loop restarts behind the fade. */
@keyframes how-world {
  0%,
  25% {
    transform: translateX(0);
    animation-timing-function: ease-in-out;
  }

  50%,
  100% {
    transform: translateX(calc(-1 * var(--pan)));
  }
}

@keyframes how-sky {
  0%,
  25% {
    transform: translateX(0);
    animation-timing-function: ease-in-out;
  }

  50%,
  100% {
    transform: translateX(calc(var(--pan) / -3));
  }
}

@keyframes how-car {
  0%,
  3% {
    transform: translateX(calc(-100 * var(--u)));
    animation-timing-function: ease-out;
  }

  13%,
  24% {
    transform: translateX(calc(92 * var(--u)));
    animation-timing-function: ease-in-out;
  }

  50%,
  85% {
    transform: translateX(calc(100% - 104 * var(--u)));
    animation-timing-function: ease-in;
  }

  95%,
  100% {
    transform: translateX(calc(100% + 20 * var(--u)));
  }
}

/* Fifteen turns a loop, so 0% and 100% are the same angle. */
@keyframes how-wheel {
  0%,
  3% {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }

  13%,
  24% {
    transform: rotate(1080deg);
    animation-timing-function: ease-in-out;
  }

  50%,
  85% {
    transform: rotate(3960deg);
    animation-timing-function: ease-in;
  }

  95%,
  100% {
    transform: rotate(5400deg);
  }
}

@keyframes how-bag {
  0%,
  13.5% {
    opacity: 0;
    transform: translateX(calc(79 * var(--u)));
  }

  14.5%,
  15.5% {
    opacity: 1;
    transform: translateX(calc(79 * var(--u)));
  }

  20.5% {
    opacity: 1;
    transform: translateX(calc(106 * var(--u)));
  }

  21%,
  100% {
    opacity: 0;
    transform: translateX(calc(106 * var(--u)));
  }
}

@keyframes how-bag-arc {
  0%,
  15.5% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  18% {
    transform: translateY(calc(-30 * var(--u)));
    animation-timing-function: ease-in;
  }

  20.5%,
  100% {
    transform: translateY(calc(-12 * var(--u)));
  }
}

/* Noah: hidden behind the car's roof (68u from the right) until it
   parks, out the back to 124u, along to the driveway's foot, up it to
   the lot, across to the door (212u), and the same way back. */
@keyframes how-noah {
  0%,
  51% {
    opacity: 0;
    transform: translate(calc(100% - 68 * var(--u)), 0);
  }

  51.5%,
  53% {
    opacity: 1;
    transform: translate(calc(100% - 68 * var(--u)), 0);
    animation-timing-function: ease-out;
  }

  56%,
  57% {
    opacity: 1;
    transform: translate(calc(100% - 124 * var(--u)), 0);
  }

  58.5% {
    opacity: 1;
    transform: translate(calc(100% - 137.5 * var(--u)), 0);
  }

  63.5% {
    opacity: 1;
    transform: translate(calc(100% - 191.5 * var(--u)), calc(-18 * var(--u)));
    animation-timing-function: ease-out;
  }

  66%,
  72% {
    opacity: 1;
    transform: translate(calc(100% - 212 * var(--u)), calc(-18 * var(--u)));
    animation-timing-function: ease-in;
  }

  74% {
    opacity: 1;
    transform: translate(calc(100% - 191.5 * var(--u)), calc(-18 * var(--u)));
  }

  79% {
    opacity: 1;
    transform: translate(calc(100% - 137.5 * var(--u)), 0);
    animation-timing-function: ease-out;
  }

  80.5% {
    opacity: 1;
    transform: translate(calc(100% - 124 * var(--u)), 0);
    animation-timing-function: ease-in-out;
  }

  84.5% {
    opacity: 1;
    transform: translate(calc(100% - 68 * var(--u)), 0);
  }

  85%,
  100% {
    opacity: 0;
    transform: translate(calc(100% - 68 * var(--u)), 0);
  }
}

/* Square to the driveway (18.4°) while on it, upright everywhere else. */
@keyframes how-tilt {
  0%,
  58%,
  64%,
  73.5%,
  79.5%,
  100% {
    transform: rotate(0deg);
  }

  59%,
  63%,
  74.5%,
  78.5% {
    transform: rotate(18.4deg);
  }
}

/* The name shows once Noah is clear of the car's back, and goes before
   it is back behind it. */
@keyframes how-name {
  0%,
  55% {
    opacity: 0;
  }

  56.5%,
  80.5% {
    opacity: 1;
  }

  81.5%,
  100% {
    opacity: 0;
  }
}

@keyframes how-drop {
  0%,
  67.5% {
    opacity: 0;
    transform: translate(calc(100% - 210.5 * var(--u)), calc(-18 * var(--u)));
  }

  68% {
    opacity: 1;
    transform: translate(calc(100% - 210.5 * var(--u)), calc(-18 * var(--u)));
  }

  71%,
  100% {
    opacity: 1;
    transform: translate(calc(100% - 229 * var(--u)), calc(-18 * var(--u)));
  }
}

@keyframes how-drop-arc {
  0%,
  68% {
    transform: translateY(calc(-28 * var(--u)));
    animation-timing-function: ease-out;
  }

  69.5% {
    transform: translateY(calc(-36 * var(--u)));
    animation-timing-function: ease-in;
  }

  71%,
  100% {
    transform: translateY(0);
  }
}

@keyframes how-hud-kitchen {
  0% {
    opacity: 0;
  }

  2%,
  23% {
    opacity: 1;
  }

  24%,
  100% {
    opacity: 0;
  }
}

@keyframes how-hud-road {
  0%,
  24% {
    opacity: 0;
  }

  25.5%,
  50% {
    opacity: 1;
  }

  51.5%,
  100% {
    opacity: 0;
  }
}

@keyframes how-hud-noah {
  0%,
  51.5% {
    opacity: 0;
  }

  53%,
  96% {
    opacity: 1;
  }

  98%,
  100% {
    opacity: 0;
  }
}

@keyframes how-steam {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }

  30% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translateY(-14px) scale(1.4);
  }
}

/* The cards: stacked on phones, three across from 820px. */
.steps {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}

.step {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--page-ink);
  border-radius: var(--r-card);
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  min-width: 0;
}

.step-title {
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
  color: var(--page-ink);
}

.step-sub {
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

@media (min-width: 820px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.5rem);
  }
}

/* ── Meet NoTip: the app prompt, with three plain facts ────────────────── */

.meet {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 960px) {
  .meet {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.meet__copy {
  display: grid;
  gap: 1rem;
  min-width: 0;
  align-content: start;
}

.meet__copy h2 {
  margin: 0;
}

.meet__copy .lede {
  margin: 0;
}

.get-app {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 0.5rem;
}

/* Homepage badges read as the page text on the page ground (navy on white
   in light, white on navy in dark) — landing.css's white badge stays for
   the dialog and the paper cards. */
main.home .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  flex-direction: row;
  max-width: none;
  width: auto;
}

main.home .badge {
  background: var(--page-ink);
  color: var(--page);
  border-color: transparent;
}

main.home .badge:hover {
  background: var(--page-ink);
  opacity: 0.85;
  transform: translateY(-1px);
}

main.home .badge svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* The badges' small line inherits the badge's own text colour: it is an
   .eyebrow, and the orange band scopes --faint to navy, which disappears
   on the badges' navy fill in light mode. */
main.home .badge-text .eyebrow {
  color: inherit;
}

.app-qr {
  display: none;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.app-qr img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.app-qr .micro {
  margin: 0;
}

@media (min-width: 960px) {
  .app-qr {
    display: flex;
  }
}

.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}

@media (min-width: 600px) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fact {
  background: var(--card);
  padding: 1.5rem 1.25rem;
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.fact__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
}

.fact__n--zero {
  color: var(--accent-text);
}

.fact h3 {
  font-size: 1rem;
  margin: 0;
}

.fact p:not(.fact__n) {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0;
}

/* ── Where NoTip delivers + the vote ──────────────────────────────────── */

.where-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 960px) {
  .where-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.where-col {
  display: grid;
  gap: 2.25rem;
  min-width: 0;
  align-content: start;
}

.where-block {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.where-block > p {
  margin: 0;
}

.where-block .eyebrow {
  margin: 0;
}

.city-now {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 0;
}

.city-now b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

.city-now span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.where-check h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  margin: 0 0 0.75rem;
}

.where-check .check-row {
  flex-wrap: wrap;
}

.where-check .check-row .btn {
  flex: none;
}

/* The live tally, restyled as bars. The rows keep tally.js's board markup
   (rank, city + fill, votes); the delta stays hidden. */
.tally {
  min-width: 0;
}

.tally p {
  margin: 0;
}

#tally-total {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

#tally-total strong {
  color: var(--page-ink);
  font-size: 1.15rem;
}

.tally-empty {
  color: var(--muted);
}

.tally .board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  min-height: 9rem;
}

.tally .board-row {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}

.tally .board-rank {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--faint);
}

.tally .board-main {
  position: relative;
  min-height: 2.4rem;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-inline: 0.75rem;
  min-width: 0;
}

/* Above the fill: tally.js appends the bar after the label, so without a
   layer of its own the bar's 3px edge paints through a short bar's name. */
.tally .board-city {
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--page-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tally .board-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  height: auto;
  background: transparent;
  margin: 0;
  overflow: hidden;
}

.tally .board-bar i {
  display: block;
  height: 100%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-right: 3px solid var(--accent);
}

.tally .board-votes {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.tally .board-delta {
  display: none;
}

.tally .board-row--mine .board-city,
.tally .board-row--mine .board-votes {
  color: var(--accent-text);
}

.tally-foot {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.9rem 0 0.3rem;
}

.tally-more {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: none;
}

.tally-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

#vote {
  min-width: 0;
}

.mine-boost {
  margin: 1rem 0 0;
}

/* ── Press, then "Follow along" ───────────────────────────────────────── */

.press {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 820px) {
  .press {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.press li {
  display: grid;
  min-width: 0;
}

.press a {
  display: grid;
  gap: 1rem;
  align-content: space-between;
  padding: 1.5rem;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  text-decoration: none;
}

.press q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  quotes: "\201C" "\201D";
  color: var(--page-ink);
}

.press a:hover q {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.press cite {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--muted);
}

.press cite b {
  color: var(--page-ink);
}

.updates {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 860px) {
  .updates {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.updates h3 {
  margin: 0;
}

.updates p {
  color: var(--muted);
  margin: 0.35rem 0 0;
}

.follow {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.follow .btn {
  justify-self: start;
}

.follow__social {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

.follow__social a {
  color: var(--page-ink);
  text-underline-offset: 3px;
}

/* ── Technology: dark in both modes ───────────────────────────────────── */

.band--screen {
  position: relative;
  background: var(--screen);
  color: var(--screen-fg);
  color-scheme: dark;
  --muted: var(--screen-muted);
  --faint: var(--screen-muted);
  --line: var(--screen-line);
  --line-soft: var(--screen-line);
  --card: var(--screen-raise);
  --accent-text: var(--accent);
  --focus-ring: var(--screen-fg);
}

.band--screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, var(--screen-grid) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--screen-grid) 0 1px, transparent 1px 48px);
  -webkit-mask-image: radial-gradient(ellipse at 70% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 70% 0%, #000 0%, transparent 70%);
}

.band--screen .wrap {
  position: relative;
}

.band--screen h2,
.band--screen h3,
.band--screen h4,
.band--screen b {
  color: var(--screen-fg);
}

.band--screen .lede {
  color: var(--screen-muted);
}

.band--screen .link-cta {
  color: var(--accent);
}

.tech-top {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

@media (min-width: 960px) {
  .tech-top {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
}

.tech-copy {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
  align-content: start;
}

.tech-copy h2 {
  margin: 0;
}

.tech-copy .lede {
  margin: 0;
}

.tech-copy .eyebrow {
  margin: 0;
}

.patent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-top: 0.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--screen-line);
  border-radius: 14px;
  background: var(--screen-raise);
}

.patent__seal {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  color: var(--accent);
}

.patent p {
  margin: 0;
  color: var(--screen-muted);
}

.patent b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.noah-fig {
  margin: 0;
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

.noah-fig img {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid var(--screen-line);
}

.noah-fig figcaption {
  font-size: 0.85rem;
  color: var(--screen-muted);
  text-align: center;
  max-width: 22rem;
}

.sub-head {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  max-width: 42rem;
}

.sub-head h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  margin: 0;
}

.sub-head .eyebrow {
  margin: 0;
}

.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

@media (min-width: 820px) {
  .compare {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.compare__col {
  border: 1px solid var(--screen-line);
  border-radius: 14px;
  padding: 1.25rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.compare__col--us {
  border: 2px solid var(--accent);
  background: var(--screen-raise);
}

.compare__glyph {
  height: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--screen-muted);
}

.compare__col--us .compare__glyph {
  color: var(--accent);
}

.compare__glyph svg {
  height: 1.9rem;
  width: auto;
}

.compare__col h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

.compare__col p {
  margin: 0;
  color: var(--screen-muted);
}

.phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  position: relative;
}

@media (min-width: 820px) {
  .phases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.phase {
  position: relative;
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.4rem 1.25rem;
  border: 1px solid var(--screen-line);
  border-radius: 16px;
  min-width: 0;
}

.phase--now {
  border: 2px solid var(--accent);
  background: var(--screen-raise);
}

.phase__n {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  color: var(--screen-fg);
}

.phase h4 {
  font-size: 1.15rem;
  margin: 0;
}

.phase p:not(.phase__n) {
  margin: 0;
  color: var(--screen-muted);
}

.phase::after {
  content: "";
  position: absolute;
  background: var(--screen-line);
}

@media (min-width: 820px) {
  .phase:not(:last-child)::after {
    top: 1.95rem;
    right: -1rem;
    width: 1rem;
    height: 2px;
  }

  .phase--now::after {
    background: var(--accent);
  }
}

.chip {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--screen-line);
  color: var(--screen-muted);
}

.chip--now {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

/* ── Why we're here ───────────────────────────────────────────────────── */

.extras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  margin-bottom: 1.5rem;
}

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

.extra {
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 0.3rem;
}

.extra p {
  margin: 0;
}

.extra p:not(.extra__n) {
  color: var(--muted);
}

.extra__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.extras-foot {
  font-size: 1.05rem;
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
}

.extras-foot strong {
  color: var(--accent-text);
}

.benefits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}

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

.benefit {
  background: var(--card);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1.1rem;
  row-gap: 0.45rem;
  align-content: start;
}

.benefit__icon {
  grid-row: span 3;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-text);
}

.benefit__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.benefit .eyebrow,
.benefit h3,
.benefit p {
  margin: 0;
}

.benefit p:not(.eyebrow) {
  color: var(--muted);
}

/* ── Investors: mission, the raise card, the road map, the paths, the form ─ */

.mission {
  display: grid;
  gap: 1rem;
  max-width: 48rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.mission h2 {
  margin: 0;
}

.mission p {
  margin: 0;
}

.mission p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1.2rem;
}

.mission .eyebrow {
  margin: 0;
}

.paths {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 860px) {
  .paths {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.path {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1.5rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  min-width: 0;
}

.path--lead {
  border: 2px solid var(--accent);
}

.path h3 {
  font-size: 1.3rem;
  margin: 0;
}

.path p {
  margin: 0;
}

.path p:not(.eyebrow) {
  color: var(--muted);
}

.path .eyebrow {
  margin: 0;
}

.path .btn {
  justify-self: start;
  margin-top: 0.4rem;
}

/* The mission beside the small card asking for investors and venture
   partners; stacked under 900 px. */
.invest-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.invest-top .mission {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .invest-top {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: center;
  }
}

.raise-card {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 1.25rem 1.4rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--card);
  min-width: 0;
}

.raise-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.raise-card__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  animation: orderbar-pulse 2s ease-in-out infinite;
  flex: none;
}

.raise-card h3 {
  font-size: 1.25rem;
  margin: 0;
  text-wrap: balance;
}

.raise-card p:not(.raise-card__tag) {
  margin: 0;
  color: var(--muted);
}

/* Milestones and phases: a vertical track under 900 px, three columns on
   one horizontal track above it. The node sits on the track; the line runs
   from each node to the next. Finished milestones carry a filled check,
   planned ones a dashed ring; the phases carry no dates (decision 6). */
.roadmap {
  /* --line alone all but vanishes on the light alt band. */
  --track: color-mix(in srgb, var(--faint) 45%, transparent);
  list-style: none;
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.roadmap__phase {
  position: relative;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 0 0 2.25rem 2.25rem;
  min-width: 0;
}

.roadmap__phase:last-child {
  padding-bottom: 0;
}

.roadmap__phase::before {
  content: "";
  position: absolute;
  left: calc(0.6rem - 1px);
  top: 1.45rem;
  bottom: 0.25rem;
  width: 2px;
  background: var(--track);
}

.roadmap__phase:last-child::before {
  display: none;
}

.roadmap__phase--now::before {
  background: linear-gradient(var(--accent), var(--track));
}

.roadmap__node {
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 2px solid var(--faint);
  background: var(--bg-alt);
}

.roadmap__phase--now .roadmap__node {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
}

.roadmap__n {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 1.5rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The chips were drawn for the dark technology band; here they follow
   the page. */
.roadmap .chip:not(.chip--now) {
  border-color: var(--line);
  color: var(--muted);
}

.roadmap__phase h4 {
  font-size: 1.15rem;
  margin: 0;
}

.roadmap__steps {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.roadmap__step {
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted);
  line-height: 1.45;
}

.roadmap__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18rem;
  width: 1rem;
  height: 1rem;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px dashed var(--faint);
}

.roadmap__step--done {
  color: var(--page-ink);
}

.roadmap__step--done::before {
  border: none;
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-4.9' fill='none' stroke='%23090f16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% no-repeat;
}

.roadmap__date {
  display: block;
  margin-bottom: 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}

@media (min-width: 900px) {
  .roadmap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .roadmap__phase {
    padding: 2.4rem 0 0;
  }

  .roadmap__phase::before {
    left: 1.6rem;
    right: calc(-2rem + 0.4rem);
    top: calc(0.75rem - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .roadmap__phase--now::before {
    background: linear-gradient(90deg, var(--accent), var(--track));
  }

  .roadmap__node {
    top: 0.15rem;
  }
}

/* The investor contact form closes the section: the copy beside the paper
   card from 900 px, stacked under it. */
.invest-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: start;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

@media (min-width: 900px) {
  .invest-contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  }
}

.invest-contact__copy {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  max-width: 34rem;
}

.invest-contact__copy h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  margin: 0;
}

.invest-contact__copy p {
  margin: 0;
}

.invest-contact__copy p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1.05rem;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .faq-grid {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  }
}

.faq-side {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.faq-side h2 {
  margin: 0;
}

.faq-side p {
  color: var(--muted);
  margin: 0;
}

.faq-side .eyebrow {
  margin: 0;
}

.faq-list {
  border-top: 1px solid var(--line);
  min-width: 0;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-weight: 700;
  font-size: 1.05rem;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--accent-text);
  line-height: 1;
}

.faq-list details[open] summary::after {
  content: "\2013";
}

.faq-list details p {
  color: var(--muted);
  padding-bottom: 1.15rem;
  max-width: 40rem;
  margin: 0;
}

/* ── Delivery support (beta) ──────────────────────────────────────────── */

.support {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 900px) {
  .support {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

.support__copy {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  align-content: start;
}

.support__copy h2 {
  margin: 0;
}

.support__copy p {
  margin: 0;
}

.support__copy .lede {
  margin: 0;
}

.support__copy .eyebrow {
  margin: 0;
}

.ways {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

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

.way {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.4rem;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  min-width: 0;
}

.way__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-text);
  margin-bottom: 0.25rem;
}

.way__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.way__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow-wrap: break-word;
  user-select: all;
  color: var(--page-ink);
}

.way__value:hover {
  color: var(--accent-text);
}

.way p {
  margin: 0;
}

.way p:not(.eyebrow) {
  font-size: 0.9rem;
  color: var(--muted);
}

.way .eyebrow {
  margin: 0;
}

/* ── The app band: the last block above the footer ──────────────────────
   Orange with navy text, on .band--accent's token scope. */

.home-app {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.home-app .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.home-app h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0;
}

.home-app p {
  margin: 0.35rem 0 0;
}

.home-app .micro {
  margin: 0;
}

.home-app .badges {
  flex-direction: row;
}

.home-app .badge {
  background: var(--ink);
  color: #ffffff;
  border-color: transparent;
}

.home-app .badge:hover {
  background: #1a2430;
  opacity: 1;
}

.home-app .app-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.home-app .web-link {
  font-weight: 700;
  color: var(--ink);
  margin-top: 1.25rem;
  font-size: 1rem;
}

.home-app .web-link:hover {
  color: var(--ink);
  border-bottom-color: currentColor;
}

.home-footer .site-footer-support {
  margin: 0.9rem 0 0;
}

/* ── Phones: the compact rhythm (≤ 599px) ──────────────────────────────
   The desktop spacing scaled for a 375 screen: 44px bands, 24px heads, a
   17px lede, and the three-up number rows (the facts, the extras) three
   up from 360px. Nothing above 599px changes. */

@media (max-width: 599px) {
  body.home {
    --section-y: 2.75rem;
  }

  .hero {
    padding-block: 2.25rem 2.5rem;
  }

  .hero-grid {
    gap: 2rem;
  }

  .hero-text {
    gap: 1rem;
  }

  .head {
    margin-bottom: 1.5rem;
  }

  .head,
  .head--row > div {
    gap: 0.6rem;
  }

  .head--row {
    row-gap: 0.75rem;
  }

  main.home .lede {
    font-size: 1.0625rem;
    margin-bottom: 1.25rem;
  }

  .meet {
    gap: 1.5rem;
  }

  .fact {
    padding: 1rem 0.75rem;
  }

  .fact__n {
    font-size: 1.9rem;
  }

  .fact h3 {
    font-size: 0.9rem;
  }

  .fact p:not(.fact__n) {
    font-size: 0.78rem;
  }

  .where-grid {
    gap: 1.5rem;
  }

  .where-col {
    gap: 1.5rem;
  }

  .tech-top {
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .noah-fig img {
    max-width: 16rem;
  }

  .sub-head {
    margin-bottom: 1rem;
  }

  .compare {
    margin-bottom: 2rem;
  }

  .compare__col {
    padding: 1rem;
  }

  .phase {
    padding: 1.1rem 1rem;
  }

  .extra {
    padding: 0.9rem 0.5rem 0.9rem 0;
  }

  .extra__n {
    font-size: clamp(1.75rem, 8.5vw, 2.6rem);
  }

  .extra p:not(.extra__n) {
    font-size: 0.85rem;
  }

  .extras-foot {
    margin-bottom: 2rem;
  }

  .benefit {
    padding: 1.1rem 1rem;
    column-gap: 0.85rem;
  }
}

/* The three-up number rows go three up from 360px (they were 600 and 760):
   "$6 / $0 / $0" and "$6.50 / $4.62 / $6.25" are one line each at 2rem in
   a 109px column. A 320 screen keeps the stacked list. */
@media (min-width: 360px) and (max-width: 599px) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .extras {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Homepage light-mode component overrides ────────────────────────────
   The tokens flip in tokens.css; only the components that must not follow
   the page need rules here. Scoped to body.home so /vote keeps its navy
   header and its card until PR C takes it through light mode. */

@media (prefers-color-scheme: light) {
  body.home .site-header {
    color-scheme: light;
  }

  body.home .site-header .logo {
    background-image: url("/img/brand/wordmark-navy.svg");
  }

  /* The vote card is already white: on a white page it reads by a hairline. */
  body.home .vote-card {
    border: 1px solid var(--line);
  }

  /* So does the investor form's paper card on the light alt band. */
  body.home .contact-card {
    border: 1px solid var(--paper-line-soft);
  }

  /* Footer links hover to the page ink, not to white. */
  body.home .site-footer a:hover,
  body.home .site-footer a:focus-visible {
    color: var(--page-ink);
  }

  /* The signed-in face is a white disc: give it a navy edge on white. */
  body.home .site-account[data-account="in"] .site-account__face {
    border-color: var(--page-ink);
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .orderbar__live::before,
  .raise-card__dot {
    animation: none;
  }

  .arrow-link__c {
    transition: none;
  }

  .price-slide,
  .price-slide.is-active {
    transition: none;
  }
}