@charset "utf-8";
/* ============================================================================
   LUCKY SYSTEMS — CORE DESIGN SYSTEM
   ----------------------------------------------------------------------------
   One file: tokens, reset, typography, layout, components, motion, utilities.
   Page-specific rules live in assets/css/page-<name>.css so pages never collide.

   Brand source of truth: current-site-snapshot/BRAND-GUIDE.md
     Primary blue #1077D7 · Deep blue #0B4F8A · Cyan #45B7C4
     Charcoal #0F1214 · White #FFFFFF · Warm accent #E7A63A (sparingly)

   Colour meaning (brand guide §"Visual storytelling language"):
     blue/cyan  = connected movement
     amber      = waiting, risk, human attention
     Semantic green/red are UI states only (success/error), never brand colour.

   Accessibility floor: WCAG 2.2 AA. Every text/background pair below was
   contrast-checked; the ones that fail are documented as decorative-only.
   ========================================================================== */

@import url('../fonts/fonts.css');

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --blue: #0f6fc8; /* was #1077D7 — 4.24:1 as text on --paper failed AA */
  --blue-hi: #4fa9f5; /* dark-bg links & text (7.3:1 on --canvas) */
  --blue-deep: #0b4f8a;
  --blue-ink: #082f52;
  --cyan: #45b7c4;
  --cyan-hi: #7ce7f0; /* dark-bg channels per brand guide §3 */
  --amber: #e7a63a; /* text amber; light bands darken this to #8A5D05 */
  --amber-bright: #e7a63a; /* decorative fills/borders — never darkened */
  --amber-soft: #f5cd86;

  /* ---- Dark canvas ladder (brightness-step elevation, no shadow tiers) ---- */
  --void: #05080c; /* deepest — hero backdrop */
  --canvas: #0a0e14; /* dark page floor */
  --surface-1: #0f141c; /* default dark card */
  --surface-2: #151c26; /* elevated dark card, inputs */
  --surface-3: #1d2632; /* hover / strong panel */

  /* ---- Light canvas ladder ---- */
  --paper: #f5f8fa; /* light band floor */
  --paper-2: #eaf0f5; /* light recessed */
  --paper-card: #ffffff;

  /* ---- Ink on dark ---- */
  --d-ink: #ffffff;
  --d-body: #a9b6c3; /* 8.7:1 on --canvas */
  --d-muted: #7d8b99; /* 5.2:1 on --canvas */
  --d-faint: #78889a; /* 4.6:1 on --canvas — was #55616E at 2.9:1 */

  /* ---- Ink on light ----
     Checked against the DARKEST light surface (--bg-card-3 #E2EAF1), not white,
     because muted text lands on tinted panels too. The old --l-muted #66757F
     measured 4.46:1 there — a hair under AA — which alone accounted for 213
     failures site-wide. */
  --l-ink: #0b1220; /* 18:1 on --paper */
  --l-body: #3f4d59; /* 8.0:1 on --paper, 6.2:1 on --bg-card-3 */
  --l-muted: #55636f; /* 5.8:1 on --paper, 5.1:1 on --bg-card-3 */
  --l-faint: #7b8894; /* decorative / disabled only — never real copy */

  /* ---- Hairlines ---- */
  --d-line: rgba(255, 255, 255, 0.09);
  --d-line-soft: rgba(255, 255, 255, 0.055);
  --d-line-strong: rgba(255, 255, 255, 0.16);
  --l-line: #dce5ec;
  --l-line-soft: #e9eff4;
  --l-line-strong: #c3d0da;

  /* ---- Semantic UI states (not brand colour) ---- */
  --ok: #2fa572;
  --ok-hi: #4fd39a;
  --warn: var(--amber);
  --err: #d93a3f;
  --err-hi: #ff7a7e;

  /* ---- Theme channel: every component reads these. -------------------------
     Sections flip them by setting .band--dark / .band--light. ------------- */
  --bg: var(--canvas);
  --bg-card: var(--surface-1);
  --bg-card-2: var(--surface-2);
  --bg-card-3: var(--surface-3);
  --ink: var(--d-ink);
  --body: var(--d-body);
  --muted: var(--d-muted);
  --faint: var(--d-faint);
  --line: var(--d-line);
  --line-soft: var(--d-line-soft);
  --line-strong: var(--d-line-strong);
  --link: var(--blue-hi);
  --accent: var(--cyan-hi);
  --shadow-card: none;
  --shadow-lift: 0 24px 60px -24px rgba(0, 0, 0, 0.7);

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Fluid scale — 375px floor, 1440px ceiling */
  --t-display-1: clamp(2.75rem, 1.35rem + 5.6vw, 6rem); /* 44 → 96 */
  --t-display-2: clamp(2.125rem, 1.35rem + 3.1vw, 3.75rem); /* 34 → 60 */
  --t-display-3: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem); /* 28 → 42 */
  --t-title-1: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); /* 22 → 28 */
  --t-title-2: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); /* 18 → 21 */
  --t-title-3: 1.0625rem; /* 17 */
  --t-lead: clamp(1.0625rem, 0.98rem + 0.36vw, 1.3125rem); /* 17 → 21 */
  --t-body: 1rem;
  --t-sm: 0.9375rem; /* 15 */
  --t-xs: 0.8125rem; /* 13 */
  --t-micro: 0.6875rem; /* 11 — mono labels */

  --lh-display: 1.02;
  --lh-title: 1.22;
  --lh-body: 1.62;
  --tr-display: -0.035em;
  --tr-title: -0.02em;
  --tr-micro: 0.14em;

  /* ---- Space (4px base) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  /* --s-7 and --s-14 were referenced by page CSS but never defined, so those
     declarations were silently dropped — which is why the About engagement
     figure had no padding and its header note sat 1px from the edge. */
  --s-7: 1.75rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-14: 3.5rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --band-y: clamp(4.5rem, 2.75rem + 5.2vw, 8.5rem); /* 72 → 136 */
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem); /* 20 → 48 */

  /* ---- Shape ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Containers ---- */
  --w-page: 1240px;
  --w-wide: 1420px;
  --w-text: 68ch;
  --w-narrow: 52ch;

  /* ---- Motion ---- */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --d-1: 120ms;
  --d-2: 200ms;
  --d-3: 320ms;
  --d-4: 560ms;
  --d-5: 900ms;

  --nav-h: 68px;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--blue-hi);

  /* ---- Diagram channel defaults ------------------------------------------
     The --rf-* set is re-pointed by .band--dark / .band--light. A figure that
     sits outside any band class would otherwise inherit NOTHING and fall back
     to the raw brand amber, which measures 1.8:1 as text on white. Since the
     site is light-primary, the LIGHT values are the safe default. */
  --rf-ch-0: #9fd8e0;
  --rf-ch-1: #3aa7b6;
  --rf-ch-2: #1077d7;
  --rf-node-0: #6db4f5;
  --rf-node-1: #1077d7;
  --rf-node-2: #0b4f8a;
  --rf-port: #2f9aa8;
  --rf-ring: #1077d7;
  --rf-out: #0b4f8a;
  --rf-label: #5a6b7a;
  --rf-amber: #8a5d05; /* text-safe amber (light default) */
  --rf-amber-deco: #e7a63a; /* decorative strokes/fills only — never text */
}

