/* ─────────────────────────────────────────────────────────
     Ēnel Health — palette + type, matched to the platform demo
     ───────────────────────────────────────────────────────── */
  :root{
    --bg-deep:        #04070d;
    --bg-navy:        #070c18;
    --bg-navy-2:      #0a1224;
    /* Cyan-blue palette matching the layered teal-water-wave reference.
       Replaces the original green-leaning teals. Values are drawn from
       the same gradient that paints the wave banner illustration. */
    --teal:           #2D9AAD;
    --teal-bright:    #3DAEC4;
    --teal-glow:      #5BC4D6;
    --mint:           #86D4E0;
    --mint-soft:      #B0E2EC;
    --ink:            #e7ecf3;
    --ink-mute:       #a5b0c0;
    --ink-faint:      #6b7689;
    --rule:           rgba(91, 196, 214, .18);
    --gold:           #d4a017;
    --gold-bright:    #fbbf24;
    --gold-glow:      #fde68a;
    --gold-soft:      #fef3c7;
    /* Platform-demo banner palette — used by the bottom "Problem" section
       and the recolored Age-of-Discovery section. Pulled verbatim from the
       wave banners at the top/bottom of slides 4 and 5 of the platform demo. */
    --pd-bg:          #0a0a0a;
    --pd-wave-1:      #040c14;
    --pd-wave-2:      #062535;
    --pd-wave-3:      #0a3a4a;
    --pd-wave-teal-a: rgba(var(--lt-teal-rgb), 0.22);
    --pd-wave-teal-b: rgba(var(--lt-teal-rgb), 0.14);
    --pd-mint:        #5DCAA5;
    --pd-mint-glow:   rgba(93,202,165,0.12);
    --pd-mint-edge:   rgba(93,202,165,0.30);
    --pd-mint-wash:   rgba(93,202,165,0.08);
    --pd-rule:        rgba(255,255,255,0.08);
    --pd-rule-soft:   rgba(255,255,255,0.06);
    --pd-text-mute:   rgba(255,255,255,0.70);
    --pd-text-body:   rgba(255,255,255,0.68);
    --pd-text-faint:  rgba(255,255,255,0.50);
    --pd-text-soft:   rgba(255,255,255,0.60);
    --type-display:   "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
    --type-mono:      ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --max:            min(880px, 92vw);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ background:var(--bg-deep); color:var(--ink); font-family:var(--type-display); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
  body{ min-height:100vh; min-height:100dvh; }
  ::selection{ background:var(--teal); color:#fff; }

  /* ─────────────────────────────────────────────────────────
     COSMIC STAGE — Milky Way + light ray, all CSS
     ───────────────────────────────────────────────────────── */
  .stage{
    position:fixed; inset:0;
    overflow:hidden;
    z-index:0;
    background:
      radial-gradient(ellipse 90% 60% at 50% 110%, rgba(var(--lt-teal-rgb), .22), transparent 65%),
      radial-gradient(ellipse 70% 40% at 50% 105%, rgba(45,212,191,.10), transparent 70%),
      linear-gradient(180deg, #02040a 0%, #04070d 38%, #060b1a 72%, #081328 100%);
  }
  /* Milky-Way band — a soft diagonal arc */
  .stage::before{
    content:"";
    position:absolute; inset:auto -10% -8% -10%;
    height:62%;
    background:
      radial-gradient(ellipse 60% 70% at 50% 100%, rgba(120,160,220,.18) 0%, rgba(120,160,220,.06) 35%, transparent 70%),
      radial-gradient(ellipse 40% 55% at 35% 90%, rgba(180,140,220,.12) 0%, transparent 60%),
      radial-gradient(ellipse 35% 45% at 70% 95%, rgba(140,200,220,.10) 0%, transparent 60%);
    filter:blur(2px);
    transform:rotate(-7deg) translateY(8%);
    opacity:.95;
    pointer-events:none;
  }
  /* Ray of light — the demo's signature beam */
  .stage::after{
    content:"";
    position:absolute;
    left:50%; bottom:-10%;
    width:240px; height:140vh;
    transform:translateX(-50%) rotate(8deg);
    background:linear-gradient(180deg,
      rgba(45,212,191,0) 0%,
      rgba(45,212,191,.05) 20%,
      rgba(153,246,228,.22) 60%,
      rgba(204,251,241,.45) 88%,
      rgba(255,255,255,.55) 100%);
    filter:blur(28px);
    opacity:.85;
    pointer-events:none;
    animation:beam 9s ease-in-out infinite alternate;
  }
  @keyframes beam{
    0%   { opacity:.55; transform:translateX(-50%) rotate(8deg)  scaleY(.96); }
    100% { opacity:.95; transform:translateX(-50%) rotate(10deg) scaleY(1.04); }
  }

  /* Celestial diagonal beam — ground to space, draws once and sits static */
  .celestial{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    opacity:0;
    transition:opacity .6s ease;
  }
  body.reveal-active .celestial{ opacity:1; }

  .celestial .ground{
    opacity:0;
    transition:opacity 1s ease .15s;
  }
  body.reveal-active .celestial .ground{ opacity:1; }

  .celestial .beam-line{
    stroke-dasharray:980;
    stroke-dashoffset:980;
  }
  body.reveal-active .celestial .beam-line{
    animation:draw-beam 1.7s cubic-bezier(0.22, 0.61, 0.36, 1) .35s forwards;
  }
  @keyframes draw-beam{
    to { stroke-dashoffset:0; }
  }

  .celestial .dot-bottom{
    opacity:0;
    transition:opacity .55s ease .2s;
  }
  body.reveal-active .celestial .dot-bottom{ opacity:1; }

  .celestial .halo-top,
  .celestial .star-top{
    opacity:0;
    transition:opacity .7s ease 1.9s;
  }
  body.reveal-active .celestial .halo-top{ opacity:.55; }
  body.reveal-active .celestial .star-top{ opacity:1; }

  /* During reveal, the teal Milky-Way beam fades away so the gold dominates */
  body.reveal-active .stage::after{
    opacity:0;
    transition:opacity 1.4s ease;
  }

  /* Star field — three layers for parallax, drawn with radial-gradient dots */
  .stars{
    position:absolute; inset:0; pointer-events:none;
    background-image:
      radial-gradient(1px 1px at 12% 22%, #cfe6ff 99%, transparent),
      radial-gradient(1px 1px at 24% 8%,  #e7f4ff 99%, transparent),
      radial-gradient(1px 1px at 38% 30%, #b6d2ff 99%, transparent),
      radial-gradient(1px 1px at 55% 14%, #ffffff 99%, transparent),
      radial-gradient(1px 1px at 68% 25%, #cde2ff 99%, transparent),
      radial-gradient(1px 1px at 81% 9%,  #f4faff 99%, transparent),
      radial-gradient(1px 1px at 92% 28%, #b9d4ff 99%, transparent),
      radial-gradient(1px 1px at 6%  46%, #e2efff 99%, transparent),
      radial-gradient(1px 1px at 31% 52%, #cde2ff 99%, transparent),
      radial-gradient(1px 1px at 47% 44%, #ffffff 99%, transparent),
      radial-gradient(1px 1px at 63% 56%, #c8defc 99%, transparent),
      radial-gradient(1px 1px at 77% 48%, #e9f3ff 99%, transparent),
      radial-gradient(1px 1px at 88% 62%, #b8d2ff 99%, transparent),
      radial-gradient(2px 2px at 18% 18%, #ffffff 99%, transparent),
      radial-gradient(2px 2px at 72% 36%, #d6e8ff 99%, transparent),
      radial-gradient(2px 2px at 42% 64%, #ffffff 99%, transparent);
    background-size:100% 100%;
    animation:twinkle 6s ease-in-out infinite alternate;
  }
  .stars.layer-2{
    background-image:
      radial-gradient(1px 1px at 9%  72%,  #b6d2ff 99%, transparent),
      radial-gradient(1px 1px at 22% 84%,  #ffffff 99%, transparent),
      radial-gradient(1px 1px at 37% 76%,  #cde2ff 99%, transparent),
      radial-gradient(1px 1px at 51% 88%,  #e7f4ff 99%, transparent),
      radial-gradient(1px 1px at 66% 78%,  #b6d2ff 99%, transparent),
      radial-gradient(1px 1px at 79% 91%,  #ffffff 99%, transparent),
      radial-gradient(1px 1px at 93% 80%,  #cfe6ff 99%, transparent),
      radial-gradient(2px 2px at 28% 60%,  #ffffff 99%, transparent),
      radial-gradient(2px 2px at 86% 70%,  #d6e8ff 99%, transparent);
    animation-duration:9s;
    animation-direction:alternate-reverse;
    opacity:.85;
  }
  @keyframes twinkle{
    0%   { opacity:.55; }
    50%  { opacity:.95; }
    100% { opacity:.65; }
  }

  /* Faint horizon mist above the beam */
  .horizon{
    position:absolute; left:0; right:0; bottom:0; height:42%;
    background:linear-gradient(180deg, transparent 0%, rgba(8,19,40,.55) 55%, rgba(var(--lt-teal-rgb), .28) 100%);
    pointer-events:none;
  }

  /* ─────────────────────────────────────────────────────────
     SKIP INTRO — quiet, always available
     ───────────────────────────────────────────────────────── */
  .skip{
    position:fixed; top:max(18px, env(safe-area-inset-top)); right:18px;
    z-index:20;
    background:rgba(4,7,13,.55);
    border:1px solid rgba(231,236,243,.38);
    color:var(--ink);
    font-family:var(--type-display);
    font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
    padding:9px 14px 8px;
    border-radius:999px;
    cursor:pointer;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 2px 16px rgba(0,0,0,.28);
    transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease, opacity .9s ease, visibility .9s ease;
  }
  .skip:hover{ color:var(--mint); border-color:rgba(45,212,191,.65); background:rgba(4,7,13,.72); }
  .skip:active{ transform:scale(.97); }
  .skip .arrow{ display:inline-block; margin-left:6px; transform:translateY(-1px); }

  /* Tiny brand stamp top-left during intro */
  .stamp{
    position:fixed; top:max(20px, env(safe-area-inset-top)); left:22px; z-index:20;
    font-family:var(--type-display);
    font-weight:600;
    font-size:14px;
    letter-spacing:.06em;
    color:var(--ink);
    opacity:1;
    text-shadow:0 1px 12px rgba(0,0,0,.45), 0 0 24px rgba(4,7,13,.35);
    transition:color .9s ease, opacity .9s ease, text-shadow .9s ease;
  }
  .stamp .reg{ font-size:8px; vertical-align:super; margin-left:1px; color:var(--teal-glow); }

  /* After reveal — stamp + skip stay fixed; switch to dark-on-light for the wave banner */
  body.reveal-active .stamp{
    color:#081328;
    text-shadow:0 1px 8px rgba(255,255,255,.55);
  }
  body.reveal-active .stamp .reg{ color:#2D9AAD; }

  body.reveal-active .skip{
    color:#081328;
    background:rgba(255,255,255,.78);
    border-color:rgba(8,19,40,.22);
    box-shadow:0 2px 14px rgba(8,19,40,.10);
  }
  body.reveal-active .skip:hover{
    color:#2D9AAD;
    border-color:rgba(45,154,173,.45);
    background:rgba(255,255,255,.92);
  }

  /* ─────────────────────────────────────────────────────────
     INTRO — typewriter problem statements
     ───────────────────────────────────────────────────────── */
  .intro{
    position:relative; z-index:5;
    min-height:100vh; min-height:100dvh;
    display:flex; align-items:center; justify-content:center;
    padding:64px 24px 96px;
  }
  .panel{
    width:var(--max);
    color:var(--ink);
  }

  .kicker{
    display:flex; align-items:center; gap:14px;
    color:var(--mint); text-transform:uppercase;
    font-size:11px; letter-spacing:.32em; font-weight:600;
    margin-bottom:26px;
    opacity:0;
    transition:opacity .6s ease;
  }
  .kicker.show{ opacity:1; }
  .kicker .num{
    font-family:var(--type-mono);
    color:var(--teal-glow);
    letter-spacing:.08em;
    font-weight:500;
  }
  .kicker .rule{
    flex:1; height:1px; background:linear-gradient(90deg, rgba(45,212,191,.55), rgba(45,212,191,0));
    max-width:160px;
  }

  .typewriter{
    font-family:var(--type-display);
    font-weight:800;
    font-size:clamp(28px, 5.4vw, 56px);
    line-height:1.06;
    letter-spacing:-0.025em;
    color:var(--ink);
    min-height:1.06em;
  }
  .typewriter .accent{ color:var(--mint); }
  .typewriter .em    { color:var(--teal-glow); }
  .caret{
    display:inline-block;
    width:.55ch;
    height:.95em;
    margin-left:.06em;
    background:var(--teal-glow);
    vertical-align:-0.12em;
    animation:blink 1.05s steps(1) infinite;
    box-shadow:0 0 12px rgba(45,212,191,.65), 0 0 24px rgba(45,212,191,.35);
  }
  @keyframes blink{ 50%{ opacity:0; } }

  .subline{
    margin-top:22px;
    font-family:var(--type-display);
    font-weight:400;
    font-size:clamp(15px, 2vw, 19px);
    line-height:1.55;
    color:var(--ink-mute);
    max-width:62ch;
    opacity:0;
    transform:translateY(6px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .subline.show{ opacity:1; transform:translateY(0); }
  .subline em{ font-style:normal; color:var(--ink); font-weight:500; }

  /* ─────────────────────────────────────────────────────────
     REVEAL — brand & CTA after intro completes
     ───────────────────────────────────────────────────────── */
  .reveal{
    position:relative; z-index:6;
    min-height:100vh; min-height:100dvh;
    display:none;
    align-items:center; justify-content:center;
    padding:80px 24px;
    opacity:0;
    transition:opacity 1.4s ease;
  }
  .reveal.show{ display:flex; }
  .reveal.in{ opacity:1; }

  .brand-card{
    width:min(1100px, 96vw);
    text-align:center;
  }
  .brand-eyebrow{
    color:var(--mint); text-transform:uppercase;
    font-size:11px; letter-spacing:.36em; font-weight:600;
    margin-bottom:30px;
  }
  .wordmark{
    font-family:var(--type-display);
    font-weight:800;
    font-size:clamp(54px, 11vw, 124px);
    line-height:.95;
    letter-spacing:-0.045em;
    color:var(--ink);
    margin-bottom:6px;
  }
  .wordmark .reg{ font-size:.18em; vertical-align:super; color:var(--teal-glow); letter-spacing:0; font-weight:500; margin-left:.04em; }
  .wordmark .e   { color:var(--mint); }
  .tagline{
    font-family:var(--type-display);
    font-weight:300;
    font-size:clamp(17px, 2.4vw, 24px);
    line-height:1.45;
    color:var(--gold-glow);
    max-width:34ch;
    margin:24px auto 0;
    letter-spacing:.005em;
  }
  .tagline em{ font-style:normal; color:var(--gold-bright); font-weight:500; }

  .manifesto{
    margin:64px auto 8px;
    max-width:740px;
    text-align:center;
  }
  .manifesto .m-lead{
    font-family:var(--type-display);
    font-weight:300;
    font-style:italic;
    font-size:clamp(38px, 6vw, 60px);
    line-height:1;
    letter-spacing:-0.03em;
    color:var(--mint);
    margin-bottom:40px;
  }
  .manifesto .m-lead em{
    font-style:italic;
    color:var(--mint);
  }
  .manifesto .m-stack{
    margin:0 auto;
    text-align:left;
    max-width:660px;
    padding:0 8px;
  }

  .manifesto .m-entry{
    position:relative;
    padding:0 0 0 56px;
    margin-bottom:34px;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .9s ease, transform .9s ease;
  }
  .manifesto .m-entry:last-child{ margin-bottom:0; }
  body.reveal-active .manifesto .m-entry{
    opacity:1;
    transform:translateY(0);
  }
  body.reveal-active .manifesto .m-entry:nth-child(1){ transition-delay:.40s; }
  body.reveal-active .manifesto .m-entry:nth-child(2){ transition-delay:.60s; }
  body.reveal-active .manifesto .m-entry:nth-child(3){ transition-delay:.80s; }
  body.reveal-active .manifesto .m-entry:nth-child(4){ transition-delay:1.00s; }
  body.reveal-active .manifesto .m-entry:nth-child(5){ transition-delay:1.20s; }
  body.reveal-active .manifesto .m-entry:nth-child(6){ transition-delay:1.40s; }

  .manifesto .m-num{
    position:absolute;
    left:0;
    top:3px;
    font-family:var(--type-mono);
    font-size:13px;
    font-weight:400;
    letter-spacing:.10em;
    color:var(--gold-glow);
    opacity:.92;
  }
  .manifesto .m-num::after{
    content:"";
    display:block;
    width:22px;
    height:1px;
    background:linear-gradient(90deg, var(--gold-glow) 0%, rgba(253,230,138,0) 100%);
    margin-top:7px;
    opacity:.6;
  }
  .manifesto .m-tag{
    font-family:var(--type-display);
    font-weight:600;
    font-size:11.5px;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:var(--mint);
    margin-bottom:10px;
  }
  .manifesto .m-text{
    font-family:var(--type-display);
    font-weight:300;
    font-size:clamp(16px, 2.15vw, 19.5px);
    line-height:1.55;
    color:var(--ink);
    letter-spacing:-.005em;
    margin:0;
  }
  @media (max-width:600px){
    .manifesto .m-entry{ padding-left:42px; margin-bottom:28px; }
    .manifesto .m-num{ font-size:12px; }
    .manifesto .m-num::after{ width:16px; }
  }

  /* Looping typewriter foil — the contrast line that runs continuously */
  .manifesto .m-foil-wrap{
    margin:50px auto 0;
    max-width:62ch;
    text-align:center;
    font-family:var(--type-display);
    font-weight:700;
    font-size:clamp(15.5px, 2vw, 18.5px);
    line-height:1.55;
    color:var(--ink);
    min-height:5.6em;          /* reserve space so layout never jumps */
    padding:0 4px;
    letter-spacing:-.005em;
  }
  .manifesto .m-foil-text{
    white-space:pre-wrap;
  }
  .manifesto .m-foil-caret{
    display:inline-block;
    width:2.5px;
    height:1em;
    background:var(--mint);
    vertical-align:-2px;
    margin-left:4px;
    box-shadow:0 0 10px rgba(45,212,191,.65);
    animation:foil-blink 1.05s steps(1) infinite;
  }
  @keyframes foil-blink{ 50%{ opacity:0; } }
  @media (max-width:600px){
    .manifesto .m-foil-wrap{ min-height:8em; }
  }
  .manifesto .m-close{
    margin-top:44px;
    font-family:var(--type-display);
    font-weight:700;
    font-size:clamp(20px, 2.8vw, 26px);
    line-height:1.4;
    letter-spacing:-0.02em;
    color:var(--ink);
  }
  .manifesto .m-close .glow{
    color:var(--mint);
  }

  .section-h{
    margin:60px auto 22px;
    font-family:var(--type-display);
    font-weight:800;
    font-size:clamp(22px, 3.4vw, 32px);
    letter-spacing:-0.025em;
    color:var(--ink);
  }

  .capabilities{
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
    max-width:1040px;
    text-align:left;
  }
  .capabilities .c{
    border:1px solid var(--rule);
    border-radius:14px;
    padding:20px 18px;
    background:rgba(8,19,40,.45);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .capabilities .c .lbl{
    display:block;
    font-family:var(--type-mono);
    font-size:10px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--teal-glow);
    margin-bottom:10px;
  }
  .capabilities .c .val{
    font-family:var(--type-display);
    font-weight:500; font-size:14.5px; line-height:1.5;
    color:var(--ink);
    letter-spacing:-.005em;
  }
  @media (max-width:900px){
    .capabilities{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:680px; }
  }
  @media (max-width:580px){
    .capabilities{ grid-template-columns:1fr; max-width:480px; }
  }

  .ctas{
    margin-top:44px;
    display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 22px;
    border-radius:999px;
    font-family:var(--type-display);
    font-weight:600;
    font-size:14px; letter-spacing:.04em;
    text-transform:uppercase;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .2s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .btn.primary{
    background:var(--teal);
    color:#02110f;
    box-shadow:0 0 0 0 rgba(45,212,191,.0), 0 18px 40px -16px rgba(var(--lt-teal-rgb), .55);
  }
  .btn.primary:hover{ background:var(--teal-bright); box-shadow:0 0 0 6px rgba(45,212,191,.10), 0 22px 50px -18px rgba(var(--lt-teal-rgb), .7); transform:translateY(-1px); }
  .btn.ghost{
    background:transparent;
    color:var(--ink);
    border-color:rgba(231,236,243,.25);
  }
  .btn.ghost:hover{ color:var(--mint); border-color:rgba(45,212,191,.55); background:rgba(var(--lt-teal-rgb), .08); }
  .btn .arrow{ transform:translateX(0); transition:transform .25s ease; }
  .btn.primary:hover .arrow{ transform:translateX(3px); }

  .footnote{
    margin-top:60px;
    color:var(--ink-faint);
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
  }

  /* ─────────────────────────────────────────────────────────────
     AGE OF DISCOVERY — transition section from dark to mid-tone
     ───────────────────────────────────────────────────────────── */
  .age-section,
  .cta-section,
  .footer-section{
    display:none;
  }
  body.reveal-active .age-section,
  body.reveal-active .cta-section,
  body.reveal-active .footer-section{
    display:block;
    animation:section-rise 1.6s ease both;
  }
  @keyframes section-rise{
    from{ opacity:0; transform:translateY(18px); }
    to{   opacity:1; transform:translateY(0); }
  }

  .age-section{
    position:relative;
    z-index:7;
    padding:140px 24px 120px;
    background:var(--pd-bg);
    color:#fff;
    text-align:center;
    overflow:hidden;
  }
  /* A flat, demo-faithful wave band capping the top of the section,
     using only the gradient + teal wave fills from the demo banners. */
  .age-section::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:80px;
    background:linear-gradient(180deg,
      var(--pd-wave-1) 0%,
      var(--pd-wave-2) 60%,
      var(--pd-wave-3) 100%);
    border-bottom:1px solid var(--pd-rule);
    z-index:0;
  }
  .age-section .age-glow{
    /* Mint wash standing in for the previous gold glow — strictly from the demo palette. */
    position:absolute;
    left:50%; top:60%;
    transform:translateX(-50%);
    width:90%; max-width:1100px;
    aspect-ratio: 3 / 1;
    background:radial-gradient(ellipse 55% 80% at 50% 100%,
      var(--pd-mint-wash) 0%,
      rgba(93,202,165,0.04) 40%,
      transparent 72%);
    filter:blur(22px);
    pointer-events:none;
    z-index:0;
  }
  .age-section .age-stars{
    /* Kept, but tinted to white-only to stay on palette. */
    position:absolute;
    inset:0 0 55% 0;
    background-image:
      radial-gradient(1px 1px at 12% 32%, rgba(255,255,255,.9) 99%, transparent),
      radial-gradient(1px 1px at 34% 18%, rgba(255,255,255,.7) 99%, transparent),
      radial-gradient(1px 1px at 56% 42%, rgba(255,255,255,.85) 99%, transparent),
      radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,.65) 99%, transparent),
      radial-gradient(2px 2px at 22% 8%,  #ffffff 99%, transparent),
      radial-gradient(2px 2px at 90% 38%, rgba(255,255,255,.75) 99%, transparent);
    opacity:.35;
    pointer-events:none;
    z-index:0;
  }
  .age-inner{
    max-width:780px;
    margin:0 auto;
    position:relative;
    z-index:2;
  }
  .age-eyebrow{
    font-family:var(--type-display);
    font-weight:800;
    font-size:11px;
    letter-spacing:.25em;
    color:var(--pd-mint);
    text-transform:uppercase;
    margin-bottom:36px;
  }
  .age-heading{
    font-family:var(--type-display);
    font-weight:800;
    font-size:clamp(38px, 6vw, 64px);
    line-height:1.05;
    letter-spacing:-0.04em;
    color:#fff;
    margin:0 0 40px;
  }
  .age-heading em{
    font-style:normal;
    color:var(--pd-mint);
    font-weight:800;
  }
  .age-lead{
    font-family:var(--type-display);
    font-weight:400;
    font-size:clamp(16px, 2.1vw, 19px);
    line-height:1.7;
    color:var(--pd-text-mute);
    max-width:62ch;
    margin:0 auto 24px;
  }
  .age-lead em{
    font-style:normal;
    color:#fff;
    font-weight:700;
  }

  /* ─────────────────────────────────────────────────────────────
     PROBLEM SECTION — verbatim from platform demo slides 4 and 5.
     Strictly uses the wave-banner palette (--pd-* tokens only).
     ───────────────────────────────────────────────────────────── */
  .problem-section{
    position:relative;
    z-index:6;
    background:var(--pd-bg);
    color:#fff;
    overflow:hidden;
    display:none;
  }
  body.reveal-active .problem-section{
    display:block;
    animation:section-rise 1.6s ease both;
  }
  .problem-block{
    border-top:1px solid var(--pd-rule);
  }
  .problem-block:first-of-type{ border-top:none; }
  .problem-hero{
    padding:64px 24px 32px;
    max-width:780px;
    margin:0 auto;
  }
  .problem-title{
    font-family:var(--type-display);
    font-size:clamp(36px, 6.5vw, 60px);
    font-weight:800;
    color:#fff;
    letter-spacing:-0.04em;
    line-height:1.02;
    margin:0 0 14px;
  }
  .problem-subtitle{
    font-family:var(--type-display);
    font-size:clamp(20px, 3.6vw, 28px);
    font-weight:600;
    color:rgba(255,255,255,0.65);
    letter-spacing:-0.5px;
    line-height:1.25;
    margin:0;
  }
  /* The teal wave band — pulled verbatim from the demo's banner SVG. */
  .problem-wave{
    background:linear-gradient(180deg,
      var(--pd-wave-1) 0%,
      var(--pd-wave-2) 60%,
      var(--pd-wave-3) 100%);
    padding:24px 0;
    position:relative;
    overflow:hidden;
  }
  .problem-wave svg{
    display:block;
    width:100%;
    height:60px;
  }
  /* Stats banner — black, mint numbers, hairline rules, demo-identical. */
  .problem-stats{
    display:flex;
    background:var(--pd-bg);
    border-top:1px solid var(--pd-rule);
    border-bottom:1px solid var(--pd-rule);
  }
  .problem-stat{
    flex:1;
    padding:22px 14px;
    text-align:center;
    border-right:1px solid var(--pd-rule-soft);
  }
  .problem-stat:last-child{ border-right:none; }
  .problem-stat-num{
    font-family:var(--type-display);
    font-size:clamp(28px, 5vw, 42px);
    font-weight:800;
    color:var(--pd-mint);
    letter-spacing:-1px;
    line-height:1;
  }
  .problem-stat-label{
    font-size:11px;
    color:var(--pd-text-faint);
    margin-top:6px;
    line-height:1.4;
  }
  /* Body — lead paragraph + numbered points, exact copy from the demo. */
  .problem-body{
    padding:32px 24px 28px;
    max-width:780px;
    margin:0 auto;
  }
  .problem-lead{
    font-size:15px;
    color:var(--pd-text-mute);
    line-height:1.7;
    margin:0 0 30px;
  }
  .problem-point{
    display:flex;
    gap:14px;
    align-items:flex-start;
    margin-bottom:24px;
  }
  .problem-point:last-of-type{ margin-bottom:30px; }
  .problem-num{
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--pd-mint-glow);
    border:1.5px solid var(--pd-mint);
    color:var(--pd-mint);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:800;
    flex-shrink:0;
    margin-top:2px;
  }
  .problem-point-body{ flex:1; }
  .problem-point-heading{
    font-size:18px;
    font-weight:800;
    color:#fff;
    margin-bottom:6px;
    letter-spacing:-0.3px;
  }
  .problem-point-text{
    font-size:14px;
    color:var(--pd-text-body);
    line-height:1.7;
  }
  .problem-point-text strong{
    color:#fff;
    font-weight:700;
  }
  /* Closing callout — direct copy of the demo's "what consumers want" /
     "what Ēnel changes" callout. */
  .problem-callout{
    background:linear-gradient(135deg,
      var(--pd-mint-wash) 0%,
      rgba(93,202,165,0.02) 100%);
    border:1px solid var(--pd-mint-edge);
    border-radius:14px;
    padding:22px 22px;
    margin-top:8px;
  }
  .problem-callout-eyebrow{
    font-size:11px;
    font-weight:800;
    color:var(--pd-mint);
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:10px;
  }
  .problem-callout-heading{
    font-size:22px;
    font-weight:800;
    color:#fff;
    line-height:1.25;
    margin-bottom:10px;
    letter-spacing:-0.5px;
  }
  .problem-callout-text{
    font-size:13px;
    color:var(--pd-text-soft);
    line-height:1.65;
  }
  .problem-callout-text strong{
    color:#fff;
    font-weight:700;
  }
  /* Reveal staggering — keeps section in step with the rest of the page. */
  body.reveal-active .problem-section .problem-point{
    opacity:0;
    transform:translateY(8px);
    animation:section-rise .9s ease forwards;
  }
  body.reveal-active .problem-section .problem-point:nth-child(2){ animation-delay:.25s; }
  body.reveal-active .problem-section .problem-point:nth-child(3){ animation-delay:.40s; }
  body.reveal-active .problem-section .problem-point:nth-child(4){ animation-delay:.55s; }
  body.reveal-active .problem-section .problem-point:nth-child(5){ animation-delay:.70s; }

  /* ─────────────────────────────────────────────────────────────
     CTA SECTION — lighter gradient, dawn-like
     ───────────────────────────────────────────────────────────── */
  .cta-section{
    position:relative;
    z-index:8;
    padding:140px 24px 120px;
    background:linear-gradient(180deg,
      rgba(45,212,191,.88) 0%,
      rgba(153,246,228,.95) 32%,
      rgba(204,251,241,1) 65%,
      rgba(224,250,235,1) 100%);
    color:var(--bg-navy);
    text-align:center;
    overflow:hidden;
  }
  .cta-section .cta-burst{
    position:absolute;
    left:50%; top:-22%;
    transform:translateX(-50%);
    width:90%; max-width:980px;
    aspect-ratio:2/1;
    background:radial-gradient(ellipse 60% 100% at 50% 100%,
      rgba(254,243,199,.7) 0%,
      rgba(253,230,138,.38) 25%,
      rgba(251,191,36,.18) 50%,
      transparent 75%);
    filter:blur(28px);
    pointer-events:none;
    z-index:0;
  }
  .cta-inner{
    max-width:680px;
    margin:0 auto;
    position:relative;
    z-index:2;
  }
  .cta-eyebrow{
    font-family:var(--type-display);
    font-weight:600;
    font-size:11px;
    letter-spacing:.36em;
    text-transform:uppercase;
    color:#0d4f57;
    margin-bottom:24px;
  }
  .cta-heading{
    font-family:var(--type-display);
    font-weight:800;
    font-size:clamp(38px, 6vw, 62px);
    line-height:.96;
    letter-spacing:-0.04em;
    color:var(--bg-navy);
    margin:0 0 24px;
  }
  .cta-body{
    font-family:var(--type-display);
    font-weight:400;
    font-size:clamp(16px, 2.1vw, 19.5px);
    line-height:1.55;
    color:#0d4f57;
    max-width:50ch;
    margin:0 auto 44px;
  }
  .cta-buttons{
    display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
    margin-bottom:36px;
  }
  .btn-cta{
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 28px;
    border-radius:999px;
    font-family:var(--type-display);
    font-weight:600;
    font-size:14px; letter-spacing:.04em;
    text-transform:uppercase;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .2s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .btn-cta.primary{
    background:var(--bg-navy);
    color:#fff;
    box-shadow:0 18px 40px -16px rgba(8,19,40,.45);
  }
  .btn-cta.primary:hover{
    background:#0d2542;
    transform:translateY(-1px);
    box-shadow:0 22px 50px -16px rgba(8,19,40,.55);
  }
  .btn-cta.ghost{
    background:transparent;
    color:var(--bg-navy);
    border-color:rgba(8,19,40,.4);
  }
  .btn-cta.ghost:hover{
    background:rgba(8,19,40,.06);
    border-color:rgba(8,19,40,.65);
  }
  .btn-cta.link{
    background:transparent;
    color:#0d4f57;
    border:none;
    padding:8px 12px;
    text-transform:none;
    letter-spacing:.01em;
    font-weight:500;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:4px;
    font-size:15px;
  }
  .btn-cta.link:hover{ color:var(--bg-navy); }
  .btn-cta .arrow{ display:inline-block; transition:transform .25s ease; }
  .btn-cta.primary:hover .arrow{ transform:translateX(3px); }
  .cta-divider{
    font-family:var(--type-display);
    font-weight:500;
    font-size:11px;
    letter-spacing:.36em;
    text-transform:uppercase;
    color:rgba(8,19,40,.45);
    margin:0 0 12px;
  }

  /* ─────────────────────────────────────────────────────────────
     FOOTER — lightest, quiet close
     ───────────────────────────────────────────────────────────── */
  .footer-section{
    position:relative;
    z-index:9;
    padding:80px 24px 64px;
    background:linear-gradient(180deg,
      rgba(224,250,235,1) 0%,
      rgba(254,243,199,.7) 50%,
      rgba(255,251,235,1) 100%);
    color:var(--bg-navy);
    text-align:center;
  }
  .footer-inner{
    max-width:720px;
    margin:0 auto;
  }
  .footer-wordmark{
    font-family:var(--type-display);
    font-weight:800;
    font-size:clamp(28px, 4.2vw, 38px);
    letter-spacing:-0.035em;
    color:var(--bg-navy);
    margin-bottom:10px;
    line-height:1;
  }
  .footer-wordmark .e{ color:var(--teal); }
  .footer-wordmark .reg{
    font-size:.32em;
    vertical-align:super;
    color:var(--teal);
    margin-left:.04em;
    font-weight:500;
  }
  .footer-tag{
    font-family:var(--type-display);
    font-weight:300;
    font-size:15px;
    color:#0d4f57;
    margin:0 auto 32px;
    max-width:28rem;
    line-height:1.45;
    letter-spacing:.005em;
  }
  .footer-legal{
    margin:0 auto 28px;
    padding:26px 0 0;
    border-top:1px solid rgba(8,19,40,.1);
    max-width:36rem;
  }
  .footer-legal__list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:6px 0;
  }
  .footer-legal__list li{
    display:inline-flex;
    align-items:center;
  }
  .footer-legal__list li:not(:last-child)::after{
    content:"·";
    margin:0 11px;
    color:rgba(8,19,40,.28);
    font-weight:400;
    pointer-events:none;
  }
  .footer-legal a{
    font-family:var(--type-body);
    font-size:11px;
    font-weight:600;
    line-height:1.35;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(8,19,40,.55);
    text-decoration:none;
    padding:3px 0;
    border-bottom:1px solid transparent;
    transition:color .18s ease, border-color .18s ease;
  }
  .footer-legal a:hover,
  .footer-legal a:focus{
    color:#0d4f57;
    border-bottom-color:rgba(13,79,87,.35);
    outline:none;
  }
  .footer-meta{
    font-family:var(--type-display);
    font-weight:500;
    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(8,19,40,.4);
    display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap;
    padding-top:24px;
    border-top:1px solid rgba(8,19,40,.06);
    max-width:36rem;
    margin:0 auto;
  }
  .footer-meta .dot{
    color:rgba(8,19,40,.25);
    letter-spacing:0;
  }
  @media (max-width:560px){
    .footer-legal__list{
      flex-direction:column;
      gap:9px;
    }
    .footer-legal__list li:not(:last-child)::after{
      display:none;
    }
  }
  .footer-replay{
    background:transparent;
    border:none;
    color:rgba(8,19,40,.55);
    font-family:var(--type-display);
    font-weight:500;
    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
    cursor:pointer;
    padding:0;
    transition:color .25s ease;
  }
  .footer-replay:hover{
    color:var(--teal);
    text-decoration:underline;
    text-underline-offset:3px;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .stage::after, .stars{ animation:none !important; }
    .caret{ animation:none; }
  }

  /* ─────────────────────────────────────────────────────────────
     LIGHT THEME — applied to every section below the hero.
     The hero (intro/typewriter) is the only dark zone on the page;
     everything that follows is white + the footer-blend gradient,
     which is the unifying backdrop taken from the footer.
     This block sits at the end of the stylesheet so its cascade
     wins over the earlier dark-theme rules without using !important.
     ───────────────────────────────────────────────────────────── */
  :root{
    /* All stops fully opaque — the original 0.7-alpha middle was letting
       the dark body bleed through, which is why the manifesto area was
       reading as a muddy brown. Middle stop is a luminous near-white,
       so even on full-height sections the blend stays fresh, never drab. */
    --lt-blend-1:    #E0FAEB;  /* soft mint — top */
    --lt-blend-2:    #FBFEF5;  /* luminous near-white — middle */
    --lt-blend-3:    #FFFBEB;  /* warm cream — bottom */
    --lt-white:      #ffffff;
    --lt-ink:        #081328;              /* deep navy text */
    --lt-ink-mute:   rgba(8,19,40,.70);
    --lt-ink-soft:   rgba(8,19,40,.55);
    --lt-ink-faint:  rgba(8,19,40,.30);
    --lt-rule:       rgba(8,19,40,.10);
    --lt-rule-soft:  rgba(8,19,40,.05);
    /* Cyan-teal accent — matches the wave palette and image 3's blues. */
    --lt-teal:       #2D9AAD;
    --lt-teal-rgb:   45,154,173;

    /* Layered teal-water-wave banner illustration, used as the top layer
       of the section-frame banner across the page. Matches the reference:
       lightest cyan at the top fading to deepest teal, with four overlapping
       wave shapes cascading darker toward the bottom edge. Stretches to fill
       the banner width via preserveAspectRatio='none'. */
    --banner-waves: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='none'><defs><linearGradient id='sky' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%2386D4E0'/><stop offset='100%25' stop-color='%235BC4D6'/></linearGradient></defs><rect width='1200' height='240' fill='url(%23sky)'/><path d='M0,90 Q200,60 400,80 Q600,100 800,80 Q1000,60 1200,80 L1200,240 L0,240 Z' fill='%233DAEC4'/><path d='M0,130 Q250,100 500,120 Q750,140 1000,120 Q1100,110 1200,120 L1200,240 L0,240 Z' fill='%232D9AAD'/><path d='M0,170 Q200,150 400,165 Q600,180 800,165 Q1000,150 1200,170 L1200,240 L0,240 Z' fill='%231F8095'/><path d='M0,205 Q200,190 400,205 Q600,220 800,205 Q1000,190 1200,210 L1200,240 L0,240 Z' fill='%230F6B7E'/></svg>");
  }

  /* — Reveal section: brand card, manifesto, capabilities ——————— */
  .reveal{
    background:linear-gradient(180deg,
      var(--lt-blend-1) 0%,
      var(--lt-blend-2) 55%,
      var(--lt-blend-3) 100%);
    /* Extra top padding so the brand card clears the wave banner. */
    padding-top:220px;
    position:relative;
  }
  /* Reveal-section banner: layered teal water-waves capped by a 2px
     teal accent line. The pebble-strip / dark-navy band has been
     removed — the wave illustration runs edge-to-edge to the line. */
  .reveal::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:160px;
    background:
      linear-gradient(180deg,
        transparent 0,
        transparent calc(100% - 2px),
        var(--lt-teal) calc(100% - 2px),
        var(--lt-teal) 100%)
      no-repeat left top / 100% 100%,
      var(--banner-waves) no-repeat left top / 100% calc(100% - 2px);
    z-index:1;
    pointer-events:none;
  }
  .reveal .brand-card{ position:relative; z-index:2; }
  .reveal .brand-eyebrow     { color: var(--lt-teal); }
  .reveal .wordmark          { color: var(--lt-ink); }
  .reveal .wordmark .e       { color: var(--lt-teal); }
  .reveal .wordmark .reg     { color: var(--lt-teal); }
  .reveal .tagline           { color: var(--lt-ink-mute); }
  .reveal .tagline em        { color: var(--lt-teal); }
  .reveal .manifesto .m-lead    { color: var(--lt-teal); }
  .reveal .manifesto .m-lead em { color: var(--lt-teal); }
  .reveal .manifesto .m-num     { color: var(--lt-teal); opacity:1; }
  .reveal .manifesto .m-num::after{
    background:linear-gradient(90deg, var(--lt-teal) 0%, rgba(var(--lt-teal-rgb), 0) 100%);
  }
  .reveal .manifesto .m-tag     { color: var(--lt-teal); }
  .reveal .manifesto .m-text    { color: var(--lt-ink); }
  .reveal .manifesto .m-foil-wrap{ color: var(--lt-ink); }
  .reveal .manifesto .m-foil-caret{
    background: var(--lt-teal);
    box-shadow:0 0 8px rgba(var(--lt-teal-rgb), .4);
  }
  .reveal .manifesto .m-close   { color: var(--lt-ink); }
  .reveal .manifesto .m-close .glow { color: var(--lt-teal); }
  .reveal .section-h            { color: var(--lt-ink); }
  .reveal .capabilities .c{
    background: rgba(255,255,255,.70);
    border:1px solid var(--lt-rule);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .reveal .capabilities .c .lbl { color: var(--lt-teal); }
  .reveal .capabilities .c .val { color: var(--lt-ink); }

  /* — Problem section: alternates white body + footer-blend banners — */
  .problem-section{
    background: var(--lt-white);
    color: var(--lt-ink);
  }
  .problem-block         { border-top:1px solid var(--lt-rule); }
  .problem-block:first-of-type { border-top:none; }
  .problem-title         { color: var(--lt-ink); }
  .problem-subtitle      { color: var(--lt-ink-mute); }
  .problem-wave{
    /* The wave divider is the only place the blend appears in
       this section — it sits between the hero text and the stats. */
    background:linear-gradient(180deg,
      var(--lt-blend-1) 0%,
      var(--lt-blend-2) 60%,
      var(--lt-blend-3) 100%);
  }
  .problem-wave svg path:first-of-type{ fill:rgba(var(--lt-teal-rgb), 0.22); }
  .problem-wave svg path:last-of-type { fill:rgba(var(--lt-teal-rgb), 0.13); }
  .problem-stats{
    background: var(--lt-white);
    border-top:1px solid var(--lt-rule);
    border-bottom:1px solid var(--lt-rule);
  }
  .problem-stat          { border-right:1px solid var(--lt-rule-soft); }
  .problem-stat:last-child{ border-right:none; }
  .problem-stat-num      { color: var(--lt-teal); }
  .problem-stat-label    { color: var(--lt-ink-soft); }
  .problem-body          { color: var(--lt-ink); }
  .problem-lead          { color: var(--lt-ink-mute); }
  .problem-num{
    background: rgba(var(--lt-teal-rgb), 0.08);
    border:1.5px solid var(--lt-teal);
    color: var(--lt-teal);
  }
  .problem-point-heading       { color: var(--lt-ink); }
  .problem-point-text          { color: var(--lt-ink-mute); }
  .problem-point-text strong   { color: var(--lt-ink); }
  .problem-callout{
    background:linear-gradient(135deg,
      rgba(var(--lt-teal-rgb), 0.06) 0%,
      rgba(var(--lt-teal-rgb), 0.02) 100%);
    border:1px solid rgba(var(--lt-teal-rgb), 0.25);
  }
  .problem-callout-eyebrow     { color: var(--lt-teal); }
  .problem-callout-heading     { color: var(--lt-ink); }
  .problem-callout-text        { color: var(--lt-ink-mute); }
  .problem-callout-text strong { color: var(--lt-ink); }

  /* ── Reusable section-banner frame ────────────────────────────────
     Same composition as the reveal banner: layered teal water waves on
     top, pebble strip in the middle, teal accent line at the bottom.
     This is the brand's signature frame and is applied to the top of
     every below-hero section so the motif recurs throughout the page. */
  .problem-section,
  .age-section,
  .cta-section,
  .manifesto-dark{
    position:relative;
  }
  /* Wave banner — layered teal water-waves capped by a 2px teal
     accent line. The pebble-strip / dark-navy band that used to sit
     between the waves and the section body has been removed: the
     wave illustration now runs edge-to-edge to the accent line. */
  .age-section::before,
  .cta-section::before,
  .manifesto-dark::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:160px;
    background:
      /* Teal accent line — last 2px of the banner. */
      linear-gradient(180deg,
        transparent 0,
        transparent calc(100% - 2px),
        var(--lt-teal) calc(100% - 2px),
        var(--lt-teal) 100%)
      no-repeat left top / 100% 100%,
      /* Layered teal-water waves — fills the rest of the banner. */
      var(--banner-waves) no-repeat left top / 100% calc(100% - 2px);
    z-index:1;
    pointer-events:none;
  }
  /* The problem section no longer has its own top banner — the
     dark interlude further up the page (manifesto-dark) handles
     that framing role, and the in-section mint wave below the
     "The problem." title would otherwise sit too close to it. */
  .problem-section{ position:relative; }
  .problem-section .problem-block:first-of-type .problem-hero{ padding-top:64px; }
  .age-section{ padding-top:220px; }
  .cta-section{ padding-top:220px; }

  /* — Manifesto dark interlude ───────────────────────────────────
     Full-bleed dark band wrapping the "Above the noise…" closing
     line and the manifesto tagline. White type on dark navy, with
     the brand wave-banner framing the top as a transition from the
     light manifesto items above into the dark zone. Spans the full
     viewport width via the 100vw + negative-margin technique. */
  .manifesto-dark{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-top:80px;
    background:#04070d;
    color:#fff;
    padding:220px 24px 110px;
  }
  /* Center the inner content while the band itself runs edge to edge. */
  .manifesto-dark > *{
    position:relative;
    z-index:2;
    max-width:740px;
    margin-left:auto;
    margin-right:auto;
  }
  /* White-on-dark text overrides — specificity bumped past the earlier
     light-theme overrides ("`.reveal .manifesto .m-foil-wrap`" etc.). */
  .reveal .manifesto .manifesto-dark .m-foil-wrap,
  .reveal .manifesto .manifesto-dark .m-foil-text{
    color:#fff;
  }
  .reveal .manifesto .manifesto-dark .m-foil-caret{
    background: var(--lt-teal);
    box-shadow:0 0 12px rgba(var(--lt-teal-rgb), .65);
  }
  .reveal .manifesto .manifesto-dark .m-close{
    color:#fff;
  }
  .reveal .manifesto .manifesto-dark .m-close .glow{
    color: var(--lt-teal);
  }

  /* — Problem section: alternates white body + footer-blend banners — */
  .problem-section{
    background: var(--lt-white);
    color: var(--lt-ink);
  }
  .problem-block         { border-top:1px solid var(--lt-rule); }
  .problem-block:first-of-type { border-top:none; }
  .problem-title         { color: var(--lt-ink); }
  .problem-subtitle      { color: var(--lt-ink-mute); }
  .problem-wave{
    /* The wave divider is the only place the blend appears in
       this section — it sits between the hero text and the stats. */
    background:linear-gradient(180deg,
      var(--lt-blend-1) 0%,
      var(--lt-blend-2) 60%,
      var(--lt-blend-3) 100%);
  }
  .problem-wave svg path:first-of-type{ fill:rgba(var(--lt-teal-rgb), 0.22); }
  .problem-wave svg path:last-of-type { fill:rgba(var(--lt-teal-rgb), 0.13); }
  .problem-stats{
    background: var(--lt-white);
    border-top:1px solid var(--lt-rule);
    border-bottom:1px solid var(--lt-rule);
  }
  .problem-stat          { border-right:1px solid var(--lt-rule-soft); }
  .problem-stat:last-child{ border-right:none; }
  .problem-stat-num      { color: var(--lt-teal); }
  .problem-stat-label    { color: var(--lt-ink-soft); }
  .problem-body          { color: var(--lt-ink); }
  .problem-lead          { color: var(--lt-ink-mute); }
  .problem-num{
    background: rgba(var(--lt-teal-rgb), 0.08);
    border:1.5px solid var(--lt-teal);
    color: var(--lt-teal);
  }
  .problem-point-heading       { color: var(--lt-ink); }
  .problem-point-text          { color: var(--lt-ink-mute); }
  .problem-point-text strong   { color: var(--lt-ink); }
  .problem-callout{
    background:linear-gradient(135deg,
      rgba(var(--lt-teal-rgb), 0.06) 0%,
      rgba(var(--lt-teal-rgb), 0.02) 100%);
    border:1px solid rgba(var(--lt-teal-rgb), 0.25);
  }
  .problem-callout-eyebrow     { color: var(--lt-teal); }
  .problem-callout-heading     { color: var(--lt-ink); }
  .problem-callout-text        { color: var(--lt-ink-mute); }
  .problem-callout-text strong { color: var(--lt-ink); }

  /* — Age section: full footer blend, no starfield ——————————— */
  .age-section{
    background:linear-gradient(180deg,
      var(--lt-blend-1) 0%,
      var(--lt-blend-2) 50%,
      var(--lt-blend-3) 100%);
    color: var(--lt-ink);
  }
  .age-section .age-stars { display:none; } /* starfield doesn't read on light */
  .age-section .age-glow{
    background:radial-gradient(ellipse 55% 80% at 50% 100%,
      rgba(var(--lt-teal-rgb), 0.10) 0%,
      rgba(var(--lt-teal-rgb), 0.04) 40%,
      transparent 72%);
  }
  .age-eyebrow    { color: var(--lt-teal); }
  .age-heading    { color: var(--lt-ink); }
  .age-heading em { color: var(--lt-teal); }
  .age-lead       { color: var(--lt-ink-mute); }
  .age-lead em    { color: var(--lt-ink); }

  /* — CTA section: light, with the blend driving it ————————— */
  .cta-section{
    background:linear-gradient(180deg,
      var(--lt-blend-3) 0%,
      var(--lt-blend-2) 50%,
      var(--lt-blend-1) 100%);
  }
  .cta-section .cta-burst{
    /* swap the gold burst for a faint teal wash, on-palette */
    background:radial-gradient(ellipse 60% 100% at 50% 100%,
      rgba(var(--lt-teal-rgb), 0.10) 0%,
      rgba(var(--lt-teal-rgb), 0.04) 50%,
      transparent 75%);
  }
  .cta-eyebrow { color: var(--lt-teal); }
  .cta-heading { color: var(--lt-ink); }
  .cta-body    { color: var(--lt-ink-mute); }
  .cta-divider { color: var(--lt-ink-faint); }
  .btn-cta.primary{
    background: var(--lt-ink);
    color:#fff;
  }
  .btn-cta.primary:hover{ background:#0d2542; }
  .btn-cta.ghost{
    color: var(--lt-ink);
    border-color: rgba(8,19,40,.40);
  }
  .btn-cta.ghost:hover{
    background: rgba(8,19,40,.06);
    border-color: rgba(8,19,40,.65);
  }
  .btn-cta.link      { color: var(--lt-teal); }
  .btn-cta.link:hover{ color: var(--lt-ink); }

  .cta-email:focus{
    outline:none;
    border-color: var(--lt-teal);
    box-shadow:0 0 0 4px rgba(var(--lt-teal-rgb), .14);
  }
  .cta-email::placeholder{ color: var(--lt-ink-faint); }

  /* — Updated CTA form (replaces the old button group) — */
  .cta-form{
    display:flex;
    gap:12px;
    justify-content:center;
    max-width:520px;
    margin:36px auto 14px;
    flex-wrap:wrap;
  }
  .cta-email{
    flex:1 1 200px;
    min-width:200px;
    background: var(--lt-white);
    border:1.5px solid var(--lt-rule);
    border-radius:12px;
    padding:14px 18px;
    font-family:var(--type-body);
    font-size:16px;
    color: var(--lt-ink);
    box-sizing:border-box;
  }
  .cta-footnote{
    font-family:var(--type-body);
    font-size:13px;
    color: var(--lt-ink-faint);
    margin:8px 0 0;
  }

  /* ── Landing: no theme header/footer — full-viewport intro only ── */
  body.eh-landing .eh-header,
  body.eh-landing .wp-site-blocks > header.eh-header,
  body.eh-landing .wp-block-template-part[data-area="header"],
  body.eh-landing .wp-block-template-part[data-area="footer"]{
    display:none !important;
  }

  body.eh-landing .wp-site-blocks{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }