/* ============================================================
   BLUE SPARK — design system
   Source of truth: blueprint 3.1 (blue-spark.io rewrite).
   Direction: a professional instrument for people whose work is
   documents, decisions and deadlines. Paper first, one blue
   signal, states stated plainly.
   Type: Space Grotesk (display) · Inter (body) · JetBrains Mono (identifiers)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* --- the six named tokens --- */
  --ink:              #06080F; /* Code Black. The dark field. */
  --paper:            #FAFAF7; /* Paper. Default field for readable surfaces. */
  --deep:             #1E3A8A; /* Deep Blue. The only saturated colour. */
  --steel:            #C5CCD8; /* Steel. Hairlines on ink only. */
  --warm:             #FFF8E7; /* Warm White. Warm tint and text on ink. */
  --stroke:           #6E7178; /* Non-text contrast token (4.67:1 on paper). */

  /* --- derived text and rule tokens (no new hues) --- */
  --text:             #14161C; /* 17.29:1 on paper */
  --text-dim:         #4C5058; /*  7.74:1 on paper */
  --text-on-ink:      #EDEFF4; /* 17.39:1 on ink   */
  --text-on-ink-dim:  #A9B1C0; /*  9.28:1 on ink   */
  --deep-ink:         #16265E; /* 13.63:1 on paper */
  --rule:             #DFDFD7; /* decorative hairline, paper. Never meaningful. */
  --rule-ink:         #242A38; /* decorative hairline, ink.   Never meaningful. */
  --paper-alt:        #F5F4EF; /* one tonal step of paper, for editorial rhythm */

  /* --- status. Only on /status and on real state chips. --- */
  --st-ok:            #1F7A3D;
  --st-wait:          #8A5A00;
  --st-stop:          #A3261B;
  --st-unknown:       #4C5058;

  /* --- focus ring: deep on paper, warm on ink --- */
  --focus:            var(--deep);

  /* --- type --- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* --- measure and rhythm --- */
  --container:    1180px;
  --gutter:       clamp(20px, 4vw, 64px);
  --measure:      68ch;
  --rhythm:       clamp(56px, 7vw, 104px);
  --rhythm-tight: clamp(28px, 3vw, 44px);
  --nav-h:        56px;
  --target:       44px;

  /* --- radii --- */
  --r-1:    4px;
  --r-2:    10px;
  --r-pill: 999px;

  /* --- elevation. The first separates panels; the second is reserved for
         the single emphasised offer per page. Both are written out
         literally where they are used, because these two values are the
         entire elevation vocabulary of the system. --- */
  --e-1: 0 1px 2px rgba(20, 22, 28, 0.06);
  --e-2: 0 2px 6px rgba(20, 22, 28, 0.08);

  /* --- motion --- */
  --dur-1: 160ms;
  --dur-2: 240ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:target { scroll-margin-top: calc(var(--nav-h) + 16px); }
::selection { background: var(--deep); color: var(--warm); }

/* ---------- 3. Cosmos canvas — ink-band pages only ---------- */
#cosmos {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: var(--ink);
}
body.no-webgl #cosmos { display: none; }

/* ---------- 4. Bands, sections, layout ---------- */
.band {
  background: var(--paper);
  color: var(--text);
  --focus: var(--deep);
}
.band-alt {
  background: var(--paper-alt);
  color: var(--text);
  --focus: var(--deep);
}
.band-ink {
  background: transparent;
  color: var(--text-on-ink);
  --focus: var(--warm);
}
body.band-ink { background: var(--ink); }
/* The one Warm White band in the system, on the founding programme page. */
.band[data-tone="warm"] { background: var(--warm); }
.band-ink a { color: var(--warm); }

/* ---------- 4b. Field re-assertion (Inquisitor scenario 1) ----------
   The ink text rules above are descendant selectors rooted at .band-ink. On
   index/enterprise/404 the ink field is painted on <body>, so those rules also
   match text inside Paper bands: a Paper-field paragraph matched by
   `.band-ink .prose` beats the colour it would inherit from `.band`. A band
   owns its own field, so the Paper bands and the shell re-assert the Paper
   field explicitly and an ink band with no ink field behind it paints its own.
   Additive only: no screen colour is corrected per element, and no ink rule is
   deleted. */

