/* ================================================================
   dips — bold, friendly, real.
   Type: Times New Roman (display + italic accents) · Satoshi (body).
   Story: 6 scenes. Each one a different colour-energy.
   The horizon line is the through-line — it evolves scene to scene.
   ================================================================ */

/* ---------- WEBFONTS (local — Red Hat Display, hero v2 headings + UI) ---------- */
@font-face{font-family:'Red Hat Display';src:url('fonts/RedHatDisplay-VariableFont_wght.ttf') format('truetype');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Red Hat Display';src:url('fonts/RedHatDisplay-Italic-VariableFont_wght.ttf') format('truetype');font-weight:300 900;font-style:italic;font-display:swap}

/* ---------- TOKENS ---------- */
:root {
  /* neutrals */
  /* PALETTE REBUILD — Jewel-warm (amethyst · garnet · amber on warm paper). Conditions/next sections still on the old hues. */
  --bg:       #FAF5EC;   /* warm paper page */
  --paper:    #FAF5EC;   /* warm paper page */
  --cream:    #F0E6D6;   /* warm surface (cards) */
  --ink:      #1A1A3F;   /* deep ink — 15.3:1 on paper */
  --ink-soft: #3A3550;
  --ink-faint:#5C5347;   /* warm taupe — 6.95:1 on paper, clears WCAG AA small text */
  --line:     #E7DBC7;   /* warm hairline */

  /* dusk / sunset scheme (ported from sandbox-colours.html) */
  --plum:#8E2070; --indigo:#20204E; --rose:#D41E91; --indigo-deep:#20204E; --hero-cream:#F0E6D6;
  --magenta:#B23E6B; --amethyst:#5E3D80;   /* Jewel garnet (founder card) + amethyst (ticker) */
  --rust:#94284E; --rust-soft:#A53B5E; --lavender:#E2DBEA; --periwinkle:#E2E3EF; --brown:#4A1828;   /* rust/rust-soft = deep-rose readable text for "how dips works"; brown = deep wine, the tonal text on pink */

  /* raw palette — bold app colours */
  --orange:    #BC4F2B;   /* cinnabar — brand orange (buttons + ticker, white text); carries light text and works as accent */
  --blue:      #2E6FF2;
  --purple:    #9D4EDD;   /* violet — pulled off blue so AuDHD reads clearly purple */
  --red:       #F23052;
  --teal:      #15BDB0;
  --teal-deep: #0C8B83;
  --pink:      #E92B8F;   /* hot pink — the single hormonal colour */
  --green:     #2FB573;
  --yellow:    #FFC72E;

  /* condition = colour (the meaning system) */
  --adhd:    var(--orange);
  --autism:  var(--blue);
  --audhd:   var(--purple);
  --bipolar: var(--ink);
  --period:  var(--red);
  --pmdd:    var(--teal);
  --peri:    var(--pink);
  --hrt:     var(--green);
  --endo:    var(--yellow);
  --pcos:    var(--teal-deep);

  /* brand accents */
  --accent: var(--orange);          /* coral — the warm brand accent (retired purple) */
  --accent-2: var(--teal-deep);     /* teal — the calm/secondary accent */
  --coral:  var(--orange);
  --orange-ink: var(--coral);       /* coral everywhere (the deepened brown-orange is retired) */
  --violet: var(--purple);

  /* condition TEXT tier — "one colour, two values": each condition hue, deepened
     so it's legible as TEXT on white (the raw tokens above are display-only and
     fail WCAG on white). Use wherever a condition is NAMED in type. */
  --adhd-ink:    #E0402E;   /* dusk accent (matches --orange) */
  --autism-ink:  #2755B6;
  --audhd-ink:   #5E47BF;
  --bipolar-ink: #5A5566;
  --period-ink:  #C62828;   /* deep red, a touch brighter — shared by the hero strike & 01 Menstruation */
  --pmdd-ink:    #158D87;
  --peri-ink:    #BE588A;
  --hrt-ink:     #28885B;
  --endo-ink:    #8A6B12;   /* darkened further — raw + chip yellow both fail */
  --pcos-ink:    #0F6966;

  /* state + focus (all text-safe on white) */
  --focus:         var(--ink);        /* focus ring — ink; raw orange fails 3:1 */
  --state-success: var(--hrt-ink);
  --state-error:   var(--period-ink);

  /* fonts */
  --display: 'Newsreader', Georgia, 'Times New Roman', serif;   /* trying: Newsreader headings (literary serif, real weights + italic) */
  --body:    'Lexend', system-ui, -apple-system, sans-serif;     /* readability-optimized body/subtext */
  --serif:   'Newsreader', Georgia, serif;   /* real-italic emphasis accents */
  --rhd:     'Red Hat Display', system-ui, sans-serif;   /* hero v2 — headings + nav + UI */

  /* easings */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-anticipate: cubic-bezier(0.68, -0.5, 0.32, 1.5);

  /* ---- GRID SYSTEM ---- */
  --grid-max: 1180px;                        /* content container — unified with the body sections' 1180 spine */
  --grid-edge: clamp(1.25rem, 4vw, 2.5rem);  /* outer margin (matches the scene gutter) */
  --grid-gutter: clamp(1rem, 1.8vw, 1.5rem); /* 16–24px column gap */
  --grid-cols: 12;

  /* ---- TYPE SCALE (Times display · Satoshi text) ---- */
  --fs-display: clamp(2.75rem, 7vw, 6.5rem);  /* hero hook only */
  --fs-h1:      clamp(2.1rem, 4.4vw, 3.9rem); /* section titles */
  --fs-h2:      clamp(1.5rem, 2.4vw, 2.1rem); /* sub-headings */
  --fs-lead:    clamp(1.15rem, 1.5vw, 1.4rem);/* intros / ledes */
  --fs-body:    1.0625rem;                    /* 17px body */
  --fs-caption: 0.75rem;                      /* labels / eyebrows */

  /* ---- SPACING SCALE (one rhythm everywhere) ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --sp-section: clamp(5.5rem, 13vh, 9.5rem);   /* lifted for a calmer, airier page-wide rhythm (~90→~117 at laptop height); every section gap grows together */
  --sp-head: 2rem;              /* heading → its content: one consistent breathing gap, everywhere */
}

/* ---------- DESIGN GRID OVERLAY (toggle with the "g" key) ---------- */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
body.show-grid .grid-overlay { opacity: 1; }
.grid-overlay .gcols {
  max-width: var(--grid-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--grid-edge);
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gutter);
}
.grid-overlay .gcols span {
  background: color-mix(in srgb, var(--red) 9%, transparent);
  border-inline: 1px solid color-mix(in srgb, var(--red) 22%, transparent);
}

/* ---------- RESET ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background: var(--paper);   /* warm paper page — the cream hero card floats on this */
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  overflow-x: hidden;
  letter-spacing: 0;
  background: var(--paper);   /* paper page — the hero card floats on this */
  padding-top: 0;     /* hero v2 is full-bleed to the top so the nav gradient blends seamlessly */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; border: none; background: none; cursor: pointer; }
em { font-style: italic; }
p, li { line-height: 1.55; }

::selection { background: var(--ink); color: var(--bg); }   /* ink ground + paper text — legible (coral bg failed) */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* on the dark waitlist the ink ring is invisible — switch it to white there */
.scene--06 a:focus-visible,
.scene--06 button:focus-visible,
.scene--06 input:focus-visible { outline-color: var(--paper); }

/* ================================================================
   FILM GRAIN — fixed texture over the whole page. Multiply so the
   noise shows as fine speckle on the light areas; jitters softly
   for a tactile, "shot on film" feel. Static under reduced motion.
   ================================================================ */
.grain {
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.1;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: grainShift 0.5s steps(3) infinite;
  will-change: transform;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, -2%); }
  50%  { transform: translate(2%, -4%); }
  75%  { transform: translate(-2%, 3%); }
  100% { transform: translate(3%, 2%); }
}
.reduce-motion .grain { animation: none; }

/* ---------- Lenis smooth-scroll base ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- TOP FURNITURE ---------- */
.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 0.8rem 1.4rem;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.2s var(--ease-out-soft);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- NAV (v2 — fryga: bar IS the page gradient, links centred, filled indigo CTA) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.9rem calc(clamp(8px, 1vw, 14px) + clamp(2rem, 6vw, 5.5rem)) 0;    /* dropped a touch from the top edge at rest; symmetric side margins = hero margin + hero left-padding → the PILL EDGE lines up with the hero text column, pill stays centred */
  background: transparent;
  pointer-events: none;                            /* only the pill itself is clickable; clicks pass around it */
  transition: padding-top 0.4s var(--ease-out-soft);   /* docks up smoothly when scrolled */
}
/* once you scroll, the floating pill rises/tightens to the top edge; drops back down at the very top (.is-scrolled is toggled past 10px in onScroll) */
.nav.is-scrolled { padding-top: 0.6rem; }
.nav-inner {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center;
  padding: 0.45rem 0.45rem 0.45rem 0.9rem;   /* slim pill; logo sits just inside the pill edge (which now aligns with the hero text), tight right for the CTA */
  max-width: none; margin: 0; gap: 0;
  background: rgba(251, 247, 241, 0.5);       /* translucent cream — frosted */
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;                        /* long rounded rectangle (was a full capsule) */
  box-shadow: 0 14px 40px -18px rgba(30, 32, 80, 0.22);
}
.nav-brand { display: flex; align-items: center; gap: 0.5rem; margin-right: auto; text-decoration: none; }
/* nav is wordmark-only ('dips') — the flower mark lives on as the favicon, where its detail reads */
.logo {
  font-family: var(--rhd);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--indigo-deep);
}
.nav-links {
  display: flex; align-items: center; gap: 1.9rem;
  margin: 0; padding: 0; list-style: none;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);   /* dead-centre in the bar */
}
.nav-links a {
  font-family: var(--rhd);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--indigo-deep);
  opacity: 0.78;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 1; color: var(--indigo-deep); }
