/* Valley of Decision — shared look. NOTHING SCROLLS: a fixed design canvas is scaled into the stage box.
   Colors come from the Valley of Decision art: neon valley blue, ember sunrise, gold, logo green, on night navy. */
:root{
  --night:#050913; --navy:#0a1428; --navy2:#0f1d3a; --panel:rgba(10,22,46,.82); --line:rgba(76,195,255,.30);
  --blue:#4cc3ff; --blue2:#9fe4ff; --ember:#ff8a3d; --gold:#ffc857; --green:#4fb36e; --ink:#eef5ff; --mute:#b1c0d6;
  --acc:var(--blue); --acc2:var(--ember);
  --display:"Oswald","Arial Narrow","Franklin Gothic Medium",Impact,sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}
html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden!important;overscroll-behavior:none;background:var(--night);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.42}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
img{max-width:100%;display:block}
a{color:var(--blue2)}
[hidden]{display:none!important}

/* background layer */
#mbBg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#mbBg .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s ease}
#mbBg .bgimg{background:center/cover no-repeat;opacity:0}
#mbBg .bgimg.on{opacity:.13;filter:blur(3px)}
#mbBg .shade{position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 0%,rgba(15,29,58,.35),rgba(5,9,19,.9) 70%)}
#mbBg.hero .shade{background:linear-gradient(90deg,rgba(5,9,19,.88) 0%,rgba(5,9,19,.55) 45%,rgba(5,9,19,.15) 75%),linear-gradient(0deg,rgba(5,9,19,.7),rgba(5,9,19,0) 40%)}
html.port #mbBg.hero .shade{background:linear-gradient(0deg,rgba(5,9,19,.98) 0%,rgba(5,9,19,.94) 42%,rgba(5,9,19,.35) 66%,rgba(5,9,19,.1) 85%)}

/* stage + canvas */
#stage{position:fixed;z-index:2;top:var(--st,0px);right:var(--sr,0px);bottom:var(--sb,0px);left:var(--sl,0px);overflow:hidden}
#canvas{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden}
.scene{position:absolute;inset:0;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none;display:flex;flex-direction:column}
.scene.on{visibility:visible;opacity:1;pointer-events:auto}
html.land .scene{padding:24px 40px 26px;gap:14px}
html.port .scene{padding:14px 16px 16px;gap:10px}

/* top row: page label + crisis line (the crisis line is on every screen) */
.sc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.sc-label{font-family:var(--display);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-size:14px}
.crisis{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font-weight:700;font-size:13.5px;
  background:rgba(255,138,61,.14);border:1px solid rgba(255,138,61,.7);border-radius:999px;padding:5px 12px;white-space:nowrap}
.crisis b{color:var(--ember)}
.crisis .cs{display:none}
html.port .crisis .cl{display:none} html.port .crisis .cs{display:inline} html.port .crisis{font-size:13px;padding:4px 10px}
html.port .sc-label{font-size:12.5px;letter-spacing:.12em}

.sc-head{flex:none;display:grid;gap:6px}
.sc-h2{margin:0;font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:.005em;text-wrap:balance}
html.land .sc-h2{font-size:42px;max-width:24ch} html.port .sc-h2{font-size:27px}
.sc-lead{margin:0;color:var(--mute)}
html.land .sc-lead{font-size:17.5px;max-width:64ch} html.port .sc-lead{font-size:14.5px;line-height:1.36}
.sc-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
html.land .sc-head{margin-top:auto}
html.land .sc-body{flex:0 1 auto;margin-bottom:auto}
html.land .scene.sc-hero .sc-head{margin-top:0}
html.port .sc-body{gap:9px}

/* placeholders Bane still has to answer */
.ph{display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.02em;color:#1a1200;background:var(--gold);border-radius:6px;padding:0 6px;margin:0 2px;line-height:1.5;vertical-align:baseline}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;border-radius:999px;cursor:pointer;border:2px solid var(--acc);text-decoration:none;transition:transform .15s,box-shadow .2s}
html.land .btn{font-size:17px;padding:12px 24px} html.port .btn{font-size:15px;padding:10px 18px}
.btn.solid{background:var(--acc);color:#04101f;box-shadow:0 0 22px rgba(76,195,255,.4)}
.btn.ghost{background:rgba(5,9,19,.55);color:var(--ink)}
.btn:hover{transform:translateY(-2px)}

/* picker = a row of choices + the one picked */
.picker{display:flex;flex-direction:column;gap:12px;min-height:0;flex:1}
html.land .picker{flex:0 1 auto}
html.port .picker{gap:9px}
.pk-chips{display:flex;flex-wrap:wrap;gap:8px;flex:none}
.pk-chip{cursor:pointer;border-radius:999px;border:1px solid var(--line);background:rgba(10,22,46,.7);font-weight:600;transition:background .2s,border-color .2s}
html.land .pk-chip{font-size:15px;padding:7px 16px} html.port .pk-chip{font-size:13.5px;padding:6px 11px}
.pk-chip[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#04101f}
.pk-panes{flex:1;min-height:0;position:relative}
.pk-pane{animation:paneIn .35s ease both}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.split{display:grid;gap:22px;align-items:start}
html.land .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} html.port .split{grid-template-columns:1fr;gap:8px}
.fig{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.fig img{width:100%;height:100%;object-fit:cover}
html.land .fig{height:min(320px,calc(var(--ch) - 330px));min-height:150px}
html.port .fig{display:none}
.line{margin:0 0 8px;font-family:var(--display);font-weight:500;color:var(--gold);letter-spacing:.02em}
html.land .line{font-size:22px} html.port .line{font-size:17px;margin-bottom:4px}
.pts{margin:0;padding:0;list-style:none;display:grid;gap:8px}
html.port .pts{gap:5px}
.pts li{position:relative;padding-left:24px}
html.land .pts li{font-size:17px} html.port .pts li{font-size:14px;line-height:1.33;padding-left:18px}
.pts li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--acc);transform:rotate(45deg);box-shadow:0 0 8px var(--acc)}
html.port .pts li::before{left:2px;width:6px;height:6px}
.body{margin:0} html.land .body{font-size:18px;max-width:58ch} html.port .body{font-size:14.5px;line-height:1.38}
.src{font-size:13.5px;color:var(--mute)}
html.port .src{font-size:12px}
.promise{margin:0;font-size:14px;color:var(--mute);flex:none}
html.port .promise{font-size:12.5px;line-height:1.3}
html.port .ph{font-size:12px}

/* stats */
.stats{display:grid;gap:14px}
html.land .stats{grid-template-columns:repeat(3,1fr)} html.port .stats{gap:7px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;display:grid;gap:4px;align-content:start}
html.land .stat{padding:18px} html.port .stat{padding:9px 12px;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center}
.stat b{font-family:var(--display);font-weight:600;color:var(--gold);line-height:1}
html.land .stat b{font-size:46px} html.port .stat b{font-size:26px;grid-row:span 2}
html.land .stat span{font-size:16px} html.port .stat span{font-size:13px;line-height:1.28}
.stat .src{text-decoration:underline}
html.port .stat .src{font-size:12px}

/* links lists */
.links{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.links li{background:var(--panel);border:1px solid var(--line);border-radius:10px}
html.land .links li{padding:9px 14px;font-size:16px} html.port .links li{padding:6px 10px;font-size:13.5px;line-height:1.3}
html.land .split.nofig{grid-template-columns:1fr}
html.land .split.nofig .links{grid-template-columns:1fr 1fr}
.links small{display:block;color:var(--mute);font-size:13.5px}
html.port .links small{font-size:12px}

/* first 72 */
.clock72{display:none}
html.land .sc-first72 .sc-body{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:start}
html.land .sc-first72 .clock72{display:block;border-radius:50%;overflow:hidden;border:2px solid var(--line);box-shadow:0 0 40px rgba(76,195,255,.25)}

/* roles + forms */
.roles{display:flex;flex-wrap:wrap;gap:8px;flex:none}
.role{cursor:pointer;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-weight:700}
html.land .role{font-size:16px;padding:10px 16px} html.port .role{font-size:13.5px;padding:7px 10px}
.role[aria-pressed="true"]{background:var(--acc2);border-color:var(--acc2);color:#1a0b00}
.role-t{margin:0;flex:none} html.land .role-t{font-size:17px} html.port .role-t{font-size:14px;line-height:1.33}
.vform{display:grid;gap:10px;align-content:start}
html.port .vform{gap:7px}
.vform .row{display:grid;gap:10px} html.land .vform .row{grid-template-columns:1fr 1fr} html.port .vform .row{gap:7px}
.vform label{display:grid;gap:4px;font-size:14px;color:var(--mute);font-weight:600}
html.port .vform label{font-size:12.5px;gap:2px}
.vform input,.vform select,.vform textarea{width:100%;border-radius:10px;border:1px solid var(--line);background:rgba(5,9,19,.75);color:var(--ink);padding:9px 12px;font-size:16px}
html.port .vform input,html.port .vform select,html.port .vform textarea{padding:7px 10px;font-size:15px}
.vform textarea{resize:none}
.vform .btn{justify-self:start}
.sendrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.privacy{margin:0;font-size:13.5px;color:var(--mute)}
html.port .privacy{font-size:12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fmsg{margin:0;min-height:1.2em;font-size:14px;color:var(--blue2)}
html.land .sc-involved .vform{max-width:720px}

/* give */
.funds{display:grid;gap:10px;flex:none}
html.land .funds{grid-template-columns:repeat(4,1fr)} html.port .funds{grid-template-columns:1fr 1fr;gap:6px}
.fund{cursor:pointer;text-align:left;border-radius:12px;border:1px solid var(--line);background:var(--panel);display:grid;gap:2px}
html.land .fund{padding:12px 14px} html.port .fund{padding:6px 9px}
.fund b{font-family:var(--display);font-weight:600;color:var(--gold);line-height:1.05}
html.land .fund b{font-size:28px} html.port .fund b{font-size:19px}
.fund span{font-weight:600} html.land .fund span{font-size:15px} html.port .fund span{font-size:12.5px;line-height:1.2}
.fund[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset,0 0 22px rgba(255,200,87,.25)}
.give-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;flex:none}
.fund-d{margin:0;flex:1;min-width:0} html.land .fund-d{font-size:17px} html.port .fund-d{font-size:13.5px;line-height:1.3;flex-basis:100%}
.give-note.flash{animation:flash 1.2s ease}
@keyframes flash{0%,100%{color:var(--mute)}20%,60%{color:var(--gold)}}

/* trust */
.facts{margin:0;display:grid;gap:0}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
html.port .facts div{grid-template-columns:96px 1fr;gap:8px;padding:5px 0}
.facts dt{font-weight:700;color:var(--mute);font-size:15px} html.port .facts dt{font-size:13px}
.facts dd{margin:0;font-size:16px} html.port .facts dd{font-size:13.5px;line-height:1.3}
.facts.small div{grid-template-columns:70px 1fr}

/* contact */
.contact-body{display:grid!important;gap:18px}
html.land .contact-body{grid-template-columns:1.3fr 1fr;align-items:start}
html.port .contact-body{gap:8px}
.vform .full{grid-column:1/-1}
.c-side{display:grid;gap:12px;align-content:start}
.crisis.big{font-size:16px;padding:10px 16px;justify-self:start}
html.port .crisis.big{font-size:13.5px;padding:7px 12px}
html.port .crisis.big .cs{display:none}
.foot{margin:0;flex:none;font-size:13px;color:var(--mute);text-align:center}
html.port .foot{font-size:12px;line-height:1.28}
html.port .c-side .facts{display:none}
html.port .c-side{grid-template-columns:1fr}
html.port .c-side{display:none!important}
html.port .crisis.big{display:none}

/* HERO */
.sc-hero .sc-label{opacity:0}
.hero-box{position:absolute;left:0;right:0;bottom:0;display:grid;gap:12px;justify-items:start}
html.land .hero-box{padding:0 56px 44px;max-width:860px} html.port .hero-box{padding:0 18px 24px;gap:10px}
.hero-kicker{font-family:var(--display);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:6px 14px;border:1px solid rgba(255,200,87,.6);border-radius:999px;background:rgba(5,9,19,.55)}
html.land .hero-kicker{font-size:15px} html.port .hero-kicker{font-size:12.5px;letter-spacing:.12em}
.hero-h1{margin:0;font-family:var(--display);font-weight:700;line-height:.92;text-transform:uppercase;letter-spacing:.01em}
.hero-h1 .hv,.hero-h1 .hd{display:inline-block}
.hero-h1 .hv{color:#fff;text-shadow:0 0 2px #fff,0 0 12px var(--blue),0 0 32px rgba(76,195,255,.7)}
.hero-h1 .ho{display:inline-block;color:var(--gold);font-weight:400;font-size:.42em;vertical-align:middle;letter-spacing:.2em}
.hero-h1 .hd{color:#fff;text-shadow:0 0 2px #fff,0 0 12px var(--ember),0 0 30px rgba(255,138,61,.6)}
html.land .hero-h1{font-size:min(96px,calc(var(--ch) * .15))} html.port .hero-h1{font-size:54px}
html.port .hero-h1 .hd{display:block}
.hero-tag{margin:0;font-family:var(--display);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2)}
.hero-tag i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ember);margin:0 8px;vertical-align:middle;box-shadow:0 0 8px var(--ember)}
html.land .hero-tag{font-size:22px} html.port .hero-tag{font-size:16px}
.hero-line{margin:0;max-width:46ch;color:var(--ink)}
html.land .hero-line{font-size:20px} html.port .hero-line{font-size:15px;line-height:1.36}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.hero-sound{position:absolute;z-index:3;font-weight:700;border-radius:999px;cursor:pointer;background:rgba(5,9,19,.65);color:var(--ink);border:1px solid var(--gold)}
html.land .hero-sound{top:70px;right:40px;font-size:15px;padding:8px 16px} html.port .hero-sound{top:52px;right:16px;font-size:13px;padding:6px 12px}

/* ways switcher pill (engine fills #waysSlot) */
#waysSlot a{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;background:rgba(5,9,19,.8);border:1px solid var(--line);border-radius:999px;padding:5px 10px;white-space:nowrap}
#waysSlot a b{color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  #mbBg video{display:none}
}

/* ---------- Home picture reel (launch, Oct 21 2026) ----------
   Laptop: the reel sits on the right, the words on the left, never on top of each other.
   Phone: the reel sits up top, the words below. Buttons live under the picture, never on it. */
.reel{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px}
html.land .reel{right:40px;top:58px;bottom:30px;width:520px;justify-content:center}
html.port .reel{left:16px;right:16px;top:46px;gap:7px}
.reel .frame{position:relative;width:100%;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:#05090f;
  border:1px solid rgba(255,200,87,.35);box-shadow:0 0 42px rgba(76,195,255,.16),0 18px 48px rgba(0,0,0,.6)}
.reel .rf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity .9s ease,transform 3.6s ease}
.reel .rf.on{opacity:1;transform:scale(1)}
.reel-cap{margin:0;text-align:center;font-family:var(--display);font-weight:600;color:#fff;letter-spacing:.02em;line-height:1.12;text-wrap:balance;
  text-shadow:0 0 18px rgba(255,200,87,.35);opacity:0;transform:translateY(8px);transition:opacity .9s ease .35s,transform .9s ease .35s}
html.land .reel-cap{font-size:25px;max-width:24ch} html.port .reel-cap{font-size:17px}
.reel.done .reel-cap{opacity:1;transform:none}
.reel-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;min-height:34px}
html.port .reel-row{min-height:30px;gap:8px}
.reel-dots{display:flex;gap:6px} .reel-dots i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);transition:background .4s}
.reel-dots i.on{background:var(--gold)}
.reel.done .reel-dots{display:none}
.reel .hero-sound{position:static}
.reel-replay{cursor:pointer;font-weight:700;border-radius:999px;background:rgba(5,9,19,.65);color:var(--ink);border:1px solid var(--line)}
html.land .reel-replay{font-size:15px;padding:8px 16px} html.port .reel-replay{font-size:13px;padding:6px 12px}
html.land .hero-box{max-width:600px}
@media (prefers-reduced-motion: reduce){.reel .rf,.reel-cap{transition:none}}
/* phone: the picture shrinks with short screens so the words below always have room */
html.port .reel .frame{width:min(100%,calc((var(--ch) - 450px) * 1.5));min-width:220px}
html.port .reel-cap{max-width:30ch}
@media (max-height:700px){ html.port .sc-hero .hero-kicker{display:none} }
html.port .sc-hero .hero-h1{font-size:min(54px,calc(var(--ch) * .075))}