/* ============================================================
   Anchored - tokens
   ============================================================ */
:root {
  /* palette (rebranded to match the app: forest / cream / gold) */
  --forest:    #1F4D3D; /* deep anchor color */
  --forest-2:  #275a48; /* lifted forest for the hero dusk gradient */
  --ink:       #142e24; /* green-black: text on gold surfaces (AA) */
  --gold:      #C6A15B;
  --gold-soft: #d8be8b;
  --bronze:    #81642d; /* gold darkened for small text on cream/white (AA 4.5:1) */
  --cream:     #FAF3E6;
  --slate:     #3D4A5C;
  --seagreen:  #3E7C6F;

  --cream-dim:  rgba(250, 243, 230, 0.72);
  --cream-mut:  rgba(250, 243, 230, 0.66); /* quietest cream that still holds AA on forest */
  --border:     rgba(61, 74, 92, 0.14);
  --border-2:   rgba(61, 74, 92, 0.24);

  /* type */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  --step-1:  clamp(1.18rem, 1.08rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 2.9rem);
  --hero:    clamp(2.6rem, 1.7rem + 4.6vw, 5.25rem);

  --maxw: 1120px;
  --maxw-narrow: 720px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Reset (adapted from the vibe_anchored_example reference,
   kept brand-agnostic)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  font-family: var(--font-sans);
  color: var(--slate);
  background: var(--cream);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.visually-hidden, .skip-link {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto;
  background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 8px; z-index: 999;
  font-weight: 600;
}

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}
.btn--gold {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  /* --ink, not --forest: plain forest on gold lands under 4.5:1, the
     deeper green-black keeps button labels comfortably AA */
  color: var(--ink);
  box-shadow: 0 4px 14px -8px rgba(198, 161, 91, 0.5);
}
.btn--gold:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, var(--gold), #a8823c);
  box-shadow: 0 10px 24px -8px rgba(198, 161, 91, 0.55);
}
.btn--gold:active { transform: translateY(0); box-shadow: 0 4px 14px -8px rgba(198, 161, 91, 0.5); }
.btn:disabled, .btn:disabled:hover {
  opacity: 0.65; cursor: default; transform: none;
}

/* ============================================================
   Wordmark / header
   ============================================================ */
.wordmark { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--forest); }
.wordmark__mark { width: 24px; height: 24px; color: var(--gold); flex: none; }
.wordmark__text { font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.01em; }
.wordmark--sm .wordmark__text { font-size: 0.95rem; }
.wordmark--sm .wordmark__mark { width: 20px; height: 20px; }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 243, 230, 0.82);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }

/* Sticky waitlist CTA: hidden over the hero, quietly fades in once the
   hero scrolls away (script.js toggles .is-scrolled). Without JS it is
   simply always visible. */
.nav__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.45em 1.2em;
  border: 1px solid var(--gold); border-radius: 999px;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.01em;
  color: var(--forest);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease),
              color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav.is-scrolled .nav__cta, html.no-js .nav__cta { opacity: 1; visibility: visible; }
.nav__cta:hover { background: rgba(198, 161, 91, 0.14); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  background: radial-gradient(120% 90% at 50% -10%, var(--forest-2), var(--forest) 60%);
  padding: clamp(3.5rem, 10vh, 6.5rem) 0 clamp(4rem, 11vh, 7rem);
  text-align: center;
  overflow: hidden;
}
.hero__glow {
  position: absolute; bottom: -25%; left: 50%; transform: translateX(-50%);
  width: min(900px, 130vw); height: 640px;
  background: radial-gradient(closest-side, rgba(198, 161, 91, 0.22), rgba(198, 161, 91, 0.06) 45%, transparent 72%);
  pointer-events: none;
}
/* Night-water texture: two faint gold light pools that drift slowly.
   Oversized so a small transform never exposes an edge; opacity kept low. */
.hero__water {
  position: absolute; top: -20%; left: -20%; width: 140%; height: 140%;
  pointer-events: none; z-index: 0; opacity: 0.05;
  background:
    radial-gradient(38% 24% at 32% 30%, var(--gold) 0%, transparent 60%),
    radial-gradient(46% 26% at 72% 66%, var(--gold-soft) 0%, transparent 62%);
  will-change: transform;
}
/* Soft dusk horizon that melts the forest hero into the cream below
   (generous fade so the water meets the cream without a hard cut) */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 170px;
  background: linear-gradient(to top, var(--cream), transparent);
  pointer-events: none; z-index: 1;
}
.hero__inner { position: relative; z-index: 2; max-width: var(--maxw-narrow); margin-inline: auto; }

/* ---- Drop-anchor entrance stage ----
   Base state (also what reduced-motion / no-JS see): just the resting
   anchor, exactly like a static mark. Ship, chain and ripple are hidden
   and the animation only exists inside the no-preference block below. */
.hero__anchor-stage { position: relative; width: 120px; height: 40px; margin: 0 auto 1.6rem; }
.drop-anchor {
  position: absolute; left: 50%; bottom: 0; width: 40px; height: 40px;
  color: var(--gold); transform: translateX(-50%);
}
.drop-ship, .drop-chain, .drop-ripple { display: none; }
.hero__content { position: relative; }
.hero__title {
  font-family: var(--font-serif); font-weight: 500; font-size: var(--hero);
  line-height: 1.06; letter-spacing: -0.015em; color: var(--cream);
  margin-bottom: 1.2rem;
}
.hero__sub {
  font-size: var(--step-1); color: var(--cream-dim); line-height: 1.55;
  max-width: 42ch; margin: 0 auto 2.2rem;
}
.hero__privacy { margin-top: 1.4rem; font-size: var(--step--1); color: var(--cream-mut); }

/* ============================================================
   Waitlist form + success state
   ============================================================ */
