/* neurones3d.com - the shared stylesheet.
   Loaded by every page before its own page-scoped <style>. Shared chrome (header, footer,
   dialogs, cookie settings) uses n- prefixed classes so it cannot collide with the class names
   the older pages already use (.top, .wrap, .btn, .card, .sub, ...). Content components used by
   the support centre, the guides and the topic pages sit under .pg. Nothing here styles a bare
   element beyond the base every page already shared. */

:root {
  --void: #090b0f;
  --panel: #14171d;
  --elevated: #1a1e26;
  --hair: #262b35;
  --ice: #e2e6ec;
  --text: #c3c9d4;
  --dim: #99a1af;
  --beam: #4a9eff;
  --beam-dim: #2d5c96;
  --ok: #5bd68a;
  --warn: #f5b454;
  --bad: #f87171;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --sans: -apple-system, "Segoe UI Variable Display", "Segoe UI", Inter, "Avenir Next", Avenir, system-ui, sans-serif;
  --display: "Space Grotesk", var(--sans);
  --top-h: 56px;
  accent-color: var(--beam);
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-var-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--top-h) + 20px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { background: var(--void); }
body { margin: 0; color: var(--ice); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { background: color-mix(in srgb, var(--beam) 35%, transparent); color: var(--ice); }
@supports (scrollbar-width: thin) { html { scrollbar-width: thin; scrollbar-color: #2a3038 var(--void); } }
a { color: var(--beam); text-decoration: none; }
/* A link inside running text is marked by more than its colour (WCAG 1.4.1, Lighthouse
   link-in-text-block). Buttons, cards and navigation carry a class and keep their own look. */
p a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--beam); outline-offset: 3px; border-radius: 6px;
}
img { max-width: 100%; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- skip link */
.n-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--beam); color: #06090e; font-weight: 700; font-size: 14px;
  padding: 9px 14px; border-radius: 8px; transition: top .15s ease;
}
.n-skip:focus { top: 10px; }

