/* ============================================================
   EmThera — shared design system
   Deep sage/forest greens. Every text/background pairing here is
   checked against WCAG contrast minimums (4.5:1 for body text, 3:1+
   for large/bold UI text) - see the comment on each token for its
   verified contrast partners. Depth comes from soft shadows and
   gradient light, not shapes.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --gold: #C9A227;         /* milestone badge icons — formal metallic accent, 7.2:1 vs --bg */
  --bg: #111D10;           /* page background — deep forest green. 13.9:1 vs --pale, 15.4:1 vs --tan */
  --bg-alt: #111D10;       /* alternating full-section background between --bg blocks - now matched to --bg for a uniform page, per request */
  --bg-raised: #182617;    /* cards/panels/footer — one step lighter than bg. 12.65:1 vs --pale, 13.99:1 vs --tan */
  --pale: #EBE5DF;         /* EmThera wordmark + underline; headings; stat numbers */
  --tan: #EDF3E8;          /* body text */
  --label: #EDF3E8;        /* eyebrows, links, quote marks, focus ring — legible on every surface */
  --accent: #EDF3E8;       /* Embedded Therapeutics subline — same as body text so it stays legible in low light/sun glare */
  --rust: #748375;         /* button fills — paired with --bg (dark) text on top, 4.35:1 */
  --circle-2: #EBE5DF;     /* badges, avatar, button-hover fill — paired with --bg (dark) text/icons on top, 13.9:1 */
  --gloss: linear-gradient(180deg, rgba(235, 229, 223, 0.10), transparent 55%);
  --line: rgba(237, 243, 232, 0.28);
  --shadow-sm: 0 2px 10px rgba(4, 8, 4, 0.45), inset 0 1px 0 rgba(235, 229, 223, 0.08);
  --shadow-md: 0 14px 34px rgba(4, 8, 4, 0.5), inset 0 1px 0 rgba(235, 229, 223, 0.1);
  --shadow-lg: 0 30px 70px rgba(4, 8, 4, 0.58);
  --radius: 20px;
  --radius-lg: 32px;
  --maxw: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--tan);
  background: var(--bg);
  line-height: 1.65;
  font-size: 18px;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 0.45em; letter-spacing: -0.01em; font-weight: 800; color: var(--pale); }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--label); outline-offset: 3px; border-radius: 6px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; position: relative; }
