/* =========================================================
   Growing Minds Science — Homepage
   "Tidepool": deep teal-ink + brand teal, cool aqua-mist
   ground, one coral accent. Bricolage Grotesque display,
   Source Serif 4 body. Self-contained: does not depend on
   styles.css / refresh.css.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Color */
  --pine: #15393C;          /* deep teal-ink: dominant text, dark bands */
  --pine-deep: #0E2A2D;     /* footer floor */
  --teal: #1E5F62;          /* brand action color (AA with white text) */
  --teal-soft: #2E7A77;     /* hover / large decorative */
  --sea-glass: #CFE3DE;     /* tint surfaces, bubbles */
  --mist: #F0F5F3;          /* page ground — cool aqua, not cream */
  --surface: #FFFFFF;
  --coral: #DE7356;         /* the one accent: milestones, highlights (decor / large text only) */
  --coral-deep: #9C4429;    /* coral at text sizes (AA on mist / white / sea-glass) */
  --coral-tint: #F8E7E0;
  --coral-on-dark: #E78D6F; /* lighter coral for small text on pine bands (AA on pine) */

  --ink: var(--pine);
  --ink-soft: #3D5A5A;
  --ink-muted: #4E6564;     /* AA on mist/surface/sea-glass (>=4.6:1) */
  --line: #D4E0DC;
  --line-soft: #E2EAE7;

  /* On-dark (pine bands) */
  --on-dark: #EDF4F1;
  --on-dark-soft: #BCD2CC;
  --on-dark-muted: #8BA59F;
  --on-dark-line: rgba(237, 244, 241, 0.16);

  --btn-primary-ink: #FFFFFF;

  /* Type */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;   /* 17px serif body */
  --text-md: 1.1875rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.45rem, 1.1rem + 1.4vw, 1.9rem);
  --text-2xl: clamp(1.9rem, 1.2rem + 2.8vw, 3rem);
  --text-hero: clamp(2.45rem, 1.3rem + 4.6vw, 4.1rem);

  /* Spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  /* The arch: doorway motif for hero imagery */
  --radius-arch: 999px 999px var(--radius-lg) var(--radius-lg);

  --shadow-sm: 0 1px 2px rgba(14, 42, 45, 0.06);
  --shadow-md: 0 16px 36px -20px rgba(14, 42, 45, 0.32);
  --shadow-lg: 0 32px 64px -30px rgba(14, 42, 45, 0.4);

  --container: 1160px;
  --header-h: 70px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 240ms var(--ease);
}

[data-theme="dark"] {
  color-scheme: dark;
  --pine: #11302F;
  --pine-deep: #0A1F1E;
  --teal: #6FBCAF;
  --teal-soft: #8FD0C4;
  --sea-glass: #1C3733;
  --mist: #0F1A18;
  --surface: #152421;
  --coral: #E78D6F;
  --coral-deep: #E78D6F;
  --coral-tint: #2E211C;

  --ink: #E8EFEB;
  --ink-soft: #C2CFC9;
  --ink-muted: #8CA09A;
  --line: #28403B;
  --line-soft: #1E322E;

  --btn-primary-ink: #07211E;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 16px 36px -20px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 32px 64px -30px rgba(0, 0, 0, 0.7);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--teal); transition: color var(--t); }
a:hover { color: var(--teal-soft); }
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

/* Signature typographic move: coral serif italic inside grotesque headlines */
.hl {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  color: var(--coral-deep);
  letter-spacing: 0;
}

::selection { background: var(--coral); color: #2B130B; }

:focus-visible {
  outline: 2.5px solid var(--coral-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.trust :focus-visible,
.signup :focus-visible,
.site-footer :focus-visible { outline-color: var(--coral); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -120px;
  z-index: 200;
  background: var(--pine);
  color: var(--on-dark);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: top var(--t);
}
.skip-link:focus { top: var(--space-4); color: var(--on-dark); }

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.25rem);
}
.section { padding-block: clamp(3.75rem, 9vw, 7rem); }

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin: 0 0 var(--space-5);
}
.eyebrow--on-dark { color: var(--coral-on-dark); }

.section-head { max-width: 46ch; margin-bottom: clamp(var(--space-8), 5vw, var(--space-12)); }
.section-head__lede {
  font-size: var(--text-md);
  color: var(--ink-soft);
  margin: var(--space-4) 0 0;
  max-width: 54ch;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t),
              transform 140ms var(--ease), box-shadow var(--t);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--teal);
  color: var(--btn-primary-ink);
  box-shadow: 0 14px 28px -16px rgba(30, 95, 98, 0.55);
}
.btn--primary:hover {
  background: var(--pine);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -16px rgba(30, 95, 98, 0.62);
}
[data-theme="dark"] .btn--primary:hover { background: var(--teal-soft); color: var(--btn-primary-ink); }
.btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--quiet:hover { border-color: var(--teal); color: var(--teal); }
.btn--block { width: 100%; }
.btn--lg { min-height: 54px; padding: 1rem 1.8rem; }

