/* landing page only: the scroll story with the tablet, the strip, the pillars, the fee table, the spinning card */
.story{position:relative;height:420vh;background:var(--ink)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:var(--d1);
  --hero:0;--tin:0;--side:0;--rx:0;--ry:0;--mx:50%;--my:40%;--side-x:17vw;--side-y:0px}
.bg{position:absolute;inset:0;background:radial-gradient(1100px 600px at 50% -12%,#2b2d34,transparent 62%),radial-gradient(900px 520px at 88% 112%,#1e1f26,transparent 60%),var(--ink)}
.spot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx) var(--my),#ffffff10,transparent 60%)}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.06;animation:grain 1.2s steps(5) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-2%,5%)}80%{transform:translate(4%,2%)}}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,#000a)}

.hero{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter) 20vh;
  opacity:calc(1 - var(--hero));transform:translateY(calc(var(--hero) * -60px));filter:blur(calc(var(--hero) * 8px))}
.hero h1{font:800 clamp(40px,7vw,94px)/1.02 var(--display);letter-spacing:-.05em}
.hero h1 .pre{display:block;color:var(--d2)}
.word-window{display:inline-block;position:relative;height:1.18em;vertical-align:bottom;overflow:hidden;transition:width .6s var(--ease)}
.word{position:absolute;left:0;top:0;white-space:nowrap;line-height:1.12;background:linear-gradient(180deg,#fff 35%,#b3b8c1);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .65s var(--ease),opacity .65s,filter .65s}
.word.static{position:relative}
.word.below{transform:translateY(100%);opacity:0;filter:blur(6px)}
.word.above{transform:translateY(-100%);opacity:0;filter:blur(6px)}
.hero .sub{color:var(--d2);font-size:clamp(16px,1.6vw,19px);max-width:46ch;margin-top:22px}
.hero .facts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.hero .facts span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid #ffffff1c;font:700 12.5px var(--display);color:var(--d2)}
.hero .facts b{color:#fff}
.actions{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.pause{margin-top:22px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid #ffffff1c;font:500 12px var(--body);color:var(--d3);transition:color .2s,border-color .2s}
.pause:hover{color:var(--d1);border-color:#ffffff40}
.pause svg{width:10px;height:10px}
.hint{position:absolute;left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));bottom:24px;z-index:3;display:flex;align-items:center;gap:8px;font:700 11px var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--d3);opacity:calc(1 - var(--hero) * 2)}
.hint i{font-style:normal;animation:bob 1.6s var(--ease) infinite}
@keyframes bob{50%{transform:translateY(4px)}}

.device{position:absolute;inset:0;z-index:2;display:grid;place-items:center;perspective:1800px;pointer-events:none}
.tablet{position:relative;width:min(700px,56vw);aspect-ratio:16/11;transform-style:preserve-3d;will-change:transform;
  transform:translate3d(calc(var(--side) * var(--side-x)),calc((1 - var(--tin)) * 62vh + var(--side) * var(--side-y)),0)
            rotateX(calc((1 - var(--tin)) * 34deg + var(--ry) * 1deg)) rotateY(calc(var(--rx) * 1deg))
            scale(calc(.8 + var(--tin) * .14 - var(--side) * .06))}
.rim{position:absolute;inset:0;border-radius:34px;padding:14px;background:linear-gradient(145deg,#3b3d43,#1b1c20 42%,#2d2f34);box-shadow:inset 0 0 0 1px #ffffff14,0 60px 120px -40px #000,0 30px 60px -30px #000c}
.screen{position:relative;height:100%;border-radius:22px;overflow:hidden;background:var(--paper)}
.tb{position:absolute;background:#2b2d32;border-radius:3px}
.tb-p{top:-3px;right:80px;width:46px;height:4px}.tb-v1{right:-3px;top:70px;width:4px;height:40px}.tb-v2{right:-3px;top:120px;width:4px;height:40px}
.glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff26 0%,transparent 32%,transparent 72%,#ffffff10)}
.home-bar{position:absolute;bottom:7px;left:50%;width:110px;height:4px;margin-left:-55px;border-radius:4px;background:#17181a33}

/* the app inside the tablet, drawn at 680px wide and scaled to fit */
.app{position:absolute;left:0;top:0;width:680px;transform-origin:0 0;display:grid;grid-template-columns:180px 1fr;color:var(--t1);font-size:11px}
.app-side{border-right:1px solid var(--line);padding:16px 10px;display:flex;flex-direction:column;gap:3px;background:var(--paper-2)}
.app-brand{display:flex;align-items:center;gap:6px;font:800 14px var(--display);letter-spacing:-.04em;margin:0 6px 14px}
.app-brand svg{width:18px;height:18px}
.side-lbl{font:700 8.5px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin:6px 8px 4px}
.side-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:9px;color:var(--t2);font-weight:500;transition:background .4s,color .4s,box-shadow .4s}
.side-item svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.side-item.on{background:#fff;color:var(--t1);box-shadow:0 1px 2px #0000000f,0 0 0 1px var(--line)}
.side-bottom{margin-top:auto;padding:10px;border-radius:12px;border:1px solid var(--line);background:#fff}
.side-bottom b{display:block;font:700 11px var(--display)}
.side-bottom small{color:var(--t3);font-size:9.5px}
.app-main{display:flex;flex-direction:column;min-width:0}
.app-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.app-title{font:800 14px var(--display);letter-spacing:-.03em}
.live{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:#2f9e6614;color:var(--up);font-weight:700;font-size:9px}
.live i{width:5px;height:5px;border-radius:50%;background:var(--up);animation:blink 1.6s infinite}
.mini-btn{margin-left:auto;padding:6px 11px;border-radius:999px;background:var(--ink-2);color:#fff;font-weight:700;font-size:10px;white-space:nowrap}
.screens{position:relative;flex:1}
.scr{position:absolute;inset:0;padding:14px;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.scr.on{opacity:1;transform:none}
.rcpt{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px 14px}
.rcpt-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.rcpt-h b{font:800 15px var(--display);letter-spacing:-.03em}
.rcpt-h small{color:var(--t3);font-size:9.5px}
.rl{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--paper-2);font-size:11px;color:var(--t2)}
.rl b{color:var(--t1);font-weight:700}
.rl.z b{color:var(--up)}
.rl.tot{border-bottom:0;padding-top:9px}
.rl.tot span,.rl.tot b{font:800 13px var(--display);color:var(--t1)}
.discs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.disc{aspect-ratio:1.25;border-radius:11px;border:1px solid var(--line);background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--a) 40%,#fff) 0 26%,transparent 27%),radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--a) 12%,#fff),var(--paper-2) 80%)}
.chart{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px 14px}
.chart svg{width:100%;height:150px}
.chart-l{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:var(--t3)}
.chart-l b{display:block;font:800 13px var(--display);color:var(--t1)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.tile2{border:1px solid var(--line);border-radius:12px;background:#fff;padding:8px 10px}
.tile2 small{display:block;color:var(--t3);font-size:8.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.tile2 b{font:800 14px var(--display);letter-spacing:-.02em}
.chk{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px 14px}
.chk-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.chk-h b{font:800 15px var(--display);letter-spacing:-.03em}
.chk .rl b.g{color:var(--up)}
.blocks{display:flex;gap:6px;margin-top:10px}
.blk{flex:1;border-radius:10px;border:1px solid var(--line);background:#fff;padding:8px;font-size:9.5px;color:var(--t3)}
.blk b{display:block;font:800 12px var(--display);color:var(--t1)}
.blk.zero{background:#2f9e660d;border-color:#2f9e6640}

.chapters{position:absolute;top:0;bottom:0;z-index:4;left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));width:min(390px,32vw)}
.chapter{position:absolute;left:0;top:50%;opacity:0;visibility:hidden;transform:translateY(-50%) translateY(26px);transition:opacity .5s var(--ease),transform .7s var(--ease),visibility .5s}
.chapter.on{opacity:1;visibility:visible;transform:translateY(-50%)}
.chapter .num{font:700 12px var(--display);letter-spacing:.16em;color:var(--d3)}
.chapter h2{font:800 clamp(32px,3.6vw,52px)/1.02 var(--display);letter-spacing:-.045em;margin:14px 0 16px}
.chapter h2 span{display:block;color:var(--d3)}
.chapter p{color:var(--d2);margin-bottom:24px}
.dots{position:absolute;right:var(--gutter);top:50%;z-index:5;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:12px;opacity:var(--side)}
.dots button{display:flex;align-items:center;gap:10px;font:700 11px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--d3);transition:color .3s}
.dots button i{width:6px;height:6px;border-radius:3px;background:currentColor;transition:height .35s var(--ease)}
.dots button span{opacity:0;transform:translateX(6px);transition:.25s var(--ease)}
.dots button:hover span,.dots button.on span{opacity:1;transform:none}
.dots button.on{color:#fff}.dots button.on i{height:22px}

.strip{background:var(--ink);color:var(--d3);border-top:1px solid #ffffff10;overflow:hidden;padding:18px 0}
.strip-track{display:flex;width:max-content;animation:marq 36s linear infinite;font:700 13px var(--display);letter-spacing:.16em;text-transform:uppercase}
.strip-track span{display:flex;align-items:center;gap:40px;padding-right:40px;white-space:nowrap}
.strip-track span::after{content:"✦";color:var(--gold)}
@keyframes marq{to{transform:translateX(-50%)}}

/* three reasons */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:24px;padding:14px 14px 26px}
.pillar .vis{height:190px;border-radius:16px;background:var(--paper-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;margin-bottom:22px;padding:16px;position:relative}
.pillar .n{font:700 12px var(--display);letter-spacing:.14em;color:var(--t3);padding:0 8px}
.pillar h3{font:800 22px var(--display);letter-spacing:-.035em;margin:6px 8px 8px}
.pillar p{color:var(--t2);font-size:15px;padding:0 8px}
.pillar ul{list-style:none;padding:0 8px;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.pillar li{position:relative;padding-left:26px;font-size:14.5px;color:var(--t2)}
.pillar li b{color:var(--t1)}
.pillar li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:#2f9e661c url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232f9e66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat}
.zero-big{font:800 86px/1 var(--display);letter-spacing:-.06em;background:linear-gradient(180deg,var(--t1),#5b5f68);-webkit-background-clip:text;background-clip:text;color:transparent}
.zero-row{display:flex;gap:8px}
.zero-row span{font:700 11px var(--display);padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--t2)}
.mini-curve{width:100%;max-width:300px;height:120px}
.flow{display:flex;align-items:center;gap:10px;width:100%;max-width:290px}
.who{font:700 12px var(--display);padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);white-space:nowrap}
.line{flex:1;height:2px;position:relative;background:repeating-linear-gradient(90deg,#c9cdd4 0 6px,transparent 6px 10px)}
.line i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px #d4a24c33;animation:travel 2.4s var(--ease) infinite}
@keyframes travel{70%,100%{left:calc(100% - 10px)}}
.vis .fee{font-size:12px;color:var(--t3)}
.vis .fee b{color:var(--t1)}

/* fees table */
.fees{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.fees .note{color:var(--t2);font-size:15px;margin-top:16px;max-width:44ch}
.fee-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;font-size:15px}
.fee-table th{font:700 11.5px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--t3);text-align:left;padding:14px 18px;background:var(--paper);border-bottom:1px solid var(--line)}
.fee-table td{padding:13px 18px;border-bottom:1px solid var(--paper-2);color:var(--t2)}
.fee-table td:last-child{text-align:right;font:800 15px var(--display);color:var(--t1);white-space:nowrap}
.fee-table td.zero{color:var(--up)!important}
.fee-table tr.grp td{background:var(--paper);font:700 11.5px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--t3);padding:10px 18px;text-align:left!important}
.fee-table tr:last-child td{border-bottom:0}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.step{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px 22px 26px}
.step .n{font:800 13px var(--display);letter-spacing:.14em;color:var(--t3)}
.step h3{font:800 22px var(--display);letter-spacing:-.035em;margin:10px 0 8px}
.step p{color:var(--t2);font-size:15px}

/* dark band with the spinning card */
.flag{position:relative;background:var(--ink);color:var(--d1);padding:130px 0;overflow:hidden}
.flag::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 420px at 28% 50%,#8b7cf628,transparent 70%),radial-gradient(500px 360px at 30% 60%,#d4a24c1c,transparent 70%)}
.flag-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.c3-wrap{perspective:1200px;display:flex;flex-direction:column;align-items:center;gap:18px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.c3-wrap:active{cursor:grabbing}
.card3d{position:relative;width:min(300px,68vw);aspect-ratio:5/7;transform-style:preserve-3d;transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
.face{position:absolute;inset:0;border-radius:22px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 40px 80px -30px #000,inset 0 0 0 1px #ffffff22}
.face svg{width:100%;height:100%}
.front::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;background:linear-gradient(105deg,transparent 30%,#ffffff80 46%,#ffd6f5 50%,#c6f3ff 54%,transparent 70%);background-size:300% 100%;background-position:calc(var(--h,50) * 1%) 0}
.back{transform:rotateY(180deg);display:grid;place-items:center;background:radial-gradient(circle,#2b2d34,#111214 72%)}
.back::before{content:"";position:absolute;inset:14px;border-radius:14px;border:1px solid #ffffff22;background-image:radial-gradient(#ffffff16 1px,transparent 1.6px);background-size:14px 14px}
.back svg{position:relative;width:96px;height:96px;color:var(--d1)}
.drag-hint{font:700 11px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--d3)}
.flag .kicker{color:var(--d3)}
.flag .big span{color:var(--d3)}
.flag-copy>p{color:var(--d2);max-width:46ch;margin-top:20px}
.flag-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px;margin:28px 0 32px;padding:22px 0;border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff14}
.flag-stats small{display:block;font:700 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--d3);margin-bottom:6px}
.flag-stats b{font:800 26px var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.flag-stats em{font-style:normal;font-size:13px;color:var(--d3);font-weight:600;margin-left:6px}
.flag .actions{justify-content:flex-start;margin-top:0}

.end{padding:130px 0 0;text-align:center}
.end .big{margin-bottom:18px}
.end p{color:var(--t2);margin:0 auto 28px;max-width:42ch}
.giant{display:flex;justify-content:center;overflow:hidden;margin-top:70px;font:800 clamp(90px,24vw,330px)/.8 var(--display);letter-spacing:-.065em;user-select:none}
.giant span{display:inline-block;background:linear-gradient(180deg,#e3e6ea,var(--paper) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(100%);transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.giant.in span{transform:none}

@media (max-width:900px){
  .stage{--side-x:0px;--side-y:18vh}
  .tablet{width:92vw}
  .rim{border-radius:24px;padding:9px}.screen{border-radius:16px}
  .chapters{left:var(--gutter);right:var(--gutter);width:auto;top:80px;bottom:auto}
  .chapter{top:0;transform:translateY(16px)}
  .chapter.on{transform:none}
  .chapter h2{font-size:30px;margin:8px 0 10px}
  .chapter p{font-size:14px;margin-bottom:14px}
  .chapter .btn{height:40px;font-size:14px}
  .dots{display:none}
  .pillars,.steps{grid-template-columns:1fr}
  .fees{grid-template-columns:1fr;gap:24px}
  .flag{padding:90px 0}
  .flag-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:520px){
  .hero .facts span{font-size:11.5px}
  .fee-table td,.fee-table th{padding:11px 12px;font-size:14px}
  .flag-stats b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.giant span{transform:none}}