/* Raul landing, s81d. Simple and clean: the app's design language (warm canvas, soft glass, Space Grotesk,
   the money colours) without copying any app screen. Light, centred, lots of air, and a few motions that each
   say one thing: things gather into one place, words light up as you read, the record fills, the backup completes. */
:root{
  --bg:#FBFAF7; --bg2:#F2F0EA; --ink:#111318; --text:#2A2D35; --sub:#6B6F7A; --line:rgba(17,19,24,.10);
  --mid:#111318; --mid-soft:#FFF6C7; --hl:#FFE14D; --hl-2:#FFD000; --acc:#FF5B1F; --acc-soft:#FFE9DF;
  --violet:#7C5CFF; --teal:#0F9D8A; --teal-soft:#DDF4EF; --amber:#E0A100; --amber-soft:#FFF4D1; --orange:#FF5B1F; --red:#E5484D;
  --glass:rgba(255,255,255,.78); --edge:inset 0 0 0 1px rgba(17,19,24,.08); --shadow:0 1px 2px rgba(17,19,24,.04),0 16px 36px rgba(17,19,24,.07);
  --b1:rgba(255,225,77,.30); --b2:rgba(255,91,31,.10); --b3:rgba(15,157,138,.08);
  --f-h:'Space Grotesk',Arial,sans-serif; --f-b:'Inter',Arial,sans-serif; --f-m:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.32,.72,0,1); --max:1160px; color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none;background:radial-gradient(30% 28% at 15% 10%,var(--b1),transparent 70%),radial-gradient(28% 26% at 88% 22%,var(--b2),transparent 70%),radial-gradient(34% 30% at 60% 95%,var(--b3),transparent 70%);filter:blur(30px);animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(3%,-2%) scale(1.05)}}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:clamp(18px,5vw,40px)}
