/* SCAPI design system — relay style (dark, neon accent). Shared by home, pricing, mcp, 404, docs, playground.
   Tokens below also feed docs.css (--bg --fg --muted --line --code-bg --accent --mono). */
:root{
  --bg:#0A0D0A; --panel:#131713; --panel-2:#0e110e; --fg:#E8EBE8; --fg-2:#cfd5cf; --muted:#9AA09A;
  --line:#252a25; --accent:#D6FF4A; --accent-ink:#0A0D0A; --teal:#3BB7C2; --ok:#7ee2a8; --danger:#ff8a7a;
  --code-bg:#0e110e; --code-ink:#dfe5df; --code-dim:#7f877f; --code-key:#3BB7C2; --code-str:#D6FF4A; --code-num:#ffc66b;
  --f-head:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-em:Georgia,"Times New Roman",serif;
  --f-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace; --mono:var(--f-mono);
  --paper:var(--bg); --paper-2:var(--panel); --ink:var(--fg); --ink-2:var(--fg-2); --rule:var(--line);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:80px;
  --r:12px; --maxw:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 var(--f-body);overflow-x:hidden;position:relative}
body::before{content:"";position:fixed;inset:-20% -10% auto;height:70vh;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 50% at 70% 0%,rgba(214,255,74,.10),transparent 70%),radial-gradient(50% 40% at 10% 10%,rgba(59,183,194,.10),transparent 70%)}
img,svg{max-width:100%}
a{color:var(--fg);text-decoration-color:rgba(214,255,74,.5);text-underline-offset:3px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-head);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0 0 var(--s4);text-wrap:balance;color:var(--fg)}
h1{font-size:clamp(36px,5.4vw,60px)}
h2{font-size:clamp(24px,3.2vw,36px)}
h3{font-size:19px}
em{font-family:var(--f-em);font-style:italic;font-weight:400;color:var(--accent)}
p{margin:0 0 var(--s4);text-wrap:pretty}
code,kbd,pre{font-family:var(--f-mono);font-size:.92em}
:not(pre)>code{background:var(--panel);border:1px solid var(--line);color:var(--accent);padding:1px 6px;border-radius:6px;word-break:break-word}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{display:inline-block;font:600 11px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(214,255,74,.45);border-radius:99px;padding:4px 10px;margin-bottom:var(--s4)}
.muted{color:var(--muted)}
.draft{display:inline-block;font:600 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;border:1px dashed var(--accent);color:var(--accent);padding:5px 8px;border-radius:99px}

/* nav — works for both markups: .nav>.wrap>(.brand+nav>ul>li>a) and .nav>(.brand+nav>a) */
.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(10,13,10,.75);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--s5);min-height:64px;padding:0 28px;flex-wrap:wrap}
.nav .wrap{display:flex;align-items:center;gap:var(--s5);min-height:64px;flex-wrap:wrap;width:100%;padding:0}
.nav:has(.wrap){padding:0 28px}
.nav:has(.wrap)>.wrap{max-width:calc(var(--maxw) - 56px)}
.brand{font:600 17px/1 var(--f-body);text-decoration:none;letter-spacing:-.01em;color:var(--fg);display:inline-flex;align-items:center}
.brand::before{content:"";display:inline-block;width:20px;height:20px;border-radius:6px;background:var(--accent);margin-right:9px;box-shadow:0 0 18px rgba(214,255,74,.5)}
.brand:hover{color:var(--fg)}
.nav nav{margin-left:auto;display:flex;gap:var(--s5);flex-wrap:wrap;align-items:center}
.nav ul{list-style:none;display:flex;gap:var(--s5);margin:0;padding:0;flex-wrap:wrap}
.nav nav a{font:500 14px/1 var(--f-body);text-decoration:none;color:var(--muted);display:inline-block;padding:12px 0}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--fg)}
.nav nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;font:600 14px/1 var(--f-body);text-decoration:none;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--fg);cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.btn:hover{transform:translateY(-1px);border-color:var(--muted);color:var(--fg)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 28px rgba(214,255,74,.45)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-row{display:flex;gap:var(--s3);flex-wrap:wrap}

/* code blocks */
.code{background:var(--code-bg);color:var(--code-ink);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0}
.code-head{display:flex;justify-content:space-between;gap:var(--s3);padding:9px 14px;border-bottom:1px solid var(--line);font:500 12px/1.4 var(--f-mono);color:var(--code-dim)}
.code pre{margin:0;padding:14px;overflow-x:auto;font-size:13px;line-height:1.65;white-space:pre}
.code .k{color:var(--code-key)} .code .s{color:var(--code-str)} .code .n{color:var(--code-num)} .code .c{color:var(--code-dim)}

/* sections */
.section{padding:var(--s8) 0;border-bottom:1px solid var(--line)}
.section:last-of-type{border-bottom:0}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:start}
.hero{padding:var(--s8) 0;position:relative}
.hero .lede{font-size:18px;color:var(--muted);max-width:34em}
.hero .facts{display:flex;gap:var(--s5);flex-wrap:wrap;margin:var(--s5) 0;font:500 13px/1.4 var(--f-mono);color:var(--muted)}
.hero .facts b{color:var(--accent)}
.stack{display:grid;gap:var(--s3);min-width:0}

