/* ════════════════════════════════════════════════════════════════════════
   MYNDE - landing (problem→outcome rewrite)
   Dark only · monochrome canvas · burnt sienna as accent only
   Three sections: Hero · Cost · Promise
   Editorial typography, restraint over density, no fake stats.

   DESIGN TOKENS
   ─────────────────────────────────────────────────────────────────────
   Spacing scale (px):  4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 80 · 120 · 160 · 200
   Radius scale (px):   999 (pill) · 18 (lg) · 14 (md) · 8 (sm)
   Type families:       --font-ui · --font-editorial · --font-mono
   Color tokens:        --surface · --ink (4 levels) · --line (2 levels)
                        --accent (4 variants)
   Easing:              --ease-out (general)  · --ease-out-2 (deep entrances)

   MOTION DURATION TIERS
   ─────────────────────────────────────────────────────────────────────
   micro     200ms   hover state transitions
   short     400ms   minor state changes
   medium    800ms   reveals, taps
   long      1.2s    section reveals
   cinematic 2s+     hero entrances, large state shifts

   All animations must respect prefers-reduced-motion: reduce.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --surface:      #0A0A0A;
  --surface-2:    #0E0E0E;
  --raised:       rgba(255,255,255,0.025);
  --raised-2:     rgba(255,255,255,0.045);
  --ink:          #FAFAFA;
  --ink-2:        rgba(250,250,250,0.72);   /* ~7:1 on --surface */
  --ink-3:        rgba(250,250,250,0.62);   /* ~5.3:1 - AA body even at small sizes */
  --ink-4:        rgba(250,250,250,0.46);   /* ~4.4:1 - non-essential meta only */
  --line:         rgba(255,255,255,0.06);
  --line-2:       rgba(255,255,255,0.12);

  /* Surfaces above --surface (used to be raw rgba sprinkled in CSS) */
  --raised:       rgba(255,255,255,0.04);
  --raised-2:     rgba(255,255,255,0.06);

  /* Radii (canonical scale) */
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    18px;
  --radius-pill:  999px;

  --accent:       #E0735A;
  --accent-deep:  #C8553D;
  --accent-soft:  rgba(224,115,90,0.14);
  --accent-glow:  rgba(224,115,90,0.42);

  --font-ui:        'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-editorial: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --ease-out:    cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-2:  cubic-bezier(0.16, 1, 0.30, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
  font-family: var(--font-ui);
  background: var(--surface);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}
*::selection { background: var(--accent); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
img, svg { display: block; }

/* The HTML hidden attribute must always win over any author display */
[hidden] { display: none !important; }

/* ── Global focus-visible - WCAG 2.4.7 ───────────────────────────── */
:where(a, button, [role="button"], input, summary, [tabindex]):focus { outline: none; }
:where(a, button, [role="button"], input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset 0.1s ease-out;
}
.nav-cta:focus-visible,
.hero-form-btn:focus-visible { outline-offset: 4px; border-radius: 999px; }
.hero-form-input:focus-visible { outline: none; }
/* Skip-to-content link (visible only when focused) */
.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  border-radius: 8px;
  text-transform: uppercase;
  transition: top 0.2s ease-out;
}
.skip-link:focus { top: 12px; }

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

/* ════════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  /* Layered fallback - if video fails, this radial alone reads like a hero */
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(224,115,90,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 85% 80%, rgba(200,85,61,0.12) 0%, transparent 60%),
    var(--surface);
  display: flex;
  flex-direction: column;
}

/* Looping video background - the signature */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: video-in 2s cubic-bezier(0.16, 1, 0.30, 1) 0.2s forwards;
}
@keyframes video-in {
  to { opacity: 0.78; }
}

/* Aurora drifts over the video - blends with screen for richer color */
.hero-atmosphere {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0.65;
}
.atmos-blob {
  position: absolute;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform;
}
.atmos-blob-1 {
  top: -25%; left: -15%;
  background: radial-gradient(circle at 50% 50%, rgba(224,115,90,0.34), rgba(224,115,90,0) 60%);
  animation: drift-1 38s ease-in-out infinite;
}
.atmos-blob-2 {
  top: 5%; right: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(200,85,61,0.20), rgba(200,85,61,0) 65%);
  animation: drift-2 46s ease-in-out infinite;
}
@keyframes drift-1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(6vw, 4vh) scale(1.08); }
}
@keyframes drift-2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-5vw, 6vh) scale(1.05); }
}