/* Band theming — the single mechanism for the light/dark rhythm. */
.band--dark,
.theme-dark {
  --bg: var(--canvas);
  --bg-card: var(--surface-1);
  --bg-card-2: var(--surface-2);
  --bg-card-3: var(--surface-3);
  --ink: var(--d-ink);
  --body: var(--d-body);
  --muted: var(--d-muted);
  --faint: var(--d-faint);
  --line: var(--d-line);
  --line-soft: var(--d-line-soft);
  --line-strong: var(--d-line-strong);
  --link: var(--blue-hi);
  --accent: var(--cyan-hi);
  --shadow-card: none;
  --shadow-lift: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}
.band--void {
  --bg: var(--void);
}

/* ---- Routing-diagram channel: one SVG, both bands -------------------------
   On dark the diagram GLOWS (bright cyan on near-black). On light it must
   INK instead — deeper, more saturated strokes and a readable amber. Text
   values are contrast-checked against their own band. */
.band--dark,
.theme-dark {
  --rf-ch-0: #45b7c4;
  --rf-ch-1: #7ce7f0;
  --rf-ch-2: #4fa9f5;
  --rf-node-0: #8cc7ff;
  --rf-node-1: #1077d7;
  --rf-node-2: #0b4f8a;
  --rf-port: #7ce7f0;
  --rf-ring: #4fa9f5;
  --rf-out: #4fa9f5;
  --rf-label: #a9b6c3;
  --rf-amber: #e7a63a; /* bright amber is legible text on dark */
  --rf-amber-deco: #e7a63a;
}
.band--light,
.theme-light {
  --rf-ch-0: #9fd8e0;
  --rf-ch-1: #3aa7b6;
  --rf-ch-2: #1077d7;
  --rf-node-0: #6db4f5;
  --rf-node-1: #1077d7;
  --rf-node-2: #0b4f8a;
  --rf-port: #2f9aa8;
  --rf-ring: #1077d7;
  --rf-out: #0b4f8a;
  --rf-label: #5a6b7a; /* 4.9:1 on --paper */
  --rf-amber: #8a5d05; /* text amber — #E7A63A is 2.0:1 on white */
  --rf-amber-deco: #e7a63a;
}
.band--light,
.theme-light {
  --bg: var(--paper);
  --bg-card: var(--paper-card);
  --bg-card-2: var(--paper-2);
  --bg-card-3: #e2eaf1;
  --ink: var(--l-ink);
  --body: var(--l-body);
  --muted: var(--l-muted);
  --faint: var(--l-faint);
  --line: var(--l-line);
  --line-soft: var(--l-line-soft);
  --line-strong: var(--l-line-strong);
  --link: var(--blue);
  --accent: var(--blue-deep); /* cyan fails contrast on light — never text */
  --shadow-card: 0 1px 2px rgba(11, 18, 32, 0.05), 0 8px 24px -12px rgba(11, 18, 32, 0.12);
  --shadow-lift: 0 24px 60px -28px rgba(11, 18, 32, 0.28);
}
/* ---- LIGHT-BAND SAFETY NET -------------------------------------------------
   When a band is converted from dark to light, any copy still referencing a
   dark-mode token would keep its dark-mode colour — white text on a white band
   (contrast 1.0, literally invisible), cyan labels at 1.4:1, and so on. Rather
   than chase every occurrence across 13 page stylesheets, the dark-mode text
   tokens are RE-POINTED to their light equivalents inside a light band. A page
   that says color: var(--d-body) therefore renders correct copy on either band.

   Only TEXT tokens are aliased. --blue is deliberately left alone: it is the
   button background (white on #1077D7 = 4.8:1, which passes), and overriding it
   would restyle every CTA on the site. */
.band--light,
.band--paper-white,
.theme-light {
  --d-ink: var(--l-ink);
  --d-body: var(--l-body);
  --d-muted: var(--l-muted);
  --d-faint: var(--l-faint);
  --cyan-hi: var(--blue-deep); /* cyan text is illegal on light — 1.4:1 */
  --cyan: var(--blue-deep);
  --blue-hi: var(--blue-deep); /* #4FA9F5 is only 2.6:1 on paper */
  --amber: #8a5d05; /* 2.0:1 as text on paper otherwise */
  --amber-soft: #8a5d05;
  --ok-hi: #14663f;
  --err-hi: #a4181c;
}
/* band--paper-white is a light band that only changed its floor colour; it needs
   the same ink treatment as any other light band. */