h1,h2,h3{font-family:var(--f-h);color:var(--ink);margin:0;letter-spacing:-.03em;text-wrap:balance}
h2{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.04;font-weight:700}
h3{font-size:1.25rem;font-weight:700;letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--mid);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.glass{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);box-shadow:var(--edge),var(--shadow);border-radius:24px}
.kick{font:700 .74rem var(--f-b);letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.lede{font-size:1.12rem;color:var(--sub);max-width:58ch}
section{padding-block:clamp(80px,11vw,140px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 1rem/1 var(--f-b);padding:1em 1.5em;border-radius:999px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(1px) scale(.97)}
.btn.pri{background:var(--ink);color:#fff}
.btn.pri:hover{box-shadow:0 12px 26px rgba(16,23,58,.22)}
.btn.blue{background:var(--ink);color:#fff}
.btn.yel{background:var(--hl);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn .ar{transition:transform .25s var(--ease)} .btn:hover .ar{transform:translateX(4px)}
.r{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
html.rv .r:not(.in){opacity:0;transform:translateY(26px)}

/* nav: one floating glass pill */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(var(--max),calc(100% - 28px));display:flex;align-items:center;gap:18px;padding:9px 9px 9px 18px;border-radius:999px;transition:box-shadow .3s}
.nav .logo{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none}
.nav ul{display:flex;gap:24px;list-style:none;margin:0 0 0 auto;padding:0;font:500 .9rem var(--f-b);color:var(--sub)}
.nav ul a{text-decoration:none} .nav ul a:hover{color:var(--ink)}
.nav .acts{display:flex;align-items:center;gap:12px}
.nav .si{font:600 .9rem var(--f-b);text-decoration:none;color:var(--sub)} .nav .si:hover{color:var(--ink)}
.nav .btn{padding:.7em 1.15em;font-size:.88rem}
@media (max-width:860px){.nav ul{display:none}.nav .acts{margin-left:auto}}
@media (max-width:420px){.nav .si{display:none}}

/* hero */
.hero{padding-top:clamp(130px,16vw,180px);padding-bottom:40px;text-align:center;overflow:hidden}
html{overflow-x:clip}

.hero .kick{display:inline-block;margin-bottom:22px}
h1{font-size:clamp(3.1rem,9.6vw,8.4rem);line-height:.9;font-weight:700;letter-spacing:-.055em;text-transform:none}
h1 .hl{position:relative;white-space:nowrap;display:inline-block;isolation:isolate}
h1 .hl::before{content:"";position:absolute;left:-.08em;right:-.08em;top:.52em;bottom:.02em;z-index:-1;background:var(--hl);border-radius:.08em;transform:scaleX(0) skewX(-6deg);transform-origin:left;animation:mark .7s 1.05s var(--ease) forwards}
@keyframes mark{to{transform:scaleX(1) skewX(-6deg)}}
h1 .w{animation-name:wIn2}
@keyframes wIn2{0%{opacity:0;transform:translateY(.4em) scale(.92);filter:blur(10px)}70%{opacity:1;transform:translateY(-.03em) scale(1.02);filter:none}100%{opacity:1;transform:none;filter:none}}
.shout{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.shout span{display:inline-flex;align-items:center;gap:8px;padding:.6em 1.05em;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink);font:700 .95rem var(--f-h);color:var(--ink);opacity:0;transform:translateY(10px);animation:shIn .6s var(--ease) forwards;animation-delay:calc(1.2s + var(--i)*.08s)}
@keyframes shIn{to{opacity:1;transform:none}}
.shout span i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.shout .more{box-shadow:none;background:transparent;font:500 .9rem var(--f-b);color:var(--sub)}
.chip.big span{font:700 .92rem var(--f-h);padding:.6em 1em;box-shadow:inset 0 0 0 1.5px var(--ink);background:#fff}
@media (max-width:560px){.chip.big span{font-size:.76rem;padding:.45em .75em}}
@media (prefers-reduced-motion:reduce){.shout span{opacity:1;transform:none}h1 .hl::before{transform:skewX(-6deg)}}
h1 .w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(8px);animation:wIn .9s var(--ease) forwards;animation-delay:calc(.15s + var(--i)*.09s)}
@keyframes wIn{to{opacity:1;transform:none;filter:none}}

.hero .lede{margin:26px auto 0;text-align:center;animation:up .9s .6s var(--ease) both}
.hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px;animation:up .9s .75s var(--ease) both}
.hero .note{margin-top:16px;font:500 .86rem var(--f-b);color:var(--sub);animation:up .9s .9s var(--ease) both}
.hero .note b{color:var(--ink);font-weight:700;background:linear-gradient(transparent 55%,var(--hl) 55%)}
@keyframes up{from{opacity:0;transform:translateY(14px)}}

/* the gathering: things orbit into one place */
.orbit{position:relative;width:min(560px,92vw);aspect-ratio:1;margin:56px auto 0}
.core{position:absolute;inset:31%;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.core svg{width:46%;height:46%}
.core::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1.5px dashed rgba(17,19,24,.25);animation:spin 40s linear infinite}
.core{background:var(--hl)!important;box-shadow:0 0 0 10px rgba(255,225,77,.25),0 20px 50px rgba(255,180,0,.25)!important}
.ring{position:absolute;inset:0;border-radius:50%;animation:spin 46s linear infinite}
.ring.two{inset:14%;animation-duration:34s;animation-direction:reverse}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)}
@keyframes spin{to{transform:rotate(360deg)}}
.chip{position:absolute;transform:translate(-50%,-50%);display:flex;justify-content:center}
.chip span{display:inline-flex;align-items:center;gap:7px;padding:.5em .85em;border-radius:999px;font:600 .8rem var(--f-b);color:var(--ink);white-space:nowrap;animation:counter 46s linear infinite}
.ring.two .chip span{animation-duration:34s;animation-direction:reverse}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--c)}
@keyframes counter{to{transform:rotate(-360deg)}}


/* statement: words light up as you scroll */
.say{font:600 clamp(1.7rem,4.2vw,3.2rem)/1.2 var(--f-h);letter-spacing:-.03em;color:var(--ink);max-width:22ch;margin:0 auto;text-align:center}
.say span{opacity:.16;transition:opacity .35s}
.say span.on{opacity:1}

