/* flex — site styles (landing, auth, dashboard) */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0a;--panel:#101010;--panel2:#151515;--panel3:#1b1b1b;
  --line:#1f1f1f;--line2:#2c2c2c;
  --text:#f1f0ec;--muted:#8d8c86;--dim:#5b5a56;
  --acc:#ff5a1f;--acc-ink:#0a0a0a;
  --ok:#5fd068;--err:#ff5a5a;
  --display:'Bricolage Grotesque','Geist',system-ui,sans-serif;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  /* legacy aliases used by dashboard.css */
  --b1:var(--acc);
}
html{color-scheme:dark;scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}
::selection{background:var(--acc);color:var(--acc-ink)}
.muted{color:var(--muted)}
.ico{width:18px;height:18px;flex:none}
.mono{font-family:var(--mono)}

/* subtle film grain instead of glow blobs */
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* wordmark */
.logo{display:inline-flex;align-items:flex-start;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.05em;line-height:1}
.logo sup{font-size:.5em;color:var(--acc);margin-left:1px;margin-top:-1px;font-weight:700}

/* buttons & inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:6px;border:1px solid var(--line2);background:transparent;cursor:pointer;font-weight:500;font-size:14px;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn:hover{border-color:#444;background:var(--panel2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.primary{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:600}
.btn.primary:hover{background:#fff;border-color:#fff}
.btn.accent{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}
.btn.accent:hover{filter:brightness(1.08)}
.btn.danger{border-color:#3a2020;color:#ff8a8a}
.btn.danger:hover{background:#1d1010;border-color:#5a2a2a}
.btn.ghost{border-color:transparent}
.btn.ghost:hover{background:var(--panel2)}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.lg{padding:13px 22px;font-size:15px}
.btn.block{width:100%}

.input{width:100%;padding:10px 12px;border-radius:6px;border:1px solid var(--line2);background:var(--panel);outline:none;transition:border-color .15s;font-size:14px}
.input::placeholder{color:var(--dim)}
.input:focus{border-color:var(--muted)}
textarea.input{resize:vertical;min-height:96px;line-height:1.5}
select.input{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%238d8c86'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
select.input option{background:var(--panel2)}
/* styled dropdown (js/select.js) */
.fsel{position:relative;width:100%}
.fsel-native{display:none!important}
.fsel-btn{display:block;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%238d8c86'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.fsel.open .fsel-btn{border-color:var(--muted)}
.fsel-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);max-height:300px;overflow:auto;padding:5px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;box-shadow:0 24px 50px -12px rgba(0,0,0,.85);animation:fselIn .14s ease}
@keyframes fselIn{from{opacity:0;transform:translateY(-4px)}}
.fsel-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:6px;cursor:pointer;font-size:15px;color:var(--muted);transition:background .1s,color .1s}
.fsel-opt:hover{background:var(--panel3);color:var(--text)}
.fsel-opt.on{color:var(--text);background:var(--panel3)}
.fsel-opt.on::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none}
.fsel-list::-webkit-scrollbar{width:8px}.fsel-list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}

.field{display:block;margin-bottom:16px}
.field>span{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:7px;font-family:var(--mono);text-transform:lowercase;letter-spacing:.01em}
.field>span b{color:var(--text);font-weight:500}
.hint{font-size:12.5px;color:var(--dim);margin-top:6px}
.hint a{color:var(--text);text-decoration:underline;text-underline-offset:2px}