.band--paper-white {
  --bg: var(--paper-card);
  --bg-card: var(--paper-card);
  --bg-card-2: var(--paper-2);
  --bg-card-3: #e2eaf1;
  --ink: var(--l-ink);
  --body: var(--l-body);
  --muted: var(--l-muted);
  --faint: var(--l-faint);
  --line: var(--l-line);
  --line-soft: var(--l-line-soft);
  --line-strong: var(--l-line-strong);
  --link: var(--blue-deep);
  --accent: var(--blue-deep);
  --shadow-card: 0 1px 2px rgba(11, 18, 32, 0.05), 0 8px 24px -12px rgba(11, 18, 32, 0.12);
  --shadow-lift: 0 24px 60px -28px rgba(11, 18, 32, 0.28);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Any component that sets `display` would otherwise defeat the UA's [hidden]
   rule — which silently breaks every tabpanel and every toggled control. */
[hidden] {
  display: none !important;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--d-body);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  text-wrap: balance;
}
p {
  margin: 0;
  text-wrap: pretty;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}
/* Bespoke diagrams are authored as inline SVG with a viewBox and no intrinsic
   width, so they must scale to their container. Icons carry explicit width/height
   and are deliberately excluded.

   WRAPPED IN :where() ON PURPOSE. Written plainly, this selector has specificity
   (0,2,2) and silently beat every page-level rule like `.seam__svg { max-width:
   1200px }` (0,1,0) — so display figures across the whole site were being squeezed
   to 680px no matter what their page asked for, which rendered their labels at
   roughly 9px. That single line was the cause of the "diagram labels too small /
   reads as wireframe" finding the blind critics raised on five separate pages.
   :where() drops specificity to zero, so this is a DEFAULT any page can override
   with a single class. Raised to 900px so the untouched default is legible too. */
main :where(svg[viewBox]:not([width])) {
  width: 100%;
  height: auto;
  max-width: 900px;
  margin-inline: auto;
}
main :where(svg[viewBox]:not([width]).fig--wide),
main :where(svg[viewBox]:not([width])[data-wide]) {
  max-width: 1240px;
}
/* Diagram labels authored without an explicit fill would resolve to black —
   invisible on a dark band. Inherit the band's ink instead. */
main svg text:not([fill]) {
  fill: currentColor;
}
main svg [stroke='currentColor'] {
  stroke: currentColor;
}
img,
video {
  height: auto;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--d-2) var(--e-out);
}
a:hover {
  text-decoration-color: currentColor;
}
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
table {
  border-collapse: collapse;
  width: 100%;
}
::selection {
  background: color-mix(in srgb, var(--blue) 42%, transparent);
  color: #fff;
}

