/* Leet Assistant page — built from the app, follows the visitor's system theme (dark / light).
   The app's signature: hero cards are a diagonal wash (container colour at 55% -> the page background),
   SQUARE corners (HeroCard in MainActivity). Functional cards (Needs you, tasks, notifications) are rounded.
   Dark: indigo wash. Light: mint (tertiary) wash. Header = hand-drawn slanted LEET wordmark + spaced ASSISTANT. */
:root{
  color-scheme:dark;
  --bg:#131318;--text:#e4e1e9;--dim:#c7c5d0;--faint:#90909a;--line:rgba(199,197,208,.22);
  --acc:#bbc3ff;--btn:#bbc3ff;--btnfg:#17278f;--ring:#5a5a66;
  --wash:#242d68;--wash2:#2a3590;
  --hi:#2a2930;--hi2:#35343b;--cont:#1f1f25;--navon:#3a3d63;--navfg:#dfe0ff;
  --nc:#46465a;--ncb:#5b5b70;--ncfg:#e4e1e9;--ncdim:#c7c5d0;--pill:#dfe0ff;--pillfg:#00105c;
  --task:#005048;--taskfg:#a7f2e5;--done:#bbc3ff;--donefg:#17278f;--soon:#bbc3ff;
  --tile:#38383f;--grp:#2f2f37;--row:#3d3d46;
  --shadebg:linear-gradient(160deg,#16213b,#0f1626);--ntwash:#242d68;--blob:rgba(139,156,255,.2);
  --phbd:#2c2c36;--phsh:0 30px 80px rgba(0,0,0,.6),0 0 90px rgba(49,66,169,.22);--glow:rgba(255,255,255,.07);

}
@media(prefers-color-scheme:light){:root{
  color-scheme:light;
  --bg:#fdfbff;--text:#1b1b21;--dim:#46464f;--faint:#767680;--line:rgba(70,70,79,.22);
  --acc:#4a5bc4;--btn:#4a5bc4;--btnfg:#fff;--ring:#a9a8b6;
  --wash:#cff8f1;--wash2:#bfeee6;
  --hi:#efedf4;--hi2:#e4e1e9;--cont:#f5f2fa;--navon:#dfe0ff;--navfg:#00105c;
  --nc:#e0def0;--ncb:#c7c5d7;--ncfg:#1b1b21;--ncdim:#46464f;--pill:#4a5bc4;--pillfg:#fff;
  --task:#a7f2e5;--taskfg:#00201c;--done:#4a5bc4;--donefg:#fff;--soon:#4a5bc4;
  --tile:#e9e7ef;--grp:#efedf4;--row:#e0def0;
  --shadebg:linear-gradient(160deg,#e9eefc,#f6f4fb);--ntwash:#cff8f1;--blob:rgba(127,227,210,.35);
  --phbd:#d9d6e3;--phsh:0 30px 70px rgba(60,60,100,.22);--glow:rgba(0,0,0,.05);

}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.55 Roboto,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
h1,h2,h3,h4{font-family:Roboto,sans-serif;margin:0}
.kick{display:block;font:700 13px/1 Roboto,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}

/* the app's diagonal wash: tint at 55% in one corner, gone in the other. A soft spotlight follows the pointer. */
.fade{background:radial-gradient(260px circle at var(--mx,-999px) var(--my,-999px),var(--glow),transparent 70%),linear-gradient(135deg,color-mix(in srgb,var(--tint) 55%,transparent),transparent 92%)}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.top .wrap{display:flex;align-items:center;gap:18px;padding:14px 0;flex-wrap:wrap}
.logo{display:flex;align-items:flex-end;gap:9px;text-decoration:none;color:var(--text)}
.wm{height:22px;width:auto;aspect-ratio:303/84;display:block;fill:currentColor;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.logo .wm{animation:wmin 1s cubic-bezier(.3,.7,.2,1) both}
@keyframes wmin{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.logo small{font:500 12.5px/1 Roboto;letter-spacing:2.8px;color:var(--dim);text-transform:uppercase;padding-bottom:1px;animation:fin .8s .5s both}
@keyframes fin{from{opacity:0}to{opacity:1}}
.top nav{margin-left:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.top nav a{white-space:nowrap;text-decoration:none;font-weight:500;font-size:14.5px;color:var(--dim);padding:9px 15px;border-radius:99px;transition:background .2s,color .2s}
.top nav a:hover{background:var(--hi);color:var(--text)}
.top nav a.on{background:var(--navon);color:var(--navfg)}
@media(max-width:760px){.top nav{order:3;flex:0 0 100%;margin:0}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:99px;background:var(--btn);color:var(--btnfg);font:600 16px Roboto;text-decoration:none;transition:filter .2s,transform .2s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.out{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--ring)}
.link{color:var(--acc);font-weight:500;text-decoration:none}
.link:hover{text-decoration:underline}

/* hero */
.hero{padding:clamp(30px,5vw,70px) 0 clamp(26px,4vw,50px)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,70px);align-items:center}
.pill{display:inline-block;background:var(--hi);color:var(--dim);border-radius:99px;padding:7px 15px;font-size:13.5px;font-weight:500}
h1{font:700 clamp(38px,6vw,72px)/1.04 Roboto;letter-spacing:-.03em;margin:20px 0 18px}
h1 em{font-style:normal;color:var(--acc)}
.lede{font-size:clamp(17px,1.9vw,20px);color:var(--dim);max-width:34em;margin:0}
.lede strong{color:var(--text);font-weight:500}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.sub{margin-top:16px;color:var(--faint);font-size:14px}
@media(max-width:900px){.split{grid-template-columns:1fr}.hero .phone{order:2}}

/* drawn phone = the app's Home */
.phone{position:relative;justify-self:center;width:min(350px,100%);margin:0;background:var(--bg);border:1px solid var(--phbd);border-radius:40px;padding:18px 14px 12px;box-shadow:var(--phsh);display:grid;gap:11px}
.hero-ph>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.hero-ph>*:nth-child(2){animation-delay:.12s}.hero-ph>*:nth-child(3){animation-delay:.22s}.hero-ph>*:nth-child(4){animation-delay:.3s}.hero-ph>*:nth-child(5){animation-delay:.4s}.hero-ph>*:nth-child(6){animation-delay:.5s}.hero-ph>*:nth-child(7){animation-delay:.6s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ph-top{display:flex;align-items:flex-end;gap:7px;padding:2px 6px 4px}
.ph-top .wm{height:18px}
.ph-top small{font:500 10.5px/1 Roboto;letter-spacing:2.4px;color:var(--dim);padding-bottom:1px}
.greeting{padding:14px 16px 12px;background:linear-gradient(135deg,var(--wash),var(--bg) 95%)}
.greeting small{display:block;font:500 11px/1 Roboto;letter-spacing:.06em;color:var(--dim);text-transform:uppercase}
.greeting>b{display:flex;align-items:center;gap:8px;font:700 22px/1.2 Roboto;margin:8px 0 10px}
.greeting>b svg{width:19px;height:19px;stroke:var(--acc);fill:none;stroke-width:2;stroke-linecap:round}
.ph-st{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding-top:9px;text-align:center;font-size:12px;color:var(--dim)}
.ph-st div+div{border-left:1px solid var(--line)}
.ph-st b{display:block;font:700 22px/1.1 Roboto;margin:0;color:var(--text)}
.ph-h{display:flex;align-items:center;gap:8px;font:500 17px Roboto;padding:2px 2px 0}
.ph-h i{font-style:normal;background:var(--hi2);border-radius:99px;padding:0 9px;font-size:13px;line-height:22px}
.stack{position:relative;padding-top:12px}
.stack .back{position:absolute;left:0;right:0;top:0;height:36px;background:var(--nc);border:1px solid var(--ncb);border-radius:22px 22px 0 0}
.stack .back+.back{top:6px}
.nc{position:relative;background:var(--nc);border:1px solid var(--ncb);border-radius:22px;padding:15px 17px}
.nc h4{font:600 17px/1.25 Roboto;color:var(--ncfg)}
.nc p{margin:6px 0 0;color:var(--ncdim);font-size:14px;line-height:1.4}
.nc .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:12.5px;color:var(--ncdim)}
.btn2{display:inline-flex;align-items:center;gap:7px;background:var(--pill);color:var(--pillfg);border-radius:99px;padding:8px 15px;font:600 13.5px Roboto;border:0;cursor:pointer;transition:transform .15s,filter .15s}
.btn2:hover{filter:brightness(1.1)}.btn2:active{transform:scale(.95)}
.draft{margin-top:12px;border-radius:16px;padding:11px 14px;background:color-mix(in srgb,var(--ncfg) 9%,transparent);font-size:14px;color:var(--ncfg);animation:rise .4s both}
.draft small{display:block;margin-top:6px;font-size:12px;color:var(--ncdim)}
.task{display:flex;align-items:center;gap:10px;background:var(--task);color:var(--taskfg);border-radius:20px;padding:12px 12px 12px 16px;transition:opacity .45s,transform .45s,max-height .5s,margin .5s,padding .5s;max-height:90px;overflow:hidden}
.task div{flex:1;min-width:0}
.task b{display:block;font:500 15.5px/1.25 Roboto}
.task small{display:block;font-size:12px;opacity:.85;margin-top:2px}
.task em{font-style:normal;color:var(--soon);font-weight:500;font-size:14px}
.done{background:var(--done);color:var(--donefg);border:0;border-radius:99px;padding:9px 17px;font:600 14px Roboto;cursor:pointer;transition:transform .15s,filter .15s}
.done:hover{filter:brightness(1.1)}.done:active{transform:scale(.94)}
.gone{opacity:0;transform:translateX(40px);max-height:0!important;padding-block:0!important;margin:-6px 0 0!important}
.allclear{display:none;text-align:center;color:var(--dim);font-size:14px;padding:8px 0}
.allclear.on{display:block;animation:rise .5s both}
.ph-nav{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2px;font-size:11.5px;font-weight:500;color:var(--dim);text-align:center}
.ph-nav span{display:grid;justify-items:center;gap:3px}
.ph-nav i{width:48px;height:26px;border-radius:99px;display:grid;place-items:center}
.ph-nav span.on{color:var(--text)}
.ph-nav span.on i{background:var(--navon)}
.ph-nav svg{width:18px;height:18px;fill:currentColor}
.hint{font-size:12.5px;color:var(--faint);margin-top:12px}

/* stat strip = greeting card */
.greet{padding:clamp(22px,3vw,34px);display:grid;grid-template-columns:1.7fr repeat(4,1fr);align-items:center;background:linear-gradient(135deg,var(--wash),var(--bg) 96%)}
.greet .g1 small{display:block;font:500 13px/1 Roboto;letter-spacing:.06em;color:var(--dim);text-transform:uppercase}
.greet .g1 b{white-space:nowrap;display:flex;align-items:center;gap:10px;font:700 clamp(26px,3.4vw,36px)/1.15 Roboto;margin-top:12px}
.greet .g1 svg{width:26px;height:26px;stroke:var(--acc);fill:none;stroke-width:2;stroke-linecap:round}
.greet .g{text-align:center;padding:6px 8px;border-left:1px solid var(--line)}
.greet .g b{display:block;font:700 clamp(30px,4vw,44px)/1 Roboto}
.greet .g span{font-size:15px;color:var(--dim)}
@media(max-width:820px){.greet{grid-template-columns:1fr 1fr;gap:18px 0}.greet .g1{grid-column:1/-1}.greet .g:nth-child(2n){border-left:0}}

/* sections */
section{padding:clamp(34px,5.2vw,72px) 0}
.sec-h{margin-bottom:30px;max-width:42em}
.sec-h h2{font:700 clamp(28px,4.2vw,48px)/1.08 Roboto;letter-spacing:-.025em;margin:14px 0 12px}
.sec-h p{color:var(--dim);margin:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.cards{display:grid;gap:10px}

/* notification cards on the shade */
.shade{background:var(--shadebg);border-radius:30px;padding:16px;display:grid;gap:12px}
.nt{position:relative;border-radius:22px;padding:14px 16px;overflow:hidden;background:linear-gradient(135deg,var(--ntwash),transparent 100%)}
.nt::before{content:"";position:absolute;right:-40px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,var(--blob),transparent)}
.nt>*{position:relative}
.nt .hd{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);margin-bottom:8px}
.nt .hd i{width:18px;height:18px;border:2px solid #86a800;border-radius:5px;display:block}
.nt .bd{display:flex;align-items:center;gap:14px}
.nt .bg{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--cc) 85%,#000);color:#1b1b21;box-shadow:0 0 0 6px color-mix(in srgb,var(--cc) 18%,transparent)}
.nt .bg svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nt .tx{flex:1;min-width:0}
.nt .k{font:700 11.5px/1 Roboto;letter-spacing:.1em;text-transform:uppercase;color:var(--cc)}
.nt .t{font:600 22px/1.2 Roboto;margin-top:5px;letter-spacing:.02em}
.nt .s{font-size:13.5px;color:var(--dim);margin-top:3px}
.nt .go{flex:none;background:var(--cc);color:#1b1b21;border:0;border-radius:99px;padding:9px 16px;font:700 14px Roboto;cursor:pointer;min-width:74px}
.shade .nt{opacity:0;transform:translateY(-14px)}
.shade.in .nt{animation:drop .7s cubic-bezier(.2,.8,.2,1) forwards}
.shade.in .nt:nth-child(2){animation-delay:.25s}.shade.in .nt:nth-child(3){animation-delay:.5s}
@keyframes drop{to{opacity:1;transform:none}}

/* features */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fc{padding:26px 24px 28px;transition:transform .25s}
.fc:hover{transform:translateY(-3px)}
.ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;background:color-mix(in srgb,var(--cc) 22%,transparent);color:var(--cc)}
.ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fc h3{font:700 20px Roboto}
.fc .t{display:block;font-size:13px;color:var(--faint);margin:3px 0 12px}
.fc p{margin:0;color:var(--dim);font-size:15.5px}
@media(max-width:900px){.feat{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.feat{grid-template-columns:1fr}}

/* ask leet */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.tile{background:var(--tile);border-radius:22px;padding:18px 18px 16px;font-size:17px}
.tile svg{display:block;width:22px;height:22px;stroke:var(--text);fill:none;stroke-width:2;stroke-linecap:round;margin-bottom:12px}
.tile.on{background:var(--grp);color:var(--acc)}
.tile.on svg{stroke:var(--acc)}
.grp{background:var(--grp);border-radius:22px;padding:10px;display:grid;gap:8px}
.row2{display:flex;align-items:center;gap:14px;background:var(--row);border-radius:18px;padding:14px 16px}
.row2 .d{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--cc) 28%,var(--row));color:var(--cc)}
.row2 .d svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.row2 b{display:block;font:600 18px/1.2 Roboto}
.row2 span{font-size:14.5px;color:var(--dim)}
.row2 i{margin-left:auto;color:var(--dim);font-style:normal;font-size:22px}
.bar{display:flex;align-items:center;gap:14px;background:var(--hi);border-radius:99px;padding:15px 22px;color:var(--dim);margin-top:12px;min-height:56px}
.bar b{font-size:24px;line-height:1;color:var(--acc);font-weight:400}
.bar span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar span.typing::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--acc);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.bar em{width:3px;height:20px;border-radius:2px;background:var(--acc);box-shadow:-7px 5px 0 var(--acc),7px -5px 0 var(--acc)}
.result{min-height:92px;margin-top:10px}
.result .nt{animation:rise .5s both;background:linear-gradient(135deg,var(--wash),transparent)}

/* privacy */
.rec{padding:26px 28px;background:linear-gradient(135deg,var(--wash),var(--bg) 96%)}
.rec h4{font:700 20px Roboto}
.rec .s{color:var(--dim);font-size:13px;margin:2px 0 12px;letter-spacing:.06em;text-transform:uppercase}
.rec .l{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line);color:var(--dim)}
.rec .l b{font:700 17px Roboto;color:var(--text)}
.rec .tot b{color:var(--acc)}
.priv p{color:var(--dim)}

/* faq */
.faq{max-width:820px}
details{background:var(--cont);border-radius:22px;margin-bottom:10px;transition:background .2s}
details[open]{background:var(--hi)}
summary{cursor:pointer;list-style:none;padding:19px 24px;font-weight:500;font-size:18px;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:26px;line-height:1;color:var(--acc);font-weight:400}
details[open] summary::after{content:"\2013"}
details p{margin:0;padding:0 24px 22px;color:var(--dim)}

/* cta + footer */
.cta{padding:clamp(34px,6vw,80px) 0}
.cta .box{padding:clamp(34px,6vw,72px);background:linear-gradient(135deg,var(--wash2),var(--bg) 98%)}
.cta h2{font:700 clamp(32px,5vw,56px)/1.05 Roboto;letter-spacing:-.03em;margin:0 0 24px}
.cta .note{margin:18px 0 0;color:var(--dim)}
footer{padding:30px 0 50px;color:var(--faint);font-size:14.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 26px}
footer a{text-decoration:none}footer a:hover{color:var(--text)}

/* reveal */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--d,0s),transform .6s var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rv{opacity:1;transform:none;transition:none}.fc,.btn,.hero-ph>*,.logo .wm,.logo small{animation:none}.shade .nt{opacity:1;transform:none}.shade.in .nt{animation:none}}

