/* ── HOME PAGE STYLES ────────────────────────────────────────
   Brand tokens (--purple, --ink, --plum, --cream, --lavender,
   --hairline, --nav-height, etc.) live in css/styles.css.
   This file contains only home-page-specific layout + decoration. */

/* ── HERO ──────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  padding: calc(var(--nav-height) + 56px) var(--section-pad-h) 100px;
  overflow: hidden;
  background: var(--soft);
}

/* ============================================================
   DIAGONAL EDGE GLOWS
   Top-left purple + bottom-right plum.
   Medium intensity, aggressive spread, grainy texture.
   Applied on Hero, CoCE, Stats, How It Works, Trust, and Voices.
   ============================================================ */
.home-hero::before,
.coce-section::before,
.merged-band::before,
.voices-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 100% 80% at -5% -5%,
      rgba(124,58,237,0.32) 0%,
      rgba(124,58,237,0.18) 22%,
      rgba(124,58,237,0.08) 45%,
      rgba(124,58,237,0.02) 65%,
      transparent 82%),
    radial-gradient(circle 1800px at 140% 140%,
      rgba(140, 60, 180, 0.22) 0%,
      rgba(140, 60, 180, 0.17) 20%,
      rgba(140, 60, 180, 0.12) 35%,
      rgba(140, 60, 180, 0.07) 50%,
      rgba(140, 60, 180, 0.03) 65%,
      rgba(140, 60, 180, 0.01) 80%,
      transparent 100%);
}
/* Grainy SVG fractal noise overlay (same recipe as the hero phone glow).
   Sits above the color glow but still below content, multiplied over only
   the glow-painted areas via soft-light blend. */
.home-hero::after,
.coce-section::after,
.merged-band::after,
.voices-band::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.88  0 0 0 0 0.55  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 260px 260px;
}

/* Merged band corner glows — kept SMALL so they don't reach into
   the middle of the band where the HIW phones sit. Top-left purple
   and bottom-right plum footprints are both reduced vs CoCE's,
   because the HIW fade overlay depends on a near-white middle band
   to read as "phone dissolving into background." */
.merged-band::before {
  background:
    radial-gradient(ellipse 40% 28% at -10% -8%,
      rgba(124,58,237,0.16) 0%,
      rgba(124,58,237,0.08) 35%,
      transparent 70%),
    radial-gradient(circle 700px at 140% 140%,
      rgba(140, 60, 180, 0.12) 0%,
      rgba(140, 60, 180, 0.05) 35%,
      transparent 75%);
}

/* CoCE section: top-left corner glow scaled down significantly and
   faded earlier so it doesn't bleed into the headline area. The
   bottom-right plum has moved to HIW (which is now the visual end
   of the CoCE → Recommended → HIW trio). */
.coce-section::before {
  background:
    radial-gradient(ellipse 60% 48% at -5% -5%,
      rgba(124,58,237,0.24) 0%,
      rgba(124,58,237,0.14) 22%,
      rgba(124,58,237,0.06) 45%,
      rgba(124,58,237,0.015) 65%,
      transparent 78%);
}

/* Voices band: corner glows toned down to match CoCE + merged-band —
   smaller top-left purple footprint and reduced opacity, bottom-right
   plum scaled down so the band doesn't feel over-saturated. */
.voices-band::before {
  background:
    radial-gradient(ellipse 60% 48% at -5% -5%,
      rgba(124,58,237,0.24) 0%,
      rgba(124,58,237,0.14) 22%,
      rgba(124,58,237,0.06) 45%,
      rgba(124,58,237,0.015) 65%,
      transparent 78%),
    radial-gradient(circle 1400px at 140% 140%,
      rgba(140, 60, 180, 0.16) 0%,
      rgba(140, 60, 180, 0.11) 25%,
      rgba(140, 60, 180, 0.06) 45%,
      rgba(140, 60, 180, 0.02) 65%,
      transparent 90%);
}

/* Hero: keep the existing .home-hero-bg layer above the diagonal glow */
.home-hero::before, .home-hero::after { z-index: 0; }
.home-hero-bg { z-index: 1; position: relative; }
.home-hero-inner { position: relative; z-index: 2; }

/* Ensure inner content sits above the glow in the other sections */
.coce-inner, .hiw-inner, .e-stats-inner, .trust-inner, .voices-head, .voices-rail {
  position: relative;
  z-index: 1;
}

/* ============================================================
   MERGED BAND — Stats + HIW + Trust wrapped as one unit.
   Owns the shared white background, the top-entry + bottom-exit
   purple pools, and a SINGLE set of corner glows stretching the
   full band height. Inner sections stay transparent so this bg
   shows through continuously. No seams between sections. */
.merged-band {
  position: relative;
  overflow: hidden;
  /* Glow recipe — edge-focused so the MIDDLE of the band stays
     effectively white. The triple band contains the HIW phones,
     which use a white → transparent overlay (`.hiw-fade`) to
     "dissolve" into the background. That illusion only reads
     correctly if the pixels directly behind the overlay are
     close to pure white. If we let the glow reach into the
     middle of the band (as CoCE's 40%-tall ellipses do), the
     fade stops blending and you see a visible white wedge over
     a tinted background.
     Fix: shorter ellipses (18% vertical footprint, not 40%),
     hugging the top and bottom EDGES only, and pure white base
     (not cream) so the fade sits on a matching colour. Matches
     the tone used on mobile; applies at every breakpoint. */
  background: #FFFFFF;
}
/* Inner sections of merged-band lose their own background, borders, and
   glow pseudos — the band owns all of that. They keep padding + layout.
   Trust is excluded so it can keep its own (glow-free) white bg. */
.merged-band .e-stats-section,
.merged-band .hiw-section {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* ============================================================
   GLASS CARD — Kinso-style treatment.
   A subtle surface gradient (adds material feel) + a gradient
   border whose "hotspot" shifts with scroll, as if a highlight
   is rolling around the edge of each card.

   Two variants:
     - Default (light)  — for white cards (stats, trust, voices)
     - .glass-card--dark — for dark-fill cards (accent-d 675+)
     - .glass-card--brand — for brand-purple-fill cards (enterprise)

   The border uses the mask-composite "gradient border" trick:
   a ::before pseudo fills the card with a conic gradient, then
   a dual-mask punches out the interior so only the 1.5px edge
   remains visible.
   ============================================================ */
.glass-card {
  position: relative;
  isolation: isolate;
  /* --shimmer drives the rotation of the conic gradient hotspot.
     Scroll driver sets this -1 → 1 based on viewport position. */
  --shimmer: 0;
}
/* Surface gradient — adds a soft "lens" sheen across the card's face.
   Layered on top of the card's existing background. */
.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.06) 32%,
    rgba(255, 255, 255, 0) 60%,
    rgba(124, 58, 237, 0.025) 100%);
  mix-blend-mode: soft-light;
}
/* Gradient border — the hero of the effect. A conic gradient rotates
   around the card edge with one brighter "hotspot" that shifts via
   --shimmer. The mask-composite trick turns the full-card gradient
   into just a 1.5px edge. */
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;    /* thinner border so the reflective stops feel lighter */
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(
    from calc(var(--shimmer) * 180deg + 135deg),
    rgba(124, 58, 237, 0.10) 0deg,
    rgba(124, 58, 237, 0.18) 45deg,
    rgba(124, 58, 237, 0.28) 90deg,
    rgba(124, 58, 237, 0.18) 135deg,
    rgba(124, 58, 237, 0.10) 180deg,
    rgba(124, 58, 237, 0.08) 270deg,
    rgba(124, 58, 237, 0.10) 360deg);
  /* Mask to show only the padding area (the "border") */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
/* Content inside glass cards must sit above the surface gradient */
.glass-card > * {
  position: relative;
  z-index: 2;
}

/* Dark variant — used on .e-stat.accent-d (675+).
   Surface gradient uses lighter white highlights for contrast on the
   ink background, and the border uses a cooler palette so it reads
   as "cold glass" rather than "warm purple-tinted paper". */
.glass-card--dark::before {
  padding: 1.5px;   /* slightly thicker edge on dark cards */
  background: conic-gradient(
    from calc(var(--shimmer) * 180deg + 135deg),
    rgba(124, 58, 237, 0.25) 0deg,
    rgba(167, 120, 255, 0.55) 45deg,
    rgba(255, 255, 255, 0.70) 90deg,
    rgba(167, 120, 255, 0.55) 135deg,
    rgba(124, 58, 237, 0.28) 180deg,
    rgba(124, 58, 237, 0.18) 270deg,
    rgba(124, 58, 237, 0.25) 360deg);
}
.glass-card--dark::after {
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.04) 32%,
    rgba(255, 255, 255, 0) 60%,
    rgba(124, 58, 237, 0.15) 100%);
  mix-blend-mode: screen;
}

/* Brand variant — used on .trust-item--purple (enterprise tile).
   Surface gradient is subtly lightened toward the top; border uses
   brighter purples + whites so the edge reads as reflective. */
.glass-card--brand::after {
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 28%,
    rgba(0, 0, 0, 0.04) 62%,
    rgba(0, 0, 0, 0.10) 100%);
  mix-blend-mode: soft-light;
}
.glass-card--brand::before {
  padding: 1.5px;
  background: conic-gradient(
    from calc(var(--shimmer) * 180deg + 135deg),
    rgba(167, 120, 255, 0.35) 0deg,
    rgba(255, 255, 255, 0.50) 45deg,
    rgba(255, 255, 255, 0.80) 90deg,
    rgba(255, 255, 255, 0.50) 135deg,
    rgba(167, 120, 255, 0.40) 180deg,
    rgba(167, 120, 255, 0.25) 270deg,
    rgba(167, 120, 255, 0.35) 360deg);
}

/* ============================================================
   VOICES BAND — Stories + Voices + Founders wrapped as one unit.
   Owns a shared cream background that matches the mum/student
   feature groups, plus a single set of corner glows spanning
   the full band. Inner sections are transparent so the shared
   bg flows continuously without seams. */
.voices-band {
  position: relative;
  overflow: hidden;
  background: #FDFAF5;
}
.voices-band .stories-section,
.voices-band .voices-section,
.voices-band .founders-home {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* HIW-specific: the phone mockups have a white→transparent bottom fade
   that's meant to blend into the section bg. When a glow sits BEHIND the
   phones, the white fade contrasts against the tint. Fix: lift the glow
   layers ABOVE the phones (but keep text/headings above the glow). */
.hiw-section::before { z-index: 5; }
.hiw-section::after  { z-index: 3; }
.hiw-head            { position: relative; z-index: 4; }
.hiw-steps           { position: relative; z-index: 1; }

/* HIW closes the CoCE → Recommended → HIW trio. Mirrors CoCE's entry
   glows in reverse — strong purple-pool bottom edge ellipse and a
   plum bottom-right corner. Both painted via the section's ::before
   pseudo so they sit above the merged-band's white bg but behind the
   HIW phones (which set their own higher z-index). */
.hiw-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 140% 40% at 50% 108%,
      rgba(124,58,237,0.38) 0%,
      rgba(124,58,237,0.22) 14%,
      rgba(124,58,237,0.10) 28%,
      rgba(124,58,237,0.04) 40%,
      transparent 50%),
    radial-gradient(ellipse 60% 48% at 105% 105%,
      rgba(140, 60, 180, 0.20) 0%,
      rgba(140, 60, 180, 0.125) 22%,
      rgba(140, 60, 180, 0.06) 45%,
      rgba(140, 60, 180, 0.018) 65%,
      transparent 78%);
}


.home-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 78% 35%, #EDE9FE 0%, transparent 60%),
    radial-gradient(ellipse 42% 60% at 12% 80%, #FDF2F8 0%, transparent 55%),
    radial-gradient(ellipse 30% 25% at 85% 85%, rgba(140, 60, 180, 0.14) 0%, transparent 65%);
  pointer-events: none;
}
.home-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--max-w); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px; align-items: end;
}
.home-hero-eyebrow {
  /* Match the standard ed-eyebrow style used throughout the site:
     plain purple caps, no pill/border/background, no dot. */
  display: inline-block;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--purple);
  font-family: var(--font-body);
  margin-bottom: 28px;
}
/* Dot is hidden — the pill treatment is gone so the pulsing dot no
   longer belongs. Kept in the DOM for backwards compat with any
   bookmarked anchors but visually removed. */
.home-hero-eyebrow .dot {
  display: none;
}
.home-hero h1 {
  font-size: clamp(44px, 5.8vw, 76px);
  line-height: 1.02; letter-spacing: -2.4px;
  font-weight: 700; margin-bottom: 24px;
  text-wrap: pretty;
  color: var(--plum);
  /* Cap at 4 lines max — width is the primary control,
     line-clamp is a safety net if copy ever runs long. */
  max-width: 17ch;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-hero h1 em {
  font-family: var(--font-display); font-style: italic;
  font-weight: 400; color: var(--purple);
  letter-spacing: -1.5px;
}
.home-hero-sub {
  font-size: 18px; line-height: 1.65; color: var(--mid);
  font-weight: 300; max-width: 520px; margin-bottom: 32px;
}
.home-hero-ctas {
  display: flex; gap: 12px; flex-wrap: nowrap;
}
.btn-dual {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 17px 28px 17px 21px;
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 500;
  text-decoration: none; transition: all 0.22s;
  font-family: var(--font-body);
  border: none; cursor: pointer;
}
.btn-dual .btn-ic {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.btn-dual.mum        { background: var(--yellow); color: var(--ink); }
.btn-dual.mum .btn-ic{ background: rgba(28,18,41,0.15); }
.btn-dual.mum:hover  { background: var(--purple); color: white; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(124,58,237,0.3); }

.btn-dual.student      { background: white; color: var(--ink); border: 1.5px solid var(--hairline); }
.btn-dual.student .btn-ic { background: var(--yellow); color: var(--ink); }
.btn-dual.student:hover{ border-color: var(--ink); transform: translateY(-2px); }

.btn-dual svg { width: 14px; height: 14px; stroke-width: 2.2; }
.btn-dual .btn-arrow {
  width: 16px; height: 16px;
  stroke-width: 2.2;
  margin-left: 2px;
  transition: transform 0.22s;
}
.btn-dual:hover .btn-arrow {
  transform: translateX(3px);
}

.home-hero-trust {
  display: flex; align-items: center;
  padding-bottom: 20px;
  max-width: 520px;
}
.home-hero-trust-single {
  display: flex; align-items: center; gap: 10px;
}
.home-hero-trust-single p {
  font-size: 14px; color: var(--mid); margin: 0;
  line-height: 1.4;
}
.home-hero-trust-single strong {
  color: var(--ink); font-weight: 600;
}
/* Mini stats below phones image */
.home-hero-mini-stats {
  display: flex; align-items: flex-start; gap: 20px;
  margin-top: 20px;
  justify-content: center;
}
.home-hero-mini-stat {
  /* Vertical column: number sits above, label wraps below it,
     centered horizontally. The 8px gap creates clean separation
     between the bold number and the muted caption beneath. */
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.home-hero-mini-stat strong {
  font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.4px; line-height: 1;
}
.home-hero-mini-stat--accent strong {
  color: var(--purple);
  text-shadow: 0 0 12px rgba(124, 58, 237, 0.35);
}
.home-hero-mini-stat span {
  /* Tight line-height so wrapped label words ("pregnant" / "women")
     stack closely under each other, while the gap above keeps
     the number visually separated from the label. */
  font-size: 12px; color: var(--muted); letter-spacing: 0.02em;
  line-height: 1.15;
}
.home-hero-mini-divider {
  width: 1px; height: 28px; background: var(--hairline); flex-shrink: 0;
}
.home-hero-trust-item strong {
  font-size: 18px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.5px;
}
.home-hero-trust-item span {
  font-size: 12px; color: var(--muted);
  letter-spacing: 0.02em;
}
.home-hero-trust-divider { width: 1px; height: 28px; background: var(--hairline); }

/* ── HERO VISUAL, phones on gradient disc ────────────────── */
.home-hero-visual {
  position: relative;
  max-width: 560px; margin-left: auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.home-hero-visual .home-hero-phones {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
}
/* ── TEXTURED GLOW (replaces flat yellow disc) ──────────────
   Layered fuzzy glow behind the phones, driven by CSS vars so
   it can be re-tweaked live. Three stacked radial gradients +
   an SVG grain overlay create depth & atmosphere. */
:root {
  --glow-color-core:   255, 220, 120;  /* warm yellow core */
  --glow-color-mid:    255, 180, 90;   /* amber halo       */
  --glow-color-outer:  124, 58, 237;   /* purple bleed     */
  --glow-intensity:    0.85;           /* 0 – 1.2          */
  --glow-blur:         60px;           /* feather          */
  --glow-size:         110%;           /* relative to disc */
  --glow-noise:        0.35;           /* grain opacity    */
  --glow-pulse:        running;        /* running | paused */
}
.home-hero-glow {
  position: absolute;
  inset: calc(-1 * ((var(--glow-size) - 100%) / 2));
  pointer-events: none;
  filter: blur(var(--glow-blur));
  opacity: var(--glow-intensity);
  mix-blend-mode: normal;
  animation: glow-breathe 7s ease-in-out infinite;
  animation-play-state: var(--glow-pulse);
}
.home-hero-glow::before,
.home-hero-glow::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
}
/* CORE: hot warm center */
.home-hero-glow::before {
  background:
    radial-gradient(circle at 50% 45%,
      rgba(var(--glow-color-core), 0.95) 0%,
      rgba(var(--glow-color-core), 0.55) 18%,
      rgba(var(--glow-color-mid),  0.45) 38%,
      rgba(var(--glow-color-mid),  0.15) 58%,
      transparent 72%);
}
/* HALO: outer purple bleed + soft lift */
.home-hero-glow::after {
  background:
    radial-gradient(ellipse 70% 60% at 30% 30%,
      rgba(255,255,255,0.35) 0%, transparent 45%),
    radial-gradient(circle at 50% 55%,
      rgba(var(--glow-color-outer), 0.25) 30%,
      rgba(var(--glow-color-outer), 0.12) 55%,
      transparent 78%);
  transform: scale(1.12);
}
/* GRAIN: SVG fractal noise adds texture / "fuzz" */
.home-hero-grain {
  position: absolute;
  inset: calc(-1 * ((var(--glow-size) - 100%) / 2));
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--glow-noise);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.88  0 0 0 0 0.55  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 260px 260px;
  -webkit-mask-image: radial-gradient(circle at center, black 0%, black 45%, transparent 75%);
          mask-image: radial-gradient(circle at center, black 0%, black 45%, transparent 75%);
  animation: grain-drift 18s steps(8) infinite;
  animation-play-state: var(--glow-pulse);
}
@keyframes glow-breathe {
  0%,100% { transform: scale(1);    opacity: var(--glow-intensity); }
  50%     { transform: scale(1.04); opacity: calc(var(--glow-intensity) * 1.15); }
}
@keyframes grain-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 260px 260px; }
}
.home-hero-phones {
  position: relative; z-index: 2;
  width: 108%; height: auto;
  filter: drop-shadow(0 40px 50px rgba(28,18,41,0.25));
  animation: float 6s ease-in-out infinite;
}