/* Focus — visible on every theme, never removed. */
:focus-visible {
  outline: 2px solid var(--blue-hi);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.band--light :focus-visible {
  outline-color: var(--blue-deep);
}

/* ==========================================================================
   3. ACCESSIBILITY HELPERS
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 200;
  background: var(--blue);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600;
  font-size: var(--t-sm);
  transition: transform var(--d-2) var(--e-out);
}
.skip-link:focus {
  transform: translate(-50%, 0);
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide {
  max-width: var(--w-wide);
}
.shell--text {
  max-width: calc(var(--w-text) + var(--gutter) * 2);
}

.band {
  position: relative;
  background: var(--bg);
  color: var(--body);
  padding-block: var(--band-y);
  isolation: isolate;
}
.band--tight {
  padding-block: clamp(3rem, 2rem + 3.4vw, 5.5rem);
}
.band--flush-top {
  padding-block-start: 0;
}
.band--flush-bottom {
  padding-block-end: 0;
}
.band--seam {
  border-top: 1px solid var(--line);
}

/* Grid helpers */
.grid {
  display: grid;
  gap: var(--s-6);
}
.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.grid--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.grid--aside {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
@media (max-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--aside,
  .grid--split {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.stack > * + * {
  margin-top: var(--flow, 1rem);
}
.stack-2 > * + * {
  margin-top: var(--s-2);
}
.stack-3 > * + * {
  margin-top: var(--s-3);
}
.stack-4 > * + * {
  margin-top: var(--s-4);
}
.stack-6 > * + * {
  margin-top: var(--s-6);
}
.stack-8 > * + * {
  margin-top: var(--s-8);
}
.stack-12 > * + * {
  margin-top: var(--s-12);
}
.row {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
}
.row--between {
  justify-content: space-between;
}
.row--end {
  justify-content: flex-end;
}
.row--top {
  align-items: flex-start;
}

/* ==========================================================================
   5. TYPOGRAPHY COMPONENTS
   ========================================================================== */

.display-1 {
  font-size: var(--t-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 600;
}
.display-2 {
  font-size: var(--t-display-2);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.display-3 {
  font-size: var(--t-display-3);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.title-1 {
  font-size: var(--t-title-1);
  line-height: 1.28;
  letter-spacing: -0.018em;
  font-weight: 600;
}
.title-2 {
  font-size: var(--t-title-2);
  line-height: 1.34;
  letter-spacing: -0.012em;
  font-weight: 600;
}
.title-3 {
  font-family: var(--font-ui);
  font-size: var(--t-title-3);
  line-height: 1.4;
  letter-spacing: -0.008em;
  font-weight: 600;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--body);
  max-width: var(--w-text);
}
.prose {
  color: var(--body);
  max-width: var(--w-text);
}
.prose p + p {
  margin-top: 1em;
}
.small {
  font-size: var(--t-sm);
}
.xs {
  font-size: var(--t-xs);
}
.muted {
  color: var(--muted);
}
.ink {
  color: var(--ink);
}
.serif-accent {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}

/* Mono micro-label — the system's connective tissue. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex: none;
  /* When an eyebrow wraps to more than one line, align-items:center floats the
     rule down beside the middle line. Pin it to the first line's optical centre
     instead — visible at 375px where long eyebrows wrap to three lines. */
  align-self: flex-start;
  margin-top: 0.62em;
}
.eyebrow--plain::before {
  display: none;
}
.eyebrow--accent {
  color: var(--accent);
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Section header block */
.section-head {
  display: grid;
  gap: var(--s-5);
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 1.5rem + 2.6vw, 4.5rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.section-head--center .lead {
  margin-inline: auto;
}
.section-head--wide {
  max-width: 74ch;
}
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
@media (max-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.8125rem 1.375rem;
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out),
    transform var(--d-2) var(--e-out),
    box-shadow var(--d-3) var(--e-out);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
}
.btn__arrow {
  flex: none;
  transition: transform var(--d-3) var(--e-out);
}
.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.btn--primary {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  --btn-bd: var(--blue);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset;
}
.btn--primary:hover {
  --btn-bg: #1c86e8;
  --btn-bd: #1c86e8;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 10px 30px -12px rgba(16, 119, 215, 0.75);
}
.btn--primary:active {
  --btn-bg: var(--blue-deep);
  --btn-bd: var(--blue-deep);
}

.btn--secondary {
  --btn-bg: var(--bg-card-2);
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}
.btn--secondary:hover {
  --btn-bg: var(--bg-card-3);
  --btn-bd: var(--blue-hi);
}
.band--light .btn--secondary {
  --btn-bg: #fff;
  --btn-bd: var(--l-line-strong);
}
.band--light .btn--secondary:hover {
  --btn-bg: #fff;
  --btn-bd: var(--blue);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}
.btn--ghost:hover {
  --btn-bd: var(--blue-hi);
  --btn-bg: color-mix(in srgb, var(--blue) 12%, transparent);
}
.band--light .btn--ghost:hover {
  --btn-bd: var(--blue);
  --btn-bg: color-mix(in srgb, var(--blue) 7%, transparent);
}

.btn--quiet {
  --btn-fg: var(--body);
  min-height: 40px;
  padding: 0.5rem 0.25rem;
}
.btn--quiet:hover {
  --btn-fg: var(--ink);
}

.btn--sm {
  min-height: 40px;
  padding: 0.625rem 1rem;
  font-size: var(--t-xs);
}
.btn--lg {
  min-height: 56px;
  padding: 1rem 1.75rem;
  font-size: var(--t-body);
}
.btn--block {
  width: 100%;
}

/* Text link with arrow — used everywhere as the tertiary action. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--link);
  text-decoration: none;
  min-height: 44px;
}
.link-arrow svg {
  transition: transform var(--d-3) var(--e-out);
}
.link-arrow:hover svg {
  transform: translateX(4px);
}
.link-arrow::after {
  content: '';
  position: absolute;
}

/* ==========================================================================
   7. SURFACES & CARDS
   ========================================================================== */

.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--d-3) var(--e-out),
    background var(--d-3) var(--e-out),
    transform var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out);
}
.card--flush {
  padding: 0;
  overflow: hidden;
}
.card--tight {
  padding: var(--s-5);
}
.card--roomy {
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.card--glass {
  background: color-mix(in srgb, var(--surface-1) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card--raised {
  box-shadow: var(--shadow-lift);
}

/* Interactive card: the whole card is one link target. */
.card--link {
  cursor: pointer;
}
.card--link:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.card--link:has(a:focus-visible) {
  border-color: var(--blue-hi);
}
.card__stretch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Top hairline that lights up on hover — quiet signature detail. */
.card--lit::before {
  content: '';
  position: absolute;
  inset-inline: clamp(1.5rem, 4%, 2.5rem);
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-hi), transparent);
  opacity: 0;
  transition: opacity var(--d-4) var(--e-out);
}
.card--lit:hover::before,
.card--lit:focus-within::before {
  opacity: 0.85;
}

/* Numbered / iconed card head */
.card__index {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-micro);
  color: var(--muted);
  text-transform: uppercase;
}
.card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  color: var(--accent);
  flex: none;
}
.band--light .card__icon {
  color: var(--blue);
}

/* ==========================================================================
   8. BADGES, PILLS, STATUS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-card-2);
  color: var(--body);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--blue {
  color: var(--blue-hi);
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
  background: color-mix(in srgb, var(--blue) 14%, transparent);
}
.band--light .badge--blue {
  color: var(--blue-deep);
  background: color-mix(in srgb, var(--blue) 9%, transparent);
}
.badge--amber {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber-bright) 42%, transparent);
  background: color-mix(in srgb, var(--amber-bright) 13%, transparent);
}
.band--light .badge--amber {
  color: #8a5d05;
  background: color-mix(in srgb, var(--amber-bright) 16%, transparent);
}
.badge--ok {
  color: var(--ok-hi);
  border-color: color-mix(in srgb, var(--ok) 42%, transparent);
  background: color-mix(in srgb, var(--ok) 13%, transparent);
}
.band--light .badge--ok {
  color: #14663f;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.badge--human {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber-bright) 42%, transparent);
  background: color-mix(in srgb, var(--amber-bright) 13%, transparent);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.dot--live {
  position: relative;
}
.dot--live::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.6;
  animation: ls-ping 2.4s var(--e-out) infinite;
}
@keyframes ls-ping {
  0% {
    transform: scale(0.7);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Synthetic-data notice — legally required on every demo surface. */
.synthetic-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.875rem 1.125rem;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--amber-bright) 38%, transparent);
  background: color-mix(in srgb, var(--amber-bright) 10%, transparent);
  color: var(--body);
  font-size: var(--t-xs);
  line-height: 1.55;
}
.synthetic-note strong {
  color: var(--amber);
  font-weight: 600;
}
.band--light .synthetic-note strong {
  color: #8a5d05;
}

/* Unresolved founder input — visible in development, never a fabricated fact. */
.placeholder-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-xs);
  border: 1px dashed color-mix(in srgb, var(--amber-bright) 55%, transparent);
  background: color-mix(in srgb, var(--amber-bright) 10%, transparent);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.band--light .placeholder-flag {
  color: #8a5d05;
}

/* ==========================================================================
   9. THE ROUTING LANGUAGE — records, owners, handoffs, exceptions
   ========================================================================== */