/* Mobile-only sticky enrollment CTA — desktop hides it entirely (out of the
   a11y tree / tab order). Mobile styles + slide-in live in the 720px query. */
.mobile-cta { display: none; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--mist) 84%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), box-shadow var(--t);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 28px -24px rgba(14, 42, 45, 0.5);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand__mark { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; background: var(--surface); border: 1px solid var(--line-soft); padding: 3px; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: var(--space-2); }
.nav__list { display: flex; align-items: center; gap: var(--space-1); }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--t);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-3); right: var(--space-3);
  bottom: 6px;
  height: 2px;
  background: var(--coral);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__cta { margin-left: var(--space-2); }
.nav__cta .btn { min-height: 42px; padding: 0.55rem 1.15rem; font-size: var(--text-sm); }

.theme-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  transition: color var(--t), border-color var(--t), transform 140ms var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-muted); transform: rotate(-12deg); }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--t), opacity var(--t), top var(--t);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 6px; }
.nav-toggle__bars::after { top: 12px; }
[aria-expanded="true"] .nav-toggle__bars::before { top: 6px; transform: rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars::after { top: 6px; transform: rotate(-45deg); }
[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(2.75rem, 6vw, 5.5rem) clamp(3.5rem, 8vw, 6.5rem);
  background:
    radial-gradient(58% 64% at 88% 4%, color-mix(in oklab, var(--coral) 11%, transparent) 0%, transparent 62%),
    radial-gradient(70% 80% at 4% 0%, color-mix(in oklab, var(--teal) 9%, transparent) 0%, transparent 55%),
    var(--mist);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: center;
}
.hero__title { margin-bottom: var(--space-5); max-width: 16ch; }
.hero__lede {
  font-size: var(--text-md);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: var(--space-6);
}
.hero__cred {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 52ch;
  margin: 0 0 var(--space-8);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklab, var(--surface) 62%, transparent);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.hero__cred-photo {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 12%;
  border: 1.5px solid var(--line);
}
.hero__cred-text { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--ink-muted); }
.hero__cred-text strong { color: var(--ink); font-weight: 600; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__media { position: relative; margin: 0; }
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--radius-arch);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: var(--sea-glass);
  /* Shared warm photo grade — unifies the site's photography into one art-directed tone */
  filter: saturate(0.94) contrast(1.03) brightness(1.02) sepia(0.05);
}
/* Subtle brand-tint wash so photos sit in the Tidepool palette */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-arch);
  background: linear-gradient(170deg, rgba(222,115,86,0.06) 0%, rgba(21,57,60,0.04) 45%, rgba(21,57,60,0.12) 100%);
  pointer-events: none;
}

/* ---------- Hero atmosphere: custom brand motifs filling the empty space ---------- */
.hero__inner { position: relative; z-index: 1; }
.hero__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__decor svg { position: absolute; display: block; }
/* concentric tide-rings peeking from the top-right, behind the arch */
.hero__decor-rings { top: -8%; right: -7%; width: min(42vw, 460px); height: auto; }
/* a coral sprig in the lower-left gutter */
.hero__decor-sprig { left: -6px; bottom: 7%; width: clamp(64px, 9vw, 104px); height: auto; }
@media (max-width: 860px) {
  .hero__decor-rings { width: 300px; top: -40px; right: -50px; opacity: 0.7; }
  .hero__decor-sprig { display: none; }
}

