/* TFT Codex design tokens.
   Everything visual lives here so a rebrand is this file plus brand/*.svg.
   Direction: dark, data-dense, technical — numbers foregrounded, one accent. */
:root{
  --bg:#0b0e13;
  --bg-soft:#10151c;
  --panel:#141a22;
  --panel-2:#19212b;
  --line:#232c38;
  --line-soft:#1a222c;
  --ink:#e8eef5;
  --ink-2:#b9c6d4;
  --dim:#7d8b9c;
  --accent:#f0b429;
  --accent-soft:rgba(240,180,41,.12);
  --link:#68b6f7;
  --good:#4ade80;
  --radius:12px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}

/* ---- top bar ---- */
.top{position:sticky;top:0;z-index:20;background:rgba(11,14,19,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.top .wrap{display:flex;align-items:center;gap:26px;height:62px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:650;
  letter-spacing:-.2px;font-size:17px}
.brand:hover{text-decoration:none}
.brand svg{width:26px;height:26px;color:var(--accent);flex:none}
.brand .t{color:var(--dim);font-weight:600}
.top nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.top nav a{color:var(--ink-2);font-size:14.5px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:9px;
  font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:#191200}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--panel)}
.btn-ghost:hover{border-color:var(--dim)}

/* ---- hero ---- */
.hero{padding:76px 0 58px;border-bottom:1px solid var(--line-soft);
  background:radial-gradient(900px 380px at 50% -140px,rgba(240,180,41,.09),transparent 70%)}
.hero h1{font-size:clamp(34px,5.2vw,54px);line-height:1.08;letter-spacing:-1.4px;
  margin:0 0 18px;max-width:15ch}
.hero p.lede{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:62ch;margin:0 0 30px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .note{color:var(--dim);font-size:13.5px;margin-top:16px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);
  border:1px solid rgba(240,180,41,.25);color:var(--accent);
  padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:22px}

/* ---- stat strip ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--radius);overflow:hidden;margin:44px 0}
.stat{background:var(--panel);padding:20px 22px}
.stat b{display:block;font:600 26px/1.2 var(--mono);color:var(--accent);letter-spacing:-.5px}
.stat span{color:var(--dim);font-size:13.5px}

/* ---- sections ---- */
section{padding:62px 0;border-bottom:1px solid var(--line-soft)}
section h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.7px;margin:0 0 12px}
section .sub{color:var(--ink-2);max-width:62ch;margin:0 0 32px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px}
.card h3{margin:0 0 8px;font-size:17.5px;letter-spacing:-.2px}
.card p{margin:0;color:var(--ink-2);font-size:14.8px}
.card .k{display:inline-block;font:600 12px/1 var(--mono);color:var(--accent);
  background:var(--accent-soft);padding:6px 9px;border-radius:6px;margin-bottom:14px}

/* ---- comp table ---- */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;color:var(--dim);font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.6px;padding:0 14px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line-soft)}
.tbl tr:hover td{background:var(--panel-2)}
.tbl .num{font-family:var(--mono);text-align:right;white-space:nowrap}
.tbl .name{font-weight:600}
.muted{color:var(--dim)}
.tier{display:inline-block;min-width:24px;text-align:center;font:700 12px/20px var(--mono);
  border-radius:5px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2)}
.tier.S{background:rgba(240,180,41,.16);border-color:rgba(240,180,41,.4);color:var(--accent)}
.tier.A{background:rgba(104,182,247,.14);border-color:rgba(104,182,247,.35);color:var(--link)}
.tier.B{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.3);color:var(--good)}

/* ---- prose pages (terms / privacy) ---- */
.prose h1{font-size:34px;letter-spacing:-.8px;margin:0 0 6px}
.prose h2{font-size:19px;margin:30px 0 10px}
.prose p,.prose li{color:var(--ink-2)}
.prose .card p{margin:0}
.prose code{background:var(--bg-soft);border:1px solid var(--line-soft);
  padding:2px 6px;border-radius:5px;font:13px var(--mono);color:var(--ink)}
.tag{color:var(--dim);margin:0}

ul{padding-left:20px}
li{margin:7px 0}

footer{padding:40px 0 64px;color:var(--dim);font-size:13px}
footer .wrap{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
footer nav{display:flex;gap:18px;margin-left:auto}
footer p{max-width:64ch;margin:0}

@media(max-width:640px){
  .top nav{gap:14px}
  .top nav a.hide-sm{display:none}
  section{padding:46px 0}
}