/* M3 Changer — premium-v1. Neutral dark system, one warm accent, real game art. */
:root{
 color-scheme:dark;
 --bg:#0b0b0c;--band:#0e0e10;--card:#121214;--card-2:#17171a;
 --line:rgb(255 255 255/.08);--line-2:rgb(255 255 255/.13);
 --fg:#f4f4f5;--muted:#a1a1aa;--dim:#71717a;
 --accent:#ef5a3c;--accent-soft:rgb(239 90 60/.12);--accent-line:rgb(239 90 60/.4);
 --radius:12px;--radius-sm:8px;
 --ease:cubic-bezier(.22,1,.36,1)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}
img{max-width:100%}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
p{margin:0;color:var(--muted);text-wrap:pretty}
.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
#ambientCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.7}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left;z-index:40;opacity:.5}

/* primitives */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:rgb(255 255 255/.035);font-size:14px;font-weight:500;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.button:hover{background:rgb(255 255 255/.07);border-color:rgb(255 255 255/.2)}
.button.primary{background:var(--fg);color:#111;border-color:transparent}
.button.primary:hover{background:#fff}
.button .i{transition:transform .2s var(--ease)}.button:hover .i{transform:translateX(2px)}
.button.small{height:34px;padding:0 14px;font-size:13px}
.button:disabled{opacity:.5;cursor:not-allowed}
.text-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--fg);background:none;border:0;padding:0;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.text-link:hover{text-decoration-color:var(--fg)}
.label,.eyebrow,.mini{display:block;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.badge,.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:500;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line)}
.badge .i,.pill .i{width:13px;height:13px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgb(0 0 0/.3)}
.muted{color:var(--dim)}

