/* Goldset — buyer documentation.
   Tokens lifted from the main site so these pages read as the same product. */
:root{
  --bg:#0a0b10; --surface:#10121a; --elev:#161925; --border:#1e2233;
  --ink:#e8eaf2; --muted:#7a8199; --faint:#4e5573;
  --cobalt:#2c3fce; --cobalt-lite:#6b7bf5; --gold:#b7801f; --gold-lite:#e0ad52;
  --good:#3ecb8f; --warn:#e0ad52;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shell:860px;
}
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:88px }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--cobalt-lite); text-decoration:none }
a:hover{ text-decoration:underline; text-underline-offset:3px }
:focus-visible{ outline:2px solid var(--cobalt-lite); outline-offset:2px; border-radius:3px }

/* ── nav ─────────────────────────────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:50; background:rgba(10,11,16,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.nav{
  max-width:1180px; margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:18px;
}
.brand{ display:flex; align-items:center; gap:9px; color:var(--ink);
  font-weight:700; letter-spacing:-.01em; font-size:17px }
.brand:hover{ text-decoration:none }
.glyph{ width:13px; height:13px; border-radius:3px; flex:none;
  background:linear-gradient(135deg,var(--gold),var(--cobalt)); box-shadow:0 0 14px rgba(183,128,31,.5) }
.navlinks{ display:flex; gap:16px }
.navlinks a{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em;
  color:var(--muted) }
.navlinks a:hover,.navlinks a.on{ color:var(--ink); text-decoration:none }
.navsp{ flex:1 }
.navstat{ font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.1em }
.navstat b{ color:var(--muted); font-weight:500 }
.ok{ color:var(--good) }
@media (max-width:820px){ .navlinks,.navstat{ display:none } }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:7px; font-size:14px; font-weight:600;
  border:1px solid var(--border); color:var(--ink); white-space:nowrap;
  transition:background .16s ease,border-color .16s ease,transform .16s ease }
.btn:hover{ text-decoration:none; transform:translateY(-1px) }
.btn.sm{ padding:8px 13px; font-size:13px }
.btn.solid{ background:var(--cobalt); border-color:var(--cobalt); color:#fff;
  box-shadow:0 0 24px rgba(44,63,206,.32) }
.btn.solid:hover{ background:var(--cobalt-lite); border-color:var(--cobalt-lite) }
.btn.ghost:hover{ background:var(--elev); border-color:var(--faint) }

/* ── document ────────────────────────────────────────────────────────── */
.doc{ max-width:var(--shell); margin:0 auto; padding:38px 22px 72px }
.crumb{ font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--faint); margin:0 0 26px }
.crumb a{ color:var(--muted) }
.crumb span{ margin:0 7px; color:var(--border) }

.doc h1{ font-size:clamp(1.85rem,1.3rem+2vw,2.6rem); line-height:1.15;
  letter-spacing:-.025em; margin:0 0 18px; font-weight:700 }
.doc h2{ font-size:clamp(1.2rem,1.05rem+.6vw,1.5rem); line-height:1.25;
  letter-spacing:-.015em; margin:44px 0 14px; font-weight:650;
  padding-top:22px; border-top:1px solid var(--border) }
.doc h3{ font-size:1.06rem; margin:30px 0 10px; font-weight:650; color:var(--ink) }
.doc h4{ font-size:.95rem; margin:22px 0 8px; font-weight:600; color:var(--muted) }
.doc p{ margin:0 0 15px; color:#c7cddd }
.lede{ font-size:1.08rem; color:var(--muted) }
.doc strong{ color:var(--ink); font-weight:600 }
.doc em{ color:var(--muted) }
.doc hr{ border:0; border-top:1px solid var(--border); margin:34px 0 }

.doc ul,.doc ol{ margin:0 0 16px; padding-left:22px; color:#c7cddd }
.doc li{ margin:0 0 7px }
.doc li::marker{ color:var(--faint) }

.doc code{ font-family:var(--mono); font-size:.86em; background:var(--elev);
  border:1px solid var(--border); border-radius:4px; padding:1px 5px; color:var(--gold-lite) }
.doc pre{ background:#0d0f16; border:1px solid var(--border); border-radius:9px;
  padding:16px 18px; overflow-x:auto; margin:0 0 18px }
.doc pre code{ background:none; border:0; padding:0; color:#b9c2d8;
  font-size:12.5px; line-height:1.65 }

/* tables scroll inside themselves; the page never scrolls sideways */
.tw{ overflow-x:auto; margin:0 0 18px; border:1px solid var(--border); border-radius:9px }
.doc table{ border-collapse:collapse; width:100%; min-width:440px; font-size:14px }
.doc th,.doc td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--border);
  vertical-align:top }
.doc th{ font-family:var(--mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); background:var(--surface); font-weight:500 }
.doc tbody tr:last-child td{ border-bottom:0 }
.doc td{ color:#c7cddd }

.callout{ margin:0 0 20px; padding:16px 18px; border-radius:9px;
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--cobalt) }
.callout.warn{ border-left-color:var(--gold);
  background:linear-gradient(180deg,rgba(183,128,31,.07),transparent) }
.callout > :last-child{ margin-bottom:0 }
.callout h3{ margin-top:0 }

.checklist{ list-style:none; padding-left:0 }
.checklist .task{ position:relative; padding-left:26px }
.checklist .task::before{ content:"☐"; position:absolute; left:0; color:var(--faint);
  font-family:var(--mono) }
.checklist .task.done::before{ content:"☑"; color:var(--good) }

.docfoot{ display:flex; gap:12px; flex-wrap:wrap; margin-top:48px;
  padding-top:24px; border-top:1px solid var(--border) }

/* ── index rows ──────────────────────────────────────────────────────── */
.drows{ margin:26px 0 8px; border-top:1px solid var(--border) }
.drow{ display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:16px;
  padding:17px 8px; border-bottom:1px solid var(--border); color:var(--ink);
  transition:background .16s ease,padding-left .16s ease }
.drow:hover{ background:var(--surface); padding-left:14px; text-decoration:none }
.dno{ font-family:var(--mono); font-size:12px; color:var(--faint) }
.dbody{ display:flex; flex-direction:column; gap:3px }
.dname{ font-weight:600 }
.ddesc{ font-size:13.5px; color:var(--muted); line-height:1.55 }
.darw{ color:var(--cobalt-lite); transition:transform .16s ease }
.drow:hover .darw{ transform:translateX(4px) }
@media (max-width:560px){
  .drow{ grid-template-columns:34px 1fr; gap:12px }
  .darw{ display:none }
}

/* ── footer ──────────────────────────────────────────────────────────── */
.ft{ border-top:1px solid var(--border); margin-top:20px }
.ft p{ max-width:var(--shell); margin:0 auto; padding:22px; font-size:12.5px;
  color:var(--faint); line-height:1.7 }
.mono{ font-family:var(--mono) }

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