.nav .cta {
  font-family: var(--rhd);
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.62rem 1.25rem;
  font-size: 0.9rem; font-weight: 600;
  color: var(--paper); background: var(--indigo-deep);
  border: 0; border-radius: 22px;   /* rounded rectangle — concentric inside the nav pill's 20px corners */
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}
.nav .cta:hover { background: #161836; transform: translateY(-1px); }

/* ================================================================
   HERO v2 — headline + inline email capture (left), big "Track your
   dips" graphic (right). Replaces the old struck-headline hero.
   ================================================================ */
.hero {
  position: relative; z-index: 2;
  min-height: calc(100vh - 26px);
  margin: 13px clamp(8px, 1vw, 14px);      /* floats on all four sides — 13px top/bottom, small side inset; min-height drops 26px so the panel still spans ~100vh with no new scroll */
  display: flex; align-items: center; justify-content: flex-start;
  padding: calc(clamp(1.75rem, 5vh, 5.5rem) + 68px) clamp(2rem, 6vw, 5.5rem) clamp(1.75rem, 5vh, 5.5rem);   /* top = bottom + 68px nav; vertical breathing trimmed so the content fits INSIDE the floating panel on shorter viewports → the 13px bottom gap stays on-screen */
  overflow: hidden;                        /* clip the right-bleeding graphic + round the bottom corners */
  border-radius: clamp(28px, 4vw, 48px);   /* softened on all four corners — hero reads as a rounded panel on the vellum */
  background: radial-gradient(125% 115% at 45% 42%, #FCF7EC 0%, var(--hero-cream) 54%, #E7D9C1 100%);   /* glow recentred — corners land on a cream deeper than the page, so every rounded corner reads on its own */
  background-attachment: fixed;
}
.hero .left { position: relative; z-index: 2; max-width: min(44ch, 42%); text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }   /* even gap between every text block */
.hero h1 {
  font-family: var(--rhd);
  font-weight: 420;
  font-size: clamp(2.15rem, 3.8vw, 3.3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--indigo-deep);
}
.hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 420; font-size: 1.04em; }   /* inherits the indigo headline colour */
.hero-sub {
  margin-top: 0;
  font-family: var(--body);
  font-weight: 600;   /* match the founder body weight (Lexend 600) */
  font-size: clamp(0.96rem, 1.05vw, 1.05rem);
  line-height: 1.5;
  color: color-mix(in srgb, var(--indigo-deep) 78%, var(--paper));
}
.hero .capture {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: 2.1rem; width: 100%;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid color-mix(in srgb, var(--indigo-deep) 14%, transparent);
  border-radius: 26px;   /* rounded rectangle — matches the nav pill */
  padding: 0.38rem 0.38rem 0.38rem 1.25rem;
  box-shadow: 0 14px 34px -20px rgba(30, 32, 80, 0.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero .capture input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font-family: var(--body); font-size: 0.92rem; color: var(--indigo-deep); outline: none;
}
.hero .capture input::placeholder { color: color-mix(in srgb, var(--indigo-deep) 48%, var(--paper)); }
.hero .capture button {
  flex: none; border: 0; cursor: pointer;
  font-family: var(--rhd); font-weight: 600; font-size: 0.9rem;
  color: var(--paper); background: var(--indigo-deep);
  padding: 0.82rem 1.25rem; border-radius: 22px;   /* rounded rectangle button — concentric in the capture pill */
  transition: transform 0.2s var(--ease-out-soft), background 0.2s;
}
.hero .capture button:hover { background: #161836; transform: translateY(-1px); }
/* hero CTA — single solid pill (no email field); scrolls to the full waitlist form */
.hero-join {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  width: fit-content;
  margin-top: 0;
  font-family: var(--rhd); font-weight: 600; font-size: 1rem;
  color: var(--paper); background: var(--indigo-deep);
  padding: 0.92rem 1.7rem; border-radius: 22px;   /* rounded rectangle CTA — matches the nav CTA */
  text-decoration: none;
  transition: transform 0.2s var(--ease-out-soft), background 0.2s;
}
.hero-join:hover { background: #161836; transform: translateY(-1px); }
/* small reassurance under the CTA — about JOINING (free signup), not the paid app */
.hero-note {
  margin-top: 0;
  font-family: var(--body);
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--indigo-deep) 74%, var(--paper));   /* darkened from 62% → clears AA (4.9:1) on the cream gradient edge */
  letter-spacing: 0.01em;
}
.hero-note .sep { opacity: 0.65; margin: 0 0.45em; }
.hero .reassure {
  margin-top: 1.5rem;
  font-family: var(--rhd);
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--indigo-deep) 70%, var(--paper));
  letter-spacing: 0.01em;
}
.hero .reassure .sep { opacity: 0.5; margin: 0 0.4em; }
.hero .pic { position: absolute; left: calc(50vw - 38.65vh + 293px); right: auto; bottom: 0; top: auto; height: calc(100vh - 90px); width: calc((100vh - 90px) * 0.773); transform: scale(0.92); transform-origin: bottom center; z-index: 1; }   /* woman + ring layered, centred for even L/R padding; scaled to 92% from bottom-centre so it's slightly smaller but stays flush to the bottom edge */
.hero .pic .pic-layer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }

@media (max-width: 880px) {
  .hero { flex-direction: column; justify-content: center; min-height: auto; padding: 7rem 1.8rem 0; }
  .hero .left { max-width: none; text-align: center; align-items: center; }   /* centre the hero on mobile to match every other section (founder/stats/who/privacy/waitlist are all centred) */
  .hero .pic { position: relative; left: auto; right: auto; top: auto; transform: none; width: 100%; max-width: 19rem; height: auto; aspect-ratio: 1082 / 1400; margin: 2.25rem auto 0; border-radius: 26px 26px 0 0; overflow: hidden; }   /* text-first: photo BELOW the headline+CTA, sized to the text column (not full-bleed), rounded top, FLUSH to the panel bottom (margin-bottom 0 + hero padding-bottom 0) so it's grounded with no cream gap under it */
}

/* ---------- BUTTONS (with anticipation on press) ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1.1rem 1.7rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 1.02rem;
  transition: transform 0.3s var(--ease-out-soft),
              background 0.25s, color 0.25s,
              box-shadow 0.3s var(--ease-out-soft);
}
.btn span { transition: transform 0.3s var(--ease-out-soft); display: inline-block; }
.btn-primary {
  background: var(--orange);          /* SOLID orange accent fill */
  border: 2px solid var(--orange);
  color: var(--brown);               /* deep-brown text on orange */
  padding: 1rem 0.65rem;             /* shorter + thicker — narrow sides, taller body (chunky pill) */
  font-size: 0.7rem;                 /* smaller text inside the pill */
  gap: 0.35rem;                      /* tighten the label→arrow gap to shave width */
}
.btn-primary:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--orange) 88%, #000);   /* solid fill → darken on hover */
}
.btn-primary:hover span { transform: translateX(4px); }
.btn-primary:active {
  transform: translateY(-1px) scale(0.97);
  transition-duration: 0.08s;
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--orange) 40%, transparent);
}

/* ================================================================
   THE SCENE SYSTEM
   ================================================================ */
.scene {
  position: relative;
  min-height: 100vh;
  padding: 9rem 2.5rem 0;
  background: var(--scene-bg, var(--paper));
  color: var(--scene-ink, var(--ink));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

/* per-scene palette — bold, alive, app-brand */
.scene--01 {
  --scene-bg: var(--hero-cream); --scene-ink: var(--ink); --scene-accent: var(--orange); min-height: calc(100vh - 56px); max-height: calc(100vh - 56px);   /* FIXED viewport-relative frame (clamped) — never grows with content */
  /* lit CREAM hero — warm radial light (upper-left) gives the surface depth instead of a flat fill; grain via ::after */
  background: radial-gradient(130% 110% at 28% 16%, #FCF5E8 0%, var(--hero-cream) 52%, #E9E0D1 100%);
  /* floats subtly on the paper — small side inset, no shadow */
  margin: 0 clamp(1rem, 2.5vw, 2.25rem) 0.5rem;
  border-radius: 80px;
}
.scene--06 {
  --scene-bg: var(--indigo-deep);
  --scene-ink: var(--periwinkle);
  --scene-accent: var(--orange);
  background: var(--indigo-deep);   /* deep-indigo night close — light periwinkle text, orange accents */
  position: relative; z-index: 2;
  border-radius: 40px 40px 0 0;     /* rounded top rising off the cream (the frameless privacy note sits above it) */
}
.scene--06 .scene-title,
.scene--06 .scene-title .brand { color: var(--paper); }   /* cream heading on the deep indigo (14:1 contrast) */
.scene--06 .scene-sub .brand { color: var(--paper); }
.scene--06 .hero-eyebrow-line { color: var(--paper); justify-content: center; }
.scene--06 .hero-eyebrow-mark { color: var(--paper); }   /* bluish ✱ on the deep indigo */
.scene--06::before { display: none; }                           /* no top fade — zone ground is uniform */
.scene--06 .scene-content { position: relative; z-index: 2; }   /* content crisp on top */

/* ---- SUN ZONE — founder + waitlist over one warm ground; the dome glow bleeds up behind both ---- */
.sunzone {
  position: relative;
  margin-top: 0;   /* the "who" is now its own floating peach card with its own bottom margin; the indigo waitlist simply follows on the page ground */
  /* transparent — the body's warm paper is the single ground, so the "who it's for"
     aura (which bleeds down out of #forwho) reads as one continuous background behind
     both it and "how dips works". The dark founder + coral waitlist keep their own bg. */
  background: transparent;
  /* clip (not hidden) so the sticky cycle intro still pins — `hidden` would make
     .sunzone the scroll container and kill position:sticky on descendants */
  overflow: clip;
}

/* soft top fade so scene-to-scene feels like one continuous story */
.scene::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--scene-bg) 0%, transparent),
    var(--scene-bg)
  );
  z-index: 0;
  pointer-events: none;
}
.scene--01::before { display: none; }
/* filmic grain over the main hero cream — overlay, boosted to 0.5 (overlay reads softer on light
   than on the dark panels); same desaturated grain as founder/waitlist/footer so it matches */
.scene--01::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  border-radius: 80px;   /* clip the grain to the rounded hero panel corners */
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='hg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23hg)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* the content slot */
.scene-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--grid-max);
  width: 100%;
  margin: 0 auto;
  padding: 2rem 0 8rem;
}
/* hero is a LEFT-aligned flex column.
   F-pattern reading: content anchored to left edge, eye lands at
   top-left of headline and scans down naturally. */
/* HERO — editorial diagonal. Content packs from the top with a controlled
   gap (no forced full-height void); the scene is content-height so there's
   no dead space. Eye travels top-left headline → bottom-right invitation. */
.scene-content--hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  grid-template-rows: auto auto;
  align-content: center;                  /* whole stack centred vertically → even breathing room top AND bottom */
  row-gap: calc(2.5rem + 6px);             /* headline → subtext gap = eyebrow → headline gap (even rhythm) */
  text-align: left;
  /* lift the stack a touch toward the true frame centre — the top padding is trimmed
     (was 6rem) so the heavy headline reads more centred; bottom keeps the nav offset. */
  padding: 4rem 0 calc(6rem - 71px);
  max-width: var(--grid-max);
  width: 100%;
  margin: 0 auto;
}
/* top: eyebrow + the giant struck headline, full width */
.hero-top {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;                 /* breathing room: eyebrow → headline */
}
/* bottom-right: the subhead, ending in the italic "Are you in?". Left-aligned
   text, the block pushed to the right edge. */
.hero-bottom {
  max-width: 30rem;            /* wraps the lede to ~4 lines */
  display: flex;
  flex-direction: column;
  align-items: flex-start;     /* the TEXT inside reads flush-left (calm to read) */
  text-align: left;
  gap: var(--sp-2);
}
/* the Save-my-spot button sits directly UNDER the subtext, sharing the
   headline's left edge — the natural next step after the promise (no longer
   floating in the open right-hand space). */
/* lower row: subtext (left) + button/pill cluster (right) */
.hero-lower {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;        /* its height = the subtext (the pill is absolute, out of flow) → even gap under the headline */
}
/* bottom-right cluster: CTA button + film pill. Absolutely placed so its BOTTOM sits on
   the subtext's baseline while the taller pill extends UP into the empty right (clear of
   the left-side headline) — keeps the text evenly spaced AND the pill aligned to the subtext. */
.hero-actions {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;     /* the shorter CTA bottom-aligns with the taller film pill */
  gap: 1.4rem;
}
.hero-cta {
  flex: 0 0 auto;            /* sits to the LEFT of the film pill, bottom-aligned with it */
  margin: 0;
}
/* LIGHT HERO — ink text on the soft peach panel (rotating word keeps its bright accent colour) */
.hero-bottom .hero-lede {
  margin-top: 0;
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.32;
  text-align: left;
}
.hero-bottom .hero-lede em { font-family: var(--serif); font-style: italic; color: var(--ink); }   /* neutral — no coloured "the dip" */
/* the bold statement — four forced rows; "Are you in?" flows on after it */
.hero-bottom .lede-lead .brand { color: var(--ink); }   /* the brand "Dips" — solid black on the cream */
.hero-bottom .lede-lead {
  display: inline;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.18vw, 1.06rem);   /* nudged down ~10% — slightly smaller */
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* hero clearance: keep the headline clear of the fixed nav.
   min-height:auto lets the hero size to its content (no full-viewport void). */
.scene--01 { padding-top: 0; }   /* top spacing handled by .scene-content--hero symmetric padding (even top/bottom margins) */

/* concrete "what dips is" promise — the 5-second clarity line under the hook */
.hero-lede {
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -0.005em;
  text-align: left;
  color: var(--ink);
  margin-top: 1.4rem;
}
.hero-lede em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.scene-content--hero .hero-lede { margin-top: 0; }

.scene-content--statement { align-items: flex-start; }

/* THE BIG TYPE (scenes 02–05). The hero overrides with its own
   larger sizing via .hero-title. */
.scene-title {
  font-family: var(--display);
  font-weight: 400;                              /* Young Serif single weight */
  font-size: var(--fs-h1);                        /* section-title level */
  line-height: 1.04;
  letter-spacing: -0.01em;                        /* serif wants looser tracking than the old grotesque */
  max-width: 1300px;
}
.scene-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--scene-accent);
}
.ws-line { display: block; overflow: hidden; padding-bottom: 0.18em; }   /* room so the reveal mask doesn't clip descenders (p, g) */
.ws-line > * { display: inline-block; }

