/* Guide pages. Same colours and type as the shop, none of its motion: these
   are pages people read and search engines rank, so they load fast and hold
   still. */
:root{
  --bg:#06080d; --panel:#0d1119; --panel-2:#111724; --line:rgba(255,255,255,.08);
  --ink:#e6eaf3; --ink-2:#b9c0d0; --mute:#8b93a7;
  --gold:#ffc24d; --amber:#f0b429; --gold-rgb:255,194,77;
  --neon:#22e6c8; --good:#5ddb9a;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.7 var(--body);
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(var(--gold-rgb),.10), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(92,120,255,.07), transparent 60%);
  background-attachment:fixed;
}
a{color:var(--gold); text-underline-offset:3px}
a:hover{color:#ffd98a}
img{max-width:100%; height:auto}

/* header */
.g-top{position:sticky; top:0; z-index:5; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  background:rgba(6,8,13,.78); border-bottom:1px solid var(--line)}
.g-top-in{max-width:1080px; margin:0 auto; padding:.8rem 1rem; display:flex; align-items:center; gap:1rem}
.g-brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink);
  font:700 1.08rem/1 var(--display); letter-spacing:-.01em}
.g-brand img{width:26px; height:26px; border-radius:50%}
.g-brand em{font-style:normal; color:var(--gold)}
.g-nav{margin-left:auto; display:flex; align-items:center; gap:1.1rem}
.g-nav a{color:var(--ink-2); text-decoration:none; font-size:.88rem}
.g-nav a:hover{color:var(--ink)}
.g-buy{display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .95rem; border-radius:10px;
  background:var(--gold); color:#1a1204 !important; font:700 .88rem/1 var(--display); text-decoration:none}
.g-buy:hover{background:#ffd06e}
@media (max-width:640px){ .g-nav a:not(.g-buy){display:none} }

/* article */
main{max-width:760px; margin:0 auto; padding:2.2rem 1rem 4rem}
.crumbs{font-size:.8rem; color:var(--mute); margin-bottom:1.4rem}
.crumbs a{color:var(--mute); text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 .4rem; opacity:.5}
.kicker{font:600 .72rem/1 var(--display); letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  margin:0 0 .9rem}
h1{font:700 clamp(2rem,6vw,3rem)/1.08 var(--display); letter-spacing:-.03em; margin:0 0 1rem}
h2{font:700 clamp(1.35rem,3.6vw,1.7rem)/1.2 var(--display); letter-spacing:-.02em; margin:2.8rem 0 .8rem;
  scroll-margin-top:80px}
h3{font:600 1.08rem/1.3 var(--display); margin:1.8rem 0 .5rem}
p{margin:0 0 1.05rem; color:var(--ink-2)}
p strong, li strong{color:var(--ink)}
.lede{font-size:1.14rem; line-height:1.65; color:var(--ink)}
.meta{font-size:.82rem; color:var(--mute); margin-bottom:2rem}
ul,ol{padding-left:1.25rem; color:var(--ink-2); margin:0 0 1.1rem}
li{margin:.35rem 0}
hr{border:0; border-top:1px solid var(--line); margin:2.6rem 0}

code, .cmd{font:500 .9em/1 var(--mono); background:rgba(255,255,255,.07); border:1px solid var(--line);
  color:#ffe2a3; padding:.18em .45em; border-radius:6px; white-space:normal; overflow-wrap:anywhere}

/* contents */
.toc{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1rem 1.2rem; margin:0 0 2rem}
.toc b{display:block; font:600 .72rem/1 var(--display); letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute); margin-bottom:.6rem}
.toc ol{margin:0; padding-left:1.1rem}
.toc a{color:var(--ink-2); text-decoration:none}
.toc a:hover{color:var(--gold)}

/* steps */
.steps{list-style:none; padding:0; margin:1.2rem 0 1.6rem; counter-reset:s}
.steps li{position:relative; padding:1rem 1.1rem 1rem 3.4rem; margin:.7rem 0; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; counter-increment:s; color:var(--ink-2)}
.steps li::before{content:counter(s); position:absolute; left:1rem; top:1rem; width:1.7rem; height:1.7rem;
  border-radius:50%; display:grid; place-items:center; background:rgba(var(--gold-rgb),.14);
  color:var(--gold); font:700 .85rem/1 var(--display)}
.steps li b{display:block; color:var(--ink); font-family:var(--display); margin-bottom:.2rem}

/* callouts */
.note{border-left:3px solid var(--gold); background:rgba(var(--gold-rgb),.06); padding:.9rem 1.1rem;
  border-radius:0 12px 12px 0; margin:1.4rem 0; color:var(--ink-2)}
.note.info{border-left-color:var(--neon); background:rgba(34,230,200,.05)}
.note b{color:var(--ink)}

/* tables */
.tbl{width:100%; overflow-x:auto; margin:1rem 0 1.4rem; border:1px solid var(--line); border-radius:14px}
table{width:100%; border-collapse:collapse; font-size:.92rem; min-width:420px}
th,td{padding:.72rem .9rem; text-align:left; border-bottom:1px solid var(--line)}
th{font:600 .72rem/1.2 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--mute);
  background:var(--panel)}
td{color:var(--ink-2); font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
td.num, th.num{text-align:right}
td b{color:var(--ink)}
.save{color:var(--good); font-weight:600}

/* FAQ */
details{background:var(--panel); border:1px solid var(--line); border-radius:12px; margin:.6rem 0; padding:0 1.1rem}
summary{cursor:pointer; padding:.95rem 0; font:600 1rem/1.35 var(--display); color:var(--ink); list-style:none;
  display:flex; justify-content:space-between; gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--gold); font-weight:400; font-size:1.3rem; line-height:1}
details[open] summary::after{content:"\2212"}
details p{padding-bottom:.4rem}

/* closing CTA */
.cta{margin:2.8rem 0 1rem; padding:1.6rem 1.4rem; border-radius:18px; text-align:center;
  background:linear-gradient(180deg, rgba(var(--gold-rgb),.10), rgba(var(--gold-rgb),.02));
  border:1px solid rgba(var(--gold-rgb),.25)}
.cta h2{margin:0 0 .5rem}
.cta p{margin:0 auto 1.1rem; max-width:44ch}
.cta .g-buy{padding:.8rem 1.3rem; font-size:.98rem}

/* related */
.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.8rem; margin:1rem 0 0}
.related a{display:block; padding:1rem 1.1rem; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; text-decoration:none; color:var(--ink)}
.related a:hover{border-color:rgba(var(--gold-rgb),.35)}
.related b{display:block; font:600 1rem/1.3 var(--display); margin-bottom:.25rem}
.related span{font-size:.84rem; color:var(--mute)}

/* footer */
.g-foot{border-top:1px solid var(--line); padding:2rem 1rem 2.4rem; text-align:center; color:var(--mute); font-size:.84rem}
.g-foot nav{display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.2rem; margin-bottom:.9rem}
.g-foot a{color:var(--ink-2); text-decoration:none}
.g-foot a:hover{color:var(--gold)}