/* 1. On a Paper-field page (/work) the ink band paints its own ink field. On
      the cosmos pages the body already paints it, so the band stays
      transparent and the fixed canvas keeps showing through. */
body.band .band-ink { background: var(--ink); }

/* 2. A Paper band re-asserts the Paper field for its own text. Scoped to
      <div class="band"> and excluding .band-ink, so it can never reach into an
      ink band (which is what a bare .band selector would do on /work, where
      <body class="band"> is an ancestor of the ink band). */
div.band:not(.band-ink) .lead,
div.band:not(.band-ink) .prose,
div.band:not(.band-ink) .prose-wide,
div.band:not(.band-ink) .quiet-link,
div.band:not(.band-ink) .btn-secondary { color: var(--text); }

/* Three of the eight roles own a Paper-field token that is not --text, and
   re-asserting them onto --text would delete a tier rather than restore one:
   .note is the dim tier (--text-dim), .kicker carries the BD-5 display token
   (--deep-ink), and a.btn-quiet is a text action in Deep Blue (--deep). Each
   keeps the selector it already had; only the value differs, and each value is
   the one its own rule above declares. (.quiet-link stays in the --text group
   because it is a text link: the narrower `a:not(.btn)` rule below already
   resolves it to its designed --deep at higher specificity.) */
div.band:not(.band-ink) .note { color: var(--text-dim); }
div.band:not(.band-ink) .kicker { color: var(--deep-ink); }
div.band:not(.band-ink) .btn-quiet { color: var(--deep); }
/* Text links only. A `.btn` owns its own fill and label (`.btn-primary` is
   Warm White on Deep Blue, `.btn-secondary` is Ink on Paper), so the band must
   not repaint their labels: doing so measured deep-on-deep at 1.00:1. */
div.band:not(.band-ink) a:not(.btn) { color: var(--deep); }
div.band:not(.band-ink) .state { color: var(--st-unknown); }
div.band:not(.band-ink) .state-in-production { color: var(--st-ok); }
div.band:not(.band-ink) .state-planned { color: var(--st-wait); }

/* 3. The shell is Paper on every page and must never inherit a page field. */
.nav, .site-footer { color: var(--text); }
.nav .wordmark, .site-footer .h3, .mobile-menu .h3 { color: var(--text); }
a.skip-link { color: var(--text); }   /* ties .band-ink a (123); later in file wins */

/* 4. The 404 recovery links sit on the ink field: .doc-index a (line 426) and
      .band-ink a (line 123) have equal specificity and 426 is later. */
.band-ink .doc-index a { color: var(--warm); }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: calc(var(--rhythm) / 2); }
.section-tight { padding-block: calc(var(--rhythm-tight) / 2); }
.band > .container > .section:first-child { padding-top: var(--rhythm); }
.band > .container > .section:last-child { padding-bottom: var(--rhythm); }

.stack { display: grid; gap: var(--rhythm-tight); align-content: start; }
.stack > * + * { margin-top: 0; }
.two-col { display: grid; gap: var(--rhythm-tight); align-items: start; }
@media (min-width: 1080px) {
  .two-col {
    grid-template-columns: minmax(0, 62ch) minmax(0, 34ch);
    gap: clamp(32px, 4vw, 64px);
  }
}
.rule { border: 0; border-top: 1px solid var(--rule); height: 0; margin: 0; }
.band-ink .rule { border-top-color: var(--rule-ink); }
[data-align="center"] { text-align: center; }
[data-align="center"] .prose,
[data-align="center"] .prose-wide,
[data-align="center"] .lead,
[data-align="center"] .h1,
[data-align="center"] .h2 { margin-inline: auto; }
[data-align="center"] .btn-row { justify-content: center; }
[data-align="center"] .doc-index { justify-items: center; }
[data-align="center"] .doc-index li { text-align: center; }