/* ---- SCROLL REVEALS — CSS transition, toggled by IntersectionObserver ----
   Compositor-driven and time-based, so they never fight Lenis smooth-scroll
   (no twitching). The hidden state only applies once JS adds .js-anim, so with
   no JS / reduced motion everything stays visible. */
.js-anim .reveal-up {
  opacity: 0;
  transform: translateY(34px);
}
.js-anim .reveal-up.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1.6s var(--ease-out-soft), transform 1.6s var(--ease-out-soft);
}
/* waitlist fix: .scene--06 .scene-sub hard-sets opacity:1 (for cream-on-indigo contrast),
   which was overriding the reveal's opacity:0 — so the subtext sat 34px low but fully
   visible and never faded, making the whole mailing-list reveal look broken. Re-assert the
   reveal's opacity scoped to #waitlist (ID wins) so all four elements fade in together,
   still ending at full opacity. */
.js-anim #waitlist .reveal-up { opacity: 0; }
.js-anim #waitlist .reveal-up.is-in { opacity: 1; }
/* the meta pills are the very last element at the page bottom — their translateY slide made
   them "shuffle up from the bottom" half-visible during the 1.6s reveal. Drop the slide so
   they just fade in place (still part of the same staggered fade). */
.js-anim #waitlist .wl-meta.reveal-up,
.js-anim #waitlist .wl-meta.reveal-up.is-in { transform: none; }
/* feature cards cascade in */
.js-anim .hd-grid .card:nth-child(2).is-in { transition-delay: 0.09s; }
.js-anim .hd-grid .card:nth-child(3).is-in { transition-delay: 0.18s; }
.js-anim .hd-grid .card:nth-child(4).is-in { transition-delay: 0.27s; }
/* forwho + founder: heading first, body just behind it */
.js-anim .fw-statement.is-in { transition-delay: 0.12s; }
.js-anim .scene--founder .founder-hi.is-in { transition-delay: 0.08s; }
.js-anim .scene--founder .founder-body.is-in { transition-delay: 0.16s; }

/* HERO entrance on load — same fade + rise as the scroll reveals, staggered */
.scene--01 .hero-top     { animation: heroIn 1.1s var(--ease-out-soft) 0.05s both; }
.scene--01 .hero-bottom  { animation: heroIn 1.1s var(--ease-out-soft) 0.20s both; }
.scene--01 .hero-actions { animation: heroIn 1.1s var(--ease-out-soft) 0.34s both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .scene--01 .hero-top, .scene--01 .hero-bottom, .scene--01 .hero-actions { animation: none; }
}

/* visually hidden but available to screen readers (aria-live status, etc.) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.scene-sub {
  font-family: var(--body);
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 580px;
  margin-top: 2rem;
  color: var(--scene-ink, var(--ink-soft));
  opacity: 0.82;
  font-weight: 400;
}
.scene-sub em { font-family: var(--serif); font-style: italic; color: var(--scene-accent); }

/* ================================================================
   SCENE 01 — hero
   ================================================================ */
.hero-title {
  font-size: clamp(2.15rem, 6.1vw, 82px);   /* a touch bigger */
  font-weight: 400;                          /* all headings at 400 */
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin-top: 0;
}
/* "You are not" + the rotating label share one line (We-Are-Yellow style).
   The rotator is inline-block so it sizes to whichever word is showing. */
.hero-static { font-weight: inherit; }
.hero-rotator {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;   /* accent word — Newsreader italic against the Newsreader roman headline (one family, roman + italic) */
  font-style: italic;
  font-weight: 400;
}
.rot-text {
  display: inline-block;
  position: relative;
  z-index: 1;
  color: inherit;             /* the rotating colour — the word itself is coloured */
  transition: opacity 0.34s var(--ease-out-soft),
              transform 0.34s var(--ease-out-soft);
}
.hero-rotator.is-swapping .rot-text { opacity: 0; transform: translateY(0.12em); }

/* THE STRIKE — the hero's one animation. A line drawn through each label in
   its own colour, then held. The DRAW is driven from JS (reset → reflow →
   draw) so it animates reliably on every word; here we only define the look
   + the opacity fade that rides the word's swap. */
.hero-rotator .strike {
  position: absolute;
  left: 0;
  width: 100%;                     /* box = word width; the even stick-out is added in JS (overflow visible) */
  top: 0.54em;
  height: 0.6em;                   /* room for a slightly stronger tilt */
  z-index: 2;                      /* crosses over the coloured word */
  pointer-events: none;
  overflow: visible;
  transform: translateY(-50%);   /* slant comes from the diagonal path itself */
  clip-path: none;                 /* visibility now via per-path stroke-dashoffset; left→right on draw */
  transition: clip-path 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-rotator .strike.is-drawn { clip-path: inset(0 0 0 0); }
.hero-rotator .strike path {
  fill: none;
  stroke: currentColor;            /* strike MATCHES the word — currentColor tracks the rotating word colour */
  stroke-width: 4.2;               /* strike line thickness (viewBox = px, ~4.2px) */
  stroke-linecap: butt;            /* flat ends — round caps rendered as stray dots in the margin */
  stroke-linejoin: round;
}
/* (legacy mask variant below is unused now — kept harmless) */
.hero-rotator .strike--wavy {
  height: 0.2em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M0 10 Q15 2 30 10 T60 10' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.62em 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M0 10 Q15 2 30 10 T60 10' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.62em 100% repeat-x;
}
.hero-rotator.is-swapping .strike {
  opacity: 0;
  transition: opacity 0.3s ease;   /* fade out with the word */
}
.reduce-motion .hero-rotator .strike { clip-path: inset(0 0 0 0); }

/* ================================================================
   SCENE 06 — waitlist (dark)
   ================================================================ */
.scene--06 .scene-title em { color: var(--paper); }
.scene--06 .scene-sub { color: var(--paper); opacity: 1; }   /* cream on the deep indigo */

/* ---- layout fixes (scoped to scene--06 only) ---- */
/* compact the section — no need for full-viewport height; size to content
   with even, modest breathing room top and bottom */
.scene--06 { min-height: auto; margin-top: 0; padding-top: calc(var(--sp-section) + 2.4rem); padding-bottom: var(--sp-section); }   /* roomier, still equal to the footer hairline: both (panel top → heading) and (pills → hairline) = var(--sp-section) + 2.4rem (≈128px) — the footer adds its own 2.4rem above the hairline, so the bottom padding is trimmed by that */
.scene--06 .scene-content { flex: 0 0 auto; padding-top: 0; padding-bottom: 0; }   /* no shrink — so the even top/bottom padding is fully respected */
/* left-aligned sign-up — heading, copy, form + meta all anchor to the left edge */
/* even vertical rhythm: one flex gap spaces title → sub → form → meta equally
   (per-element margins zeroed below so nothing fights the gap) */
.wl-left { align-items: center; text-align: center; gap: 1.7rem; }   /* centred sign-up block */
.scene--06 .eyebrow    { margin: 0; }
.scene--06 .scene-title { font-family: var(--rhd); font-weight: 420; letter-spacing: -0.02em; font-size: clamp(3rem, 6vw, 5rem); line-height: 1.02; margin: 0; text-align: center; }   /* Red Hat Display to match the other section heads (hero / "Built for every dip" / founder), not the lone serif; same scale as the cycle head — unified section-head tier */
.scene--06 .scene-sub   { margin: 0; max-width: 34rem; text-align: center; }
.scene--06 .wl-form     { margin: 0; width: 100%; max-width: 34rem; }
.scene--06 .wl-meta     { justify-content: center; margin: 0; }
/* form polish — muted placeholder so the field reads as empty, not filled */
.wl-form input::placeholder { color: var(--ink-faint); }

.wl-form {
  display: flex;
  gap: 0.5rem;
  background: #FFFFFF;
  border: 1px solid rgba(21,19,28,.14);
  border-radius: 22px;   /* rounded rectangle — matches the nav pill */
  padding: 0.4rem;
  max-width: 540px;
  width: 100%;
  margin: 2.4rem auto 1.6rem;
  transition: transform 0.3s var(--ease-out-soft), box-shadow 0.3s;
}
.wl-form:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -10px color-mix(in srgb, var(--accent) 45%, transparent),
              0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);   /* warm coral ring on focus */
}
.wl-form.is-done { transform: scale(0.98); transition-duration: 0.15s; }
.wl-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--body);
  font-size: 1rem;
  padding: 0 1.2rem;
  color: var(--ink);
  outline: none;
}
.wl-form button {
  background: var(--orange);              /* MY vermilion accent — solid fill, like the nav CTA */
  color: var(--paper);
  border-radius: 22px;   /* rounded rectangle button — concentric in the form pill */
  padding: 1rem 1.6rem;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.25s, transform 0.25s var(--ease-out-soft);
}
.wl-form button:hover { background: color-mix(in srgb, var(--orange) 86%, #000); color: var(--paper); transform: translateY(-1px); }
/* click = vermilion pop; stays vermilion once submitted */
.wl-form button:active,
.wl-form.is-done button { background: var(--orange); color: var(--paper); }
.wl-form button:active { transform: scale(0.97); }

.wl-meta {
  display: flex; justify-content: flex-start; gap: 0.6rem;
  font-size: 0.86rem;
  flex-wrap: wrap;
}
/* the three qualifiers as small outlined pills — little siblings of the ticker chips */
.wl-meta span {
  display: inline-flex; align-items: center;
  padding: 0.55em 1.05em;
  border: 1.5px solid currentColor;
  border-radius: 14px;   /* rounded-rectangle to match the buttons (their 22px would read as a full capsule at this smaller pill size) */
  font-weight: 500;
  white-space: nowrap;
}
.wl-meta span { color: color-mix(in srgb, var(--paper) 82%, transparent); }   /* clearer cream pills — match the cream heading */

/* ---- post-signup qualifier: "which of these is you?" ---------------------
   Reveals after the email is in. Optional, multi-select — willingness to tap
   is a stronger intent signal than the email, and it captures real insight. */
.wl-qualifier {
  margin: 0.2rem auto 1.8rem;
  max-width: 620px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out-soft), transform 0.5s var(--ease-out-soft);
}
.wl-qualifier.is-revealed { opacity: 1; transform: none; }
.wl-q-prompt {
  font-family: var(--body);
  font-size: 1rem;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  opacity: 1;
  margin: 0 0 1rem;
}
.wl-q-prompt em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--paper);
}
.wl-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.wl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: 100px;
  background: transparent;
  border: 1px solid rgba(250,245,236,.22);
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s,
              transform 0.2s var(--ease-out-soft);
}
.wl-chip::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
  transition: background 0.2s, transform 0.25s var(--ease-out-soft);
}
.wl-chip:hover {
  border-color: color-mix(in srgb, var(--c) 75%, transparent);
  color: var(--paper);
  transform: translateY(-1px);
}
.wl-chip:hover::before { transform: scale(1.3); }
/* selected = a lit tile glowing in its condition colour (tinted fill keeps the
   white label legible on the dark section; the dot + border stay vivid) */
.wl-chip.is-selected {
  background: color-mix(in srgb, var(--c) 18%, transparent);
  border-color: var(--c);
  color: var(--paper);
}
.wl-chip.is-selected::before { background: var(--c); transform: scale(1); }
.wl-q-thanks {
  font-family: var(--body);
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  margin: 1.1rem 0 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s, transform 0.4s var(--ease-out-soft);
}
.wl-q-thanks.is-show { opacity: 0.95; transform: none; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  background: var(--indigo-deep);   /* deep indigo — continues the night close from the waitlist */
  color: var(--paper);
  padding: 2.4rem var(--grid-edge) 2.2rem;   /* gutter matches the content sections */
  border-top: 0;
  position: relative; isolation: isolate;   /* stacking context so the grain ::after textures the panel below the content */
}
.footer-bottom {
  position: relative; z-index: 2;   /* above the grain */
  max-width: var(--grid-max); width: 100%; margin: 0 auto;   /* on the 1180 spine */
  border-top: 1px solid rgba(250,245,236,.16);               /* faint cream hairline on the dark footer */
  padding-top: 2rem;
  display: flex; justify-content: space-between;
  font-size: 0.86rem;
  color: rgba(250,245,236,.6);    /* muted cream (opacity reserved for the scroll-reveal) */
  flex-wrap: wrap;
  gap: 1rem;
}

