/* 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; } }


/* ---- partners page (dark theme — uses the tokens above, not a light card set) --------- */
/* .prose is capped at 780px for readable paragraphs, which left these component blocks
   using only half the page. They break out to the full .wrap content width (1180 - 2x30). */
.prose .flow, .prose .partner, .prose .pform-wrap, .prose .pform-inline, .prose .cards {
  width: min(1120px, calc(100vw - 60px));
}
@media (max-width: 860px) {
  .prose .flow, .prose .partner, .prose .pform-wrap, .prose .pform-inline, .prose .cards {
    width: 100%;
  }
}

.prose .partner { border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel); padding: 26px 28px; margin: 22px 0 30px; }
.prose .partner-head { display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
/* their lockup is navy-on-transparent and would vanish on this background */
.prose .partner-logo { width: 230px; height: auto; display: block;
  filter: brightness(0) invert(1); opacity: .95; }
.prose .partner-badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: #8fe0c4; background: rgba(16,120,92,.18);
  border: 1px solid rgba(90,200,165,.32); border-radius: 999px; padding: 6px 12px;
  white-space: nowrap; }
.prose .partner-role { color: var(--ink); font-size: 16px; margin: 0 0 12px; }
.prose .partner-covers { margin: 14px 0 16px; }
.prose .partner-links { margin: 0; font-size: 15px; }
.prose .partner-links span { color: var(--ink-faint); margin: 0 6px; }

.prose ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 20px 0 26px; }
.prose ol.steps li { counter-increment: step; position: relative; padding: 0 0 0 48px;
  margin: 0 0 15px; }
.prose ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 0;
  width: 31px; height: 31px; border-radius: 50%; background: rgba(111,211,255,.12);
  border: 1px solid var(--line-2); color: var(--cur); font-family: var(--mono); font-size: 13px;
  display: grid; place-items: center; }
.prose .note { font-size: 15px; color: var(--ink-faint); border-left: 2px solid var(--line-2);
  padding: 2px 0 2px 16px; margin: 18px 0 8px; }
.prose .partner-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 10px; }
.prose .partner-form label { font-size: 14px; color: var(--ink-soft); width: 100%;
  margin-bottom: -4px; }

/* ---- form controls, dark ------------------------------------------------------------- */
.prose select, .prose input, .prose textarea { font: inherit; font-size: 15px;
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--panel-2); color: var(--ink); }
.prose select { min-width: 330px; max-width: 100%; }
.prose select option { background: #0b2150; color: var(--ink); }
.prose select:focus, .prose input:focus, .prose textarea:focus { outline: none;
  border-color: var(--cur); box-shadow: 0 0 0 3px rgba(111,211,255,.14); }
/* Chrome paints autofilled fields near-white, which broke two inputs out of the dark form.
   The colour cannot be overridden directly — an inset shadow is the only way to repaint it. */
.prose input:-webkit-autofill,
.prose input:-webkit-autofill:hover,
.prose input:-webkit-autofill:focus,
.prose textarea:-webkit-autofill,
.prose select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset;
  box-shadow: 0 0 0 1000px var(--panel-2) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}
.prose input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset, 0 0 0 3px rgba(111,211,255,.14);
  box-shadow: 0 0 0 1000px var(--panel-2) inset, 0 0 0 3px rgba(111,211,255,.14);
}

/* ---- interactive contribution diagram ------------------------------------------------ */
.flow { border: 1px solid var(--line-2); border-radius: 16px; background: rgba(125,170,240,.04);
  padding: 24px; margin: 10px 0 36px; }
.flow-title { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 16px; }
.flow-steps { display: none; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.flow--js .flow-steps { display: flex; }
.flow-steps button { font-family: var(--display); font-size: 14px; display: inline-flex;
  align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(125,170,240,.05); color: var(--ink-soft);
  cursor: pointer; transition: all .18s ease; }
.flow-steps button i { font-style: normal; font-family: var(--mono); font-size: 11px;
  width: 19px; height: 19px; border-radius: 50%; background: rgba(111,211,255,.14);
  color: var(--cur); display: grid; place-items: center; }
.flow-steps button:hover { border-color: var(--cur); color: var(--ink); }
.flow-steps button.is-on { background: rgba(111,211,255,.14); border-color: var(--cur);
  color: #fff; }
.flow-grid { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr; align-items: stretch; }
.flow-col { background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 22px 20px; transition: opacity .2s ease, border-color .2s ease, transform .2s ease; }
.flow-col--mid { background: var(--panel-2); }
/* our lockup is already light-on-dark, so it keeps its colours; only PowerlandMap's
   navy-on-transparent mark needs knocking out */
.flow-col img { width: 168px; height: auto; display: block; margin: 2px auto 14px; }
.flow-col img.invert { filter: brightness(0) invert(1); opacity: .95; }
.flow-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cur); text-align: center; margin: 10px 0 14px; }
/* var(--ink-soft) was too dim for a question line; this sits near 7:1 on the panel */
.prose .flow-q { font-size: 14.5px; color: #c3d4ef; text-align: center; margin: 0 0 16px; }
.prose .flow-col ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.prose .flow-col ul li { color: var(--ink); margin: 0 0 10px; }
.prose .flow-col ul.flow-plain { list-style: none; padding: 0; text-align: center; }
.flow-arrow { align-self: center; justify-self: center; width: 22px; height: 10px;
  position: relative; }
.flow-arrow::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px;
  height: 2px; background: var(--ink-faint); }
