/* RainVoid marketing site — same tokens as the app: brand_primary #1565C0, brand_light
   #64B5F6, surface_dark #1E1E1E, success_green #2E7D32. No trackers, no third-party
   requests: fonts are served from this site. */
@font-face { font-family: "Oswald"; font-weight: 200 700; font-display: swap; src: url("fonts/Oswald-VariableFont_wght.ttf") format("truetype"); }

:root {
  --bg: #121212; --surface: #1E1E1E; --surface-2: #2A2A2A; --line: #333;
  --ink: #FFFFFF; --ink-dim: rgba(255,255,255,.78); --ink-mute: rgba(255,255,255,.58);
  --brand: #1565C0; --brand-light: #64B5F6; --green: #2E7D32; --slate: #78909C;
  --radius: 12px; --maxw: 1200px; --maxw-wide: 1440px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--brand-light); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: "Oswald", "Segoe UI", Roboto, sans-serif; font-weight: 700; letter-spacing: .01em; line-height: 1.1; margin: 0 0 .4em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.25rem; font-weight: 500; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.eyebrow { font-family: "Oswald", sans-serif; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; color: var(--brand-light); margin-bottom: .6em; }
.dim { color: var(--ink-dim); }
.mute { color: var(--ink-mute); font-size: .95rem; }

