/* Guide pages. Same tokens as src/app.css :root, so they read as the same site. Mobile first. */
:root{
  --bg:#08060d; --ink:#ece7f5; --mute:#9a90b0; --faint:#6b6280;
  --p:#b026ff; --c:#00ffd1; --r:#ff1a2e; --g:#ffe600;
  --fu:'Bebas Neue','Anton',sans-serif;
  --fh:'Anton',sans-serif;
  --fb:'Space Grotesk',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.6;
  background-image:
    radial-gradient(600px 420px at 0% 0%,rgba(176,38,255,.22),transparent 60%),
    radial-gradient(520px 420px at 100% 30%,rgba(0,255,209,.08),transparent 60%);
  background-repeat:no-repeat}
a{color:var(--c)}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.mark{font-family:var(--fh);font-size:24px;letter-spacing:.02em;color:#fff;text-decoration:none;
  text-shadow:3px 3px 0 var(--r)}
.go{font-family:var(--fu);letter-spacing:.12em;text-transform:uppercase;font-size:16px;color:#fff;
  background:var(--p);border-radius:10px;padding:8px 14px;text-decoration:none;box-shadow:4px 4px 0 var(--r);white-space:nowrap}
.go.big{font-size:20px;padding:14px 24px;display:inline-block}
main{max-width:720px;margin:0 auto;padding:24px 16px 48px}
.eyebrow{font-family:var(--fu);letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:var(--mute);margin:8px 0}
h1{font-family:var(--fh);font-weight:400;font-size:clamp(36px,9vw,64px);line-height:1.02;margin:0 0 16px;color:#fff}
h2{font-family:var(--fu);font-weight:400;letter-spacing:.06em;font-size:28px;line-height:1.1;margin:36px 0 10px;color:var(--g)}
h3{font-size:18px;margin:22px 0 4px;color:#fff}
.lede{font-size:19px;color:#e4dcef}
p,li{max-width:66ch}
ol,ul{padding-left:22px}
li{margin:6px 0}
.faq{margin-top:40px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.cta{margin:40px 0 8px}
nav{margin-top:48px;padding:20px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.03)}
nav h2{margin-top:0;font-size:22px;color:var(--mute)}
nav ul{list-style:none;padding:0;margin:0}
footer{max-width:720px;margin:0 auto;padding:24px 16px 40px;color:var(--faint);font-size:14px}
footer a{color:var(--mute)}
@media (min-width:768px){
  .top{padding:18px 28px}
  main{padding:48px 28px 64px}
}
.tablewrap{overflow-x:auto;margin:8px 0 4px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.45}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
thead th{font-family:var(--fu);font-weight:400;letter-spacing:.08em;font-size:17px;color:var(--mute)}
tbody th{font-weight:500;color:#fff;width:24%}
.sources{font-size:13px;color:var(--faint)}
.sources a{color:var(--mute)}
@media (max-width:599px){
  table,tbody,tr,th,td{display:block}
  thead{display:none}
  tr{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  th,td{border:0;padding:4px 0}
  tbody th{width:auto;font-family:var(--fu);font-weight:400;letter-spacing:.06em;font-size:18px;color:var(--g)}
  td::before{content:attr(data-label);display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
}