/* ---------- Trust band (pine) ---------- */
.trust {
  background: var(--pine);
  color: var(--on-dark);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.trust__inner { max-width: 56rem; }
.trust__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.trust__attr {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral-on-dark);
  margin: 0 0 var(--space-10);
}
.trust__proofs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  border-top: 1px solid var(--on-dark-line);
  padding-top: var(--space-8);
}
.trust__proofs li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--on-dark-soft);
}
.trust__proofs li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--coral);
}
.trust__proofs strong { color: #fff; font-weight: 600; }

/* ---------- Signature: growth arc ---------- */
.arc { background: var(--mist); }
.arc__device { position: relative; }
.arc__curve {
  width: 100%;
  height: clamp(48px, 8vw, 96px);
  color: color-mix(in oklab, var(--teal) 38%, transparent);
  margin-bottom: calc(-1 * clamp(20px, 3vw, 34px));
}
.arc__tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.arc__tab {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2) var(--space-4);
  min-height: 44px;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  transition: background var(--t);
}
.arc__tab:hover { background: color-mix(in oklab, var(--surface) 70%, transparent); }
.arc__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--teal);
  transition: background var(--t), border-color var(--t), box-shadow var(--t),
              transform 260ms var(--ease);
}
.arc__tab:hover .arc__dot { transform: scale(1.12); }
.arc__tab[aria-selected="true"] .arc__dot {
  background: var(--coral);
  border-color: var(--coral);
  transform: scale(1.14);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--coral) 22%, transparent);
}
.arc__tab-age {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.arc__tab-name {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.arc__tab[aria-selected="true"] .arc__tab-name { color: var(--coral-deep); }

/* Stacks all five stage panels cleanly when JS is unavailable; with JS only one panel is visible so the gap is inert. */
.arc__panels { display: grid; gap: var(--space-6); }

.arc__panel {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  box-shadow: var(--shadow-md);
}
.arc__panel h3 { font-size: var(--text-xl); margin-bottom: var(--space-6); }
.arc__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.arc__cols h4 {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin-bottom: var(--space-3);
}
.arc__cols p { margin: 0; color: var(--ink-soft); }

/* ---------- Growth Arc: scroll-cinematic layer ----------
   Pure progressive enhancement. home.js adds .arc--scrolly (desktop + motion
   only) and drives the runner/trail/stage from scroll. Without it — mobile,
   reduced motion, or no JS — the tablist behaves exactly as before and the
   coral trail + runner stay hidden. */
.arc__scroll { position: relative; }
.arc__curve-trail {
  stroke: var(--coral);
  opacity: 0;
}
.arc__runner {
  fill: var(--coral);
  opacity: 0;
  filter: drop-shadow(0 0 5px color-mix(in oklab, var(--coral) 60%, transparent));
}

@media (min-width: 721px) {
  /* Drop the section's clip so the device can pin to the viewport (an
     overflow-clipping ancestor would otherwise capture the sticky). Double-class
     to beat the later base `.arc { overflow: hidden }` at equal specificity. The
     coral trail replaces the small decorative sprig as the section's accent. */
  .arc.arc--scrolly { overflow: visible; }
  .arc--scrolly .arc__decor { display: none; }
  .arc--scrolly .arc__device {
    position: sticky;
    /* `top` is set inline by home.js to vertically centre the device */
  }
  .arc--scrolly .arc__curve-trail,
  .arc--scrolly .arc__runner {
    opacity: 1;
    transition: opacity 0.5s var(--ease);
  }
}

/* Mobile-only coral progress rail — the growth-line's phone counterpart.
   Desktop hides it (the scroll-driven curve is the show there). On mobile the
   curve is hidden, so this rail carries the motion: a coral fill glides to the
   selected stage with a glowing dot at its tip. Driven purely by :has() on the
   live aria-selected state, so tapping a chip animates it with no JS. */
.arc__rail { display: none; }

@media (max-width: 720px) {
  .arc__rail {
    display: block;
    position: relative;
    height: 5px;
    margin: var(--space-1) 6px var(--space-6);
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--teal) 20%, transparent);
  }
  .arc__rail-fill {
    position: absolute;
    inset: 0 auto 0 0;
    /* home.js sets this element's width inline per selected stage; 8% is the
       stage-0 default so the rail reads right before JS runs. */
    width: 8%;
    border-radius: var(--radius-pill);
    background: var(--coral);
    transition: width 0.55s var(--ease);
  }
  .arc__rail-fill::after {
    content: "";
    position: absolute;
    right: -5px; top: 50%;
    width: 13px; height: 13px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--coral) 22%, transparent),
                0 0 6px color-mix(in oklab, var(--coral) 55%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arc__rail-fill { transition: none; }
}