/* Tint veil - keeps the text readable over the video without killing it */
.hero-veil {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.42) 55%, rgba(10,10,10,0.58) 100%);
}

/* Vignette - smooth gradient grounding, no visible horizon band */
.hero-vignette {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10,10,10,0.35) 0%,
    rgba(10,10,10,0.10) 18%,
    rgba(10,10,10,0.08) 50%,
    rgba(10,10,10,0.40) 80%,
    var(--surface) 100%);
}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: relative;
  z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 32px;
}
@media (min-width: 1100px) { .nav { padding: 32px 56px; } }

.nav-logo {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--ink);
}
.nav-logo-mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 13px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.nav-logo-text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.30em;
  font-weight: 500;
  color: var(--ink-2);
}

/* Nav CTA - outlined ghost variant. Hero CTA owns primacy. */
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: transform 0.4s var(--ease-out), color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  will-change: transform;
}
.nav-cta:hover {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ── Hero stage (centered, single column) ───────────────────────────── */
.hero-stage {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
@media (min-width: 1100px) {
  .hero-stage { padding: 20px 56px 80px; }
}

.hero-copy {
  width: 100%;
  max-width: 920px;
  text-align: center;
}

/* Cursor spotlight - soft accent radial that follows mouse */
.hero-spotlight {
  position: absolute; inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease-out;
  background: radial-gradient(circle 380px at var(--mx, 50%) var(--my, 40%),
    rgba(224,115,90,0.16) 0%,
    rgba(224,115,90,0.06) 35%,
    transparent 70%);
  mix-blend-mode: screen;
  animation: spotlight-in 2s ease-out 1s forwards;
}
@keyframes spotlight-in {
  to { opacity: 1; }
}
@media (pointer: coarse) { .hero-spotlight { display: none; } }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 32px;
}
.hero-eyebrow-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: dot-pulse 3.2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 0.60; }
  50%      { opacity: 1.00; }
}

.hero-h1 {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.038em;
  margin: 0 0 24px;
  color: var(--ink);
  text-wrap: balance;
  text-align: center;
}
.hero-h1 .word-row { display: block; }
.hero-h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28%);
  filter: blur(6px);
  animation: word-in 0.7s var(--ease-out-2) forwards;
  animation-delay: var(--d, 0s);
}
.hero-h1 .word + .word { margin-left: 0.22em; }
@keyframes word-in {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* The "autopilot" word - subtle accent glow lands with it */
.hero-h1 .word--accent {
  position: relative;
}
.hero-h1 .word--accent::after {
  content: '';
  position: absolute;
  left: 5%; right: 5%; bottom: 12%;
  height: 22%;
  background: var(--accent);
  filter: blur(28px);
  opacity: 0;
  z-index: -1;
  animation: accent-glow-land 1.6s ease-out forwards;
  animation-delay: calc(var(--d, 0s) + 0.5s);
}
@keyframes accent-glow-land {
  0%   { opacity: 0; }
  40%  { opacity: 0.55; }
  100% { opacity: 0.18; }
}

/* Idle glitch - fires once 2.5s after load via JS class toggle */
.hero-h1 .word.is-glitching {
  animation: word-glitch 0.32s steps(4, end);
}
@keyframes word-glitch {
  0%   { transform: translate(0, 0);    opacity: 1; filter: blur(0); }
  20%  { transform: translate(-2px, 1px); opacity: 0.4; filter: blur(1px); color: var(--accent); }
  40%  { transform: translate(2px, -1px); opacity: 0.9; filter: blur(0); }
  60%  { transform: translate(-1px, 0); opacity: 0.5; filter: blur(2px); color: var(--ink); }
  100% { transform: translate(0, 0);    opacity: 1; filter: blur(0); color: var(--ink); }
}

.hero-h1-italic {
  display: block;
  color: var(--ink-3);
  font-style: italic;
}
.hero-h1-italic em { font-style: italic; display: inline-block; }
.hero-h1-italic .word + .word { margin-left: 0.22em; }

.hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 520px;
  margin: 0 auto 36px;
  text-wrap: pretty;
}
@media (max-width: 719px) { .hero-sub { font-size: 16px; margin-bottom: 32px; } }

