.why-page main{text-align:center;display:flow-root;background:#000}
.why-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:center;min-height:max(640px,calc(100svh - var(--header-height)));padding-block:100px;background:#050507;color:#fff}
.why-hero h1{font-size:var(--hero-size);text-shadow:0 2px 24px #0006;margin:0}
.why-manifesto{position:relative;color:#fff;background:#000;min-height:100svh;display:grid;align-items:center;padding-block:120px}
/* User-requested manifesto size exception; shared body spacing and weight remain. */
.why-manifesto-copy{max-width:880px;margin:0 auto;color:#fff;font-size:var(--why-manifesto-size);font-weight:var(--why-manifesto-weight)}
.why-sentence{display:inline-block}
/* Static-site adaptation of GlowHorizon's top variant and four layered arcs. */
.why-hero-content{position:relative;z-index:1}
.why-glow-horizon{position:absolute;inset:0;isolation:isolate;pointer-events:none;transform:translateY(-50%);animation:why-horizon-enter 2s cubic-bezier(.16,1,.3,1) both}
.why-glow-arc{position:absolute;inset:0;border-radius:100%;background:var(--arc-color);transform:translateY(0) scale(var(--arc-scale));animation:why-arc-enter 2s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--arc-delay,0s)}
.why-glow-rim{--arc-color:#fff;--arc-scale:1.32;box-shadow:0 -4px 23px #ffffffb5;animation:none}
.why-glow-lilac{--arc-color:var(--brand);--arc-scale:1.2;--arc-delay:.6s;filter:blur(31px)}
.why-glow-violet{--arc-color:var(--brand);--arc-scale:1.24;filter:blur(21px)}
.why-glow-core{--arc-color:#000;--arc-scale:1.2;filter:blur(51px)}
@keyframes why-horizon-enter{from{transform:translateY(-100%) scaleY(1.5);opacity:0;filter:blur(15px)}to{transform:translateY(-50%) scaleY(1);opacity:1;filter:blur(0)}}
@keyframes why-arc-enter{from{transform:translateY(-40%) scale(var(--arc-scale))}to{transform:translateY(0) scale(var(--arc-scale))}}
@media(prefers-reduced-motion:reduce){.why-glow-horizon,.why-glow-arc{animation:none}}

/* Matching fallback: AnimatedTitleFM source was not included in the supplied demo. */
.why-hero h1{animation:why-title-enter 2s cubic-bezier(.16,1,.3,1) both}
@keyframes why-title-enter{from{opacity:0;filter:blur(15px);transform:translateY(24px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.why-hero h1{animation:none}}

/* Pin only the monitor entrance. At full zoom, the entire hero scrolls away. */
.why-entry{position:relative;background:#050507}
.why-hero-portal{display:contents}
.why-monitor-layer{display:none}
html.why-entry-boot .why-entry{--entry-hero-opacity:0;--entry-monitor-opacity:1;--entry-monitor-scale:.45;--entry-hero-scale:.25;height:400svh;margin-top:calc(-1 * var(--why-header-height,var(--header-height)))}
html.why-entry-boot .why-entry-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
html.why-entry-boot .why-hero{position:absolute;inset:0;min-height:100%;transform:scale(var(--entry-hero-scale));transform-origin:center}
html.why-entry-boot .why-hero-portal{display:block;position:absolute;inset:0;z-index:2;opacity:var(--entry-hero-opacity);clip-path:inset(var(--entry-screen-y,40%) var(--entry-screen-x,40%) round var(--entry-screen-radius,6px))}
html.why-entry-boot .why-monitor-layer{display:block;position:absolute;inset:0;background:#080b0a;opacity:var(--entry-monitor-opacity);pointer-events:none}
.why-monitor-frame{position:absolute;width:min(72vw,1024px);aspect-ratio:3/2;left:50%;top:50%;transform:translate(-50%,-41.2%)}
.why-monitor{display:block;width:100%;height:auto;transform-origin:50% 41.2%;transform:scale(var(--entry-monitor-scale))}
html.why-entry-boot .why-entry:not(.is-title-active) .why-hero h1,html.why-entry-boot .why-entry:not(.is-title-active) .why-glow-horizon,html.why-entry-boot .why-entry:not(.is-title-active) .why-glow-arc{animation-play-state:paused}
/* Green adaptation of the supplied dark gradient, grid and diagonal textures. */
.why-manifesto-stage{isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#000 0%,#030d06 20%,#063a19 40%,#12822e 70%,var(--brand) 100%)}
.why-manifesto-stage::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.why-manifesto-stage::after{content:"";position:absolute;inset:0;z-index:-1;background-image:url('assets/why-gradient-noise.svg'),linear-gradient(45deg,#ffffff03 1px,transparent 1px),linear-gradient(-45deg,#ffffff03 1px,transparent 1px);background-size:149.76px 149.76px,40px 40px,40px 40px;pointer-events:none}

/* Add half a viewport to the existing roughly half-viewport dark transition. */
.why-page{--why-black-gap:50svh;--why-reveal-height:300svh;--why-reveal-hold-screens:1;--why-manifesto-size:32px;--why-manifesto-weight:600}
.why-black-gap{height:var(--why-black-gap);background:#000}
.why-manifesto{display:block;min-height:0;padding:0;background:#000}
.why-manifesto-stage{position:relative;min-height:100svh;display:grid;align-items:center;padding:70px 0 120px}
.why-manifesto.is-scroll-reveal{height:calc(var(--why-reveal-height) + 100svh * var(--why-reveal-hold-screens));overflow:visible}
.why-manifesto.is-scroll-reveal .why-manifesto-stage{position:sticky;top:0;height:100svh}
@media(prefers-reduced-motion:reduce){.why-manifesto.is-scroll-reveal{height:auto}.why-manifesto.is-scroll-reveal .why-manifesto-stage{position:relative}.why-sentence{opacity:1!important}}

/* User-requested uniform sentence typography, including the semantic strong. */
.why-manifesto-copy .why-sentence{font-weight:var(--why-manifesto-weight)}

/* White breathing room between the final review section and rounded footer. */
.why-page main::after{content:"";display:block;height:32px;background:#fff}

/* Hard switches for the user-defined phrases; no opacity interpolation. */
.why-reveal-chunk{display:inline-block;transition:none;animation:none}
@media(prefers-reduced-motion:reduce){.why-reveal-chunk{opacity:1!important}}