/* Screen-reader-only helper, used by the single-row release table labels */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 5. Type roles ---------- */
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  text-align: left;
  text-wrap: balance;
}
.h1 {
  font-size: clamp(2.25rem, 5.2vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 32ch;
}
.h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 40ch;
}
/* A panel's own title is a heading of the surface, set at panel scale. */
.offer .h2,
.panel .h2,
.step .h2,
.media-state .h2 {
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 40ch;
}
.kicker {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--deep-ink);
}
.band-ink .kicker { color: var(--text-on-ink-dim); }
.lead {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--text);
  max-width: var(--measure);
}
.band-ink .lead { color: var(--text-on-ink); }
.prose { max-width: var(--measure); text-wrap: pretty; }
.prose-wide { max-width: 100%; text-wrap: pretty; }
.prose p + p, .stack > p + p { margin-top: 1em; }
.band-ink .prose, .band-ink .prose-wide { color: var(--text-on-ink); }
.note {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: var(--measure);
}
.band-ink .note { color: var(--text-on-ink-dim); }
.ident {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: 0.01em;
}
blockquote {
  border-left: 2px solid var(--deep);
  padding-left: var(--rhythm-tight);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 44ch;
}
.band-ink blockquote { border-left-color: var(--steel); color: var(--text-on-ink); }

/* ---------- 6. Actions ---------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  list-style: none;
  padding: 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--deep); color: var(--warm); border-color: var(--deep); }
.btn-primary:hover { background: var(--deep-ink); border-color: var(--deep-ink); }
.btn-secondary { background: var(--paper); color: var(--text); border-color: var(--stroke); }
.btn-secondary:hover { background: var(--paper-alt); }
.band-ink .btn-secondary {
  background: transparent;
  color: var(--text-on-ink);
  border-color: var(--steel);
}
.band-ink .btn-secondary:hover { background: rgba(255, 248, 231, 0.08); }
.btn-quiet {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 11px 4px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--deep);
  text-decoration: none;
}
.band-ink .btn-quiet { color: var(--warm); }
.btn-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.quiet-link { color: var(--deep); font-weight: 500; }
.band-ink .quiet-link { color: var(--warm); }
.quiet-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 7. Panels and offers ---------- */
.panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  box-shadow: 0 1px 2px rgba(20, 22, 28, 0.06);
  padding: clamp(20px, 2.6vw, 32px);
  display: grid;
  gap: 14px;
  align-content: start;
}
.panel-key {
  border-top: 2px solid var(--deep);
  box-shadow: 0 2px 6px rgba(20, 22, 28, 0.08);
}
.offer-grid { display: grid; gap: var(--rhythm-tight); align-items: start; }
@media (min-width: 900px) { .offer-grid { grid-template-columns: 1fr 1fr; } }
.offer {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  box-shadow: 0 1px 2px rgba(20, 22, 28, 0.06);
  padding: clamp(20px, 2.6vw, 32px);
  display: grid;
  gap: 14px;
  align-content: start;
}
.offer-key {
  border-top: 2px solid var(--deep);
  box-shadow: 0 2px 6px rgba(20, 22, 28, 0.08);
}
.offer-terms { font-size: 0.9375rem; line-height: 1.5; color: var(--text-dim); }

/* ---------- 8. Lists, steps, tables, indexes ---------- */
.step-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: var(--measure);
}
.prose-wide .step-list, .step-list.prose-wide { max-width: 100%; }
.step { border-top: 1px solid var(--rule); padding-block: clamp(18px, 2.2vw, 26px); }
.step:first-child { border-top: 0; padding-top: 0; }
.step:last-child { padding-bottom: 0; }
.step > .h3 { margin-bottom: 6px; }
.band-ink .step { border-top-color: var(--rule-ink); }
.step-list > li[data-state-row] { display: grid; gap: 8px; justify-items: start; }

/* The one labelled flow on /technology: four steps in reading order, and the
   outbound boundary as a labelled line. Stacks on narrow screens. */
@media (min-width: 900px) {
  [data-flow] { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  [data-flow] > .step {
    border-top: 0;
    border-left: 1px solid var(--rule);
    padding: 0 20px;
  }
  [data-flow] > .step:first-child { border-left: 0; padding-left: 0; }
}
[data-flow] > .step[data-boundary] > .note {
  border-top: 1px solid var(--rule);
  padding-top: 8px;
}

.faq {
  border-top: 1px solid var(--rule);
  padding-block: 4px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding-block: 16px;
  min-height: var(--target);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-dim);
  transition: transform var(--dur-2) var(--ease);
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--deep-ink); }
.faq > .prose, .faq > .prose-wide, .faq > .note { padding-bottom: 18px; }