.waitlist-form { max-width: 460px; margin-inline: auto; }
.waitlist-form__row { display: flex; gap: 0.6rem; }
.waitlist-form__input {
  flex: 1; min-width: 0;
  background: rgba(250, 243, 230, 0.06);
  border: 1px solid rgba(250, 243, 230, 0.22);
  border-radius: 999px;
  padding: 0.9em 1.3em; color: var(--cream); font-size: var(--step-0);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.waitlist-form__input::placeholder { color: var(--cream-mut); }
.waitlist-form__input:focus { outline: none; border-color: var(--gold); background: rgba(250, 243, 230, 0.1); }
.waitlist-form__input.is-invalid { border-color: #e0946f; }
.waitlist-form__btn { white-space: nowrap; }
.waitlist-form__msg {
  margin-top: 0.85rem; font-size: var(--step--1); min-height: 1.2em;
  color: #eeab86; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.waitlist-form__msg svg { width: 1em; height: 1em; flex: none; }

.waitlist-success {
  max-width: 460px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  animation: pop 0.5s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } }
.waitlist-success__mark {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(198, 161, 91, 0.14); color: var(--gold-soft);
  display: grid; place-items: center; margin-bottom: 0.3rem;
}
.waitlist-success__mark svg { width: 24px; height: 24px; }
.waitlist-success__title { font-family: var(--font-serif); font-size: var(--step-1); color: var(--cream); font-weight: 500; }

/* Final CTA section reuses the same form but on cream, so it needs its own input treatment */
.final .waitlist-form__input {
  background: #fff;
  border: 1px solid var(--border-2);
  color: var(--slate);
}
.final .waitlist-form__input::placeholder { color: rgba(61, 74, 92, 0.78); }
.final .waitlist-form__input:focus { border-color: var(--gold); background: #fff; }
.final .waitlist-form__input.is-invalid { border-color: #c96a4e; }
.final .waitlist-form__msg { color: #a04324; }
.final .waitlist-success__mark { background: rgba(198, 161, 91, 0.16); color: var(--gold); }
.final .waitlist-success__title { color: var(--forest); }

/* ============================================================
   Section shell + eyebrow
   ============================================================ */
.section { padding: clamp(3.5rem, 9vh, 6.5rem) 0; }
.eyebrow {
  font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase;
  /* bronze, not gold: gold on cream/white is ~2.2:1; dark sections
     override back to gold-soft where it passes */
  color: var(--bronze); font-weight: 600; margin-bottom: 0.9rem;
}
.section__title {
  font-family: var(--font-serif); font-weight: 500; font-size: var(--step-3);
  line-height: 1.15; letter-spacing: -0.01em; color: var(--forest);
  max-width: 18ch; margin-bottom: 1.6rem;
}

/* ============================================================
   The struggle, named
   ============================================================ */
.struggle__inner { max-width: var(--maxw-narrow); margin-inline: auto; text-align: center; }
.struggle__line {
  font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.5;
  color: var(--slate); max-width: 46ch; margin: 0 auto 0.9rem;
}

/* ============================================================
   How Anchored works
   ============================================================ */
.how .section__title { margin-inline: auto; text-align: center; max-width: 22ch; }
.how .eyebrow { text-align: center; }
.how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.5rem; }
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.8rem;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(198, 161, 91, 0.55);
  box-shadow: 0 24px 48px -30px rgba(20, 46, 36, 0.35);
}
.how__card { display: flex; flex-direction: column; gap: 0.75rem; text-align: left; }
.card__icon {
  width: 34px; height: 34px; color: var(--forest); margin-bottom: 0.3rem;
}
.how__card:nth-child(3) .card__icon { color: var(--seagreen); }
.card__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--step-1); color: var(--forest); }
.card__body { color: var(--slate); line-height: 1.6; font-size: var(--step-0); }

/* ============================================================
   The verse
   ============================================================ */
.verse {
  position: relative;
  background: var(--forest);
  padding: clamp(4rem, 11vh, 7.5rem) 0;
  text-align: center;
}
/* Dusk-horizon dividers: feather both forest edges into the cream
   sections above and below, replacing the hard color seams. */
.verse::before,
.verse::after {
  content: ""; position: absolute; left: 0; right: 0; height: 170px;
  pointer-events: none;
}
.verse::before { top: 0; background: linear-gradient(to bottom, var(--cream), transparent); }
.verse::after { bottom: 0; background: linear-gradient(to top, var(--cream), transparent); }
.verse__inner { position: relative; z-index: 1; max-width: var(--maxw-narrow); margin-inline: auto; }
.verse__mark { width: 34px; height: 34px; color: var(--gold); margin: 0 auto 1.6rem; }
.verse__quote p {
  font-family: var(--font-serif); font-weight: 500; font-style: italic;
  font-size: var(--step-3); line-height: 1.35; letter-spacing: -0.01em;
  color: var(--cream);
}
.verse__w { display: inline-block; }
.verse__cite {
  display: block; margin-top: 1.4rem; font-style: normal;
  font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-soft); font-weight: 600;
}

/* ============================================================
   Private by design
   ============================================================ */
.private__inner { max-width: var(--maxw-narrow); margin-inline: auto; text-align: center; }
.private__list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.8rem; }
.private__item {
  font-size: var(--step-1); color: var(--slate); line-height: 1.5;
}

/* ============================================================
   Final CTA
   ============================================================ */
.final { text-align: center; background: linear-gradient(180deg, var(--cream), #f2e8d2); }
.final__inner { max-width: var(--maxw-narrow); margin-inline: auto; }
.final__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.01em; color: var(--forest); margin-bottom: 0.9rem; }
.final__sub { color: var(--slate); font-size: var(--step-1); line-height: 1.5; margin-bottom: 2rem; max-width: 44ch; margin-inline: auto; }
.final__privacy { margin-top: 1.4rem; font-size: var(--step--1); color: rgba(61, 74, 92, 0.82); }

/* ============================================================
   Footer
   ============================================================ */
.footer { border-top: 1px solid var(--border); padding: 1.4rem 0; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer__copy { font-size: var(--step--1); color: rgba(61, 74, 92, 0.8); }
.footer__links { display: flex; gap: 0 1.4rem; flex-wrap: wrap; justify-content: center; align-items: center; }
/* links and the button are inline-flex with a 44px min-height so every
   footer target meets the touch-size floor without changing the look */
.footer__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--step--1); color: rgba(61, 74, 92, 0.8); transition: color 0.2s var(--ease);
}
.footer__links a:hover { color: var(--forest); }
/* "Cookie preferences" is a button (it reopens the consent banner) but
   should read exactly like its sibling links */
.footer__link-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--step--1); color: rgba(61, 74, 92, 0.8);
  padding: 0; transition: color 0.2s var(--ease);
}
.footer__link-btn:hover { color: var(--forest); }

/* ============================================================
   Legal pages (privacy.html / terms.html)
   ============================================================ */
.legal { padding: clamp(2.5rem, 7vh, 4.5rem) 0 clamp(3.5rem, 9vh, 6rem); }
.legal__inner { max-width: var(--maxw-narrow); margin-inline: auto; }
.legal__title {
  font-family: var(--font-serif); font-weight: 500; font-size: var(--step-3);
  line-height: 1.12; letter-spacing: -0.01em; color: var(--forest);
  margin-bottom: 0.5rem;
}
.legal__meta { font-size: var(--step--1); color: rgba(61, 74, 92, 0.65); margin-bottom: 1.1rem; }
.legal__note {
  font-size: var(--step--1); line-height: 1.55; color: var(--slate);
  background: rgba(198, 161, 91, 0.09);
  border: 1px solid rgba(198, 161, 91, 0.32);
  border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 2rem;
}
.legal h2,
.legal h3 {
  font-family: var(--font-serif); font-weight: 500; font-size: var(--step-1);
  color: var(--forest); margin: 2.4rem 0 0.8rem;
  scroll-margin-top: 84px; /* clear the sticky nav on #anchor jumps */
}
/* Third level: a notch under h2 so a page can nest sections without
   the two levels reading as the same thing. */
.legal h3 {
  font-size: clamp(1.08rem, 1.02rem + 0.3vw, 1.22rem);
  font-weight: 600; margin-top: 2rem;
}
/* Part divider: privacy.html splits into "The Anchored app" and "This website",
   so those two headings sit a level above the ordinary h2/h3 sections. */