/* promises: big alternating rows */
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;padding-block:clamp(40px,6vw,70px)}
.row+.row{border-top:1px solid var(--line)}
.row.flip .txt{order:2}
.num{font:700 .9rem var(--f-m);color:var(--c);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.num::after{content:"";width:40px;height:2px;background:var(--c);border-radius:2px}
.txt h2{margin-bottom:16px}
.txt ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.txt li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--text)}
.txt li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);margin-top:.6em;justify-self:center}
.txt li b{color:var(--ink);font-weight:600}
.art{position:relative;aspect-ratio:5/4;padding:28px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
@media (max-width:820px){.row{grid-template-columns:1fr}.row.flip .txt{order:0}}

/* art 1: the record fills */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px}
.ev{position:relative;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;font:500 .95rem var(--f-b);color:var(--ink);opacity:0;transform:translateX(-12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ev::before{content:"";position:absolute;left:-24px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 3px var(--c)}
.ev small{font:600 .74rem var(--f-m);color:var(--sub);white-space:nowrap}
.ev.on{opacity:1;transform:none}
/* art 2: the backup completes */
.vault{display:grid;place-items:center;gap:18px;text-align:center}
.dial{--p:0;width:170px;height:170px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--teal) calc(var(--p)*1%),var(--line) 0);position:relative;transition:--p 0s}
.dial::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--bg)}
.dial b{position:relative;font:800 1.9rem var(--f-m);color:var(--ink)}
.dial small{position:relative;display:block;font:600 .7rem var(--f-b);color:var(--sub);letter-spacing:.08em}
.vault .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tag{padding:.45em .85em;border-radius:999px;font:600 .78rem var(--f-b);background:var(--teal-soft);color:var(--teal)}
.tag.mid{background:var(--hl);color:var(--ink)}
/* art 3: the record does the work */
.outs{display:flex;flex-direction:column;gap:12px}
.out{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);opacity:.35;transform:scale(.98);transition:opacity .5s,transform .5s var(--ease),box-shadow .5s}
.out.on{opacity:1;transform:none;box-shadow:inset 0 0 0 1.5px var(--c),0 10px 24px rgba(70,45,30,.08)}
.out i{flex:none;width:36px;height:36px;font-size:.7rem;border-radius:11px;display:grid;place-items:center;background:var(--c);color:#fff;font-style:normal;font-weight:700}
.out b{display:block;color:var(--ink);font-weight:600} .out small{color:var(--sub);font-size:.84rem}

/* trades: one quiet moving line */
.trades{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);margin-top:34px}
.track{display:flex;gap:44px;width:max-content;animation:marq 60s linear infinite;font:500 clamp(1.3rem,2.6vw,2rem) var(--f-h);color:var(--sub);letter-spacing:-.02em}
.track span::after{content:"·";margin-left:44px;color:var(--acc)}
@keyframes marq{to{transform:translateX(-50%)}}
.free{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.free div{padding:24px} .free b{display:block;font:700 1.35rem var(--f-h);color:var(--ink);margin-bottom:4px} .free span{color:var(--sub);font-size:.95rem}
@media (max-width:820px){.free{grid-template-columns:1fr}}

/* pricing */
.center{text-align:center} .center .lede{margin:14px auto 0}
.bill{display:inline-flex;gap:4px;padding:5px;border-radius:999px;margin:30px auto 0}
.bill button{border:0;background:transparent;padding:.6em 1.1em;border-radius:999px;font:600 .9rem var(--f-b);color:var(--sub);cursor:pointer}
.bill button[aria-pressed="true"]{background:var(--ink);color:#fff}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;text-align:left}
.plan{padding:28px;display:flex;flex-direction:column;gap:14px}
.plan.star{box-shadow:0 0 0 2px var(--ink),8px 8px 0 var(--hl)}
.plan .nm{display:flex;justify-content:space-between;align-items:center} .plan .nm b{font:700 1.4rem var(--f-h);color:var(--ink)}
.badge{font:700 .66rem var(--f-b);letter-spacing:.1em;padding:.4em .7em;border-radius:999px;background:var(--hl);color:var(--ink)}
.price b{font:700 2.6rem/1 var(--f-h);color:var(--ink);letter-spacing:-.03em} .price span{color:var(--sub);margin-left:6px}
.fd{padding:12px 14px;border-radius:14px;background:var(--ink);color:#fff} .fd small{font-size:.8rem;opacity:.9} .fd b{display:block;font:700 1.3rem var(--f-h)}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.93rem}
.plan li{padding-left:22px;position:relative} .plan li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:700}
.plan .btn{margin-top:auto}
.flip{animation:fl .45s var(--ease)} @keyframes fl{50%{transform:rotateX(90deg);opacity:.2}}
.pfine{margin-top:22px;font-size:.86rem;color:var(--sub);max-width:none}
.pfine b{color:var(--ink)}
@media (max-width:900px){.plans{grid-template-columns:1fr}}

/* faq */
.faq{max-width:780px;margin:40px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:20px 4px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font:600 1.08rem var(--f-h);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--acc);font-weight:400;font-size:1.4rem;line-height:1;transition:transform .3s var(--ease)} .faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:10px;color:var(--sub)}