.table-scroll { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
}
table.data caption {
  text-align: left;
  font-size: 0.9375rem;
  color: var(--text-dim);
  padding-bottom: 10px;
}
table.data th, table.data td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.data th {
  font-weight: 500;
  color: var(--text);
  width: 34%;
}
table.data td { color: var(--text-dim); }

.doc-index { list-style: none; padding: 0; display: grid; gap: 10px; }
.doc-index a { color: var(--deep); }
@media (min-width: 720px) {
  .doc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
}

/* ---------- 9. States and the media-absent unit ---------- */
.state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--st-unknown);
}
.state-in-production { color: var(--st-ok); }
.state-planned       { color: var(--st-wait); }
.state-pending       { color: var(--st-unknown); }
.state-unknown       { color: var(--st-unknown); }
.state-investigating { color: var(--st-wait); }
.state-disruption    { color: var(--st-stop); }
.state-recovering    { color: var(--st-wait); }
.state-resolved      { color: var(--st-ok); }

.media-state {
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--paper);
  padding: clamp(18px, 2.2vw, 26px);
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: start;
  max-width: var(--measure);
}
.media-state .note { max-width: 56ch; }
/* On ink, a state keeps its label and takes the ink-aware hairline: the
   status hues are tuned for paper and would fail contrast on Code Black. */
.band-ink .state {
  color: var(--text-on-ink);
  border-color: var(--steel);
}
.band-alt .media-state { background: var(--paper); }
.band-ink .media-state {
  background: transparent;
  border-color: var(--rule-ink);
}