/* One visible operational record. */
.record {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-card);
}
.record__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.record__id {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.record__rows {
  display: grid;
  gap: 0;
}
.record__row {
  display: grid;
  grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: 0.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  align-items: baseline;
}
.record__row:first-child {
  border-top: 0;
}
.record__key {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.record__val {
  color: var(--ink);
  font-weight: 500;
}

/* Owner chip — every automated step names a human. */
.owner {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--t-xs);
  color: var(--body);
}
.owner__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-card-3);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  flex: none;
}

/* Step rail — trigger → action → record → owner → exception → outcome */
.rail {
  display: grid;
  gap: 0;
  position: relative;
}
.rail__step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  position: relative;
}
.rail__step + .rail__step::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.rail__marker {
  position: relative;
  z-index: 1;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  flex: none;
}
.rail__step[data-state='active'] .rail__marker {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff; /* solid blue plate: 5.1:1 on either band. A 22% tint of blue on a
                  light band left white-on-near-white at 1.07:1. */
}
.rail__step[data-state='human'] .rail__marker {
  border-color: color-mix(in srgb, var(--amber-bright) 60%, transparent);
  background: color-mix(in srgb, var(--amber-bright) 18%, var(--bg));
  color: var(--amber);
}
.rail__step[data-state='done'] .rail__marker {
  border-color: color-mix(in srgb, var(--ok) 55%, transparent);
  color: var(--ok-hi);
}
.rail__title {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--t-sm);
}
.rail__meta {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rail__body {
  font-size: var(--t-sm);
  color: var(--body);
  margin-top: 0.35rem;
}

/* Simulated application surface — the "system panel". */
/* A .panel is ALWAYS dark, even inside a light band — it is a simulated app
   window. That makes it a dark island, so it must re-point the theme tokens for
   its own subtree. Without this, copy inside a panel on a light page inherits
   light-mode ink and renders near-black on near-black (measured 1.01:1). */
.panel {
  --bg: var(--surface-1);
  --bg-card: var(--surface-1);
  --bg-card-2: var(--surface-2);
  --bg-card-3: var(--surface-3);
  --ink: var(--d-ink, #fff);
  --body: #a9b6c3;
  --muted: #9aa7b5;
  --faint: #8593a1;
  --line: rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.055);
  --line-strong: rgba(255, 255, 255, 0.16);
  --link: #4fa9f5;
  --accent: #7ce7f0;
  color: var(--body);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--surface-1);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
/* Inside a light band the aliases above are overridden by the band rule, so the
   panel restates the dark values explicitly for its own contents. */
.band--light .panel {
  --ink: #ffffff;
  --body: #a9b6c3;
  --muted: #9aa7b5;
  --faint: #8593a1;
  --cyan-hi: #7ce7f0;
  --blue-hi: #4fa9f5;
  --amber-soft: #f5cd86;
  --ok-hi: #4fd39a;
}
.panel__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--d-line);
  background: var(--surface-2);
  color: var(--d-muted);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.panel__lights {
  display: flex;
  gap: 6px;
}
.panel__lights i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--d-faint);
  display: block;
}
.panel__body {
  padding: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  color: var(--d-body);
}

/* Data tiles */
.tile {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-card);
  display: grid;
  gap: 0.35rem;
  align-content: start;
}
.tile__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tile__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tile__note {
  font-size: var(--t-xs);
  color: var(--muted);
}

