/* Stow — marketing site */
:root{
  --bg:#07070a; --panel:#0e0e13; --panel2:#13131a; --line:#20202b;
  --text:#ecedf2; --dim:#92929f; --faint:#5e5e6c;
  --accent:#8b6dff; --accent2:#3ddbd9; --warn:#f0b254;
  --max:1120px; --r:14px;
  --grad:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(7,7,10,.78);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;gap:28px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.02em;font-size:17px}
/* The real app icon, not a coloured square: the mark people see in the Dock is
   the one they should see in the header. */
.logo .mark{width:22px;height:22px;display:block;border-radius:6px}
nav .links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:var(--dim)}
nav .links a:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:10px;font-size:14.5px;font-weight:550;
  border:1px solid var(--line);background:var(--panel2);transition:.18s;cursor:pointer}
.btn:hover{border-color:#32324a;transform:translateY(-1px)}
.btn.primary{background:var(--grad);border:0;color:#0a0a0f;font-weight:650}
.btn.primary:hover{filter:brightness(1.08)}
.btn.lg{padding:14px 26px;font-size:16px;border-radius:12px}

/* ---------- hero ---------- */
.hero{position:relative;padding:96px 0 72px;text-align:center;overflow:hidden}
.hero:before{content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);
  width:900px;height:560px;background:radial-gradient(ellipse at center,rgba(139,109,255,.20),transparent 62%);
  filter:blur(26px);pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);font-size:13px;color:var(--dim);margin-bottom:26px}
.pill b{color:var(--accent2);font-weight:600}
h1{font-size:clamp(40px,6.4vw,70px);line-height:1.04;letter-spacing:-.035em;font-weight:680;
  max-width:16ch;margin:0 auto}
h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:22px auto 34px;max-width:58ch;font-size:19px;color:var(--dim)}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.note{margin-top:16px;font-size:13.5px;color:var(--faint)}