/* ---------------------------------------------------------------- header */
.n-wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.n-top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--hair) 60%, transparent);
}
.n-top.is-fixed { position: fixed; left: 0; right: 0; background: color-mix(in srgb, var(--void) 78%, transparent); }
.n-top-in { display: flex; align-items: center; gap: 10px; height: var(--top-h); position: relative; }
.n-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ice); font-weight: 650; font-size: 15px; letter-spacing: .01em; text-decoration: none; }
.n-brand:hover { text-decoration: none; color: var(--ice); }
.n-brand img { width: 26px; height: 26px; display: block; }
/* The wordmark: the display face, tracked tight, and "3D" in the accent. */
.n-brand-name { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -.012em; }
.n-brand-name b { font-weight: 600; color: var(--beam); }
.n-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.n-nav a { color: var(--dim); font-size: 13.5px; font-weight: 500; padding: 7px 12px; border-radius: 7px; text-decoration: none; }
.n-nav a:hover { color: var(--ice); background: var(--elevated); text-decoration: none; }
.n-nav a[aria-current="page"] { color: var(--ice); background: color-mix(in srgb, var(--beam) 12%, transparent); }
.n-dl { background: var(--beam); color: #06090e; font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 8px; margin-left: 6px; text-decoration: none; white-space: nowrap; }
.n-dl:hover { filter: brightness(1.08); text-decoration: none; color: #06090e; }
.n-menu {
  display: none; align-items: center; gap: 7px; background: none; color: var(--ice);
  border: 1px solid var(--hair); border-radius: 8px; padding: 7px 11px; font: 500 13px var(--sans); cursor: pointer;
}
.n-menu:hover { border-color: var(--beam-dim); }
@media (max-width: 760px) {
  .n-wrap { padding: 0 18px; }
  .n-menu { display: inline-flex; }
  .n-dl { margin-left: auto; }
  .js .n-nav {
    display: none; position: absolute; top: var(--top-h); left: -18px; right: -18px; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--panel); border-bottom: 1px solid var(--hair); padding: 10px 18px 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
  }
  .js .n-top.is-open .n-nav { display: flex; }
  .n-nav a { font-size: 15px; padding: 11px 12px; }
  .no-js .n-top-in { flex-wrap: wrap; height: auto; padding: 10px 0; }
  .no-js .n-nav { order: 3; width: 100%; margin: 0; flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- footer */
.n-foot { position: relative; z-index: 1; border-top: 1px solid var(--hair); padding: 44px 0 36px; color: var(--dim); font-size: 13px; background: var(--void); }
.n-foot-grid { display: grid; grid-template-columns: minmax(200px, 1.5fr) repeat(5, minmax(0, 1fr)); gap: 30px 26px; }
@media (max-width: 1060px) { .n-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .n-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .n-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.n-foot-brand p { margin: 12px 0 0; max-width: 32ch; line-height: 1.55; }
.n-foot-ver { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: #7d8594; }
.n-foot-h { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); margin: 4px 0 12px; }
.n-foot-col ul { list-style: none; margin: 0; padding: 0; }
.n-foot-col li { margin: 0 0 8px; }
.n-foot-col a, .n-linkbtn { color: var(--dim); text-decoration: none; }
.n-foot-col a:hover, .n-linkbtn:hover { color: var(--ice); text-decoration: underline; }
.n-linkbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; text-align: left; }
.n-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--hair); margin-top: 34px; padding-top: 20px; font-size: 12.5px; }

/* ---------------------------------------------------------------- buttons */
.n-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--beam); color: #06090e; border: 0; border-radius: 10px;
  font: 700 14.5px var(--sans); padding: 11px 20px; cursor: pointer; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 8px 28px rgba(74,158,255,.18);
}
.n-btn:hover { filter: brightness(1.06); text-decoration: none; color: #06090e; }
.n-btn:disabled { opacity: .6; cursor: default; }
.n-btn-ghost { background: transparent; color: var(--ice); box-shadow: 0 0 0 1px var(--hair) inset; }
.n-btn-ghost:hover { color: var(--ice); box-shadow: 0 0 0 1px var(--beam-dim) inset; }
.n-btn-block { width: 100%; }

/* ---------------------------------------------------------------- dialogs */
.n-dlg {
  background: var(--elevated); color: var(--ice); border: 1px solid var(--hair); border-radius: 18px;
  padding: 0; box-shadow: 0 30px 90px rgba(0,0,0,.6); max-height: min(88vh, 860px);
}
.n-dlg::backdrop { background: rgba(3,5,8,.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.n-x {
  position: absolute; top: 14px; right: 14px; background: none; border: 1px solid var(--hair);
  border-radius: 8px; color: var(--dim); width: 30px; height: 30px; cursor: pointer; font-size: 13px; line-height: 1;
}
.n-x:hover { color: var(--ice); border-color: var(--beam-dim); }
.n-kick { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--beam); margin: 0; }

.n-about { width: min(600px, calc(100vw - 36px)); }
.n-about-body { position: relative; padding: 40px 40px 34px; overflow-y: auto; max-height: min(88vh, 860px); }
.n-about-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.n-about-mark { width: 58px; height: 58px; filter: drop-shadow(0 8px 22px rgba(74,158,255,.38)); }
.n-about-t { font-family: var(--display); font-size: clamp(22px, 5vw, 26px); font-weight: 620; letter-spacing: -0.02em; margin: 0; }
.n-about-fig { margin: 28px 0 30px; border-radius: 14px; overflow: hidden; border: 1px solid var(--hair); }
.n-about-fig img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: cover; }
.n-about p { color: var(--dim); font-size: 14.5px; line-height: 1.82; margin: 0 0 18px; }
.n-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 26px 0; }
.n-chips span { font: 600 11.5px var(--mono); letter-spacing: .04em; color: var(--beam); background: rgba(74,158,255,.08); border: 1px solid rgba(74,158,255,.3); border-radius: 99px; padding: 6px 14px; }
.n-sign { border-top: 1px solid var(--hair); padding-top: 22px; margin-top: 6px; text-align: center; }
.n-sign-name { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ice); }
.n-sign-role { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-top: 5px; }

