/* Keygen public site: floating nav, landing, legal, support, errors. */

/* Floating header: a detached pill that compacts as you scroll */
.nav{position:fixed;top:14px;left:16px;right:16px;z-index:60;display:flex;flex-direction:column;align-items:center;pointer-events:none;transition:top .35s var(--ease)}
.nav-bar{pointer-events:auto;display:flex;align-items:center;gap:14px;width:100%;max-width:1180px;height:62px;padding:0 9px 0 16px;border:1px solid transparent;border-radius:18px;background:transparent;box-shadow:none;transition:max-width .5s var(--ease),height .4s var(--ease),border-color .35s,border-radius .4s,background .35s,box-shadow .35s}
.nav.is-scrolled{top:8px}
.nav.is-scrolled .nav-bar{max-width:860px;height:52px;border-color:rgb(255 255 255/.08);border-radius:16px;background:linear-gradient(to bottom right,rgb(26 26 27/.86),rgb(9 9 9/.86));box-shadow:inset 0 1px 1px rgb(255 255 255/.08),0 1px 3px rgb(0 0 0/.4),0 22px 50px -18px rgb(0 0 0/.95);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.nav.is-open .nav-bar{border-color:rgb(255 255 255/.08);background:rgb(14 14 15/.94)}
.nav-brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.nav-brand .mark{width:19px;height:19px;transition:transform .5s var(--ease)}
.nav-brand:hover .mark{transform:rotate(-12deg) scale(1.06)}
.nav-links{display:flex;align-items:center;justify-content:center;gap:2px;flex:1}
.nav-links a{position:relative;display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:9px;color:var(--text-2);font-size:13.5px;font-weight:500;transition:color .15s,background .15s}
.nav-links a:hover{color:var(--text);background:rgb(255 255 255/.05)}
.nav-links a.is-active{color:var(--text)}
.nav-links a.is-active:after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--accent);transform:translateX(-50%);box-shadow:0 0 8px var(--accent-glow)}
.nav-actions{display:flex;align-items:center;gap:6px;flex:none}
.nav-actions .btn-sm{height:34px;padding:0 14px;border-radius:10px;font-size:13px}
.nav-toggle{display:none}
.nav-menu{pointer-events:auto;display:grid;gap:2px;width:100%;max-width:1080px;margin-top:8px;padding:8px;border:1px solid rgb(255 255 255/.07);border-radius:18px;background:linear-gradient(to bottom right,rgb(24 24 25/.96),rgb(9 9 9/.96));box-shadow:inset 0 1px 1px rgb(255 255 255/.08),0 24px 60px -20px rgb(0 0 0/.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:menu-in .22s var(--ease)}
.nav-menu[hidden]{display:none}
.nav-menu>a{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 12px;border-radius:10px;color:var(--text-2);font-size:14.5px;font-weight:500}
.nav-menu>a:hover{background:rgb(255 255 255/.05);color:var(--text)}
.nav-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 4px 4px}
.nav-menu-actions .btn{height:42px}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.site-main{min-height:60vh}
.site-messages{position:relative;z-index:5;display:grid;gap:8px;width:min(720px,100% - 32px);margin:96px auto -64px}

.kicker-pill{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 14px 0 12px;border:1px solid rgb(255 255 255/.08);border-radius:999px;background:linear-gradient(to bottom right,rgb(255 255 255/.06),rgb(255 255 255/.02));box-shadow:inset 0 1px 0 rgb(255 255 255/.06);color:var(--text-2);font-size:12.5px;font-weight:500;transition:border-color .2s,color .2s}
.kicker-pill .dot-mark{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}
.kicker-pill .icon{width:13px;height:13px;color:var(--muted);transition:transform .2s}
a.kicker-pill:hover{border-color:rgb(255 255 255/.16);color:var(--text)}
a.kicker-pill:hover .icon{transform:translateX(2px)}
.kicker-pill.static .icon{color:var(--accent)}