/* close */
.close{text-align:center;padding:clamp(60px,9vw,100px) clamp(20px,5vw,60px);background:var(--hl);box-shadow:none;border-radius:28px}
.close .kick{color:var(--ink)} .close .lede,.close .ph{color:var(--ink)} .close .btn.ghost{box-shadow:inset 0 0 0 1.5px var(--ink)}
.close h2{font-size:clamp(2.3rem,5.6vw,4.4rem)}
.close .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.close .ph{margin-top:16px;font:600 .95rem var(--f-m);color:var(--sub)}
footer{padding:30px 0 40px;font-size:.88rem;color:var(--sub)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:20px} footer a{text-decoration:none} footer a:hover{color:var(--ink)}
@media (max-width:560px){.orbit{width:64vw;margin:52px auto 30px}.chip span{font-size:.72rem;padding:.42em .7em}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}h1 .w{opacity:1;transform:none;filter:none}.say span{opacity:1}.ev,.out{opacity:1;transform:none}.dial{--p:100}}

/* AI section */
.aigrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:50px}
.askbox{padding:0;overflow:hidden;position:sticky;top:96px}
.askhd{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);font:700 1rem var(--f-h);color:var(--ink)}
.askhd .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.askhd small{margin-left:auto;font:600 .64rem var(--f-b);letter-spacing:.12em;color:var(--sub)}
.askbody{min-height:200px;padding:22px 20px;display:flex;flex-direction:column;gap:10px}
.qb{align-self:flex-end;max-width:85%;padding:10px 14px;border-radius:18px 18px 4px 18px;background:var(--ink);color:var(--bg);font-weight:600;font-size:.95rem;animation:shIn .4s var(--ease) both}
.ab{max-width:92%;padding:12px 15px;border-radius:18px 18px 18px 4px;background:var(--bg2);color:var(--text);font-size:.95rem;animation:shIn .45s var(--ease) both}
.ab b{font-weight:700} .neg{color:var(--red)} .warn{color:var(--amber)} .pos{color:var(--teal)}
.tyb{display:inline-flex;gap:5px;width:fit-content;padding:12px 14px;border-radius:18px 18px 18px 4px;background:var(--bg2)}
.tyb i{width:7px;height:7px;border-radius:50%;background:var(--sub);animation:dots 1s infinite} .tyb i:nth-child(2){animation-delay:.15s}.tyb i:nth-child(3){animation-delay:.3s}
@keyframes dots{50%{transform:translateY(-4px);opacity:.4}}
.askin{display:flex;align-items:center;gap:8px;margin:0 16px 16px;padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--sub);font-size:.92rem}
.askin span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.askin i{width:2px;height:1.1em;background:var(--acc);animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}}
.ailist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ailist li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.ailist li:first-child{border-top:0;padding-top:4px}
.ailist i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-style:normal;font:700 .9rem var(--f-h);color:#fff;background:var(--c)}
.ailist b{display:block;font:700 1.08rem var(--f-h);color:var(--ink);margin-bottom:2px} .ailist span{color:var(--sub);font-size:.95rem}
.ainote{margin-top:30px;text-align:center;color:var(--sub);font-size:.9rem;max-width:none}
@media (max-width:860px){.aigrid{grid-template-columns:1fr}.askbox{position:relative;top:0}}