.panel .badge--blue {
  color: #4fa9f5;
  border-color: color-mix(in srgb, #1077d7 45%, transparent);
  background: color-mix(in srgb, #1077d7 14%, transparent);
}
.panel .badge--amber,
.panel .badge--human {
  color: #e7a63a;
  border-color: color-mix(in srgb, #e7a63a 42%, transparent);
  background: color-mix(in srgb, #e7a63a 13%, transparent);
}
.panel .badge--ok {
  color: #4fd39a;
  border-color: color-mix(in srgb, #2fa572 42%, transparent);
  background: color-mix(in srgb, #2fa572 13%, transparent);
}

/* ==========================================================================
   9b. THE DIAGRAM KIT — shared graphic vocabulary
   --------------------------------------------------------------------------
   Every bespoke diagram on the site MUST be built from these primitives so no
   page's graphics look weaker than another's. Reuse before inventing: if a new
   diagram needs a shape that isn't here, add it here once rather than
   hand-rolling a one-off in a page stylesheet.

   Geometry contract (matches the brand mark, viewBox units):
     channel stroke      2.5 (light band) / 2 (dark band), round caps
     output stroke       3
     port radius         4
     node radius         17, with rings at 32 and 44
     human/exception     amber, 2px dashed 4 4
     label type          IBM Plex Mono 10.5, letter-spacing 1.4
     corner radius       10 on plates, 6 on chips
   ========================================================================== */

/* Plate the diagram sits on — gives every figure the same weight and padding. */
.figure {
  position: relative;
  padding: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.figure--flush {
  padding: 0;
}
.figure--plain {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
.figure__cap {
  margin-top: 0.875rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--muted);
}
.figure__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* Fade cue so a horizontally scrolling diagram never looks truncated. */
.figure__scroll::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bg-card));
}

/* SPECIFICITY CONTRACT (learned the hard way — twice):
   Base marks are wrapped in :where() so they are zero-specificity DEFAULTS a page
   can always override. Role modifiers are self-chained to (0,2,0) so a page rule
   like `.band--light .dg-label` cannot silently flatten `.dg-label--human` back to
   body colour — which is exactly what happened on solutions.html, and which the
   contrast auditor cannot detect (it reads SVG text against the nearest DOM
   background, so reversed type on a filled shape looks fine either way).
   Colour belongs in the --rf-* variables, which re-point per band. Pages should
   NOT write `.band--light .dg-*` descendant overrides at all. */
/* SVG primitives — apply these classes inside any diagram. */
:where(.dg-channel) {
  fill: none;
  stroke: var(--rf-ch-1);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.band--dark .dg-channel {
  stroke-width: 2;
}
:where(.dg-output) {
  fill: none;
  stroke: var(--rf-out);
  stroke-width: 3;
  stroke-linecap: round;
}
:where(.dg-port) {
  fill: var(--rf-port);
}
:where(.dg-node) {
  fill: var(--rf-node-1);
}
:where(.dg-ring) {
  fill: none;
  stroke: var(--rf-ring);
  stroke-width: 1;
  stroke-opacity: 0.45;
}
/* Amber = a person is required here. Never decorative. */
.dg-human.dg-human {
  fill: none;
  stroke: var(--rf-amber-deco);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}
.dg-human-dot.dg-human-dot {
  fill: var(--rf-amber-deco);
}
:where(.dg-label) {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  fill: var(--rf-label);
  text-transform: uppercase;
}
.dg-label--accent.dg-label--accent {
  fill: var(--rf-out);
}
.dg-label--human.dg-label--human {
  fill: var(--rf-amber);
}
:where(.dg-plate) {
  fill: var(--bg-card-2);
  stroke: var(--line-strong);
  stroke-width: 1;
}
.dg-plate--active.dg-plate--active {
  fill: color-mix(in srgb, var(--blue) 12%, var(--bg-card));
  stroke: color-mix(in srgb, var(--blue) 45%, transparent);
}
.dg-plate--human.dg-plate--human {
  fill: color-mix(in srgb, var(--amber-bright) 12%, var(--bg-card));
  stroke: color-mix(in srgb, var(--amber-bright) 45%, transparent);
}
.dg-plate-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  fill: var(--ink);
}
.dg-plate-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--muted);
}
/* ---- Extended primitives, promoted from page-home.css so every page shares
   one vocabulary instead of re-inventing these locally. Same geometry
   contract as the base marks above. ---- */
.dg-channel--soft.dg-channel--soft {
  stroke: var(--rf-ch-0);
}
.dg-channel--hi.dg-channel--hi {
  stroke: var(--rf-ch-2);
}
:where(.dg-hair) {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-linecap: round;
}
.dg-hair-f.dg-hair-f {
  fill: var(--line-strong);
}
.dg-output-f.dg-output-f {
  fill: var(--rf-out);
}
.dg-ring--outer.dg-ring--outer {
  stroke-width: 1.25;
  stroke-opacity: 0.26;
}
.dg-bar {
  fill: var(--rf-ch-2);
  fill-opacity: 0.3;
}
.dg-bar--human.dg-bar--human {
  fill: var(--amber);
  fill-opacity: 0.92;
}
.dg-gate {
  fill: var(--rf-ch-2);
}
.dg-gate--human.dg-gate--human {
  fill: var(--amber);
}
.dg-plate--quiet.dg-plate--quiet {
  fill: var(--bg-card-2);
}
.dg-pulse {
  fill: none;
  stroke: var(--rf-ch-2);
  stroke-width: 2;
  stroke-opacity: 0.3;
}
.dg-tick {
  fill: none;
  stroke: var(--rf-ch-1);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A packet travelling a channel. Pair with offset-path in the page CSS. */
.dg-packet {
  fill: var(--rf-ch-1);
  offset-rotate: 0deg;
  animation: ls-travel 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .dg-packet {
    display: none;
  }
}

/* ==========================================================================
   10. FORMS
   ========================================================================== */

.field {
  display: grid;
  gap: 0.4rem;
}
.field__label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}
.field__hint {
  font-size: var(--t-xs);
  color: var(--muted);
}
.field__error {
  display: none;
  font-size: var(--t-xs);
  color: var(--err-hi);
  font-weight: 500;
}
.band--light .field__error {
  color: #a4181c;
}
.field[data-invalid='true'] .field__error {
  display: block;
}
.field__req {
  color: var(--amber);
  font-weight: 600;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.8125rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--bg-card-2);
  color: var(--ink);
  font-size: var(--t-sm);
  transition:
    border-color var(--d-2) var(--e-out),
    box-shadow var(--d-2) var(--e-out),
    background var(--d-2) var(--e-out);
}
.textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.6;
}
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--faint);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--blue-hi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 26%, transparent);
}
.band--light .input:focus,
.band--light .select:focus,
.band--light .textarea:focus {
  border-color: var(--blue);
}
.field[data-invalid='true'] .input,
.field[data-invalid='true'] .select,
.field[data-invalid='true'] .textarea {
  border-color: var(--err-hi);
}

.check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  font-size: var(--t-sm);
  color: var(--body);
  cursor: pointer;
  min-height: 44px;
  align-content: center;
}
.check input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

/* Range control — used by the sizing tools. */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-card-3);
}
.range::-moz-range-track {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-card-3);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  box-shadow: 0 2px 10px rgba(16, 119, 215, 0.45);
}
.range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
}
.range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 35%, transparent);
}

/* Segmented control / tabs */
.segmented {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-card-2);
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar {
  display: none;
}
.segmented__btn {
  min-height: 40px;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition:
    background var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out);
}
.segmented__btn:hover {
  color: var(--ink);
}
.segmented__btn[aria-selected='true'],
.segmented__btn[aria-pressed='true'] {
  background: var(--bg-card-3);
  color: var(--ink);
}

/* ==========================================================================
   11. NAVIGATION
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition:
    background var(--d-3) var(--e-out),
    border-color var(--d-3) var(--e-out);
}
.nav[data-scrolled='true'] {
  background: color-mix(in srgb, var(--void) 94%, transparent);
  border-bottom-color: var(--d-line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: var(--nav-h);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex: none;
  padding-block: 0.5rem;
}
.nav__brand svg {
  height: 26px;
  width: auto;
}
.nav__wordmark {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  color: #fff;
  white-space: nowrap;
}
.nav__wordmark b {
  font-weight: 600;
}
.nav__wordmark span {
  font-weight: 400;
  opacity: 0.82;
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: var(--r-sm);
  color: var(--d-body);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--d-2) var(--e-out),
    background var(--d-2) var(--e-out);
}
.nav__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.nav__link[aria-current='page'] {
  color: #fff;
}
.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 6px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--cyan-hi);
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}

/* ---- EN / ES language switch -------------------------------------------
   The Spanish edition ships as real pages under /es/ with their own <html lang>
   and hreflang alternates, so this is a pair of LINKS between two URLs — not a
   JS text-swap over the English DOM. Until the Spanish edition is published the
   whole control is hidden by the flag on <html data-i18n>, so no dead link ever
   ships; enabling it is one attribute change.                              */
