/* Platform: five features on one pinned, full-screen stage. Everything is
   sized to the viewport and moved by story.js from the scroll position, so
   scrolling back runs it all in reverse. */
body.x{background:#000;color:#f4f1ea}
body.x .footer,body.x .sec{background:#000}
.story{position:relative;height:1300vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;will-change:opacity,transform}
.fly,.radar,.call,.wave2,.lines,.tri2,.nd,.tap1,.vb,.hub,.sat,.trk4,.views4,.mem,.split-mark{position:absolute;will-change:transform,opacity}

/* copy block: big outlined numeral, title, one line */
.copy{position:absolute;left:6vw;bottom:9vh;max-width:min(520px,40vw);z-index:5}
.copy::before{content:"";position:absolute;inset:-60px -80px -60px -120px;background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,0));z-index:-1;pointer-events:none}
.num-o{display:block;font-size:clamp(46px,9vmin,110px);line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(244,241,234,.5);margin-bottom:12px;letter-spacing:.02em}
.copy h1,.copy h2{font-size:clamp(26px,4.4vmin,54px);font-weight:400;line-height:1.08;text-transform:uppercase;letter-spacing:.01em;margin-bottom:16px}
.copy p{font-size:13px;line-height:1.8;color:rgba(244,241,234,.72)}