.legal .legal__part {
  font-size: var(--step-2); font-weight: 600;
  margin: 3.2rem 0 1.1rem; padding-top: 1.7rem;
  border-top: 1px solid rgba(31, 77, 61, 0.2);
}
.legal p { line-height: 1.65; margin-bottom: 0.9rem; }
.legal ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 0.9rem; }
.legal li { line-height: 1.6; margin-bottom: 0.5rem; }
.legal a {
  color: var(--forest); text-decoration: underline;
  text-decoration-color: rgba(198, 161, 91, 0.7); text-underline-offset: 3px;
}
.legal a:hover { text-decoration-color: var(--gold); }

/* ============================================================
   Cookie consent banner
   Slim forest bar pinned to the bottom edge; JS removes [hidden] and
   adds .is-open to slide it up. The reduced-motion block at the top
   of this file collapses the transition, so those visitors see it
   appear without animation. No-JS visitors never see it at all,
   which is safe: without JS no tracking can load either.
   ============================================================ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  /* deep green-black (the ink shade), the equivalent of the old
     near-black navy bar; also keeps the gold link AA on hover */
  background: rgba(20, 46, 36, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(198, 161, 91, 0.28);
  box-shadow: 0 -14px 34px -18px rgba(20, 46, 36, 0.55);
  transform: translateY(102%);
  transition: transform 0.55s var(--ease);
}
.cookie-banner.is-open { transform: translateY(0); }
.cookie-banner__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem 1.2rem; flex-wrap: wrap; padding-block: 0.85rem;
}
.cookie-banner__text {
  color: var(--cream-dim); font-size: var(--step--1); line-height: 1.55;
  max-width: 64ch;
}
.cookie-banner__text a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner__text a:hover { color: var(--gold); }
.cookie-banner__actions { display: flex; gap: 0.6rem; margin-left: auto; }
.cookie-banner__btn { min-height: 44px; padding: 0.6em 1.6em; }
/* Decline carries the same visual weight as Accept: same size, same
   shape, clearly a button - rejecting is as easy as accepting. */
.btn--outline {
  background: rgba(250, 243, 230, 0.07);
  border: 1px solid rgba(250, 243, 230, 0.55);
  color: var(--cream);
}
.btn--outline:hover {
  transform: translateY(-2px);
  border-color: var(--cream);
  background: rgba(250, 243, 230, 0.14);
}
.btn--outline:active { transform: translateY(0); }
@media (max-width: 640px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; }
  .cookie-banner__actions { margin-left: 0; }
  .cookie-banner__btn { flex: 1; }
}

/* ============================================================
   Scroll-reveal - gentle fade-up, once only (JS toggles .is-in)
   Hidden states are gated on html.js (set by the inline head script)
   so a visitor without JavaScript reads the full page: nothing on the
   site is ever invisible unless JS is confirmed running to reveal it.
   ============================================================ */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* Staggered children: when a row/list enters together, its items arrive
   in sequence rather than all at once. */
.struggle__line:nth-child(2) { transition-delay: 0.08s; }
.struggle__line:nth-child(3) { transition-delay: 0.16s; }
.struggle__line:nth-child(4) { transition-delay: 0.24s; }
.how__grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.how__grid .reveal:nth-child(3) { transition-delay: 0.2s; }
.private__item:nth-child(2) { transition-delay: 0.08s; }
.private__item:nth-child(3) { transition-delay: 0.16s; }

/* Verse: the text arrives word group by word group over ~1.5s. */
html.js .verse__w { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
html.js .verse__quote.is-in .verse__w { opacity: 1; transform: none; }
.verse__quote.is-in .verse__w:nth-child(1) { transition-delay: 0s; }
.verse__quote.is-in .verse__w:nth-child(2) { transition-delay: 0.3s; }
.verse__quote.is-in .verse__w:nth-child(3) { transition-delay: 0.6s; }
.verse__quote.is-in .verse__w:nth-child(4) { transition-delay: 0.9s; }

/* ============================================================
   Drop-anchor entrance + ambient motion
   Everything that moves lives here, so prefers-reduced-motion users
   (and no-JS/no-CSS-animation fallbacks) get the calm static end state.
   Transforms + opacity only - nothing animated here shifts layout.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Ambient night water (not part of the entrance: always drifts) */
  .hero__water { animation: waterDrift 26s ease-in-out infinite alternate; }

  /* The entrance plays once per session: the inline head script adds
     html.entrance-done on repeat loads (sessionStorage flag), and every
     rule below is gated off it, so return visits get the settled
     resting layout instantly. */

  /* Tall stage so the ship sits at the top and the anchor has room to fall */
  html:not(.entrance-done) .hero__anchor-stage {
    --anchor-h: 40px;
    --chain-top: 22px;
    --drop: clamp(86px, 14vh, 140px);
    height: calc(var(--chain-top) + var(--drop) + var(--anchor-h));
  }
  html:not(.entrance-done) .drop-ship {
    display: block; position: absolute; top: 0; left: 50%;
    width: clamp(38px, 11vw, 50px); color: var(--gold);
    transform: translateX(-50%);
    animation: dropShipFade 1s var(--ease) 2.6s forwards;
  }
  html:not(.entrance-done) .drop-chain {
    display: block; position: absolute; top: var(--chain-top); left: 50%;
    width: 2px; height: var(--drop); background: var(--gold);
    transform: translateX(-50%) scaleY(0); transform-origin: top center;
    animation: dropChain 2.6s var(--ease) forwards,
               dropChainFade 1s var(--ease) 2.6s forwards;
  }
  html:not(.entrance-done) .drop-anchor {
    transform: translateX(-50%) translateY(calc(-1 * var(--drop)));
    transform-origin: 50% 10%; /* hang from the eye, like on a rope */
    animation: dropAnchor 2.6s var(--ease) forwards,
               anchorSway 6s ease-in-out 2.8s infinite;
  }
  html:not(.entrance-done) .drop-ripple {
    display: block; position: absolute; left: 50%; bottom: 3px;
    width: 26px; height: 26px; border: 1.5px solid var(--gold);
    border-radius: 50%; transform: translateX(-50%) scale(0.2); opacity: 0;
    animation: dropRipple 0.9s var(--ease) 2.6s forwards;
  }
  /* Headline, subhead and form arrive right after the anchor settles */
  html:not(.entrance-done) .hero__content { opacity: 0; animation: heroContentIn 0.9s var(--ease) 2.75s forwards; }

  /* Repeat visit: resting anchor keeps only the quiet ambient sway */
  html.entrance-done .drop-anchor { animation: anchorSway 6s ease-in-out 1s infinite; }
}

@keyframes waterDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(2%, 1%, 0) scale(1.05); }
}
@keyframes dropAnchor {
  from { transform: translateX(-50%) translateY(calc(-1 * var(--drop))); }
  to   { transform: translateX(-50%) translateY(0); }
}
/* Idle sway once the drop has landed: a few quiet degrees, hanging in
   water. Starts after the entrance settles; overrides its transform. */
