/* ============================================================
   WeatherWindow.AI — Redesign 2 · site.css
   Reusable component system: nav · hero + instrument console ·
   instrument strip · trust · section primitives · origin ·
   problem · engine · steps · showcase · features · samples ·
   range · report · pricing · faq · closing CTA · footer.
   ============================================================ */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--paper); font-weight: 500; }
p { margin: 0; }
::selection { background: var(--brass); color: var(--on-brass); }

/* Page atmosphere: deep ocean gradient + faint warm horizon glow */
.page-atmos {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, #0c2340 0%, rgba(12,35,64,0) 55%),
    radial-gradient(90% 60% at 85% 8%, rgba(217,159,82,.10) 0%, rgba(217,159,82,0) 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-abyss) 100%);
}
.page-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ---------- Shared layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.sec { padding-block: var(--sec-pad); position: relative; scroll-margin-top: 130px; }
.sec-band {
  background:
    linear-gradient(180deg, rgba(10,30,51,0) 0%, var(--band) 12%, var(--band) 88%, rgba(10,30,51,0) 100%);
}
.sec-band::before, .sec-band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}
.sec-band::before { top: 0; } .sec-band::after { bottom: 0; }

/* Light "tan" section canvas — alternates with the dark ink canvas so the
   page reads dark/light/dark down the scroll. Ported from website-improved
   (v1) .paper: grid-ruled chart-paper texture + a cascaded dark text color.
   Only components that set an explicit (dark-canvas) color need a
   .sec-tan override below — everything else inherits this color. */
.sec-tan {
  background:
    linear-gradient(0deg, var(--tan-grid) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, var(--tan-grid) 1px, transparent 1px) 0 0 / 56px 100%,
    var(--tan);
  color: var(--tan-text);
}
.sec-tan .sec-head { color: var(--tan-text); }
.sec-tan .sec-lede { color: var(--tan-dim); }
.sec-tan .faq-more { color: var(--tan-dim); }
.sec-tan .link-brass { color: var(--brass-deep); }
.sec-tan .link-brass:hover { border-color: var(--brass-deep); }

