/* OFFCOLOR — site styles. The brand is dark-only by design (the mark needs a near-black ground). */
:root{
  --void:#00020E; --panel:#0A0F26; --deep:#0D1433; --steel:#5B6187; --beam:#868CB4; --ghost:#B8BCD8; --white:#FFFFFF;
  --amber:#FEC27C; --lavender:#BDA1FC; --periwinkle:#C3C6FC; --azure:#379AFD; --cyan:#56C8FF; --magenta:#EC2663;
  --rule:rgba(195,198,252,.14); --rule-strong:rgba(195,198,252,.28);
  --spectrum:linear-gradient(90deg,#FEC27C,#FE7147 16%,#EC2663 30%,#E788FD 46%,#BDA1FC 58%,#C3C6FC 66%,#4431F4 80%,#379AFD 90%,#56C8FF);
  --body:"Instrument Sans","Helvetica Neue",system-ui,sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;
  --gut:max(20px,env(safe-area-inset-left,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--ghost);font-family:var(--body);font-size:16px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--lavender)} a:hover{color:var(--periwinkle)}
:focus-visible{outline:2px solid var(--lavender);outline-offset:3px;border-radius:4px}
h1,h2,h3{color:var(--white);font-weight:500;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media (min-width:900px){.wrap{padding-left:64px;padding-right:64px}}
.mono{font-family:var(--mono);font-weight:300;letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:var(--beam)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:8px;font:600 16px var(--body);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:filter .15s}
.btn-primary{background:var(--azure);color:var(--void)} .btn-primary:hover{color:var(--void);filter:brightness(1.1)}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--rule-strong)} .btn-ghost:hover{color:var(--white);border-color:var(--ghost)}
.spectrum-rule{height:1px;background:var(--spectrum);opacity:.55}

/* header */
.site-head{position:sticky;top:0;z-index:10;background:rgba(0,2,14,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding-top:env(safe-area-inset-top,0px)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding-block:14px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand .mark{height:30px;width:auto} .brand .word{height:11px;width:auto}
.ref-inset img{height:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;font-size:15px}
.nav a{color:var(--ghost);text-decoration:none} .nav a:hover{color:var(--white)}
.nav .btn{min-height:44px;padding:10px 18px;font-size:15px}
@media (max-width:720px){.nav .hide-sm{display:none}}

/* hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-block:clamp(40px,7vw,96px) 72px}
.hero-copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:clamp(40px,4.4vw,64px);line-height:1.04;letter-spacing:-.02em}
.hero .lead{font-size:18px;max-width:34em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.proof{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-top:14px;padding-top:22px;border-top:1px solid var(--rule)}
.proof .num{font-size:30px;color:var(--white)} .proof s{color:var(--steel)} .proof .after{color:var(--cyan)}
.proof small{font-size:14px;color:var(--beam);flex:1 1 220px}
.hero-fig{flex:1.5 1 540px;min-width:0;margin:0;display:flex;flex-direction:column;gap:12px}
.hero-fig figcaption{font-size:13px;color:var(--beam)}

/* before/after compare */
.compare{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--panel);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;box-shadow:0 30px 80px rgba(68,49,244,.18)}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare .top{clip-path:inset(0 calc(100% - var(--split,50%)) 0 0)}
.compare .line{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.compare .knob{position:absolute;top:50%;left:var(--split,50%);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;border:0;display:grid;place-items:center;cursor:ew-resize}
.tag{position:absolute;top:14px;padding:4px 10px;border-radius:4px;background:rgba(0,2,14,.78);color:#fff;font:12px var(--mono);letter-spacing:.08em;pointer-events:none}
.tag.l{left:14px} .tag.r{right:14px}
.ref-inset{position:absolute;left:14px;bottom:14px;width:22%;min-width:96px;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:6px;background:rgba(0,2,14,.78);pointer-events:none}
.ref-inset span{font:11px var(--mono);letter-spacing:.08em;color:#fff}
.ref-inset img{position:static;aspect-ratio:16/9;border-radius:3px}

/* sections */
section{scroll-margin-top:80px}
.band{background:var(--panel);border-block:1px solid rgba(195,198,252,.10)}
.sec{padding-block:96px;display:flex;flex-direction:column;gap:40px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 48px}
.sec-head h2{font-size:clamp(28px,3.2vw,44px);line-height:1.1;letter-spacing:-.015em;max-width:16em}
.sec-head p{max-width:30em}

/* examples */
.examples{display:flex;flex-direction:column;gap:28px}
.ex{background:var(--panel);border:1px solid rgba(195,198,252,.10);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:18px}
.ex-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:640px){.ex-row{grid-template-columns:1fr}}
.ex figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.ex figure span{font:12px var(--mono);letter-spacing:.08em;color:var(--beam)}
.ex figure.res span{color:var(--cyan)}
.ex img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.ex figure.res img{box-shadow:0 0 0 2px var(--cyan)}
.ex-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px}
.ex-meta .num{font-size:22px;color:var(--white)}
.ex-meta p{font-size:15px;flex:1 1 260px}

/* steps + tools */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px}
.steps li{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid rgba(195,198,252,.2)}
.steps h3{font-size:22px}
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:rgba(195,198,252,.10);border:1px solid rgba(195,198,252,.10);border-radius:12px;overflow:hidden}
.tools > div{background:var(--void);padding:30px;display:flex;flex-direction:column;gap:10px}
.tools h3{font-size:20px}
.soon{font:11px var(--mono);letter-spacing:.08em;color:var(--lavender);border:1px solid rgba(189,161,252,.4);border-radius:999px;padding:2px 8px;align-self:flex-start}

/* plans + signup */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.plan{background:var(--void);border:1px solid rgba(195,198,252,.12);border-radius:12px;padding:30px;display:flex;flex-direction:column;gap:18px}
.plan.featured{border:1px solid transparent;background-image:linear-gradient(var(--void),var(--void)),linear-gradient(135deg,#FEC27C,#EC2663 30%,#BDA1FC 58%,#4431F4 80%,#56C8FF);background-origin:border-box;background-clip:padding-box,border-box}
.plan h3{font-size:20px} .plan .price{font:32px var(--mono);color:var(--white)} .plan .price small{font-size:15px;color:var(--beam)}
.plan ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;flex:1}
.signup{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;padding-block:112px}
.signup h2{font-size:clamp(30px,3.6vw,52px);line-height:1.08;letter-spacing:-.02em;max-width:14em}
.signup form{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:520px}
.signup input[type=email]{flex:1 1 260px;min-height:48px;padding:12px 16px;border-radius:8px;border:1px solid var(--rule-strong);background:var(--panel);color:var(--white);font:16px var(--body)}
.signup input::placeholder{color:var(--steel)}
.form-msg{min-height:1.6em;font-size:15px}
.form-msg.ok{color:var(--cyan)} .form-msg.err{color:#FF8A94}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* footer */
.site-foot{border-top:1px solid rgba(195,198,252,.10);padding-bottom:env(safe-area-inset-bottom,0px)}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;padding-block:32px;font-size:14px;color:var(--beam)}
.site-foot a{color:var(--beam);text-decoration:none} .site-foot a:hover{color:var(--white)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}

/* prose pages */
.prose{max-width:46em;padding-block:72px;display:flex;flex-direction:column;gap:18px}
.prose h1{font-size:40px;letter-spacing:-.02em} .prose h2{font-size:22px;margin-top:18px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}