/* ── HERO PAIRING STAMP ───────────────────────────────────────
   Certified-sticker style badge that sits in the negative space
   between the two phones (top-centre of the hero visual). It reads
   as the official "seal" connecting the pair, with the platform-wide
   675+ connections stat at its centre and a curving wordmark around
   the rim. */
.hero-pair-stamp {
  position: absolute;
  z-index: 4;
  /* Sticker sits OVER the right edge of the left phone, like it's
     been physically stuck to the screen. */
  top: 6%;
  right: 30%;
  left: auto;
  width: 23.4%;
  aspect-ratio: 1 / 1;
  transform: translate(50%, 0) rotate(0deg);
  filter:
    drop-shadow(0 2px 3px rgba(28, 18, 41, 0.18))
    drop-shadow(0 8px 18px rgba(80, 36, 160, 0.25));
  pointer-events: none;
  opacity: 0;
  animation: heroPairStampPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s forwards;
}
@keyframes heroPairStampPop {
  0%   { opacity: 0; transform: translate(50%, 8px) rotate(10deg)  scale(0.5); }
  60%  { opacity: 1; transform: translate(50%, -2px) rotate(2deg)  scale(1.06); }
  100% { opacity: 1; transform: translate(50%, 0)    rotate(0deg)  scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pair-stamp {
    opacity: 1;
    animation: none;
    transform: translate(50%, 0) rotate(0deg);
  }
}
/* Full sticker backing: a single cream disc with a thin purple outline
   that contains BOTH the rim text and the inner purple core. This makes
   the whole stamp feel like one physical sticker placed on the phones. */
.hero-pair-stamp::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 22%,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 248, 240, 0.6)  35%,
      rgba(255, 244, 226, 0)    70%),
    var(--cream);
  border: 2px solid var(--purple);
  box-shadow:
    inset 0 0 0 1px rgba(124, 58, 237, 0.25),
    inset 0 -6px 14px rgba(124, 58, 237, 0.06);
  z-index: 0;
}
.hero-pair-stamp-rim {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.hero-pair-stamp-rim-text {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  fill: var(--ink);
  text-transform: uppercase;
}
.hero-pair-stamp-core {
  position: absolute;
  /* Bigger inner disc. The cream rim band is thinner now, so the
     purple core fills more of the sticker, giving 675+ and the
     "connections made" label more breathing room inside. */
  inset: 14%;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.05) 40%,
      rgba(255, 255, 255, 0)    65%),
    linear-gradient(155deg, #8B4DFF 0%, var(--purple) 50%, #5C24A4 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    inset 0 -8px 18px rgba(28, 18, 41, 0.20),
    0 0 0 2px var(--purple);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #FFFFFF;
  padding: 6% 8%;
  isolation: isolate;
  overflow: hidden;
}
/* Grainy noise texture over the violet core, same recipe as the
   home hero glow + final CTA + HIW outro so the brand's painterly
   grain stays consistent. Sits above the gradient base but below
   the number and label. */
.hero-pair-stamp-core::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.88  0 0 0 0 0.55  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
/* Lift the number + label above the noise overlay */
.hero-pair-stamp-num,
.hero-pair-stamp-lbl {
  position: relative;
  z-index: 1;
}
.hero-pair-stamp-tick {
  width: 18%;
  height: auto;
  color: var(--purple);
  margin-bottom: 2%;
  filter: drop-shadow(0 1px 2px rgba(124, 58, 237, 0.25));
}
.hero-pair-stamp-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1;
  letter-spacing: -1px;
  color: var(--yellow);
  margin-bottom: 6%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.hero-pair-stamp-lbl {
  font-family: var(--font-body);
  font-size: clamp(7px, 0.68vw, 9px);
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.15;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hero-pair-stamp { width: 27%; top: 6%; right: 26%; left: auto; }
  .hero-pair-stamp-rim-text { font-size: 9px; letter-spacing: 0.8px; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
/* Floating badges around the phones */
.float-card {
  position: absolute; z-index: 3;
  background: white;
  border-radius: 14px;
  padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 14px 40px rgba(28,18,41,0.14);
  border: 1px solid rgba(255,255,255,0.8);
  font-family: var(--font-body);
  animation: float-sm 5s ease-in-out infinite;
}
.float-card .fc-ic {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.float-card .fc-title {
  font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.2;
}
.float-card .fc-sub {
  font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.2;
}
.float-card.a { top: 8%; left: -4%; animation-delay: 0.3s; }
.float-card.a .fc-ic { background: #D1FAE5; color: #059669; }
.float-card.b { bottom: 22%; left: -8%; animation-delay: 1.1s; }
.float-card.b .fc-ic { background: var(--purple-light); color: var(--purple); }
.float-card.c { top: 18%; right: -4%; animation-delay: 0.7s; }
.float-card.c .fc-ic { background: #FFF4D1; color: #A77A00; }
@keyframes float-sm {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

/* ── PULSE TICKER ─────────────────────────────────────────── */
.pulse-strip {
  background: var(--ink);
  padding: 18px 0; overflow: hidden; position: relative;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pulse-strip::before, .pulse-strip::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px;
  z-index: 2; pointer-events: none;
}
.pulse-strip::before { left: 0; background: linear-gradient(to right, var(--ink), transparent); }
.pulse-strip::after  { right: 0; background: linear-gradient(to left, var(--ink), transparent); }
.pulse-track {
  display: flex; gap: 48px; width: max-content;
  animation: slide 55s linear infinite;
}
.pulse-strip:hover .pulse-track { animation-play-state: paused; }
@keyframes slide { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.pulse-item {
  display: inline-flex; align-items: baseline; gap: 10px;
  white-space: nowrap; color: rgba(255,255,255,0.55);
  font-size: 14px; font-weight: 300;
}
.pulse-item strong {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  color: white; font-size: 22px; letter-spacing: -0.5px;
}
.pulse-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.2); align-self: center;
}

/* ── EDITORIAL FEATURE SECTIONS (Mums / Students) ─────────── */
.ed-feature {
  padding: 110px var(--section-pad-h);
  position: relative;
  overflow: hidden;
}
/* Shared cream background, sections themselves are transparent */
.ed-feature-group {
  background: #FDFAF5;
}
.ed-mum,
.ed-student {
  background: transparent;
  /* When the page jumps to #for-mums or #for-students via the nav
     links, land the section title below the floating nav pill rather
     than behind it. The sticky pill sits ~96px from the top once
     scrolled, so leave a little more room than that. */
  scroll-margin-top: 120px;
}

.ed-inner { max-width: var(--max-w); margin: 0 auto; }

.ed-row {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 72px;
  align-items: start;
}
.ed-student .ed-row { grid-template-columns: 1.12fr 0.88fr; }

/* Portrait column */
.ed-portrait-col {
  display: flex; flex-direction: column; gap: 36px;
}

/* Second image below the care subcard, regular photo, cropped to top 2/3 */
.ed-second-img {
  width: 100%;
  border-radius: 24px;
  overflow: visible;
  /* the image now sits inside a wrapper; height is handled there */
}
.ed-second-img-frame {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  /* Frame height reduced ~35% from square (1/1 → 1.54/1) so the
     image focuses on Meg and Viv's faces and crops out the pram
     and lower body. */
  aspect-ratio: 1.54 / 1;
}
.ed-second-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Anchored to top so the crop removes the bottom of the original
     square image (pram, hands) and keeps the faces in frame. */
  object-position: center top;
  display: block;
}

/* Subtle italic credit caption beneath the secondary editorial image.
   Sized small + muted so it reads as a side-note on the photo, not a
   competing block of body copy. */
.ed-second-img-caption {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mid);
  opacity: 0.78;
  text-align: center;
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
}
.ed-second-img-caption em {
  font-style: italic;
  font-weight: 400;
}

/* Third image in the head column (between lede and ticks), iPhone, scaled down 35%, centred */
.ed-third-img {
  width: 65%;
  margin: 48px auto;
  position: relative;
}
/* Mum + Student sections: desktop - extra breathing space below the iPhone */
.ed-mum .ed-third-img,
.ed-student .ed-third-img {
  margin: 48px auto 80px;
}
.ed-third-img > img:first-child {
  width: 100%; height: auto;
  display: block;
  position: relative;
  z-index: 2;
}
/* Floating stat cards over iPhone */
.ed-iphone-stat {
  position: absolute;
  width: 48%;
  height: auto;
  /* Layered soft drop-shadow: close contact shadow + wider ambient for depth (reduced 30%) */
  filter:
    drop-shadow(0 1.4px 2.8px rgba(28,18,41,0.08))
    drop-shadow(0 8.4px 16.8px rgba(28,18,41,0.14))
    drop-shadow(0 19.6px 42px rgba(28,18,41,0.18));
  animation: float-stat 5s ease-in-out infinite;
}
/* 76% card, top-left, overflows left */
.ed-iphone-stat-76 {
  top: 14%;
  left: -18%;
  z-index: 3;
  animation-delay: 0.4s;
}
/* 675+ card, top-right, overflows right */
.ed-iphone-stat-675 {
  top: -4%;
  right: -18%;
  z-index: 3;
  animation-delay: 1s;
}
/* Student section: 42% card, top-left, overflows left */
.ed-iphone-stat-42 {
  top: 14%;
  left: -18%;
  z-index: 3;
  animation-delay: 0.4s;
}
/* Student section: 675+ card, top-right, overflows right */
.ed-iphone-stat-675s {
  top: -4%;
  right: -18%;
  z-index: 3;
  animation-delay: 1s;
}
@keyframes float-stat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* ── Editorial pull-quote (column inset) ─────────────────────
   Magazine-style pull-quote: italic Fraunces text, thin left rule,
   no card/background. Lives between the lede and ticks block as a
   quiet emotional beat without competing visually. */
.ed-pullquote {
  position: relative;
  margin: 48px 0 64px;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--purple);
  max-width: 520px;
}
.ed-pullquote-mark {
  position: absolute;
  top: -18px; left: 14px;
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--purple);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
}
.ed-pullquote-text {
  /* Reset blockquote default indent + treat like a display quote */
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: var(--ink);
  text-wrap: pretty;
}
.ed-pullquote-attr {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
}
.ed-pullquote-attr span {
  /* Role/location after the name. Slightly muted to read as caption */
  font-weight: 500;
  color: var(--mid, rgba(28,18,41,0.6));
  letter-spacing: 0.4px;
}
/* Mobile: keep the inset; just tighten padding + size */
@media (max-width: 600px) {
  .ed-pullquote {
    margin: 32px 0 40px;
    padding: 4px 0 4px 20px;
  }
  .ed-pullquote-text { font-size: 21px; }
  .ed-pullquote-mark { font-size: 60px; top: -14px; left: 10px; }
}
.ed-portrait {
  position: relative;
  border-radius: 32px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
}
.ed-portrait::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(124,58,237,0.18) 0%, transparent 75%);
  z-index: 0;
}
.ed-portrait-mum {
  background:
    radial-gradient(ellipse 90% 80% at 50% 45%, rgba(124,58,237,0.14) 0%, transparent 72%),
    linear-gradient(180deg, #EEE3CC 0%, #E5D5B7 100%);
}
.ed-portrait-student {
  background:
    radial-gradient(ellipse 90% 80% at 50% 45%, rgba(255,202,1,0.20) 0%, transparent 72%),
    linear-gradient(180deg, #EADEC4 0%, #D9C5A4 100%);
}
.ed-portrait img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  filter: drop-shadow(0 20px 30px rgba(28,18,41,0.10));
}

/* ── Hero stage (cutout photo + floating app cards) ──────── */
.ed-hero-stage {
  position: relative;
  aspect-ratio: 5 / 6;
  isolation: isolate;
  overflow: visible;
}

/* MUM HERO, main image + 3 floating cards */
.ed-hero-stage-mum {
  aspect-ratio: auto;
  padding: 0;
  position: relative;
}
/* Soft purple glow behind the mum hero image */
.ed-hero-stage-mum::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 115%; height: 110%;
  background: radial-gradient(ellipse at center,
    rgba(124, 58, 237, 0.22) 0%,
    rgba(124, 58, 237, 0.11) 30%,
    rgba(124, 58, 237, 0.03) 60%,
    transparent 80%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}
.ed-hero-main {
  position: relative;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  z-index: 1;
}
.ed-hero-main img {
  width: 100%; height: auto;
  display: block;
}

/* Floating image cards */
.ed-float-img {
  position: absolute;
  margin: 0;
  /* Layered soft drop-shadow: close contact shadow + wider ambient for depth (reduced 30%) */
  filter:
    drop-shadow(0 1.4px 2.8px rgba(28,18,41,0.08))
    drop-shadow(0 8.4px 16.8px rgba(28,18,41,0.14))
    drop-shadow(0 19.6px 42px rgba(28,18,41,0.18));
  /* Initial hidden state for pop-in animation */
  opacity: 0;
  transform: scale(0.7) translateY(12px);
  transition: opacity 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* GPU compositing: promote to its own layer so the stacked
     drop-shadow filter is rasterised ONCE and the transform/opacity
     animation runs on that composited layer. Without this, mobile
     browsers repaint the filter every frame during the pop-in and
     you get a visible "shadow flicker" as the shadow re-renders
     mid-animation. */
  will-change: transform, opacity;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000;
          perspective: 1000;
}
.ed-float-img.is-popped {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.ed-float-img img {
  width: 100%; height: auto;
  display: block;
  /* Soft, alpha-aware drop shadow with a slight purple hue.
     Using filter: drop-shadow() (NOT box-shadow) so the shadow
     follows the PNG's transparency — the cards are irregular
     shapes (circles, pills, chat bubbles) so a rectangular
     box-shadow would render as a visible cropped rectangle
     behind the transparent areas.
     Two stacked drop-shadows: a tight near shadow for definition,
     and a softer ambient one for depth. Both purple-tinted to
     match the page palette. */
  filter:
    drop-shadow(0 2px 4px rgba(124, 58, 237, 0.18))
    drop-shadow(0 10px 22px rgba(80, 36, 160, 0.16));
  transition: filter 0.6s ease;
}
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ed-float-img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* "Hey Jane..." message bubble, +15% size, moved up slightly, left edge aligned with paired-icon */
.ed-float-hey-jane {
  top: 62%;
  left: -12%;
  width: 63%;
  z-index: 4;
}
/* "Paired" avatar circle, moved further left and up slightly */
.ed-float-paired-icon {
  bottom: -6%;
  left: -12%;
  width: 38%;
  z-index: 5;
}
/* "See you Thursday" message card, aligned to right edge of hero image */
.ed-float-thursday {
  bottom: 8%;
  right: 0;
  width: 41%;
  z-index: 4;
}

/* ── STUDENT HERO FLOATS (6 elements total) ────────────────
   Right side: Kristin (top) → Josie (middle, inset from right) → Emma (bottom)
   Left side: paired-1 (mid, overflows L) → paired-2 (centre, bigger, overlapping) → paired-3 (bottom-left, overflows L) */
.ed-float-kristin {
  top: 42%;
  right: -10%;
  width: 44%;
  z-index: 4;
}
.ed-float-josie {
  top: 58%;
  right: -2%;
  width: 44%;
  z-index: 5;
}
.ed-float-emma {
  top: 74%;
  right: -10%;
  width: 44%;
  z-index: 4;
}
.ed-float-paired-1 {
  bottom: 10%;
  left: 0;
  width: 26%;
  z-index: 5;
}
.ed-float-paired-2 {
  bottom: -5%;
  left: 18%;
  width: 32%;
  z-index: 6;
}
.ed-float-paired-3 {
  bottom: -9.5%;
  left: -8%;
  width: 26%;
  z-index: 4;
}

.ed-hero-bg {
  position: absolute; inset: 0;
  border-radius: 36px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(124,58,237,0.22) 0%, transparent 72%),
    linear-gradient(180deg, #F0E5D0 0%, #E4D0B0 100%);
  z-index: 0;
}
.ed-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.07  0 0 0 0 0.16  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.18; mix-blend-mode: multiply; pointer-events: none;
}
.ed-hero-cutout {
  position: absolute;
  z-index: 2;
  right: -6%;
  bottom: 0;
  width: 108%;
  height: 108%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(-8px 20px 40px rgba(28,18,41,0.18));
}

/* Floating cards exploded from phone */
.ed-float {
  position: absolute;
  z-index: 3;
  background: white;
  border-radius: 20px;
  box-shadow:
    0 20px 40px rgba(28,18,41,0.15),
    0 0 0 1px rgba(28,18,41,0.04);
  transition: transform 0.4s ease;
}

/* Main app-screen card - top left, rotated */
.ed-float-screen {
  margin: 0;
  top: 6%;
  left: -4%;
  width: 36%;
  aspect-ratio: 9 / 19.5;
  border-radius: 22px;
  overflow: hidden;
  transform: rotate(-6deg);
  background: #F6F1E8;
  padding: 0;
}
.ed-float-screen img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Paired card - middle left */
.ed-float-paired {
  top: 44%;
  left: -8%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 999px;
  transform: rotate(-3deg);
}
.ed-pf-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple) 0%, #9F6DEF 100%);
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: var(--font-display);
  font-style: italic; font-weight: 500; font-size: 18px;
  flex-shrink: 0;
}
.ed-pf-meta { line-height: 1.1; }
.ed-pf-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.ed-pf-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  color: #1F9757;
  margin-top: 3px;
  background: rgba(31,151,87,0.1);
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
}

/* Chat pill - bottom right */
.ed-float-chat {
  bottom: 8%;
  right: -6%;
  padding: 14px 18px;
  border-radius: 18px;
  max-width: 240px;
  transform: rotate(4deg);
}
.ed-chat-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500;
  color: var(--muted);
  margin-bottom: 4px;
  font-family: var(--font-body);
}
.ed-chat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #1F9757;
  box-shadow: 0 0 0 3px rgba(31,151,87,0.18);
}
.ed-chat-msg {
  font-size: 14px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.4;
}