/* per-element category colours: dark uses --c/--t, light uses --cl/--tl */
.fc,.nt,.row2,.radar{--cc:var(--c)}
.fade{--tint:var(--t)}
@media(prefers-color-scheme:light){.fc,.nt,.row2,.radar{--cc:var(--cl)}.fade{--tint:var(--tl)}}
.k-violet{--c:#d9bfff;--cl:#5b2fc0;--t:#7c4dff;--tl:#e8ddff}
.k-amber{--c:#ffb300;--cl:#7a5400;--t:#8a5a00;--tl:#ffe0a0}
.k-sky{--c:#8fc5ff;--cl:#00497d;--t:#1d4a7a;--tl:#cde5ff}
.k-indigo{--c:#bbc3ff;--cl:#4a5bc4;--t:#3142a9;--tl:#dfe0ff}
.k-coral{--c:#ff9d8f;--cl:#ba1a1a;--t:#93000a;--tl:#ffdad4}
.k-lime{--c:#c6f432;--cl:#4a5d00;--t:#4a5d00;--tl:#e1f5a0}
.k-mint{--c:#8bd5c9;--cl:#1f6b62;--t:#005048;--tl:#cff8f1}
.k-pink{--c:#ffa6c9;--cl:#a0245a;--t:#8c2a55;--tl:#ffd8e8}

/* location reminders */
.radar{padding:clamp(18px,3vw,28px)}
.rd{position:relative;width:min(300px,100%);aspect-ratio:1;margin-inline:auto}
.rd .r{position:absolute;inset:0;margin:auto;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--cc) 45%,transparent)}
.rd .r1{width:34%;height:34%;background:color-mix(in srgb,var(--cc) 14%,transparent);border-color:var(--cc);animation:pulse 8s infinite}
.rd .r2{width:66%;height:66%;border-style:dashed}
.rd .r3{width:98%;height:98%;opacity:.5}
.rd .pin{position:absolute;inset:0;margin:auto;width:28px;height:28px;color:var(--cc)}
.rd .pin svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rd .you{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--text);box-shadow:0 0 0 5px color-mix(in srgb,var(--text) 18%,transparent);animation:walk 8s cubic-bezier(.45,0,.35,1) infinite}
.rd .here{position:absolute;left:50%;top:6%;transform:translateX(-50%);background:var(--cc);color:#1b1b21;border-radius:99px;padding:4px 14px;font:700 13px Roboto;opacity:0;animation:here 8s infinite}
@keyframes walk{0%,8%{transform:translate(118px,-92px)}55%,86%{transform:translate(18px,-8px)}100%{transform:translate(118px,-92px)}}
@keyframes pulse{0%,50%{transform:scale(1)}58%{transform:scale(1.14)}66%,100%{transform:scale(1)}}
@keyframes here{0%,52%{opacity:0;transform:translate(-50%,6px)}60%,86%{opacity:1;transform:translate(-50%,0)}95%,100%{opacity:0}}
.radar .pl{opacity:0;transform:translateY(10px);animation:plin 8s infinite;--cc:var(--c)}
@keyframes plin{0%,56%{opacity:0;transform:translateY(10px)}66%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@media(prefers-color-scheme:light){.radar .pl{--cc:var(--cl)}}
.pts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.pts li{position:relative;padding-left:26px;color:var(--dim);font-size:16px}
.pts li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--acc)}
.pts b{color:var(--text);font-weight:500}
@media(prefers-reduced-motion:reduce){.rd .you{animation:none;transform:translate(18px,-8px)}.rd .here,.radar .pl{animation:none;opacity:1;transform:none}.rd .r1{animation:none}}
.radar{position:relative;display:block}
.radar .pl{position:absolute;left:clamp(12px,3vw,24px);right:clamp(12px,3vw,24px);bottom:clamp(12px,3vw,24px);background:color-mix(in srgb,var(--bg) 90%,var(--cc));box-shadow:0 12px 30px rgba(0,0,0,.18)}

/* polish pass */
.faqgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,64px);align-items:start;max-width:1120px}
.faqgrid .sec-h{position:sticky;top:96px;margin:0}
.faqgrid .faq{max-width:none}
@media(max-width:860px){.faqgrid{grid-template-columns:1fr}.faqgrid .sec-h{position:static;margin-bottom:22px}}
.cta .box{position:relative;overflow:hidden}
.cta .box>*{position:relative}
.cta .bigwm{position:absolute;right:-2%;bottom:-14%;width:min(62%,640px);height:auto;fill:none;stroke:var(--text);stroke-width:1.2;opacity:.14;pointer-events:none}
.cta h2{max-width:11em}
@media(max-width:700px){.cta .bigwm{width:120%;right:-20%;bottom:-6%;opacity:.1}}
.hero{position:relative}
.hero::before{content:"";position:absolute;right:-8%;top:4%;width:min(760px,70vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--wash) 80%,transparent),transparent);filter:blur(10px);z-index:-1;animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-4%,5%) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.hero::before{animation:none}}
body{overflow-x:hidden}