/* ── Hero form - two independent rounded elements, breathing room ─── */
.hero-form {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.hero-form-input {
  flex: 1;
  min-width: 0;
  background: var(--raised);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  outline: none;
  padding: 14px 22px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.4s ease;
}
.hero-form-input::placeholder { color: var(--ink-3); }
.hero-form-input:focus {
  border-color: var(--accent);
  background: var(--raised-2);
  box-shadow: 0 0 0 3px rgba(224,115,90,0.18);
}
.hero-form-input[aria-invalid="true"] {
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px rgba(200,85,61,0.18);
}

.hero-form-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 0.35s var(--ease-out), background 0.2s ease, box-shadow 0.4s ease;
  will-change: transform;
  /* Neutral depth — a white button with an orange glow read as a render
     artifact. Soft black drop now, with a faint accent halo on hover. */
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.6);
}
.hero-form-btn:hover {
  background: #ffffff;
  box-shadow:
    0 14px 32px -12px rgba(0,0,0,0.7),
    0 0 0 6px rgba(224,115,90,0.10);
}
.hero-form-btn:disabled { opacity: 0.7; cursor: wait; }

@media (max-width: 540px) {
  .hero-form { flex-direction: column; gap: 12px; }
  .hero-form-input { padding: 16px 20px; border-radius: var(--radius-md); }
  .hero-form-btn   { justify-content: center; padding: 16px 24px; border-radius: var(--radius-md); }
}

/* Inline success replaces form on submit */
.hero-form-success {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 auto;
  padding: 12px 22px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
}
.hero-form-success-ic {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: var(--accent);
  color: var(--surface);
  border-radius: 50%;
  flex: 0 0 20px;
}

/* Meta under form - live count + closed-beta line */
.hero-form-meta {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
}
.hero-count-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: count-pulse 2.6s ease-in-out infinite;
}
@keyframes count-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
#hero-count-num { color: var(--ink); font-weight: 500; }
.hero-form-meta-fine { color: var(--ink-4); }

/* Privacy promise (ADD #5) — second meta line below "one email at
   launch." Treated as its own quiet beat (small top margin, italic em
   in editorial serif) so it doesn't bury into the privacy reassurance
   above. Sits inside hero-form-meta which is already mono uppercase;
   the italic em is the one editorial moment that breaks tracking. */
.hero-form-meta-privacy {
  margin-top: 4px;
  color: var(--ink-4);
}
.hero-form-meta-privacy em {
  font-family: var(--font-editorial);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}


/* ════════════════════════════════════════════════════════════════════════
   SECTIONS (cost · promise)
   ════════════════════════════════════════════════════════════════════════ */
.cost, .promise {
  position: relative;
  background: var(--surface);
  padding: 96px 32px 120px;
}
@media (max-width: 719px) {
  .cost, .promise { padding: 72px 24px 88px; }
}
.cost { overflow: hidden; }   /* proof constellation is absolutely positioned */
.cost .section-rail,
.cost .proof-hero { position: relative; z-index: 1; }

.section-rail {
  max-width: 720px;
  margin: 0 auto 80px;
  text-align: center;
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; justify-content: center; align-items: center; gap: 14px;
  margin-bottom: 24px;
}
.section-eyebrow::before, .section-eyebrow::after {
  content: '';
  width: 32px; height: 0.5px;
  background: var(--line-2);
}
.section-title {
  font-family: var(--font-editorial);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
}
.section-title em {
  font-style: italic;
  color: var(--ink-4);
}