/* ── Student hero stage variants ─────────────────────────── */
.ed-hero-bg-student {
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(255,202,1,0.22) 0%, transparent 72%),
    linear-gradient(180deg, #EDE1CA 0%, #DEC9A6 100%);
}
/* Matching purple glow on student section head column */
.ed-student .ed-head-col {
  position: relative;
}
.ed-student .ed-head-col::before {
  content: '';
  position: absolute;
  top: -20%; left: -25%;
  width: 95%; height: 80%;
  background: radial-gradient(ellipse at center,
    rgba(124, 58, 237, 0.18) 0%,
    rgba(124, 58, 237, 0.08) 35%,
    transparent 70%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}
/* Bottom glow behind the ticks + CTA block removed per design feedback \u2014
   the head column now reads cleanly under the lede/quote/ticks without
   the second purple radial. */
.ed-student .ed-head-col::after {
  content: none;
}
.ed-student .ed-head-col > * {
  position: relative;
  z-index: 1;
}
/* Matching purple glow behind the student hero image */
.ed-hero-stage-student {
  aspect-ratio: auto;
  padding: 0;
  position: relative;
}
.ed-hero-stage-student::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 115%; height: 110%;
  background: radial-gradient(ellipse at center,
    rgba(124, 58, 237, 0.22) 0%,
    rgba(124, 58, 237, 0.11) 30%,
    rgba(124, 58, 237, 0.03) 60%,
    transparent 80%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}
/* Main profile screen card - big, centered, slight tilt */
.ed-float-main-screen {
  margin: 0;
  top: 6%;
  left: 14%;
  width: 58%;
  aspect-ratio: 9 / 19.5;
  border-radius: 24px;
  overflow: hidden;
  transform: rotate(-3deg);
  background: #F6F1E8;
  padding: 0;
}
.ed-float-main-screen img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Filters card - top right */
.ed-float-filters {
  top: 10%;
  right: -10%;
  width: 240px;
  padding: 14px 16px;
  border-radius: 16px;
  transform: rotate(3deg);
}
.ed-filter-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-family: var(--font-body);
}
.ed-filter-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(28,18,41,0.06);
}
.ed-filter-row:first-of-type { border-top: 0; padding-top: 0; }
.ed-filter-ic {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ed-filter-ic-hospital {
  background: rgba(124,58,237,0.12);
  color: var(--purple);
}
.ed-filter-ic-travel {
  background: rgba(255,202,1,0.22);
  color: #B8860B;
}
.ed-filter-lbl {
  font-size: 12px; color: var(--muted);
  flex: 1;
  font-weight: 400;
}
.ed-filter-val {
  font-size: 12px; font-weight: 600;
  color: var(--ink);
}

/* Request card - bottom left */
.ed-float-request {
  bottom: 10%;
  left: -8%;
  width: 244px;
  padding: 14px 16px;
  border-radius: 18px;
  transform: rotate(-4deg);
}
.ed-req-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500;
  color: var(--muted);
  margin-bottom: 10px;
  font-family: var(--font-body);
}
.ed-req-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18);
}
.ed-req-body {
  display: flex; align-items: center; gap: 10px;
}
.ed-req-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #F4B5A4 0%, #E8927D 100%);
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: var(--font-display);
  font-style: italic; font-weight: 500; font-size: 16px;
  flex-shrink: 0;
}
.ed-req-name {
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.ed-req-meta {
  font-size: 11px; color: var(--muted);
  margin-top: 2px;
}

/* Ticks block under portrait */
.ed-ticks-block {
  padding: 4px 6px;
}
.ed-ticks-title {
  font-size: 28px; line-height: 1.15; letter-spacing: -0.8px;
  font-weight: 600; margin: 0 0 24px;
  color: var(--ink);
  font-family: var(--font-body);
}
.ed-ticks {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.ed-ticks li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; line-height: 1.5; font-weight: 400;
  color: var(--mid);
}
.ed-ticks li em {
  font-family: var(--font-display); font-style: italic;
  color: var(--ink); font-weight: 400;
}
.ed-tick-ic {
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--purple);
  color: white;
  margin-top: 2px;
}
.ed-tick-ic svg { width: 11px; height: 11px; stroke-width: 2.6; }

/* Headline column */
.ed-head-col {
  display: flex; flex-direction: column;
  max-width: 100%;
}
.ed-eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 24px;
  font-family: var(--font-body);
}
.ed-headline {
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.02; letter-spacing: -2px;
  font-weight: 600; margin: 0 0 28px;
  max-width: 18ch;
  text-wrap: balance;
  color: var(--plum);
}
/* Purple glow behind the mum section headline */
.ed-mum .ed-head-col {
  position: relative;
}
.ed-mum .ed-head-col::before {
  content: '';
  position: absolute;
  top: -20%; left: -25%;
  width: 95%; height: 80%;
  background: radial-gradient(ellipse at center,
    rgba(124, 58, 237, 0.18) 0%,
    rgba(124, 58, 237, 0.08) 35%,
    transparent 70%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}
/* Matching glow behind the ticks + CTA block, bottom of the column */
.ed-mum .ed-head-col::after {
  content: '';
  position: absolute;
  bottom: 0; left: -20%;
  width: 95%; height: 60%;
  background: radial-gradient(ellipse at center,
    rgba(124, 58, 237, 0.18) 0%,
    rgba(124, 58, 237, 0.08) 35%,
    transparent 70%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}
.ed-mum .ed-head-col > * {
  position: relative;
  z-index: 1;
}
.ed-headline em {
  font-family: var(--font-display); font-style: italic;
  font-weight: 400; color: var(--purple);
  letter-spacing: -1.5px;
}
.ed-lede {
  font-size: 18px; line-height: 1.6; color: var(--mid);
  font-weight: 300; margin: 0 0 48px; max-width: 52ch;
}
.ed-lede em {
  font-family: var(--font-display); font-style: italic;
  color: var(--ink); font-weight: 400;
}

/* Paired secondary images */
.ed-pair {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 18px;
  margin-bottom: 44px;
}
.ed-pair-img {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #EADCC4 0%, #D3BE98 100%);
  position: relative;
  isolation: isolate;
}
.ed-pair-img::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.07  0 0 0 0 0.16  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.22; mix-blend-mode: multiply; pointer-events: none; z-index: 2;
}
.ed-pair-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  display: block;
  position: relative; z-index: 1;
}
.ed-pair-img-a { transform: translateY(8px); }
.ed-pair-img-b { transform: translateY(-4px); }

/* Sub-card with title, stats, CTA */
.ed-subcard {
  max-width: 560px;
}
/* Extra top spacing when subcard sits below the hero stage (portrait col) */
.ed-portrait-col .ed-subcard {
  margin-top: 48px;
}
.ed-subtitle {
  font-size: 28px; line-height: 1.15; letter-spacing: -0.8px;
  font-weight: 600; margin: 0 0 14px; max-width: 22ch;
}
.ed-subcopy {
  font-size: 16px; line-height: 1.65; color: var(--mid);
  font-weight: 300; margin: 0 0 32px; max-width: 48ch;
}

.ed-stats {
  display: flex; gap: 44px;
  padding: 24px 0; margin-bottom: 32px;
  border-top: 1px solid rgba(28,18,41,0.10);
  border-bottom: 1px solid rgba(28,18,41,0.10);
}
.ed-stat { flex: 1; }
.ed-stat-num {
  font-family: var(--font-display); font-style: italic;
  font-size: 40px; line-height: 1; font-weight: 400;
  letter-spacing: -1.4px;
  color: var(--purple);
  margin-bottom: 8px;
}
.ed-stat-lbl {
  font-size: 13px; line-height: 1.4;
  color: var(--muted);
  font-weight: 400;
  max-width: 22ch;
}

.ed-cta-block {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(28,18,41,0.10);
  margin-top: 32px;
}
/* In the For Students section the CTA block sits under the hero stage in
   the portrait column (no ticks above it on desktop). Give it more
   breathing room above so the stats line doesn't crowd the image. */
.ed-student .ed-portrait-col .ed-cta-block {
  margin-top: 72px;
}
.ed-cta-sub {
  font-size: 14.5px; line-height: 1.5;
  color: var(--mid);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
  max-width: 40ch;
  margin: 0;
}
.ed-cta-sub em {
  color: var(--purple); font-style: italic;
}

/* Trust line above CTA button, matches hero trust style */
.ed-cta-trust {
  display: flex; align-items: center; gap: 10px;
}
.ed-cta-trust p {
  font-size: 14px; color: var(--mid); margin: 0;
  line-height: 1.4;
}
.ed-cta-trust strong {
  color: var(--ink); font-weight: 600;
}

/* Mini stats beneath CTA button */
.ed-cta-stats {
  display: flex; align-items: center; gap: 16px;
  padding-top: 4px;
}
.ed-cta-stat {
  display: flex; flex-direction: column; gap: 2px;
}
.ed-cta-stat strong {
  font-size: 16px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.4px; line-height: 1;
}
.ed-cta-stat span {
  font-size: 11px; color: var(--muted); letter-spacing: 0.02em;
}
.ed-cta-stat-divider {
  width: 1px; height: 24px; background: rgba(28,18,41,0.15); flex-shrink: 0;
}
.ed-cta {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 18px 32px; border-radius: var(--radius-pill);
  background: var(--yellow); color: var(--ink);
  font-size: 14.5px; font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.ed-cta:hover {
  background: var(--purple); color: white;
  transform: translateX(4px);
}
.ed-cta svg { width: 14px; height: 14px; stroke-width: 2.2; }

/* Responsive collapse */
@media (max-width: 960px) {
  .ed-feature { padding: 80px var(--section-pad-h); }
  /* On mobile/tablet: flatten the grid, let each child's content interleave */
  .ed-row,
  .ed-student .ed-row {
    display: flex; flex-direction: column;
    gap: 32px;
  }
  /* Columns become pass-through containers so their children flow into the flex column */
  .ed-portrait-col,
  .ed-head-col {
    display: contents;
  }

  /* Explicit ordering on mobile, matches Nick's screenshot:
     1. Eyebrow + Headline + Lede  (from head-col)
     2. Main hero image            (from portrait-col)
     3. Care subcard               (from portrait-col)
     4. Ticks block                (from head-col)
     5. Third image                (from head-col)
     6. CTA block                  (from portrait-col on student, head-col on mum) */
  .ed-eyebrow      { order: 1; }
  .ed-headline     { order: 2; }
  .ed-lede         { order: 3; margin-bottom: 0; }
  .ed-hero-stage   { order: 4; margin: 0 auto; max-width: 480px; width: 100%; }
  .ed-subcard      { order: 5; }
  /* Reorder for mum section: pull-quote becomes the emotional bridge
     immediately after the hero phones, then ticks block, then the
     Meg + Viv pairing photo as the proof anchor before the CTA. */
  .ed-pullquote    { order: 6; margin: 24px auto; max-width: 100%; }
  .ed-ticks-block  { order: 7; margin-top: 32px; }
  .ed-second-img   { order: 8; }
  .ed-third-img    { order: 8; margin: 0 auto; width: 72%; }
  /* Mum + Student sections mobile: double vertical space around the iPhone with floating cards */
  .ed-mum .ed-third-img,
  .ed-student .ed-third-img { margin: 56px auto 32px; }
  .ed-cta-block    { order: 9; align-items: center; text-align: center; }
  .ed-cta-trust    { justify-content: center; }

  .ed-portrait { aspect-ratio: 5 / 5; max-width: 420px; margin: 0 auto; }
  .ed-headline { font-size: clamp(32px, 8vw, 44px); letter-spacing: -1.4px; }
}
@media (max-width: 600px) {
  .ed-feature { padding: 64px 20px; }
  .ed-lede { font-size: 16px; }
  .ed-subtitle,
  .ed-ticks-title { font-size: 22px; }
}

/* ── COCE EXPLAINER ─────────────────────────────────────── */
.coce-section {
  padding: 200px var(--section-pad-h) 80px;
  position: relative;
  /* Purple pool bleeds in from TOP only — marks the entry to the
     CoCE → Recommended → HIW trio. The matching bottom-edge pool
     has moved to HIW (the visual end of the trio). */
  background:
    radial-gradient(ellipse 140% 40% at 50% -8%,
      rgba(124,58,237,0.38) 0%,
      rgba(124,58,237,0.22) 14%,
      rgba(124,58,237,0.10) 28%,
      rgba(124,58,237,0.04) 40%,
      transparent 50%),
    #FFFFFF;
  overflow: hidden;
}
.coce-inner {
  max-width: 1800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.coce-head {
  text-align: center;
  margin-bottom: 56px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.coce-head .ed-eyebrow { display: inline-block; }
.coce-head .ed-headline { margin-left: auto; margin-right: auto; max-width: 20ch; }
.coce-head .ed-lede    { margin-left: auto; margin-right: auto; max-width: 56ch; }

.coce-tiles {
  display: grid;
  gap: 22px;
  margin-bottom: 36px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.coce-tiles--three { grid-template-columns: repeat(3, 1fr); }
.coce-tiles--two   { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
/* Lockup — two portrait images sit ABOVE the tile grid; the tiles
   are then pulled UP with a negative margin so they overlap the
   bottom portion of the images. Visual effect: the people appear
   to be standing BEHIND the tiles, with heads + shoulders visible
   above the tile tops. Images overlap each other in the middle. */
.coce-lockup {
  position: relative;
  max-width: 1000px;
  margin: 0 auto 36px;
}
/* Row that holds the two portrait images. Both source PNGs have
   IDENTICAL source heights, so we set the SAME explicit display
   height on both — widths auto-scale from each image's own aspect
   ratio. Top edges lock automatically (both have top:0), bottom
   edges lock automatically (same height). No magic stretching. */
.coce-lockup-row {
  position: relative;
  z-index: 0;
  /* The row is at least as tall as the images themselves so it
     occupies real layout space. */
  min-height: 440px;
  /* Negative margin pulls the tile grid UP into this row's bottom
     region — the tiles overlap the bottom ~110px of each portrait,
     which is roughly the top 30% of the CAN tile's height. */
  margin-bottom: -110px;
  pointer-events: none;
}
.coce-lockup-img {
  position: absolute;
  top: 0;
  /* Explicit height — BOTH images get the same value because their
     source PNGs have matching source heights. Widths auto-resolve
     from each image's natural aspect ratio. Since both heights are
     identical, top AND bottom edges line up on the page without
     needing any per-image offsets. */
  height: 440px;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.coce-lockup-img--left {
  /* Pinned to the lockup's left edge so the image's left edge
     lines up with the left edge of the CAN tile below. Empty
     canvas padding on the image's left side pushes the actual
     people inward from this edge. */
  left: 0;
}
.coce-lockup-img--right {
  /* Pinned to the lockup's right edge. */
  right: 0;
}

/* Split tile grid: left column is one tile; right column is two
   stacked tiles. The left tile is CENTER-aligned vertically against
   the right column's combined height — not locked to the bottom —
   so the left tile's midpoint sits on the same horizontal line as
   the midpoint between CAN'T and Requirements on the right. */
.coce-tiles--split {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}
.coce-tiles--split > .coce-tile {
  flex: 1 1 0;
}
.coce-tiles--split-right {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.coce-tile {
  background: #FFFFFF;
  border: 1px solid rgba(28,18,41,0.08);
  border-radius: 22px;
  /* Tighter padding (was 34px 32px) so tiles hug their content and
     the whole block is visually more compact. */
  padding: 26px 28px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.coce-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(28,18,41,0.06);
  border-color: rgba(124,58,237,0.22);
}
.coce-tile h4 {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  /* Tighter gap from heading to list below (was 14px). */
  margin-bottom: 10px;
  letter-spacing: -0.3px;
  line-height: 1.25;
}
.coce-tile h4 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--purple);
  letter-spacing: -0.5px;
}
/* New header row: heading on the left flexes to take remaining width,
   icon pinned to the right. Replaces the old stacked layout (icon on
   top, heading below). */
.coce-tile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.coce-tile-head h4 {
  flex: 1;
  margin-bottom: 0;
}
.coce-tile-head .coce-tile-ic {
  margin-bottom: 0;
  flex-shrink: 0;
}
.coce-tile p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mid);
  font-weight: 300;
  margin-bottom: 12px;
}
.coce-tile p:last-child { margin-bottom: 0; }
.coce-tile-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(124,58,237,0.12);
  color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.coce-tile-ic--muted {
  background: rgba(28,18,41,0.06);
  color: var(--muted);
}
.coce-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coce-list li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--mid);
  font-weight: 300;
  padding-left: 22px;
  position: relative;
}
.coce-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple);
}
.coce-list li strong {
  color: var(--ink);
  font-weight: 600;
}
.coce-footer-line {
  text-align: center;
  color: var(--purple);
  font-size: 17px;
  font-weight: 500;
  margin: 20px auto 0;
  max-width: 640px;
}
.coce-footer-line em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* Legal disclaimer underneath the 3-tile CoCE grid. Replaces the
   old "MidwithMe adds to your birth team..." footer line — sits in
   small italic Satoshi with the standard subheading grey so it
   reads as a side-note rather than a headline statement. */
.coce-disclaimer {
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mid);
  max-width: 100%;
  margin: 28px auto 0;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .coce-disclaimer {
    white-space: normal;
    max-width: 680px;
  }
}

.coce-journey {
  margin-top: 0;
  padding-top: 0;
}

/* Gap between the Journey rail block and the CoCE explainer that
   follows it. Matches the 152px breathing room the two sub-blocks
   had before the swap — keeps the two moments feeling distinct. */