/* ================================================================
   HERO eyebrow — small tagline above the headline.
   ================================================================ */
.hero-eyebrow-line {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}
.hero-eyebrow-mark {
  color: var(--accent);
  font-size: 1.05rem;
  animation: eyebrowPulse 3s ease-in-out infinite;
}
@keyframes eyebrowPulse {
  0%,100% { transform: rotate(0) scale(1); }
  50%     { transform: rotate(72deg) scale(1.15); }
}
.reduce-motion .hero-eyebrow-mark { animation: none; }
/* hero ✱ follows the live rotating-word colour (set by script.js on --hero-accent) */
.scene--01 .hero-eyebrow-mark { color: var(--hero-accent, var(--accent)); transition: color 0.4s ease; }
.scene--01 .hero-eyebrow-line { color: var(--ink); }   /* eyebrow tagline → black on the cream hero */

.scene-content--hero { position: relative; z-index: 1; }

/* HERO BACKGROUND — a faint cycle/orbital diagram behind the content:
   concentric rings (the cycle), hormone waves, plus-marks, dot grids and a
   few clinical annotations. Static + decorative; sits below the text. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--ink);
}
.hero-bg svg { width: 100%; height: 100%; display: block; }
/* the rings breathe — a slow, barely-there cycle pulse (each circle scales
   around its own centre, so the concentric sets expand + settle together) */
.hero-bg .bg-ring circle {
  fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.05;
  transform-box: fill-box;
  transform-origin: center;
  animation: bgBreath 15s ease-in-out infinite;
}
@keyframes bgBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.reduce-motion .hero-bg .bg-ring circle { animation: none; }

/* responsive: the diagonal collapses to a single left-aligned stack —
   eyebrow, headline, then the subhead + CTA flow underneath. */
@media (max-width: 760px) {
  .scene-content--hero {
    grid-template-columns: 1fr;
    align-content: start;
    row-gap: var(--sp-5);
    padding-top: 0.5rem;
  }
  .hero-top, .hero-bottom, .hero-cta {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    align-self: start;
    margin-right: 0;          /* drop the desktop nav-alignment pull on mobile (stacked) */
  }
  .hero-bottom { max-width: 38ch; align-items: flex-start; text-align: left; margin-left: 0; margin-right: 0; }
  .hero-bottom .hero-lede { text-align: left; }
}

/* ================================================================
   TICKER — delicate version. Sits between hero and cycle journey.
   Soft body text, no dark band, just a quiet scrolling row of
   the questions she's been carrying. Italic phrases in faint accent.
   ================================================================ */
.ticker {
  position: relative;
  z-index: 1;                                    /* lift the pills above the aura that now bleeds up behind them */
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding: 70px 0;                               /* tightened to 70px top/bottom */
  margin-top: clamp(1.75rem, 4.5vh, 3rem);       /* same as the founder's top margin below → even gap top/bottom */
  background: transparent;                       /* the aura shows through — one continuous ground with "who it's for" */
  /* flower_4 (the card-badge flower) in cinnabar + grain, for the punctuation shapes between pills */
  --tk-flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23BC4F2B' d='M171.219 80.9174C189.016 84.9391 200 91.1553 200 100C200 108.845 189.016 115.061 171.219 119.083C184.622 131.465 191.026 142.34 186.604 150C182.181 157.66 169.561 157.551 152.136 152.135C157.552 169.56 157.661 182.18 150.001 186.603C142.341 191.025 131.465 184.62 119.083 171.217C115.061 189.016 108.845 200 100 200C91.1553 200 84.9391 189.016 80.9174 171.219C68.5358 184.621 57.6607 191.025 50.001 186.603C42.3411 182.18 42.4496 169.56 47.8658 152.135C30.4413 157.551 17.8209 157.66 13.3984 150C8.97604 142.34 15.3802 131.465 28.7828 119.083C10.9842 115.061 0 108.845 0 100C0 91.155 10.9843 84.9387 28.7828 80.917C15.3802 68.5352 8.97604 57.6598 13.3984 50C17.8209 42.3401 30.4414 42.4487 47.8658 47.8648C42.4496 30.4404 42.3411 17.8199 50.001 13.3975C57.6607 8.97513 68.5358 15.379 80.9174 28.7812C84.9391 10.9836 91.1553 0 100 0C108.845 0 115.061 10.9843 119.083 28.7829C131.465 15.3795 142.341 8.97495 150.001 13.3975C157.661 17.8199 157.552 30.4404 152.136 47.8648C169.561 42.4487 182.181 42.3401 186.604 50C191.026 57.6599 184.622 68.5354 171.219 80.9174Z'/%3E%3C/svg%3E");
  --tk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='tkg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23tkg)'/%3E%3C/svg%3E");
}
.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  animation: tickerScroll 47s linear infinite;
  will-change: transform;
}
/* each prompt is an outlined pill — thin border, leading bullet, all in its
   own condition colour (border + bullet + text share currentColor) */
.ticker-track .ticker-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  height: 5.5rem;                                /* thicker pills (fixed height; no wrap) */
  padding: 0 1.1em;                              /* a bit shorter — tighter horizontal padding */
  border: 1.75px solid currentColor;
  border-radius: 999px;
  font-family: var(--rhd);   /* Red Hat Display — UI-label feel, distinct from body */
  font-weight: 500;
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  line-height: 1;
  letter-spacing: 0.005em;
}
.ticker-track .ticker-tag::before {
  content: "\2022";              /* • leading bullet, like the reference chips */
  font-size: 1.05em;
  line-height: 0;
  margin-top: -0.04em;
}
/* all pills now share one upright sans face (no serif italic) */
.ticker-track .ticker-tag--serif {
  font-family: var(--rhd);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  letter-spacing: 0.005em;
}
/* tightened palette — the four accents + ink (the bipolar-style outline pill), cycled
   twice across the ten pills so each colour appears exactly twice and the row stays
   balanced. nth-child(10n+k) targets each pill AND its loop-duplicate (pill k and pill
   k+10 share text), so colours line up across the -50% seam. */
/* monochrome accent — every pill is the orange accent (outline + bullet + text via currentColor) */
/* ticker — monochrome indigo: every pill is the lapis indigo (outline · bullet · text via currentColor) */
.ticker-track .ticker-tag { color: var(--orange); }   /* cinnabar ticker */

/* wave mark riding in the ticker (replaces the old photo pills) */
.ticker-track .ticker-shape {
  display: inline-flex; flex: 0 0 auto; position: relative;
  width: 4.4rem; height: 4.4rem;                 /* punctuation between pills — smaller than the 5.5rem pills */
  background: var(--tk-flower) center/contain no-repeat;   /* cinnabar flower_4 — matches the card badges */
}
.ticker-track .ticker-shape::after {            /* film grain clipped to the flower shape */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--tk-grain); background-size: 100px 100px;
  mix-blend-mode: soft-light; opacity: 0.9;
  -webkit-mask: var(--tk-flower) center/contain no-repeat;
          mask: var(--tk-flower) center/contain no-repeat;
}

/* pause / play control — lets the user stop the moving prompts (WCAG 2.2.2) */
.ticker-toggle{
  position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: 14px;
  z-index: 3; padding: 6px;   /* bare icon — the padding is just an invisible tap target */
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--orange); cursor: pointer;
  transition: transform .25s var(--ease-out-soft), color .25s var(--ease-out-soft);
}
.ticker-toggle:hover{ transform: scale(1.15); color: color-mix(in srgb, var(--orange) 78%, var(--ink)); }
.ticker-toggle:focus-visible{ outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.ticker-toggle svg{ width: 24px; height: 24px; fill: currentColor; display: block; }
.ticker-toggle .tt-play{ display: none; }
.ticker-toggle.is-paused .tt-pause{ display: none; }
.ticker-toggle.is-paused .tt-play{ display: block; }
.reduce-motion .ticker-toggle{ display: none; }   /* ticker is already static under reduced motion */
/* phone: 70px top/bottom is desktop-sized bulk — compact it, and shrink/tuck the toggle so it stops
   weighting the bottom corner (bottom padding trimmed a touch since the toggle fills that space) */
@media (max-width: 640px){
  .ticker{ padding: 44px 0 40px; }
  .ticker-toggle{ bottom: 8px; padding: 4px; }
  .ticker-toggle svg{ width: 20px; height: 20px; }
}

/* photo pills — oval images riding along in the ticker (Menstruation / ovulation pics) */
.ticker-img {
  flex: 0 0 auto;
  width: 10.5rem; height: 7rem;       /* a bit taller than the 5.5rem pills, and noticeably wider */
  border-radius: 3rem;                /* rounded rectangle — rounder corners (not an ellipse) */
  object-fit: cover;
  display: block;
}
/* wrapper so the ticker images can carry the same subtle film grain (an <img> can't take ::after) */
.ticker-img-wrap { position: relative; flex: 0 0 auto; display: inline-flex; border-radius: 3rem; overflow: hidden; }
.ticker-img-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='tg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23tg)'/%3E%3C/svg%3E");
  background-size: 160px 160px; opacity: 0.2; mix-blend-mode: overlay;
}

/* Buttons rebind --orange locally to the vermilion accent #E0402E so their hover fill is
   vermilion (they're black by default — see the button rules). The global accent (✱ marks,
   hero word, headings, founder) is untouched; the ticker sets its own 4 hues above. */
.nav .cta,
.cta,
.btn-primary,
.wl-form button,
.sticky-cta a {
  --orange: #BC4F2B;   /* buttons now cinnabar (was vermilion) */
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.reduce-motion .ticker-track {
  animation: none;
  flex-wrap: wrap;
  justify-content: center;
  white-space: normal;
  padding: 0 1.5rem;
}
.reduce-motion .ticker-track > :nth-child(n+13) { display: none; }   /* hide the duplicate group (9 pills + 3 flowers = 12 items) when not scrolling */

/* brand name — ink, normal weight (reads as plain text in copy) */
.brand { color: var(--ink); font-weight: inherit; }

/* ================================================================
   FOUNDER scene — sits outside the cycle timeline
   ================================================================ */
.scene--founder {
  background: transparent;             /* the floating card carries the fill now */
  --brown: var(--paper);
  min-height: auto;
  justify-content: center;                /* centred floating card — shares the language of the other panels (forwho, stats, privacy) */
  padding: 0 clamp(1.25rem, 4vw, 3rem);   /* page gutter so the card doesn't touch the edges */
  margin: clamp(1.75rem, 4.5vh, 3rem) 0 calc(70px + clamp(1.75rem, 4.5vh, 3rem));   /* bottom gap to the stats = the full ticker-pills→neighbour gap (ticker's 70px padding + the section margin), so the founder card breathes equally above and below */
  border-radius: 0;
  position: relative; z-index: 1;
}
.scene--founder::before { display: none; }   /* zone provides a uniform ground */
.scene--founder::after { display: none; }    /* no film grain on the founder bg — smooth vellum around the magenta card */
/* hug the content so the hairlines frame it tightly (not stretched to section height) */
.scene--founder .scene-content { background: linear-gradient(135deg, #FCE3CD 0%, #FBDFC5 55%, #F6D2B0 100%); max-width: calc(var(--grid-max) - var(--grid-edge) * 2); width: 100%; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); border-radius: 40px; overflow: hidden; flex: 0 0 auto; }   /* floating peach card; its EDGES run 1st column → last column (grid-max minus the two grid-edge gutters); content centred inside with its own padding */
.scene--founder .scene-content--statement {
  position: relative;                  /* anchor the eyebrow label */
  max-width: 64rem;                    /* hug the photo + quote row */
  margin: 0 auto;
  background: var(--magenta);          /* WHOLE magenta card — cream text */
  border: 0;
  border-radius: 36px;
  padding: clamp(2.5rem, 6vh, 4rem) clamp(2rem, 5vw, 4rem);   /* air inside the frame */
  justify-content: center;
}
/* editorial two-column layout — big greeting left, story right */
.founder-grid {
  display: grid;
  width: 100%;                           /* fill the 1180px container (parent is a non-stretching flex col) */
  grid-template-columns: 0.78fr 1.22fr;  /* same split as .cyc → story aligns with the cycle's right column */
  column-gap: clamp(2.5rem, 6vw, 6rem);  /* same gap as .cyc */
  align-items: end;                      /* story bottom-aligns with the bottom of "I am Maya." */
}
/* eyebrow — same look as "✱ how dips works", but an orange ✱ */
.scene--founder .hero-eyebrow-line { color: var(--brown); font-size: 0.9rem; margin: 0 0 1.6rem; }
.scene--founder .hero-eyebrow-mark { color: var(--brown); }   /* deep-brown ✱ (orange-on-orange would vanish) */
/* LEFT — oversized serif greeting, two lines */
/* "Hey, my name is Maya" — section hero: orange, Red Hat Display */
.founder-hi {
  font-family: var(--rhd); font-weight: 420; font-style: normal;   /* same Red Hat weight as the hero headline */
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--orange); margin: 0 0 var(--sp-head);
}
/* the story — indigo body, Lexend */
.founder-body { max-width: 48ch; }
.founder-body p {
  font-family: var(--body); font-weight: 600; font-style: normal;   /* Lexend, 600, no italic */
  font-size: 0.97rem; line-height: 1.55; letter-spacing: 0;   /* ~16px, relative so it scales with user text-size (WCAG 1.4.4) */
  color: var(--indigo-deep); text-align: left; margin: 0;
  text-wrap: pretty;   /* avoid a lone orphan word ("it") on the last line */
}
.founder-body em { font-style: normal; font-weight: 600; color: inherit; }   /* "this" — matches the body now */
.founder-hi .hi-name { font: inherit; }   /* "Hey" — plain Red Hat, same as the headline */
.founder-hi em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.04em; }   /* "name" — Newsreader italic accent, inherits the orange (mirrors the hero's "neurodivergent") */
.founder-body .brand { color: inherit; font-weight: inherit; }
.founder-hairline {
  align-self: stretch;
  border: 0;
  border-top: 1px solid rgba(21, 19, 28, 0.16);
  margin: 0 0 2.2rem;
}
.founder-note p:last-child { margin-bottom: 0; }
.founder-note em {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink);
}