.n-dlm { width: min(440px, calc(100vw - 36px)); }
.n-dlm-body { position: relative; padding: 30px 30px 26px; }
.n-dlm-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding-right: 36px; }
.n-dlm-title { font-family: var(--display); font-size: 21px; font-weight: 620; letter-spacing: -0.02em; margin: 0; }
.n-dlm-sub { color: var(--dim); font-size: 13.5px; line-height: 1.55; margin: 6px 0 20px; }
.n-field { margin: 0 0 14px; }
.n-field label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 6px; }
.n-field input {
  width: 100%; background: var(--void); border: 1px solid var(--hair); border-radius: 10px;
  color: var(--ice); font: 500 15px var(--sans); padding: 12px 14px;
}
.n-field input:focus { outline: none; border-color: var(--beam); box-shadow: 0 0 0 3px color-mix(in srgb, var(--beam) 22%, transparent); }
.n-consent-line { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--dim); line-height: 1.5; margin: 2px 0 18px; }
.n-consent-line input { margin-top: 2px; width: 15px; height: 15px; flex: none; }
.n-hp { position: absolute; left: -5000px; width: 1px; height: 1px; opacity: 0; }
.n-dlm-err { display: none; color: var(--bad); font-size: 12.5px; margin: 10px 0 0; text-align: center; }
.n-dlm-note { font-size: 11.5px; color: var(--dim); text-align: center; margin: 14px 0 0; }
.n-dlm-done { display: none; text-align: center; padding: 8px 0 2px; }
.n-dlm-done h3 { font-family: var(--display); font-size: 19px; font-weight: 620; margin: 0 0 8px; }
.n-dlm-done p { color: var(--dim); font-size: 13.5px; line-height: 1.6; margin: 0; }
.n-okmark { width: 52px; height: 52px; border-radius: 50%; background: rgba(91,214,138,.15); color: var(--ok); display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 14px; }
.n-dlm.sent .n-dlm-form, .n-dlm.sent .n-dlm-sub { display: none; }
.n-dlm.sent .n-dlm-done { display: block; }
@media (max-width: 480px) {
  .n-dlm-body { padding: 26px 20px 22px; }
  .n-about-body { padding: 30px 22px 26px; }
}

