/* AI Brain design system — components
   Requires tokens.css. Vanilla CSS, no framework, square-edged, light theme only. */

/* ---------- base ---------- */
*{box-sizing:border-box}
body{
  margin:0;background:var(--off);color:var(--ink);
  font:300 var(--text-base)/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);font-weight:300;line-height:1.12;margin:0 0 var(--space-4)}
h1{font-size:var(--text-2xl)}
h2{font-size:var(--text-xl)}
h3{font-size:var(--text-lg);font-weight:400}
p{margin:0 0 var(--space-3)}
a{color:var(--ink);text-underline-offset:3px}
b,strong{font-weight:500}
.muted{color:var(--stone-60)}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--space-4)}
.wrap-wide{max-width:var(--measure-wide);margin:0 auto;padding:0 var(--space-4)}
.label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--track-wide);color:var(--stone-60)}

/* ---------- nav lockup ---------- */
.nav{padding:var(--space-6) 0 0}
.nav .lockup{font-size:var(--text-xs);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--stone-60);text-decoration:none}
.nav .lockup b{color:var(--ink);font-weight:500}

/* ---------- hero ---------- */
.hero{padding:var(--space-12) 0 var(--space-8)}
.hero p.lead{color:var(--stone-60);font-size:var(--text-md);max-width:46ch}
.hero .hero-kicker{display:block;margin-bottom:var(--space-4)}

/* dark hero variant (solid ink band) */
.hero--ink{background:var(--ink);color:var(--surface);padding:var(--space-12) 0}
.hero--ink p.lead{color:var(--stone-30)}
.hero--ink .hero-kicker{color:var(--stone-30)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--ink);color:var(--off);border:0;cursor:pointer;
  padding:.85rem 1.75rem;font:500 var(--text-sm)/1 var(--font-body);
  letter-spacing:var(--track-med);text-transform:uppercase;text-decoration:none;
}
.btn:hover{background:var(--ink-80)}
.btn--ghost{background:transparent;color:var(--ink);border:var(--border)}
.btn--ghost:hover{background:var(--surface)}
.hero--ink .btn{background:var(--off);color:var(--ink)}
.hero--ink .btn:hover{background:var(--surface)}

/* ---------- email-gate form ---------- */
.gate{background:var(--surface);border:var(--border);padding:var(--space-6);display:grid;gap:var(--space-3)}
.gate label{display:grid;gap:var(--space-1);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--track-wide);color:var(--stone-60)}
.gate input{border:var(--border);padding:.7rem .8rem;font:inherit;width:100%;background:var(--surface);color:var(--ink)}
.gate input:focus{outline:2px solid var(--ink);outline-offset:1px}
.gate .hp{position:absolute;left:-9999px;top:-9999px}
.gate .fine{font-size:var(--text-sm);color:var(--stone-60);margin:0}
.gate .err{display:none;color:var(--alert);font-size:var(--text-sm);margin:0}
.gate-ok{display:none;background:var(--surface);border:var(--border);padding:var(--space-6)}
.gate-ok h3{margin-bottom:var(--space-2)}

/* ---------- step card ---------- */
.step{background:var(--surface);border:var(--border);padding:var(--space-6);margin:0 0 var(--space-4);position:relative}
.step .step-no{
  font-family:var(--font-display);font-size:var(--text-lg);color:var(--stone-30);
  position:absolute;top:var(--space-4);right:var(--space-4);line-height:1;
}
.step h3{margin-bottom:var(--space-2);padding-right:var(--space-8)}
.step .check{
  border-top:var(--hairline);margin-top:var(--space-4);padding-top:var(--space-3);
  font-size:var(--text-sm);color:var(--stone-60);
}
.step .check b{color:var(--ink)}

/* ---------- tab toggle ---------- */
.tabs{display:inline-flex;border:var(--border);background:var(--surface)}
.tabs button{
  background:transparent;border:0;cursor:pointer;padding:.6rem 1.1rem;
  font:400 var(--text-sm)/1 var(--font-body);letter-spacing:.02em;color:var(--stone-60);
}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--off)}
.switchbar{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center;margin:0 0 var(--space-6)}
/* visibility driven by data-os / data-path on a container */
[data-os="mac"] .only-win{display:none}
[data-os="win"] .only-mac{display:none}
[data-path="vscode"] .only-terminal{display:none}
[data-path="terminal"] .only-vscode{display:none}

/* ---------- copy block ---------- */
.copyblock{display:flex;align-items:stretch;border:var(--border);background:var(--ink);margin:var(--space-3) 0}
.copyblock code{
  flex:1;font:400 var(--text-sm)/1.5 var(--font-mono);color:var(--off);
  padding:.8rem 1rem;overflow-x:auto;white-space:pre;
}
.copyblock button{
  background:transparent;border:0;border-left:1px solid rgba(244,242,238,.25);color:var(--stone-30);
  font:500 var(--text-xs)/1 var(--font-body);letter-spacing:var(--track-med);text-transform:uppercase;
  padding:0 1rem;cursor:pointer;flex-shrink:0;
}
.copyblock button:hover{color:var(--off)}

/* ---------- callout ---------- */
.callout{border:var(--border);border-left:3px solid var(--stone-60);background:var(--surface);padding:var(--space-4);margin:var(--space-4) 0;font-size:var(--text-sm)}
.callout--warn{border-left-color:var(--alert)}
.callout p:last-child{margin:0}

/* ---------- FAQ accordion ---------- */
.faq{border-top:var(--border)}
.faq details{border-bottom:var(--border)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--space-4) 0;
  font-weight:400;font-size:var(--text-md);display:flex;justify-content:space-between;gap:var(--space-3);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--stone-30);font-family:var(--font-display);font-size:var(--text-lg);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .faq-body{padding:0 0 var(--space-4);color:var(--stone-60);max-width:60ch}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:var(--surface);padding:var(--space-8) 0;margin:var(--space-12) 0 0}
.cta-band h2{color:var(--surface);margin-bottom:var(--space-2)}
.cta-band p{color:var(--stone-30)}
.cta-band .btn{background:var(--off);color:var(--ink);margin-top:var(--space-3)}
.cta-band .btn:hover{background:var(--surface)}

/* ---------- footer ---------- */
.footer{border-top:var(--border);margin-top:var(--space-12);padding:var(--space-6) 0 var(--space-8);font-size:var(--text-xs);color:var(--stone-60)}
.footer .lockup{letter-spacing:var(--track-wide);text-transform:uppercase}
.footer .lockup b{color:var(--ink);font-weight:500}
.footer p{margin:0 0 var(--space-2);max-width:72ch}

/* ---------- responsive ---------- */
@media (max-width:560px){
  .hero{padding:var(--space-8) 0 var(--space-6)}
  .step .step-no{position:static;display:block;margin-bottom:var(--space-1)}
  .step h3{padding-right:0}
}