/* The BIG single stat - dominant, cinematic */
.proof-hero {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 56px;
  text-align: center;
}
.proof-hero::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0.5px;
  background: linear-gradient(90deg, transparent 0%, var(--line-2) 50%, transparent 100%);
}
.proof-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.5px;
  background: linear-gradient(90deg, transparent 0%, var(--line-2) 50%, transparent 100%);
}
.proof-hero-num {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(112px, 16vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.052em;
  color: var(--accent);
  margin-bottom: 24px;
  text-shadow:
    0 0 50px rgba(224,115,90,0.35),
    0 0 120px rgba(224,115,90,0.14);
  transition: text-shadow 1s ease-out;
}
.proof-hero-unit {
  font-size: 0.42em;        /* ~70px when number is 168px */
  line-height: 1;
  margin-top: 0.32em;
  margin-left: 0.04em;
  color: var(--accent);
  opacity: 0.78;
  font-style: italic;
}
.proof-hero-num.is-counted {
  color: var(--accent);
  text-shadow:
    0 0 80px rgba(224,115,90,0.55),
    0 0 140px rgba(0,0,0,0.65);
  animation: num-land 0.6s ease-out;
}
@keyframes num-land {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════════════════
   BRAIN CONSTELLATION
   ════════════════════════════════════════════════════════════════════════ */
.constellation {
  position: absolute;
  pointer-events: none;
}
.constellation-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Hero: ambient behind headline, low opacity, fills the hero */
.constellation--hero {
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: constellation-fade-in 3s var(--ease-out-2) 0.4s forwards;
  mix-blend-mode: screen;
}
.constellation--hero .constellation-svg {
  width: 94%;
  height: 88%;
  opacity: 0.60;
}
@media (max-width: 719px) {
  .constellation--hero .constellation-svg { opacity: 0.42; }
}
@keyframes constellation-fade-in {
  to { opacity: 1; }
}

/* Proof: same constellation with 32 dormant dots — ambient resonance
   with the headline stat. Behind the number, drifts to the edges. */
.constellation--proof {
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: constellation-fade-in 2.4s var(--ease-out-2) 0.3s forwards;
  mix-blend-mode: screen;
  pointer-events: none;
}
.constellation--proof .constellation-svg {
  width: 88%;
  height: 88%;
  opacity: 0.38;
}
@media (max-width: 719px) {
  .constellation--proof .constellation-svg { opacity: 0.26; }
}


/* Neural pathways */
.c-line {
  stroke: rgba(224,115,90,0.18);
  stroke-width: 0.6;
  fill: none;
}
.c-line-half    { stroke: rgba(224,115,90,0.08); }
.c-line-dormant { stroke: rgba(255,255,255,0.04); }

/* Active dots - pulse softly */
.c-dot {
  fill: #FFD6CC;
  opacity: var(--op, 0.65);
  transform-origin: center;
  transform-box: fill-box;
  animation: dot-pulse-soft 4s ease-in-out infinite;
}
@keyframes dot-pulse-soft {
  0%, 100% { opacity: calc(var(--op, 0.65) * 0.55); transform: scale(0.85); }
  50%      { opacity: var(--op, 0.65);              transform: scale(1.20); }
}

/* Halo around active dots - slow breathing */
.c-halo {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: halo-pulse 5s ease-in-out infinite;
}
@keyframes halo-pulse {
  0%, 100% { opacity: 0.06; transform: scale(0.7); }
  50%      { opacity: 0.32; transform: scale(1.1); }
}

/* Dormant dots - dim, no pulse, no halo */
.c-dot-dormant {
  fill: rgba(255,255,255,0.10);
  opacity: 0.4;
  animation: none;
}

/* Reveal sequence for the proof constellation:
   start with all dots bright, then dormant ones fade out after 0.8s
   (the moment the "32" finishes counting up)                       */
@media (prefers-reduced-motion: reduce) {
  .c-dot, .c-halo, .constellation--hero { animation: none; opacity: 1; }
  .constellation--hero { opacity: 0.6; }
}
.proof-hero-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 480px;
  margin: 0 auto 26px;
  text-wrap: pretty;
}
.proof-hero-body em {
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--ink);
}
.proof-hero-source {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.proof-hero-source a {
  color: inherit;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.proof-hero-source a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}


/* ════════════════════════════════════════════════════════════════════════
   FOOTER - editorial brand line + minimal links
   ════════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 48px 32px 36px;
  display: flex; flex-direction: column;
  gap: 28px;
}
@media (min-width: 720px) { .footer { padding: 56px 56px 40px; } }
@media (max-width: 540px) { .footer { padding: 40px 24px 32px; gap: 24px; } }

.footer-tag {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: -0.012em;
  color: var(--ink-3);
}

.footer-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 540px) {
  .footer-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}
.footer-mark {
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.22em;
}
.footer-links { display: inline-flex; align-items: center; gap: 12px; }
.footer-links a { transition: color 0.2s ease; }
.footer-links a:hover { color: var(--accent); }
.footer-sep { color: var(--ink-4); }

/* ════════════════════════════════════════════════════════════════════════
   HERO SCROLL CUE — subtle "there's more below" affordance.
   Tucked into the bottom of the 100vh hero so users don't think
   the page ends here. Fades in late so it doesn't compete with copy.
   ════════════════════════════════════════════════════════════════════════ */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 6;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0;
  animation: scroll-cue-in 1.6s var(--ease-out-2) 1.8s forwards;
  transition: color 0.2s ease, transform 0.3s var(--ease-out);
}
.hero-scroll-cue:hover { color: var(--ink); }
.hero-scroll-cue svg {
  animation: scroll-cue-bob 2.6s ease-in-out infinite;
}
@keyframes scroll-cue-in {
  to { opacity: 1; }
}
@keyframes scroll-cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(3px); opacity: 1; }
}
@media (max-width: 540px) {
  .hero-scroll-cue { bottom: 18px; font-size: 9.5px; letter-spacing: 0.24em; }
  .hero-scroll-cue-label { display: none; }   /* chevron alone on small screens */
}