.section--tight { padding: 56px 0; }
.center { text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  background: rgba(237, 243, 232, 0.14);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.lead { font-size: 1.2rem; color: var(--tan); max-width: 58ch; }
.lead.center { margin-left: auto; margin-right: auto; }

h1 { font-size: clamp(2.4rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.3rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
  will-change: transform;
}
.btn--primary { background-color: var(--rust); background-image: var(--gloss); color: var(--bg); box-shadow: 0 10px 24px rgba(4, 8, 4, 0.4); }
.btn--primary:hover { background-color: var(--circle-2); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(4, 8, 4, 0.48); }
.btn--dark { background-color: var(--circle-2); background-image: var(--gloss); color: var(--bg); box-shadow: 0 10px 24px rgba(4, 8, 4, 0.4); }
.btn--dark:hover { background-color: var(--rust); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(4, 8, 4, 0.48); }
.btn--ghost { background-color: var(--bg-raised); background-image: var(--gloss); color: var(--pale); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.btn--ghost:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn--light { background: rgba(235, 229, 223, 0.14); color: var(--pale); }
.btn--light:hover { background: rgba(235, 229, 223, 0.22); transform: translateY(-3px); }
.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(43, 60, 40, 0.94);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.nav.is-stuck { border-color: var(--line); box-shadow: var(--shadow-sm); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 104px; }
.brand { display: inline-block; }
/* Give the header wordmark the same presence as the intro page's - the
   scaleX width-matching JS re-measures at whatever size is set here, so
   this is safe to change independently of other .brand instances. */
.nav .brand__word { font-size: 3.2rem; }
.nav .brand__sub { font-size: 1.05rem; }
.brand__word {
  display: block; font-family: var(--serif); font-weight: 800; font-size: 2.7rem; letter-spacing: -0.01em;
  color: var(--pale); border-bottom: 2px solid var(--pale); line-height: 0.92;
  white-space: nowrap; padding-bottom: 0;
}
.brand__sub {
  display: block; margin-top: 2px; font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  line-height: 1.2; white-space: nowrap; transform-origin: left center;
}
.nav__links { display: flex; align-items: center; gap: 10px; }
.nav__links a:not(.btn) {
  font-weight: 600; color: var(--tan); transition: color 0.2s, background 0.2s;
  padding: 8px 14px; border-radius: 999px; position: relative;
}
.nav__links a:not(.btn):hover { color: var(--pale); }
.nav__links a[aria-current="page"] { color: var(--pale); font-weight: 700; background: rgba(237, 243, 232, 0.16); }
.nav__cta { padding: 11px 22px; font-size: 0.92rem; margin-left: 8px; }
.nav__toggle { display: none; background: none; width: 44px; height: 44px; border-radius: 12px; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--pale); margin: 5px auto; border-radius: 2px; transition: 0.3s; }

@media (max-width: 860px) {
  .nav__links {
    position: fixed; inset: 104px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--bg); padding: 18px 24px 26px; border-bottom: 1px solid var(--line);
    transform: translateY(-140%); transition: transform 0.4s var(--ease); box-shadow: var(--shadow-md);
  }
  .nav__links.is-open { transform: translateY(0); }
  .nav__links a:not(.btn) { padding: 12px 14px; width: 100%; font-size: 1.1rem; }
  .nav__cta { width: 100%; justify-content: center; margin-top: 8px; margin-left: 0; }
  .nav__toggle { display: block; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero warmth (soft light, not shapes) ---------- */
.hero {
  position: relative; overflow: hidden; padding: 76px 0 88px;
}
.hero__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.hero__inner.center { margin: 0 auto; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 30px; }
.hero__tagline { font-weight: 800; font-size: 1.1rem; color: var(--pale); margin: -10px 0 28px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__cta.center { justify-content: center; }

/* ---------- Spotlight intro (home page only) ---------- */
.hero--spotlight {
  padding: 120px 0 96px;
}
.hero--spotlight .hero__cta { margin-top: 12px; }

/* ---------- Intro (splash) page ---------- */
.intro { min-height: 100vh; display: flex; align-items: center; padding: 40px 0; }
.intro__inner { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.intro__brand { margin: 0; }
.intro__headline {
  /* Reserved height is computed from this same size var the h1 uses, in calc() -
     NOT em on this wrapper, since em here would resolve against the wrapper's own
     (small, inherited) font-size rather than the headline's actual large one. That
     mismatch is what let the buttons drift as the typewriter filled in before. */
  --hl-size: clamp(2.8rem, 8vw, 5.6rem);
  min-height: calc(2.3 * var(--hl-size));
  width: 100%; display: flex; align-items: center; justify-content: center;
}
.intro__headline h1 {
  /* No text-wrap:balance here on purpose: balance recomputes the best line-break
     point on every content change, and the typewriter changes the content every
     ~100ms - that combination is what caused words to jump between lines while
     typing. Normal wrapping only moves a word to the next line once, and it
     stays there, which is what a stable typewriter effect needs. */
  font-size: var(--hl-size); text-align: center;
  color: var(--pale); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin: 0;
}
.typewriter__cursor {
  display: inline-block; width: 2px; height: 0.85em; margin-left: 4px; vertical-align: -0.1em;
  background: var(--pale); animation: blink 0.9s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .typewriter__cursor { animation: none; } }

/* ---------- Stat band (rolling numbers) ---------- */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.stat { text-align: center; padding: 8px; }
.stat__num { font-size: clamp(2.3rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--pale); }
.stat__label { color: var(--tan); font-size: 0.98rem; font-weight: 500; margin-top: 6px; max-width: 26ch; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .stats__grid { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Cards — outlined, not color-blocked ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background-color: var(--bg-raised); background-image: var(--gloss); border-radius: var(--radius-lg); padding: 32px 28px;
  box-shadow: var(--shadow-sm); border: 1.5px solid var(--line);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--label); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--tan); margin: 0; font-size: 0.98rem; }
.card ul { margin: 10px 0 0; padding-left: 18px; color: var(--tan); font-size: 0.98rem; }
.card ul li { margin-bottom: 4px; }
.card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; color: var(--label); }
.card__link .btn__arrow { transition: transform 0.25s var(--ease); }
.card:hover .card__link .btn__arrow { transform: translateX(4px); }
@media (max-width: 860px) { .cards, .cards--2 { grid-template-columns: 1fr; } }

/* ---------- Quote / Stories cards ---------- */
.stories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.quote { margin: 0; background-color: var(--bg-raised); background-image: var(--gloss); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); border: 1.5px solid var(--line); position: relative; }
.quote__mark { font-family: var(--serif); font-size: 3.4rem; line-height: 0.4; color: var(--label); font-weight: 800; }
.quote blockquote { font-size: 1.18rem; font-weight: 600; line-height: 1.45; margin: 12px 0 14px; color: var(--pale); }
.quote cite { color: var(--tan); font-style: normal; font-weight: 600; font-size: 0.9rem; }
/* Centers a lone card left over in the final row of a 2-column grid,
   at the same width as its siblings instead of stretching or hugging left. */
.quote--solo { grid-column: 1 / -1; max-width: calc((100% - 20px) / 2); margin: 0 auto; }
@media (max-width: 720px) {
  .stories { grid-template-columns: 1fr; }
  .quote--solo { grid-column: auto; max-width: none; margin: 0; }
  /* Stacked in a single column, cards with shorter quotes would otherwise look
     noticeably smaller than the longest one. Reserve enough height for the
     longest quote's line count so every bubble reads as the same size. */
  .quote blockquote { min-height: 5.2rem; }
}

/* ---------- Split layout ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Tiles (differentiation / explainer) ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
.tiles--tight { gap: 12px; }
.tile { background-color: var(--bg-raised); background-image: var(--gloss); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.tile--compact { padding: 18px; text-align: center; }
.tile__icon { font-size: 1.8rem; margin-bottom: 10px; }
.tile__icon img { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; display: block; margin: 0 auto; }
.tile h3 { font-size: 1.1rem; margin-bottom: 6px; }
.tile--compact h3 { margin-bottom: 0; font-size: 1rem; }
.tile p { margin: 0; color: var(--tan); font-size: 0.98rem; }
.tile ul { margin: 0; padding-left: 20px; }
.tile ul li { color: var(--tan); font-size: 1rem; margin-bottom: 12px; line-height: 1.55; }
.tile ul li:last-child { margin-bottom: 0; }
@media (max-width: 720px) { .tiles, .tiles--3 { grid-template-columns: 1fr; } }

/* ---------- Trait pills (hydrogel properties) ---------- */
.traits { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.trait-pill { background: var(--bg-raised); border: 1px solid var(--line); color: var(--tan); padding: 9px 16px; border-radius: 999px; font-size: 0.92rem; font-weight: 600; }
.trait-pill strong { color: var(--pale); font-weight: 700; }

/* ---------- Evidence / milestone list ---------- */
.evidence { display: grid; gap: 14px; max-width: 780px; margin: 0 auto; }
.ev {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  background-color: var(--bg-raised); background-image: var(--gloss); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.ev__badge { width: 40px; height: 40px; border-radius: 12px; background: var(--bg); border: 1px solid rgba(201, 162, 39, 0.35); display: grid; place-items: center; flex: none; color: var(--gold); font-size: 1.3rem; }
.ev__badge svg { width: 22px; height: 22px; }
.ev p { margin: 0; color: var(--tan); font-size: 0.98rem; }

/* ---------- Callout band ---------- */
.band {
  background-color: var(--bg-raised);
  background-image: var(--gloss), linear-gradient(135deg, var(--bg-raised), var(--bg));
  color: var(--pale); border-radius: var(--radius-lg); padding: 56px; text-align: center;
  border: 1.5px solid var(--line); box-shadow: var(--shadow-md);
}
.band h2 { color: var(--pale); }
.band p { color: var(--label); max-width: 50ch; margin: 0 auto 26px; font-size: 1.1rem; }

/* ---------- Bio ---------- */
.bio { display: flex; align-items: center; gap: 20px; }
.bio__avatar {
  width: 74px; height: 74px; border-radius: 50%; flex: none;
  background: var(--circle-2); color: var(--bg);
  display: grid; place-items: center; font-family: var(--serif); font-weight: 800; font-size: 1.3rem;
}
.bio h3 { margin-bottom: 2px; }
.bio p { margin: 0; color: var(--tan); font-size: 0.95rem; }
/* Split at a deliberate point (after the MBA credential) so both lines
   run a similar length instead of one full line and one nearly-empty one. */
.bio__line { display: block; }
@media (max-width: 640px) {
  /* Give the credential line the full card width on phones instead of
     squeezing it beside the avatar, where it was wrapping to 4 lines. */
  .bio { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Prototype figure ---------- */
.proto-figure { max-width: 300px; margin: 0 auto; text-align: center; }
.proto-figure__frame { background-color: var(--bg-raised); background-image: var(--gloss); border: 1.5px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.proto-figure figcaption { color: var(--tan); font-size: 0.85rem; margin-top: 14px; }

/* ---------- Survey embed ---------- */
/* A deep flex-fill chain (main > section > wrap > narrow > embed > iframe)
   was tried here to make the embed exactly fill the space below the nav/
   hero, but percentage/flex heights resolving through that many nested
   levels is exactly the kind of thing WebKit (Safari/iOS) handles
   inconsistently - it made Tally's own internal layout render with a large
   blank gap partway down the form. A single calc() height directly on the
   embed is far more reliable across browsers, at the cost of not fitting
   pixel-perfectly on every viewport. min-height keeps Tally's own layout
   from getting so short it misbehaves. */
.survey-embed {
  background-color: var(--bg-raised); background-image: var(--gloss); border-radius: var(--radius-lg); border: 1.5px solid var(--line);
  box-shadow: var(--shadow-md); overflow: hidden; min-height: 480px;
  height: calc(100vh - 400px);
}
.survey-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.survey-embed__placeholder {
  padding: 60px 40px; text-align: center; color: var(--tan);
}
.survey-note { text-align: center; color: var(--tan); font-size: 0.9rem; margin-top: 16px; }
.survey-trust { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 22px; }
.survey-trust span {
  display: inline-flex; align-items: center; gap: 6px; background: var(--bg-raised); border: 1px solid var(--line);
  color: var(--tan); font-size: 0.85rem; font-weight: 600; padding: 8px 14px; border-radius: 999px;
}

/* ---------- Confirmation (thank-you) ---------- */
.confirm { text-align: center; max-width: 520px; margin: 0 auto; }
.confirm__check {
  width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--circle-2); display: grid; place-items: center; color: var(--bg);
}
.confirm__links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Prose (privacy / long-form) ---------- */
.prose { max-width: 700px; margin: 0 auto; }
.prose h2 { margin-top: 1.6em; }
.prose p, .prose li { color: var(--tan); font-size: 1.02rem; }
.prose a { text-decoration: underline; color: var(--pale); }

/* ---------- Footer ---------- */
.footer { background: var(--bg-raised); border-top: 1px solid var(--line); padding: 52px 0 30px; }
/* Match the header wordmark size so the footer logo isn't a visibly smaller stand-in. */
.footer .brand__word { font-size: 3.2rem; }
.footer .brand__sub { font-size: 1.05rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 30px; }
.footer__grid p { color: var(--tan); font-size: 0.95rem; max-width: 34ch; }
.footer__mission {
  display: inline-block; color: var(--pale); background: rgba(237, 243, 232, 0.14); border: 1px solid var(--line);
  padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 0.9rem;
}
.footer h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tan); margin-bottom: 14px; }
.footer__links { display: grid; gap: 10px; }
.footer__links a { color: var(--pale); font-weight: 500; }
.footer__links a:hover { color: var(--label); }
.disclaimer { border-top: 1px solid var(--line); padding-top: 20px; color: var(--tan); font-size: 0.85rem; line-height: 1.6; }
.disclaimer strong { color: var(--pale); }
.footer__legal { margin-top: 12px; font-size: 0.82rem; color: var(--tan); }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- Utility ---------- */
.mb-lg { margin-bottom: 44px; }
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }