@font-face { font-family: "Geist Variable"; font-weight: 100 900; font-display: swap; src: url("/fonts/geist-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Geist Mono Variable"; font-weight: 100 900; font-display: swap; src: url("/fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }

:root { --bg:#04060b; --ink:#edf1f7; --mute:#8e99ab; --accent:#6ab7ff; --line:rgba(255,255,255,.09); color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Geist Variable",system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column;
  background-image: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(106,183,255,.09), transparent 70%); background-repeat:no-repeat; }
a { color: var(--ink); text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
::selection { background: rgba(106,183,255,.3); }

.bar { border-bottom:1px solid var(--line); background:rgba(4,6,11,.75); backdrop-filter:blur(14px); position:sticky; top:0; z-index:5; }
.bar-in { max-width:76rem; margin:0 auto; padding:0 1.25rem; height:3.75rem; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; font-weight:600; font-size:1.05rem; }
.brand svg { width:1.35rem; height:1.5rem; color:var(--accent); }
.brand span span { color:var(--mute); font-weight:400; margin-left:.25rem; }
.bar a.back { color:var(--mute); text-decoration:none; font-size:.9rem; }
.bar a.back:hover { color:var(--ink); }

main { flex:1; width:100%; max-width:46rem; margin:0 auto; padding:4rem 1.25rem 5rem; }
.eyebrow { font-family:"Geist Mono Variable",ui-monospace,monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 1.1rem; }
h1 { font-size:clamp(2rem,6vw,3.2rem); line-height:1.05; letter-spacing:-.035em; font-weight:600; margin:0 0 .75rem; text-wrap:balance; }
h1 em { font-family:"Instrument Serif",Georgia,serif; font-style:italic; font-weight:400; color:var(--accent); letter-spacing:-.01em; }
h2 { font-size:1.3rem; letter-spacing:-.01em; margin:2.6rem 0 .7rem; font-weight:600; }
h3 { font-size:1.02rem; margin:1.5rem 0 .35rem; font-weight:600; }
p, li { color:var(--mute); font-size:1rem; }
li { margin:.35rem 0; }
strong { color:var(--ink); font-weight:600; }
ul { padding-left:1.2rem; }
.updated { font-family:"Geist Mono Variable",ui-monospace,monospace; font-size:.78rem; color:var(--mute); margin:0 0 2.2rem; }
.lede { font-size:1.1rem; max-width:34rem; }

.card { border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); border-radius:1.25rem; padding:1.75rem; margin:1.5rem 0; }
.code { font-family:"Geist Mono Variable",ui-monospace,monospace; font-size:clamp(1.5rem,6vw,2.1rem); letter-spacing:.1em; color:var(--accent); margin:.4rem 0 1rem; word-break:break-all; }
label { display:block; font-size:.9rem; font-weight:500; color:var(--ink); margin-bottom:.45rem; }
input[type=email] { width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); color:var(--ink); border-radius:.8rem; padding:.85rem 1rem; font:inherit; }
input[type=email]:focus { outline:none; border-color:rgba(106,183,255,.6); box-shadow:0 0 0 3px rgba(106,183,255,.2); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:0; cursor:pointer; background:var(--accent); color:#04101c; font:inherit; font-weight:500; border-radius:999px; padding:.85rem 1.6rem; text-decoration:none; transition:background .2s; }
.btn:hover { background:#8cc8ff; }
.btn:disabled { opacity:.6; cursor:wait; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.18); }
.btn.ghost:hover { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.04); }
.status { min-height:1.4em; color:var(--mute); font-size:.95rem; }
.row { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.5rem; }

.foot { border-top:1px solid var(--line); background:#03050a; }
.foot-in { max-width:76rem; margin:0 auto; padding:2rem 1.25rem; display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; font-size:.82rem; color:var(--mute); }
.foot-in nav { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.foot-in a { color:var(--mute); text-decoration:none; }
.foot-in a:hover { color:var(--ink); }

/* ---- Guides (SEO landing pages) ---- */
.bar-nav { display:flex; align-items:center; gap:1.4rem; font-size:.9rem; }
.bar-nav a { color:var(--mute); text-decoration:none; }
.bar-nav a:hover { color:var(--ink); }
.crumbs { font-size:.82rem; color:var(--mute); margin:0 0 1.6rem; }
.crumbs a { color:var(--mute); text-decoration:none; }
.crumbs a:hover { color:var(--ink); }
.crumbs span[aria-hidden] { margin:0 .4rem; opacity:.5; }
.article h2 { scroll-margin-top:5rem; }
.article p { margin:.9rem 0; }
.callout { border-left:2px solid var(--accent); background:rgba(106,183,255,.06); border-radius:0 1rem 1rem 0; padding:1rem 1.25rem; margin:1.6rem 0; }
.callout p { margin:0; color:var(--ink); font-size:.97rem; }
.toc { border:1px solid var(--line); border-radius:1rem; padding:1.1rem 1.4rem; margin:1.8rem 0 2rem; background:rgba(255,255,255,.02); }
.toc p { margin:0 0 .4rem; font-family:"Geist Mono Variable",ui-monospace,monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.toc ol { margin:0; padding-left:1.1rem; }
.toc a { text-decoration:none; color:var(--mute); }
.toc a:hover { color:var(--ink); }
.steps { counter-reset:step; list-style:none; padding:0; }
.steps li { counter-increment:step; position:relative; padding-left:2.6rem; margin:1rem 0; }
.steps li::before { content:counter(step); position:absolute; left:0; top:.1rem; width:1.8rem; height:1.8rem; border-radius:50%; border:1px solid rgba(106,183,255,.45); color:var(--accent); display:grid; place-items:center; font-size:.85rem; font-family:"Geist Mono Variable",ui-monospace,monospace; }
.tbl-wrap { overflow-x:auto; margin:1.4rem 0; border:1px solid var(--line); border-radius:1rem; }
table.cmp { border-collapse:collapse; width:100%; min-width:34rem; font-size:.95rem; }
table.cmp th, table.cmp td { text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line); color:var(--mute); vertical-align:top; }
table.cmp th { color:var(--ink); font-weight:600; }
table.cmp tr:last-child td { border-bottom:0; }
.faq-list details { border-top:1px solid var(--line); padding:.9rem 0; }
.faq-list details:last-child { border-bottom:1px solid var(--line); }
.faq-list summary { cursor:pointer; color:var(--ink); font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; color:var(--accent); font-size:1.2rem; line-height:1.2; }
.faq-list details[open] summary::after { content:"–"; }
.faq-list details p { margin:.7rem 0 0; }
.cta { text-align:center; border:1px solid rgba(106,183,255,.3); border-radius:1.5rem; padding:2.2rem 1.5rem; margin:3rem 0 1rem; background:radial-gradient(ellipse 80% 120% at 50% 0%,rgba(106,183,255,.12),transparent 70%),rgba(255,255,255,.02); }
.cta h2 { margin:0 0 .5rem; }
.cta p { max-width:30rem; margin:.4rem auto 1.2rem; }
.related { margin-top:2.6rem; }
.related ul { list-style:none; padding:0; display:grid; gap:.75rem; }
.related li { margin:0; }
.related a { display:block; border:1px solid var(--line); border-radius:1rem; padding:1rem 1.25rem; text-decoration:none; color:var(--ink); background:rgba(255,255,255,.02); }
.related a:hover { border-color:rgba(106,183,255,.45); }
.related a span { display:block; color:var(--mute); font-size:.9rem; margin-top:.2rem; }
.guide-grid { list-style:none; padding:0; display:grid; gap:1rem; margin:2rem 0; }
.guide-grid li { margin:0; }
.guide-grid a { display:block; border:1px solid var(--line); border-radius:1.25rem; padding:1.4rem 1.5rem; text-decoration:none; color:var(--ink); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); transition:border-color .2s; }
.guide-grid a:hover { border-color:rgba(106,183,255,.5); }
.guide-grid strong { display:block; font-size:1.12rem; margin-bottom:.3rem; }
.guide-grid span { color:var(--mute); font-size:.95rem; }
.meta { font-family:"Geist Mono Variable",ui-monospace,monospace; font-size:.76rem; color:var(--mute); margin:0 0 2rem; }