/* Hero */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;padding:150px 20px 0;text-align:center;overflow:hidden}
.hero-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 32% at 50% 36%,rgb(200 240 96/.13),transparent 70%),radial-gradient(60% 50% at 50% 0%,rgb(255 255 255/.05),transparent 70%)}
.hero-glow:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgb(255 255 255/.035) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 60% 55% at 50% 30%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 30%,#000 20%,transparent 75%)}
.hero-title{display:flex;flex-direction:column;align-items:center;gap:.06em;margin-top:26px;font-size:clamp(34px,8.6vw,96px);font-weight:650;line-height:.98;letter-spacing:-.055em}
.ht-lead{background:linear-gradient(180deg,#fff 35%,#b4b6b9);-webkit-background-clip:text;background-clip:text;color:transparent}
.ht-url{display:inline-flex;align-items:baseline;max-width:100%;white-space:nowrap;overflow:hidden;padding-bottom:.08em}
.ht-host{color:rgb(255 255 255/.28);font-weight:550;letter-spacing:-.06em}
.ht-box{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-align:left}
.ht-name{overflow:hidden;color:#fff;text-overflow:ellipsis}
.ht-caret{flex:none;width:.07em;height:.78em;margin-left:.05em;border-radius:3px;background:var(--accent);box-shadow:0 0 18px var(--accent-glow);animation:ht-blink 1.05s steps(1) infinite}
@keyframes ht-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ht-caret{animation:none}}
.hero-sub{max-width:520px;margin-top:22px;color:var(--text-2);font-size:17px;line-height:1.55}
.claim{margin-top:32px;width:min(470px,100%)}
.claim-bar{position:relative;display:flex;align-items:center;gap:4px;height:58px;padding:6px 6px 6px 20px;border:1px solid rgb(255 255 255/.1);border-radius:16px;background:linear-gradient(to bottom right,#1a1a1b,#0e0e0f);box-shadow:inset 0 1px 1px rgb(255 255 255/.07),0 0 0 6px rgb(255 255 255/.02),0 20px 60px -20px var(--accent-glow);transition:border-color .2s,box-shadow .2s}
.claim-bar:focus-within{border-color:var(--accent-line);box-shadow:inset 0 1px 1px rgb(255 255 255/.07),0 0 0 6px var(--accent-soft),0 20px 60px -16px var(--accent-glow)}
.claim-bar>span{color:var(--accent);font:14px var(--mono);white-space:nowrap}
.claim-bar input:not([type]){height:44px;min-width:0;padding:0 2px;border:0;background:transparent;font:14px var(--mono);box-shadow:none!important}
.claim-bar .btn{height:44px;padding:0 22px;border-radius:11px;font-size:14px}
.hero-fine{margin-top:14px;color:var(--faint);font-size:12.5px}

.stage{position:relative;width:min(1080px,100%);height:600px;margin-top:64px}
.stage:after{content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:180px;background:linear-gradient(transparent,var(--bg) 85%);pointer-events:none;z-index:6}
.stage .stage-card{position:absolute;top:0;width:280px;height:560px;border-radius:26px;box-shadow:0 40px 90px -30px rgb(0 0 0/.9),0 0 0 1px rgb(255 255 255/.05);transition:transform .7s var(--ease)}
.stage .stage-card-1{left:calc(50% - 460px);top:56px;transform:rotate(-6deg);z-index:1}
.stage .stage-card-2{left:calc(50% - 140px);z-index:3}
.stage .stage-card-3{left:calc(50% + 180px);top:56px;transform:rotate(6deg);z-index:2}
.stage:hover .stage-card-1{transform:translate(-14px,-4px) rotate(-8deg)}
.stage:hover .stage-card-3{transform:translate(14px,-4px) rotate(8deg)}
.chip{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1px solid rgb(255 255 255/.09);border-radius:14px;background:linear-gradient(to bottom right,rgb(30 30 32/.9),rgb(14 14 15/.9));box-shadow:inset 0 1px 0 rgb(255 255 255/.08),0 18px 40px -16px rgb(0 0 0/.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:left;animation:float 7s ease-in-out infinite}
.chip span{white-space:nowrap}
.chip strong{display:block;font-size:12.5px;font-weight:600;line-height:1.2}
.chip small{display:block;color:var(--muted);font-size:11px}
.chip .icon-tile{width:30px;height:30px;border-radius:9px}
.chip-a{left:calc(50% - 540px);top:110px}
.chip-b{left:calc(50% + 390px);top:90px;animation-delay:-2s}
.chip-c{left:calc(50% - 520px);top:360px;animation-delay:-4s}
.chip-d{left:calc(50% + 400px);top:330px;animation-delay:-1s}
.chip-e{left:calc(50% - 90px);top:520px;z-index:7;padding:9px 14px;gap:6px;color:var(--muted);font-size:12.5px;animation-delay:-3s}
.chip-e b{color:var(--text);font-weight:500}.chip-e .icon{color:var(--accent)}
.chip-swatches{display:flex;padding-left:4px}
.chip-swatches i{width:18px;height:18px;margin-left:-5px;border:2px solid #151516;border-radius:50%}
.chip-swatches .c1{background:#c8f060}.chip-swatches .c2{background:#8fb2ff}.chip-swatches .c3{background:#ff8ab3}.chip-swatches .c4{background:#ff8a4c}.chip-swatches .c5{background:#e3a8ff}
.chip-type{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgb(255 255 255/.06);font:500 16px/1 "Iowan Old Style","Palatino Linotype",Georgia,serif}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Looks marquee */
.looks{position:relative;padding:24px 0 20px}
.looks-label{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:26px;color:var(--muted);font-size:12.5px}
.looks-label .line{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--line-3),transparent)}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marquee 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.look{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.look-frame{width:170px;height:250px;border-radius:18px}
.look-frame .bio-stage{height:auto!important;padding:18px 10px 0!important;align-content:start!important;transform:scale(.62);transform-origin:top center;width:161%;margin-left:-30.5%}
.look-name{color:var(--muted);font-size:12px;font-weight:500}
@keyframes marquee{to{transform:translateX(calc(-50% - 8px))}}

/* Sections */
.section{width:min(1080px,100% - 40px);margin:0 auto;padding:110px 0 20px}
.section-intro{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:620px;margin:0 auto 48px;text-align:center}
.section-intro h2,.faq-intro h2{font-size:clamp(32px,4.4vw,50px);font-weight:650;letter-spacing:-.045em;line-height:1.02;background:linear-gradient(180deg,#fff 40%,#9d9fa3);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-intro p,.faq-intro p{color:var(--muted);font-size:16px;line-height:1.55}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:250px;padding:20px;overflow:hidden;border:var(--edge);border-radius:24px;background:var(--card);box-shadow:var(--lift);transition:border-color .25s,transform .35s var(--ease)}
.tile:hover{border-color:rgb(255 255 255/.1)}
.tile:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 50% at 50% 0%,rgb(255 255 255/.04),transparent 70%);pointer-events:none}
.tile-head{position:relative;display:flex;align-items:flex-start;gap:12px}
.tile-head h3{font-size:15px;letter-spacing:-.015em}
.tile-head p{margin-top:3px;color:var(--muted);font-size:13px;line-height:1.5}
.tile-art{position:relative;display:grid;place-items:center;flex:1;min-height:130px}
.tile-demo{grid-column:span 2;grid-row:span 2;flex-direction:row;align-items:stretch;gap:24px;padding:24px}
.tile-demo-controls{display:flex;flex-direction:column;gap:18px;flex:1;min-width:0}
.tile-demo-stage{display:grid;place-items:center;flex:none;width:300px}
.demo-frame{width:100%;height:520px;border-radius:24px}
.demo-group{display:flex;flex-direction:column;gap:8px}
.demo-group .label{margin:0;color:var(--muted);font-size:12px}
.demo-opts{display:flex;flex-wrap:wrap;gap:6px}
.demo-swatch,.demo-chip{height:38px;padding:3px;border:1px solid rgb(255 255 255/.08);border-radius:10px;background:rgb(255 255 255/.03);box-shadow:none}
.demo-swatch{width:40px}
.demo-swatch .swatch{width:100%;height:100%;border-radius:7px}.demo-swatch .swatch:after{left:6px;bottom:4px;font-size:11px}
.demo-chip{min-width:42px;padding:0 11px;color:var(--text-2);font-size:16px}
.demo-chip.wide{font-size:12.5px}
.demo-swatch[aria-pressed=true],.demo-chip[aria-pressed=true]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent-line)}
.badge-row{display:flex;gap:6px;padding:8px 10px;border:1px solid rgb(255 255 255/.08);border-radius:999px;background:rgb(255 255 255/.03);box-shadow:inset 0 1px 0 rgb(255 255 255/.05)}
.badge-dot{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgb(255 255 255/.04);transition:background .25s,box-shadow .25s}
.badge-dot .icon{width:19px;height:19px;stroke-width:1.9;transition:transform .35s var(--ease);will-change:transform}
.badge-dot:hover{background:rgb(255 255 255/.08);box-shadow:inset 0 0 0 1px rgb(255 255 255/.06)}
.badge-dot:hover .icon{transform:translateY(-2px) scale(1.12)}
.bd-staff{color:var(--accent)}.bd-og{color:#f5cf7a}.bd-verified{color:#8fc4ff}.bd-partner{color:#e3a8ff}.bd-developer{color:#7ddc92}
.type-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;width:100%;text-align:center}
.type-list li{color:var(--faint);font-size:20px;line-height:1.35;transition:color .4s,transform .4s var(--ease)}
.type-list li.is-on{color:var(--text);transform:scale(1.08)}
.art-backdrop{gap:12px}
.backdrop-mini{position:relative;width:100%;max-width:240px;height:120px;overflow:hidden;border-radius:14px;box-shadow:inset 0 0 0 1px rgb(255 255 255/.06)}
.bm-sky{position:absolute;inset:0;background:linear-gradient(135deg,#1b2a4a,#6a3b5c 55%,#e08a4a)}
.bm-hills{position:absolute;left:-10%;right:-10%;bottom:-20px;height:60px;background:#0b0f18;border-radius:50% 50% 0 0}
.backdrop-mini:after{content:"";position:absolute;inset:0;background:rgb(0 0 0/var(--dim,.35))}
.bm-card{position:absolute;inset:18px 70px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:12px;border:1px solid rgb(255 255 255/.14);border-radius:10px;background:rgb(255 255 255/.06);backdrop-filter:blur(6px)}
.bm-card i{width:22px;height:22px;border-radius:50%;background:#c8f060}
.bm-card b{width:50px;height:5px;border-radius:3px;background:rgb(255 255 255/.7)}.bm-card b.s{width:34px;opacity:.5}
.dim-row{display:flex;align-items:center;gap:10px;width:100%;max-width:240px;margin:0;color:var(--muted);font-size:12px;font-weight:500}
.address-line{display:flex;align-items:center;height:48px;padding:0 16px;border:1px solid rgb(255 255 255/.09);border-radius:14px;background:rgb(255 255 255/.03);box-shadow:inset 0 1px 0 rgb(255 255 255/.05);font-size:15px}
.address-line .mono:first-child{color:var(--muted)}
.address-line .typed{color:var(--accent)}
.caret{width:2px;height:18px;margin-left:2px;background:var(--accent);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.art-effects{display:flex;gap:8px}
.fx{position:relative;display:grid;place-items:end center;width:74px;height:100px;padding-bottom:8px;overflow:hidden;border-radius:12px;background:linear-gradient(160deg,#20242b,#0c0d10);color:var(--text-2);font-size:11px;font-weight:500}
.fx:before{content:"";position:absolute;inset:0;z-index:-1}
.fx{isolation:isolate}
.fx-grain:before{opacity:.5;mix-blend-mode:overlay;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='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fx-scan:before{background:repeating-linear-gradient(0deg,rgb(255 255 255/.07) 0 1px,transparent 1px 3px)}
.fx-aurora:before{inset:-40%;background:radial-gradient(35% 35% at 35% 35%,rgb(200 240 96/.55),transparent 70%),radial-gradient(35% 35% at 65% 65%,rgb(143 178 255/.45),transparent 70%);filter:blur(10px);animation:bio-aurora 9s ease-in-out infinite alternate}

.tile-wide{grid-column:span 2}
.art-music{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.mock-player{display:flex;align-items:center;gap:12px;width:min(100%,360px);padding:10px 12px 10px 10px;border:1px solid rgb(255 255 255/.09);border-radius:22px;background:rgb(0 0 0/.35);box-shadow:inset 0 1px 0 rgb(255 255 255/.06),0 20px 40px -20px rgb(0 0 0/.8)}
.mp-cover{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:14px;background:linear-gradient(135deg,#8fb2ff,#1b2a5a);color:#fff}
.mp-main{flex:1;min-width:0;text-align:left}
.mp-main strong{display:block;font-size:13px}.mp-main small{display:block;color:var(--muted);font-size:11.5px}
.mp-bar{display:block;height:4px;margin-top:8px;border-radius:4px;background:rgb(255 255 255/.14);overflow:hidden}
.mp-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:#8fb2ff;transform:scaleX(.38);transform-origin:0 50%;animation:mp-progress 9s linear infinite}
.mp-play{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:#8fb2ff;color:#04102b}
.mp-play .icon{fill:currentColor;stroke:none}
.mock-enter{padding:9px 16px;border:1px solid rgb(255 255 255/.12);border-radius:999px;background:rgb(255 255 255/.04);color:var(--muted);font-size:12px;letter-spacing:.12em;animation:bio-pulse 2.4s ease-in-out infinite}
@keyframes mp-progress{from{transform:scaleX(.08)}to{transform:scaleX(.92)}}
@keyframes bio-pulse{0%,100%{opacity:.55}50%{opacity:1}}
.art-cursor{overflow:hidden}
.demo-cursor{position:relative;width:100%;height:120px;animation:none}
.demo-cursor i{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent-glow);offset-path:path("M20,90 C70,10 130,110 190,40 S260,20 230,90 S90,110 20,90");animation:cursor-path 5s linear infinite}
.demo-cursor i:nth-child(2){animation-delay:-.08s;transform:scale(.8);opacity:.7}.demo-cursor i:nth-child(3){animation-delay:-.16s;transform:scale(.62);opacity:.5}.demo-cursor i:nth-child(4){animation-delay:-.24s;transform:scale(.48);opacity:.34}.demo-cursor i:nth-child(5){animation-delay:-.32s;transform:scale(.36);opacity:.2}
@keyframes cursor-path{to{offset-distance:100%}}

/* Dashboard window mock */
.window{overflow:hidden;border:1px solid rgb(255 255 255/.07);border-radius:24px;background:#0a0a0b;box-shadow:inset 0 1px 0 rgb(255 255 255/.06),0 60px 120px -40px rgb(0 0 0/.95),0 0 0 8px rgb(255 255 255/.015)}
.window-bar{display:flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-bottom:1px solid rgb(255 255 255/.05);background:rgb(255 255 255/.015)}
.window-bar i{width:10px;height:10px;border-radius:50%;background:rgb(255 255 255/.1)}
.window-bar .mono{display:inline-flex;align-items:center;height:24px;margin:0 auto;padding:0 12px;border-radius:7px;background:rgb(255 255 255/.04);color:var(--muted);font-size:11.5px}
.window-body{display:grid;grid-template-columns:190px minmax(0,1fr) 250px;height:470px}
.mock-side{display:flex;flex-direction:column;gap:2px;padding:14px 10px}
.mock-brand{display:flex;align-items:center;gap:8px;padding:4px 8px 16px}.mock-brand .mark{width:16px;height:16px}.mock-brand .wordmark{font-size:13.5px}
.mock-label{padding:6px 10px;color:var(--faint);font-size:11px}
.mock-item{display:flex;align-items:center;gap:9px;height:32px;padding:0 10px;border:1px solid transparent;border-radius:8px;color:var(--text-2);font-size:12.5px}
.mock-item .icon{color:var(--faint)}
.mock-item.on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--text)}.mock-item.on .icon{color:var(--accent)}
.mock-main{display:flex;flex-direction:column;gap:12px;margin:10px 0;padding:18px;overflow:hidden;border:1px solid rgb(255 255 255/.05);border-radius:16px;background:#0d0d0e}
.mock-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}.mock-title .icon-tile{width:28px;height:28px}
.mock-tabs{display:flex;gap:4px}.mock-tabs span{padding:5px 10px;border-radius:7px;color:var(--muted);font-size:12px;font-weight:550}.mock-tabs .on{background:rgb(255 255 255/.06);color:var(--text)}
.mock-card{display:flex;flex-direction:column;gap:10px;padding:14px;border:var(--edge);border-radius:16px;background:var(--card);box-shadow:inset 0 1px 0 rgb(255 255 255/.06)}
.mock-card strong{font-size:12.5px}
.mock-swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.mock-swatches .swatch{height:34px}.mock-swatches .swatch:after{left:5px;bottom:4px;font-size:10px}
.mock-swatches .on{box-shadow:0 0 0 2px var(--accent)}
.mock-types{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.mock-types span{display:grid;place-items:center;height:34px;border-radius:8px;background:rgb(255 255 255/.04);font-size:15px}.mock-types .on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.mock-accents{padding-left:6px}.mock-accents i{width:24px;height:24px;margin-left:-6px;border-color:#171718}
.mock-save{display:grid;place-items:center;height:34px;margin-top:auto;border:1px solid rgb(255 255 255/.25);border-radius:10px;background:linear-gradient(180deg,#d6f582,var(--accent-2));color:var(--accent-ink);font-size:12.5px;font-weight:600}
.mock-preview{display:grid;place-items:center;padding:14px}
.mock-preview .bio-frame{width:210px;height:420px;border-radius:22px}
.mock-preview .bio-stage{height:auto!important;padding:28px 12px 0!important;align-content:start!important;transform:scale(.8);transform-origin:top center;width:125%;margin-left:-12.5%}
.points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.points>div{padding:18px;border:var(--edge);border-radius:20px;background:var(--card);box-shadow:var(--lift)}
.points h3{margin-top:14px;font-size:14px}.points p{margin-top:4px;color:var(--muted);font-size:13px;line-height:1.5}

/* Numbers */
.numbers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(1080px,100% - 40px);margin:100px auto 0;border:var(--edge);border-radius:24px;background:var(--card);box-shadow:var(--lift)}
.numbers>div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 10px;border-left:1px solid rgb(255 255 255/.05)}
.numbers>div:first-child{border-left:0}
.numbers strong{font-size:38px;font-weight:650;letter-spacing:-.05em;line-height:1;background:linear-gradient(180deg,#fff,#8e9094);-webkit-background-clip:text;background-clip:text;color:transparent}
.numbers span{color:var(--muted);font-size:12.5px}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.faq-intro{position:sticky;top:110px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.faq-intro a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.faq-list{display:grid;gap:10px}
.faq-list details{border:var(--edge);border-radius:18px;background:var(--card);box-shadow:var(--lift);transition:border-color .2s}
.faq-list details[open]{border-color:rgb(255 255 255/.1)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;cursor:pointer;list-style:none;font-size:15px;font-weight:550}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .icon{color:var(--muted);transition:transform .25s var(--ease),color .2s}
.faq-list details[open] summary .icon{transform:rotate(45deg);color:var(--accent)}
.faq-list p{padding:0 20px 20px;color:var(--text-2);font-size:14px;line-height:1.65}

/* Closing CTA */
.cta{position:relative;display:flex;flex-direction:column;align-items:center;width:min(1080px,100% - 40px);margin:110px auto 90px;padding:76px 24px;overflow:hidden;border:var(--edge);border-radius:32px;background:var(--card);box-shadow:var(--lift);text-align:center}
.cta-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 70% at 50% 110%,rgb(200 240 96/.2),transparent 70%)}
.cta-glow:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgb(255 255 255/.08) 1px,transparent 1px);background-size:18px 18px;mask-image:radial-gradient(ellipse 60% 70% at 50% 100%,#000,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 100%,#000,transparent 70%)}
.cta h2{position:relative;font-size:clamp(30px,4.6vw,54px);font-weight:650;letter-spacing:-.05em;line-height:1.02}
.cta h2 span{color:var(--muted)}
.cta .claim{position:relative;margin-top:30px}

/* Footer */
.site-footer{border-top:1px solid rgb(255 255 255/.05);background:linear-gradient(180deg,transparent,rgb(255 255 255/.012))}
.footer-inner{display:flex;justify-content:space-between;gap:40px;width:min(1080px,100% - 40px);margin:0 auto;padding:48px 0 36px}
.footer-brand p{margin-top:12px;max-width:260px;color:var(--muted);font-size:13px}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(110px,auto));gap:40px}
.footer-cols div{display:flex;flex-direction:column;gap:10px}
.footer-cols span{color:var(--text);font-size:12.5px;font-weight:600}
.footer-cols a{color:var(--muted);font-size:13px}.footer-cols a:hover{color:var(--text)}
.footer-base{display:flex;justify-content:space-between;width:min(1080px,100% - 40px);margin:0 auto;padding:18px 0 26px;border-top:1px solid rgb(255 255 255/.04);color:var(--faint);font-size:12px}

/* Reveal on scroll (only once JS has marked the page) */
[data-reveal].reveal-in{transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].reveal-pending{opacity:0;transform:translateY(16px)}

/* Prose: legal, support */
.prose{width:min(720px,100% - 40px);margin:0 auto;padding:140px 0 110px}
.prose .kicker-pill{margin-bottom:22px}
.prose h1{font-size:clamp(34px,5vw,50px);font-weight:650;letter-spacing:-.045em}
.prose .updated{margin-top:14px;color:var(--muted);font-size:13px}
.prose h2{margin:44px 0 12px;font-size:18px;letter-spacing:-.02em}
.prose p,.prose li{color:var(--text-2);font-size:15px;line-height:1.75}
.prose p+p{margin-top:14px}
.prose ul{margin:0;padding-left:20px}
.prose li+li{margin-top:6px}
.prose a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.prose-toc{display:flex;flex-wrap:wrap;gap:6px;margin:28px 0 0;padding:0;list-style:none}
.prose-toc a{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--text-2);font-size:12.5px;text-decoration:none}
.prose-toc a:hover,.prose-toc a[aria-current]{color:var(--text);border-color:var(--line-3);background:rgb(255 255 255/.04)}
.support{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;width:min(1080px,100% - 40px);margin:0 auto;padding:150px 0 110px}
.support h1{margin-top:20px;font-size:clamp(34px,5vw,50px);font-weight:650;letter-spacing:-.045em}
.support .lede{max-width:400px;margin-top:16px;color:var(--muted);font-size:15.5px;line-height:1.6}
.contact-list{display:grid;gap:10px;max-width:400px;margin-top:32px}
.contact-list a{display:flex;align-items:center;gap:14px;padding:14px 16px;border:var(--edge);border-radius:18px;background:var(--card);box-shadow:var(--lift);transition:border-color .2s}
.contact-list a:hover{border-color:rgb(255 255 255/.12)}
.contact-list strong{display:block;font-size:13.5px}
.contact-list small{color:var(--muted);font:12.5px var(--mono)}
.form-card{padding:24px;border:var(--edge);border-radius:24px;background:var(--card);box-shadow:var(--lift)}
.form-card .btn-primary{margin-top:6px}
.lede{color:var(--text-2);font-size:17px;line-height:1.55}

/* Errors */
.error-page{display:grid;place-items:center;min-height:calc(100svh - 200px);padding:140px 20px 60px;text-align:center}
.error-code{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--muted);font:500 12px var(--mono);letter-spacing:.04em}
.error-page h1{margin-top:18px;font-size:clamp(30px,4.4vw,48px);font-weight:650;letter-spacing:-.045em}
.error-page p{max-width:440px;margin:12px auto 28px;color:var(--muted);font-size:15px}
.error-page .row{display:flex;justify-content:center;gap:8px}

@media(max-width:1180px){
  .stage{zoom:.86}
  .chip-a,.chip-c{left:calc(50% - 470px)}.chip-b,.chip-d{left:calc(50% + 330px)}
}
@media(max-width:980px){
  .nav-links{display:none}
  .nav-bar{gap:10px}.nav-brand{margin-right:auto}
  .nav-toggle{display:inline-flex}
  .stage{zoom:.72}
  .chip-a,.chip-b,.chip-c,.chip-d{display:none}
  .bento{grid-template-columns:1fr 1fr}
  .tile-demo,.tile-wide{grid-column:1/-1;grid-row:auto}
  .window-body{grid-template-columns:170px minmax(0,1fr)}
  .mock-preview{display:none}
  .points{grid-template-columns:1fr 1fr}
  .faq{grid-template-columns:1fr;gap:28px}.faq-intro{position:static}
  .support{grid-template-columns:1fr;gap:40px}
  .footer-inner{flex-direction:column}
}
@media(max-width:640px){
  .nav{top:10px;left:10px;right:10px}
  .nav-bar{height:54px;padding-left:14px}
  .nav-hide-sm{display:none!important}
  .hero{padding-top:118px}
  .hero-sub{font-size:15.5px}
  .claim-bar{height:54px;padding-left:14px}.claim-bar>span{font-size:12.5px}.claim-bar .btn{padding:0 16px}
  .stage{zoom:.5;margin-top:48px}
  .stage .stage-card-1{left:calc(50% - 400px)}.stage .stage-card-3{left:calc(50% + 120px)}
  .chip-e{display:none}
  .section{width:calc(100% - 32px);padding-top:84px}
  .section-intro{margin-bottom:32px}
  .bento{grid-template-columns:1fr}
  .tile-demo{flex-direction:column}
  .tile-demo-stage{width:100%}
  .demo-frame{max-width:320px;height:540px}
  .window-body{grid-template-columns:1fr;height:400px}.mock-side{display:none}
  .points{grid-template-columns:1fr}
  .numbers{grid-template-columns:repeat(3,1fr);width:calc(100% - 32px)}
  .numbers>div:nth-child(4){border-left:0}.numbers>div:nth-child(n+4){border-top:1px solid rgb(255 255 255/.05)}
  .numbers strong{font-size:30px}
  .cta{width:calc(100% - 32px);padding:56px 18px;border-radius:26px}
  .footer-cols{grid-template-columns:repeat(2,1fr);gap:28px}
  .footer-inner,.footer-base{width:calc(100% - 32px)}
  .support,.prose{width:calc(100% - 32px);padding-top:120px}
}
@media(prefers-reduced-motion:reduce){.marquee-track,.chip,.caret,.demo-cursor i,.mp-bar i,.mock-enter{animation:none}[data-reveal].reveal-pending{opacity:1;transform:none}}