/* ---------- Flagship class ---------- */
.class { background: var(--surface); border-block: 1px solid var(--line-soft); }
.class__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}
.class__rail {
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  background: var(--mist);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
}
.class__flag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral-deep);
  background: var(--coral-tint);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.8rem;
  margin: 0 0 var(--space-5);
}
.class__title { font-size: var(--text-xl); margin-bottom: var(--space-5); }
.class__meta {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  padding-block: var(--space-5);
  border-block: 1px solid var(--line);
}
.class__meta div { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
.class__meta dt {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.class__meta dd { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink); text-align: right; }
.class__meta dd strong { color: var(--coral-deep); }
.class__rail-ctas { display: grid; gap: var(--space-3); }

.modules { display: grid; counter-reset: module; }
.module {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(var(--space-4), 3vw, var(--space-8));
  align-items: baseline;
  padding: var(--space-6) var(--space-2);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--t);
}
.module:first-child { border-top: 1px solid var(--line-soft); }
.module:hover { background: color-mix(in oklab, var(--mist) 55%, transparent); }
.module__num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--coral-deep);
  min-width: 2.2ch;
}
.module__body h3 { font-size: var(--text-lg); margin: 0 0 var(--space-2); line-height: 1.15; }
.module__body p { margin: 0; color: var(--ink-soft); max-width: 60ch; }

/* ---------- AI ---------- */
.ai { background: var(--sea-glass); }
[data-theme="dark"] .ai { background: var(--sea-glass); }
.ai__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--space-8), 5vw, var(--space-12));
  align-items: center;
}
.ai__aside h2 { margin-bottom: var(--space-4); }
.ai__aside p { color: var(--ink-soft); max-width: 44ch; }

.chat {
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.chat__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-soft);
}
.chat__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pine); color: var(--coral-on-dark);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
}
[data-theme="dark"] .chat__avatar { background: var(--pine-deep); }
.chat__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.chat__live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 500; color: var(--ink-muted);
}
.chat__live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--coral);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--coral) 55%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--coral) 0%, transparent); }
}
.chat__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  min-height: 18rem;
  align-content: start;
}
.msg {
  max-width: 86%;
  padding: var(--space-4) var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.6;
  border-radius: var(--radius);
}
.msg--user {
  justify-self: end;
  background: var(--teal);
  color: #fff;
  border-bottom-right-radius: 4px;
}
[data-theme="dark"] .msg--user { color: var(--btn-primary-ink); }
.msg--ai {
  justify-self: start;
  background: color-mix(in oklab, var(--sea-glass) 55%, var(--surface));
  color: var(--ink);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 4px;
}
.msg--ai p { margin: 0 0 var(--space-3); }
.msg--ai p:last-child { margin-bottom: 0; }
.msg__source {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
}
.msg__source span {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--pine) 8%, transparent);
  color: var(--ink-soft);
}
[data-theme="dark"] .msg__source span { background: rgba(255,255,255,0.08); }