/* ---------- Editorial section heads ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brass);
  margin: 0 0 1.2rem;
}
.eyebrow::before {
  content: ""; width: 1.6rem; height: 1px; background: var(--brass); opacity: .8;
}
.eyebrow.is-centered { justify-content: center; }

.sec-head {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 80;
  font-weight: 400;
  color: var(--paper);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  max-width: 18ch;
  margin-inline: auto;
  text-align: center;
}
.sec-head.is-wide { max-width: 24ch; }
.sec-lede {
  margin-top: 1.5rem; max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  color: var(--dim); font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.7;
}
.hl-brass { color: var(--brass-bright); }
.hl-serif-i { font-style: italic; }

/* ---------- Buttons ---------- */
.btn {
  --_pad: .82rem 1.5rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: var(--_pad); border-radius: var(--r);
  font-family: var(--sans); font-size: .95rem; font-weight: 600; line-height: 1;
  letter-spacing: .005em; cursor: pointer; border: 1px solid transparent;
  transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary {
  background: linear-gradient(180deg, var(--brass-bright), var(--brass));
  color: var(--on-brass); border-color: var(--brass-deep);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 10px 30px -12px rgba(217,159,82,.6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 16px 40px -12px rgba(217,159,82,.7); }
.btn-ghost {
  background: rgba(255,255,255,.02); color: var(--paper); border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--brass-hair); background: var(--brass-wash); transform: translateY(-2px); }
.btn-lg { --_pad: 1rem 1.9rem; font-size: 1rem; }
.link-brass {
  color: var(--brass-bright); font-weight: 600;
  border-bottom: 1px solid var(--brass-hair); transition: border-color .2s;
}
.link-brass:hover { border-color: var(--brass-bright); }

/* ---------- Reveal motion ----------
   Content is fully visible by default. Only when JS is present
   (html.js) do we hide-then-animate — so no-JS, crawlers, and
   static full-page renders always show complete content. */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal[data-delay="1"] { transition-delay: .08s; }
html.js .reveal[data-delay="2"] { transition-delay: .16s; }
html.js .reveal[data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.site-nav.is-stuck {
  background: rgba(6,18,31,.94);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
/* Row min-content budget (8 links since 2026-07-10): the 80px brand (361px,
   pinned to the original site's size) + 8 nowrap links + Sign in + Start free
   must stay under the --wrap: 1200px cap. The gap/font values below reclaim
   ~93px (measured live: min-content 1279px -> 1186px) — see the nav-collapse
   comment in sections.css for the fit points they were measured against. */
.nav-inner { display: flex; align-items: center; gap: 1rem; padding-block: 1.05rem; }
.brand { flex-shrink: 0; }
.brand img { height: 80px; width: auto; }
.nav-links { display: flex; gap: 1rem; margin-left: 2.5rem; list-style: none; padding: 0; }
.nav-links a {
  font-size: .85rem; color: var(--dim); font-weight: 500; letter-spacing: .01em;
  position: relative; padding-block: .3rem; transition: color .2s;
  white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--brass); transition: right .25s ease;
}
.nav-links a:hover { color: var(--paper); }
.nav-links a:hover::after { right: 0; }
.nav-cta { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.nav-signin { font-size: .9rem; font-weight: 600; color: var(--paper); padding: .5rem .3rem; white-space: nowrap; }
.nav-signin:hover { color: var(--brass-bright); }
.nav-toggle { display: none; flex-shrink: 0; background: none; border: 1px solid var(--line-2); border-radius: var(--r); padding: .5rem; cursor: pointer; }
.nav-toggle svg { width: 20px; height: 20px; stroke: var(--paper); flex-shrink: 0; }
/* DESIGN_SYSTEM.md §3.1.10 — the 44px touch floor. The hamburger measured
   38x38 (.5rem padding + 20px svg + 1px border); grown via min-* so the icon
   itself stays 20px. */
@media (pointer: coarse) {
  .nav-toggle {
    min-height: 44px; min-width: 44px;
    align-items: center; justify-content: center;
  }
}

/* ============================================================
   HERO — cinematic ocean canvas + instrument console
   ============================================================ */
.hero { position: relative; padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); overflow: hidden; }
.hero-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-lines { position: absolute; inset: -10% -5% 0 -5%; width: 110%; height: 110%; opacity: .5; }
.hero-lines path { fill: none; stroke: var(--line-2); stroke-width: 1; }
.hero-lines .lat { stroke: rgba(217,159,82,.14); }
.hero-rose {
  position: absolute; right: -12%; top: 8%; width: min(58vw, 720px); aspect-ratio: 1;
  opacity: .16; color: var(--brass); pointer-events: none;
  animation: rose-spin 240s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .hero-rose { animation: none; } }
@keyframes rose-spin { to { transform: rotate(360deg); } }
.hero-glow {
  position: absolute; left: 50%; bottom: -30%; width: 90%; height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 50%, rgba(217,159,82,.16), rgba(217,159,82,0) 70%);
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--brass);
  margin-bottom: 1.6rem;
}
.hero-kicker .tick { width: 8px; height: 8px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 12px var(--brass); }
.hero-eyebrow {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--brass);
  margin-bottom: 1.6rem;
}
.hero-title {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  font-weight: 380;
  color: var(--paper);
  font-size: clamp(2.7rem, 6.4vw, 5.1rem);
  line-height: .98; letter-spacing: -.02em;
  margin-bottom: 1.6rem;
}
.hero-title .go { color: var(--go); }
.hero-title .wait { color: var(--brass-bright); }
.hero-deck {
  max-width: 46ch; color: var(--dim);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.65; margin-bottom: 1.2rem;
}
.hero-deck strong { color: inherit; font-weight: 600; }
.hero-sub {
  max-width: 52ch; color: var(--mute); font-size: .96rem; line-height: 1.6; margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.microcopy { margin-top: .4rem; font-size: .8rem; color: var(--mute); }
.microcopy-link { color: var(--dim); border-bottom: 1px solid var(--line-2); }

/* ----- Instrument console (live verdict readout) ----- */
.console {
  position: relative;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg), var(--inset-hi);
  padding: 1.4rem;
}
.console::before {
  /* brass bezel line */
  content: ""; position: absolute; inset: 6px; border-radius: calc(var(--r-lg) - 4px);
  border: 1px solid var(--brass-hair); pointer-events: none;
}
.console-top {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mute); padding: .1rem .3rem .9rem; border-bottom: 1px solid var(--line);
  margin-bottom: 1.1rem;
}
.console-top .live { display: inline-flex; align-items: center; gap: .5em; color: var(--brass); }
.console-top .live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--go); box-shadow: 0 0 8px var(--go); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.console-screen { transition: opacity .4s ease; }
.console-screen.is-swapping { opacity: 0; }
.vbadge { display: inline-flex; align-items: center; gap: .6rem; padding: .4rem .8rem .4rem .5rem; border-radius: var(--r-pill); border: 1px solid currentColor; margin-bottom: 1rem; }
.vbadge .glyph { font-size: 1rem; line-height: 1; }
.vbadge .word { font-family: var(--mono); font-weight: 600; font-size: .82rem; letter-spacing: .12em; }
.console-headline {
  font-family: var(--serif); font-variation-settings: 'opsz' 40; font-weight: 450;
  color: var(--paper); font-size: 1.24rem; line-height: 1.28; margin-bottom: .7rem;
  min-height: 2.5em;
}
.console-reason { color: var(--dim); font-size: .92rem; line-height: 1.5; margin-bottom: 1.2rem; min-height: 4.3em; }
.console-dials { display: grid; grid-template-columns: repeat(3, 1fr); gap: .1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.dial { text-align: left; padding-right: .6rem; }
.dial + .dial { border-left: 1px solid var(--line); padding-left: .8rem; }
.dial .lbl { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: .35rem; }
.dial .val { font-family: var(--mono); font-weight: 600; font-size: .96rem; color: var(--cyan); font-variant-numeric: tabular-nums; }
.console-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.2rem; }
.console-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--line-3); cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.console-dots button.active { background: var(--brass); transform: scale(1.25); }
/* DESIGN_SYSTEM.md §3.1.10 — the 44px touch floor. An 8px dot is the right
   VISUAL weight, so the painted dot is left alone and a transparent ::after
   overlay carries the tap target instead. The container gap widens to 1rem
   so adjacent hit areas tile (24px wide, 24px centre-to-centre) rather than
   overlapping — a mis-tap must not land on a neighbouring dot. Swiping the
   card remains the primary gesture (site.js addSwipe). */