.flow-arrow::after { content: ""; position: absolute; right: 0; top: 0;
  border: 5px solid transparent; border-left-color: var(--ink-faint); }
.flow-decision { margin-top: 18px; border: 1px solid var(--line-2); border-radius: 13px;
  padding: 18px 22px; background: linear-gradient(180deg, rgba(63,127,214,.18), rgba(63,127,214,.06));
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; transition: box-shadow .2s ease, opacity .2s ease; }
.flow-decision .flow-kicker { text-align: left; margin: 0 0 6px; }
.prose .flow-decision p { color: #fff; margin: 0; font-size: 16px; }
.flow-decision span { color: var(--ink-soft); font-size: 14px; }
.flow--js[data-stage="1"] [data-col="2"], .flow--js[data-stage="1"] [data-col="3"],
.flow--js[data-stage="1"] [data-col="4"],
.flow--js[data-stage="2"] [data-col="1"], .flow--js[data-stage="2"] [data-col="3"],
.flow--js[data-stage="2"] [data-col="4"],
.flow--js[data-stage="3"] [data-col="1"], .flow--js[data-stage="3"] [data-col="2"],
.flow--js[data-stage="3"] [data-col="4"],
.flow--js[data-stage="4"] [data-col="1"], .flow--js[data-stage="4"] [data-col="2"],
.flow--js[data-stage="4"] [data-col="3"] { opacity: .3; }
.flow--js[data-stage="1"] [data-col="1"], .flow--js[data-stage="2"] [data-col="2"],
.flow--js[data-stage="3"] [data-col="3"] { border-color: var(--cur); transform: translateY(-3px); }
.flow--js[data-stage="4"] [data-col="4"] { box-shadow: 0 0 0 2px var(--cur); }
@media (max-width: 820px) {
  .flow-grid { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); margin: 12px auto; }
}

/* ---- become a partner form ------------------------------------------------------------ */
.pform { border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel);
  padding: 26px; margin-bottom: 10px; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.prose .pform label { display: block; font-size: 14px; color: var(--ink-soft); }
.pform label span { color: #ff9a8f; }
.pform input, .pform select, .pform textarea { width: 100%; margin-top: 6px; }
.pform select { min-width: 0; }
.pf-full { display: block; margin-bottom: 18px; }
.pf-hp { position: absolute !important; left: -9999px !important; width: 1px !important; }
.pf-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pf-captcha:not(:empty) { margin: 0 0 14px; }
.prose .pf-msg { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.prose .pf-msg.is-ok { color: #7fe3b8; font-weight: 600; }
.prose .pf-msg.is-err { color: #ff9a8f; }
@media (max-width: 640px) {
  .pf-grid { grid-template-columns: 1fr; }
  .prose select { min-width: 0; width: 100%; }
}
.pform-inline { margin: 22px 0 10px; }
.prose .pf-lead { color: var(--ink-soft); font-size: 15.5px; margin: 0 0 6px; }
.prose .pf-lead strong { color: #fff; }

/* ---- news / posts --------------------------------------------------------------------- */
.prose .post { border-top: 1px solid var(--line); padding-top: 30px; margin: 44px 0 10px; }
.prose .post:first-child { border-top: 0; padding-top: 0; margin-top: 10px; }
.prose .post-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 10px; }
.prose .post-meta span { margin: 0 7px; }
.prose .post h2 { margin-top: 0; }
.prose .post h3 { margin-top: 34px; }
.prose .post-standfirst { font-size: 18px; color: var(--ink); margin: 12px 0 22px; max-width: 62ch; }
/* the announcement sits in a panel so it reads as a notice rather than more article text */
.prose .post-lead { border: 1px solid var(--line-2); border-radius: var(--radius);
  background: rgba(125,170,240,.04); padding: 24px 26px; margin-top: 18px; }
.prose .post-lead p { margin: 0 0 13px; }
.prose .post-lead p:first-child { color: var(--ink); font-size: 18px; }
.prose .post-links { margin: 18px 0 0 !important; font-size: 15px; }
.prose .post-links span { color: var(--ink-faint); margin: 0 6px; }
.prose .post .shot-fig { width: min(1120px, calc(100vw - 60px)); }
@media (max-width: 860px) { .prose .post .shot-fig { width: 100%; } }
/* the announcement poster is 4:5 — full width would make it taller than the viewport */
.prose .poster-fig { margin: 20px 0 6px; max-width: 460px; }
.prose .poster-fig img { display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--line-2); }