/* progress ticks, right edge */
.prog{position:absolute;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:6}
.prog i{width:5px;height:22px;border-radius:3px;background:rgba(244,241,234,.18);transition:background-color 300ms}
.prog i.on{background:#4fa8a4}

/* ---------- 01 ---------- */
.split-mark{left:50%;top:50%;width:min(62vmin,640px);aspect-ratio:980/970;margin-left:calc(min(62vmin,640px) / -2);transform:translateY(-50%);z-index:3;overflow:visible}
.pull{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,241,234,.5);z-index:4}
.pull::after{content:'';display:block;width:1px;height:34px;margin:12px auto 0;background:linear-gradient(#a08a5c,transparent)}
.radar{left:62%;top:52%;width:min(86vmin,820px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(79,168,164,.08) 0%,rgba(0,0,0,0) 70%)}
.radar .rg{position:absolute;left:50%;top:50%;width:calc(var(--r) * 100%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(244,241,234,.13)}
.beam{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(79,168,164,0) 0deg,rgba(79,168,164,0) 300deg,rgba(79,168,164,.18) 340deg,rgba(79,168,164,.62) 359deg,rgba(169,202,200,.9) 360deg);
  -webkit-mask:radial-gradient(circle,#000 0 70%,transparent 71%);mask:radial-gradient(circle,#000 0 70%,transparent 71%)}
.radar .rc{position:absolute;left:50%;top:50%;width:14%;transform:translate(-50%,-50%)}
.blip{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:#f8ed43;
  transform:rotate(var(--a)) translateY(calc(var(--d) * -35%)) ;transform-origin:center;box-shadow:0 0 18px #f8ed43;opacity:.15}
.radar .blip{transform:rotate(var(--a)) translate(0, calc(var(--d) * min(-30vmin,-280px)))}
.prod{width:min(250px,19vw);border-radius:18px;overflow:hidden;background:#141413;box-shadow:0 0 0 1px rgba(244,241,234,.1),0 30px 70px rgba(0,0,0,.7);z-index:2}
.prod .pa{height:min(108px,8vw);background-size:cover;background-position:center}
.prod b{display:block;font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:12px 14px 6px;line-height:1.45}
.prod .buy{display:inline-block;margin:4px 14px 14px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:#3f8f8c;color:#fff;border-radius:99px;padding:6px 12px}
.info{border-radius:16px;background:#141413;padding:16px 20px;box-shadow:0 0 0 1px rgba(244,241,234,.1);min-width:min(200px,16vw);z-index:2}
.info span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.5);margin-bottom:8px}
.info b{font-weight:400;font-size:clamp(18px,2.4vmin,26px)}
.trk1{border-radius:16px;background:#141413;padding:16px 20px;box-shadow:0 0 0 1px rgba(244,241,234,.1);width:min(300px,24vw);z-index:2}
.trk1 .tl{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.5);margin-bottom:14px}
.tbar{height:4px;border-radius:2px;background:rgba(244,241,234,.12);overflow:hidden}
.tbar i{display:block;height:100%;width:0;background:#4fa8a4;border-radius:2px}
.tst{display:flex;justify-content:space-between;margin-top:-9px}
.tst b{width:14px;height:14px;border-radius:50%;background:#2a2926;border:3px solid #141413}
.tst b.on{background:#4fa8a4}

/* ---------- 02 ---------- */
.call{left:30%;top:42%;width:min(44vmin,440px);aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-content:center}
.call img{width:min(18vmin,180px);position:relative}
.call .pr{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(79,168,164,.55)}
.wave2{left:42%;right:5vw;top:42%;height:30vmin;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;gap:max(4px,.5vw);opacity:.9;z-index:0}
.wave2 i{width:max(3px,.35vw);height:4px;border-radius:3px;background:#4fa8a4}
.lines{left:52%;top:60%;width:min(44vw,600px);z-index:2}
.ln{font-size:clamp(17px,2.9vmin,30px);line-height:1.35;margin-bottom:2.4vmin;min-height:1.35em;color:#f4f1ea}
.ln:nth-child(2),.ln:nth-child(3){color:rgba(244,241,234,.92)}
.ln.typing::after{content:'';display:inline-block;width:.42em;height:.9em;margin-left:4px;vertical-align:-.08em;background:#4fa8a4}
.tri2{left:52%;top:84%;display:flex;flex-wrap:wrap;gap:12px;max-width:min(44vw,600px);z-index:2}
.tri2 span{display:inline-flex;align-items:center;gap:10px;border-radius:99px;background:#141413;padding:12px 20px 12px 12px;font-size:clamp(11px,1.6vmin,15px);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 0 1px rgba(244,241,234,.12)}
.tick{width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(244,241,234,.3);display:grid;place-content:center;flex-shrink:0;transition:background-color 200ms,border-color 200ms}
.tick svg{width:12px;height:12px;stroke:#fff;stroke-width:2.4;fill:none;opacity:0}
.tick.on{background:#3f8f8c;border-color:#3f8f8c}
.tick.on svg{opacity:1}

/* ---------- 03 ---------- */
.pipe{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.pipe path{stroke:rgba(244,241,234,.14);stroke-width:2;stroke-dasharray:4 8}
.pipe circle{fill:#f8ed43;filter:drop-shadow(0 0 8px #f8ed43)}
.nd{top:30%;display:flex;flex-direction:column;align-items:center;gap:16px;transform:translate(-50%,-50%);z-index:2;font-size:clamp(10px,1.5vmin,13px);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.8)}
.nd img{width:min(22vmin,190px);height:min(22vmin,190px);padding:min(5.5vmin,48px);border-radius:50%;background:#141413;box-shadow:0 0 0 1px rgba(244,241,234,.12),0 0 80px rgba(79,168,164,.12)}
.nd-ph{left:24%}.nd-in{left:76%}
.got{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:9px;white-space:nowrap}
.got p{display:flex;align-items:center;gap:10px;font-size:clamp(10px,1.45vmin,13px);letter-spacing:.12em;color:#f4f1ea}
.tap1{left:64%;top:68%;transform:translate(-50%,-50%);width:min(520px,60vw);height:min(92px,11vmin);border-radius:99px;background:#3f8f8c;color:#fff;
  display:grid;place-content:center;font-size:clamp(14px,2.4vmin,24px);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 30px 80px rgba(63,143,140,.45);z-index:3}
.tap1 span{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:10px}
.tap1 .et{width:.9em;height:.9em;stroke:#fff;stroke-width:2.4;fill:none}
.tap1 .burst{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;border:2px solid #a9cac8;opacity:0}
.vb{left:calc(64% + var(--x) * min(13vw,190px));top:84%;transform:translate(-50%,-50%);border-radius:99px;background:#141413;padding:12px 20px;font-size:clamp(10px,1.4vmin,13px);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(79,168,164,.55),0 0 30px rgba(79,168,164,.25);z-index:3}

/* ---------- 04 ---------- */
.orb-lines{position:absolute;inset:0;width:100%;height:100%}
.orb-lines line{stroke:rgba(79,168,164,.6);stroke-width:1.5}
.hub{left:62%;top:51%;transform:translate(-50%,-50%);width:min(30vmin,300px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;
  z-index:2}
.hub img{width:min(13vmin,130px)}
.sat{display:flex;flex-direction:column;align-items:center;gap:10px;transform:translate(-50%,-50%);z-index:3;font-size:clamp(10px,1.3vmin,12px);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,234,.8);left:0;top:0}
.sat img{width:min(12vmin,104px);height:min(12vmin,104px);padding:min(3vmin,26px);border-radius:50%;background:#141413;box-shadow:0 0 0 1px rgba(244,241,234,.12)}
.trk4{left:38%;right:6vw;top:15%;z-index:2}
.trk4 .tbar{height:6px}
.tlab{display:flex;justify-content:space-between;margin-top:12px;font-size:clamp(10px,1.2vmin,11px);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,234,.4)}
.tlab span.on{color:#f4f1ea}
.views4{right:6vw;bottom:4vh;display:flex;gap:10px;z-index:3}
.views4 span{border-radius:99px;padding:10px 16px;font-size:clamp(10px,1.3vmin,12px);letter-spacing:.14em;text-transform:uppercase;background:#141413;color:rgba(244,241,234,.4);box-shadow:0 0 0 1px rgba(244,241,234,.1);transition:color 250ms,box-shadow 250ms}
.views4 span.on{color:#f4f1ea;box-shadow:0 0 0 1px #4fa8a4,0 0 24px rgba(79,168,164,.35)}

/* ---------- 05 ---------- */
.mem{left:60%;top:50%;width:min(80vw,124vh);transform:translate(-50%,-50%);overflow:visible;
  filter:drop-shadow(0 0 calc(4px + var(--glow,0) * 26px) rgba(79,168,164,var(--glow,0)))}
.sc5.locked .mem{animation:lockin 900ms cubic-bezier(.34,1.56,.64,1)}
.sc5.locked .mem circle[fill="#C8AB72"]{fill:#f8ed43}
@keyframes lockin{0%{scale:1.05}100%{scale:1}}

/* ---------- after the story ---------- */
.parties{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px}
.party{border:1px solid rgba(244,241,234,.11);border-radius:14px;padding:26px 22px;background:rgba(244,241,234,.04)}
.party h3{font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);margin-bottom:12px}
.party p{font-size:11px!important;line-height:1.8!important;margin:0!important;color:rgba(244,241,234,.62)!important}
body.x .sec h1,body.x .sec h2{color:#f4f1ea}
body.x .sec .eyebrow{color:var(--yellow)}

/* ---------- phones: visuals in the top two thirds, words below ---------- */
@media(max-width:760px) and (orientation:portrait),(max-width:760px) and (min-height:501px){
  /* Phones: every visual sits in the band between the title bar and the
     scene's words (--bt, --bh, measured by story.js), so nothing slides
     under the bar however tall the browser's own toolbars are. */
  .copy{left:16px;right:16px;bottom:4vh;max-width:none}
  .num-o{font-size:30px;margin-bottom:4px}
  .copy h1,.copy h2{font-size:22px;margin-bottom:8px}
  .copy p{font-size:12px;line-height:1.65}
  .prog{right:6px}
  .radar{left:50%;top:calc(var(--bt,90px) + var(--bh,400px) * .5);width:min(92vw, calc(var(--bh,400px) * .98))}
  .radar .blip{transform:rotate(var(--a)) translate(0, calc(var(--d) * min(-32vw, var(--bh,400px) * -.34)))}
  .prod{width:min(38vw, calc(var(--bh,400px) * .34));border-radius:14px}   /* short phones: sized to the room above the words too (7 Nov 2026) */
  .prod .pa{height:13vw}
  .prod b{font-size:10px;padding:8px 10px 4px}
  .prod .buy{margin:2px 10px 10px;font-size:8px;padding:4px 9px}
  .sc1 .p1{left:4%!important;top:var(--bt,90px)!important}
  .sc1 .p2{left:54%!important;top:var(--bt,90px)!important}
  .sc1 .p3{left:54%!important;top:calc(var(--bt,90px) + var(--bh,400px) * .56)!important}
  .sc1 .p4{left:4%!important;top:calc(var(--bt,90px) + var(--bh,400px) * .56)!important}
  .info,.trk1{display:none}
  .call{left:50%;top:calc(var(--bt,90px) + var(--bh,400px) * .2);width:min(46vw, calc(var(--bh,400px) * .4))}
  .call img{width:min(22vw, calc(var(--bh,400px) * .19))}
  .wave2{left:0;right:0;top:calc(var(--bt,90px) + var(--bh,400px) * .2);height:min(20vw, calc(var(--bh,400px) * .2))}
  .lines{left:16px;right:16px;width:auto;top:calc(var(--bt,90px) + var(--bh,400px) * .44)}
  .ln{font-size:16px;margin-bottom:6px}
  .tri2{left:16px;right:16px;top:calc(var(--bt,90px) + var(--bh,400px) * .8);max-width:none;gap:6px}
  .tri2 span{padding:7px 12px 7px 7px;font-size:10px}
  .tri2 .tick{width:20px;height:20px}
  .nd{top:calc(var(--bt,90px) + var(--bh,400px) * .26);gap:8px;font-size:10px}
  .nd img{width:min(22vw, calc(var(--bh,400px) * .22));height:min(22vw, calc(var(--bh,400px) * .22));padding:min(5.5vw, calc(var(--bh,400px) * .055))}
  .nd-ph{left:22%}.nd-in{left:78%}
  .got{gap:4px;top:calc(100% + 6px)}
  .got p{font-size:10px;gap:6px}
  .got .tick{width:16px;height:16px}
  .tap1{left:50%;top:calc(var(--bt,90px) + var(--bh,400px) * .78);width:84vw;height:min(56px, calc(var(--bh,400px) * .15));font-size:14px}
  .vb{top:calc(var(--bt,90px) + var(--bh,400px) * .95);left:calc(50% + var(--x) * 30vw);padding:7px 11px;font-size:10px}
  .trk4{left:16px;right:16px;top:var(--bt,90px)}
  .tlab{font-size:7.5px;letter-spacing:.08em}
  .hub{left:50%;top:calc(var(--bt,90px) + 40px + (var(--bh,400px) - 40px) * .5);width:min(36vw, calc(var(--bh,400px) * .32))}
  .hub img{width:min(18vw, calc(var(--bh,400px) * .16))}
  .sat{gap:6px;font-size:10px}
  .sat img{width:min(14vw, calc(var(--bh,400px) * .15));height:min(14vw, calc(var(--bh,400px) * .15));padding:min(3.5vw, calc(var(--bh,400px) * .037))}
  .views4{display:none}
  .mem{left:50%;top:calc(var(--bt,90px) + var(--bh,400px) * .5);width:min(150vw, calc(var(--bh,400px) * 2.3))}
  .parties{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.sc5.locked .mem{animation:none}}