@media (pointer: coarse) {
  .console-dots { gap: 1rem; }
  .console-dots button { position: relative; }
  .console-dots button::after {
    content: "";
    position: absolute;
    inset: -18px -8px;
  }
}

/* verdict color themes (badge borders/glyph) */
.v-go    { color: var(--go); }
.v-caution { color: var(--caution); }
.v-marginal { color: var(--marginal); }
.v-nogo  { color: var(--nogo); }
.v-divert{ color: var(--divert); }
/* Light-canvas variants. The base hues are tuned to pop on the dark ink
   canvas and lose contrast on tan; the --*-deep set is the same hue darkened
   for light backgrounds (tokens.css). Mirrors the .sec-tan .vchip treatment
   in sections.css. Added when #range moved to the tan canvas (2026-08-07). */
.sec-tan .v-go       { color: var(--go-deep); }
.sec-tan .v-caution  { color: var(--caution-deep); }
.sec-tan .v-marginal { color: var(--marginal-deep); }
.sec-tan .v-nogo     { color: var(--nogo-deep); }
.sec-tan .v-divert   { color: var(--divert-deep); }

/* ============================================================
   INSTRUMENT STRIP (meta readout)
   ============================================================ */
.istrip {
  border-block: 1px solid var(--line); background: rgba(4,14,26,.4);
}
/* Columns are sized to their own content and the leftover width is distributed
   equally between them, so every gutter is identical (Jon, 2026-07-30 — the
   proportional fr tracks that preceded this looked ragged, because each cell
   left-aligns its text and a wide track holding short content opened a visibly
   bigger hole than a narrow one). Equal minmax(0, 1fr) shares cannot hold these
   readouts either: they are nowrap and unequal in length, so the long ones spill
   into the neighbouring column at any viewport width.
   The 7-across row is confined to >=1301px by the tablet-landscape breakpoint in
   sections.css; 1001-1300px falls back to 3 columns, <=1000px to 3, <=720px to 2. */