/* ---- "the why" — left-aligned on the page spine (was a centred testimonial) ---- */
.founder--centered { align-items: center; text-align: center; }
/* eyebrow = top-left label pinned near the top hairline (matches the cycle section above) */
/* eyebrow centred above the quote */
.founder--centered .founder-eyebrow {
  position: static;
  margin: 0 0 2.2rem;
}
.founder-quote { max-width: 46rem; margin: 0 auto; }   /* centred, sane measure for reading */
.founder-quote p {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.25rem, 2.3vw, 1.8rem); line-height: 1.45; letter-spacing: -0.01em;
  color: var(--brown); margin: 0; text-wrap: pretty;   /* deep-brown tonal on orange */
}
/* emphasised word inside the quote — upright ink stress (orange has no contrast on the darker blue) */
.founder-quote em { font-family: var(--serif); font-style: italic; color: inherit; }   /* same warm white as the quote */
.scene--founder-blue .founder-quote .brand { color: inherit; }   /* no orange brand on the blue ground */

/* founder PHOTO capsule beside the quote (ported from sandbox) */
.founder-row { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); max-width: 64rem; margin: 0 auto; text-align: left; }   /* centred photo + story group inside the card */
.founder-row .founder-eyebrow { margin: 0 0 1.6rem; }
.founder-row .founder-quote { margin: 0; max-width: none; }
.founder-row .founder-attrib { margin: 1.6rem 0 0; }   /* even spacing above the attribution = the gap below the eyebrow */
.founder-text { flex: 1 1 auto; min-width: 0; }
.founder-pill { flex: 0 0 auto; width: clamp(240px, 24vw, 320px); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; position: relative; margin: 0; background: linear-gradient(150deg, #C0567F 0%, #B23E6B 55%, #8F2F54 100%); }   /* plain circle frame; garnet behind the cut-out */
.founder-pill img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; transform: none; }   /* clean grade baked into the image; zoom anchored around the face brings her forward — crops excess background up top and the bust at the bottom */
/* subtle film grain over the founder photo — lighter than the wave (0.2) so the face stays clean */
.founder-pill::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='fg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23fg)'/%3E%3C/svg%3E");
  background-size: 180px 180px; opacity: 0.2; mix-blend-mode: overlay;
}
@media (max-width: 720px) {
  .founder-row { flex-direction: column; text-align: center; gap: 1.8rem; }
  .founder-row .founder-eyebrow { margin: 0 0 1.2rem; }
  .founder-pill { width: clamp(180px, 60vw, 240px); }
  .founder-body { margin-left: auto; margin-right: auto; }   /* centre the story block when the row stacks */
  .founder-body p { text-align: center; }                    /* …and centre its lines (base is left-aligned) */
}

/* ================================================================
   HERO MEDIA PILL + VIDEO LIGHTBOX
   A wide rounded "oval pill" in the hero's open right space: a poster
   thumbnail with an expand (⤢) button. Click → the film opens in a
   centred lightbox (loads on demand, plays with sound + controls).
   ================================================================ */
.hero-media {
  flex: 0 0 auto;                   /* sits to the RIGHT of the CTA inside .hero-actions */
  width: clamp(200px, 20vw, 256px); /* bigger film pill (the smaller headline makes room) */
}
.hero-media-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: none;
  border-radius: 64px;              /* wide oval pill — generous rounding */
  overflow: hidden;
  cursor: pointer;
  background: var(--rose);          /* magenta fallback until the poster frame is set */
  box-shadow: 0 30px 60px -30px rgba(30,16,40,0.5);
  transition: transform 0.4s var(--ease-out-soft), box-shadow 0.4s var(--ease-out-soft);
}
.hero-media-thumb:hover { transform: translateY(-3px); box-shadow: 0 42px 72px -28px rgba(30,16,40,0.55); }
.hero-media-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-media-expand {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(20,12,28,0.42);
  backdrop-filter: blur(6px) saturate(1.1);
  color: #F3EDE1;
  transition: background 0.3s ease, transform 0.3s var(--ease-out-soft);
}
.hero-media-thumb:hover .hero-media-expand { background: rgba(20,12,28,0.62); transform: translate(-50%,-50%) scale(1.07); }
.hero-media-expand svg { width: 15px; height: 15px; }

/* lightbox */
.video-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(15,8,20,0.82);
  backdrop-filter: blur(8px);
  animation: videoModalIn 0.3s ease;
}
.video-modal[hidden] { display: none; }
.video-modal-frame {
  width: min(100%, 1100px);
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6);
}
.video-modal-video { width: 100%; height: 100%; display: block; }
.video-modal-close {
  position: absolute; top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem);
  width: 48px; height: 48px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255,255,255,0.14); color: #fff;
  font-size: 1.9rem; line-height: 1;
  display: grid; place-items: center;
  transition: background 0.25s ease;
}
.video-modal-close:hover { background: rgba(255,255,255,0.28); }
@keyframes videoModalIn { from { opacity: 0; } to { opacity: 1; } }

.reduce-motion .hero-media-thumb,
.reduce-motion .hero-media-expand,
.reduce-motion .video-modal { transition: none; animation: none; }

/* mobile: stack the lower row — subtext, then the button + pill cluster */
@media (max-width: 880px) {
  .hero-actions { position: static; flex-wrap: wrap; align-items: flex-start; gap: 1.1rem; margin-top: 1.6rem; }
  .hero-media { width: min(100%, 340px); }
}

/* attribution — natural case, dash-led, muted */
.founder-attrib {
  font-family: var(--body); font-weight: 500;
  font-size: 0.95rem; letter-spacing: 0.01em; text-transform: none;
  color: var(--paper); margin: 0;   /* paper-cream — secondary on the garnet fill (5.1:1) */
}
/* the name now leads, above the story */
.founder-sign {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 1.3rem;
}
.founder-underline {
  width: 100%; border: 0;
  border-top: 1px solid rgba(21, 19, 28, 0.16);
  margin: 2.4rem 0 0;
}
/* collapsible "Read more" */
.founder-toggle {
  display: inline-block; margin: 0.7rem 0 0;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 0.82em; font-weight: 700; color: var(--ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.founder-toggle:hover { text-decoration-thickness: 2px; }
.founder-rest { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease-out-soft); }
.founder-rest .founder-rest-inner { overflow: hidden; min-height: 0; }
.founder-rest.is-open { grid-template-rows: 1fr; }
.founder-rest-inner > p:last-child { margin-bottom: 0; }
.reduce-motion .founder-rest { transition: none; }

/* ================================================================
   CYCLE JOURNEY — responsive (narrow screens)
   Stack timeline marker above the day-body content.
   ================================================================ */
@media (max-width: 880px) {
  .cycle-journey { padding: 4rem 0 3rem; }
  .cycle-intro { padding: 0 1.5rem; margin-bottom: 2.5rem; }
  .cycle-line { left: 10px; width: 52px; top: 5rem; bottom: 6rem; }   /* JS centres on the dots; width gives swing room */
  .day {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 2.5rem 1.5rem 2.5rem 70px;
    min-height: auto;
  }
  .day-marker { left: 30px; top: 3.2rem; }
  .day-tick { width: 24px; }
  .day-label { font-size: 0.68rem; }
  .day-label em { font-size: 0.82rem; }
  .day-body { grid-column: 1; padding-top: 0; grid-template-columns: 1fr; column-gap: 0; }
  .day-body > :not(.day-meta) { grid-column: 1; }
  /* Day 08 stacking is handled by the max-width:960px block above */
  .day--flip .day-body { grid-template-columns: 1fr; column-gap: 0; gap: 1.4rem; }
  .day--flip .day-body > .day-meta { grid-column: 1; grid-row: auto; }
  .day--flip .day-meta { align-items: baseline; text-align: left; }
  .day-meta {
    position: static;
    top: auto;
    flex-direction: row;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
  }
  .day-num { font-size: 3rem; }
  .day-title { font-size: clamp(1.7rem, 5vw, 2.4rem); }
  .day-text, .day-sub { font-size: 1rem; }

  .cycle-more { padding: 2rem 1.5rem 4rem; }

  .scene--founder { padding: 5rem 1.5rem; }
}

/* founder two-column stacks only on true-narrow screens */
@media (max-width: 720px) {
  .founder-grid { grid-template-columns: 1fr; row-gap: 1.8rem; }
  .founder-note { max-width: 60ch; padding-top: 0; }
}

/* ================================================================
   STICKY MOBILE CTA
   ================================================================ */
.sticky-cta {
  position: fixed;
  bottom: 1rem; left: 1rem; right: 1rem;
  z-index: 90;
  opacity: 0;
  transform: translateY(120%);
  transition: opacity 0.4s var(--ease-out-soft),
              transform 0.4s var(--ease-out-soft);
  display: none;
}
.sticky-cta a {
  display: flex;
  align-items: center; justify-content: center;
  gap: 0.6rem;
  background: var(--orange);
  color: var(--brown);
  padding: 1.1rem 1.4rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--orange) 50%, transparent);
}
.sticky-cta a span { transition: transform 0.3s var(--ease-out-soft); }
.sticky-cta a:hover span { transform: translateX(4px); }
.sticky-cta.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* BUTTONS — BLACK by default, fill to ORANGE on hover (the ticker stays orange).
   Placed after all the button rules so it wins on source order; the hover orange
   resolves from the local --orange override (#F0331E) already set on these elements. */
.nav .cta,
.btn-primary,
.sticky-cta a {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.nav .cta:hover,
.btn-primary:hover,
.sticky-cta a:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--paper);
}

/* HERO button — VERMILION OUTLINE (transparent fill, vermilion border + text) on the
   light cream hero; inverts to a solid vermilion fill on hover for feedback */