/* header */
header{position:fixed;inset:0 0 auto;z-index:30;height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(24px,calc((100vw - 1152px)/2));border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}
header.scrolled{background:rgb(11 11 12/.72);backdrop-filter:blur(14px) saturate(1.4);border-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.mark{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--fg);color:#111;font-size:12px;font-weight:700;letter-spacing:-.04em}
header nav{display:flex;gap:28px}
header nav a{font-size:14px;color:var(--muted);transition:color .2s}
header nav a:hover,header nav a.active{color:var(--fg)}
.header-account{display:flex;align-items:center;gap:8px}
.header-login{height:34px;padding:0 12px;border:0;background:none;font-size:13px;color:var(--muted);border-radius:var(--radius-sm)}
.header-login:hover{color:var(--fg);background:rgb(255 255 255/.05)}

/* hero */
.hero{position:relative;min-height:min(920px,100vh);display:flex;align-items:center;padding:112px 0 72px;overflow:hidden;isolation:isolate}
.hero-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-backdrop img{position:absolute;right:-12%;top:50%;width:min(1100px,90vw);translate:0 -50%;filter:blur(60px) saturate(1.4);opacity:.35}
.hero-backdrop:after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 70% 50%,transparent,var(--bg) 75%),linear-gradient(transparent 70%,var(--bg))}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;width:100%}
.pill{color:var(--fg);background:rgb(255 255 255/.04);border-color:var(--line-2);height:30px;padding:0 12px 0 10px;transition:border-color .2s}
.pill:hover{border-color:rgb(255 255 255/.25)}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pill .i{color:var(--dim)}
.hero h1{font-size:clamp(40px,4.4vw,60px);line-height:1.04;letter-spacing:-.04em;margin:24px 0 20px}
.lead{font-size:18px;line-height:1.65;max-width:520px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-stats{display:flex;gap:40px;margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line);max-width:520px}
.hero-stats div{display:flex;flex-direction:column-reverse}
.hero-stats dt{font-size:13px;color:var(--dim)}
.hero-stats dd{margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em}
.hero-stage{position:relative;display:flex;flex-direction:column;align-items:center}
.hero-stage>img{width:100%;max-width:600px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 40px 50px rgb(0 0 0/.6));transition:opacity .2s,transform .4s var(--ease)}
.hero-stage>img.switching{opacity:0;transform:scale(.98)}
.hero-picker{width:100%;max-width:440px;margin-top:-8px}
.hero-selector{display:flex;gap:6px;justify-content:center;padding:6px;background:rgb(18 18 20/.7);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--radius)}
.hero-selector button{flex:1;height:40px;padding:0;border:1px solid transparent;border-radius:7px;overflow:hidden;background:#000;opacity:.5;transition:opacity .2s,border-color .2s}
.hero-selector button img{width:100%;height:100%;object-fit:cover;display:block}
.hero-selector button:hover{opacity:.85}
.hero-selector button[aria-pressed=true]{opacity:1;border-color:rgb(255 255 255/.5)}
.hero-selection-caption{display:flex;justify-content:space-between;font-size:13px;margin-top:10px;padding:0 4px;color:var(--muted)}

/* sections */
.section{position:relative;padding:112px 0;isolation:isolate}
.band{background:rgb(255 255 255/.012);border-block:1px solid var(--line)}
.section-head{max-width:640px;margin:0 auto 48px;text-align:center}
.section-head .label{margin-bottom:12px}
.section-head h2,.split h2,.outro h2{font-size:clamp(30px,3.4vw,40px);line-height:1.15}
.section-head p{margin-top:14px;font-size:16px;line-height:1.75}
/* hover grid like a lit floor: lines show only near the cursor */
.grid-bg:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;background-position:center;-webkit-mask-image:radial-gradient(280px circle at var(--mx,-999px) var(--my,-999px),#000,transparent 70%);mask-image:radial-gradient(280px circle at var(--mx,-999px) var(--my,-999px),#000,transparent 70%);opacity:.9}

/* features */
.category-tabs{display:flex;gap:4px;width:max-content;margin:0 auto 16px;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.category-tabs button{height:34px;padding:0 16px;border:0;border-radius:7px;background:none;font-size:14px;color:var(--muted);transition:background .2s,color .2s}
.category-tabs button:hover{color:var(--fg)}
.category-tabs button[aria-selected=true]{background:var(--card-2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.collection-panel{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:24px;min-height:380px;padding:40px;overflow:hidden;background:radial-gradient(70% 90% at 80% 50%,rgb(255 255 255/.04),transparent),var(--card)}
.collection-copy .label{margin-bottom:14px}
.collection-copy h3{font-size:26px;line-height:1.2;margin-bottom:14px}
.collection-copy p{max-width:380px}
.collection-art{position:relative;height:320px;display:flex;justify-content:center;align-items:flex-end}
.collection-art img{height:100%;object-fit:contain;filter:drop-shadow(0 20px 30px rgb(0 0 0/.6))}
.collection-art img+img{margin-left:-14%}
.collection-art img:nth-child(2){height:110%;z-index:1}
.collection-art img.wide{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line)}
.courier-feature{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.courier-feature img{height:auto;width:min(420px,100%);filter:drop-shadow(0 20px 30px rgb(0 0 0/.6))}
.courier-feature figcaption{font-size:14px;font-weight:500}.courier-feature figcaption span{display:block;text-align:center;font-weight:400;color:var(--dim);font-size:12px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.feature{padding:24px;transition:border-color .2s,background .2s}
.feature:hover{border-color:var(--line-2);background:var(--card-2)}
.feature-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:rgb(255 255 255/.05);color:var(--muted);margin-bottom:18px;transition:color .2s}
.feature-icon .i{width:20px;height:20px}
.feature:hover .feature-icon{color:var(--accent)}
.feature h3{font-size:16px;margin-bottom:6px;letter-spacing:-.01em}
.feature p{font-size:14px;line-height:1.6}

/* item wall */
.item-wall{display:flex;flex-direction:column;gap:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);overflow:hidden}
.item-row{display:flex;gap:12px;width:max-content;animation:marquee 70s linear infinite}
.item-row.reverse{animation-direction:reverse;animation-duration:85s}
@keyframes marquee{to{transform:translateX(-50%)}}
.item-tile{position:relative;flex:none;width:192px;margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#000;transition:transform .3s var(--ease),border-color .3s}
.item-tile img{display:block;width:100%;aspect-ratio:256/170;object-fit:cover}
.item-tile figcaption{position:absolute;inset:auto 0 0;padding:28px 10px 8px;background:linear-gradient(transparent,rgb(0 0 0/.85));font-size:12px;line-height:1.3;opacity:0;transition:opacity .2s}
.item-tile figcaption span{display:block;color:var(--r);font-size:11px;margin-top:2px}
.item-tile:before{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--r);z-index:1}
.item-tile:hover{transform:translateY(-4px);border-color:var(--line-2)}
.item-tile:hover figcaption{opacity:1}

/* app frame */
.app-frame{max-width:1040px;margin:0 auto;padding:8px;border-radius:16px;background:linear-gradient(rgb(255 255 255/.06),rgb(255 255 255/.02));border:1px solid var(--line);box-shadow:0 40px 120px -40px rgb(0 0 0/.9),0 0 0 1px rgb(0 0 0/.4)}
.frame-bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 8px}
.frame-bar span{width:9px;height:9px;border-radius:50%;background:rgb(255 255 255/.12)}
.frame-bar b{margin-left:10px;font-size:12px;font-weight:500;color:var(--dim)}
.app-zoom{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#000}
.app-zoom img{display:block;width:100%;height:auto;transition:transform .6s var(--ease)}
.app-zoom:hover img{transform:scale(1.01)}
.zoom-label{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:8px;background:rgb(0 0 0/.6);backdrop-filter:blur(8px);border:1px solid var(--line-2);font-size:13px;opacity:0;transform:translateY(4px);transition:.25s var(--ease)}
.app-zoom:hover .zoom-label,.app-zoom:focus-visible .zoom-label{opacity:1;transform:none}

/* comparison */
.comparison{position:relative;max-width:1040px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#050506;touch-action:none}
.compare-layer{position:absolute;inset:0}
.compare-layer video{width:100%;height:100%;object-fit:cover;display:block}
.compare-layer.modified{clip-path:inset(0 calc(100% - var(--position)) 0 0)}
.compare-label{position:absolute;top:14px;z-index:3;height:24px;display:inline-flex;align-items:center;padding:0 10px;border-radius:99px;background:rgb(0 0 0/.55);backdrop-filter:blur(8px);border:1px solid var(--line-2);font-size:12px;font-weight:500;transition:opacity .2s}
.compare-label.left{left:14px}.compare-label.right{right:14px}
.compare-status{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:var(--muted);z-index:1}
.comparison[data-state=ready] .compare-status{display:none}
.divider{position:absolute;top:0;bottom:0;left:var(--position);z-index:2;width:2px;translate:-50%;background:#fff;box-shadow:0 0 20px rgb(0 0 0/.5)}
.divider span{position:absolute;top:50%;left:50%;translate:-50% -50%;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:#111;box-shadow:0 4px 20px rgb(0 0 0/.5);transition:transform .2s}
.divider svg{width:18px;height:18px}
.comparison.dragging .divider span{transform:scale(.92)}
#comparisonRange{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.comparison-toolbar{max-width:1040px;margin:14px auto 0;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--dim)}
.compare-play{height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:rgb(255 255 255/.03);font-size:13px}
.compare-play:disabled{opacity:.4}

/* safety */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split h2{margin:18px 0 16px}
.split p{max-width:460px;line-height:1.75}
.check-list{list-style:none;margin:0;padding:8px}
.check-list li{display:flex;align-items:center;gap:14px;padding:16px;font-size:14px;line-height:1.5}
.check-list li+li{border-top:1px solid var(--line)}
.check-list li>span{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:8px;background:rgb(255 255 255/.05);color:var(--muted)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1160px;margin:0 auto}
.plan{position:relative;display:flex;flex-direction:column;padding:28px}
.plan.featured{background:linear-gradient(var(--card-2),var(--card));border-color:var(--line-2);box-shadow:0 0 0 1px rgb(255 255 255/.04),0 30px 60px -30px rgb(0 0 0/.8)}
.plan-badge{position:absolute;top:24px;right:24px}
.muted-badge{color:var(--muted);background:rgb(255 255 255/.04);border-color:var(--line-2)}
.plan-name{font-size:14px}
.plan-price{margin-top:18px;color:var(--fg)}
.plan-price b{font-size:36px;font-weight:600;letter-spacing:-.03em}
.plan-day{font-size:13px;color:var(--dim);margin-top:4px;min-height:20px}
.plan ul{list-style:none;margin:24px 0 28px;padding:0;display:grid;gap:10px;font-size:14px;color:var(--muted)}
.plan li{display:flex;gap:10px;align-items:center}
.plan li .i{color:var(--fg);width:15px;height:15px}
.plan .button{margin-top:auto;width:100%}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1160px;margin:40px auto 0}
.trust div{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:4px}
.trust .i{grid-row:span 2;width:20px;height:20px;color:var(--muted)}
.trust b{font-size:14px;font-weight:500}.trust span{font-size:13px;color:var(--dim)}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.steps li{padding:28px}
.step-n{display:grid;place-items:center;width:28px;height:28px;border-radius:99px;border:1px solid var(--line-2);font-size:13px;font-weight:600;margin-bottom:20px}
.steps h3{font-size:16px;margin-bottom:8px;letter-spacing:-.01em}
.steps p{font-size:14px}
.download-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;align-items:center;margin-top:32px;font-size:13px;color:var(--dim)}

/* faq */
.faq{max-width:760px}
.faq-items{padding:4px 24px}
.faq-items details+details{border-top:1px solid var(--line)}
.faq-items summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;list-style:none;cursor:pointer;font-weight:500;font-size:15px}
.faq-items summary::-webkit-details-marker{display:none}
.faq-indicator{position:relative;width:14px;height:14px;flex:none}
.faq-indicator:before,.faq-indicator:after{content:"";position:absolute;top:50%;left:0;right:0;height:1.5px;background:var(--muted);transition:transform .3s var(--ease)}
.faq-indicator:after{transform:rotate(90deg)}
details[open] .faq-indicator:after{transform:rotate(0)}
.faq-items details p{padding:0 32px 20px 0;font-size:14px;line-height:1.75}

/* outro */
.outro{padding:144px 0 160px;text-align:center}
.outro p{max-width:520px;margin:16px auto 0;line-height:1.75}
.outro-checks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:28px 0 32px;font-size:14px;color:var(--muted)}
.outro-checks span{display:inline-flex;align-items:center;gap:8px}
.outro-checks .i{color:var(--fg)}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--bg)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer-identity p{font-size:14px;margin-top:14px}
.footer-disclaimer{font-size:12px!important;color:var(--dim)!important;max-width:320px}
.footer-documents,.footer-community{display:flex;flex-direction:column;gap:10px}
.footer-documents .label,.footer-community .label{margin-bottom:4px}
.footer-documents a{font-size:14px;color:var(--muted);width:max-content}
.footer-documents a:hover{color:var(--fg)}
.social-links{display:flex;gap:8px;flex-wrap:wrap}
.social-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);background:rgb(255 255 255/.03);color:#e4e4e7;transition:color .2s,border-color .2s,background .2s,transform .2s var(--ease)}
.social-icon:hover{color:#fff;border-color:rgb(255 255 255/.25);background:rgb(255 255 255/.07);transform:translateY(-2px)}
.social-icon svg{width:18px;height:18px;fill:currentColor}
.footer-controls{display:flex;gap:16px;align-items:center;margin-top:8px}
.footer-controls button,.back-to-top{border:0;background:none;padding:0;font-size:13px;color:var(--dim)}
.footer-controls button:hover,.back-to-top:hover{color:var(--fg)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.visible{opacity:1;transform:none}
.feature-grid .reveal:nth-child(2),.steps .reveal:nth-child(2){transition-delay:.06s}
.feature-grid .reveal:nth-child(3),.steps .reveal:nth-child(3){transition-delay:.12s}
.feature-grid .reveal:nth-child(5){transition-delay:.06s}.feature-grid .reveal:nth-child(6){transition-delay:.12s}
.hero-copy>*{animation:enter .8s var(--ease) both}
.hero-copy>:nth-child(2){animation-delay:.06s}.hero-copy>:nth-child(3){animation-delay:.12s}.hero-copy>:nth-child(4){animation-delay:.18s}.hero-copy>:nth-child(5){animation-delay:.24s}
.hero-stage{animation:enter 1s .1s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(12px)}}
body.no-motion *,body.no-motion *:before,body.no-motion *:after{animation:none!important;transition:none!important}
body.no-motion .reveal{opacity:1;transform:none}


/* dialogs */
dialog{border:1px solid var(--line-2);border-radius:16px;background:var(--card);color:var(--fg);padding:0;box-shadow:0 40px 120px rgb(0 0 0/.7)}
dialog::backdrop{background:rgb(0 0 0/.65);backdrop-filter:blur(6px)}
dialog[open]{animation:dialog-in .3s var(--ease)}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px) scale(.99)}}
body:has(dialog[open]){overflow:hidden}
.dialog-close,#supportClose{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:rgb(255 255 255/.05);color:var(--muted)}
.dialog-close:focus-visible,#supportClose:focus-visible{outline:1px solid rgb(255 255 255/.35);outline-offset:2px}
.dialog-close:hover,#supportClose:hover{color:var(--fg);background:rgb(255 255 255/.1)}
.ui-icon{width:16px;height:16px}
#lightbox{max-width:min(1400px,94vw);background:#000}
#lightbox img{display:block;width:100%}