.istrip-inner {
  display: grid;
  grid-template-columns: repeat(7, max-content);
  justify-content: space-between;
  column-gap: 1.5rem;
}
/* Horizontal padding moves out to column-gap so the gutters are uniform and the
   first/last cells sit flush with the .wrap edges. */
.istrip-item { padding: 1.15rem 0; }
.istrip-item .l { display: block; font-family: var(--serif); font-weight: 600; font-size: 0.78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-bright); margin-bottom: .45rem; }
.istrip-item .v { font-family: var(--mono); font-size: .9rem; font-weight: 600; color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.istrip-item .v .u { color: var(--brass); }

/* ============================================================
   TRUST
   ============================================================ */
.trust { text-align: center; }
.logo-band {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  margin-top: 2.6rem;
}
.logo-band .tier-label {
  flex-basis: 100%; font-family: var(--serif); font-weight: 600; font-size: 0.98rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--brass-bright); margin: 1.7rem 0 .55rem;
}
.logo {
  font-family: var(--mono); font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--dim); padding: .5rem 1rem; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: rgba(255,255,255,.015); transition: border-color .2s, color .2s;
}
.logo:hover { color: var(--paper); border-color: var(--brass-hair); }
/* --mute fails AA on --ink at this size (4.15:1); --dim clears it at 7.03:1. */
.trust-note { margin-top: 2.2rem; font-size: .82rem; color: var(--dim); max-width: 70ch; margin-inline: auto; }

/* ============================================================
   PRELAUNCH MODE — visibility switching (html.prelaunch, set by
   Phase 4). Sections/CTAs tagged .prelaunch-only or .launch-only
   toggle with the flag; absent the flag, launch-mode content shows.
   ============================================================ */
html:not(.prelaunch) .prelaunch-only { display: none !important; }
html.prelaunch .launch-only { display: none !important; }

/* ============================================================
   WAITLIST — prelaunch email capture form
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* The waitlist form now lives inside the closing CTA rather than its own section,
   so it carries the anchor offset .sec would otherwise have supplied. */
#waitlist { scroll-margin-top: 130px; }
.waitlist-form {
  display: flex; flex-direction: column; gap: .9rem;
  margin-top: 1.8rem; max-width: 30rem; margin-inline: auto;
}
.waitlist-form input[type="email"] {
  padding: .82rem 1rem; border-radius: var(--r); border: 1px solid var(--line-2);
  background: rgba(255,255,255,.02); color: var(--paper); font-family: var(--sans);
  font-size: .95rem;
}
.sec-tan .waitlist-form input[type="email"] {
  background: var(--tan-2); border-color: var(--tan-border); color: var(--tan-text);
}
.waitlist-form input[type="email"]:focus { outline: none; border-color: var(--brass-hair); }
.waitlist-consent {
  display: flex; gap: .6rem; align-items: flex-start; text-align: left;
  font-size: .82rem; color: var(--dim);
}
.sec-tan .waitlist-consent { color: var(--tan-dim); }
.waitlist-consent input { margin-top: .2rem; }
/* The consent checkbox is `required`, so it gates signup — and at the UA
   default 13x13 it was the smallest control on the page. 24px is the WCAG
   2.5.8 minimum for an inline form control (the 44px floor applies to
   buttons; a checkbox inside a tappable <label> inherits the label's larger
   area for activation). */