@keyframes anchorSway {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  30%      { transform: translateX(-50%) rotate(2.5deg); }
  70%      { transform: translateX(-50%) rotate(-2.5deg); }
}
@keyframes dropChain {
  from { transform: translateX(-50%) scaleY(0); }
  to   { transform: translateX(-50%) scaleY(1); }
}
@keyframes dropChainFade { to { opacity: 0; } }
@keyframes dropShipFade { to { opacity: 0; } }
@keyframes dropRipple {
  from { transform: translateX(-50%) scale(0.2); opacity: 0.45; }
  60%  { opacity: 0.3; }
  to   { transform: translateX(-50%) scale(2.8); opacity: 0; }
}
@keyframes heroContentIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Responsive - mobile-first target
   ============================================================ */
/* Tablet */
@media (max-width: 900px) {
  .how__grid { grid-template-columns: 1fr; }
  .verse__quote p { font-size: var(--step-2); }
}
/* Phone */
@media (max-width: 560px) {
  .waitlist-form__row { flex-direction: column; }
  .waitlist-form__btn { width: 100%; }
  .hero__title { font-size: clamp(2.2rem, 1.6rem + 6vw, 3rem); }
  .section__title { max-width: 100%; }
  .footer__inner { flex-direction: column; text-align: center; }
}

/* ============================================================
   LIQUID GLASS
   A restrained glass language for elements that sit over the dark
   water only (never over cream). The recipe activates in exactly
   three contexts: inside the hero (always water), on mobile during
   the descent (max-width 1023px), and on desktop in 3D mode
   (html.mode-3d). Elements elsewhere keep their normal styling
   even though they carry the class.
   ============================================================ */
.hero .liquid-glass,
html.mode-3d .liquid-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border-color: transparent;
  -webkit-backdrop-filter: blur(var(--glass-blur, 42px)) saturate(1.25);
  backdrop-filter: blur(var(--glass-blur, 42px)) saturate(1.25);
  /* soft inner top highlight + a deep, quiet drop into the water */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 40px -26px rgba(5, 16, 12, 0.55);
}
/* 1px gradient border: bright at the top and bottom edges, fading at
   the middle of the sides, via the padding + mask-composite trick */
.hero .liquid-glass::before,
html.mode-3d .liquid-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0.07) 32%,
    rgba(255, 255, 255, 0.07) 68%,
    rgba(255, 255, 255, 0.35)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* The hero email field: a glass pill wrapping a bare input, so the
   pseudo-element border can render (inputs cannot host pseudos) */
.waitlist-form__field { flex: 1; min-width: 0; border-radius: 999px; }
.waitlist-form__field .waitlist-form__input {
  width: 100%; background: transparent; border: 0;
}
.waitlist-form__field .waitlist-form__input:focus { background: transparent; }
/* Invalid ring for the glass pill (the bare input inside has no border
   of its own). Declared before :focus-within so the gold focus ring
   wins while the visitor is back in the field correcting the email. */
.hero .waitlist-form__field.is-invalid {
  box-shadow:
    inset 0 0 0 1.5px #e0946f,
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 40px -26px rgba(5, 16, 12, 0.55);
}
.hero .waitlist-form__field:focus-within {
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 40px -26px rgba(5, 16, 12, 0.55);
}

/* Solid fallback when backdrop-filter is unsupported: readable deep
   green instead of see-through glass */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero .liquid-glass,
  html.mode-3d .liquid-glass,
  .liquid-glass--mobile-active { background: rgba(16, 41, 32, 0.92); }
}

/* ============================================================
   MOBILE DESCENT (max-width 1023px)
   No WebGL on mobile; instead the page itself is the water. A static
   painted gradient runs hero -> struggle -> how -> verse, so the
   green deepens as you scroll (zero animation cost), then the verse
   floor lifts with gold light and melts back to cream for privacy,
   the final CTA, and the footer.
   ============================================================ */
