/* ============================================================
   Sequence v2 — sections: hero · marquee · anatomy · chapters
   demo · app · get
   ============================================================ */

/* ---------- shared video fx layers ---------- */
.vwrap{position:absolute;inset:0;overflow:hidden}
.vwrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vfx-grade{position:absolute;inset:0;background:
  radial-gradient(130% 90% at 72% 14%, transparent 30%, rgba(11,10,13,.5)),
  linear-gradient(180deg, rgba(11,10,13,.3), rgba(11,10,13,.55));
}
.vfx-tint{position:absolute;inset:0;background:var(--c,var(--flame));opacity:.12;mix-blend-mode:overlay}
.vfx-scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(11,10,13,.72) 78%,rgba(11,10,13,.96) 100%)}
.vfx-grain{position:absolute;inset:0;opacity:calc(var(--grain) * .16);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ============================ HERO ============================ */
.hero{position:relative;height:100svh;min-height:620px;background:var(--bg)}
.hero .hv{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;overflow:hidden}
.hero .hv.on{opacity:1}
.hero .hv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}

.hero-inner{
  position:relative;z-index:3;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(120px,16svh,170px);
}
.hero .display em{font-style:normal;color:var(--accent)}
.hero .lede{margin:22px 0 0}
.hero-cta{display:flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.hero-meta{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:13.5px;font-weight:600;color:var(--t3)}
.hm-sep{width:4px;height:4px;border-radius:99px;background:var(--t3)}

/* hero live-run chip */
.hero-run{
  position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:26px;
  max-width:calc(var(--maxw) - var(--pad) * 2);margin:0 auto;
  display:flex;align-items:center;gap:16px;
  padding:11px 18px 11px 14px;border-radius:999px;
  background:var(--glass);border:1px solid var(--hair-2);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
}
.hr-label{display:flex;align-items:center;gap:9px;flex:0 0 auto;font-family:var(--disp);font-weight:700;font-size:13.5px}
.hr-live{width:8px;height:8px;border-radius:99px;background:var(--hr-c,var(--flame));box-shadow:0 0 10px var(--hr-c,var(--flame));animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.hr-segs{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
.hr-seg{position:relative;flex:1 1 0;height:6px;border-radius:99px;overflow:hidden;border:none;padding:0;cursor:pointer;background:color-mix(in srgb,var(--seg) 22%,transparent);transition:flex-grow .5s cubic-bezier(.2,.8,.2,1)}
.hr-seg i{position:absolute;inset:0;width:0%;background:var(--seg);border-radius:99px;display:block}
.hr-seg.now{flex-grow:2}
.hr-time{flex:0 0 auto;font-family:var(--disp);font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--t2);min-width:78px;text-align:right}
@media(max-width:640px){
  .hero-inner{padding-bottom:128px}
  .hr-time{min-width:0}
  .hr-label .hr-name{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ======================== MARQUEE ======================== */
.marquee{
  position:relative;overflow:hidden;padding:26px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:var(--bg);
}
.mq-track{display:flex;gap:0;width:max-content;animation:mq 36s linear infinite}
.mq-set{display:flex;align-items:center;flex:0 0 auto}
.mq-word{
  font-family:var(--disp);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(38px,5.6vw,76px);line-height:1;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.4px var(--t3);
  padding:0 .35em;
}
.mq-dot{width:.55em;height:.55em;border-radius:99px;flex:0 0 auto;font-size:clamp(38px,5.6vw,76px)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .mq-track{animation:none} }
html.no-mq .mq-track{animation:none}

/* ======================== ANATOMY ======================== */
.anatomy{height:340vh;background:var(--bg)}
.an-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;
}
.an-grid{display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:clamp(40px,6vw,96px);align-items:center;width:100%}
.an-copy .h2{margin:14px 0 0}
.an-steps{display:flex;flex-direction:column;gap:6px;margin-top:38px}
.an-step{
  display:flex;gap:16px;align-items:baseline;padding:14px 18px;border-radius:18px;
  transition:background .4s,opacity .4s;opacity:.38;
}
.an-step.on{background:color-mix(in srgb,var(--t1) 5%,transparent);opacity:1}
.an-step .n{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--accent);flex:0 0 26px}
.an-step h3{font-size:clamp(19px,1.8vw,24px);letter-spacing:-.02em}
.an-step p{margin:6px 0 0;color:var(--t2);font-size:15.5px;line-height:1.5;max-width:38ch;text-wrap:pretty}

/* chain visual */
.an-visual{position:relative;display:flex;flex-direction:column;gap:18px}
.an-chain{display:flex;flex-direction:column;gap:12px}
.an-card{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:18px;
  background:var(--card);border:1px solid var(--hair);border-radius:20px;
  padding:18px 22px 18px 0;
  opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .4s;
}
.an-card::before{content:"";flex:0 0 5px;align-self:stretch;background:var(--c);border-radius:0 4px 4px 0;margin-right:3px}
.an-card .fill{position:absolute;inset:0;width:calc(var(--f,0) * 100%);background:color-mix(in srgb,var(--c) 12%,transparent);pointer-events:none}
.an-card .ac-main{flex:1 1 auto;position:relative;padding-left:14px}
.an-card .ac-k{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--t3)}
.an-card .ac-name{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;margin-top:3px}
.an-card .ac-cue{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:13.5px;color:var(--t2)}
.an-card .ac-cue svg{width:15px;height:15px;color:var(--c)}
.an-card .ac-time{position:relative;font-family:var(--disp);font-weight:800;font-size:clamp(24px,2.4vw,32px);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.anatomy[data-phase] .an-card.c1{opacity:1;transform:none}
.anatomy[data-phase="2"] .an-card,
.anatomy[data-phase="3"] .an-card{opacity:1;transform:none}
.anatomy[data-phase="3"] .an-card{box-shadow:0 18px 50px -26px rgba(0,0,0,.9)}

.an-status{
  display:flex;align-items:center;gap:10px;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:14px;color:var(--t3);
  opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;
}
.anatomy[data-phase="3"] .an-status{opacity:1;transform:none}
.an-status .pdot{width:8px;height:8px;border-radius:99px;background:var(--flame);box-shadow:0 0 10px var(--flame);animation:pulse 1.4s ease-in-out infinite}

@media(max-width:880px){
  .anatomy{height:auto}
  .an-sticky{position:static;height:auto;padding:clamp(96px,13vw,190px) 0;overflow:visible}
  .an-grid{grid-template-columns:1fr;gap:44px}
  .an-step{opacity:1;background:none;padding:10px 0}
  .an-card{opacity:1;transform:none}
  .an-card .fill{display:none}
  .an-status{display:none}
}

/* ======================== CHAPTERS ======================== */
.chapters{position:relative;background:var(--bg)}
.chapter{
  position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;
  display:flex;align-items:flex-end;
  background:var(--bg);
}
.ch-inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(64px,10svh,110px)}
.ch-num{
  position:absolute;z-index:2;top:clamp(60px,9svh,110px);right:var(--pad);
  font-family:var(--disp);font-weight:800;line-height:.8;
  font-size:clamp(110px,22vw,290px);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--c) 60%,transparent);
  opacity:.55;pointer-events:none;user-select:none;
}
.ch-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:999px;
  background:var(--glass);border:1px solid var(--hair-2);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.04em;
}
.ch-badge .b-dot{width:8px;height:8px;border-radius:99px;background:var(--c);box-shadow:0 0 10px var(--c)}
.chapter h2{
  font-size:clamp(56px,11vw,160px);letter-spacing:-.045em;line-height:.9;
  margin:18px 0 0;
}
.chapter h2 .thin{color:transparent;-webkit-text-stroke:1.6px color-mix(in srgb,var(--t1) 72%,transparent)}
.chapter .lede{margin:20px 0 0;max-width:44ch}
.ch-egs{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.ch-egs .eg-k{flex:0 0 100%;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.eg{
  display:inline-flex;align-items:baseline;gap:10px;
  padding:9px 16px;border-radius:999px;
  background:var(--glass);border:1px solid var(--hair);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-size:14px;font-weight:600;
}
.eg b{font-weight:700}
.eg .eg-t{font-family:var(--disp);font-weight:700;font-size:12.5px;color:var(--c);font-variant-numeric:tabular-nums}

/* --- chapter "Yours" (no video — builder message) --- */
.chapter.yours{background:
  radial-gradient(80% 60% at 28% 18%, color-mix(in srgb,var(--amber) 7%,transparent), transparent 70%),
  radial-gradient(70% 55% at 78% 70%, color-mix(in srgb,var(--violet) 6%,transparent), transparent 70%),
  var(--bg-2);
}
.chapter.yours .vfx-scrim{background:linear-gradient(180deg,transparent 26%,rgba(11,10,13,.66) 58%,rgba(11,10,13,.92) 100%)}
.yfield{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 22%,transparent 48%);mask-image:linear-gradient(180deg,#000 0%,#000 22%,transparent 48%)}
.yc{
  position:absolute;display:inline-flex;align-items:center;gap:9px;
  padding:11px 17px;border-radius:15px;
  background:var(--card);border:1px solid var(--hair);
  font-family:var(--disp);font-weight:700;font-size:14.5px;letter-spacing:-.01em;
  color:var(--t2);white-space:nowrap;
  box-shadow:0 16px 40px -22px rgba(0,0,0,.8);
  transform:rotate(var(--r,0deg));
  animation:ycf 7s ease-in-out var(--d,0s) infinite alternate;
  opacity:.82;
}
.yc i{width:8px;height:8px;border-radius:99px;background:var(--c);flex:0 0 auto}
.yc b{color:var(--c);font-variant-numeric:tabular-nums;font-weight:700}
@keyframes ycf{from{transform:translateY(-9px) rotate(var(--r,0deg))}to{transform:translateY(11px) rotate(var(--r,0deg))}}
@media (prefers-reduced-motion:reduce){ .yc{animation:none} }
@media(max-width:880px){
  .yc{font-size:13px;padding:9px 13px}
  .yc:nth-child(n+6){display:none}
}

/* ======================== DEMO ======================== */
.demo{background:var(--bg);overflow:hidden}
.demo::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 46% at 72% 50%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 70%);
}
.demo-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(44px,6vw,100px);align-items:center;position:relative}
.demo-copy .h2{margin:14px 0 0}
.demo-copy .lede{margin:20px 0 0}
.demo-hints{display:flex;flex-direction:column;gap:13px;margin-top:34px;padding:0;list-style:none}
.demo-hints li{display:flex;align-items:center;gap:12px;color:var(--t2);font-size:15px}
.demo-hints svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto}