.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-pill);
  border: 1px solid var(--d-line-strong);
  background: rgba(255, 255, 255, 0.04);
}
html:not([data-i18n='on']) .lang-switch {
  display: none;
}
.lang-switch__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 34px;
  padding: 0 0.5rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--d-muted);
  text-decoration: none;
  transition:
    background var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out);
}
.lang-switch__opt:hover {
  color: #fff;
}
.lang-switch__opt[aria-current='true'] {
  background: color-mix(in srgb, var(--blue) 24%, transparent);
  color: #fff;
}
/* In the mobile drawer the switch sits full-width above the CTA. */
.nav__drawer .lang-switch {
  align-self: flex-start;
  margin-top: var(--s-6);
}
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--d-line-strong);
  color: #fff;
}

/* Dropdown */
.nav__group {
  position: relative;
}
.nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: -0.5rem;
  min-width: 480px;
  padding: 0.75rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--d-line-strong);
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--d-2) var(--e-out),
    transform var(--d-2) var(--e-out),
    visibility var(--d-2);
}
.nav__group:hover .nav__panel,
.nav__group:focus-within .nav__panel,
.nav__panel[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__panel-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background var(--d-2) var(--e-out);
}
.nav__panel-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.nav__panel-title {
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 600;
}
.nav__panel-desc {
  color: var(--d-muted);
  font-size: var(--t-xs);
  line-height: 1.45;
}

/* Mobile drawer */
.nav__drawer {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 99;
  background: var(--void);
  padding: var(--s-6) var(--gutter) var(--s-12);
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: var(--s-2);
}
.nav__drawer[data-open='true'] {
  display: flex;
  animation: ls-drawer var(--d-3) var(--e-out);
}
@keyframes ls-drawer {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.nav__drawer a:not(.lang-switch__opt) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--d-line-soft);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.nav__drawer a.is-sub:not(.lang-switch__opt) {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 500;
  min-height: 48px;
  color: var(--d-body);
  padding-left: 1rem;
}
.nav__drawer-cta {
  margin-top: var(--s-6);
}

@media (max-width: 1080px) {
  .nav__menu {
    display: none;
  }
  .nav__toggle {
    display: grid;
  }
  .nav__actions .btn--primary {
    display: none;
  }
}

/* ==========================================================================
   11b. BRANDMARK ASSEMBLY — brand guide §8: routes draw in, node and output
   resolve, wordmark rises. ~1.3s, ease-out, plays once. Never loops, spins,
   bounces or glows. Reduced motion: completed lock-up appears immediately.
   ========================================================================== */

.brandmark__r1,
.brandmark__r2,
.brandmark__r3 {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: ls-mark-draw 0.55s var(--e-out) forwards;
}
.brandmark__r2 {
  animation-delay: 0.18s;
}
.brandmark__r3 {
  animation-delay: 0.34s;
}
.brandmark__ports {
  opacity: 0;
  animation: ls-mark-in 0.3s var(--e-out) 0.05s forwards;
}
.brandmark__node,
.brandmark__out {
  opacity: 0;
  animation: ls-mark-in 0.35s var(--e-out) 0.62s forwards;
}
.brandmark__word {
  opacity: 0;
  transform: translateY(5px);
  animation: ls-mark-rise 0.5s var(--e-out) 0.82s forwards;
}
@keyframes ls-mark-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ls-mark-in {
  to {
    opacity: 1;
  }
}
@keyframes ls-mark-rise {
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brandmark__r1,
  .brandmark__r2,
  .brandmark__r3 {
    stroke-dashoffset: 0;
    animation: none;
  }
  .brandmark__ports,
  .brandmark__node,
  .brandmark__out,
  .brandmark__word {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.footer {
  background: var(--void);
  color: var(--d-body);
  border-top: 1px solid var(--d-line);
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) var(--s-8);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}
.footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--d-muted);
  margin-bottom: var(--s-4);
}
.footer__links {
  display: grid;
  gap: 0.125rem;
}
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--d-body);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: color var(--d-2) var(--e-out);
}
.footer__links a:hover {
  color: #fff;
}
.footer__bottom {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: var(--s-6);
  border-top: 1px solid var(--d-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--d-muted);
}
.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}
.footer__legal-links a {
  color: var(--d-muted);
  text-decoration: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.footer__legal-links a:hover {
  color: #fff;
}
.footer__disclaimer {
  margin-top: var(--s-6);
  max-width: 92ch;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--d-faint);
}
@media (max-width: 900px) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   13. ATMOSPHERE — the light field behind dark sections
   ========================================================================== */

.atmos {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.atmos__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.atmos__glow--blue {
  background: radial-gradient(circle, rgba(16, 119, 215, 0.55), transparent 70%);
}
.atmos__glow--cyan {
  background: radial-gradient(circle, rgba(69, 183, 196, 0.42), transparent 70%);
}
.atmos__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%);
}
.band--light .atmos__grid {
  background-image:
    linear-gradient(to right, rgba(11, 18, 32, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 18, 32, 0.055) 1px, transparent 1px);
}
/* ---- Light-band atmosphere ------------------------------------------------
   Dark bands get depth from LUMINANCE (a glow emerging from black). That trick
   is unavailable on white, so light bands get depth from a soft tinted wash plus
   concentric rings instead — the same spatial cue, achieved subtractively.   */