/* auth */
.auth-dialog{width:min(920px,94vw);max-height:92vh;overflow:auto}
.auth-layout{display:grid;grid-template-columns:.9fr 1fr;min-height:600px}
/* auth side panel: brand / hero / copy / caption on a grid, so the art never covers the text at any dialog height */
.auth-art{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;padding:28px 32px;overflow:hidden;isolation:isolate;background:radial-gradient(70% 45% at 50% 42%,rgb(239 90 60/.12),transparent 70%),#0c0c0e;border-right:1px solid var(--line)}
.auth-art:after{content:"";position:absolute;inset:auto 0 0;height:45%;z-index:-1;background:linear-gradient(transparent,#0c0c0e 70%);pointer-events:none}
.auth-art .brand{grid-row:1;position:relative;z-index:1}
.auth-art img{grid-row:2;justify-self:center;align-self:end;width:122%;max-width:none;height:100%;max-height:540px;min-height:0;object-fit:contain;object-position:center bottom;margin:12px -11% 4px;filter:drop-shadow(0 24px 36px rgb(0 0 0/.7));-webkit-mask-image:linear-gradient(#000 72%,transparent 98%);mask-image:linear-gradient(#000 72%,transparent 98%);pointer-events:none;position:relative;z-index:-2}
.auth-art-copy{grid-row:3;position:relative;z-index:1}
.auth-art-copy h2{font-size:26px;line-height:1.2;margin-top:10px}
.auth-art-copy em{font-style:normal}
.auth-art>p{grid-row:4;position:relative;z-index:1;font-size:13px;margin-top:12px}
.auth-content{padding:40px 36px}
.auth-tabs{display:flex;gap:4px;padding:4px;width:max-content;background:var(--bg);border:1px solid var(--line);border-radius:10px;margin-bottom:28px}
.auth-tabs button{height:32px;padding:0 14px;border:0;border-radius:7px;background:none;color:var(--muted);font-size:14px}
.auth-tabs button[aria-selected=true]{background:var(--card-2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.auth-content h2{font-size:24px}
.auth-content>p{font-size:14px;margin-top:8px}
.social-auth{display:grid;grid-template-columns:1fr;gap:8px;margin-top:24px}
.social-button{display:flex;align-items:center;justify-content:center;gap:10px;height:42px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:rgb(255 255 255/.03);font-size:14px}
.social-button:hover{background:rgb(255 255 255/.07)}
.social-symbol,.social-button svg{width:16px;height:16px;font-weight:700;line-height:16px;text-align:center}
.social-button .google-logo{width:18px;height:18px}
.social-button:disabled{opacity:.6;cursor:default}
.forgot-link{margin-top:8px;font-size:13px;color:var(--muted);text-decoration-color:transparent}
.forgot-link:hover{color:var(--fg);text-decoration-color:var(--line-2)}
.forgot-link[hidden]{display:none}
.action-dialog .mark{width:40px;height:40px;border-radius:10px;font-size:15px;margin:0 auto 16px}
.action-dialog form{text-align:left;margin-top:20px}
.action-dialog .auth-submit{margin-top:4px}
.action-dialog #actionClose{margin-top:12px}
.auth-separator{display:flex;align-items:center;gap:12px;margin:22px 0;font-size:12px;color:var(--dim)}
.auth-separator:before,.auth-separator:after{content:"";flex:1;height:1px;background:var(--line)}
.auth-field{margin-bottom:14px}
.auth-field label,.account-card label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.auth-field label span{color:var(--dim);font-weight:400}
.auth-field input,.account-card input,#checkoutForm select,.billing-order textarea{width:100%;height:42px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:var(--bg);font-size:14px;transition:border-color .2s,box-shadow .2s}
.auth-field input:focus,.account-card input:focus,#checkoutForm select:focus-visible,.billing-order textarea:focus-visible{outline:none;border-color:rgb(255 255 255/.35);box-shadow:0 0 0 3px rgb(255 255 255/.06)}
.auth-field input::placeholder{color:var(--dim)}
.password-field{position:relative}
.password-field input{padding-right:96px}
.password-field button{position:absolute;right:6px;top:6px;height:30px;padding:0 10px;border:0;border-radius:6px;background:rgb(255 255 255/.05);font-size:12px;color:var(--muted)}
.promo-field p{font-size:12px;color:var(--dim);margin-top:6px}
.auth-submit{width:100%;margin-top:6px}
.form-message{font-size:13px;margin:8px 0;color:var(--muted)}
.form-message:empty{display:none}
.form-message.is-error{color:#ff8a7a}

/* account */
.account-view{padding-top:120px;padding-bottom:96px;min-height:80vh}
.account-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.account-identity{display:flex;align-items:center;gap:16px}
.account-avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--fg);color:#111;font-weight:700;font-size:20px}
.account-heading h1{font-size:30px}
.account-heading p:last-child{font-size:14px}
.account-heading .eyebrow{margin-bottom:4px}
.email-notice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;margin-bottom:20px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:14px;color:var(--muted)}
.email-notice:has(#emailStatus:empty){display:none}
.account-tabs{display:flex;gap:4px;padding:4px;width:max-content;max-width:100%;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:16px}
.account-tabs button{height:34px;padding:0 14px;border:0;border-radius:7px;background:none;color:var(--muted);font-size:14px;white-space:nowrap}
.account-tabs button[aria-selected=true]{background:var(--card-2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.account-panel{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
.account-panel[hidden]{display:none}
.account-card{padding:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.account-card h2{font-size:20px;margin-bottom:8px}
.account-card>p{font-size:14px;margin-bottom:20px}
.account-card>.mini{margin-bottom:10px}
.account-card form{display:grid;gap:4px}
.account-card input{margin-bottom:12px}
.account-card input[readonly]{color:var(--dim)}
.form-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.account-details dl{margin:0 0 16px;display:grid;gap:0}
.account-details dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.account-details dt{color:var(--dim)}.account-details dd{margin:0;text-align:right}
.account-details>p{font-size:13px}
.billing-help{font-size:12px;margin:-4px 0 14px}
#checkoutForm select{margin-bottom:12px}
.billing-order{padding:14px 0;border-top:1px solid var(--line);font-size:14px}
.billing-order:first-child{border-top:0}
.billing-order textarea{height:auto;min-height:64px;padding:10px 12px;margin:8px 0;font-family:ui-monospace,monospace;resize:vertical}
.download-card{text-align:center;display:flex;flex-direction:column;align-items:center}
.download-card .mark{width:56px;height:56px;border-radius:14px;font-size:20px;margin-bottom:18px}
.download-card .download-meta{margin-top:12px}
.verify-dialog{width:min(440px,92vw);padding:32px;text-align:center}
.verify-dialog h2{font-size:20px;margin-bottom:8px}
.verify-dialog p{font-size:14px;margin-bottom:20px}
.verify-dialog .text-link{margin-top:14px}

/* documents */
.info-dialog{width:min(760px,94vw);max-height:88vh;overflow:auto;padding:40px}
.info-dialog h2{font-size:26px;margin:8px 0 6px}
.info-version{font-size:13px;color:var(--dim);margin-bottom:24px}
.info-version[hidden]{display:none}
.info-dialog h3{font-size:16px;margin:24px 0 8px}
.info-dialog p{font-size:14px;line-height:1.75;margin-bottom:10px}
.info-dialog .info-lead{color:var(--fg);font-size:15px}
.info-dialog .info-note{font-size:13px;color:var(--dim)}
.legal-section+.legal-section{border-top:1px solid var(--line);margin-top:8px}
.contact-socials{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.contact-detail{font-size:14px;color:var(--muted);margin:6px 0}
.contact-detail strong{color:var(--fg);font-weight:500}
.contact-detail a{text-decoration:underline;text-underline-offset:3px}

/* support */
.support-widget{position:fixed;right:20px;bottom:20px;z-index:25;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
#supportToggle{position:relative;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 12px;border-radius:99px;border:1px solid var(--line-2);background:rgb(18 18 20/.85);backdrop-filter:blur(12px);font-size:14px;box-shadow:0 10px 30px rgb(0 0 0/.4)}
#supportToggle:hover{border-color:rgb(255 255 255/.25)}
#supportToggle>svg{width:18px;height:18px}
#supportToggle>span:not(.support-dot){display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
#supportToggle small{font-size:11px;color:var(--dim)}
.support-dot{position:absolute;top:8px;left:26px;width:8px;height:8px;border-radius:50%;background:var(--dim);border:2px solid var(--card)}
.is-online .support-dot{background:#3ecf6e}
.support-panel{position:relative;width:min(340px,calc(100vw - 40px));padding:24px;border-radius:14px;background:var(--card);border:1px solid var(--line-2);box-shadow:0 30px 80px rgb(0 0 0/.6)}
.support-panel[hidden],#supportDirect[hidden]{display:none}
.support-panel h3{font-size:18px;margin:8px 0 6px}
.support-panel p{font-size:14px;margin-bottom:16px}
#supportDirect{width:100%;margin:14px 0 10px}

/* checkout */
.checkout-dialog{width:min(520px,94vw);max-height:92vh;overflow:auto;padding:32px}
.checkout-dialog h2{font-size:24px;margin:8px 0 18px}
.pay-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.pay-plan{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border:0;border-radius:9px;background:none;color:var(--dim);font-size:13px;transition:background .15s,color .15s}
.pay-plan b{font-size:14px;font-weight:600;color:var(--muted)}
.pay-plan:hover b{color:var(--fg)}
.pay-plan[aria-checked=true]{background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted)}
.pay-plan[aria-checked=true] b{color:var(--fg)}
.pay-summary{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:14px 0 20px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.pay-summary div b{display:block;font-weight:500;font-size:14px}
.pay-summary span{font-size:13px;color:var(--dim)}
#payTotal{font-size:26px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.pay-help{font-size:12px;color:var(--dim);margin-top:6px;line-height:1.5}
.pay-methods{border:0;padding:0;margin:18px 0 0;display:grid;gap:8px;min-width:0}
.pay-methods legend{padding:0;margin-bottom:8px;font-size:13px;font-weight:500}
.pay-method{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);cursor:pointer;transition:border-color .15s}
.pay-method input{position:absolute;opacity:0;pointer-events:none}
.pay-method:has(input:checked){border-color:rgb(255 255 255/.4);box-shadow:0 0 0 1px rgb(255 255 255/.15)}
.pay-method:has(input:focus-visible){outline:2px solid var(--fg);outline-offset:2px}
.pay-method-text b{display:block;font-size:14px;font-weight:600}
.pay-method-text small{display:block;font-size:12px;color:var(--dim);line-height:1.4}
.sbp-logo{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:10px;background:#fff}
.sbp-logo svg{width:24px;height:24px}
.pay-check{margin-left:auto;width:18px;height:18px;flex:none;border-radius:50%;border:1.5px solid var(--line-2);transition:border .15s}
.pay-method:has(input:checked) .pay-check{border:5px solid #f4f4f5}
.pay-soon{justify-content:center;border-style:dashed;background:none;color:var(--dim);font-size:13px;cursor:default}
.pay-verify{margin-top:14px;padding:10px 12px;border-radius:10px;border:1px solid rgb(239 90 60/.35);background:rgb(239 90 60/.08);font-size:13px;color:#ffc2b5}
.pay-verify[hidden]{display:none}
#paySubmit{margin-top:18px}
.pay-legal{margin-top:10px;font-size:12px;color:var(--dim);text-align:center}
.pay-legal a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.checkout-dialog{padding:28px 18px}.pay-plans{grid-template-columns:1fr 1fr}}

/* responsive */
@media (max-width:1180px){.plans{grid-template-columns:1fr 1fr;max-width:760px}}
@media (max-width:980px){
 header nav{display:none}
 .hero{padding-top:96px}
 .hero-grid,.collection-panel,.split{grid-template-columns:1fr}
 .hero-stage{margin-top:16px}.hero-stage>img{max-width:360px}.hero{min-height:0}
 .feature-grid,.plans,.steps,.trust{grid-template-columns:1fr 1fr}
 .footer-grid{grid-template-columns:1fr 1fr}.footer-identity{grid-column:1/-1}
 .auth-layout{grid-template-columns:1fr}.auth-art{display:none}
 .account-panel{grid-template-columns:1fr}
 .split{gap:32px}
}
@media (max-width:640px){
 .wrap{padding:0 16px}
 header{padding:0 16px}.header-login{display:none}
 .section{padding:80px 0}
 .hero h1{font-size:38px}.lead{font-size:16px}
 .hero-stats{gap:24px}.hero-stats dd{font-size:20px}
 .feature-grid,.plans,.steps,.trust,.footer-grid{grid-template-columns:1fr}
 .collection-panel{padding:24px}.collection-art{height:240px}
 .category-tabs{width:100%}.category-tabs button{flex:1;padding:0 8px}
 .item-tile{width:150px}
 .comparison{aspect-ratio:4/3}
 .faq-items{padding:4px 16px}
 .auth-content{padding:32px 20px}.social-auth{grid-template-columns:1fr}
 .info-dialog{padding:28px 20px}
 #supportToggle>span:not(.support-dot){display:none}#supportToggle{padding:0 13px}
}