/* nav */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(18,18,18,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 22px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-family: "Oswald", sans-serif; font-weight: 700; font-size: 1.35rem; }
.brand img { width: 34px; height: 34px; }
.nav nav { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.nav nav a { color: var(--ink-dim); font-size: .95rem; }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--brand); color: #fff; padding: 12px 20px; border-radius: var(--radius); font-weight: 600; border: 0; }
.btn:hover { background: #1976D2; text-decoration: none; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn svg { width: 20px; height: 20px; }
@media (max-width: 720px) { .nav nav a.link { display: none; } }

/* hero (owner 2026-09-14, rendering 12 B): the words in the left 40 %, the ride video running to
   the right edge of the screen; on phones the video sits edge to edge under the words, no gap. */
.hero { padding: 40px 0 56px; overflow: hidden; }
.hero .wrap { max-width: none; padding-left: max(32px, calc((100vw - var(--maxw-wide)) / 2 + 32px)); padding-right: 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.hero .wrap > * { min-width: 0; }
.hero .wrap > div:first-child { padding: 12px 0; }
.hero .eyebrow { margin-bottom: 14px; }
.hero h1 { margin-bottom: 18px; max-width: 9.5em; }
.hero p.lead { font-size: 1.2rem; line-height: 1.5; color: var(--ink-dim); max-width: 30em; margin-bottom: 0; }
.hero .mute { max-width: 30em; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 30px 0 14px; }
.ride { display: flex; flex-direction: column; }
.ride .clip { width: 100%; max-width: 100%; height: auto; display: block; background: #111; border-radius: 16px 0 0 16px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
@media (max-width: 860px) {
  .hero { padding: 28px 0 0; }
  .hero .wrap { grid-template-columns: 1fr; padding: 0 20px; gap: 16px; }
  .hero .wrap > div:first-child { padding: 0; }
  .hero .mute { margin-bottom: 0; }
  .ride { margin: 0 -20px; }
  .ride .clip { border-radius: 0; box-shadow: none; }
}

/* number strip */
.numbers { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.numbers .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; }
.num { padding: 30px 28px; border-right: 1px solid var(--line); }
.num:last-child { border-right: 0; }
.num b { display: block; font-family: "Oswald", sans-serif; font-size: 2.1rem; font-weight: 700; color: var(--brand-light); line-height: 1; margin-bottom: 8px; }
.num span { color: var(--ink-dim); font-size: .95rem; }
@media (max-width: 720px) { .num { border-right: 0; border-bottom: 1px solid var(--line); } }

/* sections */
section { padding: 88px 0; }
section.alt { background: var(--surface); }
@media (max-width: 860px) { .wrap { padding: 0 20px; } section { padding: 56px 0; } }
.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
section.alt .card { background: var(--bg); }
.card h3 { color: var(--ink); margin-bottom: .35em; }
.card p { color: var(--ink-dim); margin: 0; font-size: 1rem; }
.swatch { display: inline-block; width: 26px; height: 8px; border-radius: 4px; vertical-align: middle; margin-right: 8px; }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; counter-reset: step; }
.step { position: relative; padding: 22px 22px 22px 22px; background: var(--surface-2); border-radius: var(--radius); border: 1px solid var(--line); }
.step::before { counter-increment: step; content: counter(step); font-family: "Oswald", sans-serif; font-weight: 700; color: var(--brand-light); font-size: 1.6rem; display: block; margin-bottom: 6px; }
.step p { color: var(--ink-dim); margin: 0; font-size: 1rem; }

/* gallery: screens at a natural phone size, never stretched or cropped */
.gallery { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; }
.shot { width: 250px; margin: 0; }
.shot .frame { border-radius: 26px; border: 8px solid #0d0d0d; box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 0 1px #2a2a2a; overflow: hidden; background: #000; }
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption { padding: 12px 4px 0; color: var(--ink-dim); font-size: .92rem; line-height: 1.4; }

/* pitch list */
.pitch { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 24px; }
.pitch li { list-style: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; color: var(--ink-dim); }
.pitch li b { color: var(--ink); display: block; font-family: "Oswald", sans-serif; font-weight: 500; font-size: 1.15rem; margin-bottom: 4px; }
.pitch { padding: 0; }

/* legal */
.legal { max-width: 760px; margin: 0 auto; padding: 60px 20px 90px; }
.legal h1 { margin-bottom: .2em; }
.legal h2 { font-size: 1.15rem; font-weight: 500; margin: 2em 0 .5em; color: var(--brand-light); }
.legal p { color: var(--ink-dim); }
.legal .lead { font-size: 1.1rem; color: var(--ink); }

/* home page (moved out of index.html on 2026-09-14: the site's CSP is style-src 'self', so an
   inline <style> block or a style attribute NEVER applies in a real browser — every rule lives
   here; renders of the local files must be checked against the live URL in a real browser) */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 64px 0; border-top: 1px solid var(--line); }
.feat.flip .pic { order: 2; }
.feat > div:not(.pic) { padding: 0 8px; }
.feat h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: .45em; }
.feat p { color: var(--ink-dim); font-size: 1.12rem; line-height: 1.6; max-width: 30em; margin: 0; }
.feat .n { font-family: "Oswald", sans-serif; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; color: var(--brand-light); margin-bottom: .6em; }
.pic img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px #2a2a2a; }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 20px; max-width: 34em; }
.rules div { color: var(--ink-dim); font-size: 1rem; line-height: 1.5; }
.rules b { display: block; color: var(--ink); font-family: "Oswald", sans-serif; font-weight: 500; font-size: 1.08rem; letter-spacing: .02em; margin-bottom: 3px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.tile { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tile img { width: 100%; height: 240px; object-fit: cover; object-position: top; display: block; }
/* whole = the picture at its own height, nothing cropped (owner 2026-09-19: the Weather-changed card and the
   plan rows were cut at 240 px; the three top-row crops share a 1.28 aspect, so the row stays level) */
.tile img.whole { height: auto; }
.tile .t { padding: 22px 24px 26px; }
.tile h3 { font-size: 1.25rem; font-weight: 500; color: var(--ink); margin: 0 0 .4em; }
.tile p { color: var(--ink-dim); font-size: 1rem; line-height: 1.55; margin: 0; }
.strip3 { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.strip3 .wrap { display: block; }
/* THE CONFIDENCE BLOCK (owner 2026-09-18, from the Instagram-browser screenshot: the long tile filled the
   phone): the rating runs full width above the three numbers — the number, a short claim, the proof line,
   and the definition in small print. Never "nightly"; the numbers between the markers are filled by
   HelloWorldApp/tools/ride_count.py. */
.conf { display: grid; grid-template-columns: auto 1fr; gap: 8px 36px; align-items: center; padding: 34px 28px 28px; border-bottom: 1px solid var(--line); }
.conf b { font-family: "Oswald", sans-serif; font-size: 4.6rem; font-weight: 700; color: var(--brand-light); line-height: 1; }
.conf p { margin: 0; }
.conf .claim { font-family: "Oswald", sans-serif; font-weight: 500; font-size: 1.6rem; line-height: 1.2; color: var(--ink); letter-spacing: .01em; }
.conf .proof { margin-top: 6px; font-size: 1.05rem; color: var(--ink-dim); }
.conf .proof .n { color: var(--brand-light); font-family: "Oswald", sans-serif; font-weight: 700; font-size: 1.35em; letter-spacing: .01em; }   /* the ride count in the brand blue (owner 2026-09-18) */
.conf .fine { margin-top: 10px; font-size: .8rem; line-height: 1.45; color: var(--ink-mute); max-width: 58em; }
.conf .real:empty { display: none; } /* the real-ride line appears only past the site's floor */
.three { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) {
  .conf { grid-template-columns: 1fr; gap: 10px; padding: 28px 20px 24px; }
  .conf b { font-size: 3.8rem; }
  .conf .claim { font-size: 1.35rem; }
  .three { grid-template-columns: 1fr; }
}
section.alt.deep { padding-top: 20px; }
.builder { padding: 72px 0; border-top: 1px solid var(--line); }
.builder .in { max-width: 44em; }
.builder p { color: var(--ink-dim); font-size: 1.15rem; line-height: 1.6; max-width: 36em; }
.final { text-align: center; padding: 88px 0; }
.cta2 { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 26px 0 8px; }
@media (max-width: 820px) { .feat { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; } .feat > div:not(.pic) { padding: 0; } .feat.flip .pic { order: 0; } .tiles { grid-template-columns: 1fr; } .rules { grid-template-columns: 1fr; } .builder { padding: 48px 0; } }

/* footer */
footer { border-top: 1px solid var(--line); padding: 40px 0 60px; color: var(--ink-mute); font-size: .9rem; }
footer .wrap { display: grid; gap: 14px; }
footer a { color: var(--ink-dim); }
.attr { font-size: .85rem; }

/* THE SERVICE DISCOUNT (the owner 2026-10-24, rendering 100 v3): the gold line by the Play buttons and the four pages
   — three short steps, then the application (website/site/service*.html, service.js). The gold is the app's
   best_call_gold #E8B220, the service badge's own colour; the amber/orange/red ramp is never used here. Mobile first:
   16-px gutters, one column, the button full width under the thumb; two short fields side by side from 560 px up. */
:root { --gold: #E8B220; --green-light: #81C784; }
.service-row { margin: 0 0 16px; }
.final .service-row { display: flex; justify-content: center; margin: 0 0 18px; }
.service-line { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 10px 16px; border: 1px solid var(--gold); border-radius: var(--radius); background: rgba(232,178,32,.12); color: var(--gold); font-weight: 600; font-size: .98rem; line-height: 1.3; }
.service-line:hover { background: rgba(232,178,32,.2); text-decoration: none; }
.service-line .star { font-size: 1.05em; line-height: 1; }
.service-line .chev { opacity: .85; }
.svc { max-width: 560px; margin: 0 auto; padding: 32px 16px 72px; }
.svc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 20px 22px; }
.svc h1 { font-size: clamp(1.9rem, 6.4vw, 2.5rem); margin: 0 0 .5em; }
.svc p { color: var(--ink-dim); font-size: 1.02rem; line-height: 1.55; }
.svc .svc-sub { margin-top: -.2em; }
.svc .svc-fine { color: var(--ink-mute); font-size: .9rem; }
.svc-steps { margin: 0 0 1em; padding-left: 1.4em; color: var(--ink-dim); font-size: 1.02rem; line-height: 1.55; }
.svc-steps li { margin: 0 0 .6em; padding-left: .15em; }
.btn.svc-btn { display: flex; width: 100%; justify-content: center; text-align: center; padding: 14px 18px; font-size: 1.05rem; margin-top: 18px; cursor: pointer; }
.btn.svc-btn .chev { opacity: .85; }
.svc-quiet { display: block; text-align: center; margin: 14px 0 0; color: var(--ink-mute); font-size: .95rem; }
.dots { list-style: none; display: flex; gap: 8px; margin: 26px 0 0; padding: 0; }
.dots li { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dots li.on { background: var(--brand-light); }
.svc-form { color-scheme: dark; }
.svc-form label { display: block; font-weight: 600; font-size: .95rem; color: var(--ink); margin: 16px 0 6px; }
.svc-form input[type=email], .svc-form input[type=text], .svc-form select { width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.svc-form input:focus, .svc-form select:focus { outline: 2px solid var(--brand-light); outline-offset: 1px; }
.svc-form input::placeholder { color: var(--ink-mute); }
.svc-form select:invalid { color: var(--ink-mute); }
.svc-row { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 560px) { .svc-row { grid-template-columns: 1fr 1fr; } }
.svc-check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; margin: 18px 0 4px; }
.svc-check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--brand); }
.svc-form .svc-check label { display: block; margin: 0; font-weight: 400; color: var(--ink-dim); font-size: .97rem; line-height: 1.45; }
.svc-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.svc-status { min-height: 1.4em; margin: 12px 0 0; font-size: .97rem; color: var(--ink-dim); }
.svc-status.ok { color: var(--green-light); }
.svc-status.warn { color: var(--ink); }
.svc-form .btn[disabled] { opacity: .6; cursor: default; }
.svc-form .svc-fine { margin: 14px 0 0; }

/* 231: the e-mail link page (/s/<code>) */
.svc-page { background: var(--bg); color: var(--ink); margin: 0; padding: 24px 16px; min-height: 100vh; }
.svc-page main.svc-card { max-width: 560px; margin: 0 auto; }
.svc-page h1 { font-size: 1.8rem; margin: 6px 0 10px; }
.svc-lead { color: var(--ink-dim); margin: 0 0 10px; line-height: 1.45; }
.svc-code { font-family: "Oswald", "Segoe UI", Roboto, sans-serif; font-weight: 600; font-size: 2rem; letter-spacing: .06em; color: var(--ink);
  background: var(--surface-2); border: 2px solid var(--brand-light); border-radius: var(--radius); padding: 12px 16px; text-align: center; margin: 8px 0 14px; cursor: pointer; }
.svc-code[data-copied]::after { content: "  copied"; font-size: .8rem; letter-spacing: 0; color: var(--brand-light); }
.svc-page .fine { color: var(--ink-mute); font-size: .85rem; margin-top: 14px; }

/* ===== front page 2026-10-25 (rendering 106 v17) ===== */
:root { --gold:#E8B220; --bike:#D32F2F; --bike-text:#EF9A9A; --walk:#66BB6A; --walk-text:#A5D6A7; }
  body { padding-bottom: 40px; }
  /* 1 — the hero */
  .hero { padding:28px 0 32px; }
  .hero .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap:40px; align-items:center; padding-right:max(32px, calc((100vw - var(--maxw-wide)) / 2 + 32px)); }
  .hero h1 { font-size:clamp(2.2rem, 4.6vw, 3.6rem); max-width:11em; }
  .hero p.lead { font-size:1.15rem; }
  .hero p.lead.big { font-size:1.3rem; line-height:1.4; margin-bottom:10px; }
  .hero p.lead.big b { color:var(--brand-light); font-weight:700; }
  .hero p.lead b { color:var(--ink); font-weight:600; }
  .modestrip { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:22px 0 6px; }
  .modestrip a { display:block; position:relative; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px 12px 10px; text-decoration:none; color:var(--ink); min-width:0; }
  .modestrip a:hover { border-color:var(--brand-light); }
  .modestrip .ico { height:52px; display:flex; align-items:flex-end; justify-content:center; }
  .modestrip .ico img { display:block; max-height:100%; }
  .modestrip a.vehicle img { width:92px; } .modestrip a.bike img { width:82px; } .modestrip a.walk img { height:48px; }
  .modestrip .bar { height:3px; border-radius:2px; margin:10px 0 8px; }
  .modestrip a.vehicle .bar { background:var(--brand-light); } .modestrip a.bike .bar { background:var(--bike); } .modestrip a.walk .bar { background:var(--walk); }
  .modestrip .name { font-family:"Oswald", sans-serif; font-weight:700; font-size:1.05rem; line-height:1.15; }
  .modestrip .sub { color:var(--ink-mute); font-size:.8rem; line-height:1.3; margin-top:2px; }
  .modestrip .go { display:block; margin-top:8px; color:var(--brand-light); font-size:.85rem; font-weight:600; }
  .conf-card { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px 18px; }
  .conf-card .row { display:flex; gap:18px; align-items:center; }
  .conf-card .big { font-family:"Oswald", sans-serif; font-weight:700; font-size:4.6rem; line-height:1; color:var(--brand-light); }
  .conf-card .claim { font-family:"Oswald", sans-serif; font-weight:500; font-size:1.35rem; line-height:1.2; color:var(--ink); margin:2px 0 8px; }
  .conf-card .proof { color:var(--ink-dim); font-size:.92rem; margin:0; }
  .conf-card .proof .n { font-family:"Oswald", sans-serif; font-weight:700; font-size:1.8rem; line-height:1; color:var(--brand-light); letter-spacing:.01em; }
  .conf-card video { width:100%; border-radius:10px; margin-top:14px; border:1px solid #3a3a3a; display:block; background:#000; }
  .conf-card .fine { color:var(--ink-mute); font-size:.8rem; margin:8px 0 0; line-height:1.45; }
  /* 2 — the service band */
  .service { background:linear-gradient(90deg, rgba(232,178,32,.14), rgba(232,178,32,.04)); border-top:1px solid rgba(232,178,32,.45); border-bottom:1px solid rgba(232,178,32,.45); padding:16px 0; }
  .service .wrap { display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:32px; align-items:center; }
  .service .eyebrow { color:var(--gold); margin-bottom:4px; }
  .service h2 { font-size:clamp(1.3rem, 2.2vw, 1.7rem); margin:0 0 .2em; }
  .service p { color:var(--ink-dim); margin:0; font-size:.98rem; max-width:46em; }
  .service .pct { text-align:center; }
  .service .pct b { display:block; font-family:"Oswald", sans-serif; font-weight:700; font-size:3.4rem; line-height:1; color:var(--gold); letter-spacing:.01em; white-space:nowrap; }
  .service .pct a { display:inline-block; margin-top:6px; color:var(--gold); font-weight:600; font-size:.95rem; }
  /* 3 — what it does: the story in four screens, bullets under each */
  .story { padding:44px 0 24px; border-top:1px solid var(--line); }
  .story h2, .modes h2 { text-align:center; margin-left:auto; margin-right:auto; }
  .story .lead { text-align:center; margin:0 auto 26px; color:var(--ink-dim); font-size:1.12rem; max-width:46em; }
  .chaps { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; align-items:stretch; }
  .chap { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); min-width:0; padding:12px 11px 14px; display:flex; flex-direction:column; }
  .chap .shot { display:block; }
  .chap .shot img { width:100%; height:auto; display:block; }
  .chap ul { flex:1; }
  .bc { display:inline-block; background:#E8B220; color:#1a1200; font-family:"Oswald", sans-serif; font-weight:500; font-size:.68rem; letter-spacing:.06em; padding:1px 7px 0; border-radius:4px; vertical-align:1px; margin-right:4px; white-space:nowrap; }
  .chap .k { font-family:"Oswald", sans-serif; font-weight:500; letter-spacing:.14em; text-transform:uppercase; font-size:.76rem; color:var(--brand-light); text-align:center; margin:0 0 10px; }
  .chap .shot { border-radius:14px; overflow:hidden; border:1px solid #444; margin:0 auto; max-width:232px; }
  .chap .shot img { width:100%; height:auto; display:block; }
  .chap h3 { font-size:1.15rem; margin:14px 0 4px; text-align:center; }
  .voice { font-style:italic; color:var(--ink-dim); text-align:center; font-size:.92rem; line-height:1.4; margin:0 0 10px; }
  .chap ul { margin:0; padding-left:18px; } .chap li { color:var(--ink-dim); font-size:.9rem; line-height:1.42; } .chap li + li { margin-top:6px; }
  .chap li b { color:var(--ink); font-weight:600; }
  .story-fine { color:var(--ink-dim); font-size:.82rem; margin:10px 0 0; text-align:center; }
  .chap li.key, .chap li.key b { color:var(--brand-light); } .chap li.key b { font-weight:700; }
  /* 4 — the modes */
  .modes { padding:44px 0 30px; border-top:1px solid var(--line); }
  .artrow, .cols { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
  .artrow { align-items:end; margin-top:8px; }
  .art { display:flex; align-items:flex-end; justify-content:center; height:170px; }
  .art img { display:block; max-width:100%; }
  .art.vehicle img { width:262px; } .art.bike img { width:234px; } .art.walk img { height:136px; }
  .rule { height:4px; border-radius:2px; margin:12px 0 0; }
  .rule.vehicle { background:var(--brand-light); } .rule.bike { background:var(--bike); } .rule.walk { background:var(--walk); }
  .cols { margin-top:18px; align-items:stretch; }
  .col { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px 24px; min-width:0; scroll-margin-top:24px; display:flex; flex-direction:column; }
  .col .shot { margin-top:4px; padding-top:0; }
  .col.walk { border-color:var(--walk); box-shadow:0 0 0 1px var(--walk) inset; }
  .col h3 { font-size:1.35rem; margin:0 0 2px; text-align:center; }
  .col .sub { color:var(--ink-mute); font-size:.92rem; margin:0 0 14px; text-align:center; }
  .col h4 { font-family:"Oswald", sans-serif; font-weight:700; letter-spacing:.09em; text-transform:uppercase; font-size:1.42rem; line-height:1.2; margin:26px 0 12px; padding-bottom:8px; border-bottom:3px solid currentColor; }   /* 2026-10-28, the owner: these headers bigger and bolder - the sections that set RainVoid apart */
  .col.vehicle h4 { color:var(--brand-light); } .col.bike h4 { color:var(--bike-text); } .col.walk h4 { color:var(--walk-text); }
  .col ul { margin:0; padding-left:18px; } .col li { color:var(--ink-dim); font-size:.97rem; line-height:1.45; } .col li + li { margin-top:7px; }
  .col li b { color:var(--ink); font-weight:600; }
  .col li b.fc, .chap li b.fc { color:var(--brand-light); font-weight:700; }
  .col .shot { border-radius:18px; overflow:hidden; border:1px solid #444; background:#000; margin:16px auto 0; max-width:330px; width:100%; flex: 0 0 auto; }   /* 2026-10-28: never squeezed by the card's flex column (the same cut as the story pictures) */
  .col .shot img { width:100%; height:auto; display:block; }
  .col .cap { font-size:.9rem; color:var(--ink-dim); margin:10px 0 6px; text-align:center; }
  .col .m-brief .cap { font-family:"Oswald", sans-serif; font-weight:700; letter-spacing:.09em; text-transform:uppercase; font-size:1.42rem; line-height:1.2; margin:26px 0 12px; padding-bottom:8px; border-bottom:3px solid currentColor; text-align:left; color:var(--ink); }   /* 2026-11-03 item 6: the condensed list's heading in the h4 look it replaces */
  .col.vehicle .m-brief .cap { color:var(--brand-light); } .col.bike .m-brief .cap { color:var(--bike-text); } .col.walk .m-brief .cap { color:var(--walk-text); }
  .walkline { margin:24px auto 0; max-width:62em; padding:14px 20px; border-left:4px solid var(--walk); background:rgba(102,187,106,.08); border-radius:0 var(--radius) var(--radius) 0; }
  .walkline b { color:var(--walk-text); font-family:"Oswald", sans-serif; letter-spacing:.1em; font-size:.8rem; text-transform:uppercase; display:block; margin-bottom:4px; }
  .walkline p { margin:0; color:var(--ink); font-size:1.08rem; }
  .after { padding:30px 0; color:var(--ink-mute); text-align:center; font-size:.95rem; border-top:1px dashed #37474F; }
  @media (max-width: 900px) {
    .hero .wrap, .chaps, .artrow, .cols { grid-template-columns:1fr; }
    .service .wrap { grid-template-columns:1fr auto; gap:16px; }
    .hero .wrap { gap:22px; padding-right:32px; }
    .hero h1 { font-size:2.1rem; }
    .artrow { display:none; }
    .col h3 { display:flex; align-items:center; justify-content:center; gap:12px; }
    .col h3 img { height:34px; width:auto; }
    .conf-card .big { font-size:3.6rem; } .conf-card .claim { font-size:1.15rem; } .conf-card .proof .n { font-size:1.5rem; }
    .service .pct b { font-size:2.4rem; }
  }
  @media (min-width: 901px) { .col h3 img { display:none; } }
.eyebrow.center { display:block; text-align:center; }

/* ===== front page 2026-10-25 second pass ===== */
.where, .data { padding:52px 0; }
.where { background:var(--surface-1, #141414); }
.where h2, .data h2 { text-align:center; max-width:960px; margin:8px auto 26px; }
.where-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.where-grid > div { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px 24px; }
.where-grid h3 { font-size:1.12rem; margin:0 0 8px; }
.where-grid p { margin:0; color:var(--ink-dim); line-height:1.5; }
.data .lead { text-align:center; max-width:860px; margin:0 auto; }
.data a { color:var(--brand-light); }
@media (max-width:900px) { .where-grid { grid-template-columns:1fr; } }

/* ===== front page 2026-10-25 third pass: every picture whole, no bands, three columns alike ===== */
.chap .shot { aspect-ratio:auto; }
.chap .shot img, .col .shot img { width:100%; height:auto; object-fit:unset; display:block; }
.col .shot { aspect-ratio:auto; padding-top:0; background:var(--surface-2); margin:16px auto 0; }
.col.walk { border-color:var(--line); box-shadow:none; }
/* the story and the modes take the hero's width: five 218-px cards at 1920 could not hold a 232-px picture (an auto-centred flex
   item is content-sized and overflowed its card); the pictures size to their card, capped as before */
.story .wrap, .modes .wrap { max-width:var(--maxw-wide); }
.chap .shot { width:100%; max-width:232px; flex: 0 0 auto; }   /* 2026-10-28: the picture box never shrinks (a flex child with overflow hidden was squeezed to the leftover height, cropping every page) - the whole page shows, no black space */
.col .shot { width:100%; max-width:330px; }
/* THE SEE-IT LINKS (the owner 2026-10-25: "make the 'see it' links scroll down to where the 3 mode graphics are touching the top, like
   the bike is visible"): on a wide screen the three columns start 204 px below their row of graphics, whose tallest picture (the
   motorcycle, 185 px in a 170-px box) rises 15 px above the row, so a column anchor lands with the graphics right under the sticky
   nav (65 px); on a phone the row of graphics is hidden and the column itself lands under the nav. */
@media (min-width: 901px) { .col { scroll-margin-top: 286px; } }
@media (max-width: 900px) { .col { scroll-margin-top: 72px; } }
/* THE NAV LINKS LAND UNDER THE STICKY NAV (the owner 2026-10-25: "the for those who served link on the header scrolls the site down to
   half way through the line"): every section a header link points at keeps the nav's 65 px clear, so the service band, the story
   and the modes open with their top edge right under the bar, never under it. */
.service, .story, .modes, .where, .data { scroll-margin-top: 65px; }
/* ===== THE MOBILE LAYOUT (rendering 111, 2026-10-26 — the owner: "a more digestable professional layout with that same text and
   pictures"; "most people will be getting info from the mobile site"): below 640 px every section is one column inside an 18-px
   gutter, nothing wider than the screen; the hero's three mode tiles stay one row (icon, name, See it); the confidence card stacks
   its number over its words; the story's five steps are cards with the picture centred over the text; the three modes stack with
   their icon in the title; the service band and the footer centre. ===== */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .wrap { max-width: 100%; padding: 0 18px; }
  .nav .wrap { height: 56px; gap: 10px; }
  .nav .link { display: none; }
  .nav .btn { padding: 9px 14px; font-size: .9rem; }
  .hero { padding: 26px 0 10px; }
  .hero .wrap { display: block; padding: 0 18px; }
  .hero h1 { font-size: 1.85rem; line-height: 1.12; margin: 8px 0 14px; }
  .hero .lead, .hero p.lead { font-size: 1.05rem; line-height: 1.4; }
  .hero p { font-size: .98rem; line-height: 1.5; }
  .hero .cta, .hero .btns { display: flex; flex-direction: column; gap: 10px; }
  .hero .btn { width: 100%; justify-content: center; text-align: center; padding: 14px 16px; font-size: 1.02rem; }
  .modestrip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 10px; }
  .modestrip a { padding: 10px 6px 12px; text-align: center; }
  .modestrip .ico { height: 40px; }
  .modestrip a.vehicle img { width: 64px; } .modestrip a.bike img { width: 58px; } .modestrip a.walk img { height: 36px; }
  .modestrip .name { font-size: .88rem; line-height: 1.1; }
  .modestrip .sub { display: none; }
  .modestrip .go { font-size: .8rem; margin-top: 6px; }
  .conf-card { padding: 18px 16px 16px; margin-top: 14px; }
  .conf-card .row { display: block; }
  .conf-card .big { font-size: 3.4rem; line-height: 1; text-align: center; margin: 4px 0 6px; }
  .conf-card .claim { font-size: 1.08rem; text-align: center; line-height: 1.3; }
  .conf-card .proof { text-align: center; font-size: .95rem; margin-top: 8px; }
  .conf-card .proof .n { font-size: 1.4rem; }
  .conf-card video { margin-top: 12px; }
  .conf-card .fine { font-size: .84rem; line-height: 1.45; }
  .service { padding: 18px 0; }
  .service .wrap { display: block; text-align: center; }
  .service .pct { margin: 10px 0 0; }
  .service .pct b { font-size: 2.6rem; display: block; line-height: 1; }
  .story { padding: 28px 0 14px; }
  .story h2, .modes h2, .where h2, .data h2 { font-size: 1.45rem; line-height: 1.2; }
  .story .lead { font-size: 1rem; margin-bottom: 16px; }
  .chaps { grid-template-columns: 1fr; gap: 12px; }
  .chap { padding: 14px 14px 16px; }
  .chap .shot { max-width: 250px; }
  .chap h3 { font-size: 1.15rem; }
  .chap li { font-size: .95rem; line-height: 1.45; }
  .story-fine { font-size: .82rem; }
  .modes { padding: 28px 0 18px; }
  .cols { grid-template-columns: 1fr; gap: 14px; }
  .col { padding: 18px 16px 20px; }
  .col h3 { font-size: 1.25rem; }
  .col h4 { font-size: 1.25rem; margin: 20px 0 10px; }
  .col .m-brief .cap { font-size: 1.25rem; margin: 20px 0 10px; }
  .col li { font-size: .95rem; line-height: 1.45; }
  .col .shot { max-width: 300px; }
  .col .cap { font-size: .86rem; }
  .walkline { padding: 12px 14px; }
  .walkline p { font-size: 1rem; }
  .where, .data { padding: 30px 0; }
  .where-grid { gap: 12px; }
  .where-grid > div { padding: 16px 16px 18px; }
  .final { padding: 40px 0; }
  .final h2 { font-size: 1.5rem; }
  .final .btn { width: 100%; justify-content: center; }
  footer, .foot { font-size: .8rem; line-height: 1.5; text-align: center; }
}

/* ===== THE FOLD + THE HOOK LINE + THE PILOT LINE (2026-10-26, the owner on preview m3: "1 yes, 2 yes, 3 yes"). The confidence
   card's measurement paragraphs sit behind one labelled button (site.js) at every width; the qualifiers that keep the number
   honest stay beside it. The hook line tighter. On phones the service band keeps its headline over the 20% OFF row. ===== */
.hero p.lead.big { line-height: 1.25; }
.conf-card .must { color: var(--ink-mute); font-size: .8rem; line-height: 1.45; margin: 8px 0 0; }
.conf-card .m-fold { display: none; }
.conf-card .m-fold.open { display: block; }
.m-more { display: inline-block; margin: 10px 0 0; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--brand-light); font-weight: 600; font-size: .86rem; background: transparent; cursor: pointer; font-family: inherit; }
.m-more:hover { background: rgba(255,255,255,.04); }
@media (max-width: 640px) {
  .service { padding: 14px 0; }
  .service .wrap { display: block; text-align: left; }
  .service h2 { font-size: 1.15rem; margin: 0 0 8px; }
  .service p:not(.eyebrow) { display: none; }
  .service .pct { display: flex; align-items: baseline; gap: 14px; margin: 0; text-align: left; }
  .service .pct b { font-size: 1.9rem; display: inline; }
  .service .pct a { margin: 0; }
}

/* ===== THE CAROUSELS (2026-10-26, the owner on preview m3: "4 ok"; "if they scroll up down keep it rotating as is, if they scroll
   left right, stop it for like 6 seconds then start every 2 again"): on phones the story and the three modes are carousels, the
   mode cards carry their condensed bullets (.m-brief), the step numbers are dropped. site.js adds body.mcar under 640 px. ===== */
.m-brief { display: block; }   /* 2026-11-03, the word-soup audit item 6 (his 'approved'): ONE list per mode - the condensed form on every width; the desktop's long lists retired */
@media (max-width: 640px) {
  body.mcar .hero .btn.ghost { display: none; }
  body.mcar .hero p.lead:not(.big) { font-size: .95rem; line-height: 1.4; }
  body.mcar .hero p.lead.big { font-size: 1.22rem; }
  body.mcar .feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 14px; }
  body.mcar .feat-grid > div { padding: 10px 11px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
  body.mcar .feat-grid b { display: block; color: var(--brand-light); font-weight: 700; font-size: .95rem; line-height: 1.2; margin-bottom: 4px; }
  body.mcar .feat-grid span { display: block; color: var(--ink-dim); font-size: .82rem; line-height: 1.35; }
  body.mcar .modestrip { margin-top: 12px; }
  body.mcar .conf-card { padding: 16px 14px 12px; }
  body.mcar .conf-card .big { font-size: 3rem; margin: 0 0 2px; }
  body.mcar .conf-card .claim { font-size: 1rem; margin: 0; }
  body.mcar .conf-card .proof { font-size: .92rem; margin: 6px 0 0; }
  body.mcar .conf-card video { max-height: 190px; object-fit: cover; margin-top: 10px; border-radius: 10px; }
  body.mcar .service { padding: 14px 0; }
  body.mcar .service .wrap { display: block; text-align: left; }
  body.mcar .service h2 { font-size: 1.15rem; margin: 0 0 8px; }
  body.mcar .service p:not(.eyebrow) { display: none; }
  body.mcar .service .pct { display: flex; align-items: baseline; gap: 14px; margin: 0; text-align: left; }
  body.mcar .service .pct b { font-size: 1.9rem; display: inline; }
  body.mcar .service .pct a { margin: 0; }
  body.mcar .story .lead { font-size: .95rem; margin-bottom: 10px; }
  body.mcar .chaps { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 2px 16px 10px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body.mcar .chaps::-webkit-scrollbar { display: none; }
  body.mcar .chap { flex: 0 0 80vw; scroll-snap-align: start; }
  body.mcar .chap ul { flex: 0 0 auto; }
  body.mcar .chap .k { font-size: .72rem; }
  body.mcar .chap .shot { max-width: 190px; }
  body.mcar .chap h3 { font-size: 1.08rem; margin: 10px 0 4px; }
  body.mcar .chap li { font-size: .9rem; }
  body.mcar .chap li:not(.key) { display: none; }
  body.mcar .chap.open li:not(.key) { display: list-item; }
  body.mcar .m-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 4px 0 0; }
  body.mcar .m-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: var(--line); cursor: pointer; }
  body.mcar .m-dots button.on { background: var(--brand-light); width: 22px; border-radius: 5px; }
  body.mcar .cols { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 2px 16px 10px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body.mcar .cols::-webkit-scrollbar { display: none; }
  body.mcar .cols .col { display: flex; flex: 0 0 80vw; scroll-snap-align: start; }
  body.mcar .col .sub, body.mcar .col h4, body.mcar .col > ul { display: none; }
  body.mcar .col .m-brief { display: block; }
  body.mcar .col .voice { font-size: .95rem; }
  body.mcar .m-brief .cap { font-family: "Oswald", sans-serif; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; font-size: 1.05rem; color: var(--ink); margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 2px solid currentColor; }   /* 2026-10-28: the phone cards carry the same bigger headers */
  body.mcar .m-brief .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
  body.mcar .m-brief .chips span { padding: 5px 9px; border-radius: 8px; background: var(--surface-2); border: 1px solid currentColor; font-weight: 700; font-size: .8rem; line-height: 1.2; }
  body.mcar .m-brief ul { margin: 0; padding-left: 16px; }
  body.mcar .m-brief li { color: var(--ink-dim); font-size: .92rem; line-height: 1.4; }
  body.mcar .m-brief li + li { margin-top: 5px; }
  body.mcar .m-brief li b { color: var(--ink); }
  body.mcar .m-brief li b.fc { color: var(--brand-light); }
  body.mcar .where, body.mcar .data { padding: 22px 0; }
  body.mcar .where h2, body.mcar .data h2 { font-size: 1.25rem; margin-bottom: 10px; }
  body.mcar .where-grid > div { padding: 12px 14px; }
  body.mcar .where-grid p { font-size: .9rem; }
  body.mcar .data .lead { font-size: .92rem; }
  body.mcar .final { padding: 28px 0; }
}
@media (prefers-reduced-motion: reduce) { body.mcar .chaps { scroll-behavior: auto; } }

/* ===== THE MAP ON THE SITE + THE NAV BUTTON + THE THREE OPTIONS (2026-10-26, the owner: "add the map"; the greyed Get the app;
   "make this part bold with bullets"). The where section carries rendering 115's map; the nav's button text is white. ===== */
.nav nav a.btn { color: #fff; }
.where-map { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; max-width: 980px; margin: 0 auto; }
.where-map svg { width: 100%; height: auto; display: block; }
.where-map .state path { fill: var(--brand); fill-opacity: .55; stroke: none; }
.where-map .state path.notyet { fill: var(--brand); fill-opacity: .28; }
.where-map .borders path { stroke: #0f1a2b; stroke-width: 1; fill: none; }
.where-map .transit { fill: var(--gold); stroke: #141618; stroke-width: 1.2; }
.where-map .rides { fill: none; stroke: #CE93D8; stroke-width: 2.2; }
.where-map .city { fill: var(--ink); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: #141618; stroke-width: 3px; stroke-linejoin: round; }
.where-map .legend { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 12px 4px 0; font-size: .9rem; color: var(--ink-dim); }
.where-map .legend span { display: inline-flex; align-items: center; gap: 8px; }
.where-map .sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.where-map .sw.blue { background: var(--brand); opacity: .75; } .where-map .sw.grey { background: #3a4046; }
.where-map .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.where-map .dot.gold { background: var(--gold); } .where-map .dot.purple { border: 2px solid #CE93D8; width: 10px; height: 10px; }
.chap ul.three { margin: 4px 0 0; padding-left: 16px; } .chap ul.three li { margin-top: 2px; } .chap ul.three li b { color: var(--brand-light); }
@media (max-width: 640px) {
  .where-map { padding: 8px; }
  .where-map .city { font-size: 13px; }
  .where-map .legend { font-size: .82rem; gap: 8px 14px; }
}

/* 2026-10-26, the owner: the Plan card shows through the Best call line, then More */
@media (max-width: 640px) { body.mcar .chap li.show { display: list-item; } }
@media (max-width: 640px) { body.mcar .chap ul.three li { display: list-item; } }

/* 2026-10-26, the owner: the hopeful line under the map, bold, its own line */
.where-more { text-align: center; color: var(--ink); font-size: 1.05rem; margin: 14px auto 0; max-width: 46em; }
.where-more b { color: var(--brand-light); }
.where-fine { text-align: center; max-width: 46em; margin: 12px auto 0; }
.where-map .sw.dim { background: var(--brand); opacity: .35; }

/* 2026-10-26, the owner: the Plan card's three options stack as a list on every width (a .three grid rule elsewhere laid them side by side) */
.chap ul.three { display: block; grid-template-columns: none; columns: auto; margin: 4px 0 0; padding-left: 16px; }
.chap ul.three li { display: list-item; margin: 2px 0 0; }

/* the data section's counter sentence behind its button */
.data .m-fold { display: none; } .data .m-fold.open { display: block; }
.data .fold-data { text-align: center; max-width: 46em; margin: 10px auto 0; color: var(--ink-mute); font-size: .9rem; line-height: 1.45; }
.data .m-more { display: block; margin: 12px auto 0; }

/* THE RIDE ROULETTE BAND (2026-10-26, the owner: under the three modes, above where it works; the spinning wheel and the copy only) */
.spin { padding: 48px 0; background: #0f1114; border-top: 1px solid #1f2327; border-bottom: 1px solid #1f2327; }
.spinrow { display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: center; max-width: var(--maxw-wide); }
.wheel img { width: 100%; height: auto; display: block; animation: spinslow 60s linear infinite; }
@keyframes spinslow { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wheel img { animation: none; } }
.spincopy h2 { margin: 6px 0 10px; }
.chap li.rr { display: flex; gap: 10px; align-items: flex-start; list-style: none; margin-left: -18px; }
.chap li.rr .rrw { width: 46px; height: 46px; flex: none; margin-top: 2px; }
@media (max-width: 640px) {
  .spinrow { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .wheel { max-width: 220px; margin: 0 auto; }
  .chap li.rr { text-align: left; }
}

/* desktop band (with the reveal card) vs mobile band (the wheel + the copy), 2026-10-26 */
.spin-d .spinrow { grid-template-columns: 300px 1fr 250px; }
.spinshot { width: 250px; }
.spinshot img { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 0 1px #2a2a2a; }
.spin-m { display: none; }
@media (max-width: 640px) { .spin-d { display: none; } .spin-m { display: block; } }

/* THE COMPACT MOBILE BAND (the owner 2026-10-26: "use the compact one you just made") */
@media (max-width: 640px) {
  .spin-m { padding: 22px 0; }
  .spin-m .spinrow { grid-template-columns: 112px 1fr; gap: 16px; text-align: left; align-items: center; }
  .spin-m .wheel { max-width: 112px; margin: 0; }
  .spin-m .spincopy h2 { font-size: 1.35rem; margin: 2px 0 6px; }
  .spin-m .spincopy .lead { font-size: .95rem; line-height: 1.4; margin: 0; }
  .spin-m .spincopy .fine { display: none; }
}

/* ===== THE STORY FOLD (2026-10-26, the owner's marked-up picture + "put the wait it out under the see more on plan"): on the desktop
   each column shows its key lines, the rest folds behind one See-more row at the SAME height across the five columns (site.js adds
   .fold8/.more8); the Plan column's fold carries the Wait-it-out line and the all-clear picture. The phone keeps its own fold. ===== */
@media (min-width: 641px) {
  .story .chaps { align-items: stretch; }
  .story .chap { display: flex; flex-direction: column; }
  .story .chap > ul { margin-bottom: 0; }
  .story .chap .fold8 { display: none; }
  .story .chap.open8 .fold8 { display: list-item; }
  .story .chap .more8 { margin-top: auto; padding: 10px 14px 0; border: 0; border-top: 1px solid #2f353b; background: transparent; color: var(--brand-light); font: inherit; font-size: .95rem; cursor: pointer; text-align: center; }
  .story .chap .more8::after { content: " \25BE"; } .story .chap.open8 .more8::after { content: " \25B4"; }
}
.chap li.wait b { color: var(--brand-light); }
.chap li.wait .waitshot { margin: 10px 0 4px; width: 100%; max-width: 232px; }

/* the hero's first line (2026-10-26, the owner: "make the text bigger for the rain avoidance planning line"): his sentence, bigger */
.hero .eyebrow { font-size: clamp(.9rem, 1.05vw, 1.02rem); letter-spacing: .08em; line-height: 1.3; margin-bottom: 16px; white-space: nowrap; }
@media (max-width: 900px) { .hero .eyebrow { white-space: normal; } }
@media (max-width: 640px) { body.mcar .hero .eyebrow { font-size: 1rem; letter-spacing: .1em; } }

/* the phone's story carousel (2026-10-27, the owner: "lets make all the see more bottom of the columns align on mobile too"):
   the cards stretch to one height and each More button sits at its card's bottom */
@media (max-width: 640px) {
  body.mcar .chaps { align-items: stretch; }
  body.mcar .chap { display: flex; flex-direction: column; }
  body.mcar .chap > .m-more { margin-top: auto; align-self: flex-start; }
}

/* ===== THE GALLERY (2026-10-28, the owner: "another section, looking separate from the modes, and we could put good looking photos
   there ... have them carousel the same on mobile, and add those 2 photos, along with a couple more good marketing photos"):
   four phone frames in one centred row on the desktop, equal gaps; on phones the same carousel as the story and the modes. ===== */
.gallery { padding: 48px 0 44px; border-top: 1px solid var(--line); background: #0f1114; }
.gallery h2 { text-align: center; margin: 0 auto 26px; }
.gal { display: grid; grid-template-columns: repeat(4, 230px); justify-content: center; gap: 28px; }
.gal .g { min-width: 0; }
.gal .shot { width: auto; margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid #444; background: #000; }
.gal .shot img { width: 100%; height: auto; display: block; }
.gal .cap { font-size: .9rem; color: var(--ink-dim); margin: 10px 0 0; text-align: center; line-height: 1.4; }
@media (max-width: 1080px) { .gal { grid-template-columns: repeat(2, 230px); } }
@media (max-width: 640px) {
  .gallery { padding: 24px 0 18px; }
  .gallery h2 { font-size: 1.35rem; margin-bottom: 14px; }
  body.mcar .gal { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 2px 16px 10px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body.mcar .gal::-webkit-scrollbar { display: none; }
  body.mcar .gal .g { flex: 0 0 64vw; scroll-snap-align: start; }
  body.mcar .gal .cap { font-size: .85rem; }
}