/* ════════════════════════════════════════════════════════════════════════
   HERO FORM ERROR — inline, AT-readable.
   Single line under the form when validation fails; cleared on input.
   ════════════════════════════════════════════════════════════════════════ */
.hero-form-error {
  margin: 12px auto 0;
  max-width: 480px;
  padding: 0 6px;
  text-align: left;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════
   PROMISE SECTION — "what is MYNDE" + tail CTA.
   Three editorial rows, numbered, with a single tail CTA that loops
   the user back to the hero form. Prevents the page ending on a stat.
   ════════════════════════════════════════════════════════════════════════ */
.promise-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  list-style: none;
}
.promise-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: baseline;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.promise-item:last-child { border-bottom: 0; padding-bottom: 0; }
.promise-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  padding-top: 6px;
}
.promise-title {
  font-family: var(--font-editorial);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}
.promise-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
}
@media (max-width: 540px) {
  .promise-list { gap: 24px; }
  .promise-item { grid-template-columns: 40px 1fr; gap: 16px; padding-bottom: 24px; }
  .promise-num  { font-size: 10px; padding-top: 4px; }
  .promise-desc { font-size: 15px; }
}

.promise-cta {
  margin: 64px auto 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.promise-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform 0.35s var(--ease-out), background 0.2s ease, box-shadow 0.4s ease;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.6);
}
.promise-cta-btn:hover {
  background: #ffffff;
  box-shadow:
    0 14px 32px -12px rgba(0,0,0,0.7),
    0 0 0 6px rgba(224,115,90,0.10);
}
.promise-cta-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ════════════════════════════════════════════════════════════════════════
   Reveal-on-scroll
   ════════════════════════════════════════════════════════════════════════ */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out-2), transform 0.8s var(--ease-out-2);
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-up[data-reveal-delay="0.10"] { transition-delay: 0.10s; }
.reveal-up[data-reveal-delay="0.12"] { transition-delay: 0.12s; }
.reveal-up[data-reveal-delay="0.18"] { transition-delay: 0.18s; }
.reveal-up[data-reveal-delay="0.24"] { transition-delay: 0.24s; }
.reveal-up[data-reveal-delay="0.36"] { transition-delay: 0.36s; }
.reveal-up[data-reveal-delay="0.38"] { transition-delay: 0.38s; }
.reveal-up[data-reveal-delay="0.50"] { transition-delay: 0.50s; }
.reveal-up[data-reveal-delay="0.62"] { transition-delay: 0.62s; }
.reveal-up[data-reveal-delay="0.80"] { transition-delay: 0.80s; }
.reveal-up[data-reveal-delay="0.90"] { transition-delay: 0.90s; }
.reveal-up[data-reveal-delay="1.05"] { transition-delay: 1.05s; }
.reveal-up[data-reveal-delay="1.10"] { transition-delay: 1.10s; }
.reveal-up[data-reveal-delay="1.20"] { transition-delay: 1.20s; }
.reveal-up[data-reveal-delay="1.25"] { transition-delay: 1.25s; }

/* ════════════════════════════════════════════════════════════════════════
   Reduced motion
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  html { scroll-behavior: auto; }
  .hero-h1 .word { opacity: 1; transform: none; filter: none; }
  .hero-h1 .word::after { display: none; }
  .reveal-up { opacity: 1; transform: none; }
  .atmos-blob, .hero-eyebrow-dot, .hero-count-dot,
  .c-dot, .c-halo,
  .hero-spotlight, .hero-scroll-cue, .hero-scroll-cue svg { animation: none !important; }
  .hero-spotlight { opacity: 0; }
  .hero-scroll-cue { opacity: 1; }
  .constellation--hero { opacity: 0.6; }
  .constellation--proof { opacity: 1; }
  .hero-video { animation: none; opacity: 0.55; }
}