/* ---------- app mockup ---------- */
.shot{margin:60px auto 0;max-width:980px;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);overflow:hidden;box-shadow:0 36px 90px -30px rgba(0,0,0,.9);text-align:left}
.bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel2)}
.dot{width:11px;height:11px;border-radius:50%}
.bar .t{margin-left:12px;font-size:12.5px;color:var(--faint)}
.app{display:grid;grid-template-columns:184px 1fr;min-height:400px}
.side{border-right:1px solid var(--line);padding:18px 12px;background:#0b0b10}
.side .it{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;
  font-size:13.5px;color:var(--dim);margin-bottom:3px}
.side .it.on{background:#17172099;color:var(--text)}
.side .it s{width:7px;height:7px;border-radius:50%;background:var(--faint);text-decoration:none}
.side .it.on s{background:var(--accent2)}
.main{padding:20px 22px}
.row{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.chip{font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.chip.ok{border-color:#2a4a3a;color:#67d99a;background:#0e1a14}
.card{border:1px solid var(--line);border-radius:12px;background:var(--panel2);overflow:hidden}
.card h4{padding:13px 16px;font-size:13.5px;font-weight:600;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:9px}
.op{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:9px 16px;font-size:12.6px;border-bottom:1px solid #16161e}
.op:last-child{border:0}
.op .f{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op .a{color:var(--faint)}
.op .d{color:var(--accent2);font-weight:550}
.foot{display:flex;gap:10px;padding:13px 16px;border-top:1px solid var(--line);background:#0b0b10}
.mini{font-size:12.5px;padding:7px 14px;border-radius:8px;border:1px solid var(--line);color:var(--dim)}
.mini.go{background:var(--grad);color:#0a0a0f;border:0;font-weight:620}

/* ---------- sections ---------- */
/* Scoped to top-level sections on purpose. This used to be a bare `section` selector,
   which silently applied 84px of padding and a border to every <section> anywhere in the
   page, including components built out of them. */
body>section{padding:106px 0;position:relative}
body>section::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(var(--max),calc(100% - 48px));height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 16%,var(--line) 84%,transparent)}
.eyebrow{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);
  font-weight:620;margin-bottom:14px}
h2{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.025em;line-height:1.14;font-weight:660;max-width:20ch}
.lede{margin-top:14px;color:var(--dim);max-width:60ch;font-size:17px}
.grid{display:grid;gap:18px;margin-top:44px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.feat{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:var(--panel);
  transition:.2s}
.feat:hover{border-color:#2d2d40;transform:translateY(-2px)}
.feat .ic{width:36px;height:36px;border-radius:10px;background:#16161f;display:grid;place-items:center;
  margin-bottom:16px;font-size:17px}
.feat h3{font-size:16.5px;margin-bottom:8px;font-weight:620}
.feat p{color:var(--dim);font-size:14.6px}

/* steps */
.steps{counter-reset:s}
.step{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.step:last-child{border:0}
.step .n{counter-increment:s;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  display:grid;place-items:center;font-size:14px;color:var(--accent2);background:var(--panel);font-weight:620}
.step .n:before{content:"0" counter(s)}
.step h3{font-size:18px;margin-bottom:7px;font-weight:620}
.step p{color:var(--dim);max-width:62ch}

/* before / after */
.ba{display:grid;grid-template-columns:1fr 44px 1fr;gap:16px;align-items:center;margin-top:40px}
.tree{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:20px;font-size:13px}
.tree .h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.tree ul{list-style:none}
.tree li{padding:4.5px 0;color:var(--dim)}
.tree li.fold{color:var(--text);font-weight:600}
.tree li.in{padding-left:20px;color:var(--faint)}
.arrow{display:grid;place-items:center;color:var(--faint);font-size:22px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px;align-items:start}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:var(--panel);position:relative}
.plan.best{border-color:#3a2f6e;background:linear-gradient(180deg,#120f22,var(--panel))}
.plan .tag{position:absolute;top:-11px;left:28px;background:var(--grad);color:#0a0a0f;
  font-size:11.5px;font-weight:680;padding:4px 11px;border-radius:999px;letter-spacing:.02em}
.plan h3{font-size:15px;color:var(--dim);font-weight:600;margin-bottom:12px}
.price{font-size:40px;letter-spacing:-.03em;font-weight:680;line-height:1}
.price s{font-size:15px;color:var(--faint);font-weight:500;text-decoration:none}
.per{color:var(--faint);font-size:13.5px;margin-top:7px}
.plan ul{list-style:none;margin:22px 0 26px;border-top:1px solid var(--line);padding-top:20px}
.plan li{padding:7px 0 7px 24px;position:relative;color:var(--dim);font-size:14.4px}
.plan li:before{content:"";position:absolute;left:0;top:14px;width:11px;height:2px;border-radius:2px;background:var(--accent2)}
.plan .btn{width:100%}
.topup{margin-top:34px;border:1px dashed var(--line);border-radius:var(--r);padding:22px 26px;
  display:flex;align-items:center;gap:18px;background:#0b0b10;flex-wrap:wrap}
.topup b{color:var(--text)}
.topup p{color:var(--dim);font-size:14.5px;flex:1;min-width:260px}

/* faq */
.faq{margin-top:38px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--faint);font-size:20px;line-height:1}
details[open] summary:after{content:"–"}
details p{margin-top:12px;color:var(--dim);max-width:70ch}

/* footer */
footer{border-top:1px solid var(--line);padding:46px 0;color:var(--faint);font-size:14px}
.fgrid{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start}
.fgrid .col{display:flex;flex-direction:column;gap:9px}
.fgrid .col b{color:var(--dim);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.fgrid a:hover{color:var(--text)}
.fbot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap}

/* legal pages */
.legal{max-width:760px;margin:0 auto;padding:60px 24px 90px}
.legal h1{font-size:40px;text-align:left;max-width:none;margin:0 0 10px}
.legal .upd{color:var(--faint);font-size:14px;margin-bottom:38px}
.legal h2{font-size:21px;margin:36px 0 12px;max-width:none}
.legal p,.legal li{color:var(--dim);font-size:15.5px;margin-bottom:11px}
.legal ul{padding-left:22px}
.legal a{color:var(--accent2)}

@media(max-width:900px){
  .g3,.g2,.plans{grid-template-columns:1fr}
  .ba{grid-template-columns:1fr}
  .arrow{transform:rotate(90deg)}
  .app{grid-template-columns:1fr}
  .side{display:none}
  nav .links{display:none}
}

/* A call to action with nowhere to go. Deliberately legible rather than hidden: a
   missing button reads as a broken page, an obviously pending one reads as honest. */
.btn.soon { opacity: .55; cursor: default; pointer-events: none; }
.lede.small { font-size: .95rem; opacity: .8; margin-top: 10px; }   /* was -.4rem, which pulled this paragraph 6px into the one above it */

/* ---------- the live sort demo ----------
   A marketing page can describe "it files things by subject" forever and still not land
   it. Showing each file leave the pile and arrive in a folder it named does the job in
   four seconds, and it is the same motion the app itself uses on Apply. */
.demo{margin-top:46px;border:1px solid var(--line);border-radius:16px;background:var(--panel);
  overflow:hidden}
.demohead{display:flex;align-items:center;gap:14px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:#0b0b10}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{background:none;border:0;padding:7px 15px;font-size:12.5px;color:var(--dim);
  cursor:pointer;font:inherit;font-size:12.5px}
.seg button.on{background:var(--panel2);color:var(--text)}
.replay{margin-left:auto;display:flex;align-items:center;gap:7px;cursor:pointer;
  font:inherit;font-size:12.5px;padding:7px 14px;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text)}
.replay:hover{background:color-mix(in srgb,var(--accent) 24%,transparent)}
.replay[disabled]{opacity:.5;cursor:default}

.stage{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:22px;position:relative}
.colh{display:flex;flex-direction:column;gap:2px;margin-bottom:13px}
.colh b{font-size:13.5px;font-weight:600}
.colh span{font-size:12px;color:var(--faint)}

.chips{display:flex;flex-direction:column;gap:7px}
.fchip{font-size:12.5px;padding:8px 12px;border-radius:9px;background:var(--panel2);
  border:1px solid var(--line);color:var(--dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;
  /* transform only: a flying chip must never reflow the column it left */
  transition:transform .62s cubic-bezier(.3,.9,.3,1), opacity .22s linear .40s}
.fchip.ghost{border-style:dashed;color:var(--faint);background:none}
.fchip.flying{transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(.92);
  opacity:0;z-index:3;position:relative;color:var(--text);
  border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}

.bins{display:flex;flex-direction:column;gap:9px}
.bin{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--line);transition:border-color .3s,background .3s}
.bin .bn{font-size:12.5px;font-weight:550;color:var(--accent2)}
.bin .bc{margin-left:auto;font-size:11.5px;color:var(--faint);min-width:18px;text-align:right;
  font-variant-numeric:tabular-nums}
.bin.hit{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));
  background:color-mix(in srgb,var(--accent) 12%,var(--panel2))}
.bin.hit .bc{color:var(--text)}
.demonote{padding:0 22px 20px;font-size:12.5px;color:var(--faint);max-width:70ch}

@media (max-width:720px){
  .stage{grid-template-columns:1fr;gap:18px}
}
/* Someone who has asked for less motion gets the answer, not the journey. */
@media (prefers-reduced-motion:reduce){
  .fchip{transition:none}
  .replay{display:none}
}

/* The pile's resting state once everything has been filed. Without it the left column
   is simply empty at the end, which reads as a layout bug rather than a finished job. */
.alldone{margin-top:-6px;opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease;pointer-events:none;
  display:flex;flex-direction:column;gap:3px;padding:13px 14px;border-radius:10px;
  border:1px dashed color-mix(in srgb,var(--accent) 38%,var(--line));
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.alldone.on{opacity:1;transform:none}
.alldone b{font-size:13px;color:var(--text)}
.alldone span{font-size:12px;color:var(--faint)}

/* ── The app, screen by screen ────────────────────────────────────────────────
   Mirrors the real window: a 46px chrome bar, then exactly one screen. All four
   screens occupy the same grid cell and only the current one is laid out, so the
   window never changes height as it advances -- a mockup that resizes as it plays
   reads as a bug. min-height is set by the tallest screen (the plan). */
.walk{background:var(--panel);display:flex;flex-direction:column;min-height:512px}
.wchrome{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
  height:46px;padding:0 14px;border-bottom:1px solid var(--line);background:#0b0b10}
.wbrand{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.wbrand svg{fill:var(--accent)}
.wpriv{display:inline-flex;align-items:center;gap:5px;margin-left:6px;
  font-size:11px;font-weight:400;color:var(--faint)}
.wpriv i{width:6px;height:6px;border-radius:50%;background:#67d99a}
.wright{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--faint)}
.wruns{border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.wmenu{color:var(--dim);letter-spacing:1px}

.wbody{flex:1 1 auto;display:grid}
.wscreen{grid-area:1/1;display:none;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:12px;padding:26px 26px 30px}
.walk[data-step="1"] .wscreen[data-s="1"],
.walk[data-step="2"] .wscreen[data-s="2"],
.walk[data-step="3"] .wscreen[data-s="3"],
.walk[data-step="4"] .wscreen[data-s="4"]{display:flex;animation:wfade .45s ease both}
@keyframes wfade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.wscreen h3{font-size:21px;font-weight:650;letter-spacing:-.01em}
.wscreen>p{font-size:13.5px;color:var(--dim);max-width:46ch;line-height:1.55}
.wfine{font-size:11.5px;color:var(--faint)}
.wbtn{display:inline-flex;align-items:center;gap:7px;background:var(--grad);color:#0a0a0f;
  font-weight:650;font-size:14px;padding:11px 22px;border-radius:10px;
  box-shadow:0 7px 22px -9px var(--accent)}
.wbtn.sm{font-size:12.5px;padding:8px 15px}
.wlink{font-size:12px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.wlink.danger{color:#e2766f}
.wsub{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.wswitch{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--dim)}
.wswitch i{width:26px;height:15px;border-radius:999px;background:#23232f;position:relative}
.wswitch i::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;
  border-radius:50%;background:var(--faint)}

/* 1 — the mark settles like the app's does */
.wmark svg{fill:var(--accent)}
.wmark .m1{animation:wset .7s .04s ease both}
.wmark .m2{animation:wset .7s .16s ease both}
.wmark .m3{animation:wset .7s .28s ease both}
@keyframes wset{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* 2 — what is in the folder, before deciding anything about it */
.wcard{width:100%;max-width:382px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel2);padding:14px;text-align:left}
.wcardtop{display:flex;gap:11px;align-items:flex-start}
.wicon{font-size:21px;line-height:1.1}
.wcardtop b{display:block;font-size:14.5px}
.wpath,.wmeta{display:block;font-size:11.5px;margin-top:2px;color:var(--faint)}
.wmeta{color:var(--dim)}
.wbars{display:flex;gap:3px;height:7px;margin:13px 0 9px}
.wbars span{border-radius:3px;transform-origin:left;animation:wgrow .55s .12s ease both}
@keyframes wgrow{from{transform:scaleX(0)}to{transform:none}}
.wkeys{display:flex;flex-wrap:wrap;gap:4px 13px;font-size:11px;color:var(--faint)}
.wkeys span{display:inline-flex;align-items:center;gap:5px}
.wkeys i{width:7px;height:7px;border-radius:2px}

/* 3 — one line per file, grouped by where it is going */
.wscreen.wwide{justify-content:flex-start;align-items:stretch;text-align:left;
  gap:0;padding:20px 22px 22px}
.wplanhead h3{font-size:18px}
.wplanhead>p{font-size:12.5px;color:var(--dim);margin-top:4px;max-width:60ch}
.wstats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:11px 0 13px;
  font-size:12px;color:var(--dim)}
.wstats b{color:var(--text);font-weight:650}
.wstats s{width:3px;height:3px;border-radius:50%;background:var(--faint);text-decoration:none}
.wgroups{display:grid;gap:9px}
.wgrp{border:1px solid var(--line);border-radius:10px;background:var(--panel2);
  overflow:hidden;animation:wfade .4s both}
.wgrp:nth-child(1){animation-delay:.04s}
.wgrp:nth-child(2){animation-delay:.13s}
.wgrp:nth-child(3){animation-delay:.22s}
.wgrp:nth-child(4){animation-delay:.31s}
.wgrp header{display:flex;align-items:center;gap:8px;padding:8px 11px;font-size:12.5px;
  border-bottom:1px solid var(--line)}
.wgrp header b{font-weight:600}
.wn{margin-left:auto;font-size:11px;color:var(--faint)}
.wop{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;
  padding:7px 11px;font-size:12px;border-top:1px solid #1a1a23}
.wop:first-of-type{border-top:0}
.wf{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wy{color:var(--faint);font-size:11px}
.wck{position:relative;flex:0 0 auto;width:13px;height:13px;border-radius:4px;
  border:1px solid #2c2c3a}
.wck.on{background:var(--accent);border-color:var(--accent)}
.wck.on::after{content:"";position:absolute;left:3.6px;top:1.1px;width:4px;height:7px;
  border:solid #0a0a0f;border-width:0 1.7px 1.7px 0;transform:rotate(45deg)}
.wplanfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:13px}
.wplanfine{margin-left:auto}

/* 4 */
.wtick svg{fill:none;stroke:#67d99a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wtick circle{opacity:.3}
.wtick path{stroke-dasharray:40;animation:wdraw .5s .18s ease both}
@keyframes wdraw{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}

.walknav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-top:1px solid var(--line);background:#0b0b10}
.wdots{display:flex;gap:6px;flex-wrap:wrap}
.wdots button{background:none;border:1px solid var(--line);border-radius:999px;
  color:var(--faint);font:inherit;font-size:11.5px;padding:5px 11px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.wdots button:hover{color:var(--dim)}
.wdots button.on{color:var(--text);border-color:var(--accent);background:#17172099}

@media (max-width:760px){
  .walk{min-height:0}
  .wpriv,.wruns{display:none}
  .wscreen{padding:22px 15px 24px}
  .wscreen.wwide{padding:16px 13px 18px}
  .wscreen h3{font-size:18px}
  .wy{display:none}
  .wop{grid-template-columns:auto 1fr}
  .wplanfine{display:none}
  .wdots button{font-size:11px;padding:4px 9px}
}
/* An animation is decoration; honour the preference and let the tabs do the work. */
@media (prefers-reduced-motion:reduce){
  .walk *,.walk{animation:none!important}
}

/* ══ Depth pass ═══════════════════════════════════════════════════════════════
   The page was correct but flat: one accent, hard rules between every section,
   and no sense of a light source. Everything below adds depth without adding
   another colour. */

/* A slow aurora behind the hero. Two blobs on different durations so the shape
   never repeats on a loop the eye can latch onto. */
.hero::after{content:"";position:absolute;inset:-10% -20% auto;height:720px;pointer-events:none;
  background:
    radial-gradient(42% 46% at 22% 32%,rgba(139,109,255,.20),transparent 70%),
    radial-gradient(38% 42% at 78% 22%,rgba(61,219,217,.13),transparent 70%);
  filter:blur(38px);animation:drift 26s ease-in-out infinite alternate;z-index:0}
@keyframes drift{
  from{transform:translate3d(-2%,0,0) scale(1)}
  to{transform:translate3d(3%,-3%,0) scale(1.09)}
}
.hero>.wrap{position:relative;z-index:1}

/* Grain. One tiny SVG, no request, and it stops the large flat fills from banding. */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
/* The header is sticky (line 21); only the others need a stacking context here.
   Listing header too silently overrode position:sticky -- same specificity,
   later in the file -- and the nav scrolled away on all five pages. */
.hero,body>section,footer{position:relative;z-index:2}

h1{text-wrap:balance}
h2{text-wrap:balance}
.sub{text-wrap:pretty}

/* Three facts, directly under the call to action, where the hesitation happens. */
.trust{list-style:none;display:flex;justify-content:center;gap:10px 26px;flex-wrap:wrap;
  margin-top:26px;font-size:13.5px;color:var(--dim)}
.trust li{display:inline-flex;align-items:center;gap:8px}
.trust span{color:var(--accent2);font-size:13px}

/* The window gets a light source: a glow beneath it and a brighter top edge, so it
   sits on the page instead of being pasted onto it. */
.shot{position:relative;box-shadow:0 48px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset}
.shot::after{content:"";position:absolute;left:8%;right:8%;bottom:-34px;height:60px;z-index:-1;
  background:radial-gradient(50% 100% at 50% 0,rgba(139,109,255,.30),transparent 72%);filter:blur(22px)}

.btn.primary{box-shadow:0 10px 30px -12px rgba(139,109,255,.85)}
.btn.lg{font-weight:620}

/* Feature cards: tinted icon tile, a hairline highlight along the top edge, and a
   hover that lifts rather than just changing a border colour. */
.feat{position:relative;overflow:hidden;background:linear-gradient(180deg,#101018,var(--panel))}
.feat::before{content:"";position:absolute;top:0;left:18px;right:18px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent)}
.feat .ic{background:linear-gradient(145deg,rgba(139,109,255,.22),rgba(61,219,217,.12));
  border:1px solid rgba(139,109,255,.22);color:var(--text)}
.feat:hover{transform:translateY(-3px);border-color:#34344c;
  box-shadow:0 20px 44px -28px rgba(139,109,255,.65)}

.step{transition:.2s}
.step .n{background:linear-gradient(145deg,#15151f,var(--panel))}

/* The recommended plan is lifted and given a real gradient border, which a solid
   border colour cannot do. */
.plan{transition:.2s}
.plan:hover{border-color:#34344c;transform:translateY(-2px)}
.plan.best{box-shadow:0 28px 60px -34px rgba(139,109,255,.8)}
@media(min-width:901px){.plan.best{transform:scale(1.035)}.plan.best:hover{transform:scale(1.035) translateY(-2px)}}
.plan.best::before{content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;
  background:linear-gradient(150deg,var(--accent),rgba(61,219,217,.55),transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

.topup{background:linear-gradient(135deg,#0d0d14,#0b0b10)}
summary{transition:color .15s}
summary:hover{color:var(--accent2)}
.faq details{border-radius:10px;padding:20px 16px}
.faq details[open]{background:#0b0b10}

/* Sections arrive as you reach them. Cheap, and it makes the page feel built. */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}

@media (prefers-reduced-motion:reduce){
  .hero::after{animation:none}
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
}

/* thanks.html */
.tickwrap{margin-bottom:26px}
.tickwrap svg{fill:none;stroke:#67d99a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tickwrap circle{opacity:.3}
.tickwrap path{stroke-dasharray:40;animation:wdraw .55s .2s ease both}

/* The window must not resize as it advances. It plays by itself whenever it is on
   screen, so an unpinned height makes the whole page below the hero jog up and down
   every few seconds while someone is trying to read it. The floor is the tallest
   screen (the plan); the shorter three centre inside it. */
.walk{min-height:0}
.wbody{min-height:548px}
@media(max-width:760px){
  .wbody{min-height:470px}
  .wscreen.wwide{padding:14px 12px 16px}
  .wplanhead>p{display:none}   /* the stats row says the same thing in a third of the space */
  .wstats{margin:9px 0 10px}
  .wgroups{gap:7px}
  .wgrp header{padding:7px 10px}
  .wop{padding:6px 10px}
}

/* `header` is the last unscoped element selector, and it reaches into the
   mockup's plan groups. Pin them before the next rule added to it lands there. */
.wgrp header{background:none;backdrop-filter:none;position:static}
/* .shot clipped its own glow, so .shot::after never rendered. */
.shot{overflow:visible}
.shot .bar{border-radius:16px 16px 0 0}
.walk{border-radius:0 0 16px 16px;overflow:hidden}