/* OnlyHub — brand system.
   Self-contained: no webfonts, no CDN, no external assets. The whole site must
   render from disk behind a strict CSP, because it describes a platform whose
   hosting is itself constrained. */

:root {
  /* Ink — deep indigo rather than black. Reads as software, not adult media. */
  --ink-900:#0c0e16; --ink-800:#131725; --ink-700:#1c2133; --ink-600:#272d44;
  --line:#2b3350; --line-soft:#212840;

  /* Paper */
  --paper:#f7f8fc; --paper-dim:#e8eaf3; --mute:#8e97b4; 
   --mute-2:#6b7391;

  /* Signal — violet primary, teal for "verified/consented", amber for review */
  --brand-500:#7c5cff; --brand-400:#9a80ff; --brand-600:#6344e8; --brand-glow:rgba(124,92,255,.35);
  --ok-500:#2fd4a7; --warn-500:#ffb648; --stop-500:#ff5d73;

  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --pad:clamp(20px, 5vw, 88px);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink-900); color:var(--paper);
  font-family:var(--sans); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--brand-400); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1140px; margin:0 auto; padding-inline:var(--pad)}
.narrow{max-width:760px}

/* ---- nav ---- */
.nav{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(12,14,22,.82); border-bottom:1px solid var(--line-soft);
}
.nav .wrap{display:flex; align-items:center; gap:28px; height:68px}
.nav a{color:var(--mute); font-size:14.5px; font-weight:500}
.nav a:hover{color:var(--paper); text-decoration:none}
.nav .spacer{margin-left:auto}
.brand{display:flex; align-items:center; gap:11px; font-weight:670; color:var(--paper); letter-spacing:-.02em; font-size:17px}
.brand:hover{text-decoration:none}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:11px 20px;
  border-radius:999px; font-weight:600; font-size:14.5px; border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--brand-500),var(--brand-600)); color:#fff; box-shadow:0 6px 26px var(--brand-glow)}
.btn-ghost{border-color:var(--line); color:var(--paper)}
.btn-ghost:hover{border-color:var(--brand-500)}

/* ---- hero ---- */
.hero{position:relative; padding:clamp(56px,9vw,116px) 0 clamp(40px,7vw,80px); overflow:hidden}
.hero:before{
  content:""; position:absolute; inset:-30% -10% auto; height:620px;
  background:radial-gradient(60% 60% at 50% 0,rgba(124,92,255,.20),transparent 70%);
  pointer-events:none;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--brand-400);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px; margin-bottom:26px;
}
h1{font-size:clamp(34px,5.6vw,62px); line-height:1.06; letter-spacing:-.035em; margin:0 0 22px; font-weight:700}
h1 em{font-style:normal; background:linear-gradient(120deg,var(--brand-400),var(--ok-500)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:clamp(17px,2vw,20.5px); color:var(--mute); max-width:640px; margin:0 0 34px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}

/* ---- sections ---- */
section{padding:clamp(48px,7vw,92px) 0; border-top:1px solid var(--line-soft)}
h2{font-size:clamp(25px,3.4vw,38px); letter-spacing:-.028em; margin:0 0 14px; font-weight:670}
h3{font-size:18.5px; margin:0 0 8px; letter-spacing:-.015em; font-weight:640}
.sub{color:var(--mute); max-width:640px; margin:0 0 44px}
p{margin:0 0 16px}

.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{
  background:linear-gradient(180deg,var(--ink-800),var(--ink-700));
  border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:26px;
}
.card .ico{width:38px; height:38px; margin-bottom:16px; color:var(--brand-400)}
.card p{color:var(--mute); font-size:15px; margin:0}

.step{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line-soft)}
.step:last-child{border-bottom:0}
.step .n{
  flex:0 0 34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink-700); border:1px solid var(--line); font-size:13.5px;
  font-weight:680; color:var(--brand-400); font-family:var(--mono);
}
.step p{color:var(--mute); font-size:15px; margin:0}

.note{
  border-left:3px solid var(--brand-500); background:var(--ink-800);
  padding:18px 22px; border-radius:0 var(--r-md) var(--r-md) 0; margin:26px 0;
  color:var(--mute); font-size:15px;
}
.note strong{color:var(--paper)}
.note.warn{border-left-color:var(--warn-500)}
.note.stop{border-left-color:var(--stop-500)}

table{width:100%; border-collapse:collapse; font-size:14.5px; margin:20px 0}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top}
th{color:var(--mute); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em}
code{font-family:var(--mono); font-size:13px; background:var(--ink-700); padding:2px 7px; border-radius:5px; color:var(--brand-400)}

.pill{display:inline-block; padding:3px 11px; border-radius:999px; font-size:11.5px; font-weight:660; letter-spacing:.03em}
.pill-ok{background:rgba(47,212,167,.14); color:var(--ok-500)}
.pill-warn{background:rgba(255,182,72,.14); color:var(--warn-500)}
.pill-stop{background:rgba(255,93,115,.14); color:var(--stop-500)}

/* ---- policy pages ---- */
.doc{padding:clamp(40px,6vw,72px) 0}
.doc h1{font-size:clamp(30px,4.4vw,44px)}
.doc h2{font-size:23px; margin-top:44px}
.doc h3{margin-top:28px}
.doc ul{color:var(--mute); padding-left:22px}
.doc li{margin-bottom:9px}
.doc .meta{color:var(--mute); font-size:14px; font-family:var(--mono); margin-bottom:34px}
.toc{background:var(--ink-800); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:20px 24px; margin:28px 0}
.toc ul{list-style:none; padding:0; margin:0; columns:2; column-gap:32px}
.toc li{margin-bottom:7px}

/* ---- footer ---- */
footer{border-top:1px solid var(--line-soft); padding:52px 0 68px; color:var(--mute); font-size:14px}
.fgrid{display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-bottom:36px}
footer h4{color:var(--paper); font-size:13px; text-transform:uppercase; letter-spacing:.07em; margin:0 0 14px}
footer a{display:block; color:var(--mute); margin-bottom:9px; font-size:14px}
footer a:hover{color:var(--paper); text-decoration:none}
.legal{border-top:1px solid var(--line-soft); padding-top:26px; display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.legal .spacer{margin-left:auto}

@media (max-width:640px){ .toc ul{columns:1} .nav .hide-sm{display:none} }