/* ---------------------------------------------------------------- cookie settings */
.n-cc {
  position: fixed; left: 18px; bottom: 18px; z-index: 60; width: min(400px, calc(100vw - 36px));
  background: var(--elevated); border: 1px solid var(--hair); border-radius: 16px;
  padding: 18px 18px 16px; box-shadow: 0 22px 60px rgba(0,0,0,.55); font-size: 13.5px; color: var(--dim);
}
.n-cc-t { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ice); margin: 0 0 6px; letter-spacing: -0.01em; }
.n-cc p { margin: 0 0 14px; line-height: 1.55; }
.n-cc-btns, .n-ccm-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.n-cc-btns .n-btn, .n-ccm-btns .n-btn { flex: 1 1 auto; font-size: 13px; padding: 9px 12px; }
.n-ccm { width: min(640px, calc(100vw - 28px)); }
.n-ccm-body { position: relative; padding: 28px 28px 24px; overflow-y: auto; max-height: min(88vh, 860px); margin: 0; }
.n-ccm-t { font-family: var(--display); font-size: 21px; font-weight: 620; letter-spacing: -0.02em; margin: 0 40px 8px 0; }
.n-ccm-lede, .n-ccm-gpc { color: var(--dim); font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; }
.n-ccm-gpc { color: var(--ice); border-left: 2px solid var(--beam); padding-left: 12px; }
.n-cat { border: 1px solid var(--hair); border-radius: 12px; padding: 12px 16px 10px; margin: 0 0 12px; background: var(--panel); }
.n-cat-h { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 0; font-weight: 650; font-size: 14.5px; color: var(--ice); float: left; }
.n-cat-h + * { clear: both; }
.n-cat p { color: var(--dim); font-size: 13px; margin: 6px 0 8px; clear: both; padding-top: 4px; }
.n-cat-always { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.n-cat-t { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0 4px; }
.n-cat-t th { text-align: left; font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--hair); }
.n-cat-t td { vertical-align: top; color: var(--text); padding: 7px 8px 7px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.n-cat-t code { font-family: var(--mono); font-size: 11.5px; color: var(--ice); }
@media (max-width: 560px) {
  .n-cat-t thead { display: none; }
  .n-cat-t tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--hair); }
  .n-cat-t td { display: block; border: 0; padding: 1px 0; }
  .n-ccm-body { padding: 24px 18px 20px; }
}
.n-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.n-switch input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.n-switch-ui { width: 44px; height: 24px; border-radius: 99px; background: #313744; border: 1px solid var(--hair); position: relative; transition: background .15s ease; }
.n-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ice); transition: transform .15s ease; }
.n-switch input:checked + .n-switch-ui { background: var(--beam); }
.n-switch input:checked + .n-switch-ui::after { transform: translateX(20px); background: #06090e; }
.n-switch input:focus-visible + .n-switch-ui { outline: 2px solid var(--beam); outline-offset: 3px; }

/* legal placeholders the owner has not filled yet (shared by the support pages) */
.ph { font-family: var(--mono); font-size: .9em; color: var(--beam); background: color-mix(in srgb, var(--beam) 12%, transparent); padding: 1px 6px; border-radius: 5px; }

/* ================================================================ content pages (.pg) */
.pg { max-width: 1200px; margin: 0 auto; padding: 0 28px 72px; }
.pg-narrow { max-width: 860px; }
@media (max-width: 600px) { .pg { padding: 0 18px 56px; } }
.crumbs { font-size: 12.5px; color: var(--dim); padding: 22px 0 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li + li::before { content: "/"; color: #4b5260; margin: 0 8px; }
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--ice); }
.crumbs [aria-current] { color: var(--ice); }

.pg-hero { padding: 34px 0 26px; }
.pg-hero .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--beam); margin: 0; }
.pg-hero h1 { font-family: var(--display); font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -0.03em; font-weight: 620; line-height: 1.06; margin: 12px 0 14px; max-width: 22ch; text-wrap: balance; }
.pg-hero .lede { color: var(--dim); font-size: clamp(15.5px, 1.7vw, 17.5px); max-width: 64ch; margin: 0; }
.pg-hero .lede b, .pg-hero .lede strong { color: var(--ice); font-weight: 600; }
.pg h2.h2 { font-family: var(--display); font-size: clamp(22px, 2.6vw, 29px); letter-spacing: -0.02em; font-weight: 600; margin: 0 0 8px; }
.pg .sec { padding: 42px 0 8px; border-top: 1px solid var(--hair); margin-top: 30px; }
.pg .sec-lede { color: var(--dim); margin: 0 0 22px; max-width: 70ch; }

/* search */
.srch { position: relative; max-width: 680px; margin: 24px 0 0; }
.srch-row { display: flex; gap: 8px; }
.srch input[type="search"] {
  flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--hair); border-radius: 12px;
  color: var(--ice); font: 500 16px var(--sans); padding: 14px 16px 14px 44px;
}
.srch input[type="search"]:focus { outline: none; border-color: var(--beam); box-shadow: 0 0 0 3px color-mix(in srgb, var(--beam) 22%, transparent); }
.srch-ico { position: absolute; left: 15px; top: 16px; color: var(--dim); pointer-events: none; }
.srch-res { margin: 12px 0 0; padding: 0; list-style: none; border: 1px solid var(--hair); border-radius: 12px; background: var(--panel); overflow: hidden; }
.srch-res[hidden] { display: none; }
.srch-res li + li { border-top: 1px solid var(--hair); }
.srch-res a { display: block; padding: 12px 16px; color: var(--ice); text-decoration: none; }
.srch-res a:hover, .srch-res a:focus-visible { background: var(--elevated); outline-offset: -2px; }
.srch-res .s { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--beam); }
.srch-res .t { display: block; font-weight: 600; font-size: 15px; margin: 2px 0; }
.srch-res .d { display: block; color: var(--dim); font-size: 13px; line-height: 1.5; }
.srch-res mark { background: color-mix(in srgb, var(--beam) 30%, transparent); color: inherit; border-radius: 3px; }
.srch-empty { padding: 14px 16px; color: var(--dim); font-size: 14px; }
.srch-hint { color: var(--dim); font-size: 12.5px; margin: 10px 0 0; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .cards.three { grid-template-columns: 1fr; } }
.card-l {
  position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--panel);
  border: 1px solid var(--hair); border-radius: 14px; padding: 20px 22px 18px; color: var(--ice); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.card-l:hover { border-color: var(--beam-dim); text-decoration: none; color: var(--ice); }
