/* Shared styles for the static topic pages (public/<slug>/index.html), generated by
   scripts/seo-pages/build.mjs. Tokens, nav, buttons and footer mirror landing.html so the
   pages read as one site; the page-specific rules below them are for long-form content. */
:root {
  --bg: #00081c; --bg-2: #00112e; --panel: #08183a; --panel-2: #0b2150;
  --line: rgba(125,170,240,.14); --line-2: rgba(125,170,240,.30);
  --ink: #e9f1ff; --ink-soft: #93abd6; --ink-faint: #5d76a6;
  --blue: #3f7fd6; --blue-soft: #79a6e8; --cur: #6fd3ff; --cur-soft: #bfeaff; --cur-glow: rgba(111,211,255,.55);
  --grid: rgba(95,135,205,.055); --grid-maj: rgba(95,135,205,.11);
  --radius: 10px; --maxw: 1180px;
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--body); color: var(--ink); line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
p { margin: 0; }
img { max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 30px; }

/* ---- nav (as landing.html) ---- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(0,8,28,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 18px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a.link { font-size: 14px; color: var(--ink-soft); font-weight: 500; transition: color .15s; }
.nav-links a.link:hover { color: var(--ink); }
.nav-links .login-link { color: var(--ink); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { display: block; width: auto; max-width: none; }
.brand--nav img { height: 46px; }
.brand--foot img { height: 34px; }

/* ---- buttons (as landing.html) ---- */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 14.5px; font-weight: 500; padding: 12px 22px; border-radius: 7px; border: 1px solid transparent; cursor: pointer; transition: .18s ease; white-space: nowrap; position: relative; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: linear-gradient(180deg,#4f8fe6,var(--blue)); color: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(111,211,255,.35), 0 14px 34px -16px var(--cur-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--cur), 0 18px 40px -16px var(--cur-glow); }
.btn-ghost { background: rgba(125,170,240,.05); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--cur); background: rgba(111,211,255,.08); color: #fff; }

/* ---- page layout ---- */
.page { padding-top: 34px; padding-bottom: 90px; }
.crumbs { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); letter-spacing: .03em; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--cur); }
.crumbs span { margin: 0 8px; }
.page-hero { padding: 30px 0 34px; max-width: 880px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cur); }
.page-hero h1 { font-size: clamp(34px, 4.8vw, 54px); margin-top: 16px; color: #fff; }
.lede { color: var(--ink-soft); font-size: 18.5px; margin-top: 18px; max-width: 66ch; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.shot-fig { margin: 8px 0 46px; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.shot-fig img { display: block; width: 100%; height: auto; }
.shot-fig figcaption { padding: 12px 16px; font-size: 12.5px; color: var(--ink-faint); font-family: var(--mono); letter-spacing: .02em; border-top: 1px solid var(--line); }
.prose .shot-fig { margin: 30px 0 34px; }

.prose { max-width: 780px; }
.prose h2 { font-size: clamp(24px, 3vw, 32px); color: #fff; margin: 50px 0 14px; }
.prose h3 { font-size: 19px; color: #fff; margin: 28px 0 8px; }
.prose p { color: var(--ink-soft); font-size: 16.5px; margin: 0 0 15px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { color: var(--ink-soft); font-size: 16.5px; padding-left: 22px; margin: 0 0 18px; }
.prose li { margin: 8px 0; }
.prose li::marker { color: var(--cur); }
.prose a { color: var(--cur); border-bottom: 1px solid rgba(111,211,255,.35); transition: border-color .15s; }
.prose a:hover { border-bottom-color: var(--cur); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 20px 0 10px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; }
.prose .card h3 { font-size: 16.5px; color: #fff; margin: 0 0 6px; }
.prose .card p { font-size: 14.5px; margin: 0; }
.prose .card a { color: inherit; border: 0; }
.prose .card a:hover h3 { color: var(--cur); }

.prose .facts { list-style: none; padding: 0; }
.prose .facts li { display: flex; gap: 14px; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); }
.prose .facts li span:first-child { flex: 0 0 170px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); letter-spacing: .03em; padding-top: 3px; }

/* ---- FAQ ---- */
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin: 10px 0; padding: 0 18px; }
.faq summary { cursor: pointer; padding: 16px 28px 16px 0; font-family: var(--display); font-weight: 500; color: #fff; font-size: 16.5px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; color: var(--cur); font-size: 20px; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding: 0 0 16px; }

/* ---- related + CTA ---- */
.related { margin-top: 64px; }
.related h2 { font-size: 22px; color: #fff; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 16px; }
.related-grid a { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(125,170,240,.04); transition: border-color .15s, background .15s; }
.related-grid a:hover { border-color: var(--cur); background: rgba(111,211,255,.06); }
.related-grid strong { display: block; color: #fff; font-family: var(--display); font-weight: 500; }
.related-grid span { display: block; color: var(--ink-faint); font-size: 13.5px; margin-top: 4px; }
.cta-band { margin-top: 64px; padding: 46px 32px; text-align: center; border: 1px solid var(--line-2); border-radius: 14px; background: radial-gradient(ellipse at top, rgba(63,127,214,.20), transparent 70%), var(--panel); }
.cta-band h2 { font-size: clamp(26px, 3.6vw, 38px); color: #fff; }
.cta-band p { color: var(--ink-soft); font-size: 17px; margin: 14px auto 26px; max-width: 58ch; }
.cta-band .actions { justify-content: center; margin-top: 0; }

/* ---- footer (as landing.html) ---- */
footer { padding: 50px 0 40px; border-top: 1px solid var(--line); background: rgba(0,8,28,.6); }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.foot-inner .muted { color: var(--ink-faint); font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; }
.tagline { font-family: var(--mono); color: var(--cur); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.foot-social { display: flex; align-items: center; gap: 14px; }
.foot-social a { display: inline-flex; color: var(--ink-faint); transition: color .15s, transform .15s; }
.foot-social a:hover { color: var(--ink); transform: translateY(-1px); }
.foot-social svg { width: 21px; height: 21px; display: block; }
.foot-mail { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-faint); transition: color .2s; }
.foot-mail:hover { color: var(--cur); }
.foot-explore { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.foot-explore a { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--ink-soft); transition: color .15s; }
.foot-explore a:hover { color: var(--cur); }
.foot-legal { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.foot-legal p { margin: 3px 0; color: var(--ink-faint); font-family: var(--mono); font-size: 11px; letter-spacing: .03em; line-height: 1.65; }
.foot-legal strong { color: var(--ink-faint); font-weight: 600; }

@media (max-width: 900px) { .nav-links .link { display: none; } }
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .page { padding-top: 22px; }
  .lede { font-size: 17px; }
  .prose .facts li { flex-direction: column; gap: 2px; }
  .prose .facts li span:first-child { flex: none; }
  .cta-band { padding: 36px 20px; }
}
@media (prefers-reduced-motion: reduce) { .btn, .btn-primary:hover { transition: none; transform: none; } }