.typing { display: inline-flex; gap: 5px; align-items: center; padding: var(--space-1) 0; }
.typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  opacity: 0.5;
  animation: typing 1.2s var(--ease) infinite;
}
.typing span:nth-child(2) { animation-delay: 0.18s; }
.typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat__composer {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--line-soft);
}
.chat__input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--mist);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
}
.chat__input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal) 22%, transparent); }
.chat__send {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--teal); color: var(--btn-primary-ink);
  border: 0;
  transition: background var(--t), transform 140ms var(--ease);
}
.chat__send:hover { background: var(--pine); transform: translateY(-1px); }
[data-theme="dark"] .chat__send:hover { background: var(--teal-soft); }
.chat__note {
  margin: var(--space-2) var(--space-4) var(--space-3);
  min-height: 1.2em;
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

/* ---------- Four ways (editorial rows) ---------- */
.ways { background: var(--mist); }
.ways__list { display: grid; }
.way {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(var(--space-5), 4vw, var(--space-12));
  align-items: baseline;
  padding: clamp(var(--space-6), 3vw, var(--space-8)) var(--space-2);
  border-bottom: 1px solid var(--line);
}
.way:first-child { border-top: 1px solid var(--line); }
.way__num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.2rem);
  font-weight: 600;
  color: var(--coral-deep);
  line-height: 1;
  min-width: 1.4ch;
}
.way__body h3 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.way__link {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t);
}
.way__link::after { content: " →"; color: var(--coral-deep); display: inline-block; transition: transform var(--t); }
.way__link:hover { color: var(--teal); }
.way__link:hover::after { transform: translateX(4px); }
.way__body p { margin: 0; color: var(--ink-soft); max-width: 60ch; }

/* ---------- Waitlist (pine) ---------- */
.signup {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 110% at 96% 0%, color-mix(in oklab, var(--coral) 14%, transparent), transparent 58%),
    var(--pine);
  color: var(--on-dark);
}
.signup__decor {
  position: absolute;
  left: -70px;
  bottom: -90px;
  width: min(40vw, 380px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 720px) { .signup__decor { opacity: 0.5; width: 240px; } }
.signup__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
.signup__pitch h2 { color: #fff; margin-bottom: var(--space-4); }
.signup__pitch .hl { color: var(--coral); }
.signup__pitch p { color: var(--on-dark-soft); max-width: 46ch; }
.signup__perks { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.signup__perks li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--on-dark-soft);
}
.signup__perks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--coral);
}

.signup__form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.signup__form-title { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.signup__form-sub { font-size: var(--text-sm); color: var(--ink-muted); margin: 0 0 var(--space-6); }
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.field__label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.field__label .opt { font-weight: 400; color: var(--ink-muted); font-size: var(--text-xs); }
.field__input, .field__select {
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--mist);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-base);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.field__input:focus, .field__select:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal) 22%, transparent);
}
.form-status {
  margin: var(--space-4) 0 0;
  min-height: 1.4em;
  font-size: var(--text-sm);
  font-weight: 500;
}
.form-status[data-state="error"] { color: var(--coral-deep); }
.form-status[data-state="success"] { color: var(--teal); }
[data-theme="dark"] .form-status[data-state="error"] { color: var(--coral-on-dark); }

/* Inline field help + validation */
.field__hint { font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.4; }
.field__error {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--coral-deep);
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.field__error::before {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--coral-deep);
  /* white exclamation mark, inlined so it needs no extra request */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 7h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 7h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.field__input[aria-invalid="true"],
.field__select[aria-invalid="true"] {
  border-color: var(--coral-deep);
  background: var(--surface);
}
.field__input[aria-invalid="true"]:focus,
.field__select[aria-invalid="true"]:focus {
  border-color: var(--coral-deep);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--coral-deep) 24%, transparent);
}
[data-theme="dark"] .field__error { color: var(--coral-on-dark); }
[data-theme="dark"] .field__error::before { background: var(--coral-on-dark); }
[data-theme="dark"] .field__input[aria-invalid="true"],
[data-theme="dark"] .field__select[aria-invalid="true"] { border-color: var(--coral-on-dark); }