.scene--01 .btn-primary {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--paper);
}
.scene--01 .btn-primary:hover {
  background: color-mix(in srgb, var(--orange) 86%, #000);
  border-color: color-mix(in srgb, var(--orange) 86%, #000);
  color: var(--paper);
}
/* NAV button (hero v2) — solid indigo fill to match the hero CTA; darkens on hover */
.nav .cta {
  --nav-fill: var(--indigo-deep);
  background: var(--nav-fill);
  border-color: var(--nav-fill);
  color: var(--paper);
}
.nav .cta:hover {
  background: #161836;
  border-color: #161836;
  color: var(--paper);
}

/* ================================================================
   CINNABAR BUTTONS — unify every CTA to a cinnabar fill + white text
   (overrides the mixed indigo / ink / vermilion button rules above)
   ================================================================ */
.nav .cta,
.cta,
.btn-primary,
.wl-form button,
.sticky-cta a,
.hero-join,
.hero .capture button {
  --nav-fill: var(--orange);
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;                       /* white on cinnabar = 4.89:1 */
}
.nav .cta:hover,
.cta:hover,
.btn-primary:hover,
.wl-form button:hover,
.sticky-cta a:hover,
.hero-join:hover,
.hero .capture button:hover {
  background: color-mix(in srgb, var(--orange) 86%, #000);
  border-color: color-mix(in srgb, var(--orange) 86%, #000);
  color: #fff;
  transform: translateY(-1px);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 880px) {
  .nav { padding-top: 2rem; }   /* drop the pill a touch lower from the top edge on phones */
  .nav-inner { padding: 0.7rem 1.4rem; }
  .nav-links { display: none; }   /* section links hidden on mobile (single-page scroll); brand + CTA stay so the nav isn't empty */
  .nav .cta { font-size: 0.82rem; padding: 0.55rem 1rem; }   /* keep the CTA in the nav, just a touch more compact for the narrow pill */

  .scene { padding: 7rem 1.4rem 0; }
  .scene--founder { padding-top: 0; }   /* don't stack the blanket 7rem on top of the ticker→founder gap: the ticker's 40px + founder's 38px margin already give ~78px below, matching the ~82px above (was 193px below vs 82px = bottom heavy) */
  .scene-meta { margin-bottom: 2rem; gap: 0.7rem; }
  .sm-number { font-size: 1.8rem; }
  .sm-name { font-size: 0.75rem; }
  .scene-content { padding-bottom: 5rem; }

  .scene-horizon {
    width: calc(100% + 2.8rem);
    margin: auto -1.4rem 0;
    height: 100px;
  }
  .ann { font-size: 0.85rem; }

  .scroll-hint { left: 1.4rem; bottom: 7rem; }

  .fr-summary { gap: 0.9rem; padding: 1.3rem 0.2rem; }
  .feature-row.is-dark { padding: 2rem; }

  .wl-form { flex-direction: column; border-radius: 22px; padding: 0.6rem; }
  .wl-form input { padding: 0.9rem 1rem; }
  .wl-form button { width: 100%; }

  .sticky-cta { display: none; }   /* not needed — the fixed nav keeps the CTA visible at the top, so no duplicate bottom button */
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}
.reduce-motion .hero-eyebrow .dot,
.reduce-motion .scroll-hint span { animation: none; }
.reduce-motion .scroll-hint { display: none; }

.reduce-motion .hero-rotator { height: auto; }
.reduce-motion .rot-word {
  position: static;
  opacity: 1;
  transform: none;
  display: block;
  font-size: 0.62em;
  line-height: 1.1;
}

.reduce-motion .horizon-path {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}
.reduce-motion .ann { opacity: 0.78 !important; transform: translateX(-50%) translateY(0) !important; }

.reduce-motion .cta:hover,
.reduce-motion .btn:hover { transform: none; }
.reduce-motion .fr-chevron { transition: none; }
.reduce-motion details[open] .fr-body { animation: none; }
.reduce-motion .sticky-cta { transform: none; }

/* ================================================================
   WHO IT'S FOR — the conditions as one flowing, colour-coded statement
   (moved out of the hero to keep it calm). Sits between ticker and cycle.
   ================================================================ */
.forwho {
  position: relative; z-index: 1;
  background: transparent;                                   /* the floating peach card (.forwho-inner) carries the fill now */
  margin: var(--sp-section) 0 0;   /* no gap below — the magenta band flows straight into the indigo mailing list (flat seam, jewel close) */
  width: 100%;
  padding: 0 clamp(1.25rem, 4vw, 3rem);                      /* page gutter — contained card, like the founder section */
  display: flex; justify-content: center;                    /* centre the floating card */
}
/* the "who" card is smooth peach — no grain (matches the founder card) */
.forwho::after { display: none; }
/* film grain on the founder + waitlist (mailing) panels — same desaturated grain as .forwho,
   z-index 1 so it textures the panel background and sits below the content (.scene-content z-index 2) */
.scene--founder::after,
.scene--06::after,
.footer::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23pg)'/%3E%3C/svg%3E");
  background-size: 200px 200px; opacity: 0.4; mix-blend-mode: soft-light;   /* gentler grain on the dark garnet */
}
.forwho-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: calc(var(--grid-max) - var(--grid-edge) * 2); margin: 0 auto;
  background: linear-gradient(135deg, #FCE3CD 0%, #FBDFC5 55%, #F6D2B0 100%);   /* peach — same warm card as the founder; dark text reads on it */
  border-radius: 40px;   /* contained floating card — runs 1st column → last column, matching the founder card */
  padding: calc(clamp(3rem, 6vw, 5rem) + 2.5rem) clamp(2.5rem, 5vw, 4rem) calc(clamp(3rem, 6vw, 5rem) + 2rem);   /* top/horiz/bottom — bottom trimmed 0.5rem to optically even the gap (the statement's looser line-height adds ~7px of space below its last line) */
  overflow: hidden;
  text-align: center;
}
/* smooth peach — no grain (matches the founder card) */
.forwho-inner::after { display: none; }
.forwho-inner > * { position: relative; z-index: 1; }   /* content sits above the grain */
.fw-head {
  font-family: var(--rhd); font-weight: 420;
  font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.04; letter-spacing: -0.02em;   /* eased back again — section read slightly too big */
  color: var(--orange);   /* cinnabar heading on the peach — matches the founder card's orange greeting */
  text-align: center; margin: 0 0 var(--sp-head); text-wrap: balance;
}
.fw-head em { font-family: var(--serif); font-style: italic; font-weight: 400; }   /* "Dips" — Newsreader italic, inherits the cinnabar heading */
.fw-statement {
  font-family: var(--rhd); font-weight: 420;   /* Red Hat base — Newsreader-italic conditions */
  font-size: clamp(1.4rem, 2.5vw, 1.85rem); line-height: 1.45; letter-spacing: -0.01em;   /* eased down; min 1.4rem keeps the 1.1em conditions at ~24.6px = large-text AA tier */
  color: var(--indigo-deep);   /* indigo framing — unified with the "overlap" line; conditions pop against it */
  text-align: center; text-wrap: pretty;
  max-width: 50rem; margin: 0 auto;
}
.fw-statement em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1em; }   /* conditions — bumped up: Newsreader italic reads smaller per-px than Red Hat, so this matches them visually (and lets them pop) */
/* each condition in its own brand hue (the "condition TEXT tier"), deepened where needed for AA on the peach */
/* conditions in their DEEP brand inks — the canonical light-bg palette (each clears AA on the peach) */
.fw-statement em:nth-of-type(1){ color: var(--adhd-ink); }    /* ADHD — vermilion */
.fw-statement em:nth-of-type(2){ color: var(--autism-ink); }  /* autism — blue */
.fw-statement em:nth-of-type(3){ color: var(--audhd-ink); }   /* AuDHD — violet */
.fw-statement em:nth-of-type(4){ color: #000000; }            /* bipolar — black (the achromatic / neutral condition) */
.fw-statement em:nth-of-type(5){ color: var(--period-ink); }  /* periods — deep red */
.fw-statement em:nth-of-type(6){ color: var(--peri-ink); }    /* perimenopause — orchid */
.fw-statement em:nth-of-type(7){ color: var(--hrt-ink); }     /* HRT — green */
.fw-statement em:nth-of-type(8){ color: var(--pmdd-ink); }    /* PMDD/PME — teal */
.fw-statement em:nth-of-type(9){ color: #9A7000; }            /* endometriosis — saturated deep gold (cleaner than the muddy --endo-ink, which read olive on the peach) */
.fw-statement em:nth-of-type(10){ color: var(--pcos-ink); }   /* PMOS (PCOS) — deep cyan */
.fw-statement .fw-quiet {
  font-family: var(--rhd);    /* Red Hat framing — same size as the lead, recedes by colour not size */
  font-weight: 400;
  font-size: 1em;
  color: var(--indigo-deep);     /* indigo — set apart from the ink framing (echoes the founder's indigo body) */
}

/* ---- privacy promise — frameless, all-indigo text on the cream, with the cinnabar flower-lock badge ---- */
.privacy-note {
  text-align: center;
  max-width: var(--grid-max);
  margin: var(--sp-section) auto;
  padding: 0 var(--grid-edge);
}
.privacy-note-lock {
  position: relative;
  width: clamp(64px, 5vw, 80px); aspect-ratio: 1 / 1; margin: 0 auto 1.4rem;
  display: grid; place-items: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23BC4F2B' d='M171.219 80.9174C189.016 84.9391 200 91.1553 200 100C200 108.845 189.016 115.061 171.219 119.083C184.622 131.465 191.026 142.34 186.604 150C182.181 157.66 169.561 157.551 152.136 152.135C157.552 169.56 157.661 182.18 150.001 186.603C142.341 191.025 131.465 184.62 119.083 171.217C115.061 189.016 108.845 200 100 200C91.1553 200 84.9391 189.016 80.9174 171.219C68.5358 184.621 57.6607 191.025 50.001 186.603C42.3411 182.18 42.4496 169.56 47.8658 152.135C30.4413 157.551 17.8209 157.66 13.3984 150C8.97604 142.34 15.3802 131.465 28.7828 119.083C10.9842 115.061 -1.50684e-06 108.845 0 100C3.86626e-07 91.155 10.9843 84.9387 28.7828 80.917C15.3802 68.5352 8.97604 57.6598 13.3984 50C17.8209 42.3401 30.4414 42.4487 47.8658 47.8648C42.4496 30.4404 42.3411 17.8199 50.001 13.3975C57.6607 8.97513 68.5358 15.379 80.9174 28.7812C84.9391 10.9836 91.1553 0 100 0C108.845 0 115.061 10.9843 119.083 28.7829C131.465 15.3795 142.341 8.97495 150.001 13.3975C157.661 17.8199 157.552 30.4404 152.136 47.8648C169.561 42.4487 182.181 42.3401 186.604 50C191.026 57.6599 184.622 68.5354 171.219 80.9174Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.privacy-note-lock svg { position: relative; z-index: 1; width: 46%; height: 46%; display: block; color: var(--paper); }   /* cream padlock on the cinnabar flower */
.privacy-note-head {
  font-family: var(--rhd); font-weight: 600;
  font-size: clamp(1.85rem, 3.2vw, 2.7rem); line-height: 1.12; letter-spacing: -0.02em;
  color: var(--indigo-deep); margin: 0; text-wrap: balance;
}
.privacy-note-head em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.04em; color: inherit; }
.privacy-note-sub {
  font-family: var(--body); font-weight: 400;
  font-size: clamp(1.02rem, 1.2vw, 1.18rem); line-height: 1.6;
  color: var(--indigo-deep); max-width: 42rem; margin: var(--sp-head) auto 0;
  text-wrap: pretty;
}
.privacy-note-sub .brand { color: inherit; }

/* ================================================================
   CYCLE ACCORDION — calm two-column "how dips works" (replaced the
   pinned cycle-journey). Left: sticky intro. Right: single-open rows,
   each with an animated illustrative symbol + emotional hero + desc.
   ================================================================ */
.cycle-accordion {
  background: var(--paper);     /* now sits on the page cream (moved out of the sun-zone) — gives the grain a surface to blend with */
  position: relative; z-index: 1;
  margin-top: var(--sp-section);   /* gap to the stats band = the cards→privacy-panel gap (same --sp-section + section-padding tokens), so they match at every viewport */
  padding: 0 var(--grid-edge);   /* top 0 → the gap above 'Built for every dip.' = the section margin-top (90px), matching the cards→'who' gap below */
  --orange: #E0402E;       /* ACCENT: this section's accent is now vermilion orange — every var(--orange)/--coral/--orange-ink inside resolves to it */
}
/* consistent film grain across the section — same desaturated overlay grain as forwho/waitlist (0.3) */
.cycle-accordion::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='cyg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23cyg)'/%3E%3C/svg%3E");
  background-size:200px 200px; opacity:0.3; mix-blend-mode:overlay;
}
.cyc {
  position: relative; z-index: 1;   /* content sits above the section grain */
  max-width: 1240px;
  margin: 0 auto;
  /* no extra padding-bottom — the section's own padding is symmetric top/bottom */
  /* film grain for the flip cards (inherits to .flip-front / .flip-back) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='cg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23cg)'/%3E%3C/svg%3E");
  --flower:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23BC4F2B' d='M171.219 80.9174C189.016 84.9391 200 91.1553 200 100C200 108.845 189.016 115.061 171.219 119.083C184.622 131.465 191.026 142.34 186.604 150C182.181 157.66 169.561 157.551 152.136 152.135C157.552 169.56 157.661 182.18 150.001 186.603C142.341 191.025 131.465 184.62 119.083 171.217C115.061 189.016 108.845 200 100 200C91.1553 200 84.9391 189.016 80.9174 171.219C68.5358 184.621 57.6607 191.025 50.001 186.603C42.3411 182.18 42.4496 169.56 47.8658 152.135C30.4413 157.551 17.8209 157.66 13.3984 150C8.97604 142.34 15.3802 131.465 28.7828 119.083C10.9842 115.061 -1.50684e-06 108.845 0 100C3.86626e-07 91.155 10.9843 84.9387 28.7828 80.917C15.3802 68.5352 8.97604 57.6598 13.3984 50C17.8209 42.3401 30.4414 42.4487 47.8658 47.8648C42.4496 30.4404 42.3411 17.8199 50.001 13.3975C57.6607 8.97513 68.5358 15.379 80.9174 28.7812C84.9391 10.9836 91.1553 0 100 0C108.845 0 115.061 10.9843 119.083 28.7829C131.465 15.3795 142.341 8.97495 150.001 13.3975C157.661 17.8199 157.552 30.4404 152.136 47.8648C169.561 42.4487 182.181 42.3401 186.604 50C191.026 57.6599 184.622 68.5354 171.219 80.9174Z'/%3E%3C/svg%3E");
}

/* LEFT — "How dips works" eyebrow stays static (normal flow, scrolls away);
   only the hero below it pins. Stretch the column to full .cyc height so the
   sticky hero has room to travel. */
.cyc-left { align-self: stretch; position: relative; }
.cyc-hero { position: sticky; top: 7rem; }   /* pin below the fixed nav pill (≈91px) so it never clips */
.cyc-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: 0.9rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin: 0 0 1.6rem; }
.cyc-eyebrow .m {
  color: var(--coral); font-size: 1.05rem;
  display: inline-block;
  animation: eyebrowPulse 3s ease-in-out infinite;   /* same pulse as the hero / who-it's-for ✱ (was a continuous spin) */
}
@keyframes markSpin { to { transform: rotate(360deg); } }
.reduce-motion .cyc-eyebrow .m { animation: none; }
.cyc-head { font-family: var(--rhd); font-weight: 420; font-size: clamp(3rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); margin: 0; }   /* "Built for every dip." — Red Hat (matches the hero), brand indigo ink */
.cyc-head em { font-family: var(--serif); font-style: italic; font-weight: 420; font-size: 1.04em; color: var(--ink); }   /* "every dip." — Newsreader-italic accent, same as the hero headline */
.cyc-desc { font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 1.55; color: var(--ink-soft); max-width: none; margin: var(--sp-head) 0 0; }
.cyc-desc .brand { color: inherit; }

/* PRIVACY REASSURANCE — centered statement under the cards; even vertical padding */
.cyc-privacy {
  text-align: center;
  padding: clamp(3.75rem, 8vh, 6.5rem) 0;   /* even top & bottom — same token as the section's own vertical padding */
  margin-top: var(--sp-section);            /* gap above the panel == the 'blood-boiling stats' → 'Built for every dip.' rhythm */
}
/* the promise sits inside a soft, contained panel — faintly indigo-tinted so it
   reads as "held / safe", echoing the message without a loud colour band */
.cyc-priv-panel {
  position: relative; isolation: isolate;
  max-width: 46rem; margin: 0 auto;
  background: radial-gradient(125% 115% at 45% 42%, #242350 0%, #1A1A3F 55%, #14122C 100%);   /* deep indigo — the "locked down / secure" panel; cinnabar flower badge + cream text pop on it */
  border-radius: clamp(22px, 3vw, 30px);
  padding: clamp(2.75rem, 5vh, 3.75rem) clamp(2rem, 5vw, 4rem);
}
/* same film grain as the hero cream the panel mirrors */
.cyc-priv-panel::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='pvg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23pvg)'/%3E%3C/svg%3E");
  background-size:200px 200px; opacity:0.4; mix-blend-mode:soft-light;   /* gentle grain on the dark panel */
}
.cyc-priv-lock, .cyc-priv-head, .cyc-priv-sub{ position:relative; z-index:1; }
.cyc-priv-lock {
  position: relative;
  width: clamp(72px, 6vw, 92px); aspect-ratio: 1 / 1; margin: 0 auto 1.5rem;
  display: grid; place-items: center;
  background: var(--flower) center/contain no-repeat;   /* cinnabar flower_4 badge — same mark as the feature cards */
}
.cyc-priv-lock::after {   /* film grain clipped to the flower shape, same as the card badges */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grain); background-size: 120px 120px; mix-blend-mode: soft-light; opacity: .85;
  -webkit-mask: var(--flower) center/contain no-repeat; mask: var(--flower) center/contain no-repeat;
}
.cyc-priv-lock svg { position: relative; z-index: 1; width: 46%; height: 46%; display: block; color: var(--paper); }   /* cream lock on the cinnabar flower */
.cyc-priv-head {
  font-family: var(--rhd); font-weight: 600;
  font-size: clamp(1.85rem, 3.2vw, 2.7rem); line-height: 1.12; letter-spacing: -0.02em;
  color: var(--paper); margin: 0; text-wrap: balance;   /* cream on the deep-indigo panel */
}
.cyc-priv-head em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.04em; color: inherit; }
.cyc-priv-sub {
  font-family: var(--body); font-weight: 400;
  font-size: clamp(1.02rem, 1.2vw, 1.18rem); line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 82%, var(--ink)); max-width: 42rem; margin: var(--sp-head) auto 0;   /* soft cream — a touch quieter than the heading */
  text-wrap: pretty;
}

