/* pooppy.health — shared stylesheet for all six pages.
   Tokens mirror the app's identity system: the hero/CTA purple is the app's
   own gradient, and the three identity gradients (violet = logging,
   citrus = walks, sunset = away/household) are used as SECTION ACCENTS —
   numerals, rules, chips, borders — never as text-on-gradient, so every
   contrast pairing below is measured against a flat surface.
   Motion lives at the bottom; every animation has a reduced-motion answer. */

@font-face {
  font-family: 'Chewy';
  src: url('/fonts/Chewy-Regular.woff2') format('woff2');
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */

:root {
  color-scheme: light dark;

  --accent: #5856d6;          /* neutral indigo — links, generic chips */
  --hero-a: #612EC7;          /* app hero gradient, measured in-app */
  --hero-b: #291480;

  --bg: #FFFAF7;
  --card: #ffffff;
  --ink: #1c1c1e;
  --muted: rgba(28, 28, 30, 0.62);
  --line: rgba(28, 28, 30, 0.10);
  --chip: rgba(88, 86, 214, 0.10);

  /* Verdict palette (same greens/ambers the app's health verdict uses).
     *-ink variants are the AA-safe text weights; the raw hues are fills. */
  --ok: #34a853;
  --ok-ink: #1f7a3a;
  --ok-tint: rgba(52, 168, 83, 0.12);
  --warn: #f7a531;
  --warn-ink: #8a5200;
  --warn-tint: rgba(247, 165, 49, 0.16);

  /* Per-section identity, defaulted to the app hero pair. */
  --id-a: var(--hero-a);
  --id-b: var(--hero-b);
  --id-ink: var(--accent);
  --id-tint: var(--chip);

  --r-lg: 28px;
  --r-md: 22px;
  --r-sm: 14px;
  --shadow: 0 18px 44px rgba(28, 20, 60, 0.10);
}

/* The hidden attribute must beat every author display rule: the beta form is
   display: grid, so "form.hidden = true" after a signup left it on screen with
   a disabled "Sending…" button under the success line. */
[hidden] { display: none !important; }

[data-id="violet"] {
  --id-a: #C44DF0; --id-b: #5B2EE8;
  --id-ink: #5B2EE8; --id-tint: rgba(122, 60, 232, 0.10);
}
[data-id="citrus"] {
  --id-a: #52E8A0; --id-b: #D8DE3A;
  --id-ink: #1c7a52; --id-tint: rgba(82, 232, 160, 0.16);
}
[data-id="sunset"] {
  --id-a: #E8489B; --id-b: #F2A93B;
  --id-ink: #c02c78; --id-tint: rgba(232, 72, 155, 0.12);
}
[data-id="verdict"] {
  --id-a: #52E8A0; --id-b: #34a853;
  --id-ink: var(--ok-ink); --id-tint: var(--ok-tint);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #8f8ff5;
    --bg: #120D24;
    --card: #1c1633;
    --ink: #f2f2f7;
    --muted: rgba(242, 242, 247, 0.62);
    --line: rgba(242, 242, 247, 0.12);
    --chip: rgba(143, 143, 245, 0.16);
    --ok-ink: #6ede93;
    --ok-tint: rgba(52, 168, 83, 0.18);
    --warn-ink: #f7bf6a;
    --warn-tint: rgba(247, 165, 49, 0.18);
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  }
  [data-id="violet"] { --id-ink: #b89bff; --id-tint: rgba(122, 60, 232, 0.22); }
  [data-id="citrus"] { --id-ink: #6fe3ad; --id-tint: rgba(82, 232, 160, 0.16); }
  [data-id="sunset"] { --id-ink: #ff8fbe; --id-tint: rgba(232, 72, 155, 0.18); }
  [data-id="verdict"] { --id-ink: var(--ok-ink); --id-tint: var(--ok-tint); }
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(60rem 40rem at 0% 0%, #F5F0FF 0%, transparent 55%),
    radial-gradient(50rem 36rem at 100% 10%, #FCF5FC 0%, transparent 55%),
    radial-gradient(55rem 40rem at 15% 100%, #F2F7FF 0%, transparent 55%),
    radial-gradient(48rem 34rem at 100% 95%, #FFF5FA 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  body {
    background:
      radial-gradient(60rem 40rem at 0% 0%, #170F29 0%, transparent 55%),
      radial-gradient(50rem 36rem at 100% 10%, #140D21 0%, transparent 55%),
      radial-gradient(55rem 40rem at 15% 100%, #0F1229 0%, transparent 55%),
      var(--bg);
    background-attachment: fixed;
  }
}

a { color: var(--accent); }
img { max-width: 100%; height: auto; }

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

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--card); color: var(--ink);
  padding: 10px 16px; border-radius: 0 0 12px 0; z-index: 20;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------------ */
/* Header / footer                                                     */
/* ------------------------------------------------------------------ */

.site-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 0;
}
.site-header img { width: 34px; height: 34px; border-radius: 8px; }
.wordmark {
  font-family: 'Chewy', cursive; font-size: 1.5rem;
  color: var(--ink); text-decoration: none;
}
.lang { margin-left: auto; font-size: 0.9rem; font-weight: 600; text-decoration: none; }

footer {
  padding: 8px 0 48px; text-align: center;
  font-size: 0.85rem; color: var(--muted);
}
footer a { margin: 0 10px; }
footer p { margin-top: 18px; }

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
  border-radius: var(--r-lg);
  color: #fff;
  padding: 52px 28px 46px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 36px;
  align-items: center;
}
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none;
}
.hero::before { width: 300px; height: 300px; background: rgba(175, 82, 222, 0.30); top: -110px; left: -70px; }
.hero::after  { width: 260px; height: 260px; background: rgba(88, 86, 214, 0.35); bottom: -100px; right: -60px; }
.hero > * { position: relative; z-index: 1; }

.hero h1 {
  font-family: 'Chewy', cursive; font-weight: 400;
  font-size: clamp(1.95rem, 4.6vw, 3rem);
  line-height: 1.14; letter-spacing: 0.005em;
  margin-bottom: 10px;
}
.hero .kicker {
  font-size: 0.95rem; font-style: italic;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 18px;
}
.hero .sub {
  font-size: 1.12rem; font-weight: 600;
  color: #fff; margin-bottom: 6px;
}
.hero .support {
  font-size: 1rem; color: rgba(255, 255, 255, 0.72);
  margin-bottom: 26px;
}
.hero .note { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); margin-top: 14px; }

.cta {
  display: inline-block; background: #fff; color: var(--hero-a);
  font-weight: 700; text-decoration: none;
  padding: 15px 34px; border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-position 0.4s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28); }
.cta:active { transform: translateY(0); }

.cta-sub {
  display: block; margin-top: 14px;
  font-size: 0.88rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.86); text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  width: fit-content; padding-bottom: 2px;
}
.cta-sub:hover { color: #fff; border-bottom-color: #fff; }

/* Hero visual: rhythm card + the 3D poop anchoring the composition */
.hero-viz { position: relative; }
.hero-icon {
  position: absolute; top: -46px; right: -26px;
  /* Matches sizes="128px" in the markup — keep the two in step or the
     browser picks the wrong srcset candidate. */
  width: 128px; height: 128px; z-index: 2;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
/* The icon lands on the card's top-right corner, which is exactly where
   the verdict badge sits. Reserve the lane rather than trusting the PNG's
   transparent margin to keep the badge readable. */
.hero-viz .dogline { padding-right: 96px; }

.card-light {
  background: #fff; color: #1c1c1e;
  border-radius: var(--r-md); padding: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.dogline { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dogline .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(88, 86, 214, 0.12);
  display: grid; place-items: center; font-size: 1.05rem;
}
.dogline b { font-size: 0.95rem; }
.verdict {
  margin-left: auto; font-size: 0.68rem; font-weight: 700;
  color: #1f7a3a; background: rgba(52, 168, 83, 0.14);
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}

/* Rhythm chart (hero, A1) */
.rhythm { width: 100%; height: auto; display: block; }
.rhythm .band { fill: rgba(88, 86, 214, 0.09); }
.rhythm .rule { stroke: rgba(28, 28, 30, 0.10); stroke-width: 1; }
.rhythm .tick { fill: rgba(28, 28, 30, 0.45); font-size: 9px; font-weight: 700; }
.rhythm .bead { fill: var(--ok); }
.rhythm .bead.soft { fill: var(--warn); }
.chart-legend {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  margin-top: 10px; font-size: 0.68rem; font-weight: 700;
  color: rgba(28, 28, 30, 0.55);
}
.chart-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend .sw { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.chart-legend .sw.soft { background: var(--warn); }

/* ------------------------------------------------------------------ */
/* Beats (sections 1-8)                                                */
/* ------------------------------------------------------------------ */

/* Stagger index, set with a class so no page needs an inline style. */
.i0 { --i: 0; } .i1 { --i: 1; } .i2 { --i: 2; } .i3 { --i: 3; }
.i4 { --i: 4; } .i5 { --i: 5; } .i6 { --i: 6; } .i7 { --i: 7; }

.beats { display: block; }

.beat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px; align-items: center;
  padding: 58px 0;
  border-top: 1px solid var(--line);
}
.beat:first-child { border-top: none; }
.beat:nth-of-type(even) .beat-viz { order: -1; }

.beat-copy .num {
  display: block;
  font-family: 'Chewy', cursive; font-size: 2.3rem; line-height: 1;
  margin-bottom: 6px;
  background: linear-gradient(135deg, var(--id-a), var(--id-b));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.beat-copy h2 {
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  line-height: 1.2; letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.beat-copy .line { font-size: 1.03rem; margin-bottom: 10px; }
.beat-copy .support { font-size: 0.94rem; color: var(--muted); }
.beat-copy .support b { color: var(--id-ink); font-weight: 700; }

/* Visual shell */
.viz {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 22px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  overflow: hidden;
}
.viz::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--id-a), var(--id-b));
}
.viz.plain { background: none; border: none; box-shadow: none; padding: 0; }
.viz.plain::before { display: none; }

.tapchip {
  font-size: 0.74rem; font-weight: 700; color: var(--id-ink);
  background: var(--id-tint); padding: 6px 12px; border-radius: 999px;
}

/* 1 — the four 3D icons, their hero moment */
.icongrid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; width: 100%; align-items: end;
}
.icongrid img { width: 100%; height: auto; display: block; }
@media (max-width: 460px) { .icongrid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* 2 — 14-dot trend strip + signal pill */
.dots { display: grid; grid-template-columns: repeat(7, 20px); gap: 8px; }
.dots span { width: 20px; height: 20px; border-radius: 50%; background: var(--ok); opacity: 0.9; }
.dots span.soft { background: var(--warn); }
.dots span.gap { background: transparent; border: 2px dashed var(--line); }

.signal {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; line-height: 1.35;
  color: var(--warn-ink); background: var(--warn-tint);
  border-radius: var(--r-sm); padding: 9px 13px; text-align: left;
}
.signal .glyph { font-size: 0.95rem; }

/* 3 — prediction rows + bell */
.prow {
  display: flex; align-items: center; gap: 10px;
  background: var(--id-tint);
  border-radius: var(--r-sm); padding: 10px 12px;
  align-self: stretch;
}
.prow + .prow { margin-top: 8px; }
.prow .t { font-size: 0.68rem; font-weight: 700; color: var(--muted); }
.prow .w { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.prow .cue {
  margin-left: auto; font-size: 0.68rem; font-weight: 700; color: #fff;
  background: var(--accent); padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.card-light .prow { background: rgba(88, 86, 214, 0.07); }
.card-light .prow .t { color: rgba(28, 28, 30, 0.55); }

.alarmchip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.74rem; font-weight: 700;
  color: var(--id-ink); background: var(--id-tint);
  padding: 7px 13px; border-radius: 999px;
}

/* 4 — nutrient chips + transition mix bar */
.nutri { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.nutri span { font-size: 0.74rem; font-weight: 700; padding: 6px 11px; border-radius: 999px; }
.n-p { color: #2f6fdb; background: rgba(47, 111, 219, 0.12); }
.n-f { color: #b25c0f; background: rgba(217, 122, 31, 0.16); }
.n-fi { color: #2f7a3d; background: rgba(47, 158, 68, 0.14); }
.n-m { color: #0b7c72; background: rgba(13, 148, 136, 0.14); }
.n-e { color: #92400e; background: rgba(146, 64, 14, 0.13); }
@media (prefers-color-scheme: dark) {
  .n-p { color: #9dbdf5; } .n-f { color: #eda05c; } .n-fi { color: #7fd694; }
  .n-m { color: #56cfc3; } .n-e { color: #dcb28a; }
}

.mix { align-self: stretch; }
.mix .lbl {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; font-weight: 700; color: var(--muted);
  margin-bottom: 6px;
}
.mix .bar {
  height: 14px; border-radius: 999px; overflow: hidden;
  display: flex; background: var(--line);
}
.mix .bar .old { background: rgba(146, 64, 14, 0.45); }
.mix .bar .new { background: linear-gradient(90deg, var(--ok), #6fd48a); }

/* 5 — the vet report card (the designed wow) */
.report {
  align-self: stretch;
  background: #fff; color: #1c1c1e;
  border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 22px 48px rgba(28, 20, 60, 0.22);
  transform: rotate(-1.6deg);
  border: 1px solid rgba(28, 28, 30, 0.08);
}
.report .rhead {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 700;
  padding-bottom: 10px; border-bottom: 1px solid rgba(28, 28, 30, 0.10);
}
/* A real page-1 thumbnail instead of the 📄 emoji — tilted a touch so it
   reads as paper sitting on the card rather than a pasted-in rectangle. */
.report .rhead img.docshot {
  width: 26px; height: 37px; align-self: center; border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 3px 8px rgba(20, 10, 50, 0.18);
  transform: rotate(-4deg);
  background: #fff; flex: none;
}
@media (prefers-reduced-motion: reduce) { .report .rhead img.docshot { transform: none; } }
.report .rrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: rgba(28, 28, 30, 0.62);
  margin-top: 9px;
}
.report .rrow .ck { color: #1f7a3a; font-weight: 800; }
.report .stamp {
  margin-top: 12px; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(28, 28, 30, 0.40);
}

/* 6 — household rows + invite code */
.famrow {
  display: flex; align-items: center; gap: 9px;
  background: var(--id-tint); border-radius: 12px;
  padding: 9px 12px; align-self: stretch;
}
.famrow .t { font-size: 0.82rem; font-weight: 600; }
.famrow .time { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.byline { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.byline .ini {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--id-tint); color: var(--id-ink);
  font-size: 0.62rem; font-weight: 800;
  display: grid; place-items: center;
}
.byline .nm { font-size: 0.72rem; color: var(--muted); }
.codecard {
  align-self: stretch; text-align: center;
  background: linear-gradient(135deg, var(--id-a), var(--id-b));
  color: #fff; border-radius: 12px; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem; letter-spacing: 0.04em;
}
.codecard small {
  display: block; font-family: inherit; opacity: 0.75;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px;
}
.awaychip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.74rem; font-weight: 700;
  color: var(--id-ink); background: var(--id-tint);
  padding: 7px 13px; border-radius: 999px;
}

/* 7 — walk route */
.walkdemo { position: relative; width: 220px; height: 130px; }
.walkdemo svg.route { position: absolute; inset: 0; width: 100%; height: 100%; }
.walkdemo .pup {
  position: absolute; top: 6px; right: 20px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--id-ink);
  display: grid; place-items: center; font-size: 1.25rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.walkdemo .walker { position: absolute; bottom: 0; left: 4px; width: 34px; height: 34px; color: var(--muted); }
.walkstats {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.walkstats span {
  font-size: 0.72rem; font-weight: 700;
  color: var(--id-ink); background: var(--id-tint);
  padding: 6px 11px; border-radius: 999px;
}

/* 8 — privacy */
.lockviz { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lockviz .lock {
  width: 84px; height: 84px; border-radius: 26px;
  display: grid; place-items: center; font-size: 2.4rem;
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
  color: #fff;
  box-shadow: 0 16px 34px rgba(40, 20, 110, 0.30);
}
.lockviz .glyphs { display: flex; gap: 14px; }
.lockviz .glyphs span {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.15rem;
  background: var(--chip);
}

/* ------------------------------------------------------------------ */
/* Section 9 — beta offer                                              */
/* ------------------------------------------------------------------ */

.beta {
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
  border-radius: var(--r-lg); color: #fff;
  padding: 52px 26px 46px; text-align: center;
  margin: 56px 0;
  position: relative; overflow: hidden;
}
.beta::before {
  content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%;
  background: rgba(175, 82, 222, 0.32); filter: blur(70px); top: -100px; right: -70px;
  pointer-events: none;
}
.beta > * { position: relative; z-index: 1; }
.beta h2 {
  font-family: 'Chewy', cursive; font-weight: 400;
  font-size: clamp(1.75rem, 4.4vw, 2.4rem); margin-bottom: 10px;
}
.beta .body { color: rgba(255, 255, 255, 0.82); max-width: 34rem; margin: 0 auto 18px; }
.beta .nudge {
  color: rgba(255, 255, 255, 0.70); font-size: 0.92rem;
  max-width: 34rem; margin: 0 auto 22px;
}

.counter {
  /* gap, not a literal space: the label is a separate flex item and flex
     layout drops the whitespace between items, so it read '97lifetime'. */
  display: inline-flex; align-items: baseline; gap: 0.3em;
  font-weight: 800; font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px; padding: 8px 18px;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.counter .n { font-variant-numeric: tabular-nums; }

/* Two-column grid: the name pair shares a row, email and the button each
   take a full one. The honeypot is out of flow (absolute), so it holds no
   cell. */
#beta-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-width: 480px; margin: 0 auto;
}
#beta-form input:not(.hp) {
  font: inherit; padding: 14px 16px; border-radius: var(--r-sm); border: none;
  min-width: 0; width: 100%; background: #fff; color: #1c1c1e;
}
#beta-form input[type="email"], #beta-form button { grid-column: 1 / -1; }
#beta-form button {
  font: inherit; font-weight: 700; padding: 14px 26px;
  border-radius: var(--r-sm); border: none; cursor: pointer;
  background: #fff; color: var(--hero-a);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20);
}
#beta-form button:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.26); }
#beta-form button:active { transform: translateY(0); }
#beta-form button:disabled { opacity: 0.7; cursor: default; transform: none; box-shadow: none; }
#beta-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.msgline {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 2.2em; margin-top: 12px;
}
#beta-msg { font-weight: 600; }
#beta-msg.ok { color: #b5f2c8; }
#beta-msg.error { color: #ffc4be; }
.dropicon { width: 42px; height: 42px; }

.fine, .consent {
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.58);
  max-width: 34rem; margin: 10px auto 0;
}
.consent a { color: rgba(255, 255, 255, 0.85); }

/* Exhausted state: every scarcity affordance leaves the page. */
.beta.exhausted .counter,
.beta.exhausted .nudge,
.beta.exhausted .fine { display: none; }

/* ------------------------------------------------------------------ */
/* Cookie bar. Google Analytics loads only after Accept; the two buttons  */
/* are deliberately identical — declining must be as easy as accepting.   */
/* ------------------------------------------------------------------ */

.cookie-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
  margin: 0 auto; max-width: 640px;
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-radius: var(--r-sm);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 0.85rem; line-height: 1.45;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { flex: 1 1 300px; margin: 0; }
.cookie-actions { display: flex; gap: 8px; margin-left: auto; }
.cookie-actions button {
  font: inherit; font-weight: 600; padding: 8px 16px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink);
}
.cookie-actions button:hover { background: var(--chip); }

/* ------------------------------------------------------------------ */
/* Document pages (privacy, invite)                                    */
/* ------------------------------------------------------------------ */

.doc { max-width: 720px; margin: 0 auto; padding: 0 20px 64px; }
.doc h1 { font-size: 1.75rem; margin-bottom: 0.2em; letter-spacing: -0.02em; }
.doc h2 { font-size: 1.15rem; margin-top: 1.8em; margin-bottom: 0.3em; }
.doc p, .doc ul, .doc ol { margin-bottom: 1em; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-bottom: 0.5em; }
.doc .muted { color: var(--muted); font-size: 0.9rem; }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; background: var(--chip);
  padding: 2px 6px; border-radius: 6px;
}
.doc .steps {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px 24px 6px; margin: 1.2em 0;
  box-shadow: var(--shadow);
}
.doc .steps ol { margin-bottom: 0; }
.home {
  display: inline-flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
}
.home img { width: 34px; height: 34px; border-radius: 8px; }
.home span { font-family: 'Chewy', cursive; font-size: 1.5rem; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr; text-align: center;
    padding: 46px 22px 40px; gap: 30px;
  }
  .cta-sub { margin-left: auto; margin-right: auto; }
  .hero-viz { max-width: 400px; margin: 0 auto; width: 100%; }
  .hero-icon { top: -36px; right: -14px; width: 96px; height: 96px; }
  .hero-viz .dogline { padding-right: 72px; }
  .beat {
    grid-template-columns: 1fr; gap: 26px; padding: 46px 0;
  }
  .beat:nth-of-type(even) .beat-viz { order: 0; }
}

@media (max-width: 420px) {
  .dots { grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .dots span { width: 100%; aspect-ratio: 1; height: auto; }
}

/* ------------------------------------------------------------------ */
/* Motion (A1–A6). Every rule here has a reduced-motion answer.         */
/* ------------------------------------------------------------------ */

/* A2 — section reveals. Gated on .js-motion so a scriptless browser (and
   the split second before motion.js runs) never hides content. */
.js-motion .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}
.js-motion .reveal.in { opacity: 1; transform: none; will-change: auto; }

/* A3 — the 3D icons breathe. Paused until their section is on screen. */
@keyframes floaty {
  from { transform: translateY(-4px); }
  to   { transform: translateY(4px); }
}
.floaty {
  animation: floaty 3.4s ease-in-out infinite alternate;
  animation-play-state: paused;
  animation-delay: calc(var(--i, 0) * -0.7s);
}
.floaty.animate { animation-play-state: running; }

/* Hero icon parallax rides a wrapper so it never fights the float. */
.hero-icon { transform: translateY(var(--py, 0px)); transition: transform 0.1s linear; }

/* A1 — the rhythm chart ships FINAL. motion.js rewinds it via WAAPI. */
.rhythm .bead { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal { transform: none; transition: opacity 0.3s ease; transition-delay: 0s; }
  .js-motion .reveal.in { transform: none; }
  .floaty { animation: none; }
  .hero-icon { transform: none; transition: none; }
  .cta, #beta-form button { transition: none; }
  .cta:hover, #beta-form button:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}