@media (prefers-reduced-motion: no-preference) { .card-l:hover { transform: translateY(-1px); } }
.card-l .k { font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--beam); }
.card-l .t { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.card-l .d { color: var(--dim); font-size: 13.8px; line-height: 1.55; }
.card-l .go { margin-top: auto; padding-top: 8px; color: var(--beam); font-size: 13px; font-weight: 600; }
.card-l .num { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--ice); }
.card-l .num b { color: var(--beam); }
.card-l.big { padding: 26px 26px 22px; }
.card-l.big .t { font-size: 23px; }

/* contact band */
.band { background: linear-gradient(180deg, #111419, var(--panel)); border: 1px solid var(--hair); border-radius: 18px; padding: 30px 30px 26px; margin-top: 16px; }
.band .cards { margin-top: 18px; }
.contact { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--hair); border-radius: 14px; background: var(--void); }
.contact h3 { font-size: 16px; margin: 0; font-weight: 650; }
.contact p { color: var(--dim); font-size: 13.8px; margin: 0; line-height: 1.55; }
.contact .n-btn { align-self: flex-start; margin-top: 8px; font-size: 13.5px; padding: 9px 16px; }
.contact .addr { font-family: var(--mono); font-size: 13px; color: var(--ice); margin-top: 6px; }

/* facts block: short declarative sentences, the number first */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; }
.facts li { background: var(--panel); padding: 16px 18px; color: var(--text); font-size: 14.2px; line-height: 1.55; }
.facts a { text-decoration: underline; text-underline-offset: 3px; }
/* a link inside running text is marked by more than its colour (WCAG 1.4.1) */
main :is(p, li, td, dd) > a:not([class]) { text-decoration: underline; text-underline-offset: 3px; }
h2.rel-head { font: inherit; letter-spacing: inherit; color: inherit; margin: 0 0 8px; }
picture { display: contents; }
.facts li b, .facts li strong { color: var(--ice); font-family: var(--display); font-weight: 600; font-size: 1.08em; }