/* RIGHT — accordion (bottom divider is the framed band's top hairline below) */
.acc { margin-top: calc(clamp(2rem, 5vh, 3.5rem) + 1.5rem); width: 100%; max-width: 680px; justify-self: start; }   /* align near the hero's top; slightly narrower box span */
/* each phase is its own rounded BOX/FRAME (matches the page's round vibe) */
.acc-row {
  border: 1px solid rgba(74,24,40,.14);       /* warm hairline (not cool ink) */
  border-radius: 26px;
  background: var(--hero-cream);              /* card fill = the hero's cream #F3EDE1 */
  padding: 0 1.9rem;                          /* original box side padding */
  margin-bottom: 1.05rem;                     /* gap between the boxes */
  box-shadow: none;
  transition: border-color .35s, background .35s, box-shadow .35s;
}
.acc-row:last-child { margin-bottom: 0; }
.acc-row:hover { border-color: rgba(74,24,40,.28); }
.acc-row.is-open {                            /* expanded box = same hero cream, lifted by a soft shadow */
  border-color: rgba(60,62,114,.28);          /* indigo-tinted hairline when open */
  background: var(--hero-cream);               /* same cream as the hero */
  box-shadow: 0 14px 34px -22px rgba(60,62,114,.3);
}
.acc-head { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 2.8rem 0; display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: start; gap: 1rem; }   /* icon · text · chevron — taller boxes (more vertical breathing) */
/* MARGIN NUMERAL RULER — the phase numbers (01·08·14·22) seated in a right-aligned
   margin column, italic serif, forming a numeric ruler down the accordion's left edge */
/* PER-PHASE COLOUR — each row carries its own --phase-c (number + name + open
   icon) and --phase-em (the emphasised phrase in its hero line) */
/* all phases flattened to the orange accent (num · name · icon · hero-em) */
.acc-row:nth-child(1) { --phase-c: var(--orange); --phase-em: var(--orange); }   /* Menstruation */
.acc-row:nth-child(2) { --phase-c: var(--orange); --phase-em: var(--orange); }   /* Follicular */
.acc-row:nth-child(3) { --phase-c: var(--orange); --phase-em: var(--orange); }   /* Ovulation */
.acc-row:nth-child(4) { --phase-c: var(--orange); --phase-em: var(--orange); }   /* Luteal */

.acc-num {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 1.15rem; line-height: 1; color: var(--phase-c, var(--ink-faint));
  text-align: right; margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
  transition: color .35s;
}

/* per-row illustrative symbol (always animating; open row turns ink) */
.acc-ico { width: 26px; height: 26px; overflow: visible; color: var(--phase-c, var(--ink-soft)); margin-top: 1.5rem; transition: color .35s; }   /* icons always wear their phase colour */
.acc-row.is-open .acc-ico { color: var(--phase-c, var(--orange-ink)); }   /* open icon takes the phase colour */
/* 01 · flowing signal */
.ico-mens path { stroke-dasharray: 18 82; animation: mens 2.2s linear infinite; }
@keyframes mens { to { stroke-dashoffset: -100; } }
/* 08 · connect-the-dots (pattern emerging) */
.ico-foll .cl { stroke-dasharray: 1; stroke-dashoffset: 1; animation: foll 3s ease-in-out infinite; }
@keyframes foll { 0% { stroke-dashoffset: 1; } 45%,72% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
/* 14 · radiating rings */
.ico-ovu .ring { transform-box: view-box; transform-origin: 13px 13px; animation: ovu 2.8s ease-out infinite; }
.ico-ovu .ring2 { animation-delay: 1.4s; }
@keyframes ovu { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(4); opacity: 0; } }
/* 22 · partner sync (pulse travels between two) */
.ico-lut .pulse { animation: lut 2.4s ease-in-out infinite; }
@keyframes lut { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 50% { transform: translateX(12px); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .acc-ico * { animation: none !important; } .ico-foll .cl { stroke-dashoffset: 0; } }

.acc-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--phase-c, var(--ink-faint)); margin-bottom: .55rem; transition: color .5s ease; }
.reduce-motion .acc-tag { transition: none; }
.acc-hero { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.85rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); }   /* emotional line = ink; the italic em carries the deep-raspberry accent */
.acc-hero em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--phase-em, var(--ink)); }
.acc-chev { width: 14px; height: 14px; color: var(--rust-soft); margin-top: 1.85rem; transition: transform .35s var(--ease-out-soft); }
.acc-row.is-open .acc-chev { transform: rotate(180deg); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out-soft); }
.acc-row.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body-inner { overflow: hidden; min-height: 0; }
.acc-pad { padding: 0.2rem 0 1.7rem 3.6rem; max-width: 52ch; }   /* indent matches the text column (icon + gap) */
.acc-desc { font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 1.6; color: var(--rust-soft); margin: 0; }
.acc-desc em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--orange); }
.acc-desc strong { font-weight: 700; color: var(--rust); }
.acc-desc--secure { margin-top: 1.1rem; }

/* closing statement — a centered serif statement framed by two full-width hairlines */
/* closing line — sits in the right column under the last accordion row, styled like an .acc-desc */
.cyc-more {
  margin: clamp(2.5rem, 5vh, 4rem) 0 0;   /* back up 0.5cm (drop removed) */
  max-width: none;
  text-align: left;
  font-family: var(--body);
  font-weight: 400;
  font-size: 14px;                                 /* fixed 14px */
  line-height: 1.5;
  color: var(--orange);
}
.cyc-more em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--orange-ink); }