.coce-journey + .coce-head {
  margin-top: 152px;
}
.coce-journey-head {
  text-align: center;
  max-width: 780px;
  /* Bigger gap between the heading and the 01/02/03/04 rail below
     (was 52px) so the heading has room to sit as its own moment. */
  margin: 0 auto 96px;
}
.coce-journey-head h2 {
  margin-bottom: 18px;
}
.coce-journey-head p {
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
/* When the journey rail lives inside .coce-section, drop its default section styling */
.coce-journey .journey-rail {
  margin: 0 auto;
}

/* ── When-to-connect section ──────────────────────────────────
   Standalone section between the CoCE explainer and the
   How-It-Works steps. Mirrors the HIW section's layout +
   styling precisely — same outer padding, same head structure,
   same .section-label eyebrow / h2 / p type ramp. The head
   element reuses the .hiw-head class so all the typography,
   eyebrow spacing, balance/pretty wrap, and em colour rules
   already defined for HIW apply here too — keeping the two
   consecutive blocks visually matched without duplicating CSS. */
.connect-window-section {
  background: white;
  /* Reduced top padding to tighten the gap between CoCE and the
     Recommended-time block. Bottom kept low because HIW provides
     its own top padding. */
  padding: 32px var(--section-pad-h) 60px;
  position: relative;
  overflow: hidden;
}
.connect-window-section-inner {
  /* Match .hiw-inner. */
  max-width: 1800px;
  margin: 0 auto;
}

/* Section head centred to match .hiw-head's editorial composition.
   The eyebrow / headline / lede stack reads as its own moment above
   the timeline rail. */
.connect-window-head {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 720px;
}
.connect-window-head .section-label { margin-bottom: 18px; display: inline-block; }
.connect-window-head p {
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.connect-window-head p strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── Connect window timeline ──────────────────────────────────
   Editorial week-by-week timeline showing the recommended
   window to connect with a student midwife on MidwithMe.
   Three bands across a 1→40 week axis. */
.connect-window {
  /* Match .hiw-steps — fills the .connect-window-section-inner
     (1800px) with side padding from the section, so the timeline
     reads at the same width as the four phones below. */
  max-width: 1800px;
  margin: 0 auto;
  text-align: left;
}
.connect-window-eyebrow {
  /* Tiny uppercase label above the rail — same eyebrow vocabulary
     used throughout the page (.section-label, .ed-eyebrow). */
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
  text-align: center;
  margin-bottom: 22px;
}

/* The rail: a relatively-positioned strip ~64px tall.
   Uses CSS custom properties on band/tick elements (--from,
   --to, --at) so per-element positions are author-set inline
   in the markup rather than buried in CSS. */
.connect-window-rail {
  position: relative;
  height: 64px;
  margin: 0 16px 8px;
  /* Reserve top space for the band labels, bottom space for ticks */
}

/* Hairline base track: full-width thin pill, the whole pregnancy.
   Sits centred vertically in the rail. */
.cw-track {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--hairline, #E8E0F5);
  border-radius: 2px;
}

/* Coloured bands sit on top of the track, between --from and --to.
   Reveal is driven by --rec-fill / --pos-fill (0→1):
     - clip-path inset reveals the band L→R from 0% to its full width
     - opacity fades from 0 → 1 across the same fill range
   Band itself stays full-size; we never stretch its rendering, so the
   dashed pattern of the possible band keeps its native pitch. */
.cw-band {
  position: absolute;
  left: var(--from);
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  width: calc(var(--to) - var(--from));
  overflow: hidden;
  transition: opacity 0.15s ease;
}
.cw-band--recommended {
  background: var(--purple);
  box-shadow: 0 0 0 1px rgba(124,58,237,0.0), 0 6px 18px rgba(124,58,237,0.18);
  clip-path: inset(0 calc((1 - var(--rec-fill, 0)) * 100%) 0 0);
  opacity: var(--rec-fill, 0);
}
.cw-band--possible {
  background: repeating-linear-gradient(
    90deg,
    rgba(124,58,237,0.55) 0,
    rgba(124,58,237,0.55) 6px,
    transparent 6px,
    transparent 11px
  );
  clip-path: inset(0 calc((1 - var(--pos-fill, 0)) * 100%) 0 0);
  opacity: var(--pos-fill, 0);
}

/* Soft glow pulse that sweeps across the band once it's filled.
   Driven by --pulse-rec / --pulse-pos (0 → 1 → 0 cycle).
   A bright purple highlight slides L→R over the band, fading at
   the edges. Counter-scaled to compensate for parent's scaleX. */
.cw-band-pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent calc(var(--pulse-pos-x, 0%) - 30%),
    rgba(255,255,255,0.55) var(--pulse-pos-x, 0%),
    transparent calc(var(--pulse-pos-x, 0%) + 30%),
    transparent 100%);
  opacity: var(--pulse-opacity, 0);
  transition: opacity 0.2s ease;
}
.cw-band--recommended .cw-band-pulse {
  --pulse-pos-x: calc(var(--pulse-rec, 0) * 100%);
  --pulse-opacity: calc(var(--pulse-rec, 0) * (1 - var(--pulse-rec, 0)) * 4);
}
.cw-band--possible .cw-band-pulse {
  --pulse-pos-x: calc(var(--pulse-pos, 0) * 100%);
  --pulse-opacity: calc(var(--pulse-pos, 0) * (1 - var(--pulse-pos, 0)) * 4);
}
/* Band labels — keep position stable regardless of band's scaleX.
   Counter-scale by 1/scaleX to keep label readable. */
.cw-band-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  /* Mirror HIW step heading lit transition — same vocabulary */
  transition: color 0.35s ease;
}
.cw-band--recommended.is-lit .cw-band-label,
.cw-band--possible.is-lit .cw-band-label {
  color: var(--purple);
}
.cw-band--possible .cw-band-label {
  font-weight: 600;
}

/* Bold trigger phrases inside the lede — kept plain ink + bold.
   The lit-up state has moved to the Recommended / Possible band
   labels (mirroring the HIW step-heading vocabulary). */
.cw-trigger {
  color: var(--ink);
  font-weight: 600;
}

/* Week-number ticks along the rail.
   Each tick is positioned at --at; vertical line + label below. */
.cw-tick {
  position: absolute;
  left: var(--at);
  top: 50%;
  transform: translate(-50%, -50%);
  height: 14px;
  width: 1.5px;
  background: rgba(28,18,41,0.28);
  border-radius: 1px;
}
.cw-tick > span {
  /* Week number rendered below the tick */
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--mid, rgba(28,18,41,0.6));
  letter-spacing: 0.02em;
}
/* Accent ticks at the meaningful boundary weeks (28, 34) */
.cw-tick--accent {
  background: var(--purple);
  height: 18px;
  width: 2px;
}
.cw-tick--accent > span {
  color: var(--purple);
  font-weight: 700;
}

/* Finale shimmer — a soft purple highlight that sweeps L→R across the
   entire rail (track + bands + dashed segment) after the bands finish
   filling. Single play per scroll-in cycle. The gradient is anchored
   at --finale-pos (0 → 1.2 so it fully exits the right edge), with a
   bell-shaped opacity that peaks mid-travel. */
.cw-finale {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: 9px;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent calc(var(--finale-pos, 0) * 100% - 22%),
    rgba(124, 58, 237, 0.22) calc(var(--finale-pos, 0) * 100% - 8%),
    rgba(167, 120, 255, 0.55) calc(var(--finale-pos, 0) * 100%),
    rgba(124, 58, 237, 0.22) calc(var(--finale-pos, 0) * 100% + 8%),
    transparent calc(var(--finale-pos, 0) * 100% + 22%),
    transparent 100%);
  opacity: var(--finale-opacity, 0);
  filter: blur(3px);
  z-index: 3;
}

/* Two-column note block under the rail */
.connect-window-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline, #E8E0F5);
}
.cw-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cw-note p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}
.cw-note p strong {
  font-weight: 600;
  color: var(--ink);
}
.cw-note-dot {
  /* Small coloured marker that ties the note back to the band */
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
}
.cw-note--primary .cw-note-dot {
  background: var(--purple);
  box-shadow: 0 0 0 4px rgba(124,58,237,0.12);
}
.cw-note--secondary .cw-note-dot {
  /* Match the dashed possible band — outlined dot */
  background: transparent;
  border: 2px dashed rgba(124,58,237,0.65);
  width: 11px; height: 11px;
}

/* Tablet: keep the rail but stack notes */
@media (max-width: 720px) {
  .connect-window {
    margin-top: 48px;
  }
  .connect-window-notes {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cw-band-label {
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }
  .cw-tick > span {
    font-size: 10px;
  }
}
/* Phone: hide the inner ticks (1, 10, 20) so the rail
   doesn't get crowded; keep the meaningful boundary ticks. */
@media (max-width: 480px) {
  .cw-tick:not(.cw-tick--accent):not([style*="0%"]):not([style*="100%"]) {
    display: none;
  }
  /* Keep first + last ticks visible by ID-style class */
  .connect-window-rail {
    margin-left: 8px;
    margin-right: 8px;
  }
}

/* Tablet */
@media (max-width: 960px) {
  .coce-section { padding: 84px var(--section-pad-h); }
  .coce-tiles--three { grid-template-columns: 1fr; }
  .coce-tiles--two   { grid-template-columns: 1fr; }
  /* Stack tiles vertically on tablet/mobile. Reset the flex sizing:
     on desktop we use flex:1 1 0 to share row width between columns,
     but in a column-direction flex container that becomes "share
     height", which collapses each tile to 0 height before min-
     content. Combined with overflow:hidden on the tile, the list
     gets clipped. `flex:none` restores natural content sizing. */
  .coce-tiles--split { flex-direction: column; align-items: stretch; }
  .coce-tiles--split > .coce-tile,
  .coce-tiles--split > .coce-tiles--split-right {
    flex: none;
    min-height: 0;
  }
  /* Tighter image row on tablet — smaller explicit height so both
     portraits (same source height, matched display height) are
     smaller and don't dominate the stacked tile column below. */
  .coce-lockup-row {
    min-height: 320px;
    margin-bottom: -80px;
  }
  .coce-lockup-img { height: 320px; }
  .coce-head { margin-bottom: 40px; }
  /* With the new order (journey first, explainer second), the gap
     between them sits on `.coce-journey + .coce-head`. Journey itself
     no longer needs a top margin. */
  .coce-journey { margin-top: 0; padding-top: 0; }
  .coce-journey + .coce-head { margin-top: 112px; }
  .coce-journey-head { margin-bottom: 72px; }
}
/* Mobile */
@media (max-width: 600px) {
  .coce-section { padding: 64px 20px; }
  .coce-tile { padding: 26px 24px; }
  .coce-tile h4 { font-size: 17px; }
  .coce-journey { margin-top: 0; padding-top: 0; }
  .coce-journey + .coce-head { margin-top: 72px; }
  /* Phone: smallest explicit height so the lockup is compact */
  .coce-lockup-row { min-height: 240px; margin-bottom: -50px; }
  .coce-lockup-img { height: 240px; }
}

/* ── CONTINUITY JOURNEY ───────────────────────────────────── */
.journey-section {
  background: white;
  padding: 104px var(--section-pad-h);
  border-top: 1px solid var(--hairline);
}
.journey-inner { max-width: var(--max-w); margin: 0 auto; }
.journey-head { margin-bottom: 64px; text-align: center; }
.journey-head .section-label { color: var(--purple); }
.journey-head h2 {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.05; letter-spacing: -1.8px;
  margin-bottom: 14px;
}
.journey-head h2 em {
  font-family: var(--font-display); font-style: italic;
  font-weight: 400; color: var(--purple);
}
.journey-head p {
  font-size: 16px; color: var(--mid); line-height: 1.7;
  font-weight: 300; max-width: 560px; margin: 0 auto;
}

.journey-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  /* Scroll progress vars (JS sets these 0→1 as you scroll through the section).
     --pLine   : dashed line "intensification" 0 → 1 (color darkens left → right)
     --pHead   : horizontal position of the bright glow head (0 = far left, 1 = far right)
     --pN1..4  : per-node activation (0 = resting, 1 = fully activated) */
  --pLine: 0;
  --pHead: 0;
  --pN1: 0; --pN2: 0; --pN3: 0; --pN4: 0;
}
/* Dashed line base — faint purple. Gradient mask applied on top to
   "paint" it stronger purple as pLine progresses (left → right). */
.journey-line {
  position: absolute;
  top: 28px; left: 12.5%; right: 12.5%; height: 2px;
  background: repeating-linear-gradient(to right, rgba(124,58,237,0.22) 0 6px, transparent 6px 12px);
  z-index: 0;
}
/* A second dashed layer sits on top, SAME pattern but full brand purple,
   revealed from the left via clip-path driven by --pLine. This is the
   "intensifying dashed line" effect. */
.journey-line::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to right, var(--purple) 0 6px, transparent 6px 12px);
  clip-path: inset(0 calc((1 - var(--pLine)) * 100%) 0 0);
}
/* The bright glow "head" — a soft radial ball that travels the line,
   leading the journey. Horizontal position tracks --pHead. */
.journey-glow-head {
  position: absolute;
  top: 50%; left: calc(var(--pHead) * 100%);
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  pointer-events: none;
  background: radial-gradient(circle at center,
    rgba(124,58,237,0.85) 0%,
    rgba(124,58,237,0.55) 30%,
    rgba(124,58,237,0.18) 60%,
    transparent 80%);
  border-radius: 50%;
  /* Subtle fade at the very start and end of the journey */
  opacity: calc(
    clamp(0, var(--pHead) * 10, 1) *
    clamp(0, (1 - var(--pHead)) * 10, 1)
  );
  filter: blur(2px);
}

.journey-step {
  position: relative; z-index: 1;
  text-align: center;
}
/* Each step's node pulls from its own --pN progress property.
   Multiple things scrub with pN:
   - border-color : mid-purple → solid brand purple (darkens with pN)
   - background fill via RGBA based on pN
   - scale: 1 → slightly bigger as pN → 1
   - box-shadow halo: invisible at pN=0, a soft purple ring at pN=1.
   All driven via CSS var math, no transitions, reversible on scroll-up. */
.journey-node {
  width: 56px; height: 56px; border-radius: 50%;
  /* Default color — gets overridden per-node below */
  background: white;
  border: 2px solid var(--purple-mid);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  position: relative;
  font-family: var(--font-display); font-style: italic;
  font-size: 20px; color: var(--purple); font-weight: 400;
}
/* Scroll-driven active state on each node.
   At pN=0, node looks resting; at pN=1, it's "activated" (filled purple
   for 02 which is the main stage; darker outline + small grow for others). */
.journey-step[data-node="1"] .journey-node {
  transform: scale(calc(1 + var(--pN1) * 0.08));
  border-color: rgb(
    calc(196 - var(--pN1) * 72),
    calc(181 - var(--pN1) * 123),
    calc(253 - var(--pN1) * 16)
  );
  border-width: calc(2px + var(--pN1) * 1px);
  box-shadow: 0 0 0 calc(var(--pN1) * 8px) rgba(124,58,237, calc(var(--pN1) * 0.12));
}
/* Step 02 — the "featured" stage. Starts with the same white fill as the
   other nodes; fills to solid brand purple as pN2 → 1.
   The outer ring is drawn with an inset box-shadow instead of a real
   border — this guarantees the ring sits ON TOP of the fill (not outside
   it) so there's no subpixel gap at any zoom level. */
.journey-step[data-node="2"] .journey-node {
  transform: scale(calc(1 + var(--pN2) * 0.14));
  /* Layered background: white base + purple overlay whose opacity tracks pN2 */
  background:
    linear-gradient(rgba(124, 58, 237, var(--pN2)), rgba(124, 58, 237, var(--pN2))),
    white;
  background-clip: border-box;
  /* Hide the default 2px border from the base rule — we're drawing our
     own ring inside via box-shadow below. */
  border-color: transparent;
  color: rgb(
    calc(124 + var(--pN2) * 131),
    calc(58  + var(--pN2) * 197),
    calc(237 + var(--pN2) * 18)
  );
  box-shadow:
    /* Inset ring that overlaps the fill — thicker at full activation */
    inset 0 0 0 calc(2px + var(--pN2) * 2px)
      rgb(
        calc(196 - var(--pN2) * 72),
        calc(181 - var(--pN2) * 123),
        calc(253 - var(--pN2) * 16)
      ),
    /* Outer halo that radiates as pN2 climbs */
    0 0 0 calc(var(--pN2) * 10px) rgba(124,58,237, calc(var(--pN2) * 0.14));
}
.journey-step[data-node="3"] .journey-node {
  transform: scale(calc(1 + var(--pN3) * 0.08));
  border-color: rgb(
    calc(196 - var(--pN3) * 72),
    calc(181 - var(--pN3) * 123),
    calc(253 - var(--pN3) * 16)
  );
  border-width: calc(2px + var(--pN3) * 1px);
  box-shadow: 0 0 0 calc(var(--pN3) * 8px) rgba(124,58,237, calc(var(--pN3) * 0.12));
}
.journey-step[data-node="4"] .journey-node {
  transform: scale(calc(1 + var(--pN4) * 0.08));
  border-color: rgb(
    calc(196 - var(--pN4) * 72),
    calc(181 - var(--pN4) * 123),
    calc(253 - var(--pN4) * 16)
  );
  border-width: calc(2px + var(--pN4) * 1px);
  box-shadow: 0 0 0 calc(var(--pN4) * 8px) rgba(124,58,237, calc(var(--pN4) * 0.12));
}
.journey-step h4 {
  font-size: 15px; font-weight: 600; margin-bottom: 6px;
  color: var(--ink); letter-spacing: -0.3px;
}
.journey-step p {
  font-size: 13px; color: var(--muted); line-height: 1.6;
  font-weight: 300; max-width: 180px; margin: 0 auto;
}
.journey-same {
  margin-top: 56px;
  background: var(--lavender);
  border-radius: 20px;
  padding: 28px 36px;
  display: flex; align-items: center; gap: 24px;
  border: 1px solid rgba(124,58,237,0.12);
}
.journey-same-ic {
  width: 56px; height: 56px; border-radius: 50%;
  background: white;
  display: flex; align-items: center; justify-content: center;
  color: var(--purple);
  flex-shrink: 0;
  border: 1px solid rgba(124,58,237,0.18);
}
.journey-same p {
  font-size: 15px; color: var(--ink); line-height: 1.55;
  font-weight: 400;
}
.journey-same p strong {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  color: var(--purple);
}