/* prose */
.prose { color: var(--text); font-size: 16px; line-height: 1.7; max-width: 76ch; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-family: var(--display); color: var(--ice); font-size: clamp(21px, 2.4vw, 26px); letter-spacing: -0.015em; font-weight: 600; margin: 40px 0 10px; line-height: 1.25; }
.prose h3 { font-family: var(--display); color: var(--ice); font-size: 17.5px; font-weight: 600; margin: 28px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 0 0 7px; }
.prose strong, .prose b { color: var(--ice); font-weight: 650; }
.prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--beam) 45%, transparent); text-underline-offset: 3px; }
.prose code, .pg code { font-family: var(--mono); font-size: .88em; color: var(--ice); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); border-radius: 5px; padding: 1px 5px; }
.prose pre, .pg pre { background: #0d1015; border: 1px solid var(--hair); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.55; }
.prose pre code, .pg pre code { background: none; border: 0; padding: 0; font-size: 1em; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 0 0 18px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prose th { color: var(--ice); font-weight: 650; }
/* comparison tables: the word carries the meaning, the colour only helps */
.prose-full { max-width: none; }
.cmp { font-size: 14px; }
.cmp thead th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.cmp tbody th { white-space: nowrap; }
.cmp td { min-width: 120px; }
.cmp-matrix td, .cmp-matrix tbody th { white-space: nowrap; min-width: 0; }
.cmp-matrix thead th { white-space: normal; min-width: 84px; vertical-align: bottom; }
.cmp-matrix td.pr { white-space: normal; min-width: 200px; max-width: 280px; font-size: 13px; color: var(--dim); }
.cmp tr.me th, .cmp tr.me td { background: color-mix(in srgb, var(--beam) 8%, transparent); }
.cm { font-weight: 650; }
.cm-y { color: var(--ok, #5bd68a); }
.cm-p { color: #e3b341; }
.cm-c { color: var(--beam); }
.cm-n { color: var(--dim); }
.cm-u { color: var(--dim); font-weight: 400; font-style: italic; }
.cn { display: block; font-size: 12.5px; color: var(--dim); line-height: 1.45; margin-top: 2px; }
.src { font-size: 11.5px; font-family: var(--mono); color: var(--dim); }
.srcs { font-size: 13px; word-break: break-all; }
.prose blockquote { margin: 0 0 16px; padding: 4px 0 4px 16px; border-left: 2px solid var(--beam-dim); color: var(--dim); }
.kbd, kbd { font-family: var(--mono); font-size: .82em; color: var(--ice); background: #1f242d; border: 1px solid #353c49; border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }

/* figures */
.shot { margin: 22px 0; }
/* Never wider than the file: an upscaled screenshot is a blurred one. */
.shot img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--hair); background: var(--panel); }
/* A tall panel: at most its own width, cut at a screen's height with a fade, opened on demand. */
.shot.tall { max-width: min(100%, var(--nat, 420px)); }
.shot.tall .tall-frame { position: relative; max-height: min(64vh, 600px); overflow: hidden; border-radius: 12px; }
.shot.tall .tall-frame img { width: 100%; }
.shot.tall .tall-frame::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 38%;
  border-radius: 0 0 11px 11px; pointer-events: none; background: linear-gradient(180deg, rgba(9,11,15,0), rgba(9,11,15,.92)); }
.tall-t:checked ~ .tall-frame { max-height: none; }
.tall-t:checked ~ .tall-frame::after { display: none; }
.tall-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--ice); background: var(--elevated); box-shadow: 0 0 0 1px var(--hair) inset; cursor: pointer; user-select: none; }
.tall-more:hover { box-shadow: 0 0 0 1px var(--beam-dim) inset; }
.tall-more .c, .tall-t:checked ~ .tall-more .o { display: none; }
.tall-t:checked ~ .tall-more .c { display: inline; }
.tall-t:focus-visible ~ .tall-more { outline: 2px solid var(--beam); outline-offset: 3px; }
.shot figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--dim); padding: 8px 2px 0; letter-spacing: .02em; line-height: 1.5; }
.shots2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.shots2 .shot { margin: 0; }

/* docs layout */
.docs { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px; align-items: start; }
@media (max-width: 960px) { .docs { grid-template-columns: 1fr; gap: 10px; } }
.docnav { position: sticky; top: calc(var(--top-h) + 18px); max-height: calc(100vh - var(--top-h) - 36px); overflow-y: auto; padding: 26px 0 20px; font-size: 13.5px; }
@media (max-width: 960px) { .docnav { position: static; max-height: none; padding: 18px 0 0; order: 2; border-top: 1px solid var(--hair); margin-top: 30px; } .doc-main { order: 1; } }
.docnav details { margin: 0; }
.docnav summary { cursor: pointer; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ice); padding: 6px 0; list-style: none; }
.docnav summary::-webkit-details-marker { display: none; }
.docnav .grp { font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 18px 0 6px; }
.docnav ul { list-style: none; margin: 0; padding: 0; }
.docnav a { display: block; color: var(--dim); padding: 5px 10px; border-radius: 7px; border-left: 2px solid transparent; text-decoration: none; line-height: 1.4; }
.docnav a:hover { color: var(--ice); background: var(--panel); text-decoration: none; }
.docnav a[aria-current="page"] { color: var(--ice); background: var(--panel); border-left-color: var(--beam); }
@media (max-width: 960px) { .docnav .grp-body { columns: 2; column-gap: 16px; } }
@media (max-width: 520px) { .docnav .grp-body { columns: 1; } }