/* ---------- 10. Shell: skip link, nav, mobile menu ---------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--stroke);
  border-radius: var(--r-1);
  padding: 10px 16px;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: 12px; }

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  --focus: var(--deep);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  min-height: var(--nav-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 44px; height: 44px; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.nav-groups {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
}
.nav-groups > a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.nav-groups > a:hover { color: var(--deep-ink); text-decoration: none; }
.nav-groups > a[aria-current="page"] { border-bottom-color: var(--deep); }
.menu { position: relative; }
.menu > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::marker { content: ""; }
.menu > summary::after { content: "+"; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); }
.menu[open] > summary::after { content: "\2212"; }
.menu > summary:hover { color: var(--deep-ink); }
.menu[data-current="true"] > summary { border-bottom-color: var(--deep); }
.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 232px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  box-shadow: 0 2px 6px rgba(20, 22, 28, 0.08);
  padding: 10px;
  display: grid;
  gap: 2px;
  z-index: 60;
}
.menu-panel a {
  display: block;
  padding: 9px 10px;
  border-radius: var(--r-1);
  font-size: 0.9375rem;
  color: var(--text);
}
.menu-panel a:hover { background: var(--paper-alt); color: var(--deep-ink); text-decoration: none; }
.menu-panel a[aria-current="page"] { color: var(--deep-ink); font-weight: 500; }
.nav-action { margin-left: auto; flex: none; }
.nav-toggle {
  display: none;
  margin-left: auto;
  background: var(--paper);
  border: 1px solid var(--stroke);
  border-radius: var(--r-1);
  padding: 12px 11px;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); }
.nav-toggle span + span { margin-top: 4px; }
body.nav-open .nav-toggle span:first-child { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:last-child { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle span { transition: transform var(--dur-2) var(--ease); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--paper);
  padding: calc(var(--nav-h) + 28px) var(--gutter) 48px;
  overflow-y: auto;
  --focus: var(--deep);
}
body.nav-open .mobile-menu { display: block; }
.mobile-menu .stack { gap: 22px; }
.mobile-menu nav { display: grid; gap: 2px; }
.mobile-menu nav a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.0625rem;
  color: var(--text);
}
.mobile-menu nav a[aria-current="page"] { color: var(--deep-ink); font-weight: 500; }
.mobile-menu .btn { width: 100%; }

/* ---------- 11. Footer ---------- */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  --focus: var(--deep);
}
.footer-grid {
  display: grid;
  gap: var(--rhythm-tight);
  padding-block: clamp(40px, 5vw, 64px);
}
@media (min-width: 860px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
}
.footer-col h2 { font-size: 1rem; letter-spacing: 0; margin-bottom: 14px; max-width: none; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.footer-col a { color: var(--text-dim); font-size: 0.9375rem; }
.footer-col a:hover { color: var(--deep-ink); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-block: 20px;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.footer-base .founder-credit { color: var(--text-dim); }

/* ---------- 12. The one page-load motion moment ---------- */
[data-split] .split-word { display: inline-block; white-space: nowrap; }
[data-split] .split-char { display: inline-block; will-change: transform, opacity; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 200ms var(--ease) both; }
::view-transition-new(root) { animation: vt-in 240ms var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- 13. Accessibility floor ---------- */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
@media (prefers-contrast: more) {
  :root { --rule: var(--stroke); --rule-ink: var(--steel); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-split] .split-char { transform: none !important; opacity: 1 !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
/* prefers-reduced-data is the intended signal, but no shipping engine
   implements the media feature (it cannot be distinguished from a typo). The
   Save-Data client hint, which Chrome, Edge and (behind a flag) Firefox do
   expose, is the signal that actually exists; main.js mirrors it onto <html>
   before cosmos.js runs. This rule is kept and honestly labelled for the day
   the media feature ships. Inquisitor scenario 2. */
@media (prefers-reduced-data: reduce) {
  #cosmos { display: none; }
}
html.save-data #cosmos { display: none; }
/* The no-WebGL path draws a second, 2D canvas (`#cosmos2d`, created by
   cosmos.js when WebGL is unavailable). It is a different element, so the rule
   above does not reach it and a Save-Data visitor on a no-WebGL browser still
   got a full-screen animated field. Same control, same suppression. */
html.save-data #cosmos2d { display: none; }

/* ---------- 13b. Paged media (Inquisitor scenario 3) ----------
   The Ink bands are legible only because a CSS background paints their field.
   Paged media applies print-color-adjust: economy, which resets backgrounds to
   the paper while leaving `color` intact, so on paper the field becomes the
   page and the ink text has to become ink. This block exists under the print
   media type only; every screen value above is untouched. */
@media print {
  html, body, body.band-ink, .band, .band-alt, .band-ink { background: #fff !important; }

  /* Ink-field text becomes ink. */
  .band-ink, .band-ink .h1, .band-ink .h2, .band-ink .h3,
  .band-ink .lead, .band-ink .prose, .band-ink .prose-wide,
  .band-ink .note, .band-ink .kicker, .band-ink a, .band-ink blockquote,
  .band-ink .quiet-link, .band-ink .btn-quiet,
  .band-ink .state, .band-ink .media-state { color: #000 !important; }

  /* An outlined action with a suppressed fill prints as an empty box: give it
     a printed fill and a printed label. */
  /* Not scoped to .band-ink: the same suppressed fill would leave a --warm
     label on bare paper on every page that has no ink band (19 of 23). */
  .btn-primary, .btn-secondary {
    background: #fff !important; color: #000 !important; border-color: #000 !important;
  }
  .band-ink .state, .band-ink .media-state { background: transparent !important; border-color: #000 !important; }

  /* Affordances with no meaning on paper. */
  #cosmos, .nav-toggle, .skip-link { display: none !important; }
  .nav { position: static; }
  .menu-panel { position: static; border: 0; box-shadow: none; }

  /* Internal links are root-absolute by design (blueprint 3.3); on paper the
     target has to be written out or the link is unreferenced. */
  a[href^="/"]::after { content: " (blue-spark.io" attr(href) ")"; font-size: 0.85em; }
}

/* ---------- 14. Breakpoints ---------- */
@media (max-width: 900px) {
  body { font-size: 1.0625rem; }
  .nav-groups, .nav-action { display: none; }
  .nav-toggle { display: block; }
  .h1 { max-width: 24ch; }
}
@media (max-width: 640px) {
  .footer-grid { gap: 28px; }
  .btn { width: 100%; }
  .btn-row { gap: 10px; }
}