/* ── EDITORIAL STATS ──────────────────────────────────────── */
.e-stats-section {
  /* Purple pool at top edge — marks the entry into the merged
     Stats + HIW + Trust white band. Toned down to match CoCE:
     shorter ellipse + earlier fade-out so it doesn't bleed far
     into the section. */
  background:
    radial-gradient(ellipse 140% 40% at 50% -8%,
      rgba(124,58,237,0.38) 0%,
      rgba(124,58,237,0.22) 14%,
      rgba(124,58,237,0.10) 28%,
      rgba(124,58,237,0.04) 40%,
      transparent 50%),
    white;
  /* Tightened: was 292/190 → now 180/120 to close excess vertical
     headroom while keeping the section breathable on desktop. */
  padding: 180px var(--section-pad-h) 120px;
  position: relative;
  overflow: hidden;
}
.e-stats-inner { max-width: var(--max-w); margin: 0 auto; }
.e-stats-head {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  justify-items: center; text-align: center;
  align-items: end; margin-bottom: 56px;
}
.e-stats-head h2 {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.05; letter-spacing: -1.8px;
  margin: 0;
}
.e-stats-head h2 em {
  font-family: var(--font-display); font-style: italic;
  font-weight: 400; color: var(--purple);
}
.e-stats-head p {
  font-size: 15px; color: var(--mid); line-height: 1.7;
  font-weight: 300; max-width: 420px; margin: 0;
}

.e-stats-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
}
.e-stat {
  background: white;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  transition: all 0.22s ease;
  position: relative; overflow: hidden;
}
.e-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(124,58,237,0.08);
  border-color: var(--purple-mid);
}
.e-stat.sz-lg { grid-column: span 6; min-height: 240px; }
.e-stat.sz-md { grid-column: span 4; }
.e-stat.sz-sm { grid-column: span 3; }

/* Solo slab variant — used when the section contains a single hero
   stat instead of a multi-card grid. Centred, max-width capped, with
   generous vertical rhythm so the number reads as editorial display
   rather than a small stat tile. Pairs with .accent-d.glass-card--dark
   for the dark ink fill + yellow italic number treatment. */
.e-stat.e-stat--solo {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 56px;
  min-height: 0;
  text-align: center;
  align-items: center;
  gap: 22px;
  border-radius: 28px;
}
.e-stat.e-stat--solo .e-stat-lbl {
  font-size: 13px;
  letter-spacing: 0.12em;
  margin-bottom: 0;
}
.e-stat.e-stat--solo .e-stat-num {
  font-size: clamp(96px, 14vw, 180px);
  line-height: 0.92;
  letter-spacing: -4px;
  margin: 0;
}
.e-stat.e-stat--solo .e-stat-sub {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 300;
  max-width: 52ch;
  margin: 0 auto;
  opacity: 0.85;
}
@media (max-width: 720px) {
  .e-stat.e-stat--solo {
    padding: 44px 28px;
    border-radius: 22px;
  }
  .e-stat.e-stat--solo .e-stat-sub {
    font-size: 15px;
  }
}

/* Bottom row centering — DESKTOP ONLY. On smaller viewports the grid
   collapses to 2 cols, so references to columns 3/7 would create
   implicit tracks and break the layout. */
@media (min-width: 961px) {
  .e-stats-grid .e-stat.sz-md:nth-of-type(4) { grid-column: 3 / span 4; }
  .e-stats-grid .e-stat.sz-md:nth-of-type(5) { grid-column: 7 / span 4; }
}

.e-stat-num {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(48px, 6vw, 76px);
  line-height: 0.95; font-weight: 400;
  color: var(--ink);
  letter-spacing: -2px; margin-bottom: 0;
}
.e-stat.accent-p .e-stat-num { color: var(--purple); }
.e-stat.accent-d {
  background: var(--ink);
  border-color: var(--ink);
}
.e-stat.accent-d .e-stat-num { color: var(--yellow); }
.e-stat.accent-d .e-stat-lbl { color: rgba(255,255,255,0.5); }
.e-stat.accent-d .e-stat-sub { color: white; }

.e-stat-lbl {
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 8px;
}
.e-stat-sub {
  font-size: 14px; color: var(--mid); line-height: 1.5;
  font-weight: 400; margin-top: 14px;
}
.e-stats-note {
  text-align: center; font-size: 13px;
  color: var(--muted); margin-top: 28px;
  font-weight: 300;
}

.hiw-section {
  background: white;
  /* Top padding reduced another 35% (130 → 84) to tighten gap
     between stats and HIW. Bottom kept at 150. */
  padding: 84px var(--section-pad-h) 150px;
  position: relative;
  overflow: hidden;
}
.hiw-inner { max-width: 1800px; margin: 0 auto; }
.hiw-head {
  text-align: center;
  margin: 0 auto 72px;
  max-width: 640px;
}
.hiw-head .section-label { margin-bottom: 18px; display: inline-block; }
.hiw-head h2,
.connect-window-head h2 {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -1.8px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 18px;
}
.hiw-head h2 em,
.connect-window-head h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--purple);
}
.hiw-head p,
.connect-window-head p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--mid);
  font-weight: 300;
  max-width: 52ch;
  margin: 0 auto;
}

.hiw-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
  align-items: start;
  /* Scroll progress properties (0 → 1). JS sets these as you scroll.
     Each step has separate -fade (opacity, quick ease-out) and -pop
     (transform, overshoot curve) so the visual is "quick fade + pop
     into position" rather than a gentle uniform fade. */
  --p: 0;
  --p1-fade: 0; --p1-pop: 0;
  --p2-fade: 0; --p2-pop: 0;
  --p3-fade: 0; --p3-pop: 0;
  --p4-fade: 0; --p4-pop: 0;
  --pLine: 0;
  --pHead: 0;
  --pPhoto: 0;
  --pBorder: 0;
  --pTrail: 0;
  --pShimmerFade: 0;
}
/* ── HIW LINE + GLOW HEAD (matches Journey recipe) ──
   Base dashed line is faint purple and always visible. A second dashed
   layer with full-opacity purple is revealed from the left via clip-path
   driven by --pLine — this is the "intensifying" trail behind the person.
   A bright glow head dot travels along the line via --pHead. */
.hiw-steps::before {
  content: '';
  position: absolute;
  top: 320px; left: 12.5%; right: 12.5%;
  height: 1px;
  background-image: linear-gradient(to right,
    rgba(124,58,237,0.22) 0%, rgba(124,58,237,0.22) 50%, transparent 50%);
  background-size: 14px 1px;
  background-repeat: repeat-x;
  z-index: 0;
  pointer-events: none;
}
/* Intensifying overlay: full-opacity purple dashed, revealed from the left */
.hiw-steps::after {
  content: '';
  position: absolute;
  top: 320px; left: 12.5%; right: 12.5%;
  height: 1px;
  background-image: linear-gradient(to right,
    var(--purple) 0%, var(--purple) 50%, transparent 50%);
  background-size: 14px 1px;
  background-repeat: repeat-x;
  z-index: 0;
  pointer-events: none;
  clip-path: inset(0 calc((1 - var(--pLine)) * 100%) 0 0);
}
/* Bright glow head dot travels the line. Positioned at the same vertical
   spot as the dashed line (top: 320px), horizontal position driven by --pHead. */
.hiw-glow-head {
  position: absolute;
  top: 320px;
  left: calc(12.5% + var(--pHead) * 75%);
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  pointer-events: none;
  background: radial-gradient(circle at center,
    rgba(124,58,237,0.9) 0%,
    rgba(124,58,237,0.55) 30%,
    rgba(124,58,237,0.18) 60%,
    transparent 80%);
  border-radius: 50%;
  z-index: 1;
  /* Fade at the start and end of the line */
  opacity: calc(
    clamp(0, var(--pHead) * 10, 1) *
    clamp(0, (1 - var(--pHead)) * 10, 1)
  );
  filter: blur(2px);
}
.hiw-step {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Each step's opacity scrubs on --pN-fade (quick ease-out),
   slide/pop scrubs on --pN-pop (overshoot curve). At pop=0 the step
   sits 24px below its final position; at pop=1 it's in place. */
.hiw-step[data-step="1"] {
  opacity: var(--p1-fade);
  transform: translateY(calc((1 - var(--p1-pop)) * 24px));
}
.hiw-step[data-step="2"] {
  opacity: var(--p2-fade);
  transform: translateY(calc((1 - var(--p2-pop)) * 24px));
}
.hiw-step[data-step="3"] {
  opacity: var(--p3-fade);
  transform: translateY(calc((1 - var(--p3-pop)) * 24px));
}
.hiw-step[data-step="4"] {
  opacity: var(--p4-fade);
  transform: translateY(calc((1 - var(--p4-pop)) * 24px));
}

/* Heading + sub now sit ABOVE the image */
.hiw-step h4 {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.4px;
}
.hiw-step p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mid);
  font-weight: 300;
  max-width: 26ch;
  margin: 0 auto 24px;
}

.hiw-phone {
  position: relative;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 36px;
}
.hiw-phone img {
  width: 100%;
  height: auto;
  display: block;
}
/* White → transparent fade: solid white over the bottom of the phone,
   fades upward to reveal the top ~65% of the image. For this to read
   as "phone dissolving into the background," the pixels immediately
   behind the overlay need to be close to white themselves. On mobile
   we pull back the triple-band's purple glow (see merged-band rules)
   so that condition still holds. */
.hiw-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,0.55) 70%,
    rgba(255,255,255,0.95) 82%,
    #FFFFFF 90%,
    #FFFFFF 100%);
}

/* Square photo tile (final step). Offset vertically so it intersects the
   dashed connector line at its halfway point (matches phones' vertical
   midpoint of ~340px from top of grid). The border is drawn by an SVG
   overlay (see .hiw-photo-border) so it can animate "wrapping" around
   the photo when the section enters the viewport. */
.hiw-photo {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  margin: 90px auto 0;
  border-radius: 26px;
  box-shadow: 0 18px 42px rgba(124,58,237,0.22),
              0 6px 14px rgba(28,18,41,0.10);
  /* Photo scale + opacity scrub with --pPhoto (0 → 1). No transition. */
  opacity: var(--pPhoto);
  transform: scale(calc(0.92 + (var(--pPhoto) * 0.08)));
}
.hiw-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 26px;
}
/* Per-image framing override for the Share step photo (Shannon + Tash):
   the people sit centred horizontally with their faces in the upper third
   of the source image. Anchor object-position to the face line so the
   bottom of the photo (legs/floor) is cropped and faces sit at the
   visual centre of the square frame. We deliberately avoid transform:scale
   here \u2014 it would scale the <img> outside the frame and break the
   surrounding SVG border + shadow alignment. */
.hiw-step--final .hiw-photo img {
  object-position: 50% 26%;
}

/* SVG overlay that draws the purple "wrap-around" border. Two paths both
   start at the left-middle of the frame — one traces the top half, one
   the bottom — meeting at the right-middle. stroke-dashoffset scrubs with
   --pBorder (0 → 1) to "draw" the wrap. */
.hiw-photo-border {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}
.hiw-photo-border path {
  stroke: var(--purple);
  stroke-width: 4;
  stroke-dasharray: 458;
  /* At pBorder=0, offset=458 (hidden). At pBorder=1, offset=0 (fully drawn). */
  stroke-dashoffset: calc(458 * (1 - var(--pBorder)));
}

/* "Second lap" shimmer — a conic-gradient border overlay that fades in
   once the SVG wrap completes, then its hotspot rolls around the edge
   driven by --shimmer (scroll-scrubbed in JS, same as glass cards).
   Gives the photo the exact reflective-light language as every other
   featured card on the page. */
.hiw-photo-shimmer {
  position: absolute;
  /* Inset INWARD from the photo edge — sits just inside the outer
     purple wrap-around SVG border, creating a double-border glass
     effect (outer: animated purple wrap, inner: reflective conic-
     gradient rim). Tightened from 6px to 2px so the gap between
     the two rims feels like the same tight double-border language
     used on the other glass cards. */
  inset: 2px;
  border-radius: 24px;
  pointer-events: none;
  opacity: var(--pShimmerFade, 0);
  z-index: 2;
}
.hiw-photo-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Line weight matched to the other glass cards' reflective rim
     (dark/brand variants use 1.5px). Was 3px — too heavy against
     the outer wrap border and visually louder than every other
     glass tile on the page. */
  padding: 1.5px;
  background: conic-gradient(
    from calc(var(--shimmer, 0) * 180deg + 135deg),
    rgba(124, 58, 237, 0.25) 0deg,
    rgba(167, 120, 255, 0.60) 45deg,
    rgba(255, 255, 255, 0.80) 90deg,
    rgba(167, 120, 255, 0.60) 135deg,
    rgba(124, 58, 237, 0.30) 180deg,
    rgba(124, 58, 237, 0.18) 270deg,
    rgba(124, 58, 237, 0.25) 360deg);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Dashed trail that continues from the photo's bottom-center edge downward.
   Drawn after the border wrap + shimmer complete. The trail length is
   controlled by --pTrail (0 → 1); the bottom portion fades to transparent
   via mask-image so the line appears to dissolve into the distance. */
.hiw-photo-trail {
  /* Trail removed — the Trust section's lock rope is now a standalone
     element that fades in from the top on scroll, not a continuation
     of a line from above. */
  display: none !important;
}

/* Default-hide rules — MUST appear BEFORE the @media block so that
   the mobile-only show rules inside the media query win via source order.
   Previously these were placed AFTER the media query and were winning
   the cascade on mobile, hiding the mobile border SVG and connector lines. */
.hiw-photo-border--mobile { display: none; }
.hiw-connector { display: none; }

/* Reduced-motion: show everything instantly, ignore scroll progress */
@media (prefers-reduced-motion: reduce) {
  .hiw-steps {
    --p1-fade: 1; --p1-pop: 1;
    --p2-fade: 1; --p2-pop: 1;
    --p3-fade: 1; --p3-pop: 1;
    --p4-fade: 1; --p4-pop: 1;
    --pLine: 1; --pHead: 0; --pPhoto: 1; --pBorder: 1; --pTrail: 0; --pShimmerFade: 1;
  }
  .hiw-glow-head { display: none; }
  .journey-rail {
    --pLine: 1; --pHead: 0;
    --pN1: 1; --pN2: 1; --pN3: 1; --pN4: 1;
  }
  .journey-glow-head { display: none; }
}

/* Tablet + mobile: stack centered, kill the horizontal dashed line */
@media (max-width: 960px) {
  /* Stats bottom + HIW top trimmed another 35% to tighten the transition. */
  .e-stats-section { padding: 84px var(--section-pad-h) 26px; }
  .hiw-section { padding: 31px var(--section-pad-h) 92px; }
  /* Larger gap between the HIW heading text and Step 1 (Create) so the
     first step has room to breathe after the intro paragraph — was 48px. */
  .hiw-head { margin-bottom: 96px; }
  .hiw-steps {
    grid-template-columns: 1fr;
    /* Larger gap so there's clear space for the dashed connector lines
       between each step (previously the connectors were hidden because
       steps sat too close together). */
    gap: 48px;
    position: relative;
  }
  /* Kill the horizontal (desktop) dashed line */
  .hiw-steps::before { display: none; }
  .hiw-steps::after { display: none; }
  .hiw-glow-head { display: none; }

  .hiw-phone { max-width: 220px; }
  .hiw-photo { max-width: 260px; margin-top: 0; }

  /* Steps: allow connector lines to render ON TOP so the lines visually
     flow down past the phone/photo bottoms — no z-index dominance. */
  .hiw-step {
    position: relative;
    z-index: 1;
    /* Step must NOT clip content that extends beyond its bounds
       (the phone image could have an inherent bounding box that hides
       neighbouring connectors). */
    overflow: visible;
  }

  /* On stacked layout, skip the per-step fade/pop scroll-scrub — let the
     steps themselves just appear as you scroll to them (they have plenty
     of vertical space on mobile). Force all p values to their "finished"
     state so content is always visible. */
  .hiw-steps {
    --p1-fade: 1; --p1-pop: 1;
    --p2-fade: 1; --p2-pop: 1;
    --p3-fade: 1; --p3-pop: 1;
    --p4-fade: 1; --p4-pop: 1;
    --pLine: 1; --pHead: 0; --pPhoto: 1;
    /* pBorder and pShimmerFade on the photo ARE scroll-driven on mobile
       (see .hiw-steps-mobile-scrub JS) — but start at 0 here so they
       animate as the photo enters view. */
    --pBorder: 0; --pShimmerFade: 0;
    /* pTrail also scroll-driven on mobile */
    --pTrail: 0;
  }

  /* Desktop SVG border hidden; mobile variant shown */
  .hiw-photo-border--desktop { display: none; }
  .hiw-photo-border--mobile { display: block; }

  /* Mobile trail: also hidden (no trail in the new design) */
  .hiw-photo-trail { display: none; }

  /* ====== VERTICAL CONNECTOR LINES (mobile only) ======
     Each connector is its own grid row between consecutive steps. Now
     layered ABOVE the steps (z-index: 5) and given generous height so
     the dashes are always visible — user complaint was they weren't
     showing at all, so we make them definitively visible here. */
  .hiw-connector {
    display: block;
    position: relative;
    width: 100%;
    /* Generous height so the eye follows a clear vertical channel
       between steps. Taller than the underlying gap so the dashed
       line reaches closer to the next heading. */
    height: 120px;
    z-index: 5;
    --pConn: 0;
    pointer-events: none;
  }
  .hiw-connector::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background-image: linear-gradient(to bottom,
      var(--purple) 0%, var(--purple) 50%, transparent 50%);
    background-size: 2px 12px;
    background-repeat: repeat-y;
    clip-path: inset(0 0 calc((1 - var(--pConn)) * 100%) 0);
    /* Fade only at the very top (soft emergence from phone above) and
       a tiny fade at the bottom. The bottom fade is much smaller than
       before (was 15%, now 3%) so the line extends close to the next
       heading before dissolving. */
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%, black 12%, black 97%, transparent 100%);
            mask-image: linear-gradient(to bottom,
      transparent 0%, black 12%, black 97%, transparent 100%);
    pointer-events: none;
  }
  .hiw-connector[data-connector="1"] { --pConn: var(--pConn1, 0); }
  .hiw-connector[data-connector="2"] { --pConn: var(--pConn2, 0); }
  .hiw-connector[data-connector="3"] { --pConn: var(--pConn3, 0); }
}

/* Step heading "lit" state — applies on all breakpoints. JS toggles
   .is-lit on each step at the appropriate moment (when the phone pops
   in on desktop, or when the connector line arrives on mobile). */
.hiw-step.is-lit h4 {
  color: var(--purple);
}
.hiw-step h4 {
  transition: color 0.35s ease;
}

@media (max-width: 600px) {
  .e-stats-section { padding: 64px 20px 21px; }
  .hiw-section { padding: 26px 20px 80px; }
  .hiw-phone  { max-width: 200px; }
  .hiw-photo  { max-width: 240px; }
  .hiw-step h4 { font-size: 20px; }
  .hiw-connector { height: 100px; }
  .hiw-steps { gap: 32px; }
}