.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--hair); background: var(--panel); border-radius: 99px; padding: 5px 12px; font-size: 12.5px; color: var(--dim); line-height: 1.4; }
.chip b { color: var(--ice); font-weight: 600; }
.chip .menu { font-family: var(--mono); font-size: 12px; color: var(--ice); }
/* The Free/Pro pill on docs pages. Named apart from the pricing and features `.tier` cards: a bare
   `.tier` here restyled those cards as bold uppercase monospace and painted the Pro card blue. */
.tier-tag { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; border-radius: 5px; padding: 2px 7px; }
.tier-tag.free { color: var(--ok); background: rgba(91,214,138,.12); }
.tier-tag.pro { color: #06090e; background: var(--beam); }
.tier-tag.mixed { color: var(--ice); background: #2a303b; }
.menu-path { font-family: var(--mono); font-size: .9em; color: var(--ice); background: rgba(74,158,255,.08); border: 1px solid rgba(74,158,255,.22); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }

.gsec { margin: 34px 0 0; }
.gsec > h2 { font-family: var(--display); font-size: 21px; letter-spacing: -0.015em; font-weight: 600; margin: 0 0 12px; color: var(--ice); }
.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; }
.steps li { counter-increment: st; position: relative; padding: 12px 0 12px 46px; border-top: 1px solid var(--hair); color: var(--text); line-height: 1.6; }
.steps li:first-child { border-top: 0; }
.steps li::before {
  content: counter(st); position: absolute; left: 0; top: 11px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font: 700 13px var(--mono); color: var(--beam);
  background: rgba(74,158,255,.1); border: 1px solid rgba(74,158,255,.3);
}
.steps li strong { color: var(--ice); }
.measured { display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--beam-dim); background: linear-gradient(180deg, rgba(74,158,255,.07), rgba(74,158,255,.02)); border-radius: 14px; padding: 18px 20px; }
.measured .lab { font: 600 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--beam); flex: none; padding-top: 3px; }
.measured p { margin: 0; color: var(--text); line-height: 1.6; }
.measured p b, .measured p strong { color: var(--ice); font-family: var(--display); font-weight: 600; font-size: 1.06em; }
@media (max-width: 560px) { .measured { flex-direction: column; gap: 6px; } }
.limits { list-style: none; margin: 0; padding: 0; }
.limits li { position: relative; padding: 8px 0 8px 22px; color: var(--text); border-top: 1px solid var(--hair); line-height: 1.6; }
.limits li:first-child { border-top: 0; }
.limits li::before { content: ""; position: absolute; left: 3px; top: 17px; width: 8px; height: 2px; background: var(--warn); }
.callout { border: 1px solid var(--hair); background: var(--panel); border-radius: 12px; padding: 14px 18px; color: var(--text); margin: 18px 0; }
.callout b, .callout strong { color: var(--ice); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 44px 0 0; }
.pager a { display: block; border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px; color: var(--ice); text-decoration: none; }
.pager a:hover { border-color: var(--beam-dim); }
.pager .l { display: block; font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 3px; }
.pager .next { text-align: right; grid-column: 2; }
@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } .pager .next { grid-column: 1; } }

/* FAQ accordion */
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; list-style: none; padding: 15px 36px 15px 0; position: relative; font-weight: 620; font-size: 15.5px; color: var(--ice); line-height: 1.45; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 400 22px var(--sans); color: var(--beam); transition: transform .15s ease; }
.faq details[open] > summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 16px; color: var(--text); font-size: 14.8px; line-height: 1.7; max-width: 76ch; }
.faq .a p { margin: 0 0 10px; }
.faq .a p:last-child { margin: 0; }
.faq .a strong, .faq .a b { color: var(--ice); }
.faq-cat { margin: 38px 0 0; }
.faq-cat > h2 { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 8px; }
.faq-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.faq-toc a { display: inline-block; font-size: 13px; color: var(--dim); border: 1px solid var(--hair); border-radius: 99px; padding: 6px 13px; text-decoration: none; }
.faq-toc a:hover { color: var(--ice); border-color: var(--beam-dim); }