/* Submit spinner — supplements the "Sending…" label, never replaces it */
.btn__spinner { display: none; }
.btn.is-loading .btn__spinner {
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid color-mix(in oklab, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
.btn.is-loading { cursor: progress; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading .btn__spinner { animation-duration: 1.4s; }
}

/* Success state — replaces the fields in place after a successful signup */
.signup__success[hidden] { display: none; }
.signup__success {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-2) var(--space-4);
}
.signup__success-mark {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  color: #fff;
  background: var(--teal);
  box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--teal) 70%, transparent);
}
.signup__success-title { margin: 0; font-size: var(--text-xl); outline: none; }
.signup__success-text { margin: 0; max-width: 38ch; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; }
.signup__success .btn { margin-top: var(--space-2); }
html.anim .signup__success:not([hidden]) {
  animation: success-in 420ms var(--ease) both;
}
@keyframes success-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* FAQ — native disclosure, accessible with no JS */
.faq { margin-top: var(--space-8); display: grid; gap: var(--space-2); max-width: 46ch; }
.faq__item {
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-dark);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  background: var(--coral-on-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 5v14M5 12h14' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 5v14M5 12h14' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:focus-visible { outline: 2.5px solid var(--coral-on-dark); outline-offset: 2px; border-radius: var(--radius); }
.faq__a {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--on-dark-soft);
}
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; } }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--pine-deep);
  color: var(--on-dark-soft);
  padding-block: clamp(3rem, 6vw, 4.5rem) var(--space-8);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
.site-footer .brand,
.site-footer .brand__name { color: #fff; }
.site-footer .brand__mark { background: rgba(255,255,255,0.92); border-color: var(--on-dark-line); }
.site-footer__tag { margin-top: var(--space-4); max-width: 32ch; font-size: var(--text-sm); }
.site-footer h4 {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin: 0 0 var(--space-4);
}
.footer-list { display: grid; gap: var(--space-3); }
.footer-list a { color: var(--on-dark-soft); font-size: var(--text-sm); text-decoration: none; }
.footer-list a:hover { color: #fff; }
.footer-ig { display: inline-flex; align-items: center; gap: var(--space-2); }
.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--on-dark-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--on-dark-muted);
}

/* ---------- Reveal motion ----------
   Active only when <html class="anim"> — set synchronously in the head, and
   only when the user has NOT requested reduced motion. With no JS or with
   reduced motion, .anim is never added, so all content stays visible. */
html.anim [data-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--anim-delay, 0ms);
}
html.anim [data-animate="fade"] { transform: none; }
html.anim [data-animate].is-visible { opacity: 1; transform: none; }

/* Signature moment: the coral highlight phrase ("Here's why.") comes into focus
   a beat after the black headline has arrived, so it lands last. Hero-scoped,
   enhancement only — with no JS / reduced motion the phrase is simply present. */
