/* =========================================================
   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: #5C7472;     /* AA on mist for >=14px */
  --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);
}
[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; }

/* ---------- 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);
}
.arc__tab[aria-selected="true"] .arc__dot {
  background: var(--coral);
  border-color: var(--coral);
  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); }

/* ---------- 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; }

@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; }
  .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; }

/* 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; }