@media (max-width: 1023px) {
  /* --- Job 1: the hero fills the small viewport minus the sticky nav,
     with the whole content block (anchor, headline, subhead, form)
     centered as one group. No more dead green void. --- */
  .hero {
    min-height: calc(100svh - 64px);
    display: flex; flex-direction: column; justify-content: center;
    padding: 1.5rem 0 2.5rem;
  }
  /* the hero now flows into dark water below, not cream */
  .hero::after { display: none; }
  .hero { background: radial-gradient(130% 80% at 50% -10%, var(--forest-2), var(--forest) 70%); }

  /* --- the deepening water --- */
  .struggle { background: linear-gradient(180deg, var(--forest), #193e31); }
  .how      { background: linear-gradient(180deg, #193e31, #0f2a21); }
  .verse    { background: linear-gradient(180deg, #0f2a21, #081a14 55%, #081a14); }
  .verse::before { display: none; }
  /* the dawn: the seabed lifts with gold light and melts into cream */
  .verse::after {
    top: auto; bottom: 0; height: 180px;
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(198, 161, 91, 0.1) 42%,
      var(--cream) 100%
    );
  }

  /* --- light-on-dark text through the descent --- */
  .struggle .section__title, .how .section__title { color: var(--cream); }
  .struggle__line { color: var(--cream-dim); }
  .struggle .eyebrow, .how .eyebrow { color: var(--gold-soft); }
  .how .card__title { color: var(--cream); }
  .how .card__body { color: var(--cream-dim); }
  .how .card__icon { color: var(--gold-soft); }
  .how .how__card:nth-child(3) .card__icon { color: #7fb5a5; }

  /* --- glass cards over the dark water (lighter blur for scroll perf) --- */
  .how .liquid-glass {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border-color: transparent;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
    backdrop-filter: blur(16px) saturate(1.25);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 18px 40px -26px rgba(5, 16, 12, 0.55);
  }
  .how .liquid-glass::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    padding: 1px; pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.45),
      rgba(255, 255, 255, 0.07) 32%,
      rgba(255, 255, 255, 0.07) 68%,
      rgba(255, 255, 255, 0.35)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .how .liquid-glass { background: rgba(16, 41, 32, 0.92); }
  }
  .how .card:hover { transform: none; }
}

/* --- Job 3: gentle sticky-stack for the cards; a scroll effect, so it
   honors prefers-reduced-motion (reduced-motion keeps a plain list) --- */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .how__grid { display: block; }
  .how__card { margin-bottom: 1.1rem; }
  .how__card:nth-child(1) { position: sticky; top: 84px; }
  .how__card:nth-child(2) { position: sticky; top: 97px; }
  .how__card:nth-child(3) { position: sticky; top: 110px; }
}

/* --- Mobile entrance: the full ship sequence, compact and unhurried ---
   The original mobile breakage was a cascade collision: the phone
   resting-height rule was written AFTER the entrance block, collapsing
   the tall measured stage mid-animation. The fix is ordering, not
   cutting the story: this block sits last in the cascade and owns the
   stage height itself, so nothing can collapse it again. The stage is
   a compact measured version of the desktop one (ship at top, a
   70-95px drop, anchor resting at the bottom), sized so the form still
   sits above the fold at 390x844 and 430x932. The anchor visibly
   travels from the ship down the chain over 1.4s; ship and chain fade
   by ~1.85s; the ripple ends by ~1.85s; content holds 0.15 opacity
   from the first frame (never blank) and settles last at ~1.9s, so
   nothing overlaps the headline once it is fully in. Reduced-motion
   users get the settled layout instantly (the base static state). --- */
@media (max-width: 560px) {
  /* bigger resting anchor on phones (also the reduced-motion end state) */
  .hero__anchor-stage { height: 54px; }
  .drop-anchor { width: 54px; height: 54px; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  html:not(.entrance-done) .hero__anchor-stage {
    --anchor-h: 40px;
    --chain-top: 24px;
    --drop: clamp(70px, 10vh, 95px);
    height: calc(var(--chain-top) + var(--drop) + var(--anchor-h));
  }
  html:not(.entrance-done) .drop-ship {
    width: clamp(44px, 12vw, 54px);
    animation: dropShipFade 0.45s var(--ease) 1.4s forwards;
  }
  html:not(.entrance-done) .drop-chain {
    animation: dropChain 1.4s var(--ease) forwards,
               dropChainFade 0.45s var(--ease) 1.4s forwards;
  }
  html:not(.entrance-done) .drop-anchor {
    animation: dropAnchor 1.4s var(--ease) forwards,
               anchorSway 6s ease-in-out 1.7s infinite;
  }
  html:not(.entrance-done) .drop-ripple {
    width: 30px; height: 30px;
    animation: dropRipple 0.45s var(--ease) 1.4s forwards;
  }
  /* the theatrical beat: the ship performs alone (content occupies its
     space invisibly, so nothing shifts), then once the anchor lands at
     1.4s the rest of the site transitions in */
  html:not(.entrance-done) .hero__content {
    opacity: 0;
    animation: heroContentIn 0.9s var(--ease) 1.5s forwards;
  }
}
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  html:not(.entrance-done) .hero__anchor-stage { --anchor-h: 54px; }
}

/* ============================================================
   3D DESCENT MODE (desktop only)
   script.js adds html.mode-3d ONLY when: viewport >= 1024px,
   prefers-reduced-motion: no-preference, and WebGL + Three.js
   initialise successfully. Everyone else keeps the 2D page.
   ============================================================ */
#depth-layer, #light-rays, #three-canvas {
  position: fixed; inset: 0; pointer-events: none; display: none;
}
#depth-layer { z-index: -3; background-color: var(--forest); }
#light-rays  {
  z-index: -2; opacity: 0; will-change: transform, opacity;
  background:
    linear-gradient(102deg, transparent 44%, rgba(198, 161, 91, 0.06) 49%, transparent 55%),
    linear-gradient(94deg,  transparent 58%, rgba(216, 190, 139, 0.05) 63%, transparent 69%),
    linear-gradient(86deg,  transparent 30%, rgba(198, 161, 91, 0.04) 35%, transparent 41%);
  mix-blend-mode: screen;
}
#three-canvas { z-index: -1; opacity: 0; transition: opacity 1.4s var(--ease); will-change: opacity; }

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.mode-3d #depth-layer,
  html.mode-3d #light-rays,
  html.mode-3d #three-canvas { display: block; }
  html.mode-3d.is-3d-ready #three-canvas { opacity: 1; }

  /* Base sits on the deep water; the fixed depth layer carries the real
     colour and descent.js deepens it with scroll. */
  html.mode-3d body { background: var(--forest); }

  /* Sticky nav is dark glass while sinking, then returns to the light
     cream glass once surfaced past the verse (html.is-surfaced from JS) */
  html.mode-3d .nav {
    background: rgba(8, 25, 19, 0.55);
    border-bottom-color: rgba(250, 243, 230, 0.08);
    transition: background 0.6s var(--ease), border-color 0.6s var(--ease);
  }
  html.mode-3d .wordmark { color: var(--cream); transition: color 0.6s var(--ease); }
  html.mode-3d .nav__cta { color: var(--cream); }
  /* nav links follow the same descent state as the wordmark */
  html.mode-3d .nav--home .nav__link { color: var(--cream); transition: color 0.6s var(--ease), background 0.2s var(--ease); }
  html.mode-3d .nav--home .nav__link:hover { color: var(--cream); background: rgba(250, 243, 230, 0.12); }
  html.mode-3d.is-surfaced .nav {
    background: rgba(250, 243, 230, 0.82);
    border-bottom-color: var(--border);
  }
  html.mode-3d.is-surfaced .wordmark { color: var(--forest); }
  html.mode-3d.is-surfaced .nav__cta { color: var(--forest); }
  html.mode-3d.is-surfaced .nav--home .nav__link { color: var(--forest); }
  html.mode-3d.is-surfaced .nav--home .nav__link:hover { color: var(--forest); background: rgba(31, 77, 61, 0.08); }

  /* ONLY the descent sections go transparent to reveal the deep water.
     Privacy, final CTA and footer keep their warm cream: the surface
     into hope after the anchor lands at the seabed. */
  html.mode-3d .hero,
  html.mode-3d .struggle,
  html.mode-3d .how,
  html.mode-3d .verse { background: transparent; }

  /* Hero: the 2D entrance yields to the 3D anchor; reserve headroom
     above the headline where it floats */
  html.mode-3d .hero { min-height: 0; padding-top: clamp(4rem, 12vh, 8rem); display: block; }
  html.mode-3d .hero__anchor-stage { height: clamp(140px, 24vh, 280px); }
  html.mode-3d .hero__anchor-stage > * { display: none !important; }
  html.mode-3d .hero__water { display: none; }
  html.mode-3d .hero::after { display: none; }
  html.mode-3d .hero__content { opacity: 0; animation: heroContentIn 0.9s var(--ease) 0.35s both; }
  html.mode-3d.entrance-done .hero__content { opacity: 1; animation: none; }

  /* Light-on-dark text through the darkening descent */
  html.mode-3d .struggle .section__title,
  html.mode-3d .how .section__title { color: var(--cream); }
  html.mode-3d .struggle__line { color: var(--cream-dim); }
  html.mode-3d .struggle .eyebrow,
  html.mode-3d .how .eyebrow { color: var(--gold-soft); }
  html.mode-3d .card__title { color: var(--cream); }
  html.mode-3d .card__body { color: var(--cream-dim); }
  html.mode-3d .card__icon { color: var(--gold-soft); }
  html.mode-3d .how__card:nth-child(3) .card__icon { color: #7fb5a5; }
  html.mode-3d .how__card { border-radius: 20px; }
  html.mode-3d .how__card:hover {
    border-color: transparent;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 24px 48px -30px rgba(0, 0, 0, 0.65);
  }

  /* Verse = the seabed: deep green-black, the darkest water on the
     page. Only the bottom ~22% is the dawn, lifting into cream with
     warmth from GOLD, never brown. */
  html.mode-3d .verse { padding-bottom: clamp(6rem, 16vh, 10rem); }
  html.mode-3d .verse::before { display: none; }
  html.mode-3d .verse::after {
    content: ""; display: block; position: absolute;
    left: 0; right: 0; bottom: 0; top: auto; height: 22%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(198, 161, 91, 0.07) 40%,
      rgba(216, 190, 139, 0.16) 68%,
      var(--cream) 100%
    );
    z-index: 0;
  }

  /* Privacy + footer become opaque cream again so the dark water and
     the WebGL canvas never bleed into the calm signup zone. */
  html.mode-3d .private { background: var(--cream); }
  html.mode-3d .footer { background: var(--cream); }
}