html.anim .hero__title .hl { opacity: 0; display: inline-block; }
html.anim .hero__title.is-visible .hl {
  animation: hl-settle 860ms var(--ease) 620ms both;
}
@keyframes hl-settle {
  from { opacity: 0; filter: blur(6px); transform: translateY(0.18em); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .hero__title { max-width: 18ch; }
  .hero__media { max-width: 28rem; margin-inline: auto; width: 100%; }
  .class__inner { grid-template-columns: minmax(0, 1fr); }
  .class__rail { position: static; }
  .ai__inner { grid-template-columns: minmax(0, 1fr); }
  .signup__inner { grid-template-columns: minmax(0, 1fr); }
  .trust__proofs { grid-template-columns: 1fr; gap: var(--space-5); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  :root { --header-h: 62px; }

  /* Sticky enrollment shortcut: keeps "See the toddler class" one thumb-tap
     away once the hero buttons scroll off. Opaque (no glass), safe-area aware. */
  .mobile-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: var(--space-3) clamp(1.15rem, 4vw, 2.25rem);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--mist);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 28px -18px rgba(14, 42, 45, 0.35);
    transform: translateY(130%);
    transition: transform 340ms var(--ease);
  }
  .mobile-cta.is-visible { transform: translateY(0); }
  .mobile-cta .btn { min-height: 52px; }

  .nav-toggle { display: inline-flex; order: 3; }
  .nav { gap: var(--space-2); }
  .nav__list {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--mist);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-130%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t), opacity var(--t), visibility 0s linear 240ms;
  }
  .nav.is-open .nav__list {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform var(--t), opacity var(--t), visibility 0s;
  }
  .nav__link { min-height: 48px; padding: var(--space-3) var(--space-4); font-size: var(--text-base); }
  .nav__link::after { display: none; }
  .nav__cta { margin: var(--space-2) 0 0; }
  .nav__cta .btn { width: 100%; min-height: 50px; }

  /* Arc: curve hidden, tabs become a scroll-snap row of stage chips */
  .arc__curve { display: none; }
  .arc__tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-2);
    margin-inline: calc(-1 * clamp(1.15rem, 4vw, 2.25rem));
    padding-inline: clamp(1.15rem, 4vw, 2.25rem);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-6);
    -webkit-overflow-scrolling: touch;
  }
  .arc__tab {
    flex: none;
    scroll-snap-align: start;
    grid-template-columns: auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
  }
  .arc__tab[aria-selected="true"] { border-color: var(--coral); background: var(--coral-tint); }
  .arc__tab .arc__dot { width: 10px; height: 10px; }
  .arc__tab-age { font-size: var(--text-base); }
  .arc__cols { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media (max-width: 560px) {
  .brand__name { font-size: 0.95rem; }
  .hero__cred { align-items: flex-start; }
  .module { grid-template-columns: auto 1fr; padding-inline: 0; }
  .way { padding-inline: 0; }
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* =========================================================
   Tidepool motifs — scroll motion + dead-space accents
   (decor.js adds html.gms-motion when motion is welcome)
   ========================================================= */

[data-drift] { will-change: transform; }

/* Draw-in: shapes surface one by one the first time a motif is seen */
.gms-motion .gms-reveal :where(circle, path) {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.gms-motion .gms-reveal.is-visible :where(circle, path) { opacity: 1; }
.gms-motion .gms-reveal :where(circle, path):nth-child(2) { transition-delay: 100ms; }
.gms-motion .gms-reveal :where(circle, path):nth-child(3) { transition-delay: 200ms; }
.gms-motion .gms-reveal :where(circle, path):nth-child(4) { transition-delay: 300ms; }
.gms-motion .gms-reveal :where(circle, path):nth-child(5) { transition-delay: 400ms; }
.gms-motion .gms-reveal :where(circle, path):nth-child(6) { transition-delay: 500ms; }
.gms-motion .gms-reveal :where(circle, path):nth-child(7) { transition-delay: 600ms; }
.gms-motion .gms-reveal :where(circle, path):nth-child(8) { transition-delay: 700ms; }

/* Growth arc: the newly-selected stage panel eases in instead of snapping.
   JS toggles [hidden]; showing a panel restarts this keyframe. gms-motion-gated,
   so reduced-motion / no-JS keep the instant, correct switch. */
.gms-motion .arc__panel:not([hidden]) {
  animation: arc-panel-in 380ms var(--ease) both;
}
@keyframes arc-panel-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* Slow floating bob; the dashed rings turn almost imperceptibly */
@keyframes gms-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-16px); }
}
@keyframes gms-spin {
  to { transform: rotate(360deg); }
}
.gms-motion .gms-float { animation: gms-float 5.5s ease-in-out infinite alternate; }
.gms-motion .gms-float--slow { animation-duration: 8s; }
.gms-motion .gms-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: gms-spin 50s linear infinite;
}

/* Trust band: tide-rings + a coral arc rising past the quote */
.trust { position: relative; z-index: 0; overflow: hidden; }
.trust__decor {
  position: absolute;
  top: -70px;
  right: -60px;
  width: min(30vw, 300px);
  height: auto;
  z-index: -1;
  pointer-events: none;
}

/* Growth-arc section: a small seed-arc in the empty top-right corner,
   echoing the big arc device below it */
.arc { position: relative; z-index: 0; overflow: hidden; }
.arc__decor {
  position: absolute;
  top: clamp(3.5rem, 8vw, 6rem);
  right: 4%;
  width: clamp(90px, 11vw, 150px);
  height: auto;
  z-index: -1;
  pointer-events: none;
}

/* Four ways: a sprig growing up from the bottom-right gutter */
.ways { position: relative; z-index: 0; overflow: hidden; }
.ways__decor {
  position: absolute;
  right: 4%;
  bottom: -8px;
  width: clamp(64px, 8vw, 104px);
  height: auto;
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 860px) {
  .trust__decor { width: 190px; top: -55px; right: -55px; opacity: 0.55; }
  .arc__decor { display: none; }
  .ways__decor { width: 64px; opacity: 0.6; }
}

/* Dark theme: dial the light-stroked motifs down so they don't glow */
[data-theme="dark"] :where(.hero__decor, .arc__decor, .ways__decor) { opacity: 0.4; }