/* ── TRUST & SAFETY ────────────────────────────────────────── */
.trust-section {
  /* Plain white background — no glow effects. The Trust section sits
     on its own visual island; HIW above provides the trio's bottom
     exit glow, and the voices-band below has its own treatment. */
  background: white;
  padding: 120px var(--section-pad-h);
  position: relative;
  overflow: hidden;
}
.trust-inner {
  /* Match HIW's 1800px inner width so the lock (absolutely positioned
     below) aligns horizontally with where the HIW photo sat above.
     position:relative is the anchor for the absolutely-positioned
     padlock. */
  max-width: 1800px; margin: 0 auto;
  position: relative;
  display: block;
}
/* Trust-head: a centered 1100px block (matching tile width below) for
   the heading text. The padlock is positioned ABSOLUTELY to align with
   column 4 of the HIW grid above (at ~87.5% of the 1800px trust-inner
   width), regardless of where the heading text sits. */
.trust-head {
  position: relative;
  /* Same width as tile list below so the heading aligns perfectly with
     the tiles. The h2 uses the full width (no ch-cap). */
  max-width: var(--max-w);
  margin: 0 auto 48px;
  min-height: 240px;
}
.trust-head-text {
  text-align: left;
  /* No ch-based cap — let text span the full trust-head width. */
}
.trust-head-text .trust-eyebrow {
  display: inline-block;
}
.trust-head-text h2 {
  /* Large cap so heading fits on ~2 lines instead of wrapping tight */
  max-width: 36ch;
}
.trust-head-text p {
  max-width: 64ch;
}
.trust-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 18px;
}
.trust-head h2 {
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.08; letter-spacing: -1.6px;
  margin-bottom: 18px;
}
.trust-head h2 em {
  font-family: var(--font-display); font-style: italic;
  font-weight: 400; color: var(--purple);
}
.trust-head p {
  font-size: 17px; color: var(--mid); line-height: 1.65;
  font-weight: 300; margin-bottom: 0;
}

/* ============================================================
   PADLOCK + DRAGGABLE ROPE (physics-based)
   The lock hangs from a rope that's simulated in JS using a
   chain of verlet-integrated points. The user can grab the lock,
   drag it around, and release it — the rope bends/flops like a
   real rope and the lock swings back to its rest position.

   Anchor: top bead of the rope is pinned in world space (near
   where the HIW trail ends above). Lock bead: bottom of the chain,
   follows the mouse when held.

   Rendering:
     - .trust-lock       : absolute positioned container. position
                           of this container is "where the top of the
                           rope anchors". Sized generously to contain
                           all possible swing positions.
     - .trust-lock-rope  : SVG whose <path> is redrawn each frame
                           from the bead positions.
     - .trust-lock-img   : positioned absolutely INSIDE the container;
                           JS sets its transform each frame to match
                           the bottom bead's position + rope angle.
   ============================================================ */
.trust-lock {
  position: absolute;
  /* Horizontal position: lock's right edge aligns with the tile cards'
     right edge below. Tiles are max-width 1100px centered in 1800px
     trust-inner, so their right edge is at 80.56% of trust-inner.
     The lock image is 140px wide (70px half-width = 3.89% of 1800),
     centered within its 600px container at container's `left`%. So to
     place the image's right edge at 80.56%, the container centers at
     80.56% - 3.89% = 76.67%. */
  left: 76.67%;
  top: 0;
  /* Container is wide + tall enough to cover all reasonable rope
     swing positions. Width wider than the lock itself so horizontal
     swings don't clip. */
  width: 600px;
  height: 600px;
  /* Anchor point (top-center of container = SVG viewBox y=0) sits
     exactly at the TOP of the Trust section background. Pulled up by
     the section's top padding (now 180px, was 292px) so the rope's
     pivot stays anchored at the section boundary even when dragging
     the lock around. */
  margin-left: -300px;
  margin-top: -180px;
  z-index: 2;
  /* The container itself doesn't receive pointer events (only the
     lock image does, below). Keeps hover/scroll working normally
     on surrounding content. */
  pointer-events: none;
}
.trust-lock-rope {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  /* Rope reveals in two layered ways:
     1) Permanent alpha mask: top of rope is fully transparent, fading
        to fully opaque at the bottom where it connects to the lock.
        This gives the rope the look of "emerging from nothing" at its
        anchor point — no hard top edge.
     2) Scroll-driven opacity: as user scrolls into the section, the
        overall rope fades in from 0 → 1 via --pLockLine. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,0.2) 25%, black 65%, black 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,0.2) 25%, black 65%, black 100%);
  opacity: var(--pLockLine, 0);
  transition: opacity 0.15s linear;
}
.trust-lock-rope-path {
  stroke: var(--purple);
  /* DESKTOP values — rope rendered at 1:1 scale, no CSS transform.
     Matches the feel of HIW connector dashes (6 on, 6 off, 2px wide). */
  stroke-width: 2;
  stroke-dasharray: 6 6;
  stroke-linecap: round;
  fill: none;
}
.trust-lock-img {
  position: absolute;
  /* Desktop lock size: 25% smaller than previous (140 → 105). */
  width: 105px;
  height: auto;
  /* Rotate around the top-center (where the shackle meets the rope) */
  transform-origin: 50% 0%;
  /* Default placement — roughly the rest position. Used during the
     intro pop+wobble animation; JS takes over positioning once the
     sim is active.
     Image centered in 600px container: left = (600 - 105)/2 = 247.5
     Top matches new ROPE_LENGTH = 250. */
  top: 250px;
  left: 247.5px;
  /* Initial state: invisible, scaled down. Intro keyframe animates
     this in with a pop+wobble, then sim takes over. */
  opacity: 0;
  transform: scale(0.6);
  pointer-events: auto;
  cursor: grab;
  -webkit-user-drag: none;
  user-select: none;
  touch-action: none;
}
.trust-lock.is-dragging .trust-lock-img {
  cursor: grabbing;
}

/* ── INTRO phase ─────────────────────────────────────────
   When .is-intro is added (scroll triggers it), run the pop+wobble
   animation. During this phase, JS keeps its hands off the lock img
   transform so the CSS animation plays cleanly. Duration: 2.2s.
   After that, JS removes .is-intro, adds .is-sim-active, and the
   physics sim drives the transform directly. */
.trust-lock.is-intro .trust-lock-img {
  /* Duration was 2.6s — the early sways + drift dragged on. Cut the
     START portion (the drop-in + big swings + dying wobble) in half
     while keeping the ENDING (snap → pop → settle) at its original
     absolute timing. New total: 1.8s. The ending 0.988s is preserved
     pixel-perfect; the opening 1.612s is compressed to 0.812s. */
  animation: trust-lock-intro 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes trust-lock-intro {
  /* START — compressed by half vs the previous 2.6s version. */
  /* Drop in: fall from above while already swinging slightly */
  0%   { opacity: 0; transform: translateY(-20px) scale(0.4) rotate(-8deg); }
  /* First BIG sway — dramatic overshoot to show the rope's weight. */
  7%   { opacity: 1; transform: translateY(0) scale(1.18) rotate(-26deg); }
  /* Big swing back the other way — full, heavy pendulum motion */
  16%  { opacity: 1; transform: translateY(0) scale(0.94) rotate(22deg); }
  /* Third swing — still quite pronounced */
  25%  { opacity: 1; transform: translateY(0) scale(1.04) rotate(-15deg); }
  /* Fourth — losing energy */
  32%  { opacity: 1; transform: translateY(0) scale(0.99) rotate(9deg); }
  /* Fifth — small wobble */
  39%  { opacity: 1; transform: translateY(0) scale(1.01) rotate(-4deg); }
  /* Sixth — nearly settled, small drift */
  45%  { opacity: 1; transform: translateY(0) scale(1)    rotate(1deg); }
  /* END — preserved from the original 2.6s timing (same absolute
     segment durations: ~0.26s each between snap, pop, and settle). */
  /* SNAP — lock shrinks briefly just before the final pop */
  59%  { opacity: 1; transform: translateY(0) scale(0.92) rotate(0deg); }
  /* POP — scale overshoots, quick energy release */
  74%  { opacity: 1; transform: translateY(0) scale(1.12) rotate(0deg); }
  /* Gentle settle back */
  88%  { opacity: 1; transform: translateY(0) scale(0.98) rotate(0deg); }
  /* Settled — sim takes over from here */
  100% { opacity: 1; transform: translateY(0) scale(1)    rotate(0deg); }
}

/* ── SIM phase ───────────────────────────────────────────
   Once sim is active, JS writes transform directly every frame.
   We explicitly set transform: rotate(0deg) here so there's no flash
   of the base scale(0.6) in between the intro ending and JS's first
   sim frame. JS will override this with the live rotation value. */
.trust-lock.is-sim-active .trust-lock-img {
  opacity: 1;
  transform: rotate(0deg);
}

/* ── REVERSE (scroll back up) ────────────────────────────
   If the user scrolls past the section and back up, remove the
   intro/sim classes — the lock fades out, rope fades out (via
   --pLockLine going back to 0). Transitions handle the smooth
   disappearance. */
.trust-lock-img {
  transition: opacity 0.4s ease;
}

/* ── SPEECH BUBBLE REWARD ──────────────────────────────────
   Small "Like we said, robust and secure." bubble that drops
   out of the lock after the user has thrown it around a few
   times. JS positions it at the lock's current tail position
   every frame (so it follows the lock around). The drop +
   bob + fade animation is all CSS — triggered by adding the
   .is-bubble-out class on .trust-lock. Self-dismisses after
   the animation completes. Pointer-events none so it never
   blocks further dragging. */
.trust-lock-bubble {
  position: absolute;
  /* JS writes left/top each frame to track the lock; these are
     just the initial values for before JS first runs. */
  left: 300px;
  top: 260px;
  transform: translate(-50%, 0) scale(0.3);
  transform-origin: 50% 0%;
  /* Bubble visuals: white pill with soft brand-tinted shadow,
     purple border, brand-ink text. */
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
  line-height: 1.3;
  padding: 9px 14px;
  border-radius: 14px;
  border: 1px solid rgba(124, 58, 237, 0.28);
  box-shadow:
    0 6px 18px rgba(124, 58, 237, 0.18),
    0 2px 6px rgba(28, 18, 41, 0.08);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
/* Little tail on top pointing up towards the lock */
.trust-lock-bubble::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #FFFFFF;
  border-left: 1px solid rgba(124, 58, 237, 0.28);
  border-top: 1px solid rgba(124, 58, 237, 0.28);
}
/* When .is-bubble-out is set, play the drop + bob + linger + fade */
.trust-lock.is-bubble-out .trust-lock-bubble {
  animation: trust-lock-bubble-pop 3.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes trust-lock-bubble-pop {
  /* Start: hidden, tiny, hugging the lock (offset 0 = right at tail) */
  0%   { opacity: 0; transform: translate(-50%, -8px) scale(0.3); }
  /* Pop OUT: scale up, drop below the lock */
  12%  { opacity: 1; transform: translate(-50%, 28px) scale(1.08); }
  /* Settle bob: rebounds up a touch */
  22%  { opacity: 1; transform: translate(-50%, 20px) scale(0.98); }
  /* Settled */
  32%  { opacity: 1; transform: translate(-50%, 24px) scale(1); }
  /* Linger */
  80%  { opacity: 1; transform: translate(-50%, 24px) scale(1); }
  /* Fade out */
  100% { opacity: 0; transform: translate(-50%, 18px) scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .trust-lock-img {
    opacity: 1 !important;
    transform: scale(1) !important;
    animation: none !important;
  }
}
.trust-list {
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin: 0 auto; padding: 0;
  /* Tiles sit at a narrower cap than the trust-head above (which is
     1800px to align with HIW). This keeps the tiles readable rather
     than sprawling across the whole wide band. */
  max-width: var(--max-w);
}
/* Three-up variant: 3 stronger statements share a row on desktop. */
.trust-list--three {
  grid-template-columns: repeat(3, 1fr);
}
.trust-item {
  position: relative;
  background-color: #FBF5FC;
  border: 1px solid rgba(28,18,41,0.08);
  border-radius: 20px;
  padding: 34px 36px;
  min-height: 220px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Watermark icon inside each tile (real <img> for reliability) */
.trust-item-icon {
  position: absolute;
  right: -16px;
  bottom: -20px;
  width: 190px;
  height: 190px;
  object-fit: contain;
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
}
/* Inline-SVG icon variant — used in the new 3-up trust list. Sits
   top-left of the tile in a soft cream rounded square; same treatment
   as HIW step icons so the system reads as one. */
.trust-item-iconwrap {
  position: relative; z-index: 2;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--cream, #FDFAF5);
  color: var(--purple);
  margin-bottom: 22px;
  box-shadow: inset 0 0 0 1px rgba(124,58,237,0.18);
}
.trust-item-iconwrap svg {
  width: 30px; height: 30px;
}
.trust-item--purple .trust-item-iconwrap {
  background: rgba(255,255,255,0.14);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
}
.trust-item--accent .trust-item-iconwrap {
  background: #FFFFFF;
  color: var(--purple);
}
.trust-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(28,18,41,0.08);
  border-color: rgba(124,58,237,0.25);
}
.trust-item h4 {
  position: relative; z-index: 2;
  font-size: 19px; font-weight: 600;
  color: var(--ink); margin: 0 0 12px;
  letter-spacing: -0.3px;
  line-height: 1.25;
  max-width: 82%;
}
.trust-item p {
  position: relative; z-index: 2;
  font-size: 15px; color: var(--mid); line-height: 1.55;
  font-weight: 300; margin: 0;
  max-width: 82%;
}
/* Purple tile (4th), invert blend so dark icon pixels show on purple */
.trust-item--purple {
  background-color: var(--purple);
  border-color: var(--purple);
}
.trust-item--purple .trust-item-icon {
  opacity: 0.22;
  filter: brightness(1.8);
}
.trust-item--purple:hover {
  border-color: var(--purple);
  box-shadow: 0 14px 34px rgba(124,58,237,0.3);
}
.trust-item--purple h4 { color: #FFFFFF; }
.trust-item--purple p  { color: rgba(255,255,255,0.88); }

/* Plum/ink variant — mirrors the .e-stat.accent-d (675+ stat tile) so the
   "Australian-built, Australian-hosted" trust tile reads as a paired
   accent across the page: deep ink ground, yellow accent on the icon
   highlight + heading rim, soft white body copy. Pair this with
   .glass-card--dark for the matching cold-glass border treatment. */
.trust-item--plum {
  background-color: var(--ink);
  border-color: var(--ink);
}
.trust-item--plum:hover {
  border-color: var(--ink);
  box-shadow: 0 14px 34px rgba(28,18,41,0.45);
}
.trust-item--plum h4 { color: #FFFFFF; }
.trust-item--plum p  { color: rgba(255,255,255,0.78); }
.trust-item--plum .trust-item-iconwrap {
  background: rgba(255, 202, 1, 0.12);
  color: var(--yellow);
  box-shadow: inset 0 0 0 1px rgba(255, 202, 1, 0.42);
}
/* Keep the heading visually unified — same body font + weight as the rest
   of the title; just a yellow colour shift on "Australian-built" so the
   accent reads as one continuous text box, not a styled-out fragment. */
.trust-item--plum h4 em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--yellow);
  letter-spacing: inherit;
}
/* Accent tile, purple heading only */
.trust-item--accent h4 { color: var(--purple); }

/* ── YOUR STORIES (real pairings) ──────────────────────────── */
.stories-section {
  background: linear-gradient(180deg, #FDFAF5 0%, #DDD0EE 100%);
  padding: 130px 0 140px;
  position: relative;
  overflow: hidden;
}
.stories-section::before {
  display: none;
}
.stories-wrap {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--section-pad-h);
  position: relative; z-index: 1;
}
.stories-head {
  display: block;
  margin-bottom: 68px;
}
.stories-head .section-label {
  color: var(--purple);
  display: inline-block;
  margin-bottom: 18px;
}
.stories-head h2 {
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -2.4px;
  color: var(--ink);
  max-width: none;
  font-family: var(--font-body);
  font-weight: 600;
  text-wrap: balance;
}
.stories-head h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--purple);
}
.stories-head .stories-intro {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 44ch;
  padding-bottom: 10px;
}
.stories-head .stories-intro em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.story-card {
  background: white;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(28,18,41,0.04),
    0 16px 40px -16px rgba(28,18,41,0.15);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.story-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 3px rgba(28,18,41,0.04),
    0 32px 60px -20px rgba(28,18,41,0.25);
}
.story-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #E8DFCE;
}
.story-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.story-photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(180deg, transparent 0%, rgba(28,18,41,0.35) 100%);
  pointer-events: none;
}
.story-paired-badge {
  position: absolute;
  top: 16px; left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  font-family: var(--font-body);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(28,18,41,0.08);
}
.story-paired-badge svg {
  color: var(--purple);
}
.story-names-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 20px 16px;
  z-index: 2;
  color: white;
}
.story-names {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.3px;
}
.story-meta {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.story-body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}
.story-quote {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  text-wrap: pretty;
  flex: 1;
}
.story-quote::before {
  content: '"';
  font-family: var(--font-body);
  font-style: normal;
  color: var(--ink);
  font-size: 18px;
  line-height: 0;
  margin-right: 2px;
  position: relative;
  top: 2px;
}
.story-quote::after {
  content: '"';
  font-family: var(--font-body);
  font-style: normal;
  color: var(--ink);
  font-size: 18px;
  line-height: 0;
  margin-left: 2px;
  position: relative;
  top: 2px;
}
.story-attr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid rgba(28,18,41,0.08);
}
.story-attr-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.story-attr-role {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.story-role-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-family: var(--font-body);
}
.story-role-tag-mum {
  background: rgba(255,202,1,0.22);
  color: #8B6914;
}
.story-role-tag-student {
  background: rgba(124,58,237,0.10);
  color: var(--purple);
}
/* Paired tag, matches the placement/shape of the mum (yellow) pill, in two shades of green */
.story-role-tag-pair {
  background: rgba(29,158,117,0.18);
  color: #0C6A4D;
}
.story-card.story-pending .story-quote {
  color: var(--muted);
  font-style: italic;
}
.story-card.story-pending .story-quote::before,
.story-card.story-pending .story-quote::after {
  display: none;
}
.story-note {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 40px;
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
}