/* Safety net: never show the WebGL layers below the desktop breakpoint
   or for reduced-motion, even if the class lingers after a resize. */
@media (max-width: 1023px) {
  #depth-layer, #light-rays, #three-canvas { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #depth-layer, #light-rays, #three-canvas { display: none !important; }
}

/* ============================================================
   ============================================================
   PHASE 1 - MULTI-PAGE SHELL AND INNER PAGES
   Everything below supports the five content pages, the blog,
   and the pricing page. The homepage above is untouched.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   Inner-page header (shared nav with links + mobile menu)
   The homepage keeps its own minimal header above; inner pages
   carry .nav--inner, whose CTA is always visible (no hero to
   hide behind) and which adds a primary link row + a native
   <details> mobile menu that works with no JavaScript.
   ------------------------------------------------------------ */
.nav--inner .nav__inner,
.nav--home .nav__inner { gap: 1rem; }
.nav__desktop { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 0.3rem; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 0.85rem; border-radius: 999px;
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.01em;
  color: var(--slate);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav__link:hover { color: var(--forest); background: rgba(31, 77, 61, 0.06); }
.nav__link[aria-current="page"] { color: var(--forest); font-weight: 600; }
.nav--inner .nav__cta {
  opacity: 1; visibility: visible; margin-left: 0.4rem;
}
/* Native mobile menu: hidden on desktop, a disclosure on phones/tablets */
.nav__menu-m { display: none; }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; color: var(--forest);
  list-style: none; cursor: pointer;
}
.nav__toggle::-webkit-details-marker { display: none; }
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .nav__ico-close { display: none; }
.nav__menu-m[open] .nav__toggle .nav__ico-open { display: none; }
.nav__menu-m[open] .nav__toggle .nav__ico-close { display: block; }
.nav__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(250, 243, 230, 0.97);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 20px 40px -28px rgba(20, 46, 36, 0.4);
  padding: 0.6rem var(--pad) 1.2rem;
}
.nav__panel ul { display: flex; flex-direction: column; }
.nav__panel a {
  display: flex; align-items: center; min-height: 48px;
  font-size: var(--step-0); color: var(--slate);
  border-bottom: 1px solid var(--border);
}
.nav__panel a:last-of-type { border-bottom: 0; }
.nav__panel a[aria-current="page"] { color: var(--forest); font-weight: 600; }
/* Panel CTA is always visible while the menu is open, even on the homepage
   where the top-level CTA otherwise stays hidden until scroll. */
.nav__panel .nav__cta { display: flex; margin-top: 1rem; width: 100%; opacity: 1; visibility: visible; }

/* ---- Homepage header nav colours ----
   The homepage header sits over the dark hero. Its state logic mirrors the
   existing wordmark/CTA treatment: cream over the dark 3D-descent glass,
   forest over the cream bar (2D, mobile, and once surfaced past the verse).
   In 2D and on mobile the bar is the light cream glass, so forest links
   read at AA; in 3D the bar goes dark glass, so links go cream. */
.nav--home .nav__link { color: var(--forest); }
.nav--home .nav__link:hover { color: var(--forest); background: rgba(31, 77, 61, 0.08); }

@media (max-width: 800px) {
  .nav__desktop,
  .nav__inner > .nav__cta { display: none; }
  .nav__menu-m { display: block; margin-left: auto; }
}

/* ------------------------------------------------------------
   Footer (shared shell, used on every page)
   Quiet, one accent: the Hebrews 6:19 verse in gold-bronze.
   ------------------------------------------------------------ */
.footer { background: var(--cream); }
.footer__verse {
  text-align: center; max-width: var(--maxw-narrow); margin: 0 auto 2rem;
  padding-bottom: 1.8rem; border-bottom: 1px solid var(--border);
}
.footer__verse-mark { width: 26px; height: 26px; color: var(--gold); margin: 0 auto 0.9rem; }
.footer__verse p {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: var(--step-1); line-height: 1.5; color: var(--forest);
  max-width: 40ch; margin-inline: auto;
}
.footer__verse cite {
  display: block; margin-top: 0.7rem; font-style: normal;
  font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bronze); font-weight: 600;
}
.footer__nav {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0 1.4rem; margin-bottom: 1rem;
}
.footer__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--step--1); color: var(--slate); font-weight: 500;
  transition: color 0.2s var(--ease);
}
.footer__nav a:hover { color: var(--forest); }
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0 1.1rem; border-top: 1px solid var(--border); padding-top: 1rem;
}
.footer__legal span,
.footer__legal a,
.footer__legal .footer__link-btn {
  /* 0.82, not lower: keeps this small text at AA (>=4.5:1) on cream */
  font-size: var(--step--1); color: rgba(61, 74, 92, 0.82);
}
.footer__legal a, .footer__legal .footer__link-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color 0.2s var(--ease);
}
.footer__legal a:hover, .footer__legal .footer__link-btn:hover { color: var(--forest); }
.footer--shell .footer__inner { flex-direction: column; align-items: stretch; text-align: center; }

/* ------------------------------------------------------------
   Inner page primitives: hero, prose measure, bands
   ------------------------------------------------------------ */
.page { }
.page-hero {
  text-align: center;
  padding: clamp(3.2rem, 8vh, 5.5rem) 0 clamp(2.2rem, 5vh, 3.2rem);
}
.page-hero__inner { max-width: var(--maxw-narrow); margin-inline: auto; }
.page-hero__eyebrow { justify-content: center; }
.page-hero__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.015em;
  color: var(--forest); margin-bottom: 1rem;
}
.page-hero--lg .page-hero__title { font-size: clamp(2.4rem, 1.7rem + 3vw, 3.6rem); }
.page-hero__lede {
  font-size: var(--step-1); line-height: 1.6; color: var(--slate);
  max-width: 54ch; margin-inline: auto;
}
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 1.6rem; }
.band { padding: clamp(2.6rem, 7vh, 4.5rem) 0; }
.band--tight { padding: clamp(1.8rem, 5vh, 3rem) 0; }
.band__inner { max-width: var(--maxw-narrow); margin-inline: auto; }
.band__inner--wide { max-width: 920px; }
.band__title {
  font-family: var(--font-serif); font-weight: 500; font-size: var(--step-2);
  line-height: 1.18; letter-spacing: -0.01em; color: var(--forest);
  max-width: 22ch; margin-bottom: 1rem;
}
.band__title--center { text-align: center; margin-inline: auto; }
.prose p {
  font-size: var(--step-0); line-height: 1.7; color: var(--slate);
  max-width: 65ch; margin-bottom: 1.1rem;
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--forest); font-weight: 600; }
.prose a {
  color: var(--forest); text-decoration: underline;
  text-decoration-color: rgba(198, 161, 91, 0.7); text-underline-offset: 3px;
}
.prose a:hover { text-decoration-color: var(--gold); }
.lede {
  font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.55;
  color: var(--forest); max-width: 46ch; margin-bottom: 1.4rem;
}