/* radar v2: the Market card is always there, dim until you arrive */
.radar{padding:clamp(18px,3vw,28px) clamp(18px,3vw,28px) clamp(18px,3vw,28px);display:grid;gap:16px}
.radar .pl{position:relative;left:auto;right:auto;bottom:auto;opacity:.32;transform:none;animation:plin 8s infinite;box-shadow:none;background:linear-gradient(135deg,var(--ntwash),transparent)}
@keyframes plin{0%,52%{opacity:.32}64%,90%{opacity:1}100%{opacity:.32}}
@media(prefers-reduced-motion:reduce){.radar .pl{animation:none;opacity:1}}
.rd{width:min(400px,100%)}
.rd .you{left:88%;top:16%;animation:walk2 8s cubic-bezier(.45,0,.35,1) infinite}
@keyframes walk2{0%,8%{left:88%;top:16%}55%,86%{left:56%;top:46%}100%{left:88%;top:16%}}
@media(prefers-reduced-motion:reduce){.rd .you{animation:none;left:56%;top:46%}}
@media(max-width:760px){.top .wrap{padding:12px 0 6px}.top nav{margin-inline:-12px;flex-basis:calc(100% + 24px)}.top nav a{padding:9px 12px}.hero::before{opacity:.6}}
@media(max-width:760px){html{scroll-padding-top:112px}}