/* ── how dips works — contained text cards with a cinnabar flower-badge icon ── */
.cyc-intro { max-width: var(--grid-max); margin: 0 auto clamp(3.25rem, 6.5vh, 5.25rem); padding: 0 var(--grid-edge); }   /* heading + subtext sit on the page's 12-col grid (matches the hero & the grid overlay); the cards stay full-width */
.hd-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,1.6vw,1.5rem); max-width:var(--grid-max); margin:0 auto; padding:0 var(--grid-edge); }   /* cards sit on the same 12-col grid as the heading/subtext, so card 4's text stays inside its column */
/* ---- feature-cards mobile carousel controls (track styles live in the ≤560px query) ---- */
.hd-controls { display:none; }
.hd-arrow {
  flex:none; width:3rem; height:2.7rem; padding:0;
  display:grid; place-items:center;
  border:1.5px solid color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius:999px; background:transparent; color:var(--ink); cursor:pointer;
  transition:border-color .2s, color .2s, opacity .2s;
}
.hd-arrow svg { width:1.15rem; height:1.15rem; }
.hd-arrow:not(:disabled):hover { border-color:var(--orange); color:var(--orange); }
.hd-arrow:disabled { opacity:.3; cursor:default; }
.hd-dots { display:flex; align-items:center; gap:0.45rem; }
.hd-dot {
  width:0.5rem; height:0.5rem; padding:0; border:0; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 28%, transparent); cursor:pointer;
  transition:width .25s var(--ease-out-soft), background .25s;
}
.hd-dot.is-active { width:1.5rem; background:var(--orange); }
@media (max-width:980px){ .hd-grid{ grid-template-columns:repeat(2,1fr); gap:clamp(1.3rem,2.4vw,1.8rem); } }
@media (max-width:560px){
  /* horizontal scroll-snap carousel — one card at a time, peek of the next */
  .hd-grid{
    display:flex; grid-template-columns:none; max-width:none; margin:0;
    overflow-x:auto; overflow-y:hidden; touch-action:pan-x;   /* horizontal-only: kill the vertical rubber-band that let the cards drag up/down on touch */
    scroll-snap-type:x mandatory; scroll-padding:0 var(--grid-edge);
    -webkit-overflow-scrolling:touch; gap:1rem; padding:0.5rem var(--grid-edge);
    scrollbar-width:none;
  }
  .hd-grid::-webkit-scrollbar{ display:none; }
  .hd-grid .card{ flex:0 0 84%; scroll-snap-align:start; }
  .hd-controls{ display:flex; align-items:center; justify-content:center; gap:1.1rem; margin-top:1.5rem; }
}

/* warm cream card — sibling of the hero / founder cards */
.card{
  /* no fixed aspect-ratio: each card grows to fit its content; the grid equalises all four to the tallest (card 4), so nothing clips */
  position:relative; overflow:hidden;
  background:var(--hero-cream);
  border:1px solid color-mix(in srgb, var(--ink) 8%, var(--hero-cream));
  border-radius:22px;
  padding:clamp(1.5rem,2.1vw,2rem);
  display:flex; flex-direction:column; justify-content:flex-start; text-align:center;   /* badges + headings align across the row; cards are equal-height so nothing clips, body length just varies below */
  transition:border-color .3s var(--ease-out-soft), transform .3s var(--ease-out-soft);
}
/* film grain on the card surface, behind the content so the type stays crisp */
.card::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:var(--grain); background-size:150px 150px; mix-blend-mode:overlay; opacity:.6; }
.card > *{ position:relative; z-index:1; }
/* feature card "pop" on hover — high specificity (0,4,0) beats the reveal system's .is-in{transform:none} */
/* pointer:fine so a TAP on a touchscreen can't trigger/stick this lift-scale mid-swipe — mouse only */
@media (hover:hover) and (pointer:fine){
  .cyc .hd-grid .card:hover{
    transform: translateY(-6px) scale(1.025);
    box-shadow: 0 22px 46px -22px rgba(26, 26, 63, 0.30);
    border-color: color-mix(in srgb, var(--orange) 32%, var(--hero-cream));
    transition: transform 0.3s var(--ease-out-soft), box-shadow 0.3s var(--ease-out-soft), border-color 0.3s var(--ease-out-soft);   /* snappy pop in */
  }
}
/* once revealed, the card's transition must cover the hover props too — keeps the reveal slide/fade at 1.6s, lets the pop ease back out smoothly */
.js-anim .hd-grid .card.is-in{ transition: opacity 1.6s var(--ease-out-soft), transform 1.6s var(--ease-out-soft), box-shadow 0.35s var(--ease-out-soft), border-color 0.35s var(--ease-out-soft); }

/* flower_4 badge (cinnabar) with the line icon cut out inside it (cream) */
.card-mark{ position:relative; width:clamp(52px,4.3vw,64px); aspect-ratio:1/1; margin:0 auto clamp(0.75rem,1.4vh,1.05rem);
  display:grid; place-items:center; background:var(--flower) center/contain no-repeat; }
.card-mark::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--grain); background-size:120px 120px; mix-blend-mode:soft-light; opacity:.85;
  -webkit-mask:var(--flower) center/contain no-repeat; mask:var(--flower) center/contain no-repeat; }   /* grain clipped to the flower shape */
.card-mark svg{ width:48%; height:48%; display:block; color:var(--paper); }

/* heading reserves 3 lines so the subtexts align across the row */
.card-title{ font-family:var(--rhd); font-weight:600; font-size:clamp(1.15rem,1.38vw,1.42rem); line-height:1.16;
  letter-spacing:-.012em; color:var(--ink); margin:0; min-height:3.8em; text-wrap:balance; }
.card-title em{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.05em; color:inherit; }
.card-desc{ font-family:var(--body); font-weight:400; font-size:clamp(.86rem,.92vw,.96rem); line-height:1.54;
  color:var(--ink-soft); margin:1rem 0 0; text-wrap:wrap; }   /* greedy wrap fills the full column width (was 'pretty', which balanced card 1 too narrow) */
.card-desc em{ font-style:normal; font-weight:600; color:var(--ink); }
@media (max-width:560px){ .card{ aspect-ratio:auto; } .card-title{ min-height:0; } }
@media (prefers-reduced-motion:reduce){ .cyc .hd-grid .card, .cyc .hd-grid .card:hover{ transition:none; transform:none; box-shadow:none; } }

/* ================================================================
   THE RESEARCH GAP — "blood-boiling stats" (self-contained, scoped to .rgap)
   sits between #cycle and #founder; orange editorial card on the warm ground
   ================================================================ */
.rgap{ --orange:#BC4F2B; --cream:#FCE7DD; --bright:#FFF4EC; --brick:#A02C18; --dim:rgba(252,231,221,.6);
  --rg-serif:'Newsreader',Georgia,serif; --rg-body:'Lexend',system-ui,sans-serif;
  --rg-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='cg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23cg)'/%3E%3C/svg%3E");
  font-family:var(--rg-body); padding:0; }   /* full-bleed band — vertical breathing now lives on .frame */
.rgap *{ box-sizing:border-box; }
/* floating editorial frame — contained card on the warm paper, no shadow */
.rgap .frame{ position:relative; overflow:hidden; max-width:none; margin:0; background:var(--orange);
  border-radius:40px; padding:clamp(5.9rem,12vh,8rem) clamp(1.5rem,5vw,4rem); }   /* full-bleed cinnabar slab, 40px corners; vertical = ticker breathing (~130px) */
.rgap .frame::after{ content:""; position:absolute; inset:0; background-image:var(--rg-grain); background-size:200px 200px; mix-blend-mode:soft-light; opacity:.7; pointer-events:none; }
.rgap .frame>*{ position:relative; z-index:1; }
.rgap .rg-head{ text-align:center; max-width:none; margin:0 auto var(--sp-head); }
.rgap .rg-eye{ display:inline-flex; align-items:center; gap:.55rem; font-size:.9rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); margin:0; }   /* matches the for who / how / founder trio */
.rgap .rg-eye .m{ font-size:1.05rem; display:inline-block; animation:eyebrowPulse 3s ease-in-out infinite; }   /* same gentle rotate+pulse as the hero / cycle ✱ */
.reduce-motion .rgap .rg-eye .m{ animation:none; }
.rgap .rg-lede{ font-family:var(--rhd); font-weight:420; font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.15; letter-spacing:-.02em; color:#FFF4EC; margin:0 auto; max-width:none; }   /* hero pairing: Red Hat line, warm-white 4.5:1 */
.rgap .rg-lede em{ font-family:var(--rg-serif); font-style:italic; font-weight:400; font-size:1.04em; color:#FFFFFF; }   /* …Newsreader-italic "dips" accent — brightest, 4.9:1 */
.rgap .rg-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.6rem,2.6vw,2.8rem); align-items:start; max-width:1180px; margin:0 auto; }
@media (max-width:900px){ .rgap .rg-row{ grid-template-columns:repeat(2,1fr); gap:clamp(2.2rem,4vw,3rem); } }
@media (max-width:520px){
  .rgap .rg-row{ grid-template-columns:1fr; gap:4.25rem; max-width:260px; margin:0 auto; }   /* single column on phones (down-scroll), with roomier breathing (~70px) between the stacked figures (was ~32px) */
  .rgap .rg-head{ margin-bottom:4.25rem; }   /* match that 70px breathing between the heading and the first figure */
}
.rgap .rg-stat{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.rgap .rg-num{ font-family:var(--rhd); font-weight:500; line-height:.95; letter-spacing:-.02em; color:#FFFFFF; font-size:clamp(2.8rem,4vw,3.6rem); margin:0; }   /* white numerals in Red Hat Display (brand sans, was Newsreader serif) — 4.9:1 (dark-on-cinnabar can't reach AA) */
.rgap .rg-num .lead{ font-family:var(--rg-body); font-size:.32em; letter-spacing:.05em; text-transform:uppercase; color:#FFF4EC; margin-right:.45em; }   /* warm-white label, 4.5:1 */
.rgap .rg-num .w{ font-family:var(--rg-body); font-size:.32em; font-style:normal; letter-spacing:.05em; text-transform:uppercase; color:#FFF4EC; }   /* "women" now matches the other small-caps labels (around/up to/almost): uppercase Lexend, not serif italic */   /* warm-white, 4.5:1 */
.rgap .rg-viz{ min-height:84px; display:flex; align-items:flex-end; justify-content:center; margin:1.1rem 0 1.9rem; }
.rgap .rg-dotgrid{ display:grid; grid-template-columns:repeat(10,7px); gap:4px; width:max-content; margin:0 auto; }
.rgap .rg-dot{ width:7px; height:7px; border-radius:50%; background:var(--brick); }
.rgap .rg-dot.on{ background:var(--bright); }
.rgap .rg-cap{ font-family:var(--rg-body); font-size:1rem; line-height:1.5; color:#FFF7F1; width:min(100%,238px); margin:0 auto; }   /* bumped up again; #FFF7F1 on cinnabar = 4.6:1 (comfortably AA at this size) */
.rgap .rg-cap b{ color:#FFFFFF; font-style:italic; font-weight:400; }   /* brightest term — 4.9:1 */
.rgap .rg-people{ display:grid; grid-template-columns:repeat(10,1fr); grid-auto-rows:18px; align-content:end; justify-items:center; align-items:end; row-gap:6px; width:106px; min-height:62px; margin:0 auto; }
.rgap .rg-fig{ width:10px; height:18px; color:var(--bright); }
/* content is always visible; the numbers' count-up is the reveal (best-effort, degrades to static real numbers) */

@media (max-width: 880px) {
  .cyc-more { grid-column: 1; padding-left: 0; }
}

@media (max-width: 820px) {
  .cyc { grid-template-columns: 1fr; gap: 2.5rem; }
  .cyc-intro { text-align: center; }   /* centre "Built for every dip." + subtext on mobile to match the rest of the page (the cards below are already centred) */
  .cyc-left { align-self: start; }
  .cyc-hero { position: static; }
  .acc-pad { padding-left: 0; }
  .cyc-more { grid-column: 1; }
}