@font-face{font-family:'Geist';src:url('/assets/fonts/Geist-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

html{background:#0A0B0D}
body{margin:0;background:#0A0B0D}
a{color:#E6ECF5;text-decoration:none}a:hover{color:#FFFFFF}
.lp{font-family:'Geist',system-ui,sans-serif;color:#FFFFFF;background:#0A0B0D;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1200px;margin:0 auto;padding:0 48px;box-sizing:border-box}
.hair{border-top:1px solid rgba(255,255,255,0.08)}
.muted{color:#A7ADB8}
.sec{color:#C3C8D1}
.eyebrow{font-size:13px;font-weight:500;color:#A7ADB8;letter-spacing:0.2px}
.h1{margin:0;font-size:84px;line-height:0.98;font-weight:600;letter-spacing:-3.2px;max-width:900px}
.h2{margin:0;font-size:44px;line-height:1.05;font-weight:600;letter-spacing:-1.4px}
.lead{margin:0;font-size:20px;line-height:1.45;color:#C3C8D1;max-width:560px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;background:#E6ECF5;color:#14171C;font-size:16px;font-weight:600;border:0;font-family:inherit;cursor:pointer;transition:background .2s ease,transform .2s ease}
.btn:hover{background:#FFFFFF;color:#14171C;transform:translateY(-1px)}
.ghost{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.11);color:#E6ECF5;font-size:14px;font-weight:500;transition:background .2s ease}
.ghost:hover{background:rgba(255,255,255,0.12)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:end;margin-top:36px}
.feat{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:72px;align-items:center}
.beta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;align-items:start}
.foot{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between}
.row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 8px;padding:26px 0 24px;position:relative;border-top:1px solid rgba(255,255,255,0.08)}
.rn{font-size:13px;font-weight:500;color:#7C8391;padding-top:9px}
.rt{font-size:30px;font-weight:600;letter-spacing:-0.8px;color:#6B717D;animation:hl 16s linear infinite both}
.rd{margin:8px 0 0;font-size:17px;line-height:1.5;color:#A7ADB8;max-width:520px}
.rbar{position:absolute;left:0;right:0;top:-1px;height:1px;background:#E6ECF5;transform-origin:left;transform:scaleX(0);animation:fill 16s linear infinite both}
.badge{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 10px;border-radius:9px;background:#000000;border:1px solid #A6A6A6;color:#FFFFFF}
.bk{display:block;font-size:9px;line-height:1;letter-spacing:0.3px}
.bn{display:block;font-size:18px;line-height:1.05;font-weight:500;letter-spacing:-0.3px}
.chip-soon{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:rgba(230,195,143,0.14);color:#E6C38F;font-size:12px;font-weight:500}
.field{display:flex;align-items:flex-end;gap:16px;border-bottom:1px solid rgba(255,255,255,0.35);padding-bottom:12px;transition:border-color .2s ease}
.field:focus-within{border-color:#FFFFFF}
.inp{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#FFFFFF;font-family:inherit;font-size:36px;font-weight:500;letter-spacing:-1px;padding:0}
.inp::placeholder{color:#5C6370}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:14px;line-height:1.5;color:#A7ADB8}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:#E6ECF5;flex:none}
.rv{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pwipe{0%{clip-path:inset(0 100% 0 0)}13%,100%{clip-path:inset(0 0 0 0)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
@keyframes hl{0%,24%{color:#FFFFFF}27%,98%{color:#6B717D}100%{color:#FFFFFF}}
@keyframes fill{0%{transform:scaleX(0);opacity:1}25%{transform:scaleX(1);opacity:1}26%,100%{transform:scaleX(1);opacity:0}}
@keyframes cyc{0%{opacity:0;transform:translateY(14px)}3%,24%{opacity:1;transform:none}27%,100%{opacity:0;transform:translateY(-14px)}}
@keyframes parea{0%,8%{opacity:0}16%,100%{opacity:1}}
@keyframes rowin{0%{opacity:0;transform:translateY(8px)}4%,100%{opacity:1;transform:none}}
@keyframes bar{0%{transform:scaleX(0)}10%,100%{transform:scaleX(1)}}
@keyframes segin{0%{opacity:0}5%,100%{opacity:1}}
@keyframes dot{0%,100%{opacity:1}50%{opacity:.35}}
/* hero chart */
.hc-wipe{animation:wipe 2.6s cubic-bezier(.4,0,.2,1) .5s both}
.hc-dep{stroke-dasharray:4 5;opacity:0;animation:fadein 1s ease 1.6s both}
.hc-area{opacity:0;animation:fadein 1.2s ease 2s both}
.hc-end{opacity:0;animation:fadein .6s ease 3s both}
/* phone */
.phone{position:relative;width:289px;height:625px;border-radius:46px;padding:0;box-sizing:border-box;background:#0A0B0D;border:1px solid rgba(255,255,255,0.16);box-shadow:0 0 0 6px #17191D,0 0 0 7px rgba(255,255,255,0.10),0 40px 80px rgba(0,0,0,0.55);overflow:hidden;flex:none}
.island{position:absolute;top:10px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:999px;background:#000000;z-index:5}
.scr{position:absolute;left:0;top:0;width:390px;height:844px;transform-origin:0 0;transform:scale(.741);overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;animation:cyc 16s cubic-bezier(.3,.6,.2,1) infinite both;background:linear-gradient(180deg,#1E2127 0%,#121418 45%,#0A0B0D 100%)}
.blob{position:absolute;border-radius:999px;pointer-events:none}
.glass{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.11)}
.sub{font-size:12px;color:#A7ADB8}
.pr{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.07)}
.logo{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex:none}
.pill{display:inline-block;margin-top:4px;padding:3px 8px;border-radius:8px;font-size:13px;font-weight:600}
.etf{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:5px;font-size:10px;font-weight:600;color:#C3C8D1;background:rgba(255,255,255,0.10);vertical-align:2px}
.nav{position:absolute;left:16px;right:16px;bottom:26px;display:flex;gap:10px;align-items:center}
.lt{height:46px;min-width:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;color:#A7ADB8;font-size:14px;font-weight:500}
.lt.on{padding:0 14px;background:rgba(255,255,255,0.16);color:#FFFFFF}
.tab{padding:10px 0 11px;font-size:15px;font-weight:500;color:#A7ADB8;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:#FFFFFF;font-weight:600;border-bottom-color:#E6ECF5}
.chipp{font-size:13px;color:#A7ADB8;font-weight:500;padding:6px 10px;border-radius:999px}
.chipp.on{background:rgba(255,255,255,0.14);color:#FFFFFF;font-weight:600}
.ir{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid rgba(255,255,255,0.07);font-size:15px;line-height:1.35;animation:rowin 16s ease infinite both}
.ck{width:22px;height:22px;border-radius:999px;background:#E6ECF5;color:#14171C;display:flex;align-items:center;justify-content:center;flex:none;margin-top:-1px}
.seg{animation:segin 16s ease infinite both}
.dots{display:flex;gap:6px;justify-content:center;margin-top:26px}
.dt{position:relative;width:34px;height:3px;border-radius:2px;background:rgba(255,255,255,0.14);overflow:hidden}
.dt i{position:absolute;inset:0;background:#E6ECF5;transform-origin:left;animation:fill 16s linear infinite both}
.d0{animation-delay:0s!important}.d1{animation-delay:-12s!important}.d2{animation-delay:-8s!important}.d3{animation-delay:-4s!important}
.still .slide,.still .rt,.still .rbar,.still .dt i,.still .ir,.still .seg,.still .tb,.still .pl,.still .pa{animation-play-state:paused}
.still .rv,.still .hc-wipe,.still .hc-dep,.still .hc-area,.still .hc-end{animation:none;opacity:1;stroke-dashoffset:0}
@media (prefers-reduced-motion: reduce){.lp *{animation-duration:.01s!important;animation-iteration-count:1!important}}
@media (max-width:760px){
 .wrap{padding:0 20px}
 .h1{font-size:44px;letter-spacing:-1.6px;line-height:1.02}
 .h2{font-size:32px;letter-spacing:-0.9px}
 .lead{font-size:17px}
 .hero-grid,.feat,.beta{grid-template-columns:minmax(0,1fr);gap:28px}
 .feat .phwrap{order:-1}
 .rt{font-size:22px;letter-spacing:-0.4px}
 .rd{font-size:15px}
 .row{grid-template-columns:34px minmax(0,1fr);padding:20px 0 18px}
 .rn{padding-top:5px}
 .inp{font-size:24px;letter-spacing:-0.5px}
 .stmt{font-size:30px!important;letter-spacing:-0.8px!important}
 .hide-m{display:none}
 .sp-l{padding-top:72px!important}
}
.hero2{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:40px;align-items:center;min-height:760px;padding-top:12px;padding-bottom:40px}
.hero2-stage{position:relative;height:660px}
.ph-back{position:absolute;right:0;top:0;transform:scale(.92);transform-origin:top right;opacity:.92}
.ph-front{position:absolute;left:0;top:34px}
.rvp{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.slide.static{opacity:1;animation:none}
.tmap{position:relative}
.tile{position:absolute;border-radius:7px;padding:5px 7px;box-sizing:border-box;overflow:hidden;animation:pop .6s cubic-bezier(.2,.8,.2,1) both}
.tl{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts{display:block;font-size:11px;opacity:0.85;margin-top:1px;white-space:nowrap;overflow:hidden}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08)}
.bc{background:#0A0B0D;padding:20px 20px 36px;min-width:0}
.bc > .eyebrow,.bc > div:not(.frag),.bc > p{padding:0 12px}
.frag{position:relative;height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:20px;background:linear-gradient(180deg,#1E2127 0%,#121418 70%,#0E1013 100%);border:1px solid rgba(255,255,255,0.09);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.frag::before{content:"";position:absolute;width:420px;height:300px;left:-200px;top:-170px;border-radius:999px;background:radial-gradient(closest-side, rgba(96,132,190,0.40), rgba(96,132,190,0));pointer-events:none}
.frag::after{content:"";position:absolute;width:420px;height:300px;right:-210px;top:-170px;border-radius:999px;background:radial-gradient(closest-side, rgba(205,172,128,0.30), rgba(205,172,128,0));pointer-events:none}
.frag > *{position:relative;z-index:1}
.wipe1{animation:wipe 2s cubic-bezier(.4,0,.2,1) .4s both}
.fillx{transform-origin:left;animation:barx 1.4s cubic-bezier(.3,.6,.2,1) .5s both}
@keyframes barx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.grow{transform-origin:bottom;animation:growy .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes growy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.ir2{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.07);font-size:15px;line-height:1.35;animation:rise .6s ease both}
.w{color:#33373F;animation:lit .5s ease both}
@keyframes lit{from{color:#33373F}to{color:#FFFFFF}}
.still .rvp,.still .tile,.still .wipe1,.still .fillx,.still .grow,.still .ir2,.still .w{animation:none}
@media (max-width:1100px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
 .hero2{grid-template-columns:minmax(0,1fr);min-height:0;gap:36px;padding-top:24px}
 .hero2 .h1{font-size:40px!important;letter-spacing:-1.4px!important}
 .hero2-stage{height:560px;margin:0 -20px;overflow:hidden}
 .ph-front{left:20px;top:0}
 .ph-back{right:-150px;top:30px}
 .bento{grid-template-columns:minmax(0,1fr)}
 .bc{padding:28px 20px 32px}
 .frag{height:auto;min-height:180px}
}
.lp{position:relative}
.lp > header,.lp > section,.lp > footer{position:relative;z-index:1}
.bgfx{position:absolute;left:0;right:0;pointer-events:none;z-index:0;overflow:hidden}
.lang{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.11)}
.lang button{border:0;background:transparent;color:#A7ADB8;font-family:inherit;font-size:13px;font-weight:600;height:30px;min-width:40px;border-radius:999px;cursor:pointer}
.lang button.on{background:rgba(255,255,255,0.14);color:#FFFFFF}
.gt{background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:rise .9s cubic-bezier(.2,.7,.2,1) both,gshift 14s ease-in-out infinite alternate}
@keyframes gshift{from{background-position:0% 50%}to{background-position:100% 50%}}
.still .bgfx *,.still .gt{animation-play-state:paused}
.duo{position:absolute;border-radius:999px;filter:none;will-change:transform}
.duo.c{width:1100px;height:760px;left:-280px;top:-300px;background:radial-gradient(closest-side, rgba(96,132,190,0.42) 0%, rgba(96,132,190,0.14) 55%, rgba(96,132,190,0) 100%);animation:dc 26s ease-in-out infinite alternate}
.duo.w{width:1000px;height:720px;right:-300px;top:-240px;background:radial-gradient(closest-side, rgba(205,172,128,0.34) 0%, rgba(205,172,128,0.12) 55%, rgba(205,172,128,0) 100%);animation:dw 32s ease-in-out infinite alternate}
@keyframes dc{0%{transform:translate(0,0) scale(1)}50%{transform:translate(180px,90px) scale(1.12)}100%{transform:translate(60px,200px) scale(.95)}}
@keyframes dw{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-200px,120px) scale(1.08)}100%{transform:translate(-80px,-40px) scale(1.15)}}
.gt{background-image:linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 45%,#D3DCE9 66%,#E6DCCB 84%,#FFFFFF 100%)}


/* facts strip */
.facts-sec{padding-top:40px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);border-radius:20px;overflow:hidden}
.fact{background:rgba(10,11,13,0.82);padding:28px 28px 30px;min-width:0}
.fbig{font-size:26px;font-weight:600;letter-spacing:-0.6px;margin-top:10px}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px}
.bchip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);font-size:13px;font-weight:500;color:#E6ECF5}
.bchip.soon{background:transparent;border:1px dashed rgba(255,255,255,0.28);color:#A7ADB8}
.fsub{margin:14px 0 0;font-size:14px;line-height:1.5;color:#A7ADB8}
@media (max-width:760px){.facts{grid-template-columns:minmax(0,1fr)}.fact{padding:22px 20px 24px}}
/* ambient duotone over the whole page: slow drift by time, shifted further by scroll */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ab{position:absolute;border-radius:999px;will-change:transform}
.ab1{width:1100px;height:780px;left:-320px;top:-260px;background:radial-gradient(closest-side, rgba(96,132,190,0.40), rgba(96,132,190,0.12) 55%, rgba(96,132,190,0));animation:dc 26s ease-in-out infinite alternate}
.ab2{width:1000px;height:720px;right:-300px;top:-200px;background:radial-gradient(closest-side, rgba(205,172,128,0.30), rgba(205,172,128,0.10) 55%, rgba(205,172,128,0));animation:dw 32s ease-in-out infinite alternate}
.ab3{width:900px;height:700px;left:-260px;top:42%;background:radial-gradient(closest-side, rgba(205,172,128,0.20), rgba(205,172,128,0));animation:dw 36s ease-in-out infinite alternate-reverse}
.ab4{width:1000px;height:760px;right:-320px;top:58%;background:radial-gradient(closest-side, rgba(96,132,190,0.28), rgba(96,132,190,0));animation:dc 30s ease-in-out infinite alternate-reverse}
.ab5{width:1200px;height:800px;left:20%;bottom:-420px;background:radial-gradient(closest-side, rgba(96,132,190,0.26), rgba(205,172,128,0.10) 60%, rgba(205,172,128,0));animation:dc 40s ease-in-out infinite alternate}
/* broker strip */
.strip{padding-top:140px;overflow:hidden}
.mq{overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,0.08);padding:18px 0}
.mq2{border-bottom:1px solid rgba(255,255,255,0.08)}
.mq-in{display:inline-flex;align-items:center;gap:40px;padding-right:40px;animation:mq 48s linear infinite}
.mq2 .mq-in{animation-direction:reverse;animation-duration:56s}
.mq span{font-size:96px;font-weight:600;letter-spacing:-3px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.22)}
.mq2 span{color:rgba(255,255,255,0.06);-webkit-text-stroke:0}
.mq i{width:14px;height:14px;border-radius:999px;background:#E6ECF5;opacity:.35;flex:none}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.still .ab,.still .mq-in{animation-play-state:paused}
/* scroll mode: only when the page scrolls in a real window (the script adds .scrolly).
   On the canvas, where the whole artboard is visible at once, the time-based loop stays. */
.scrolly .sr{animation:srin linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
@keyframes srin{from{opacity:0;transform:translateY(48px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.scrolly .ph-front{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .3s both,pfront linear both;animation-timeline:auto,scroll(root);animation-range:normal,0px 900px}
.scrolly .ph-back{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .5s both,pback linear both;animation-timeline:auto,scroll(root);animation-range:normal,0px 900px}
@keyframes pfront{from{translate:0 0}to{translate:0 -90px}}
@keyframes pback{from{translate:0 0;rotate:0deg}to{translate:40px 60px;rotate:4deg}}
.scrolly .ab1,.scrolly .ab2{animation:dc 26s ease-in-out infinite alternate,amb1 linear both;animation-timeline:auto,scroll(root)}
@keyframes amb1{from{translate:0 0}to{translate:0 -40vh}}
.scrolly .mq-in{animation-duration:30s}
.scrolly .feat .phwrap{position:sticky;top:110px}
.scrolly .row{min-height:420px;align-content:start}
.scrolly .rt,.scrolly .rbar,.scrolly .dt i,.scrolly .feat .slide,.scrolly .feat .slide *{animation:none!important}
.scrolly .rt{color:#6B717D;transition:color .4s ease}
.scrolly .row.on .rt{color:#FFFFFF}
.scrolly .rbar{transform:scaleX(0);opacity:1;transition:transform .6s cubic-bezier(.3,.6,.2,1)}
.scrolly .row.on .rbar{transform:scaleX(1)}
.scrolly .feat .slide{opacity:0;transform:translateY(16px) scale(.985);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.scrolly .feat .slide.on{opacity:1;transform:none}
.scrolly .dt i{transform:scaleX(0);opacity:1;transition:transform .5s ease}
.scrolly .dt.on i{transform:scaleX(1)}
@media (max-width:760px){.mq span{font-size:56px;letter-spacing:-1.5px}.strip{padding-top:72px}.scrolly .row{min-height:0}.scrolly .feat .phwrap{position:static}}

.visD{position:absolute;left:0;right:0;bottom:-20px;height:600px;pointer-events:none;opacity:.38;-webkit-mask-image:linear-gradient(0deg,#000 50%,transparent);mask-image:linear-gradient(0deg,#000 50%,transparent)}
.visD svg{display:block}

.drow{animation:dslide linear infinite}
@keyframes dslide{from{transform:translateX(0)}to{transform:translateX(calc(var(--p) * -1))}}
.d2base{position:absolute;inset:0;opacity:.75}
.d2scan{position:absolute;inset:0;filter:brightness(2.2) saturate(1.2);-webkit-mask-image:linear-gradient(90deg,transparent,#000 50%,transparent);mask-image:linear-gradient(90deg,transparent,#000 50%,transparent);-webkit-mask-size:26% 100%;mask-size:26% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:d2sweep 7s cubic-bezier(.45,0,.55,1) infinite}
@keyframes d2sweep{from{-webkit-mask-position:-40% 0;mask-position:-40% 0}to{-webkit-mask-position:140% 0;mask-position:140% 0}}

/* D2 sits under the whole hero: behind the text and both phones */
.hero-bg{position:absolute;left:0;right:0;top:0;height:900px;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg .visD{bottom:0;opacity:.34}
.still .hero-bg *{animation-play-state:paused}
.scrolly .hero-bg{animation:hbg linear both;animation-timeline:scroll(root);animation-range:0px 900px}
@keyframes hbg{from{opacity:1;translate:0 0}to{opacity:.2;translate:0 120px}}
@media (max-width:760px){.hero-bg{height:760px}.hero-bg .visD{height:420px}.hero-bg .visD svg{height:420px}}

.frag{padding:22px;box-sizing:border-box}
.frag > div{width:100%!important;max-width:300px}
.frag > div > svg{width:100%;height:auto}
.frag .tmap{flex:none}
.frag > div.glass{background:transparent;border:0;padding:0!important;border-radius:0}
@media (max-width:760px){
 .frag{padding:18px;min-height:0;height:auto}
 .frag > div.glass{max-width:none}
 .frag .tmap{width:300px!important;max-width:none;transform:scale(.86);transform-origin:center;margin:-14px -21px!important}
}

/* site-only additions */
.badge-img{display:block;height:44px;width:auto;opacity:.6}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.form-msg{min-height:22px;margin-top:14px;font-size:14px;color:#A7ADB8}
.form-msg.ok{color:#34E39A}.form-msg.err{color:#FF5C64}
.cf-turnstile{margin-top:16px;min-height:0}
.lang a{display:inline-flex;align-items:center;justify-content:center;color:#A7ADB8;font-size:13px;font-weight:600;height:30px;min-width:40px;border-radius:999px;text-decoration:none}
.lang a.on{background:rgba(255,255,255,0.14);color:#FFFFFF}
.btn[disabled]{opacity:.6;cursor:default}

.chip-soon{margin-left:4px}

/* narrow screens: one whole phone, centred, nothing clipped, no parallax */
@media (max-width:760px){
 .hero2-stage,.scrolly .hero2-stage{height:auto;margin:0;overflow:visible;display:flex;flex-direction:column;align-items:center;padding-bottom:8px}
 .hero2-stage .ph-back,.scrolly .hero2-stage .ph-back{display:none}
 .hero2-stage .ph-front,.scrolly .hero2-stage .ph-front{position:relative;left:auto;top:auto;translate:none;rotate:none;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .3s both;animation-timeline:auto;animation-range:normal;margin:0 auto}
 .hero2-stage > .muted{position:static!important;margin-top:18px;text-align:center}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.hero2-stage .ph-front{animation:none}}

.form-msg.ok{line-height:1.5;color:#E6ECF5}
.survey-btn{margin-top:14px;text-decoration:none}

/* chapters on narrow screens: no scroll-linked switching, every chapter has its own static phone screen under its text */
.ph-step{display:none}
@media (max-width:760px){
 .feat .phwrap{display:none!important}
 .row .ph-step{display:block;position:relative;grid-column:1 / -1;margin:22px auto 8px;animation:none}
 .ph-step .slide,.ph-step .slide *{animation:none!important}
 .ph-step .slide{opacity:1!important;transform:none!important;transition:none!important}
 .scrolly .row .rt,.row .rt{color:#FFFFFF}
 .scrolly .row .rbar{transform:scaleX(1)}
}