/* toasts */
#toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:1000;pointer-events:none}
.toast{padding:10px 16px;border-radius:6px;background:var(--text);color:var(--bg);font-size:13.5px;font-weight:500;animation:toastIn .2s ease;transition:opacity .3s,transform .3s}
.toast.err{background:var(--err);color:#140505}
.toast.out{opacity:0;transform:translateY(6px)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:34px;padding:14px 28px}
.nav-links{display:flex;gap:24px;font-size:13px;color:var(--muted);font-family:var(--mono)}
.nav-links a:hover{color:var(--text)}
.nav-cta{margin-left:auto;display:flex;gap:6px;align-items:center}

/* ---------- landing ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:84px 0 72px;min-height:calc(100vh - 62px - 56px)}
.eyebrow{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:26px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--acc);border-radius:50%}
.hero h1{font-family:var(--display);font-size:clamp(46px,7vw,98px);line-height:.92;letter-spacing:-.055em;font-weight:800;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero p.lead{font-size:17px;color:var(--muted);max-width:440px;margin-bottom:34px;line-height:1.6}
.claim{display:flex;align-items:stretch;max-width:500px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);overflow:hidden;transition:border-color .15s}
.claim:focus-within{border-color:#555}
.claim .pre{display:flex;align-items:center;padding-left:16px;color:var(--muted);font-family:var(--mono);font-size:15px;white-space:nowrap}
.claim input{flex:1;min-width:0;background:none;border:0;outline:0;padding:16px 2px;font-family:var(--mono);font-size:15px}
.claim .btn{border-radius:0;border:0;border-left:1px solid var(--line2);padding:0 22px}
.claim-status{font-family:var(--mono);font-size:12.5px;margin:10px 0 0 2px;min-height:19px;color:var(--dim)}
.claim-status.ok{color:var(--ok)}.claim-status.err{color:var(--err)}
.hero-meta{display:flex;gap:28px;margin-top:40px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.hero-meta b{color:var(--text);font-weight:500}

/* example profile screens */
.showcase{position:relative;height:600px}
.screen{position:absolute;width:262px;height:520px;border-radius:22px;overflow:hidden;border:1px solid #2a2a2a;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;padding:18px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.screen:nth-child(1){left:2%;top:60px;transform:rotate(-6deg);z-index:1}
.screen:nth-child(2){left:31%;top:0;z-index:3}
.screen:nth-child(3){left:56%;top:76px;transform:rotate(5deg);z-index:2}
.showcase:hover .screen:nth-child(1){transform:rotate(-8deg) translateX(-14px)}
.showcase:hover .screen:nth-child(3){transform:rotate(7deg) translateX(14px)}
.screen .pc{width:100%;padding:24px 16px 16px;border-radius:14px;text-align:center;position:relative}
.screen .av{width:64px;height:64px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;font-weight:700;font-size:22px}
.screen .nm{font-size:22px;font-weight:700;margin-bottom:4px;letter-spacing:-.02em}
.screen .bio{font-size:11.5px;opacity:.75;margin-bottom:14px}
.screen .lk{display:flex;justify-content:center;gap:12px;margin-bottom:14px}
.screen .lk img{width:17px;height:17px}
.screen .views{position:absolute;top:9px;left:11px;font-size:10px;opacity:.6;font-family:var(--mono)}
.screen .pl{display:flex;align-items:center;gap:8px;padding:8px;border-radius:9px;font-size:10px;text-align:left}
.screen .pl i{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center}
.screen .pl i::after{content:"";border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}
.screen .pl div{flex:1;min-width:0}
.screen .pl s{display:block;height:3px;border-radius:3px;margin-top:5px;text-decoration:none;position:relative;overflow:hidden}
.screen .pl s::after{content:"";position:absolute;inset:0 60% 0 0;background:currentColor}
.screen .url{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:10px;opacity:.5}

/* screen 1 — mono, snow */
.s-kai{background:radial-gradient(120% 80% at 50% 110%,#2b3440 0%,#0d1014 60%),#0d1014}
.s-kai::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.4px 1.4px at 20% 30%,#fff 50%,transparent),radial-gradient(1px 1px at 70% 20%,#fff 50%,transparent),radial-gradient(1.2px 1.2px at 40% 70%,#fff 50%,transparent),radial-gradient(1px 1px at 85% 60%,#fff 50%,transparent),radial-gradient(1.6px 1.6px at 10% 85%,#fff 50%,transparent),radial-gradient(1px 1px at 55% 45%,#fff 50%,transparent);background-size:140px 160px;opacity:.55;animation:fall 9s linear infinite}
@keyframes fall{to{background-position:0 160px}}
.s-kai .pc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#e9edf2;backdrop-filter:blur(6px)}
.s-kai .av{background:#c9d2dc;color:#0d1014}
.s-kai .nm{font-family:var(--sans);text-shadow:0 0 14px rgba(255,255,255,.45)}
.s-kai .pl{background:rgba(255,255,255,.06)}
.s-kai .pl i{background:#e9edf2;color:#0d1014}
.s-kai .pl s{background:rgba(255,255,255,.15);color:#e9edf2}

/* screen 2 — warm photo-ish, serif */
.s-mira{background:linear-gradient(180deg,#f6b26b 0%,#e0673f 38%,#8a2f3b 70%,#2b1220 100%)}
.s-mira::before{content:"";position:absolute;left:50%;top:22%;width:180px;height:180px;margin-left:-90px;border-radius:50%;background:radial-gradient(circle,#ffe2a8 0%,rgba(255,200,120,.0) 70%)}
.s-mira::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-6%;height:42%;background:#1b0b14;border-radius:50% 50% 0 0/30% 30% 0 0}
.s-mira .pc{z-index:1;background:rgba(27,11,20,.55);border:1px solid rgba(255,220,190,.18);color:#fff3ea;backdrop-filter:blur(10px)}
.s-mira .av{background:#ffd7b0;color:#7a2533;font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:28px}
.s-mira .nm{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:30px;letter-spacing:0}
.s-mira .pl{background:rgba(255,240,230,.1)}
.s-mira .pl i{background:#ffb37a;color:#2b1220}
.s-mira .pl s{background:rgba(255,255,255,.18);color:#ffb37a}
.s-mira .url{z-index:1;color:#fff}

/* screen 3 — terminal */
.s-sable{background:#050805}
.s-sable::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(80,255,120,.04) 0 1px,transparent 1px 3px)}
.s-sable .pc{background:transparent;border:1px dashed rgba(110,255,140,.35);border-radius:4px;color:#7dff8f;font-family:var(--mono)}
.s-sable .av{border-radius:4px;background:#0f2a12;color:#7dff8f;border:1px solid #2b6b33;font-family:'Press Start 2P',monospace;font-size:14px}
.s-sable .nm{font-family:'Press Start 2P',monospace;font-size:13px;margin:6px 0 10px;text-shadow:2px 0 #ff2bd6,-2px 0 #00e1ff}
.s-sable .bio::after{content:"_";animation:blinkc 1s steps(1) infinite}
@keyframes blinkc{50%{opacity:0}}
.s-sable .pl{border:1px solid rgba(110,255,140,.25);border-radius:3px}
.s-sable .pl i{background:#7dff8f;color:#050805;border-radius:2px}
.s-sable .pl s{background:rgba(110,255,140,.15);color:#7dff8f}
.s-sable .url{color:#7dff8f}

/* marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0;white-space:nowrap;font-family:var(--mono);font-size:14px;color:var(--muted)}
.marquee-track{display:inline-flex;gap:46px;animation:marq 40s linear infinite;padding-left:46px}
.marquee-track span::before{content:"↗ ";color:var(--acc)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
.section{padding-top:110px;padding-bottom:110px}
.sec-head{display:grid;grid-template-columns:200px 1fr;gap:30px;margin-bottom:56px}
.sec-head .tag{font-family:var(--mono);font-size:12.5px;color:var(--muted);padding-top:12px}
.sec-head h2{font-family:var(--display);font-size:clamp(34px,4.6vw,58px);letter-spacing:-.045em;line-height:.98;font-weight:700;max-width:760px}
.sec-head h2 span{color:var(--muted)}

.rows{border-top:1px solid var(--line)}
.row-item{display:grid;grid-template-columns:200px 1fr 1.2fr;gap:30px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:background .2s}
.row-item:hover{background:linear-gradient(90deg,transparent,var(--panel) 30%,transparent)}
.row-item .n{font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.row-item h3{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.025em}
.row-item p{color:var(--muted);font-size:15px;max-width:460px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.step{padding:30px 28px 34px;border-right:1px solid var(--line);background:var(--panel)}
.step:last-child{border-right:0}
.step b{display:block;font-family:var(--display);font-size:64px;line-height:1;font-weight:300;color:var(--dim);margin-bottom:28px;letter-spacing:-.04em}
.step h3{font-size:17px;font-weight:600;margin-bottom:6px}
.step p{color:var(--muted);font-size:14.5px}
.step code{font-family:var(--mono);font-size:13px;color:var(--text);background:var(--panel3);padding:2px 6px;border-radius:4px}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:17px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--muted);font-size:20px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 0 24px;max-width:680px;font-size:15px}

.end{padding:120px 0 0;border-top:1px solid var(--line);overflow:hidden}
.end-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:40px}
.end-top p{font-size:20px;max-width:420px;line-height:1.4}
.end-top p span{color:var(--muted)}
.big-word{font-family:var(--display);font-weight:800;font-size:clamp(120px,31vw,420px);letter-spacing:-.07em;line-height:.74;color:var(--panel3);user-select:none;margin-bottom:-.06em;white-space:nowrap}
.big-word sup{color:var(--acc);font-size:.22em;vertical-align:top;position:relative;top:.25em}
.footer{border-top:1px solid var(--line);padding:22px 0;font-family:var(--mono);color:var(--dim);font-size:12.5px;position:relative;background:var(--bg)}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer a:hover{color:var(--text)}
.footer nav{display:flex;gap:20px}

/* ---------- auth ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-side{border-right:1px solid var(--line);padding:36px 44px;display:flex;flex-direction:column;justify-content:space-between;background:var(--panel)}
.auth-side blockquote{font-family:var(--display);font-size:clamp(30px,3.4vw,46px);line-height:1.02;letter-spacing:-.04em;font-weight:700;max-width:480px}
.auth-side blockquote span{color:var(--muted)}
.auth-side small{font-family:var(--mono);font-size:12px;color:var(--dim)}
.auth-main{display:grid;place-items:center;padding:40px 24px}
.auth-card{width:100%;max-width:380px}
.auth-card h1{font-family:var(--display);font-size:34px;letter-spacing:-.04em;font-weight:700;margin-bottom:6px}
.auth-card>p{color:var(--muted);font-size:14.5px;margin-bottom:32px}
.auth-card .alt{font-size:14px;color:var(--muted);margin-top:22px}
.auth-card .alt a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.prefix-input{display:flex;align-items:center;border:1px solid var(--line2);border-radius:6px;background:var(--panel);transition:border-color .15s}
.prefix-input:focus-within{border-color:var(--muted)}
.prefix-input em{font-style:normal;padding-left:12px;color:var(--muted);font-size:14px;white-space:nowrap;font-family:var(--mono)}
.prefix-input input{border:0;background:none;padding-left:1px;font-family:var(--mono)}
.form-error{color:var(--err);font-size:13px;min-height:18px;margin:-4px 0 12px;font-family:var(--mono)}

/* ---------- email approval: waiting screen ---------- */
.wait-mail{width:52px;height:52px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);display:grid;place-items:center;margin-bottom:26px;position:relative}
.wait-mail svg{width:24px;height:24px}
.wait-mail::after{content:"";position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--acc);border:3px solid var(--bg)}
.auth-card.wait>p b{color:var(--text);font-weight:500}
.wait-status{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line2);border-radius:6px;background:var(--panel);font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:14px}
.wait-status i{width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none;animation:waitPulse 1.4s ease-in-out infinite}
.wait-status #w-timer{margin-left:auto;color:var(--dim)}
#wait[data-state=ok] .wait-status{color:var(--ok)} #wait[data-state=ok] .wait-status i{background:var(--ok);animation:none}
#wait[data-state=err] .wait-status{color:var(--err)} #wait[data-state=err] .wait-status i{background:var(--err);animation:none}
@keyframes waitPulse{50%{opacity:.25;transform:scale(.7)}}
.devbox{border:1px dashed var(--line2);border-radius:6px;padding:12px 14px;margin-bottom:14px;font-family:var(--mono);font-size:12px;color:var(--dim);display:flex;flex-direction:column;gap:6px}
.devbox a{color:var(--acc)}
.wait-acts{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- approve page ---------- */
.approve{min-height:100vh;max-width:560px;margin:0 auto;padding:40px 24px;display:flex;flex-direction:column;justify-content:center;gap:56px}
.ap-eyebrow{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.ap-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc)}
.ap-card[data-state=ok] .ap-eyebrow::before{background:var(--ok)}
.ap-card[data-state=err] .ap-eyebrow::before{background:var(--err)}
.ap-card h1{font-family:var(--display);font-size:clamp(36px,7vw,54px);line-height:.98;letter-spacing:-.05em;font-weight:800;margin-bottom:14px;overflow-wrap:anywhere}
.ap-card>p{color:var(--muted);font-size:16px;line-height:1.55;margin-bottom:28px;max-width:460px}
.ap-details{display:grid;grid-template-columns:120px 1fr;border-top:1px solid var(--line);margin-bottom:30px}
.ap-details dt,.ap-details dd{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.ap-details dt{font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.ap-details dd{text-align:right;overflow-wrap:anywhere}
.ap-acts{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- 404 ---------- */
.nf{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:40px 28px;max-width:1240px;margin:0 auto}
.nf .code{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:22px}
.nf h1{font-family:var(--display);font-size:clamp(40px,8vw,110px);letter-spacing:-.055em;font-weight:800;line-height:.95;margin-bottom:18px;overflow-wrap:anywhere}
.nf h1 span{display:block;color:var(--dim);font-size:.38em;letter-spacing:-.03em;font-weight:600;margin-bottom:.15em}
.nf p{color:var(--muted);margin-bottom:30px;font-size:17px}
.nf .acts{display:flex;gap:8px}

@media (max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:56px}
  .showcase{height:560px;max-width:620px;width:100%;margin:0 auto}
  .sec-head,.row-item{grid-template-columns:1fr;gap:8px}
  .row-item{grid-template-columns:60px 1fr}
  .row-item p{grid-column:2}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line)}
  .nav-links{display:none}
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
}
@media (max-width:640px){
  .wrap,.nav-in{padding-left:18px;padding-right:18px}
  .showcase{height:470px}
  .screen{width:200px;height:400px;padding:12px}
  .screen:nth-child(1){left:0}.screen:nth-child(2){left:22%}.screen:nth-child(3){left:40%}
  .claim .pre{padding-left:12px;font-size:13px}
  .claim input{font-size:14px}
  .claim .btn{padding:0 14px}
  .hero-meta{flex-wrap:wrap;gap:14px 24px}
  .section{padding-top:80px;padding-bottom:80px}
}