/* Scripture inline within prose */
.scripture {
  font-family: var(--font-serif); font-style: italic; color: var(--forest);
  border-left: 2px solid var(--gold); padding-left: 1.1rem; margin: 1.4rem 0;
  font-size: var(--step-1); line-height: 1.5; max-width: 52ch;
}
.scripture cite {
  display: block; margin-top: 0.5rem; font-style: normal; font-size: var(--step--1);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bronze); font-weight: 600;
}

/* Named feature blocks (the daily hold, the reset library, etc.) */
.feature { margin-bottom: 1.8rem; }
.feature:last-child { margin-bottom: 0; }
.feature__name {
  font-family: var(--font-serif); font-weight: 600; font-size: var(--step-1);
  color: var(--forest); margin-bottom: 0.35rem;
}
.feature__body { color: var(--slate); line-height: 1.7; max-width: 60ch; }

/* ------------------------------------------------------------
   Deep-water image section (one per page, visual punctuation)
   A background image with a forest-green overlay for AA contrast.
   The <img> carries width/height + lazy loading (no layout shift).
   ------------------------------------------------------------ */
.deep {
  position: relative; overflow: hidden;
  padding: clamp(4rem, 12vh, 7rem) 0;
  background: var(--forest);
}
.deep__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.deep__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 42, 33, 0.72), rgba(8, 26, 20, 0.82)),
    radial-gradient(120% 90% at 50% 0%, rgba(31, 77, 61, 0.25), transparent 70%);
}
.deep--surface .deep__overlay {
  /* headline sits low: keep the lower third darkest */
  background:
    linear-gradient(180deg, rgba(8, 26, 20, 0.45) 0%, rgba(8, 26, 20, 0.66) 45%, rgba(6, 20, 15, 0.9) 100%);
}
.deep__inner {
  position: relative; z-index: 2;
  max-width: var(--maxw-narrow); margin-inline: auto; text-align: center;
}
.deep--surface .deep__inner { min-height: clamp(220px, 34vh, 340px); display: flex; flex-direction: column; justify-content: flex-end; }
.deep .eyebrow { color: var(--gold-soft); justify-content: center; }
.deep__title {
  font-family: var(--font-serif); font-weight: 500; font-size: var(--step-3);
  line-height: 1.15; letter-spacing: -0.01em; color: var(--cream);
  max-width: 20ch; margin: 0 auto 1rem;
}
.deep__body { color: var(--cream-dim); font-size: var(--step-1); line-height: 1.6; max-width: 52ch; margin: 0 auto 1.4rem; }
.deep .scripture { color: var(--cream); border-left-color: var(--gold); max-width: 46ch; margin-inline: auto; text-align: left; }
.deep .scripture cite { color: var(--gold-soft); }
.deep__inner a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.deep__inner a:hover { color: var(--gold); }

/* Verse block on cream inner pages (reuses the homepage verse feel) */
.versecard { text-align: center; }
.versecard__mark { width: 30px; height: 30px; color: var(--gold); margin: 0 auto 1.2rem; }
.versecard__quote {
  font-family: var(--font-serif); font-weight: 500; font-style: italic;
  font-size: var(--step-2); line-height: 1.4; color: var(--forest);
  max-width: 24ch; margin: 0 auto;
}
.versecard__cite {
  display: block; margin-top: 1.1rem; font-style: normal;
  font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bronze); font-weight: 600;
}

/* ------------------------------------------------------------
   Closing CTA slot (renders per CTA_MODE)
   ------------------------------------------------------------ */
.cta-slot { text-align: center; }
.cta-slot__title {
  font-family: var(--font-serif); font-weight: 500; font-size: var(--step-2);
  color: var(--forest); line-height: 1.15; margin-bottom: 0.7rem;
}
.cta-slot__sub { color: var(--slate); font-size: var(--step-1); margin-bottom: 1.8rem; max-width: 44ch; margin-inline: auto; }
.cta-appstore { display: flex; justify-content: center; }
.btn--store { padding: 0.95em 2em; font-size: var(--step-0); }

/* Closing CTA form on cream bands: light inputs (mirrors the homepage
   .final section). The How It Works closing slot sits on .deep, so it
   keeps the dark hero input treatment instead. */
.band .cta-slot .waitlist-form__input {
  background: #fff; border: 1px solid var(--border-2); color: var(--slate);
}
.band .cta-slot .waitlist-form__input::placeholder { color: rgba(61, 74, 92, 0.78); }
.band .cta-slot .waitlist-form__input:focus { border-color: var(--gold); background: #fff; }
.band .cta-slot .waitlist-form__input.is-invalid { border-color: #c96a4e; }
.band .cta-slot .waitlist-form__msg { color: #a04324; }
.band .cta-slot .waitlist-success__mark { background: rgba(198, 161, 91, 0.16); color: var(--gold); }
.band .cta-slot .waitlist-success__title { color: var(--forest); }

/* ------------------------------------------------------------
   How It Works: the Walk scroll-story with the gold anchor line
   ------------------------------------------------------------ */
.walk { position: relative; padding: clamp(2rem, 6vh, 3.5rem) 0 clamp(3rem, 8vh, 5rem); }
.walk__inner {
  position: relative; max-width: 720px; margin-inline: auto;
  --rail: clamp(1.1rem, 3vw, 1.6rem); /* left rail position */
}
.walk__line {
  position: absolute; left: var(--rail); top: 0.6rem; bottom: 0.6rem; width: 1px;
  background: rgba(198, 161, 91, 0.2); z-index: 0;
}
.walk__line-fill {
  position: absolute; inset: 0; background: var(--gold);
  transform: scaleY(0); transform-origin: top center;
}
html:not(.js) .walk__line-fill { transform: scaleY(1); }
.walk__step {
  position: relative; z-index: 1;
  padding: clamp(1.4rem, 4vh, 2.4rem) 0 clamp(1.4rem, 4vh, 2.4rem)
           calc(var(--rail) + clamp(1.4rem, 4vw, 2.4rem));
}
.walk__dot {
  position: absolute; left: calc(var(--rail) - 5px); top: clamp(1.75rem, 4.6vh, 2.9rem);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--gold); z-index: 2;
}
.walk__num {
  font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bronze); font-weight: 600; margin-bottom: 0.5rem;
}
.walk__step-title {
  font-family: var(--font-serif); font-weight: 500; font-size: var(--step-2);
  line-height: 1.18; color: var(--forest); margin-bottom: 0.7rem; max-width: 24ch;
}
.walk__step .feature { margin-top: 1.1rem; }

/* ------------------------------------------------------------
   Pricing plans
   ------------------------------------------------------------ */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2rem; }