/* ---------- the live demo phone: the real app run screen, 402px canvas scaled down ---------- */
.demo-phone{
  --pw:320;position:relative;margin:0 auto;
  width:calc(var(--pw) * 1px);aspect-ratio:402/874;
  border-radius:clamp(30px,4vw,46px);overflow:hidden;
  border:1px solid var(--hair-2);background:#100F12;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85);
}
.dp-402{position:absolute;top:0;left:0;width:402px;height:874px;transform:scale(calc(var(--pw) / 402));transform-origin:top left;font-family:var(--ui);color:#F5F3F0}
.dp-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:116px;height:30px;border-radius:16px;background:#000;z-index:20}
.dp-back{display:flex;align-items:center;gap:3px;padding:64px 16px 0;font-size:14px;font-weight:600;color:rgba(245,243,240,.55)}
.dp-back svg{width:18px;height:18px}
.dp-ttl{text-align:center;margin-top:8px;font-size:14px;font-weight:700}
.dp-sub{text-align:center;font-size:12px;color:rgba(245,243,240,.55);margin-top:2px}
.dp-ringwrap{position:relative;width:300px;height:300px;margin:16px auto 0}
.dp-ringwrap svg{display:block;transform:rotate(-90deg)}
.dp-ringwrap .bg{stroke:rgba(255,255,255,.08)}
.dp-ringwrap .fg{stroke:var(--dc);transition:stroke .4s}
.dp-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dp-mid .tm{font-family:var(--disp);font-weight:800;font-size:76px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.dp-mid .sb{font-size:13px;font-weight:600;color:rgba(245,243,240,.55);margin-top:8px}
.dp-segs{display:flex;gap:4px;margin:24px 30px 0}
.dp-segs span{position:relative;height:7px;border-radius:3.5px;background:color-mix(in srgb,var(--sc) 16%,transparent);overflow:hidden}
.dp-segs span i{position:absolute;inset:0;width:0%;border-radius:3.5px;background:var(--sc);display:block}
.dp-meta{display:flex;justify-content:space-between;align-items:baseline;margin:10px 30px 0;font-size:11.5px;font-weight:600;color:rgba(245,243,240,.55)}
.dp-meta b{font-family:var(--disp);font-weight:800;font-size:13.5px;color:#F5F3F0;font-variant-numeric:tabular-nums}
.dp-chips{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:26px;padding:0 22px}
.dp-now{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 15px;border-radius:14px;background:var(--dc);transition:background .4s}
.dp-now .k{font-size:9px;font-weight:800;letter-spacing:1.2px;color:rgba(16,19,10,.55)}
.dp-now .nm{font-size:14px;font-weight:700;color:#10130a;white-space:nowrap}
.dp-arrow{width:16px;height:16px;color:rgba(245,243,240,.3);flex:0 0 auto}
.dp-next{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 15px;border-radius:14px;background:rgba(255,255,255,.07);border:.5px solid rgba(255,255,255,.07)}
.dp-next .k{font-size:9px;font-weight:800;letter-spacing:1.2px;color:rgba(245,243,240,.3)}
.dp-next .nm{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;white-space:nowrap}
.dp-next .nm i{width:6px;height:6px;border-radius:3px;display:block;flex:0 0 auto}
.dp-cue{text-align:center;margin-top:14px;font-size:12.5px;color:rgba(245,243,240,.55);padding:0 24px;min-height:18px}
.dp-ctl{position:absolute;left:0;right:0;bottom:64px;display:flex;align-items:flex-start;justify-content:center;gap:30px}
.dp-sm{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;padding:0;color:#F5F3F0;cursor:pointer;font-family:var(--ui)}
.dp-sm .cir{width:60px;height:60px;border-radius:30px;background:rgba(255,255,255,.07);border:.5px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:background .2s}
.dp-sm:hover .cir{background:rgba(255,255,255,.13)}
.dp-sm svg{width:23px;height:23px}
.dp-sm .lb{font-size:11.5px;color:rgba(245,243,240,.55);font-weight:600}
.dp-big{width:84px;height:84px;border-radius:42px;border:none;background:#FF6B35;color:#1a1008;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 28px rgba(255,107,53,.5);transition:transform .15s}
.dp-big:active{transform:scale(.96)}
.dp-big svg{width:34px;height:34px}

/* cue flash — the app's full-screen, can't-miss-it moment */
.dp-flash{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;pointer-events:none;transition:opacity .3s}
.dp-flash.show{opacity:1}
.dp-flash svg{width:54px;height:54px}
.dp-flash .tx{font-family:var(--disp);font-weight:800;font-size:30px;color:#10130a;text-align:center;padding:0 30px}

/* hold-to-confirm — the app's "waits for you" screen */
.dp-hold{position:absolute;inset:0;z-index:12;background:linear-gradient(165deg,#FF8F5E 0%,#FF6B35 55%,#E8501C 100%);opacity:0;pointer-events:none;transition:opacity .3s}
.demo-phone.confirming .dp-hold{opacity:1;pointer-events:auto}
.dp-hold .hd{padding:76px 30px 0;font-size:13.5px;font-weight:700;color:rgba(26,16,8,.6);letter-spacing:.5px}
.dp-hold .cue{padding:6px 30px 0;font-family:var(--disp);font-weight:800;font-size:38px;color:#1a1008;line-height:1.05}
.dp-hold .rw{position:relative;width:240px;height:240px;margin:26px auto 0;display:flex;align-items:center;justify-content:center}
.dp-hold .pr{position:absolute;width:200px;height:200px;border-radius:110px;border:2px solid rgba(255,255,255,.6);animation:pulseR 2.8s ease-out infinite}
.dp-hold .pr:nth-child(2){animation-delay:.9s}
.dp-hold .pr:nth-child(3){animation-delay:1.8s}
.dp-hold .ring{width:200px;height:200px;border-radius:110px;border:3px solid rgba(255,255,255,.85);display:flex;flex-direction:column;align-items:center;justify-content:center}
.dp-hold .tm{font-family:var(--disp);font-weight:800;font-size:50px;color:#1a1008;font-variant-numeric:tabular-nums}
.dp-hold .sb{font-size:12px;font-weight:700;color:rgba(26,16,8,.68);margin-top:5px;letter-spacing:.6px}
.dp-hold .note{text-align:center;margin-top:22px;font-size:13.5px;color:rgba(26,16,8,.72);font-weight:600}
.dp-hold .go{position:absolute;left:24px;right:24px;bottom:52px;height:62px;border-radius:31px;background:#1a1008;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--disp);font-weight:700;font-size:16px}
.dp-hold .go svg{width:20px;height:20px;flex:0 0 auto}
@keyframes pulseR{0%{transform:scale(.7);opacity:.55}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){ .dp-hold .pr{animation:none} }

/* sound toggle, under the phone */
.dp-under{display:flex;justify-content:center;margin-top:16px}
.dp-snd{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:color-mix(in srgb,var(--t1) 6%,transparent);border:1px solid var(--hair-2);color:var(--t1);cursor:pointer;font-family:var(--ui);font-size:13px;font-weight:600;transition:background .2s}
.dp-snd:hover{background:color-mix(in srgb,var(--t1) 12%,transparent)}
.dp-snd svg{width:17px;height:17px}
.dp-snd.off{color:var(--t3)}

@media(max-width:920px){
  .demo-grid{grid-template-columns:1fr;gap:48px}
  .demo-phone{--pw:290}
}



/* ======================== APP ======================== */
.app{background:var(--bg-2);overflow:hidden}
.app .sec-head{text-align:center;max-width:760px;margin:0 auto}
.app .sec-head .lede{margin:20px auto 0}
.app-stage{
  position:relative;display:flex;align-items:flex-start;justify-content:center;gap:clamp(18px,3.5vw,44px);
  margin-top:clamp(54px,7vw,90px);
}
.app-glow{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(900px,90vw);aspect-ratio:1.6;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 16%,transparent),transparent 72%);
  pointer-events:none;
}
.phone{
  position:relative;border-radius:clamp(28px,4vw,44px);overflow:hidden;
  border:1px solid var(--hair-2);background:#0E0D10;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85);
  flex:0 0 auto;width:min(300px,78vw);
  aspect-ratio:9/19.4;container-type:inline-size;
}
.phone.side{width:min(248px,60vw);margin-top:64px;opacity:.92}
.app-feats{
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  margin-top:clamp(48px,6vw,72px);color:var(--t2);
}
.af{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600}
.af svg{width:18px;height:18px;color:var(--accent)}
.af-sep{width:4px;height:4px;border-radius:99px;background:var(--t3)}
@media(max-width:760px){
  .app-stage{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 20px;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);scrollbar-width:none}
  .app-stage::-webkit-scrollbar{display:none}
  .phone,.phone.side{scroll-snap-align:center;margin-top:0;width:min(280px,74vw)}
}

/* ======================== GET ======================== */
.get{position:relative;overflow:hidden;text-align:center;background:var(--bg)}
.get-bg{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 88%, color-mix(in srgb,var(--accent) 17%,transparent), transparent 72%);
}
.get-inner{position:relative}
.get-mark{height:96px;width:auto;margin:0 auto;filter:drop-shadow(0 10px 40px color-mix(in srgb,var(--flame) 50%,transparent))}
.get h2{font-size:clamp(44px,7.4vw,104px);letter-spacing:-.04em;margin:30px 0 0}
.get p{font-size:clamp(16.5px,1.4vw,20px);color:var(--t2);max-width:42ch;margin:20px auto 0;text-wrap:pretty}
.get-cta{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:38px;flex-wrap:wrap}

/* ---------- real prototype screens (server-rendered, scaled from the 402px app) ---------- */
.app .phone.screen-host{--pw:300;width:calc(var(--pw) * 1px);aspect-ratio:402 / 874;background:#100F12;container-type:normal}
.app .phone.side.screen-host{--pw:248}
.screen-scale{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#100F12}
.screen-402{position:absolute;top:0;left:0;width:402px;height:874px;transform:scale(calc(var(--pw) / 402));transform-origin:top left}
@media(max-width:760px){ .app .phone.screen-host,.app .phone.side.screen-host{--pw:286} }