@media (pointer: coarse) {
  .waitlist-consent input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 0;
  }
}
.waitlist-form .btn { align-self: center; }
/* `.waitlist-form` above sets `display: flex`, which is author-level and so
   outranks the UA stylesheet's `[hidden] { display: none }`. Without this rule
   the success path's `form.hidden = true` hides nothing: the submitted email
   stays in the box and the disabled "Joining…" button stays on screen, which
   is indistinguishable from a failed submit. Must stay after the rule above —
   equal specificity means source order decides. */
.waitlist-form[hidden] { display: none; }
/* Submit feedback. Error-only today, so it carries the --danger family; the
   success case is the .waitlist-done paragraph, not this line.
   Scoped through .waitlist-form deliberately: the form sits inside the closing
   CTA, whose `.closing p { color: var(--dim); font-size: 1.1rem; margin: … }`
   is specificity 0-1-1 and outranks a bare `.waitlist-status`. Unscoped, the
   error rendered blue-grey at body size with the section's wide auto margins
   instead of red and tight under the button. */
.waitlist-form .waitlist-status {
  margin: 0; max-width: none; text-align: left; font-size: .85rem;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--r);
  padding: .6rem .8rem;
}
.waitlist-done { margin-top: 1.8rem; color: var(--dim); }
.waitlist-done strong { color: var(--paper); }
.sec-tan .waitlist-done { color: var(--tan-dim); }
.sec-tan .waitlist-done strong { color: var(--tan-text); }
/* The confirmation takes focus on success so it is announced rather than only
   painted; it is not otherwise an interactive control, so suppress the ring. */
.waitlist-done:focus { outline: none; }
/* Honeypot field: off-screen, never visible or focusable by a human. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* --- hero waitlist capture ---------------------------------------------
   The compact variant that lives in the hero. Same form, same handler as the
   closing one; the differences are all layout. Left-aligned (the closing form
   is centred inside a centred section) and the email + button sit on one row
   so the capture reads as a single control rather than a stacked form
   competing with the H1 above it. Tokens only. */
.hero-capture { margin-bottom: 1.6rem; }
.waitlist-form--inline {
  margin-top: 1.4rem; margin-inline: 0; max-width: 34rem; gap: .7rem;
}
.waitlist-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.waitlist-row input[type="email"] { flex: 1 1 15rem; min-width: 0; }
/* `.waitlist-form .btn { align-self: center }` centres the closing form's
   button under its stacked column. In the row layout that shrinks the button
   to less than the input's height and floats it off the baseline. */
.waitlist-form--inline .waitlist-row .btn { align-self: stretch; white-space: nowrap; }
.waitlist-form--inline .waitlist-consent { font-size: .78rem; }
.hero-capture-meta {
  margin-top: .7rem; font-size: .8rem; color: var(--mute); font-family: var(--mono);
}
.hero-capture .waitlist-done { margin-top: 1.2rem; max-width: 34rem; }
@media (max-width: 560px) {
  /* Below this the two-up row leaves the input too narrow to read a typed
     address in, so it stacks — and the button goes full-bleed rather than
     sitting orphaned at one edge.
     The flex reset is load-bearing: flex-basis resolves against the MAIN axis,
     so the row's `flex: 1 1 15rem` (a width there) is reinterpreted as a
     240px HEIGHT the instant the direction flips to column. */
  .waitlist-row { flex-direction: column; }
  .waitlist-row input[type="email"] { flex: 0 0 auto; }
  .waitlist-form--inline .waitlist-row .btn { width: 100%; }
}
/* --- end hero waitlist capture --- */