/* ============================================================================
   RideGuide landing v10 — "TWO GROUNDS"
   ROLL SIGN's middle, with the two ends taken from the retired Civic Blue build
   on the founder's pick, 2026-08-28. The hero and the "Own the seam" act wear
   Civic's pale ground and navy; the board strip, the tour and the ink AI act
   stay exactly as ROLL SIGN left them. Archivo / Figtree / Plex Mono throughout,
   and signal yellow steps down from a full-bleed ground to an accent.
   Signal yellow hero, warm porcelain paper, ink slab for the AI act, one
   signage-cobalt slab for the agency act. Archivo (variable width) display:
   wdth 118 for display, 106 for UI-scale headings, 74 for the roll-sign
   slats. Figtree body, IBM Plex Mono for data and provenance.
   Acts are FULL-BLEED with hard edges (signage, not cards). Signature:
   roll-sign slats carrying real trip data, the numbered route-spine, bare
   screenshots with props crossing their silhouettes.
   Motion: reader-paced only, nothing autoplays; reduced motion = static.
   ============================================================================ */

:root{
  --paper:#f5f3ec;
  --paper-2:#ece9df;
  --line:#d9d4c5;
  --ink:#16151a;
  --ink-2:#45444d;
  --ink-3:#6b6a74;
  --signal:#ffc805;
  --cobalt:#0f4c81;
  /* The two Civic ends, ported from the retired Civic Blue build on the
     founder's pick (2026-08-28): the hero wears the pale ground, the agency
     act wears the navy. --cobalt is deliberately NOT repointed at navy — it
     feeds the page-wide focus ring AND the tour's "best guess" sticker, and
     both must stay exactly where they are. */
  --civic:#ecf1f6; --civic-line:#cdd9e5; --civic-ink:#14273b;
  --navy:#0d1f33; --navy-2:#143a63;
  --bezel:#0d1420; --rib:#9db8d4; --sand:#d9b96a; --coral:#e8a58f;
  --white:#fdfcf9;

  --disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --text:"Figtree","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",Menlo,monospace;

  /* one display voice: three widths, one leading, one tracking */
  --wdth-disp:118; --wdth-ui:106; --wdth-sign:74;
  --lh-disp:1.02; --trk-disp:-.021em;

  --hd-h:74px;
  --focus:var(--cobalt);
  --ease:cubic-bezier(.22,.72,.16,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:clip; }
body{ margin:0; font-family:var(--text); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; height:auto; }
section[id],article[id]{ scroll-margin-top:calc(var(--hd-h) + 20px); }

.shell{ max-width:1280px; margin-inline:auto; padding-inline:clamp(22px,4vw,64px); }

h1,h2,h3{
  font-family:var(--disp); font-variation-settings:"wdth" var(--wdth-disp);
  font-weight:800; letter-spacing:var(--trk-disp); line-height:var(--lh-disp); margin:0;
}

.sr-only{ position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }

/* the bare screenshot — no bezel, no notch; a window into the product */
.shot{ border-radius:26px; box-shadow:0 2px 6px rgba(22,21,26,.16), 0 30px 70px -30px rgba(22,21,26,.5); background:#f1f0ec; }

/* the phone: a black bezel around every screen on the page, ported from Civic
   Blue (founder, 2026-08-28 — v9 showed the screenshots bare). It has to be a
   WRAPPER: every .shot is an <img>, and an img takes no ::before to draw a
   frame with. The wrapper owns the width; the img fills it. */
.ph{
  position:relative; padding:10px; border-radius:44px; background:var(--bezel);
  box-shadow:0 0 0 1.5px var(--bezel), inset 0 0 0 1px rgba(253,252,249,.09),
             0 2px 5px rgba(22,21,26,.2), 0 34px 66px -28px rgba(22,21,26,.55);
}
.ph-screen{ position:relative; border-radius:34px; overflow:hidden; background:#f1f0ec; aspect-ratio:393/852; }
/* inside the bezel the screen is clipped by .ph-screen, so the bare-screenshot
   radius and drop shadow would only fight the frame */
.ph .shot{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0; box-shadow:none; }

/* the roll-sign slat: ink slab, signal condensed caps, two sign bolts */
.slat{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--ink); color:var(--signal);
  font-family:var(--disp); font-variation-settings:"wdth" var(--wdth-sign); font-weight:800;
  font-size:17px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  padding:13px 18px; border-radius:8px;
  box-shadow:0 2px 4px rgba(22,21,26,.25), 0 16px 34px -14px rgba(22,21,26,.55);
}
.slat i{ width:6px; height:6px; border-radius:50%; background:var(--paper); opacity:.55; flex:none; }

/* ------------------------------------------------------------------ buttons
   two tiers, brutal scarcity: solid = conversion, ghost = everything else.
   The solid tier is always the physically larger object. */
.btn-ink,.btn-signal{
  display:inline-block; font-weight:700; font-size:17px; line-height:1.2; text-decoration:none;
  padding:17px 40px; border-radius:999px;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
/* the hero CTA is Civic's navy pill. Safe to restyle in place: this is the only
   .btn-ink on the page. The shared base rule above (padding, radius, size) is
   untouched, so the agency act's .btn-signal keeps its geometry. */
.btn-ink{ background:var(--navy-2); color:#f4f8fc; box-shadow:0 14px 30px -14px rgba(20,58,99,.55); }
.btn-signal{ background:var(--signal); color:var(--ink); box-shadow:0 16px 34px -16px rgba(0,0,0,.5); }
.btn-ink:hover,.btn-signal:hover{ transform:translateY(-1px); }
.btn-ghost{
  display:inline-block; font-weight:700; font-size:16px; line-height:1.2; color:var(--ink); text-decoration:none;
  padding:14px 24px; border-radius:999px; border:2px solid rgba(22,21,26,.6);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.btn-ghost:hover{ border-color:var(--ink); background:rgba(22,21,26,.05); }
/* Civic's underlined text link, scoped to the hero. The base .btn-ghost is also
   the header CTA, which rides over the ink board strip and the ink AI act —
   navy on #16151a is about 1.6:1, so a global restyle would erase it there. */
.hero .btn-ghost{
  border:0; border-radius:0; padding:0 0 3px; color:#33475c;
  border-bottom:2px solid var(--civic-line);
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.hero .btn-ghost:hover{ color:var(--civic-ink); border-bottom-color:var(--civic-ink); background:none; }

:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }

/* ------------------------------------------------------------------ header */
.hd{ position:sticky; top:0; z-index:60; background:transparent; transition:background .25s ease, box-shadow .25s ease; }
/* is-scrolled fires at scrollY > 40, which is still inside the hero. Warm paper
   against the cool hero ground is 1.02:1 in luminance, so the warm tan hairline
   left the bar floating as a ghost. An ink hairline gives it a real edge on the
   pale hero, on porcelain and on ink alike. */
.hd.is-scrolled{ background:var(--paper); box-shadow:0 1px 0 rgba(22,21,26,.16); }
.hd-row{ display:flex; align-items:center; gap:clamp(20px,3vw,44px); padding-block:16px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.roundel{ width:30px; height:30px; border-radius:50%; background:var(--ink); display:grid; place-items:center; flex:none; }
.roundel::after{ content:""; width:13px; height:13px; border-radius:50%; background:var(--signal); }
.brand b{ font-family:var(--disp); font-variation-settings:"wdth" var(--wdth-ui); font-size:21px; font-weight:800; letter-spacing:-.01em; }
.brand .by{ font-size:12.5px; font-weight:600; color:var(--ink-2); padding-left:11px; border-left:1.5px solid rgba(22,21,26,.25); white-space:nowrap; }
.nav{ display:flex; gap:clamp(18px,2.6vw,36px); margin-left:auto; }
.nav a{ font-size:15.5px; font-weight:600; color:var(--ink); text-decoration:none; opacity:.82; }
.nav a:hover{ opacity:1; }
.hd-cta{ padding:10px 22px; font-size:15.5px; white-space:nowrap; }

/* -------------------------------------------------------------------- hero */
/* The hero is the first of the two Civic ends: pale ground, ribbons, a navy
   headline under a coral swash. --line is overridden HERE ONLY — the warm tan
   hairline is right on porcelain and wrong on this cool ground, and the token
   itself is load-bearing for the tour, the done-band and the header. */
.hero{
  position:relative; background:var(--civic); color:var(--civic-ink);
  --line:var(--civic-line);
  margin-top:calc(-1 * var(--hd-h));
  padding-top:clamp(100px,12vh,150px);
  padding-bottom:clamp(90px,12vh,150px);
  overflow:hidden;
  --focus:var(--cobalt);
}
/* the ribbons: three soft transit lines running under everything. Decorative
   only — they carry no status, so they sit outside the Colour Law entirely. */
.hero-ribbons{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.hero-grid{ z-index:1; }
.hero-grid{ position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,4vw,64px); align-items:center; }
h1{
  font-size:clamp(44px,5.7vw,86px); line-height:.99; letter-spacing:-.022em;
  max-inline-size:16ch; text-wrap:balance;
}
/* the underline under "smarter" is the route line itself: straight rail, two stops */
.mk{ position:relative; display:inline-block; }
.mk svg{ position:absolute; left:0; bottom:-7px; width:100%; height:14px; overflow:visible; }
.mk svg path{ fill:none; stroke:var(--ink); stroke-width:6.5; stroke-linecap:round; }
.mk svg circle{ fill:var(--signal); stroke:var(--ink); stroke-width:4.5; }
/* the hero's mark is Civic's coral swash, not the route rail. Scoped to its own
   class: .mk's geometry is shared with the agency act's "seam", which keeps the
   rail — restyling .mk itself would silently redraw that act's signature mark. */
.mk-swash{ color:var(--navy-2); }
.mk-swash svg{ bottom:-9px; height:16px; }
.mk-swash svg path{ stroke:var(--coral); stroke-width:7; }
.sub{ margin:30px 0 0; font-size:clamp(17px,1.5vw,21px); line-height:1.6; color:#33475c; max-width:30em; font-weight:500; }
.acts{ margin-top:42px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

.hero-stage{ position:relative; display:flex; justify-content:center; }
.ph-hero{ position:relative; width:min(29vw,378px); z-index:2; transform:rotate(3deg); }
.hero-line{ position:absolute; pointer-events:none; overflow:visible; }
.hero-line .rail{ fill:none; stroke:var(--ink); stroke-width:13; stroke-linecap:round; opacity:.92; }
/* On yellow, signal read as a HOLE (1.00:1, the ground showing through an ink
   ring) and paper read as the lighter FILL. On pale blue that grammar inverts,
   so both fills are re-assigned to keep the reading the same way round. */
.hero-line .stopdot{ fill:var(--civic); stroke:var(--ink); stroke-width:5; }
.hero-line .stopdot.end{ fill:#fdfcf9; }
.hero-line-back{ left:-30%; top:-6%; width:160%; z-index:1; }
.hero-line-front{ left:-34%; bottom:-3%; width:160%; z-index:3; }
.hero-slat{ position:absolute; z-index:4; left:-38%; top:3%; transform:rotate(-4deg); }

/* -------------------------------------------------------------------- tour */
.tour{ padding-block:clamp(80px,10vh,130px) 0; }
.tour-head h2{ font-size:clamp(38px,4.4vw,64px); }
.tour-head p{ margin:12px 0 0; font-size:19px; color:var(--ink-2); }
.tour-grid{ display:grid; grid-template-columns:236px minmax(0,1fr) clamp(320px,29vw,430px); gap:clamp(28px,3.4vw,64px); margin-top:44px; }

/* the numbered route spine (a real nav: anchors + scrollspy) */
.spine{ position:relative; }
.spine-inner{ position:sticky; top:calc(50vh - 225px); padding-left:36px; }
.spine-rail{ position:absolute; left:11px; top:24px; bottom:24px; width:8px; border-radius:4px; background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--line); }
.spine-fill{ position:absolute; left:11px; top:24px; width:8px; height:0; border-radius:4px; background:var(--ink); transition:height .3s var(--ease); }
.spine-item{ position:relative; display:flex; align-items:baseline; gap:12px; padding-block:14px; text-decoration:none; color:inherit; }
/* The spine runs unbroken 01-07. It used to open a 22px gap before stop 06 to
   mark the shift from things ON the trip to things AROUND it, but the label
   explaining that shift lives in the reading column beside it — so the spine
   gave the pause without the reason and simply read as a broken rail. The
   "Around the trip" divider still states the break, in words, where it belongs. */
.spine-item .dot{
  position:absolute; left:-36px; top:50%; translate:0 -50%; margin-left:3px;
  width:24px; height:24px; border-radius:50%;
  background:var(--paper); border:3px solid var(--ink-3);
  transition:background .25s var(--ease), border .25s var(--ease);
}
.spine-item .n{ font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ink-3); }
.spine-item .t{ font-size:15.5px; font-weight:600; color:var(--ink-3); transition:color .2s var(--ease); }
.spine-item.is-passed .dot{ background:var(--ink); border-color:var(--ink); }
.spine-item.is-active .dot{ background:var(--signal); border:4px solid var(--ink); }
.spine-item.is-active .t{ font-family:var(--disp); font-variation-settings:"wdth" var(--wdth-ui); font-weight:800; font-size:16.5px; color:var(--ink); }
.spine-item.is-active .n{ color:var(--ink); }

/* the stops */
.stops{ min-width:0; }
.stop{ min-height:66vh; display:flex; flex-direction:column; justify-content:center; }
.stop-major{ min-height:84vh; }
.stop h3{ position:relative; font-size:clamp(28px,2.7vw,40px); text-wrap:balance; }
.stop-major h3{ font-size:clamp(36px,3.7vw,56px); }
.gl{ position:absolute; left:-50px; top:.16em; width:34px; height:34px; stroke:var(--ink); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.stop p{ margin:18px 0 0; font-size:19px; line-height:1.6; color:var(--ink-2); max-width:29em; text-wrap:pretty; }
/* on desktop the per-stop screenshot is for assistive tech (the visual lives
   in the sticky stage); display:none would strip it from the a11y tree */
.ph-stop{
  position:absolute; width:1px; height:1px; padding:0; border-radius:0;
  background:none; box-shadow:none; clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* the genre break between the trip (01-05) and around it (06-07) */
.stops-divider{ display:flex; align-items:center; gap:18px; padding-block:30px 8px; }
.stops-divider::before,.stops-divider::after{ content:""; height:1px; background:var(--line); flex:1; }
.stops-divider span{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }

/* payoff stickers: proof objects, one structure (kicker / payoff / gloss) */
.stk{
  margin-top:40px; align-self:flex-start; max-width:min(100%,440px);
  border-radius:12px; padding:20px 24px;
  transform:rotate(-2.5deg); transform-origin:0 100%;
  transition:opacity .45s var(--ease) .1s, translate .45s var(--ease) .1s;
  box-shadow:0 2px 4px rgba(22,21,26,.12), 0 20px 44px -20px rgba(22,21,26,.4);
}
html.js .stop .stk{ opacity:0; translate:0 14px; }
html.js .stop.is-live .stk{ opacity:1; translate:0 0; }
.stk .k{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.stk .t{ font-family:var(--disp); font-variation-settings:"wdth" var(--wdth-ui); font-size:24px; font-weight:800; letter-spacing:-.012em; line-height:1.12; margin-top:9px; }
.stk .t small{ font-size:16px; font-weight:700; color:var(--ink-3); }
.stk .g{ margin-top:9px; font-size:13.5px; font-weight:600; }

.stk-paper{ background:var(--white); border:1.5px solid var(--line); }
.stk-paper .k{ color:var(--ink-3); }
.stk-paper .g{ color:var(--ink); }
.stk-paper .g::before{ content:""; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--signal); border:2px solid var(--ink); margin-right:8px; vertical-align:1px; }

.stk-slat{ background:var(--ink); color:var(--white); }
.stk-slat .k{ color:var(--signal); }
.stk-slat .t{ color:var(--signal); }
.stk-slat .t small{ color:rgba(253,252,249,.75); }
.stk-slat .g{ color:rgba(253,252,249,.75); }

.stk-receipt{ background:var(--white); border:1.5px solid var(--line); border-top:0; border-radius:0 0 12px 12px; position:relative; }
/* torn top edge: an ink-line zigzag 1.5px proud of the white one, so the
   teeth keep an edge against the paper ground */
.stk-receipt::after{
  content:""; position:absolute; left:-1.5px; right:-1.5px; top:-9.5px; height:9px; z-index:0;
  background:linear-gradient(-45deg, transparent 33%, var(--line) 33%, var(--line) 66%, transparent 66%),
             linear-gradient(45deg, transparent 33%, var(--line) 33%, var(--line) 66%, transparent 66%);
  background-size:14px 9px; background-repeat:repeat-x;
}
.stk-receipt::before{
  content:""; position:absolute; left:-1.5px; right:-1.5px; top:-8px; height:9px; z-index:1;
  background:linear-gradient(-45deg, transparent 33%, var(--white) 33%, var(--white) 66%, transparent 66%),
             linear-gradient(45deg, transparent 33%, var(--white) 33%, var(--white) 66%, transparent 66%);
  background-size:14px 9px; background-repeat:repeat-x;
}
.stk-receipt .k{ color:var(--ink-3); }
.stk-receipt .t{ font-family:var(--mono); font-weight:600; font-size:30px; letter-spacing:0; }
.stk-receipt .g{ color:var(--ink-2); }

.stk-guess{ background:var(--white); border:2px dashed var(--ink-3); }
.stk-guess .k{ color:var(--cobalt); }
.stk-guess .g{ color:var(--cobalt); }

/* the sticky phone stage */
.stage{ position:relative; }
.stage-inner{
  position:sticky; top:calc(50vh - min(37svh,360px));
  height:min(74svh,720px); display:flex; align-items:center; justify-content:center;
}
/* One phone, held; the screens crossfade inside it as the reader moves down the
   tour. landing.js still finds `.stage-inner .shot` and still toggles .is-on on
   the img, so the frame is invisible to the script. */
.ph-stage{ height:100%; }
.ph-stage .ph-screen{ height:100%; width:auto; aspect-ratio:393/852; }
.stage-inner .shot{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .28s ease; }
.stage-inner .shot.is-on{ opacity:1; }

/* ------------------------------------------------------------------ AI act */
.ai{ background:var(--ink); color:var(--white); padding-block:clamp(80px,10vh,130px); --focus:var(--signal); }
.ai-head{ display:flex; align-items:center; justify-content:space-between; gap:clamp(32px,4vw,72px); }
.ai-lede{ min-width:0; }
.ai h2{ font-size:clamp(40px,5vw,74px); color:var(--white); max-width:14em; text-wrap:balance; }
.ai .sig{ color:var(--signal); }
.ai-sub{ margin:22px 0 0; font-size:clamp(17px,1.4vw,20px); line-height:1.6; color:rgba(253,252,249,.78); max-width:42em; }

/* the ingest diagram: five feeds, one live spine, converging on a roll sign.
   Hue means exactly one thing here: signal = the live feed. */
.ingest{ display:block; width:100%; height:auto; margin-top:clamp(40px,5vh,64px); overflow:visible; }
.ingest .r{ fill:none; stroke-linecap:round; }
.ingest .r1{ stroke:var(--paper); opacity:.8;  stroke-width:13; }
.ingest .r2{ stroke:var(--signal); opacity:1;  stroke-width:16; }
.ingest .r3{ stroke:var(--paper); opacity:.62; stroke-width:11; }
.ingest .r4{ stroke:var(--paper); opacity:.48; stroke-width:10; }
.ingest .r5{ stroke:var(--paper); opacity:.36; stroke-width:9; }
.ingest .hub{ fill:var(--ink); stroke:var(--signal); stroke-width:2.5; }
.ingest text{ font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:.12em; }
.ingest .l1{ fill:var(--paper); }
.ingest .l2{ fill:var(--signal); }
.ingest .l3{ fill:rgba(245,243,236,.72); }
.ingest .l4{ fill:rgba(245,243,236,.62); }
.ingest .l5{ fill:rgba(245,243,236,.52); }
.ingest .hub-label{ fill:var(--signal); font-size:16px; letter-spacing:.1em; }

/* mobile form of the same diagram: a list that converges on the slat */
.ingest-m{ display:none; margin-top:36px; border-left:3px solid rgba(245,243,236,.3); padding-left:20px; }
.im-row{ padding-block:9px; }
.im-l{ font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.12em; }
.im-l.l1{ color:var(--paper); }
.im-l.l2{ color:var(--signal); }
.im-l.l3{ color:rgba(245,243,236,.72); }
.im-l.l4{ color:rgba(245,243,236,.62); }
.im-l.l5{ color:rgba(245,243,236,.52); }
.im-hub{ margin-top:14px; display:inline-block; border:2px solid var(--signal); border-radius:9px; padding:10px 14px; font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--signal); }

.ai-slat{ flex:none; background:var(--signal); color:var(--ink);
  transform:rotate(-2.4deg); font-size:17px;
  max-width:min(330px,32%); white-space:normal; text-align:center; line-height:1.4;
  box-shadow:0 2px 4px rgba(0,0,0,.3), 0 16px 34px -14px rgba(0,0,0,.5); }
.ai-slat i{ background:var(--ink); opacity:.4; }

.ai-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(44px,6vh,64px); }
.ai-cols > div{ padding:0 clamp(22px,2.8vw,42px); border-left:1px solid rgba(253,252,249,.18); }
.ai-cols > div:first-child{ padding-left:0; border-left:0; }
.ai-cols h3{ font-size:21px; color:var(--white); font-variation-settings:"wdth" var(--wdth-ui); }
.ai-cols p{ margin:13px 0 0; font-size:16px; line-height:1.65; color:rgba(253,252,249,.75); text-wrap:pretty; }

/* ------------------------------------------------------------------ voices */
.voices{ padding-block:clamp(90px,11vh,150px); }
.voices h2{ font-size:clamp(34px,3.8vw,56px); max-width:16em; }
.v-head{ margin-bottom:clamp(40px,5vh,60px); }

/* THE VOICES MARQUEE — the quotes drift sideways on their own, continuously,
   and the track wraps forever. Founder's call, 2026-08-28.

   It is a ledger, not a stack of cards: columns divided by the hairline idiom
   the page already uses, closed top and bottom by full rules, no card edges or
   fills, so it does not trip the anti-box fail test.

   It pauses on hover and on keyboard focus, and holds completely still under
   prefers-reduced-motion — where it degrades to the plain horizontal scroller
   it is without JS. That pause is what keeps a self-moving band readable, and
   it is the accessibility floor for motion that runs longer than five seconds. */
.v-rail{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
}
.v-rail::-webkit-scrollbar{ display:none; }
/* with the script running the track moves itself, so the scroller is retired */
.js .v-rail{ overflow:hidden; }

.v-track{
  list-style:none; margin:0; padding:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(300px,27vw,380px);
  width:max-content;
}
.js .v-track{
  /* -50% is exactly the original set, because landing.js appends one clone set:
     the loop point is visually identical to the start, so there is no seam */
  animation:v-drift var(--v-speed,78s) linear infinite;
  will-change:transform;
}
@keyframes v-drift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.v-rail:focus-within .v-track{ animation-play-state:paused; }
/* NO hover pause. The band is full-bleed and 314px tall — about a third of the
   viewport — so a pointer resting anywhere near the middle of the screen at this
   scroll position sits inside it, and the band spent nearly all its time frozen.
   It read as "the carousel is broken". Reduced-motion remains the stop. */

.v-track li{
  min-width:0;
  padding:clamp(30px,3.4vh,44px) clamp(24px,2.6vw,40px);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column;
}
.v-track figure{ margin:0; display:flex; flex-direction:column; height:100%; }
.v-track blockquote{ margin:0; }
.v-track blockquote p{
  margin:0; font-family:var(--disp); font-variation-settings:"wdth" 100;
  font-weight:600; font-size:clamp(19px,1.5vw,23px); line-height:1.4;
  letter-spacing:-.012em; text-wrap:pretty; color:var(--ink);
}
/* every attribution lands on the same baseline, so the names read as one
   horizontal rule running the length of the band */
.v-track figcaption{ margin-top:auto; padding-top:clamp(26px,3vh,38px); }
.v-track figcaption b{ display:block; font-size:16.5px; font-weight:700; color:var(--ink); }
.v-track figcaption span{ display:block; margin-top:3px; font-size:14px; font-weight:500; line-height:1.45; color:var(--ink-3); }

@media (prefers-reduced-motion: reduce){
  .js .v-track{ animation:none; }
  .js .v-rail{ overflow-x:auto; }
}

/* The second Civic end. Ground goes cobalt -> navy on the founder's pick, with
   Civic's own #143a63 as the top rule. NOTE: --cobalt itself is untouched. It
   still feeds the page-wide focus ring and the tour's "best guess" sticker, so
   repointing the token to get navy here would have silently changed both. */
.agency{ background:var(--navy); color:#eaf2fa; border-top:3px solid var(--navy-2); padding-block:clamp(80px,10vh,130px); --focus:#fdfcf9; }
/* Civic's composition: the argument on the left, the checklist facing it on the
   right. The honest ten-row table then runs the full width below them, where
   Civic put its nine chips — the table is kept because the chips drop Oakville
   and erase the live-versus-schedules distinction. */
.agency-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); grid-template-areas:"copy checks"; column-gap:clamp(48px,6.5vw,120px); row-gap:0; align-items:start; }
.agency-copy{ grid-area:copy; min-width:0; }
.agency-checks{ grid-area:checks; min-width:0; }
.agency h2{ font-size:clamp(40px,4.6vw,68px); color:#fdfcf9; }
/* "seam" carries the same route-rail underline as the hero's "smarter" */
.mk-sig{ color:#fdfcf9; }
.mk-sig svg path{ stroke:var(--signal); }
.mk-sig svg circle{ fill:var(--paper); stroke:var(--signal); }
.agency-sub{ margin:20px 0 0; font-size:19px; line-height:1.6; color:rgba(234,242,250,.82); max-width:28em; }

.checks{ list-style:none; margin:0; padding:0; }
.checks li{ position:relative; padding:19px 0 19px 42px; border-top:1px solid rgba(234,242,250,.2); }
.checks li:last-child{ border-bottom:1px solid rgba(234,242,250,.2); }
.ck{ position:absolute; left:0; top:23px; width:22px; height:22px; stroke:rgba(234,242,250,.55); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.checks b{ display:block; font-size:16.5px; font-weight:700; color:#fdfcf9; }
.checks span{ display:block; margin-top:3px; font-size:14.5px; line-height:1.5; color:rgba(234,242,250,.72); }

/* the close: one full-width band; button and terms sit together at the left,
   the contact address holds the right end */
/* The conversion sits with the argument that earns it, not in a band below.
   Once the coverage table, the two CTA lines and the address were cut, the band
   held nothing but this button — stranded under a rule with a screenful of dead
   ground above it, while the checklist beside it ran on. */
.agency-cta{ margin-top:clamp(34px,4.5vh,48px); }

/* ------------------------------------------------------------------ footer */
.ft{ background:var(--ink); color:var(--paper); --focus:var(--signal); }
.ft .roundel{ background:var(--paper); }
.ft .roundel::after{ background:var(--ink); }
.ft .brand b{ color:var(--paper); }
.ft .brand .by{ color:rgba(245,243,236,.6); border-left-color:rgba(245,243,236,.3); }
.ft-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding-block:34px; }
.ft-fine{ justify-self:end; font-size:13px; color:rgba(245,243,236,.6); }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .stk, .stage-inner .shot, .spine-fill, .spine-item .dot, .spine-item .t,
  .btn-ink, .btn-signal, .btn-ghost, .hd{ transition:none; }
  html.js .stop .stk{ opacity:1; translate:0 0; }
  .btn-ink:hover, .btn-signal:hover{ transform:none; }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width:1080px){
  .nav{ display:none; }
  .hd-cta{ margin-left:auto; }

  /* the bezel is black and the board strip below is ink, so the old
     padding-bottom:0 would run the phone's bottom frame straight into it */
  .hero{ padding-top:104px; padding-bottom:44px; }
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-stage{ padding-inline:8vw; }
  .ph-hero{ width:min(62vw,300px); }
  /* Props cross the phone's silhouette edge, never its content — and never the
     VIEWPORT edge either. The stage is full-width once the grid stacks, so a
     percentage offset that reads as a small overhang at 390px is an 79px
     amputation at 1000px: the slat rendered as "RIP, ONE GUIDE". Anchored to the
     phone's own edge instead of the stage's width. */
  /* anchored to the PHONE's left edge, not the stage's: the stage is full-width
     once the grid stacks, so a stage-relative offset either amputates the slat
     at the viewport or leaves it floating clear of the phone entirely. The
     phone is centred, so its left edge is 50% minus half its own width. */
  .hero-slat{ left:auto; right:calc(50% + min(62vw,300px) / 2 - 44px);
              top:-1%; bottom:auto; font-size:13px; padding:9px 13px; }
  /* :not(.mk-swash) is load-bearing. These three rules are the agency act's
     "seam" rail at mobile sizes; unscoped they also rewrote the hero's coral
     swash, flattening it to the rail's 6px/12px geometry. */
  .mk:not(.mk-swash) svg{ bottom:-6px; height:12px; }
  .mk:not(.mk-swash) svg path{ stroke-width:6; }
  .mk:not(.mk-swash) svg circle{ stroke-width:4; r:5; }
  .mk-swash svg{ bottom:-7px; height:13px; }
  .mk-swash svg path{ stroke-width:6; }

  .tour-grid{ grid-template-columns:1fr; margin-top:8px; }
  .spine,.stage{ display:none; }
  .stop{ min-height:0; padding-block:52px; border-top:1px solid var(--line); }
  .stop:first-child{ border-top:0; }
  .stop h3{ display:flex; align-items:flex-start; gap:12px; }
  .gl{ position:static; margin-top:.13em; width:28px; height:28px; flex:none; }
  /* the screen becomes a full-bleed plate against the porcelain: no radius,
     no shadow, no box — one hairline top and bottom gives it an edge.
     Bleed mirrors the shell padding (100vw overshoots by the scrollbar). */
  /* the phone comes back on mobile too, rather than the full-bleed plate v9
     used — a bezelled hero above seven bare plates reads as two treatments */
  .ph-stop{
    position:static; clip-path:none; overflow:visible; white-space:normal;
    width:min(64vw,286px); height:auto; margin:34px auto 0;
    padding:9px; border-radius:40px; background:var(--bezel);
    box-shadow:0 0 0 1.5px var(--bezel), inset 0 0 0 1px rgba(253,252,249,.09),
               0 2px 5px rgba(22,21,26,.2), 0 26px 52px -24px rgba(22,21,26,.5);
  }
  .ph-stop .ph-screen{ border-radius:31px; }
  .stk{ margin-top:34px; border-radius:0; }
  .stops-divider{ padding-block:40px 28px; }
  .stops-divider + .stop{ border-top:0; }
  .ai-head{ display:block; }
  .ai-slat{ margin-top:30px; }

  .ai-cols{ grid-template-columns:1fr; gap:30px; }
  .ai-cols > div{ padding:0; border-left:0; }
  .ingest{ display:none; }
  .ingest-m{ display:block; }
  .slat{ white-space:normal; text-align:center; line-height:1.35; }
  /* At 390px there is no room for a horizontal sign BESIDE a 242px phone — it
     either wraps to three lines or gets amputated by the viewport. So it crosses
     the phone's TOP edge instead of its left one, and keeps one line. */
  .hero-slat{ left:5%; right:auto; top:-1.5%; font-size:12px; padding:8px 12px;
              white-space:nowrap; text-align:left; }

  /* the rail stacks by shrinking its column, not by unstacking: it is a
     scroller at every width, so it needs no layout override here */
  .v-rail{ grid-auto-columns:min(78vw,340px); }

  .agency-grid{ grid-template-columns:1fr; grid-template-areas:"copy" "checks"; }
  .agency-checks{ margin-top:36px; }

  .ft-row{ grid-template-columns:1fr; gap:18px; justify-items:start; }
  .ft-fine{ justify-self:start; }
}

@media (max-width:560px){
  :root{ --hd-h:62px; }
  .hd-row{ gap:10px; padding-block:12px; }
  .hd-cta{ padding:8px 13px; font-size:13px; }
  .brand{ gap:8px; }
  .brand b{ font-size:19px; }
  .brand .by{ font-size:11.5px; padding-left:8px; }
  .hero{ padding-top:88px; }
  h1{ font-size:clamp(40px,11.5vw,52px); max-inline-size:10ch; }
  .sub{ margin-top:20px; font-size:17px; }
  .acts{ margin-top:26px; gap:12px; flex-wrap:nowrap; }
  .btn-ink{ padding:15px 22px; font-size:15.5px; }
  .btn-ghost{ padding:13px 16px; font-size:14.5px; }
  .ph-hero{ width:min(74vw,300px); }
  .stop h3{ font-size:26px; }
  .stop-major h3{ font-size:31px; }
  .v-rail{ grid-auto-columns:min(84vw,330px); }
  .v-rail blockquote p{ font-size:19px; }
}