@media (max-width: 960px) {
  .stories-head {
    margin-bottom: 48px;
  }
  .stories-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .stories-section {
    padding: 80px 0 90px;
  }
}

/* Upgrade voice avatars to accept a photo */
.voice-av.voice-av-photo {
  background: #ddd;
  padding: 0;
  overflow: hidden;
}
.voice-av.voice-av-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Paired card variant with real photo */
.ed-float-paired-photo {
  top: 40%;
  left: -8%;
  padding: 6px 14px 6px 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  transform: rotate(-5deg);
}
.ed-float-paired-photo .ed-pf-photo {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #ddd;
}
.ed-float-paired-photo .ed-pf-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* ── TESTIMONIAL STRIP ─────────────────────────────────────── */
.voices-section {
  background: linear-gradient(180deg, #FDFAF5 0%, #F3EBFB 100%);
  color: var(--ink);
  padding: 90px 0;
  position: relative; overflow: hidden;
}
.voices-head {
  max-width: var(--max-w); margin: 0 auto 48px;
  padding: 0 var(--section-pad-h); position: relative; z-index: 1;
}
.voices-head .section-label { color: var(--purple); }
.voices-head h2 {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.05; letter-spacing: -1.8px;
  color: var(--ink); margin-bottom: 14px;
  max-width: 22ch;
}
.voices-head h2 em {
  font-family: var(--font-display); font-style: italic;
  font-weight: 400; color: var(--purple);
}
.voices-head p {
  font-size: 16px; color: var(--mid); line-height: 1.7;
  font-weight: 300; max-width: 480px;
}

.voices-rail {
  position: relative; z-index: 1;
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* No internal padding — ghost ::before/::after spacers handle
     centering of first/last cards, and mask-image fades the edges. */
  padding: 4px 0 32px 0;
  scrollbar-width: none;
  justify-content: flex-start;
  scroll-behavior: smooth;
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
  /* Fade edges into the background so cards at the rail edges aren't
     sharply cut — they dissolve into the cream section behind them. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    black 9%,
    black 91%,
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0%,
    black 9%,
    black 91%,
    transparent 100%);
}
.voices-rail.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

/* Ghost spacers: half-rail wide minus half a card — when scrollLeft=0,
   the first card's center lands at the rail's horizontal center. Same
   for the last card at the far right scroll position. Enables center-
   snap to work at both extremes. */
.voices-rail::before,
.voices-rail::after {
  content: '';
  flex: 0 0 calc((100% - (100% - 100px) / 4) / 2);
  scroll-snap-align: none;
}
/* Restore text selection inside card content (still possible via double-click or long-press) */
.voices-rail .voice-q,
.voices-rail .voice-name,
.voices-rail .voice-role {
  -webkit-user-select: text;
          user-select: text;
}
.voices-rail::-webkit-scrollbar { display: none; }
.voices-rail.centered {
  justify-content: center;
}

/* Rail wrapper (position anchor for the arrow buttons).
   Capped at 1800px (same as CoCE) and centered with auto-margins, so on
   wide monitors the rail doesn't go edge-to-edge. This gives a visual
   hint that there are more cards to scroll to on the right, and matches
   the inner content width of other wide sections. */
.voices-rail-wrap {
  position: relative;
  display: block;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 var(--section-pad-h);
  box-sizing: border-box;
}
/* Prev/Next arrow buttons — circular, floating at the edges of the rail,
   vertically centered on the cards. Subtle at rest, brighter on hover. */
.voices-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(28,18,41,0.08);
  box-shadow: 0 6px 18px rgba(28,18,41,0.08),
              0 2px 6px rgba(28,18,41,0.04);
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  /* High z-index to sit above all cards + any glass-card pseudos */
  z-index: 20;
  pointer-events: auto;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font: inherit;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease, color 0.2s ease;
}
.voices-nav svg {
  width: 22px; height: 22px;
  display: block;
  color: inherit;
}
.voices-nav:hover {
  background: var(--purple);
  color: white;
  box-shadow: 0 10px 26px rgba(124,58,237,0.3);
  transform: translateY(-50%) scale(1.05);
}
.voices-nav:active {
  transform: translateY(-50%) scale(0.96);
}
.voices-nav:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}
/* Position: buttons sit OUTSIDE the rail's visible card area — in the
   wrap's outer padding zone — so they don't overlap any card and read
   as external navigation anchored to the section edges. */
.voices-nav--prev { left: 8px; }
.voices-nav--next { right: 8px; }
/* Disabled state when at either end of the scrollable range */
.voices-nav[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
/* Arrows visible on all screen sizes (desktop, tablet, mobile) */
@media (max-width: 600px) {
  .voices-nav {
    width: 40px; height: 40px;
  }
  .voices-nav svg {
    width: 18px; height: 18px;
  }
  .voices-nav--prev { left: 4px; }
  .voices-nav--next { right: 4px; }
}
.voice-card {
  flex-shrink: 0;
  /* Desktop showcase layout: 3 full cards + 2 half cards visible at a
     time (centered on middle card with neighbors peeking on each side).
     Rail width = 4 × cardW + 4 × gap (20px). Solving for cardW:
       4 × cardW + 80 = 100%
       cardW = (100% - 80) / 4
     We bump the minus to 100px to leave a small extra gap on each
     outer edge, which combined with the mask fade reads as a soft
     "dissolve into background" rather than a hard card edge. */
  width: max(260px, calc((100% - 100px) / 4));
  /* Center-snap across ALL breakpoints — combined with the ghost
     ::before/::after spacers at each breakpoint, this puts every
     card squarely in the middle of the rail after any scroll,
     drag, swipe, or arrow-button click. */
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: #FFFFFF;
  border: 1px solid rgba(28,18,41,0.08);
  border-radius: 24px;
  padding: 32px;
  display: flex; flex-direction: column;
  min-height: 300px;
  box-shadow: 0 4px 20px rgba(28,18,41,0.04);
}
.voice-card.featured {
  background: linear-gradient(145deg, rgba(124,58,237,0.10), rgba(124,58,237,0.03));
  border-color: rgba(124,58,237,0.22);
}
.voice-stars {
  display: flex; gap: 3px; margin-bottom: 18px;
}
.voice-star {
  width: 13px; height: 13px; background: var(--yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.voice-q {
  font-family: var(--font-body);
  font-style: normal; font-weight: 400;
  font-size: 16px; line-height: 1.55;
  color: var(--ink);
  margin-bottom: 24px; flex: 1;
  text-wrap: pretty;
}
.voice-card.featured .voice-q { font-size: 17px; }
.voice-auth {
  display: flex; align-items: center; gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(28,18,41,0.08);
}
.voice-av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--purple-light);
  color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 13px;
  flex-shrink: 0;
}
.voice-card.featured .voice-av { background: var(--yellow); color: var(--ink); }
.voice-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.voice-role { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── FOUNDERS ──────────────────────────────────────────────── */
.founders-home {
  background: var(--cream);
  padding: 90px var(--section-pad-h);
}
.founders-home-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px;
  align-items: center;
}
.founders-img-wrap {
  aspect-ratio: 4/5;
  border-radius: 24px;
  overflow: hidden;
  background: var(--cream-deep);
  position: relative;
}
.founders-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 65%;
  display: block;
}
.founders-text .section-label { color: var(--purple); margin-bottom: 14px; }
.founders-text h2 {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.08; letter-spacing: -1.6px;
  margin-bottom: 20px;
}
.founders-text h2 em {
  font-family: var(--font-display); font-style: italic;
  font-weight: 400; color: var(--purple);
}
.founders-text > p {
  font-size: 16px; color: var(--mid); line-height: 1.75;
  font-weight: 300; margin-bottom: 14px;
}
.founder-creds {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 28px;
}
@media (max-width: 600px) {
  .founder-creds { grid-template-columns: 1fr; }
}
.founder-cred {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  background: white;
  border: 1px solid var(--cream-deep);
  border-radius: 14px;
}
.founder-cred-ic {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--purple-light); color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.founder-cred-ic svg { width: 18px; height: 18px; stroke-width: 1.8; }
.founder-cred-text {
  font-size: 14px; color: var(--mid); line-height: 1.55;
  padding-top: 2px;
}
.founder-cred-text strong { color: var(--ink); font-weight: 600; }

/* ── Founders editorial (home teaser) ──────────────────────── */
.founders-text .founders-lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 300;
  letter-spacing: -0.2px;
  margin-bottom: 36px;
  max-width: 56ch;
  text-wrap: pretty;
}
.founders-text .founders-lede em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--purple);
}
/* Final "This is for you" line. Sits as a quiet but emphatic close
   to the founders block, picking up the same italic Fraunces voice
   used throughout the site for moments worth lingering on. */
.founders-text .founders-close {
  margin-top: 32px;
  margin-bottom: 0;
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 400;
}
.founders-text .founders-close em {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  color: var(--purple);
  letter-spacing: -0.2px;
}
.founders-quote {
  position: relative;
  padding: 30px 32px 28px 38px;
  border-left: 2px solid var(--purple);
  background: linear-gradient(180deg, rgba(124,58,237,0.04) 0%, rgba(124,58,237,0.01) 100%);
  border-radius: 0 14px 14px 0;
  margin-bottom: 34px;
}
.founders-quote-mark {
  position: absolute;
  top: -6px; left: 16px;
  font-family: var(--font-display);
  font-size: 76px;
  line-height: 1;
  color: var(--purple);
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}
.founders-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: -0.4px;
  text-wrap: pretty;
}
.founders-quote-attr {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink);
}
.founders-quote-attr span {
  color: var(--mid);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  margin-left: 4px;
}
.founders-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--purple);
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 6px 20px rgba(124,58,237,0.22);
}
.founders-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(124,58,237,0.32);
  background: #6d2fd9;
}
.founders-cta svg {
  width: 16px; height: 16px;
  transition: transform 0.2s ease;
}
.founders-cta:hover svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .founders-text .founders-lede { font-size: 17px; margin-bottom: 28px; }
  .founders-quote { padding: 24px 24px 22px 28px; margin-bottom: 28px; }
  .founders-quote p { font-size: 19px; }
  .founders-quote-mark { font-size: 60px; left: 12px; }
}
@media (max-width: 600px) {
  .founders-quote p { font-size: 17px; line-height: 1.5; }
  .founders-cta { padding: 12px 20px; font-size: 14px; }
}

/* ── FAQ HOME ──────────────────────────────────────────────── */
.faq-home {
  background: white;
  padding: 90px var(--section-pad-h);
}
.faq-home-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px;
  align-items: start;
}
.faq-home-head h2 {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.08; letter-spacing: -1.6px;
  margin-bottom: 16px;
}
.faq-home-head h2 em {
  font-family: var(--font-display); font-style: italic;
  font-weight: 400; color: var(--purple);
}
.faq-home-head p {
  font-size: 15px; color: var(--mid); line-height: 1.7;
  font-weight: 300;
}
.faq-home-head .contact-card {
  margin-top: 24px; padding: 20px;
  background: var(--soft); border-radius: 16px;
  border: 1px solid var(--hairline);
}
.faq-home-head .contact-card strong {
  display: block; font-size: 14px; color: var(--ink);
  margin-bottom: 4px;
}
.faq-home-head .contact-card a {
  color: var(--purple); font-size: 14px; text-decoration: none;
}
.faq-home-head .contact-card a:hover { text-decoration: underline; }

/* "View the full FAQ" CTA link sitting under the section sub-heading.
   Matches Satoshi small-caps style of section-label, with a small
   right-arrow that nudges on hover. */
.faq-home-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 10px 16px;
  background: var(--lavender);
  border: 1px solid var(--purple-light);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--purple);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.faq-home-cta-link svg {
  width: 14px; height: 14px;
  transition: transform 0.25s ease;
}
.faq-home-cta-link:hover {
  background: var(--purple);
  border-color: var(--purple);
  color: white;
}
.faq-home-cta-link:hover svg {
  transform: translateX(3px);
}

.faq-home-list { }
.faq-h-item {
  border-bottom: 1px solid var(--hairline);
}
.faq-h-item:first-child { border-top: 1px solid var(--hairline); }
.faq-h-q {
  width: 100%; background: none; border: none;
  padding: 22px 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-size: 16px; font-weight: 500; color: var(--ink);
  text-align: left; font-family: var(--font-body);
  transition: color 0.3s ease;
}
.faq-h-q:hover { color: var(--purple); }
.faq-h-item.open .faq-h-q { color: var(--purple); }
.faq-h-q-plus {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--lavender); color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 16px; font-weight: 300;
  /* Spring easing on icon rotation + colour swap */
  transition:
    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.32s ease,
    color 0.32s ease;
}
.faq-h-item.open .faq-h-q-plus {
  background: var(--purple); color: white;
  transform: rotate(45deg);
}

/* Modern open/close pattern using grid-template-rows 0fr → 1fr,
   which actually animates to the content's natural height (unlike max-height).
   The inner wrapper with min-height: 0 + overflow: hidden is what makes it work. */
.faq-h-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.faq-h-a-inner {
  min-height: 0;
  overflow: hidden;
  /* Content fades in + slides up slightly, staggered slightly after row opens */
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.32s ease 0.08s,
    transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) 0.08s;
  font-size: 15px; color: var(--mid); line-height: 1.7;
  font-weight: 300;
  padding-bottom: 0;
}
.faq-h-item.open .faq-h-a {
  grid-template-rows: 1fr;
}
.faq-h-item.open .faq-h-a-inner {
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 22px;
}
.faq-h-a-inner a {
  color: var(--purple);
  text-decoration: underline;
  text-decoration-color: rgba(124, 58, 237, 0.3);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s ease;
}
.faq-h-a-inner a:hover {
  text-decoration-color: var(--purple);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .faq-h-a,
  .faq-h-a-inner,
  .faq-h-q-plus {
    transition-duration: 0.01ms !important;
  }
}

/* ── FINAL CTA ─────────────────────────────────────────────── */
.home-cta {
  background: var(--purple);
  padding: 120px var(--section-pad-h) 128px;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Gradient texture layer (matches the HIW outro recipe):
   soft yellow halo top, deep violet shadow bottom.
   The interplay of these two soft radials over the solid
   purple base produces the painterly grain. */
.home-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 45% at 50% -10%,
      rgba(255,202,1,0.18) 0%,
      rgba(255,202,1,0.08) 24%,
      transparent 55%),
    radial-gradient(ellipse 100% 50% at 50% 110%,
      rgba(45,18,80,0.55) 0%,
      rgba(45,18,80,0.25) 30%,
      transparent 60%);
}
/* SVG fractal noise overlay (same recipe as the home hero
   grain). Sits above the gradient layer but below content,
   blended via soft-light so it picks up the warm yellow
   highlights and deep violet shadows without flattening
   the surface. */
