:root{--bg:#0a0a0a;--panel:#181818;--panel2:#1f1f1f;--text:#e9e9e9;--muted:#a7a7a7;--green:#1DB954;--green-br:#1ed760;--border:#2a2a2a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--green-br);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:840px;margin:0 auto;padding:0 22px}
header.site{border-bottom:1px solid var(--border);padding:14px 0;position:sticky;top:0;background:rgba(10,10,10,.92);backdrop-filter:blur(8px);z-index:10}
header.site .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;color:var(--text);font-family:Fraunces,Georgia,serif;font-weight:700;font-size:1.15rem}
.brand:hover{text-decoration:none}
header.site nav{margin-left:auto;display:flex;gap:18px;font-size:.92rem}
header.site nav a{color:var(--muted)}
header.site nav a:hover{color:var(--green-br)}
main.wrap{padding-top:26px;padding-bottom:40px}
.crumbs{font-size:.85rem;color:var(--muted);margin:6px 0 18px}
.crumbs a{color:var(--muted)}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:700;color:var(--green-br);margin:0 0 4px}
h1{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:2.3rem;line-height:1.12;margin:.1em 0 .25em}
h2{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:1.5rem;margin:1.9em 0 .5em}
h3{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.18rem;margin:0 0 .35em}
.lede{font-size:1.18rem;color:#d6d6d6;margin:.2em 0 .8em}
.intro{color:var(--muted)}
.sub{color:var(--muted);margin-top:-.2em}
.facts{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}
.fact{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 16px;flex:1 1 28%;min-width:150px}
.fact b{display:block;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;color:var(--green-br);margin-bottom:3px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}
.cta-row.end{margin-top:30px}
.cta{display:inline-block;background:var(--green);color:#04210d;font-weight:700;padding:13px 22px;border-radius:999px}
.cta:hover{background:var(--green-br);text-decoration:none}
.cta.ghost{background:transparent;color:var(--green-br);border:1px solid var(--green)}
.cta.ghost:hover{background:rgba(29,185,84,.12)}
.bullets{padding-left:20px;margin:.4em 0}
.bullets li{margin:5px 0}
.grade{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin:14px 0}
.headline{color:#d6d6d6;margin:.1em 0 .7em;font-weight:500}
.classes{display:flex;flex-direction:column;gap:2px}
.cls{padding:11px 0;border-top:1px solid var(--border)}
.cls:first-child{border-top:none;padding-top:2px}
.tag{display:inline-block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--green-br);background:rgba(29,185,84,.12);border-radius:5px;padding:2px 7px;margin-right:8px;vertical-align:2px}
.cname{font-weight:600}
.why{color:var(--muted);margin:4px 0 0;font-size:.95rem}
.learn{display:inline-block;margin-top:5px;font-size:.88rem;font-weight:600}
.gtip{margin:12px 0 0;font-size:.92rem;color:#cfcfcf;border-top:1px dashed var(--border);padding-top:10px}
.gtip b{color:var(--green-br);text-transform:uppercase;font-size:.68rem;letter-spacing:.05em;margin-right:6px}
.callout{background:linear-gradient(180deg,rgba(29,185,84,.1),rgba(29,185,84,.04));border:1px solid rgba(29,185,84,.35);border-radius:14px;padding:16px 20px;margin:22px 0}
.callout b{color:var(--green-br);text-transform:uppercase;font-size:.7rem;letter-spacing:.05em}
.callout p{margin:.35em 0 0}
.related{display:flex;flex-wrap:wrap;gap:10px}
.related a,.related span{background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:8px 15px;font-size:.92rem}
.related span{color:var(--muted)}
.hubcat{margin:26px 0}
.hublist{list-style:none;padding:0;margin:.4em 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 18px}
.hublist li{padding:4px 0;border-bottom:1px solid var(--border)}
footer.site{border-top:1px solid var(--border);margin-top:30px;padding:22px 0;color:var(--muted);font-size:.9rem}
footer.site p{margin:6px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
footer.site .muted a{color:var(--muted)}
.faq{display:flex;flex-direction:column;gap:10px;margin:.4em 0}
.faq-item{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 18px}
.faq-item h3{margin:0 0 .35em;font-size:1.05rem}
.faq-item p{margin:0;color:#cfcfcf}
@media(max-width:540px){h1{font-size:1.85rem}.fact{flex-basis:100%}}
@media (max-width:480px){.wrap{padding:0 16px}header.site .wrap{gap:10px}header.site nav{gap:10px;font-size:.78rem}header.site nav a{padding:6px 0}.brand{font-size:1rem;gap:7px}h1{font-size:1.6rem;line-height:1.15}.fact{flex:1 1 100%;min-width:0;padding:10px 14px}.hublist{grid-template-columns:1fr;gap:2px 12px}.cta{padding:14px 22px;min-height:44px}.related a,.related span{padding:10px 16px}}
@media (max-width:360px){.wrap{padding:0 12px}h1{font-size:1.45rem}header.site nav a:nth-child(3){display:none}}