/* review switch */
.themesw{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;gap:3px;padding:4px;border-radius:999px;background:#111318;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.themesw button{border:0;cursor:pointer;padding:.55em .95em;border-radius:999px;font:600 .82rem var(--f-b);background:transparent;color:rgba(255,255,255,.7)}
.themesw button[aria-pressed="true"]{background:#FFE14D;color:#111318}

/* ================= DARK: its own design, not an inverted page =================
   Night canvas with a fine blueprint grid and one yellow glow; outlines instead of shadows;
   the headline glows rather than being highlighted; buttons turn signal yellow. */
:root[data-theme="dark"]{
  --bg:#0A0B0F; --bg2:#15171E; --ink:#F4F4F0; --text:#D6D8DF; --sub:#959AA8; --line:rgba(255,255,255,.09);
  --glass:rgba(255,255,255,.035); --edge:inset 0 0 0 1px rgba(255,255,255,.09); --shadow:none;
  --teal:#2BD9C2; --teal-soft:rgba(43,217,194,.14); --amber:#FFC23D; --red:#FF6B70; --violet:#9D86FF;
  --b1:rgba(255,225,77,.12); --b2:rgba(255,91,31,.08); --b3:rgba(43,217,194,.06); color-scheme:dark}
:root[data-theme="dark"] body{background:var(--bg)}
:root[data-theme="dark"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(80% 60% at 50% 20%,#000,transparent 85%);mask-image:radial-gradient(80% 60% at 50% 20%,#000,transparent 85%)}
:root[data-theme="dark"] .nav{background:rgba(10,11,15,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
:root[data-theme="dark"] .kick{color:var(--hl)}
:root[data-theme="dark"] .hero{background:radial-gradient(50% 40% at 50% 38%,rgba(255,225,77,.10),transparent 70%)}
:root[data-theme="dark"] h1 .hl{color:var(--hl);text-shadow:0 0 40px rgba(255,225,77,.35)}
:root[data-theme="dark"] h1 .hl::before{top:auto;bottom:-.02em;height:.07em;background:var(--hl);box-shadow:0 0 22px rgba(255,225,77,.7);border-radius:99px}
:root[data-theme="dark"] .shout span{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:var(--ink)}
:root[data-theme="dark"] .shout span i{box-shadow:0 0 10px var(--c)}
:root[data-theme="dark"] .shout .more{box-shadow:none}
:root[data-theme="dark"] .btn.pri,:root[data-theme="dark"] .btn.blue{background:var(--hl);color:#111318}
:root[data-theme="dark"] .btn.pri:hover{box-shadow:0 0 0 4px rgba(255,225,77,.18),0 12px 30px rgba(255,225,77,.18)}
:root[data-theme="dark"] .btn.ghost{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);color:var(--ink)}
:root[data-theme="dark"] .hero .note b{background:none;color:var(--hl)}
:root[data-theme="dark"] .ring::before{border:1px dashed rgba(255,225,77,.22)}
:root[data-theme="dark"] .core{box-shadow:0 0 0 12px rgba(255,225,77,.08),0 0 80px rgba(255,225,77,.45)!important}
:root[data-theme="dark"] .core::after{border-color:rgba(255,225,77,.35)}
:root[data-theme="dark"] .core svg{color:#111318}
:root[data-theme="dark"] .chip.big span{background:#0A0B0F;box-shadow:inset 0 0 0 1.5px var(--hl);color:var(--ink)}
:root[data-theme="dark"] .chip span.glass{background:rgba(255,255,255,.06)}
:root[data-theme="dark"] .say span{opacity:.12} :root[data-theme="dark"] .say span.on{opacity:1}
:root[data-theme="dark"] .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.03);transition:box-shadow .3s}
:root[data-theme="dark"] .glass:hover{box-shadow:inset 0 0 0 1px rgba(255,225,77,.35)}
:root[data-theme="dark"] .num::after{box-shadow:0 0 12px var(--c)}
:root[data-theme="dark"] .art{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
:root[data-theme="dark"] .ev.on::before{box-shadow:0 0 0 3px var(--c),0 0 14px var(--c)}
:root[data-theme="dark"] .dial{filter:drop-shadow(0 0 18px rgba(43,217,194,.35))}
:root[data-theme="dark"] .tag.mid{background:var(--hl);color:#111318}
:root[data-theme="dark"] .out.on{box-shadow:inset 0 0 0 1.5px var(--c),0 0 26px color-mix(in srgb,var(--c) 30%,transparent)}
:root[data-theme="dark"] #who{background:linear-gradient(180deg,transparent,rgba(255,255,255,.025),transparent)!important}
:root[data-theme="dark"] .track{color:rgba(255,255,255,.35)}
:root[data-theme="dark"] .plan.star{box-shadow:inset 0 0 0 1.5px var(--hl),0 0 50px rgba(255,225,77,.14)}
:root[data-theme="dark"] .badge{background:var(--hl);color:#111318}
:root[data-theme="dark"] .fd{background:rgba(255,225,77,.1);box-shadow:inset 0 0 0 1px rgba(255,225,77,.4);color:var(--ink)} :root[data-theme="dark"] .fd b{color:var(--hl)}
:root[data-theme="dark"] .bill button[aria-pressed="true"]{background:var(--hl);color:#111318}
:root[data-theme="dark"] .faq details{border-color:rgba(255,255,255,.08)}
:root[data-theme="dark"] .close{background:#0A0B0F;box-shadow:inset 0 0 0 1.5px var(--hl),0 0 80px rgba(255,225,77,.12)}
:root[data-theme="dark"] .close .kick,:root[data-theme="dark"] .close .lede,:root[data-theme="dark"] .close .ph{color:var(--text)} :root[data-theme="dark"] .close h2{color:var(--hl)}
:root[data-theme="dark"] .close .btn.ghost{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
:root[data-theme="dark"] .qb{background:var(--hl);color:#111318}
:root[data-theme="dark"] .ab,:root[data-theme="dark"] .tyb{background:rgba(255,255,255,.06)}
:root[data-theme="dark"] .ailist i{box-shadow:0 0 18px color-mix(in srgb,var(--c) 45%,transparent)}
:root[data-theme="dark"] .ailist i[style*="--ink"]{background:var(--hl);color:#111318}
:root[data-theme="dark"] .themesw{background:#FFE14D} :root[data-theme="dark"] .themesw button{color:rgba(17,19,24,.65)} :root[data-theme="dark"] .themesw button[aria-pressed="true"]{background:#111318;color:#FFE14D}

/* headline reel: fixed window, vertical roll, transform only */
.cyc{display:inline-block;height:1.12em;line-height:1.12em;overflow:hidden;vertical-align:top;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.reel{display:flex;flex-direction:column;align-items:center;will-change:transform;transform:translate3d(0,0,0);transition:transform .75s cubic-bezier(.65,0,.35,1)}
.reel span{display:block;height:1.12em;line-height:1.12em;white-space:nowrap}
.reel .alt{color:var(--acc)}
:root[data-theme="dark"] .reel .alt{color:var(--hl)}
h1 .hl.re::before{animation-name:markB;animation-delay:.1s}
@keyframes markB{from{transform:scaleX(0) skewX(-6deg)}to{transform:scaleX(1) skewX(-6deg)}}

/* logo: big at the top, compact once you scroll */
.nav{padding-block:10px;transition:padding .35s var(--ease),box-shadow .3s}
.nav .logo{gap:12px}
.nav .lm{width:48px;height:46px;transition:width .35s var(--ease),height .35s var(--ease)}
.nav .lw{width:102px;height:22px;transition:width .35s var(--ease),height .35s var(--ease)}
.nav.compact{padding-block:7px}
.nav.compact .lm{width:34px;height:32px} .nav.compact .lw{width:72px;height:15.5px}
@media (max-width:560px){.nav .lm{width:38px;height:36px}.nav .lw{width:80px;height:17px}.nav.compact .lm{width:30px;height:28px}.nav.compact .lw{width:64px;height:14px}}
.giant{display:block;width:calc(100% - 40px);max-width:1160px;height:auto;aspect-ratio:326.35/70.21;margin:28px auto -1.5%;color:var(--ink);opacity:.07}
:root[data-theme="dark"] .giant{color:var(--hl);opacity:.09}
@media (prefers-reduced-motion:reduce){.reel{transition:none}.nav .lm,.nav .lw{transition:none}}

/* s81i: labels big enough to read */
.kick{font-size:.92rem;letter-spacing:.14em}
.num{font-size:1.08rem}

/* feature links: footer group and the explore row */
footer .fg{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
footer .fg b{color:var(--ink);font:700 .76rem var(--f-b);letter-spacing:.14em;text-transform:uppercase}
.explore{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:34px}
.explore b{flex-basis:100%;text-align:center;font:700 .76rem var(--f-b);letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.explore a{display:inline-flex;padding:.6em 1.05em;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink);font:600 .92rem var(--f-h);color:var(--ink);text-decoration:none}
.explore a:hover{background:var(--hl)}
:root[data-theme="dark"] .explore a{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
:root[data-theme="dark"] .explore a:hover{background:var(--hl);color:#111318}