.home-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.88  0 0 0 0 0.55  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 260px 260px;
}
.home-cta-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.home-cta h2 {
  color: white; font-size: clamp(38px, 5vw, 64px);
  line-height: 1.02; letter-spacing: -2px;
  margin-bottom: 18px;
}
.home-cta h2 em {
  font-family: var(--font-display); font-style: italic;
  font-weight: 400; color: var(--yellow);
}
.home-cta p {
  color: rgba(255,255,255,0.7); font-size: 17px;
  line-height: 1.65; font-weight: 300;
  margin-bottom: 36px; max-width: 520px; margin-left: auto; margin-right: auto;
}
.home-cta-btns {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.home-cta .btn-dual.mum {
  background: var(--yellow); color: var(--ink);
}
.home-cta .btn-dual.mum .btn-ic { background: var(--ink); color: var(--yellow); }
.home-cta .btn-dual.mum:hover { background: white; }
.home-cta .btn-dual.student {
  background: transparent; color: white;
  border-color: rgba(255,255,255,0.4);
}
.home-cta .btn-dual.student .btn-ic { background: rgba(255,255,255,0.15); color: white; }
.home-cta .btn-dual.student:hover { border-color: white; background: rgba(255,255,255,0.08); }

/* Secondary learn-more row sitting under the HIW outro primary CTA.
   Two link buttons side by side. Quieter styling than the yellow
   pill so they don't fight for attention. */
.hiw-outro-learnmore {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.hiw-outro-learnmore-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding: 4px 2px 6px;
}
.hiw-outro-learnmore-link svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  transition: transform 0.2s ease;
}
.hiw-outro-learnmore-link:hover {
  color: white;
  border-bottom-color: rgba(255,255,255,0.6);
}
.hiw-outro-learnmore-link:hover svg {
  transform: translateX(2px);
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 960px) {
  /* Hide hero floating pill cards (Paired with Maddi, End-to-end encrypted, New message) on tablet + mobile */
  .float-card { display: none !important; }
  .home-hero-inner { grid-template-columns: 1fr; gap: 80px; }
  .home-hero { padding-bottom: 40px; }
  .home-hero-visual { max-width: 420px; margin: 0 auto; }

  /* Hero content: centre on tablet (when columns stack) */
  .home-hero-content {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .home-hero-eyebrow,
  .home-hero-trust,
  .home-hero-trust-single,
  .home-hero-ctas {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* When sections stack on mobile: centre all CTA blocks (mum + student) */
  .ed-cta-block {
    align-items: center !important;
    text-align: center !important;
    /* Also center the CTA block itself in case its parent doesn't
       stretch it to full width (display: contents situations). */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  .ed-cta-trust {
    justify-content: center !important;
    width: auto !important;
    max-width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ed-cta-trust p {
    text-align: center;
  }
  .ed-cta-sub {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ed-cta-block .ed-cta {
    /* Use align-self to center in a flex column parent (more reliable
       than margin-auto when align-items might be overridden) */
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .journey-rail {
    grid-template-columns: 1fr 1fr; gap: 32px 20px;
    --pLine: 1; --pHead: 0;
    /* Each node starts unlit; IntersectionObserver adds .is-lit per node */
    --pN1: 0; --pN2: 0; --pN3: 0; --pN4: 0;
  }
  /* Smooth transitions so the node "pop" feels natural when triggered */
  .journey-rail .journey-node {
    transition:
      transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
      border-color 0.4s ease,
      border-width 0.4s ease,
      box-shadow 0.5s ease,
      background 0.5s ease,
      color 0.4s ease;
  }
  .journey-step.is-lit[data-node="1"] ~ .journey-step:not(.is-lit),
  .journey-step.is-lit ~ .journey-step.is-lit {
    /* (unused placeholder to allow future styling if needed) */
  }
  /* When a step is "lit" on mobile, force its pN to 1 */
  .journey-rail .journey-step[data-node="1"].is-lit { --pN1: 1; }
  .journey-rail .journey-step[data-node="2"].is-lit { --pN2: 1; }
  .journey-rail .journey-step[data-node="3"].is-lit { --pN3: 1; }
  .journey-rail .journey-step[data-node="4"].is-lit { --pN4: 1; }
  /* And cascade: since pN[N] is defined on .journey-rail, we need the
     .is-lit flag to set its own progress on the rail itself. Use a
     different strategy: set a per-step custom prop and have CSS pick it up. */
  .journey-line { display: none; }
  .e-stats-head, .trust-inner, .founders-home-inner, .faq-home-inner {
    grid-template-columns: 1fr; gap: 28px;
  }
  /* Tighter vertical padding on mobile/tablet so the gap between the
     founders block (text-only at this width) and the FAQ band doesn't
     look like dead space. */
  .founders-home { padding: 64px var(--section-pad-h) 48px; }
  .faq-home      { padding: 56px var(--section-pad-h) 72px; }
  /* Stats grid: 1x2x2 on tablet (big card full-width, rest 2 cols) */
  .e-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .e-stat.sz-lg { grid-column: span 2; }
  .e-stat.sz-md, .e-stat.sz-sm { grid-column: span 1; }
  /* Reset the desktop's explicit positioning for sz-md tiles (which
     puts them at grid-column: 3/7 for centering in a 12-col grid).
     On mobile we only have 2 columns — cols 3/7 don't exist, which
     breaks the layout. Force them back to natural flow. */
  .e-stats-grid .e-stat.sz-md:nth-of-type(4),
  .e-stats-grid .e-stat.sz-md:nth-of-type(5) {
    grid-column: span 1;
  }
  /* Tablet: centre all content inside each stat tile */
  .e-stat {
    align-items: center;
    text-align: center;
  }
  .e-stat-num, .e-stat-lbl, .e-stat-sub {
    text-align: center;
  }
  /* Trust list: 2x2 on tablet */
  .trust-section { padding: 84px var(--section-pad-h); }
  .trust-head h2 { font-size: clamp(30px, 5.2vw, 40px); }
  .trust-head p  { font-size: 16px; margin-bottom: 36px; }
  .trust-list { grid-template-columns: 1fr 1fr; gap: 14px; }
  /* 3-up tiles collapse to single column for readability on tablet */
  .trust-list--three { grid-template-columns: 1fr; gap: 12px; }
  /* On stacked layout: text centered (no right-align), padlock above
     or below depending on flow. Put the padlock first so the narrative
     flows lock-icon → heading down the page. */
  /* On stacked layout: switch back to flex-column, lock above text.
     The grid-column/span rules on children are overridden here. */
  .trust-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .trust-head-text {
    text-align: center;
    max-width: none;
    grid-column: unset;
  }
  .trust-head-text h2,
  .trust-head-text p {
    margin-left: auto;
    margin-right: auto;
  }
  .trust-lock {
    /* On mobile: the sim uses a 600×600 coordinate space internally.
       Keep container at 600×600, scale it down + translate to center
       properly in the viewport (the 600px is wider than most phones,
       so margin:auto alone doesn't center it). */
    position: relative;
    left: 50%;
    top: auto;
    width: 600px;
    height: 600px;
    /* translateX(-50%) pulls container back by half its width AFTER
       the left:50% places its edge at viewport center. Then scale(0.45)
       shrinks everything from the (already-centered) top-center anchor. */
    transform: translateX(-50%) scale(0.45);
    transform-origin: top center;
    /* Layout absorbs 600×600 but transform only affects visual.
       Rope hangs from y=0 to y=300, lock image from y=300 to ~y=500.
       Visible content = 500px in viewBox = 225px visual (×0.45).
       Collapse the unused layout space. */
    margin: -40px 0 -375px 0;
    order: -1;
    pointer-events: auto;
  }
  .trust-inner {
    display: flex;
    flex-direction: column;
  }
  /* Mobile keeps the original 140px lock size (desktop is 25% smaller,
     but mobile is already scaled down further by the container's 0.45
     transform, so we don't want to shrink it twice). */
  .trust-lock-img {
    width: 140px;
    left: 230px; /* (600 - 140) / 2 */
  }
  /* Mobile rope: container is scaled 0.45 via CSS transform, which also
     scales the stroke + dashes down. Bump attribute values to compensate
     so rendered visual matches HIW connector line above (2px stroke,
     6px dash + 6px gap).
       attribute = target / scale
         stroke-width:   2  / 0.45 ≈ 4.4
         dasharray:      6  / 0.45 ≈ 13.3 */
  .trust-lock-rope-path {
    stroke-width: 4.4;
    stroke-dasharray: 13 13;
  }
  /* Mobile bubble: the .trust-lock container is scaled 0.45 via CSS,
     which shrinks the bubble's text and padding proportionally. Scale
     up font + padding (≈ 1/0.45 = 2.22) so it matches the readable
     desktop size once the 0.45 transform is applied. */
  .trust-lock-bubble {
    font-size: 28px;
    padding: 20px 30px;
    border-radius: 30px;
    border-width: 2px;
  }
  .trust-lock-bubble::before {
    width: 22px;
    height: 22px;
    top: -13px;
    border-left-width: 2px;
    border-top-width: 2px;
  }
  .trust-item {
    padding: 28px 28px;
    min-height: 200px;
  }
  .trust-item .trust-item-icon {
    width: 160px;
    height: 160px;
    right: -14px;
    bottom: -16px;
  }
  .trust-item h4 { font-size: 17px; max-width: 78%; }
  .trust-item p  { font-size: 14px; max-width: 78%; }
  .founders-img-wrap { max-width: 400px; margin: 0 auto; }
  /* keep floating notification blips visible, just scale + re-position for tablet */
  .home-hero-visual { max-width: 420px; margin: 0 auto; }
  .float-card { padding: 9px 11px; border-radius: 12px; }
  .float-card .fc-ic { width: 26px; height: 26px; }
  .float-card .fc-title { font-size: 11px; }
  .float-card .fc-sub   { font-size: 10px; }
  .float-card.a { top: 4%;    left: -2%; }
  .float-card.b { bottom: 18%; left: -2%; }
  .float-card.c { top: 14%;   right: -2%; }

  /* Pulse ticker: smaller text + tighter gap on tablet */
  .pulse-track { gap: 28px; }
  .pulse-item { font-size: 12px; }
  .pulse-item strong { font-size: 17px; }

  /* Hero mini stats: below image on tablet/mobile, centered.
     Labels wrap naturally with tight line-height (set in default
     rule), so "pregnant women" stacks cleanly under "1,430+". */
  .home-hero-mini-stats {
    position: static;
    margin: 20px 0 0 0;
    justify-content: center;
  }

  /* Hero CTAs: keep horizontal, never stack, centred */
  .home-hero-ctas {
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
  }
  .btn-dual {
    padding: 13px 18px 13px 14px;
    font-size: 13px;
    gap: 8px;
    white-space: nowrap;
  }
  .btn-dual .btn-ic {
    width: 24px; height: 24px;
  }

  /* Hero trust row: keep on one line, never stack */
  .home-hero-trust {
    flex-wrap: nowrap;
    gap: 10px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .home-hero-trust::-webkit-scrollbar { display: none; }
  .home-hero-trust-item strong { font-size: 15px; }
  .home-hero-trust-item span { font-size: 11px; white-space: nowrap; }
  .home-hero-trust-divider { height: 24px; flex-shrink: 0; }

  /* Voices rail: single card view on tablet/mobile. Override the
     desktop 4-up card width so one card fills the readable area. */
  .voice-card {
    /* Card width should be narrower than the rail (viewport) so there's
       room for equal space on both sides when centered. */
    width: min(340px, 82vw);
    scroll-snap-align: center;
  }
  /* Rail wrap: remove horizontal padding on mobile so the rail occupies
     the FULL viewport width. Without this, the wrap's padding makes the
     rail narrower than the card, breaking centering. */
  .voices-rail-wrap {
    padding-left: 0;
    padding-right: 0;
  }
  .voices-rail {
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
  }
  /* Ghost spacers before/after the cards — their width is half of the
     LEFTOVER rail space (viewport minus card width). This is what makes
     the first and last cards sit centered when scrollLeft is at the
     extremes. Combined with center snap, every card lands in the
     viewport's middle after any scroll, drag, or swipe. */
  .voices-rail::before,
  .voices-rail::after {
    content: '';
    flex: 0 0 calc((100vw - min(340px, 82vw)) / 2);
    scroll-snap-align: none;
  }
}

@media (max-width: 600px) {
  .home-hero h1 { letter-spacing: -1px; }
  .journey-rail { grid-template-columns: 1fr; }
  /* Stats grid on phone: big stat (sz-lg) spans full width, others in 2 columns */
  .e-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .e-stat.sz-lg { grid-column: span 2; }
  .e-stat.sz-md, .e-stat.sz-sm { grid-column: span 1; }
  /* Override desktop's explicit sz-md grid-column positioning */
  .e-stats-grid .e-stat.sz-md:nth-of-type(4),
  .e-stats-grid .e-stat.sz-md:nth-of-type(5) {
    grid-column: span 1;
  }
  /* Trust list: 2x2 on phone */
  .trust-section { padding: 64px 16px; }
  .trust-head h2 { font-size: 28px; }
  .trust-head p  { font-size: 15px; margin-bottom: 28px; }
  .trust-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .trust-list--three { grid-template-columns: 1fr; gap: 10px; }
  .home-cta { padding: 80px 24px; }
  /* float-cards tighter still on phones, keep visible, pinned inside the visual */
  .home-hero-visual { max-width: 340px; }
  .float-card {
    padding: 7px 9px; border-radius: 10px;
    box-shadow: 0 8px 22px rgba(28,18,41,0.18);
    max-width: 44vw;
  }
  .float-card .fc-ic { width: 22px; height: 22px; }
  .float-card .fc-ic svg { width: 11px; height: 11px; }
  .float-card .fc-title { font-size: 10.5px; }
  .float-card .fc-sub   { font-size: 9.5px; }
  .float-card.a { top: 2%;     left: 2%; }
  .float-card.b { bottom: 16%; left: 2%; }
  .float-card.c { top: 12%;    right: 2%; }

  /* Pulse ticker: even smaller on phones */
  .pulse-track { gap: 22px; }
  .pulse-item { font-size: 11px; gap: 7px; }
  .pulse-item strong { font-size: 15px; }
  .pulse-strip { padding: 14px 0; }

  /* Hero CTAs: compact but still side by side (20% larger on mobile) */
  /* Hero CTAs: compact, centred, NEVER wrap text to 2 lines */
  .home-hero-ctas {
    gap: 6px;
    justify-content: center;
    /* Always keep clear breathing room from the viewport edges,
       regardless of intrinsic button width or hero padding. */
    padding: 0 8px;
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .btn-dual {
    padding: 12px 16px 12px 12px;
    font-size: 12px;
    gap: 7px;
    white-space: nowrap;
  }
  .btn-dual .btn-ic {
    width: 26px; height: 26px;
  }
  .btn-dual svg { width: 11px; height: 11px; }

  /* Hero content column: centre everything on mobile */
  .home-hero-content {
    text-align: center;
    align-items: center;
  }
  .home-hero-eyebrow,
  .home-hero-trust,
  .home-hero-trust-single {
    justify-content: center;
    margin-left: auto; margin-right: auto;
  }

  /* Hero trust row: compact but still one line */
  .home-hero-trust { gap: 8px; padding-top: 16px; }
  .home-hero-trust-item strong { font-size: 13px; }
  .home-hero-trust-item span { font-size: 10px; }
  .home-hero-trust-divider { height: 20px; }

  /* Hero visual column (phones + stats): centred on phone */
  .home-hero-visual {
    margin: 0 auto;
  }
  .home-hero-mini-stats {
    justify-content: center;
    padding-right: 0;
    margin: 20px 0 0 0;
    gap: 14px;
  }
  .home-hero-mini-stat strong { font-size: 17px; }
  .home-hero-mini-stat span { font-size: 11px; }

  /* Final home CTA buttons: centre on phone */
  .home-cta-btns {
    justify-content: center;
  }
  /* Mobile learn-more: stack vertically with tighter gap */
  .hiw-outro-learnmore {
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
  }

  /* Section CTA buttons (mum/student): centre on phone */
  .ed-cta-block {
    align-items: center !important;
    text-align: center !important;
  }
  .ed-cta-trust {
    justify-content: center !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ed-cta-trust p {
    text-align: center;
  }
  .ed-cta-block .ed-cta-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .ed-cta-block .ed-cta {
    margin-left: auto;
    margin-right: auto;
  }

  /* Stat blocks: smaller on phone */
  .e-stat-num { font-size: 28px; }
  .e-stat-lbl { font-size: 11px; }

  /* Trust tiles: smaller padding on phone */
  .trust-item {
    padding: 20px 20px;
    min-height: 160px;
  }
  .trust-item .trust-item-icon {
    width: 110px;
    height: 110px;
    right: -10px;
    bottom: -12px;
  }
  .trust-item h4 { font-size: 14px; margin-bottom: 8px; max-width: 78%; }
  .trust-item p  { font-size: 12.5px; max-width: 78%; }

  /* Voices rail on phone: rely purely on the ghost ::before/::after
     spacers (defined at 960px and refined here) to center cards. No
     rail padding — which was stacking on top of the spacers and
     breaking the center-snap math. Card width is fixed at 300px so
     the spacer calc below is predictable. */
  .voices-rail {
    padding-left: 0;
    padding-right: 0;
  }
  .voice-card { width: 300px; }
  .voices-rail::before,
  .voices-rail::after {
    flex: 0 0 calc((100vw - 300px) / 2);
  }
}

/* ============================================================
   SECTION HEADING UNIFICATION
   Every section-lead heading (not the main home hero) should match
   the .ed-headline style: clamp(40px, 5.2vw, 64px), Satoshi 600,
   line-height 1.02, -2px letter-spacing, Fraunces italic purple em.
   Alignment, max-width, margins, and section-specific positioning
   are NOT overridden here, just typography.
   ============================================================ */
.journey-head h2,
.coce-head h2,
.coce-head .ed-headline,
.coce-journey-head h2,
.hiw-head h2,
.connect-window-head h2,
.e-stats-head h2,
.trust-h,
.trust-head h2,
.voices-head h2,
.founders-text h2,
.faq-home-head h2 {
  font-family: var(--font-body);
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -2px;
  font-weight: 600;
  color: var(--plum);
  text-wrap: balance;
}
.journey-head h2 em,
.coce-head h2 em,
.coce-head .ed-headline em,
.coce-journey-head h2 em,
.hiw-head h2 em,
.connect-window-head h2 em,
.e-stats-head h2 em,
.trust-h em,
.trust-head h2 em,
.stories-head h2 em,
.voices-head h2 em,
.founders-text h2 em,
.faq-home-head h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--purple);
  letter-spacing: -1.5px;
}

/* Unified eyebrow / section-label: Satoshi 600, 12px, 0.18em tracking, uppercase, purple.
   Matches the .ed-eyebrow spec above the mum/student headlines. */
.journey-head .section-label,
.hiw-head .section-label,
.connect-window-head .section-label,
.e-stats-head .section-label,
.stories-head .section-label,
.voices-head .section-label,
.founders-text .section-label,
.faq-home-head .section-label,
.trust-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
  display: inline-block;
  margin-bottom: 24px;
}

/* Unified section sub-heading paragraph: 18px, 1.6 line-height, muted, 300 weight.
   Alignment and max-width are retained from the section-specific rule. */
.journey-head p,
.coce-head p,
.coce-head .ed-lede,
.coce-journey-head p,
.hiw-head p,
.connect-window-head p,
.e-stats-head p,
.trust-head p,
.trust-sub,
.stories-head .stories-intro,
.voices-head p,
.founders-text p.founders-intro,
.faq-home-head p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--mid);
  font-weight: 300;
}

/* ============================================================
   HIW OUTRO CTA. Mum-focused close to the How it works band.
   Bold solid violet surface using the brand logo color, white
   headline with yellow italic accent, yellow button. Subtle
   yellow top-edge glow + deeper violet bottom shadow give the
   band gentle vertical depth without breaking the solid-fill
   feel.
   ============================================================ */
.hiw-outro-cta {
  position: relative;
  isolation: isolate;
  background: var(--purple);
  padding: 96px var(--section-pad-h) 104px;
  text-align: center;
  overflow: hidden;
}
.hiw-outro-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 45% at 50% -10%,
      rgba(255,202,1,0.18) 0%,
      rgba(255,202,1,0.08) 24%,
      transparent 55%),
    radial-gradient(ellipse 100% 50% at 50% 110%,
      rgba(45,18,80,0.45) 0%,
      rgba(45,18,80,0.20) 30%,
      transparent 60%);
}
/* SVG fractal noise overlay, same recipe as home hero + final CTA
   so the violet bands across the page share one consistent grain. */
.hiw-outro-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.88  0 0 0 0 0.55  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 260px 260px;
}
.hiw-outro-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.hiw-outro-cta .section-label {
  color: var(--yellow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 16px;
}
.hiw-outro-cta h2 {
  font-family: var(--font-body);
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -1.4px;
  font-weight: 600;
  color: white;
  margin: 0 0 16px;
  text-wrap: balance;
}
.hiw-outro-cta h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--yellow);
}
.hiw-outro-cta p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  font-weight: 300;
  max-width: 520px;
  margin: 0 auto 28px;
}
.hiw-outro-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--yellow);
  color: var(--ink);
  border: none;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  box-shadow: 0 6px 24px rgba(255,202,1,0.30);
}
.hiw-outro-btn:hover {
  background: white;
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}
.hiw-outro-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
  fill: none;
  stroke: currentColor;
  transition: transform 0.2s ease;
}
.hiw-outro-btn:hover svg {
  transform: translateX(3px);
}
.hiw-outro-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 28px;
}
.hiw-outro-trust p {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255,255,255,0.78);
  margin: 0;
}
.hiw-outro-trust svg {
  color: var(--yellow);
  flex-shrink: 0;
}
.hiw-outro-trust strong {
  color: white;
  font-weight: 600;
}
@media (max-width: 720px) {
  .hiw-outro-cta { padding: 72px 20px 80px; }
  .hiw-outro-trust { font-size: 13px; padding: 8px 14px; }
}