.plan {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.8rem 1.6rem; display: flex; flex-direction: column; text-align: left;
}
.plan--feature { border-color: rgba(198, 161, 91, 0.6); box-shadow: 0 24px 48px -34px rgba(20, 46, 36, 0.4); }
.plan__tag {
  align-self: flex-start; font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze);
  margin-bottom: 0.8rem;
}
.plan__name { font-family: var(--font-serif); font-weight: 600; font-size: var(--step-1); color: var(--forest); margin-bottom: 0.4rem; }
.plan__price { font-family: var(--font-serif); font-weight: 500; font-size: var(--step-2); color: var(--forest); line-height: 1.1; }
.plan__price span { font-family: var(--font-sans); font-size: var(--step--1); color: var(--slate); font-weight: 500; }
.plan__note { color: var(--slate); line-height: 1.6; margin-top: 0.7rem; font-size: var(--step-0); }
.pricing-points { margin-top: 1.6rem; }
.pricing-points li { position: relative; padding-left: 1.5rem; margin-bottom: 0.7rem; line-height: 1.6; color: var(--slate); max-width: 60ch; }
.pricing-points li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   FAQ accordion (native details/summary, works without JS)
   ------------------------------------------------------------ */
.faq { max-width: 760px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.15rem 0; min-height: 44px;
  font-family: var(--font-serif); font-weight: 500; font-size: var(--step-1);
  color: var(--forest); line-height: 1.35; list-style: none; cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--seagreen); }
/* bronze, not gold: this plus/close icon is an interactive affordance,
   so it needs 3:1 non-text contrast on cream (gold lands ~2.2:1) */
.faq__icon { flex: none; width: 20px; height: 20px; color: var(--bronze); transition: transform 0.3s var(--ease); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a { padding: 0 0 1.3rem; }
.faq__a p { color: var(--slate); line-height: 1.7; max-width: 64ch; margin-bottom: 0.9rem; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a strong { color: var(--forest); font-weight: 600; }
.faq__a a {
  color: var(--forest); text-decoration: underline;
  text-decoration-color: rgba(198, 161, 91, 0.7); text-underline-offset: 3px;
}
.faq__a a:hover { text-decoration-color: var(--gold); }
.faq__a .scripture { margin: 0.9rem 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__a { animation: faqOpen 0.35s var(--ease); }
}
@keyframes faqOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------
   Blog (The Anchor)
   ------------------------------------------------------------ */
.blog-hero { position: relative; overflow: hidden; padding: clamp(3.5rem, 10vh, 6rem) 0; background: var(--forest); text-align: center; }
.blog-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.blog-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 42, 33, 0.78), rgba(8, 26, 20, 0.86)); }
.blog-hero__inner { position: relative; z-index: 2; max-width: var(--maxw-narrow); margin-inline: auto; }
.blog-hero .eyebrow { color: var(--gold-soft); justify-content: center; }
.blog-hero__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.4rem, 1.7rem + 3vw, 3.4rem); color: var(--cream); line-height: 1.1; }
.blog-hero__sub { color: var(--cream-dim); font-size: var(--step-1); margin-top: 0.9rem; max-width: 46ch; margin-inline: auto; }
.blog-empty { text-align: center; max-width: 46ch; margin: 0 auto; }
.blog-empty__mark { width: 34px; height: 34px; color: var(--gold); margin: 0 auto 1.4rem; }
.blog-empty__line { font-family: var(--font-serif); font-size: var(--step-1); color: var(--forest); line-height: 1.5; margin-bottom: 2rem; }

/* Blog index: a dignified list, no cards, no thumbnails */
.blog-list { list-style: none; max-width: 680px; margin-inline: auto; }
.blog-list__item { padding: 1.9rem 0; border-bottom: 1px solid rgba(31, 77, 61, 0.14); }
.blog-list__item:first-child { padding-top: 0; }
.blog-list__item:last-child { border-bottom: 0; }
.blog-list__date { font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bronze); font-weight: 600; margin-bottom: 0.55rem; }
.blog-list__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--step-2); line-height: 1.18; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.blog-list__title a { color: var(--forest); text-decoration: none; }
.blog-list__title a:hover { color: var(--seagreen); text-decoration: underline; text-underline-offset: 3px; }
.blog-list__desc { font-size: var(--step-0); line-height: 1.7; color: var(--slate); max-width: 65ch; }

/* Post template: comfortable measure ~65ch */
.post { max-width: 680px; margin-inline: auto; }
.post__meta { font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bronze); font-weight: 600; margin-bottom: 0.8rem; }
.post__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.01em; color: var(--forest); margin-bottom: 1.4rem; }
.post__body p { font-size: var(--step-0); line-height: 1.8; color: var(--slate); max-width: 65ch; margin-bottom: 1.2rem; }
.post__body h2 { font-family: var(--font-serif); font-weight: 500; font-size: var(--step-2); color: var(--forest); margin: 2rem 0 0.8rem; }
.post__body h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--step-1); color: var(--forest); margin: 1.6rem 0 0.6rem; }
.post__body blockquote { margin: 1.6rem 0; }
/* Numbered method lists inside a post. Same measure and rhythm as body copy. */
.post__list { max-width: 65ch; margin: 0 0 1.2rem; padding-left: 1.4rem; }
.post__list li { font-size: var(--step-0); line-height: 1.8; color: var(--slate); margin-bottom: 0.7rem; padding-left: 0.2rem; }
.post__list li strong { color: var(--forest); font-weight: 600; }
.post__list li::marker { color: var(--bronze); font-weight: 600; }
/* Spoken quote, not scripture: same indent as .scripture without the cite styling */
.post__quote {
  max-width: 65ch; margin: 1.6rem 0; padding-left: 1.1rem;
  border-left: 3px solid var(--gold); color: var(--slate);
  font-size: var(--step-0); line-height: 1.8; font-style: italic;
}
/* Visible gold placeholder (template scaffolding, never a published post) */
.placeholder {
  color: var(--bronze); background: rgba(198, 161, 91, 0.14);
  padding: 0 0.35em; border-radius: 4px; font-style: normal; font-weight: 600;
}
.template-note {
  max-width: 680px; margin: 0 auto 2rem;
  font-size: var(--step--1); line-height: 1.55; color: var(--slate);
  background: rgba(198, 161, 91, 0.09); border: 1px solid rgba(198, 161, 91, 0.32);
  border-radius: 10px; padding: 0.85rem 1.1rem;
}

/* ------------------------------------------------------------
   Inner-page motion: quiet entrance + whisper parallax
   Reuses the .reveal system. Parallax is transform-only, desktop
   only, and off under reduced motion (handled in JS + the global
   reduced-motion reset near the top of this file).
   ------------------------------------------------------------ */
.reveal--rise { }
[data-parallax] { will-change: transform; }
@media (max-width: 1023px) { [data-parallax] { transform: none !important; } }

/* Alternate soft band tint for rhythm without leaving cream */
.band--sand { background: linear-gradient(180deg, var(--cream), #f3ead6); }
.band--sand-top { background: linear-gradient(180deg, #f3ead6, var(--cream)); }

/* ------------------------------------------------------------
   Responsive tuning for inner pages
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .footer__nav { gap: 0 1rem; }
  .walk__step { padding-left: 1.8rem; }
  .versecard__quote { max-width: 100%; }
}