.atmos__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 62% 22%, rgba(16, 119, 215, 0.15), transparent 62%),
    radial-gradient(ellipse 52% 48% at 18% 72%, rgba(69, 183, 196, 0.13), transparent 66%),
    linear-gradient(180deg, #ffffff 0%, var(--paper) 58%, #eef4f9 100%);
}
.atmos__rings {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(1500px, 130%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    transparent 0 58px,
    rgba(16, 119, 215, 0.055) 58px 59px
  );
  mask-image: radial-gradient(circle, #000 12%, transparent 66%);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 66%);
}
.atmos__noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---- Closing convergence ---------------------------------------------------
   The page ends the way the brand mark begins: separate channels arrive, meet at
   one governed node, and leave as a single output. Sits low in the final CTA
   band, behind the buttons, at low contrast — atmosphere, not a diagram. */
/* A BACKGROUND layer, not an object. It spans the whole band behind the copy at
   very low contrast — the convergence should be felt rather than read, the same
   way the grid and glow layers are. It must never add height to the band or
   compete with the CTA. */
.converge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  opacity: 0.22;
}
.converge svg {
  width: 150%;
  min-width: 1100px;
  max-width: none;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 35%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 35%, transparent 82%);
}
.converge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.converge__ch {
  fill: none;
  stroke: var(--cyan-hi);
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: 0.85;
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: cv-draw 1.6s var(--e-out) forwards;
  animation-delay: var(--d, 0ms);
}
.converge__out {
  fill: none;
  stroke: var(--blue-hi);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.9;
  /* Must be >= the path length (541 units). At 300 the dash pattern REPEATED,
     so the output line drew, stopped, and left a visible gap before its
     terminal node. */
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
  animation: cv-draw 1.1s var(--e-out) 1.15s forwards;
}
.converge__port {
  fill: var(--cyan-hi);
  r: 2.4;
  opacity: 0;
  animation: cv-in 0.4s var(--e-out) forwards;
  animation-delay: var(--d, 0ms);
}
.converge__node {
  fill: var(--blue-hi);
  opacity: 0;
  animation: cv-in 0.5s var(--e-out) 1.05s forwards;
}
.converge__ring {
  fill: none;
  stroke: var(--blue-hi);
  stroke-width: 1;
  opacity: 0;
  transform-origin: center;
  animation: cv-ring 3.2s var(--e-inout) 1.5s infinite;
}
@keyframes cv-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes cv-in {
  to {
    opacity: 1;
  }
}
@keyframes cv-ring {
  0%,
  100% {
    opacity: 0.32;
    transform: scale(1);
  }
  50% {
    opacity: 0.06;
    transform: scale(1.5);
  }
}
/* Reduced motion: the finished lock-up, no drawing and no pulse. */
@media (prefers-reduced-motion: reduce) {
  .converge__ch,
  .converge__out {
    stroke-dashoffset: 0;
    animation: none;
  }
  .converge__port,
  .converge__node {
    opacity: 1;
    animation: none;
  }
  .converge__ring {
    opacity: 0.3;
    animation: none;
  }
}
/* Light-band colourway: the same convergence, inked rather than glowing —
   cyan is illegal as line work on white at this weight, so it deepens to teal
   and the output takes the navy. */
.converge--light {
  opacity: 0.16;
}
.converge--light .converge__ch {
  stroke: #3aa7b6;
  opacity: 0.6;
}
.converge--light .converge__port {
  fill: #2f9aa8;
}
.converge--light .converge__out,
.converge--light .converge__ring {
  stroke: var(--blue-deep);
}
.converge--light .converge__node {
  fill: var(--blue-deep);
}
@media (max-width: 700px) {
  .converge {
    opacity: 0.15;
  }
  .converge--light {
    opacity: 0.12;
  }
}

/* Seam that fades a dark band into the next one. */
.atmos__fade-b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, var(--canvas));
}

/* ==========================================================================
   14. MOTION
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--d-5) var(--e-out),
    transform var(--d-5) var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
[data-reveal='fade'] {
  transform: none;
}
[data-reveal='left'] {
  transform: translateX(-22px);
}
[data-reveal='right'] {
  transform: translateX(22px);
}
[data-reveal='scale'] {
  transform: scale(0.97);
}

/* Stroke draw-on for routing diagrams. */
[data-draw] {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1.4s var(--e-out);
  transition-delay: var(--draw-delay, 0ms);
}
[data-draw].is-in {
  stroke-dashoffset: 0;
}

/* Travelling packet along a route. */
@keyframes ls-travel {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  8%,
  88% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
@keyframes ls-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -14px, 0);
  }
}
@keyframes ls-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}
@keyframes ls-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes ls-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Reduced motion: every animation resolves to its finished state. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-draw] {
    stroke-dashoffset: 0 !important;
  }
  .dot--live::after {
    display: none;
  }
}

/* ==========================================================================
   15. UTILITIES
   ========================================================================== */

.center {
  text-align: center;
}
.mx-auto {
  margin-inline: auto;
}
.relative {
  position: relative;
}
.full {
  width: 100%;
}
.nowrap {
  white-space: nowrap;
}
.hide {
  display: none !important;
}
.divider {
  height: 1px;
  background: var(--line);
  border: 0;
}
.gap-2 {
  gap: var(--s-2);
}
.gap-3 {
  gap: var(--s-3);
}
.gap-4 {
  gap: var(--s-4);
}
.gap-6 {
  gap: var(--s-6);
}
.mt-4 {
  margin-top: var(--s-4);
}
.mt-6 {
  margin-top: var(--s-6);
}
.mt-8 {
  margin-top: var(--s-8);
}
.mt-10 {
  margin-top: var(--s-10);
}
.mt-12 {
  margin-top: var(--s-12);
}
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
@media (min-width: 701px) {
  .only-mobile {
    display: none !important;
  }
}
@media (max-width: 700px) {
  .not-mobile {
    display: none !important;
  }
}
@media print {
  .nav,
  .footer,
  .atmos,
  [data-run-controls] {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}