/* platform index */
.plat{columns:4 200px;column-gap:var(--s6);margin:0;padding:0;list-style:none}
.plat li{break-inside:avoid;display:flex;justify-content:space-between;gap:var(--s3);padding:8px 0;border-bottom:1px dashed var(--line);font:14px/1.4 var(--f-mono)}
.plat li span{color:var(--accent)}

/* pricing */
.price-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:stretch}
.price-card{border:1px solid var(--line);background:var(--panel);padding:var(--s6);border-radius:14px;min-width:0}
.price-card.feature{border-color:rgba(214,255,74,.6);box-shadow:0 0 40px rgba(214,255,74,.12)}
.price-card .amount{font:600 52px/1 var(--f-head);letter-spacing:-.02em;margin:var(--s3) 0}
.price-card .amount small{font:400 15px/1 var(--f-body);color:var(--muted)}
.price-card ul{margin:var(--s4) 0;padding:0;list-style:none}
.price-card li{padding:8px 0;border-bottom:1px dashed var(--line);color:var(--fg-2)}
.price-card li::before{content:"→ ";color:var(--accent)}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.table th{font:600 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.table td:last-child{color:var(--accent)}
.table-wrap{overflow-x:auto;max-width:100%}

/* notes / steps */
.note{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);padding:var(--s4) var(--s5);margin:var(--s5) 0;border-radius:0 var(--r) var(--r) 0}
.note p:last-child{margin-bottom:0}
.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:var(--s4)}
.steps>li{counter-increment:step;display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s4);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5)}
.steps>li::before{content:counter(step,decimal-leading-zero);font:600 14px/1.8 var(--f-mono);color:var(--accent)}
.steps h3{margin-bottom:6px}
.steps p{color:var(--muted);margin:0}

/* 404 */
.lost{min-height:60vh;display:flex;flex-direction:column;justify-content:center}
.lost .code-big{font:700 clamp(72px,14vw,160px)/1 var(--f-mono);color:var(--accent);margin-bottom:var(--s4);text-shadow:0 0 40px rgba(214,255,74,.35)}

/* footer (both markups) */
.foot,.footer{border-top:1px solid var(--line);padding:var(--s6) 28px;font:13px/1.6 var(--f-body);color:var(--muted);margin-top:var(--s7)}
.foot{padding:var(--s6) 0}
.foot .wrap{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.foot a,.footer a{color:var(--fg-2)}

/* docs/playground surface tweaks (docs.css owns layout) */
.side li.on{box-shadow:inset 2px 0 0 var(--accent)}
.ep .m-get{background:rgba(214,255,74,.12);color:var(--accent)}
.doc-main h1 em,.pg h1 em{color:var(--accent)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(214,255,74,.15)}

/* responsive */
@media (max-width:860px){
  .split,.price-grid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .section{padding:var(--s7) 0}
  .hero{padding:var(--s7) 0}
  .nav,.nav:has(.wrap){padding:0 18px}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .nav nav,.nav ul{gap:var(--s4);margin-left:0;width:100%}
  .nav nav a{padding:8px 0}
  .btn{width:100%}
  .price-card{padding:var(--s5)}
  .hero .lede{font-size:16px}
  .steps>li{grid-template-columns:32px minmax(0,1fr);padding:var(--s4)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* C9 nav */
.nav-toggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--line);color:var(--fg);border-radius:8px;width:42px;height:42px;font:600 20px/1 var(--f-body);cursor:pointer}
.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav nav a.nav-cta{color:#0a0d0a;background:var(--accent);padding:10px 14px;border-radius:8px;font-weight:600}
.nav nav a.nav-cta:hover,.nav nav a.nav-cta[aria-current]{color:#0a0d0a;box-shadow:0 0 0 3px rgba(214,255,74,.25)}
@media (max-width:820px){
  .nav-toggle{display:none!important}
  .nav nav{display:block!important;width:100%;margin-left:0;padding:0 0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav ul{flex-direction:row!important;flex-wrap:nowrap!important;gap:18px;width:max-content}
  .nav nav li{border-top:0!important;flex:0 0 auto}
  .nav nav a{display:inline-block!important;padding:8px 0!important;white-space:nowrap;box-shadow:none}
  .nav nav a.nav-cta{margin:0!important;padding:8px 12px!important}
  .nav.open nav{display:block}
  .nav.open nav ul{flex-direction:column;gap:0;width:100%}
  .nav.open nav li{border-top:1px solid var(--line)}
  .nav.open nav a{display:block;padding:14px 4px}
  .nav.open nav a.nav-cta{margin:10px 0;text-align:center}
  .nav.open nav a[aria-current]{box-shadow:inset 3px 0 0 var(--accent);padding-left:12px}
}