/* matrix */
.mx-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: 14px; background: var(--panel); }
.mx { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 760px; }
.mx th, .mx td { padding: 10px 14px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.mx thead th { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: #11141a; position: sticky; top: 0; }
.mx tbody th { color: var(--ice); font-weight: 650; white-space: nowrap; background: var(--panel); position: sticky; left: 0; }
.mx td { color: var(--text); }
.mx td b { color: var(--ice); font-family: var(--display); font-weight: 600; }
.mx tr:last-child th, .mx tr:last-child td { border-bottom: 0; }
.mx .y { color: var(--ok); font-weight: 700; }
.mx .n { color: var(--dim); }
.mx .ext { font-family: var(--mono); font-size: 12px; color: var(--dim); display: block; font-weight: 400; margin-top: 2px; white-space: normal; }
.mx-note { color: var(--dim); font-size: 13px; margin: 10px 2px 0; }

/* videos */
.vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.vid { border: 1px solid var(--hair); border-radius: 14px; background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
.vid video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vid .soon {
  aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(420px 220px at 50% 40%, rgba(74,158,255,.10), transparent 70%), #0d1015; color: var(--dim);
  border-bottom: 1px solid var(--hair); text-align: center; padding: 16px;
}
.vid .soon svg { opacity: .7; }
.vid .soon span { font: 600 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--beam); }
.vid .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; }
.vid h3 { font-size: 15.5px; margin: 0; font-weight: 650; }
.vid p { color: var(--dim); font-size: 13.5px; margin: 0; line-height: 1.55; }
.vid .dur { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }

/* requirements table */
.req { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.req th, .req td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hair); }
.req th { width: 28%; color: var(--ice); font-weight: 650; }
.req td { color: var(--text); }
@media (max-width: 560px) { .req th, .req td { display: block; width: auto; padding: 4px 0; border: 0; } .req tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--hair); } }

.twocol { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: start; }
@media (max-width: 900px) { .twocol { grid-template-columns: 1fr; } }
.order { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: od; }
.order li { counter-increment: od; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hair); background: var(--panel); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; color: var(--ice); }
.order li::before { content: counter(od); font: 700 11px var(--mono); color: var(--beam); }
.panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
@media (max-width: 700px) { .panes { grid-template-columns: 1fr; } }
.pane { border: 1px solid var(--hair); border-radius: 12px; background: var(--panel); padding: 14px 16px; }
.pane h3 { margin: 0 0 6px !important; font-size: 15px !important; }
.pane p, .pane ul { margin: 0; color: var(--dim); font-size: 14px; }
.pane ul { padding-left: 18px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 26px 0 0; }

/* ---------------------------------------------------------------- template details */
.doc-main { min-width: 0; }
.doc-main .pg-hero { padding-top: 26px; }
.doc-main .pg-hero h1 { font-size: clamp(28px, 3.6vw, 42px); max-width: 26ch; }
.pg-hero .lede p { margin: 0 0 10px; }
.pg-hero .lede p:last-child { margin-bottom: 0; }
.order a { color: var(--ice); text-decoration: none; }
.order a:hover { color: var(--beam); }
.vid .vid-t { font-size: 15.5px; margin: 0; font-weight: 650; letter-spacing: -0.005em; }
.card-l .d code { font-size: .85em; }
.gsec .srch-hint, .pg-hero .srch-hint { margin-top: 10px; }
.meta .chip code { font-size: 11.5px; }
@media (max-width: 600px) {
  .pg-hero { padding: 24px 0 18px; }
  .band { padding: 20px 16px 16px; }
  .srch-row .n-btn { padding: 11px 14px; }
}