/* AEL design system, edition 2026-09-27o: ael-system.20260927o.css

   Fifteenth edition of 27 September 2026: a solid colour under each light
   text or icon on a gradient, and motion that stops within five seconds, on
   top of the fourteenth edition's level featured card, the thirteenth's
   section header with no eyebrow and the earlier editions.

   One stylesheet for the four AEL sites. design/DESIGN.md (not served)
   documents every token and component. Copy this file byte for byte; never
   edit a copy. Any change gets a new dated file name, so a browser that holds
   an older copy never mixes it with newer pages.

   Light theme by owner direction (27 September 2026). No script, and nothing
   from another site: the three type families below are served from this host.
   Inter, Manrope and JetBrains Mono are licensed under the SIL Open Font
   License 1.1; the licence texts and their provenance are kept with the
   design sources. */

/* ==========================================================================
   1. Fonts (latin subsets only)
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Tokens
   Scales are built in OKLCH around the logo stops: cyan 600 = #0891B2,
   emerald 500 = #10B981, indigo 700 = #4338CA, ink 900 = #152634 and
   ink 800 = #283542. Contrast of every text pair is recorded in DESIGN.md.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Colour scales */
  --cyan-50: #F2FCFF;
  --cyan-100: #DCF5FE;
  --cyan-200: #B8EBFD;
  --cyan-300: #8BDBF6;
  --cyan-400: #5DC3E4;
  --cyan-500: #3AADCE;
  --cyan-600: #0891B2;
  --cyan-700: #0E7490;
  --cyan-800: #065B70;
  --cyan-900: #004658;
  --cyan-950: #002C38;

  --emerald-50: #EEFDF5;
  --emerald-100: #D7FAE8;
  --emerald-200: #B3F3D3;
  --emerald-300: #81E5B6;
  --emerald-400: #49D099;
  --emerald-500: #10B981;
  --emerald-600: #14976A;
  --emerald-700: #007A53;
  --emerald-800: #036041;
  --emerald-900: #004B31;
  --emerald-950: #002F1E;

  --indigo-50: #F7F8FF;
  --indigo-100: #EBEEFF;
  --indigo-200: #D6DCFE;
  --indigo-300: #B8C2FD;
  --indigo-400: #95A1FF;
  --indigo-500: #7780FD;
  --indigo-600: #5954F5;
  --indigo-700: #4338CA;
  --indigo-800: #362CA7;
  --indigo-900: #2B2585;
  --indigo-950: #1C195D;

  --ink-50: #F1F6FA;
  --ink-100: #E6EEF4;
  --ink-200: #CEDDEA;
  --ink-300: #B5C3D0;
  --ink-400: #8A9EB0;
  --ink-500: #687C8D;
  --ink-600: #4D6070;
  --ink-700: #364958;
  --ink-800: #283542;
  --ink-900: #152634;
  --ink-950: #0A1723;

  --neutral-0: #FFFFFF;
  --neutral-25: #FAFBFD;
  --neutral-50: #F6F8FB;
  --neutral-100: #F0F3F6;
  --neutral-200: #E1E7EC;
  --neutral-300: #D0D6DB;
  --neutral-400: #A4ACB3;
  --neutral-500: #777E85;
  --neutral-600: #5D646B;
  --neutral-700: #464D53;
  --neutral-800: #32393F;
  --neutral-900: #20262C;
  --neutral-950: #11171C;

  /* Support scale for warnings only */
  --amber-50: #FFF8EB;
  --amber-100: #FEEFCB;
  --amber-200: #FBDD98;
  --amber-300: #F6C65E;
  --amber-600: #B86E00;
  --amber-700: #955800;
  --amber-800: #7A4700;

  /* Semantic colours */
  --color-bg: var(--neutral-0);
  --color-bg-subtle: var(--neutral-50);
  --color-bg-muted: var(--neutral-100);
  --color-surface: var(--neutral-0);
  --color-surface-sunken: var(--neutral-50);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-text: var(--ink-900);
  --color-text-strong: var(--ink-950);
  --color-text-secondary: var(--ink-700);
  --color-muted: var(--ink-600);
  --color-link: var(--cyan-700);
  --color-link-hover: var(--cyan-800);
  --color-accent: var(--cyan-600);
  --color-accent-text: var(--cyan-700);
  --color-success-text: var(--emerald-700);
  --color-focus: var(--indigo-600);
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: var(--ink-200);
  --color-selection: var(--cyan-100);
  --header-bg: rgba(255, 255, 255, 0.86);

  /* Code */
  --code-bg: var(--ink-950);
  --code-bar: #101F2D;
  --code-fg: var(--ink-100);
  --code-muted: var(--ink-300);
  --code-comment: var(--ink-400);
  --code-keyword: var(--cyan-300);
  --code-string: var(--emerald-300);
  --code-type: var(--indigo-300);
  --code-number: var(--amber-300);
  --code-function: var(--indigo-200);

  /* Brand gradients */
  --gradient-brand: linear-gradient(90deg, #10B981 0%, #0891B2 50%, #4338CA 100%);
  --gradient-text: linear-gradient(90deg, var(--emerald-700) 0%, var(--cyan-700) 45%, var(--indigo-700) 100%);
  --gradient-action: linear-gradient(135deg, var(--cyan-700) 0%, var(--indigo-700) 55%, var(--indigo-800) 100%);
  --gradient-tile: linear-gradient(135deg, var(--cyan-50) 0%, var(--indigo-50) 100%);
  --gradient-mesh:
    radial-gradient(42% 58% at 12% 18%, rgba(16, 185, 129, 0.16) 0%, rgba(16, 185, 129, 0) 70%),
    radial-gradient(38% 52% at 88% 12%, rgba(67, 56, 202, 0.14) 0%, rgba(67, 56, 202, 0) 70%),
    radial-gradient(46% 50% at 62% 92%, rgba(8, 145, 178, 0.14) 0%, rgba(8, 145, 178, 0) 70%),
    linear-gradient(180deg, var(--neutral-25) 0%, var(--neutral-0) 100%);
  --grid-line: rgba(21, 38, 52, 0.055);
  --grid-size: 3rem;

  /* Type */
  --font-display: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.375rem, 1.25rem + 0.55vw, 1.625rem);
  --text-3xl: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
  --text-4xl: clamp(1.875rem, 1.45rem + 1.9vw, 2.75rem);
  --text-5xl: clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem);
  --text-6xl: clamp(2.375rem, 1.4rem + 4.3vw, 4.25rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-display: -0.025em;
  --tracking-tight: -0.012em;
  --tracking-caps: 0.08em;

  /* Space (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-y: clamp(3.5rem, 2.25rem + 5vw, 7rem);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* Shadows (ink tinted) */
  --shadow-xs: 0 1px 2px rgba(21, 38, 52, 0.06);
  --shadow-sm: 0 1px 2px rgba(21, 38, 52, 0.06), 0 2px 6px rgba(21, 38, 52, 0.06);
  --shadow-md: 0 2px 4px -1px rgba(21, 38, 52, 0.06), 0 8px 20px -6px rgba(21, 38, 52, 0.12);
  --shadow-lg: 0 4px 8px -2px rgba(21, 38, 52, 0.06), 0 18px 36px -10px rgba(21, 38, 52, 0.16);
  --shadow-xl: 0 8px 16px -6px rgba(21, 38, 52, 0.10), 0 32px 64px -20px rgba(21, 38, 52, 0.28);
  --shadow-brand: 0 10px 28px -12px rgba(8, 145, 178, 0.55), 0 4px 12px -6px rgba(67, 56, 202, 0.40);

  /* Layout */
  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 76rem;
  --container-2xl: 88rem;
  --measure: 68ch;
  --gutter: 1rem;
  --header-h: 4rem;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 320ms;

  /* Layers */
  --z-header: 50;
  --z-menu: 55;
  --z-skip: 100;
}

@media (min-width: 48rem) {
  :root { --gutter: 1.5rem; }
}

@media (min-width: 64rem) {
  :root { --gutter: 2rem; }
}

/* Dark preference: the system keeps its light theme (owner direction,
   27 September 2026) and dims it. Page and surfaces step down from pure white
   to reduce glare; every text pair stays AA (see DESIGN.md). */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
    --color-bg: var(--neutral-50);
    --color-bg-subtle: var(--neutral-100);
    --color-bg-muted: #E8EDF1;
    --color-surface: #FBFCFD;
    --color-surface-sunken: var(--neutral-100);
    --header-bg: rgba(246, 248, 251, 0.88);
    --gradient-mesh:
      radial-gradient(42% 58% at 12% 18%, rgba(16, 185, 129, 0.13) 0%, rgba(16, 185, 129, 0) 70%),
      radial-gradient(38% 52% at 88% 12%, rgba(67, 56, 202, 0.12) 0%, rgba(67, 56, 202, 0) 70%),
      radial-gradient(46% 50% at 62% 92%, rgba(8, 145, 178, 0.12) 0%, rgba(8, 145, 178, 0) 70%),
      linear-gradient(180deg, var(--neutral-100) 0%, var(--neutral-50) 100%);
  }
}

/* ==========================================================================
   3. Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-4);
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

/* Manrope's tight display tracking narrows the word space too; open it
   again so that "AEL Cloud" never reads as one word. */
h1 { font-size: var(--text-5xl); word-spacing: 0.06em; }
h2 { font-size: var(--text-4xl); word-spacing: 0.06em; }
h3 { font-size: var(--text-xl); font-weight: 700; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
h5,
h6 { font-size: var(--text-base); font-weight: 700; line-height: var(--leading-snug); letter-spacing: 0; }

p,
ul,
ol,
dl,
blockquote,
figure,
table,
pre {
  margin: 0 0 var(--space-4);
}

p { text-wrap: pretty; }

strong,
b { font-weight: 600; color: var(--color-text-strong); }

small { font-size: var(--text-sm); }

a {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(14, 116, 144, 0.45);
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

::selection {
  background: var(--color-selection);
  color: var(--ink-950);
}

hr {
  height: 1px;
  margin: var(--space-12) 0;
  border: 0;
  background: var(--color-border);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-variant-ligatures: none;
}

:not(pre) > code {
  padding: 0.12em 0.38em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-bg-subtle);
  color: var(--ink-800);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}

kbd {
  display: inline-block;
  padding: 0.05em 0.4em;
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--ink-800);
  font-size: 0.8em;
  line-height: 1.5;
}

abbr[title] { text-decoration: underline dotted; cursor: help; }

/* ==========================================================================
   4. Accessibility helpers
   ========================================================================== */

.skip {
  position: absolute;
  top: -4rem;
  left: var(--space-3);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--ink-900);
  color: var(--color-on-dark);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--duration) var(--ease-out);
}

.skip:focus,
.skip:focus-visible {
  top: var(--space-3);
  color: var(--color-on-dark);
  outline-color: var(--cyan-300);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container-xl) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: calc(var(--container-md) + 2 * var(--gutter)); }
.container--medium { max-width: calc(var(--container-lg) + 2 * var(--gutter)); }
.container--wide { max-width: calc(var(--container-2xl) + 2 * var(--gutter)); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }

.section--subtle {
  border-block: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

/* Section header: the one heading pattern of a section on all four sites.
   The h2, an optional lede and optional links, always aligned to the start
   of the container (there is no centred variant), with no icon tile and no
   eyebrow label above the title. It heads a plain section and a split's
   content column; a rail's heading column follows the same rules, and only
   a numbered rail's CSS-generated index stands above its title.
   DESIGN.md 6.9. */
.section-header {
  max-width: 46rem;
  margin-bottom: var(--space-12);
}

.section-header > :last-child { margin-bottom: 0; }

/* In a split the content that follows keeps its own top margin. */
.split__content > .section-header { margin-bottom: 0; }

.section-title {
  margin-bottom: var(--space-4);
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.lede {
  max-width: 42rem;
  color: var(--color-text-secondary);
  font-size: clamp(var(--text-md), 1rem + 0.35vw, var(--text-xl));
  line-height: var(--leading-normal);
}

.muted { color: var(--color-muted); }

.measure { max-width: var(--measure); }

.text-center { text-align: center; }

.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.stack > * { margin-block: 0; }
.stack > * + * { margin-top: var(--space-4); }

/* ==========================================================================
   6. Icons
   ========================================================================== */

.icon {
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.5rem; height: 1.5rem; }

.icon-tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--cyan-100);
  border-radius: var(--radius-md);
  background: var(--gradient-tile);
  color: var(--cyan-700);
}

.icon-tile .icon { width: 1.375rem; height: 1.375rem; }

.icon-tile--emerald {
  border-color: var(--emerald-100);
  background: linear-gradient(135deg, var(--emerald-50) 0%, var(--cyan-50) 100%);
  color: var(--emerald-700);
}

.icon-tile--indigo {
  border-color: var(--indigo-100);
  background: linear-gradient(135deg, var(--indigo-50) 0%, var(--cyan-50) 100%);
  color: var(--indigo-700);
}

.icon-tile--solid {
  border-color: transparent;
  background: var(--gradient-action);
  /* The gradient's first stop, solid under it, in case it is not painted. */
  background-color: var(--cyan-700);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-brand);
}

/* ==========================================================================
   7. Site header, navigation and the CSS-only menu
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--color-border);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.8) blur(14px);
  backdrop-filter: saturate(1.8) blur(14px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--color-surface); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand:hover { color: var(--color-text-strong); }

.brand img,
.brand__mark {
  width: 2.125rem;
  height: auto;
}

.brand__product {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.site-nav { display: none; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.site-nav a:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-strong);
}

.site-nav a[aria-current="page"],
.site-nav a[aria-current="true"] {
  color: var(--color-text-strong);
  font-weight: 600;
}

.site-nav a[aria-current="page"]::after,
.site-nav a[aria-current="true"]::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: -0.55rem;
  left: 0.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-brand);
}

/* The right of the header: the site switcher (the four AEL sites as quiet
   text links, the current one marked with aria-current="true"), a hairline,
   and the one primary button, the same on every site. */
.header-actions {
  display: none;
  align-items: center;
  gap: var(--space-4);
}

.site-switch ul {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0 var(--space-4) 0 0;
  border-right: 1px solid var(--color-border);
  list-style: none;
}

.site-switch a {
  display: block;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.site-switch a:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-strong);
}

.site-switch a[aria-current="true"] {
  color: var(--color-text-strong);
  font-weight: 600;
}

/* The full header needs about 1180px on the widest site navigation (the
   documentation), so it shows from 1280px; below that the menu holds it. */
@media (min-width: 80rem) {
  .site-nav { display: block; }
  .header-actions { display: flex; }
  .brand { margin-right: var(--space-6); }
  .site-nav { margin-right: auto; }
}

/* Mobile menu: <details class="menu"> with a <summary> toggle. */
.menu { flex: none; }

@media (min-width: 80rem) {
  .menu { display: none; }
}

.menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-strong);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.menu__toggle::-webkit-details-marker { display: none; }
.menu__toggle::marker { content: ""; }

.menu__toggle:hover {
  border-color: var(--ink-300);
  background: var(--color-bg-subtle);
}

.menu__icon {
  position: relative;
  display: inline-block;
  width: 1.125rem;
  height: 0.875rem;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transition: border-color var(--duration) ease;
}

.menu__icon::before,
.menu__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin-top: -1px;
  border-top: 2px solid currentColor;
  transition: transform var(--duration) var(--ease-out);
}

.menu[open] .menu__icon { border-color: transparent; }
.menu[open] .menu__icon::before { transform: rotate(45deg); }
.menu[open] .menu__icon::after { transform: rotate(-45deg); }

.menu__panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: var(--z-menu);
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  padding: var(--space-4) var(--gutter) var(--space-6);
  overflow-y: auto;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

/* From 768px the menu opens as a panel under its toggle, not across the
   whole width. */
@media (min-width: 48rem) {
  .menu__panel {
    top: calc(100% + var(--space-2));
    right: var(--gutter);
    left: auto;
    width: 24rem;
    max-height: calc(100vh - var(--header-h) - var(--space-4));
    max-height: calc(100dvh - var(--header-h) - var(--space-4));
    padding: var(--space-4) var(--space-5) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }
}

.menu__panel ul {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.menu__panel li + li { border-top: 1px solid var(--color-border); }

.menu__panel nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding: var(--space-2) var(--space-1);
  color: var(--color-text-strong);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
}

.menu__panel nav a::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid var(--ink-400);
  border-right: 2px solid var(--ink-400);
  transform: rotate(45deg);
}

.menu__panel nav a[aria-current="page"],
.menu__panel nav a[aria-current="true"] { color: var(--color-link); font-weight: 600; }

/* The site switcher inside the menu: a label, then the four sites as a
   two-column grid of tiles. */
.menu__label {
  margin: var(--space-2) 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.menu__panel .menu__sites {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.menu__panel .menu__sites li + li { border-top: 0; }

.menu__panel .menu__sites a {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}

.menu__panel .menu__sites a[aria-current="true"] {
  border-color: var(--cyan-300);
  background: var(--cyan-50);
  color: var(--cyan-800);
}

/* ==========================================================================
   8. Buttons and action links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  background-origin: border-box;
  box-shadow: var(--shadow-xs);
  color: var(--color-text-strong);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) ease,
    background-position var(--duration-slow) var(--ease-out),
    border-color var(--duration-fast) ease,
    box-shadow var(--duration) ease,
    color var(--duration-fast) ease,
    transform var(--duration) var(--ease-out);
}

.btn:hover {
  border-color: var(--ink-300);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-strong);
}

.btn:active { transform: translateY(1px); }

.btn .icon { width: 1.125rem; height: 1.125rem; }

.btn--primary {
  border-color: transparent;
  background-color: var(--cyan-700);
  background-image: var(--gradient-action);
  background-size: 180% 100%;
  background-position: 0% 50%;
  box-shadow: var(--shadow-brand);
  color: var(--color-on-dark);
}

.btn--primary:hover {
  border-color: transparent;
  background-color: var(--indigo-700);
  background-position: 100% 50%;
  color: var(--color-on-dark);
}

.btn--dark {
  border-color: var(--ink-900);
  background-color: var(--ink-900);
  color: var(--color-on-dark);
}

.btn--dark:hover {
  border-color: var(--ink-800);
  background-color: var(--ink-800);
  color: var(--color-on-dark);
}

.btn--ghost {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  color: var(--color-link);
}

.btn--ghost:hover {
  border-color: transparent;
  background-color: var(--cyan-50);
  color: var(--color-link-hover);
}

.btn--on-dark {
  border-color: #FFFFFF;
  background-color: #FFFFFF;
  color: var(--ink-900);
}

.btn--on-dark:hover {
  border-color: var(--cyan-50);
  background-color: var(--cyan-50);
  color: var(--ink-950);
}

.btn--outline-on-dark {
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  color: var(--color-on-dark);
}

.btn--outline-on-dark:hover {
  border-color: rgba(255, 255, 255, 0.75);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-on-dark);
}

.btn--sm {
  min-height: 2.25rem;
  padding: 0.4rem 0.8rem;
  font-size: var(--text-sm);
}

.btn--lg {
  min-height: 3.25rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
}

.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;
}

.link-arrow::after {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration) var(--ease-out);
}

.link-arrow:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.link-arrow:hover::after { transform: translateX(3px) rotate(45deg); }

/* ==========================================================================
   9. Badges, tags and pills
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  margin: 0 0 var(--space-5);
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  color: var(--color-text-strong);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

.badge--launch {
  border-color: var(--cyan-200);
  background: linear-gradient(90deg, var(--emerald-50) 0%, var(--cyan-50) 50%, var(--indigo-50) 100%);
}

.badge__dot {
  position: relative;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.tag--cyan { border-color: var(--cyan-200); background: var(--cyan-50); color: var(--cyan-800); }
.tag--emerald { border-color: var(--emerald-200); background: var(--emerald-50); color: var(--emerald-800); }
.tag--indigo { border-color: var(--indigo-200); background: var(--indigo-50); color: var(--indigo-800); }
.tag--amber { border-color: var(--amber-200); background: var(--amber-50); color: var(--amber-800); }

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.35;
}

.pill .icon { width: 1rem; height: 1rem; color: var(--cyan-700); }

.pill::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--gradient-brand);
}

.pill:has(> .icon)::before { display: none; }

.fact-row + .pill-row,
.pill-row + .fact-row { margin-top: var(--space-6); }

/* ==========================================================================
   10. Hero, page header and backdrops
   ========================================================================== */

.hero,
.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero {
  padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem) clamp(3.5rem, 2rem + 5vw, 6.5rem);
}

.hero--mesh::before,
.page-header--mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--gradient-mesh);
}

.hero--mesh::after,
.hero--grid::after,
.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 20%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 20%, #000 30%, transparent 100%);
  pointer-events: none;
}

.hero--grid { background: linear-gradient(180deg, var(--neutral-25) 0%, var(--color-bg) 100%); }

.hero__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

.hero__content { min-width: 0; }

.hero__title {
  margin-bottom: var(--space-5);
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  word-spacing: 0.08em;
}

.hero__lede {
  max-width: 38rem;
  margin-bottom: 0;
  color: var(--color-text-secondary);
  font-size: clamp(var(--text-md), 1rem + 0.45vw, 1.3125rem);
  line-height: var(--leading-normal);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero__note {
  margin: var(--space-5) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.hero__visual {
  position: relative;
  min-width: 0;
}

.hero__visual::before {
  content: "";
  position: absolute;
  inset: 10% 4% -4% 8%;
  z-index: -1;
  border-radius: 40px;
  background: var(--gradient-brand);
  opacity: 0.22;
  filter: blur(48px);
}

.hero--center .hero__content {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}

.hero--center .hero__lede { margin-inline: auto; }
.hero--center .hero__actions { justify-content: center; }
.hero--center .hero__visual { max-width: 60rem; margin-inline: auto; width: 100%; }

@media (min-width: 64rem) {
  .hero--split .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
}

@media (max-width: 29.99rem) {
  .hero__actions .btn { width: 100%; }
}

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--cyan-700);
  -webkit-text-fill-color: transparent;
}

.page-header {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--neutral-25) 0%, var(--color-bg) 100%);
}

.page-header h1 {
  max-width: 50rem;
  margin-bottom: var(--space-4);
  font-size: var(--text-5xl);
}

.page-header .lede { margin-bottom: 0; }

/* ==========================================================================
   11. Product visuals (decorative: aria-hidden, with approved labels)
   ========================================================================== */

/* A decorative visual only repeats what the section beside it says. Below
   768px it would stack under that text and push the next section down by
   most of a screen, so it is left out. Mark only a visual whose whole
   content is aria-hidden: a code window or code block is content and stays. */
@media (max-width: 47.99rem) {
  .hero__visual--decorative,
  .split__visual--decorative { display: none; }
}

.window {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(21, 38, 52, 0.12);
  border-radius: var(--radius-xl);
  background: var(--code-bg);
  box-shadow: var(--shadow-xl);
  color: var(--code-fg);
}

.window__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--code-bar);
  color: var(--code-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.35;
}

.window__bar::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 2.4rem;
  border-radius: 50%;
  background: var(--emerald-400);
  box-shadow: 1rem 0 0 var(--cyan-400), 2rem 0 0 var(--indigo-400);
}

.window pre,
.window__body {
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-6);
  overflow-x: auto;
  color: var(--code-fg);
  font-size: 0.8125rem;
  line-height: 1.75;
  tab-size: 4;
}

@media (min-width: 48rem) {
  .window pre { font-size: 0.875rem; }
}

.window pre:focus-visible { outline-color: var(--cyan-300); outline-offset: -3px; }

/* A code window, and a code block marked code-block--wrap (the Website's
   short samples): where the frame is narrower than a line (phones, and the
   split hero at about 1024px), the line wraps instead of running out of the
   frame, and each wrapped part is indented ten characters under its line (a
   hanging indent), so it never reads as a new line. Where every line fits,
   nothing changes. Below 480px the code is set at 11px and the title bar's
   dots are smaller, so the preview label stays on one line from 360px; a
   code block's language tag is left out there for the same reason. The
   documentation's code blocks keep their lines and scroll. */
.window pre,
.code-block.code-block--wrap pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-indent: 10ch hanging each-line;
}

@media (max-width: 29.99rem) {
  .window__bar {
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }

  .window__bar::before {
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 1.5rem;
    box-shadow: 0.75rem 0 0 var(--cyan-400), 1.5rem 0 0 var(--indigo-400);
  }

  .window pre,
  .code-block.code-block--wrap pre {
    padding-inline: 0.875rem;
    font-size: 0.6875rem;
  }

  .code-block--wrap .code-block__label { padding-inline: var(--space-3); }
  .code-block--wrap .code-block__label[data-lang]::after { display: none; }
}

/* A small labelled card that overlaps the top or bottom edge of a visual,
   from 768px. Its text is an approved label (title and one short line),
   never a placeholder. It stays inside the visual's width, inset like the
   panel's content, so it never reaches past the container, and a panel it
   overlaps keeps room for it, so it covers no row. */
.float-card {
  position: absolute;
  z-index: 2;
  display: none;
  align-items: center;
  gap: var(--space-3);
  max-width: 17rem;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.float-card--top { top: -1.5rem; right: var(--space-6); }
.float-card--bottom { right: var(--space-6); bottom: -1.75rem; }
.float-card--left { right: auto; left: var(--space-6); }

@media (min-width: 48rem) {
  .float-card { display: flex; }

  /* Room for the part of the card inside the panel, and a gap beside the
     last row. */
  .panel:has(~ .float-card--bottom) { padding-bottom: 3.75rem; }
  .panel:has(~ .float-card--top) { padding-top: 3.75rem; }
}

.float-card__text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  margin: 0;
  line-height: 1.3;
}

.float-card__text strong { font-size: var(--text-sm); }

.float-card__text span {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.panel {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.panel--tinted {
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(67, 56, 202, 0.08) 0%, rgba(67, 56, 202, 0) 70%),
    radial-gradient(70% 60% at 0% 100%, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0) 70%),
    var(--color-surface);
}

/* The panel's title line: a short label and the status tag it sits under
   ("Coming with the beta"). */
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-5);
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
}

.panel__head .tag { font-family: var(--font-sans); letter-spacing: 0.02em; }

/* Labelled rows: an icon tile, a title and one short line of detail. */
.panel__list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.panel__row > .icon-tile { flex: none; }

.panel__text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.panel__title {
  color: var(--color-text-strong);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.35;
}

.panel__meta {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* Hub diagram: labelled nodes around a core node, joined by connectors
   drawn in an inline SVG behind them. From 480px the nodes sit on a 3 x 3
   grid (core in the centre; satellites --tl, --t, --tr, --bl, --b, --br);
   below it they stack in two columns, core first, without connectors. The
   connectors stretch with the grid (preserveAspectRatio="none") and keep
   their stroke width (vector-effect). */
.hub { position: relative; }

.hub__nodes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

.hub__node--core {
  grid-column: 1 / -1;
  order: -1;
  border-color: var(--cyan-600);
  box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.12), var(--shadow-md);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  word-spacing: 0.06em;
}

.hub__node .tag { margin-top: var(--space-1); }

.hub__lines { display: none; }

@media (max-width: 29.99rem) {
  .hub__nodes > .hub__node:last-child:nth-child(even) { grid-column: 1 / -1; }
}

@media (min-width: 30rem) {
  .hub__nodes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-10) var(--space-3);
  }

  .hub__node--core { grid-column: 2; grid-row: 2; order: 0; }
  .hub__node--tl { grid-column: 1; grid-row: 1; }
  .hub__node--t { grid-column: 2; grid-row: 1; }
  .hub__node--tr { grid-column: 3; grid-row: 1; }
  .hub__node--bl { grid-column: 1; grid-row: 3; }
  .hub__node--b { grid-column: 2; grid-row: 3; }
  .hub__node--br { grid-column: 3; grid-row: 3; }

  .hub__lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
}

.hub__line {
  fill: none;
  stroke: var(--ink-200);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.hub__flow {
  fill: none;
  stroke: var(--cyan-600);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-dasharray: 3 9;
  vector-effect: non-scaling-stroke;
}

/* ==========================================================================
   12. Capability strip
   ========================================================================== */

.capability-strip {
  padding-block: var(--space-10);
  border-block: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.capability-strip__label {
  margin: 0 0 var(--space-5);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-align: center;
  text-transform: uppercase;
}

.capability-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.capability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.capability .icon { color: var(--ink-500); }

/* The strip's own list on phones: centred inline items wrap raggedly (a long
   one breaks with its icon hanging beside the first line), so below 768px it
   is a start-aligned list under the centred label, one column below 480px and
   two from there, each item a fixed 20px icon column beside its text, the icon
   level with the first line. The block of columns is centred as a whole. From
   768px it is the centred row again. A panel that holds the same list (the
   Website's platforms) keeps the centred row at every width. */
.capability-strip .capability-strip__list {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  justify-content: center;
  gap: var(--space-3) var(--space-8);
}

.capability-strip .capability {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.capability-strip .capability .icon { margin-top: 0.175rem; }

@media (min-width: 30rem) {
  .capability-strip .capability-strip__list { grid-template-columns: repeat(2, minmax(0, max-content)); }
}

@media (min-width: 48rem) {
  .capability-strip .capability-strip__list { display: flex; }

  .capability-strip .capability {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .capability-strip .capability .icon { margin-top: 0; }
}

/* ==========================================================================
   13. Cards and the feature grid
   ========================================================================== */

.card,
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration) ease, box-shadow var(--duration) ease, transform var(--duration) var(--ease-out);
}

.card > *,
.feature-card > * { margin-bottom: 0; }

.feature-card__title,
.card__title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xl);
}

.feature-card p,
.card p { color: var(--color-text-secondary); }

/* A card's body text, its paragraphs and its own checklist, keeps the prose
   measure (68ch), so a card as wide as its container (the Pack home's
   "Written in AEL") does not run a line about 150 characters across. A card
   in a grid of two or more is narrower than the measure and does not change. */
.feature-card p,
.card p,
.feature-card > .check-list,
.card > .check-list { max-width: var(--measure); }

.feature-card__link { margin-top: auto; padding-top: var(--space-2); }

.feature-card--link:hover,
.card--link:hover {
  border-color: var(--cyan-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature-card--link .feature-card__link a::before,
.card--link .card__link a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* The featured card of a grid: a 3px strip of the brand gradient runs
   along its whole top edge. The accent takes no space in the card (since
   edition 2026-09-27n): the card keeps the 1px border and the padding of
   the cards beside it, so its icon tile and title stand level with theirs.
   The strip is painted by a ::before as large as the card's border box,
   with the card's radius, which clips the strip to the card's rounded
   outline; it lies over the top border and the first 2px of the padding,
   where no content is, and ignores the pointer, so a link card's stretched
   link stays the target. In forced colours the strip is left out and the
   card keeps its plain outline (section 27). */
.feature-card--accent::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-brand) top / 100% 3px no-repeat;
  pointer-events: none;
}

.feature-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Compact grid (since edition 2026-09-27k), for cards that hold only an
   icon tile and a title, with no text below it. Each card is one row, the
   tile beside the title as in a panel's labelled rows, about 70px tall in
   place of a card of 140 to 192px that stood mostly empty. One column below
   40rem, where two would leave a title too little room beside its tile (at
   360px less than the width of the word "microcontrollers"); two from 40rem;
   and a four-column grid four across only from 80rem, because at 64rem a
   quarter of the row is again narrower than that word. */
.feature-grid--compact { gap: var(--space-3); }

.feature-grid--compact > .card,
.feature-grid--compact > .feature-card {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
}

.feature-grid--compact .card__title,
.feature-grid--compact .feature-card__title {
  margin: 0;
  font-size: var(--text-lg);
}

@media (min-width: 40rem) {
  .feature-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .feature-grid--compact.feature-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 80rem) {
  .feature-grid--compact.feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   14. Split feature section
   ========================================================================== */

.split {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.split__content { min-width: 0; }
.split__content > :last-child { margin-bottom: 0; }
.split__visual { min-width: 0; }

@media (min-width: 64rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
  }

  .split--reverse .split__visual { order: -1; }
}

.check-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--color-text-secondary);
}

.check-list li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--emerald-100);
}

.check-list li::after {
  content: "";
  position: absolute;
  top: calc(0.2em + 0.34rem);
  left: 0.44rem;
  width: 0.36rem;
  height: 0.6rem;
  border-right: 2px solid var(--emerald-700);
  border-bottom: 2px solid var(--emerald-700);
  transform: rotate(45deg);
}

/* A checklist that is a card's own child is spaced from the title or text
   above it by the card's gap alone, as the card's paragraphs are (before,
   the checklist's own 24px top margin was added to the gap). That margin
   stays for a checklist in a section or a split's text column. */
.feature-card > .check-list,
.card > .check-list { margin-top: 0; }

/* Rail: a section's heading column (title, an optional lede and links)
   beside its content, for long lists and question groups. Stacked
   below 1024px, heading first. From 1024px the heading column (22rem at
   most) sticks under the header while the content column (44rem at most, a
   readable measure) scrolls past it; the two columns meet the container's
   edges, so a rail is as wide as a full-width band below it. The heading
   column is the section header: no icon tile, no eyebrow, start-aligned.
   rail--numbered puts a CSS-generated index (01, 02 …, counted per page)
   above the title, the one label a section title carries. */

main { counter-reset: rail; }

.rail {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

.rail__head { min-width: 0; }
.rail__head > * { margin: 0; }
.rail__head > * + * { margin-top: var(--space-4); }

/* A link to the title lands with the whole heading column in view and, from
   1024px, exactly where the column sticks: the space the column keeps under
   the header, plus, in a numbered rail, the index line and the gap under
   it. */
.rail__title {
  font-size: var(--text-3xl);
  text-wrap: balance;
  scroll-margin-top: var(--space-4);
}

.rail--numbered .rail__title {
  scroll-margin-top: calc(var(--text-sm) * var(--leading-snug) + var(--space-3) + var(--space-4));
}

.rail__head > .lede { font-size: var(--text-md); }

.rail__links {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
}

.rail__body { min-width: 0; }
.rail__body > :first-child { margin-top: 0; }
.rail__body > :last-child { margin-bottom: 0; }
.rail__body > .card + .card { margin-top: var(--space-5); }

.rail--numbered { counter-increment: rail; }

/* The index: a gradient dash, cyan 700 and small, caps-tracked figures. */
.rail--numbered .rail__head::before {
  content: counter(rail, decimal-leading-zero);
  content: counter(rail, decimal-leading-zero) / "";
  display: block;
  margin-bottom: var(--space-3);
  padding-left: calc(1.25rem + var(--space-2));
  background: var(--gradient-brand) 0 50% / 1.25rem 2px no-repeat;
  color: var(--color-accent-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
}

@media (min-width: 64rem) {
  .rail {
    grid-template-columns: minmax(0, 22rem) minmax(0, 44rem);
    justify-content: space-between;
    column-gap: var(--space-16);
  }

  .rail__head {
    position: sticky;
    top: calc(var(--header-h) + var(--space-8));
  }
}

/* A checklist read as rows: hairlines between items, one column. */
.check-list--rows {
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--color-border);
}

.check-list--rows li {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.check-list--rows li::before { top: calc(var(--space-4) + 0.2em); }
.check-list--rows li::after { top: calc(var(--space-4) + 0.2em + 0.34rem); }

/* From 1280px a numbered rail (an index page such as /features) gives its
   content column the rest of the row, and the rows of its lists, and a pair
   of cards (rail__body--cards), go two across: a long list reads as an
   overview, about a fifth shorter, not as a single column beside an
   empty heading column. Question groups keep their one readable column. */
@media (min-width: 80rem) {
  .rail--numbered { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }

  .rail .check-list--rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
  }

  .rail__body--cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .rail__body--cards > .card + .card { margin-top: 0; }
}

/* Expander: the tail of a long list behind "Show all N" on phones. The
   first items stay in their own list above it. From 768px the tail is always
   shown and the toggle hidden, where the browser can style the disclosure's
   content (::details-content); elsewhere it stays a working disclosure. */
.expander { margin: 0; }

.expander > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  margin-top: var(--space-4);
  padding: 0.55rem var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  color: var(--color-link);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  list-style: none;
  cursor: pointer;
  transition: border-color var(--duration) ease, background-color var(--duration) ease;
}

.expander > summary::-webkit-details-marker { display: none; }
.expander > summary::marker { content: ""; }

.expander > summary::after {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration) var(--ease-out);
}

.expander > summary:hover {
  border-color: var(--cyan-200);
  background: var(--cyan-50);
  color: var(--color-link-hover);
}

.expander[open] > summary { margin-bottom: var(--space-2); }

.expander[open] > summary::after {
  margin-top: 0.25rem;
  transform: rotate(-135deg);
}

.expander__less,
.expander[open] .expander__more { display: none; }
.expander[open] .expander__less { display: inline; }

.expander > .check-list { margin-top: var(--space-3); }
.expander > .check-list--rows { margin-top: 0; border-top: 0; }

@media (min-width: 48rem) {
  @supports selector(::details-content) {
    .expander > summary { display: none; }

    .expander::details-content {
      display: block;
      content-visibility: visible;
    }

    /* The tail continues the list above it: the card's gap alone spaces
       them, as it spaces the list's own items. */
    .expander > .check-list { margin-top: 0; }
  }
}

/* ==========================================================================
   15. Facts (words, never invented numbers)
   ========================================================================== */

.fact-row {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-border);
  list-style: none;
}

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-6);
  background: var(--color-surface);
}

.fact__value {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--cyan-700);
  -webkit-text-fill-color: transparent;
}

.fact__label {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* ==========================================================================
   16. Steps and timeline
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  position: relative;
  min-width: 0;
  padding-left: 3.75rem;
  counter-increment: step;
}

.steps__item::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  border: 1px solid var(--cyan-200);
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 0 0 4px var(--color-bg), var(--shadow-sm);
  color: var(--cyan-700);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
}

.steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 3rem;
  bottom: calc(-1 * var(--space-8) + 0.4rem);
  left: 1.3125rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan-200) 0%, var(--indigo-200) 100%);
}

.steps__title {
  margin: 0.45rem 0 var(--space-2);
  font-size: var(--text-lg);
}

.steps__item p { margin: 0; color: var(--color-text-secondary); }

@media (min-width: 64rem) {
  .steps--row {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--space-6);
  }

  .steps--row .steps__item { padding: 3.75rem 0 0; }

  .steps--row .steps__item:not(:last-child)::after {
    top: 1.3125rem;
    right: calc(-1 * var(--space-6) + 0.5rem);
    bottom: auto;
    left: 3.375rem;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan-200) 0%, var(--indigo-200) 100%);
  }
}

.timeline {
  position: relative;
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0 0 0 2rem;
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.4375rem;
  width: 2px;
  border-radius: 2px;
  background: var(--color-border);
}

.timeline__item { position: relative; min-width: 0; }

.timeline__item::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: -2rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--ink-300);
  border-radius: 50%;
  background: var(--color-bg);
}

.timeline__item--done::before { border-color: var(--emerald-600); background: var(--emerald-600); box-shadow: inset 0 0 0 3px var(--color-bg); }
.timeline__item--current::before { border-color: var(--cyan-600); background: var(--cyan-600); box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.2); }

.timeline__meta {
  margin: 0 0 var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.timeline__item--current .timeline__meta { color: var(--color-accent-text); }

.timeline__title { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.timeline__item p:last-child { margin-bottom: 0; }

/* ==========================================================================
   17. Tables
   ========================================================================== */

/* Scroll shadows show that a wide table continues past the edge: the white
   covers scroll with the table (local) and hide the shadows (scroll) only
   at the ends it has reached. */
.table-wrap {
  max-width: 100%;
  margin: 0 0 var(--space-6);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, var(--color-surface) 30%, rgba(255, 255, 255, 0)) left center / 3rem 100% no-repeat local,
    linear-gradient(270deg, var(--color-surface) 30%, rgba(255, 255, 255, 0)) right center / 3rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(21, 38, 52, 0.26), rgba(21, 38, 52, 0)) left center / 1.25rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(21, 38, 52, 0.26), rgba(21, 38, 52, 0)) right center / 1.25rem 100% no-repeat scroll,
    var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.table-wrap:focus-visible { outline-offset: 2px; }

.table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.table caption {
  padding: var(--space-4) var(--space-4) 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: left;
  caption-side: top;
}

.table th,
.table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  background: var(--color-bg-subtle);
  color: var(--color-text-strong);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.table tbody th {
  color: var(--color-text-strong);
  font-weight: 600;
}

.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody tr:hover > * { background: var(--neutral-25); }

.table--compare { min-width: 36rem; }

.table--compare tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-surface);
}

.table--compare .is-highlight {
  background: linear-gradient(180deg, var(--cyan-50) 0%, var(--color-surface) 100%);
}

/* Code in a cell stays one token: a name never breaks at its hyphen. */
.table td code,
.table th code {
  overflow-wrap: normal;
  white-space: nowrap;
}

/* A cell of long addresses, such as a schema's $id: an address breaks where
   the page offers a break (<wbr> after a slash or a hyphen), and inside a
   piece only when that piece is still wider than the cell; each line of a
   broken address keeps its own chip. */
.table .table__cell--url code {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A linked address is set in the link colour on its chip, without an
   underline, which a wrapped or stacked chip would cut; hovering underlines
   it and tints the chip's edge. */
.table__cell--url a { text-decoration: none; }
.table__cell--url a code { color: inherit; }

.table__cell--url a:hover code {
  border-color: var(--cyan-300);
  text-decoration: underline 1px;
  text-underline-offset: 0.2em;
}

/* Address table (the documentation's schema lists): a name column and an
   address column. The start that every address shares is printed once,
   under the address column's title (th > .table__base); each row shows the
   rest of its address, linked to the whole address, and shows the start
   again only where that title is hidden, in a stacked table on phones. A
   tag after a row's name, such as "Draft", always sits on its own line. */
.table--addresses td { vertical-align: baseline; }

.table--addresses td > .tag {
  display: flex;
  width: fit-content;
  margin-top: 0.25rem;
}

.table--addresses th > .table__base {
  display: block;
  margin-top: 0.125rem;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.table--addresses td .table__base { color: var(--color-muted); }

@media (min-width: 48rem) {
  .table--addresses { table-layout: fixed; }
  .table--addresses > thead > tr > th:first-child { width: 38%; }
  .table--addresses td .table__base { display: none; }
}

/* Stacked table: <div class="table-wrap table-wrap--stack">, each body cell
   carrying its column's header text in data-label. Below 768px every row is
   a card, and every cell shows the name of its column above its value, so
   the value has the card's full width and nothing scrolls sideways. The
   header row stays for assistive technology only. */
@media (max-width: 47.99rem) {
  .table-wrap--stack {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .table-wrap--stack > .table,
  .table-wrap--stack > .table > tbody,
  .table-wrap--stack > .table > tbody > tr { display: block; }

  .table-wrap--stack > .table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table-wrap--stack > .table > tbody > tr {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
  }

  .table-wrap--stack > .table > tbody > tr + tr { margin-top: var(--space-3); }

  .table-wrap--stack > .table > tbody > tr > td {
    display: block;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
  }

  .table-wrap--stack > .table > tbody > tr > td:last-child { border-bottom: 0; }

  .table-wrap--stack > .table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.125rem;
    color: var(--color-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
  }

  .table-wrap--stack > .table > tbody > tr:hover > * { background: none; }

  /* The first cell names the row: the card's title band. */
  .table-wrap--stack > .table > tbody > tr > td:first-child {
    background: var(--color-bg-subtle);
    color: var(--color-text-strong);
    font-weight: 600;
  }

  /* A token wider than the card wraps inside its own box. */
  .table-wrap--stack td code {
    display: inline-block;
    max-width: 100%;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  white-space: nowrap;
}

.mark::before {
  content: "";
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
}

.mark--yes { color: var(--emerald-700); }
.mark--yes::before { background: var(--emerald-500); box-shadow: inset 0 0 0 3px var(--emerald-100); }
.mark--planned { color: var(--indigo-700); }
.mark--planned::before { border: 2px dashed var(--indigo-500); }
.mark--no { color: var(--color-muted); }
.mark--no::before { height: 2px; border-radius: 2px; background: var(--ink-400); }

/* ==========================================================================
   18. FAQ accordion (<details>)
   ========================================================================== */

.faq {
  display: grid;
  gap: var(--space-3);
  max-width: 50rem;
}

.faq--center { margin-inline: auto; }

.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration) ease, box-shadow var(--duration) ease;
}

.faq__item:hover { border-color: var(--color-border-strong); }

.faq__item[open] {
  border-color: var(--cyan-200);
  box-shadow: var(--shadow-sm);
}

.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 1.1rem 1.25rem;
  border-radius: inherit;
  color: var(--color-text-strong);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}

.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::marker { content: ""; }

.faq__item > summary > :is(h2, h3, h4) {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.faq__item > summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin: -0.25rem 0.25rem 0 0;
  border-right: 2px solid var(--ink-500);
  border-bottom: 2px solid var(--ink-500);
  transform: rotate(45deg);
  transition: transform var(--duration) var(--ease-out);
}

.faq__item[open] > summary::after {
  margin-top: 0.25rem;
  transform: rotate(-135deg);
}

.faq__answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--color-text-secondary);
}

.faq__answer > :last-child { margin-bottom: 0; }

/* ==========================================================================
   19. Callouts
   ========================================================================== */

.callout {
  --callout-accent: var(--cyan-600);
  --callout-border: var(--cyan-200);
  --callout-bg: var(--cyan-50);
  --callout-title: var(--cyan-800);
  display: grid;
  gap: var(--space-1) var(--space-3);
  grid-template-columns: minmax(0, 1fr);
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--callout-border);
  border-left: 4px solid var(--callout-accent);
  border-radius: var(--radius-md);
  background: var(--callout-bg);
  color: var(--color-text);
}

.callout:has(> .icon) { grid-template-columns: 1.25rem minmax(0, 1fr); }
.callout:has(> .icon) > :not(.icon) { grid-column: 2; }

.callout > .icon {
  grid-row: 1 / span 2;
  margin-top: 0.15rem;
  color: var(--callout-accent);
}

.callout > * { margin: 0; }
.callout > * + :not(.icon) { margin-top: var(--space-1); }

.callout__title {
  color: var(--callout-title);
  font-weight: 600;
}

.callout--tip {
  --callout-accent: var(--emerald-600);
  --callout-border: var(--emerald-200);
  --callout-bg: var(--emerald-50);
  --callout-title: var(--emerald-800);
}

.callout--preview {
  --callout-accent: var(--indigo-600);
  --callout-border: var(--indigo-200);
  --callout-bg: var(--indigo-50);
  --callout-title: var(--indigo-800);
}

.callout--warning {
  --callout-accent: var(--amber-600);
  --callout-border: var(--amber-200);
  --callout-bg: var(--amber-50);
  --callout-title: var(--amber-800);
}

/* ==========================================================================
   20. Code blocks (label directly above every <pre>)
   ========================================================================== */

.code-block {
  margin: var(--space-6) 0;
  overflow: hidden;
  border: 1px solid rgba(21, 38, 52, 0.14);
  border-radius: var(--radius-lg);
  background: var(--code-bg);
  box-shadow: var(--shadow-md);
}

.code-block__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--code-bar);
  color: var(--code-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
}

.code-block__label::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--indigo-400);
  box-shadow: 0 0 0 3px rgba(149, 161, 255, 0.2);
}

.code-block__label[data-lang]::after {
  content: attr(data-lang);
  margin-left: auto;
  padding: 0.1rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xs);
  color: var(--code-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.code-block pre {
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
  overflow-x: auto;
  color: var(--code-fg);
  font-size: 0.8125rem;
  line-height: 1.7;
  tab-size: 4;
}

/* A code line wider than its block (a code block, or the code window of a
   product visual) scrolls inside it, and the block shows that it does: a
   lit edge on each side that has more code (fixed to the box), hidden by
   covers of the block's colour that move with the code once that end is
   reached, as on a table (section 17), and a thin scrollbar in the block's
   colours. A block that fits shows neither edge. */
.window pre,
.code-block pre {
  --scroll-cover: var(--code-bg);
  --scroll-edge: rgba(139, 219, 246, 0.14);
  background:
    linear-gradient(90deg, var(--scroll-cover) 30%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(270deg, var(--scroll-cover) 30%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-edge), transparent) left center / 1.25rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-edge), transparent) right center / 1.25rem 100% no-repeat scroll,
    var(--scroll-cover);
  scrollbar-width: thin;
  scrollbar-color: rgba(181, 195, 208, 0.5) transparent;
}

@media (min-width: 48rem) {
  .code-block pre { font-size: 0.875rem; }
}

.code-block pre:focus-visible { outline-color: var(--cyan-300); outline-offset: -3px; }

.code-block--light {
  border-color: var(--color-border);
  background: var(--color-surface-sunken);
  box-shadow: none;
}

.code-block--light .code-block__label {
  border-bottom-color: var(--color-border);
  background: var(--color-bg-muted);
  color: var(--color-muted);
}

.code-block--light .code-block__label[data-lang]::after {
  border-color: var(--color-border-strong);
  color: var(--color-muted);
}

.code-block--light pre {
  --scroll-cover: var(--color-surface-sunken);
  --scroll-edge: rgba(21, 38, 52, 0.12);
  color: var(--ink-900);
  scrollbar-color: var(--ink-500) transparent;
}
.code-block--light pre:focus-visible { outline-color: var(--color-focus); }

/* Where the browser can tie an animation to scrolling, the code itself also
   fades out over 3rem at each side that has more and comes back in full as
   that end is reached; the scrollbar's strip never fades. A block that fits
   has no scroll range, so the fade stays at 0 and nothing is masked. The
   fade replaces the lit edges, and with focus the whole block shows. */
@property --code-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --code-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@keyframes ael-code-fade {
  0% { --code-fade-start: 0px; --code-fade-end: 3rem; }
  8%, 92% { --code-fade-start: 3rem; --code-fade-end: 3rem; }
  100% { --code-fade-start: 3rem; --code-fade-end: 0px; }
}

@supports (animation-timeline: scroll()) {
  .window pre,
  .code-block pre {
    --scroll-edge: transparent;
    mask-image:
      linear-gradient(90deg, transparent, #000 var(--code-fade-start), #000 calc(100% - var(--code-fade-end)), transparent),
      linear-gradient(#000, #000);
    mask-size: 100% calc(100% - var(--space-5)), 100% var(--space-5);
    mask-position: left top, left bottom;
    mask-repeat: no-repeat;
    animation: ael-code-fade linear both;
    animation-timeline: scroll(self inline);
  }

  .window pre:focus-visible,
  .code-block pre:focus-visible { mask-image: none; }
}

/* Syntax tokens; dark code surfaces unless noted */
.tok-c { color: var(--code-comment); font-style: italic; }
.tok-k { color: var(--code-keyword); }
.tok-s { color: var(--code-string); }
.tok-t { color: var(--code-type); }
.tok-n { color: var(--code-number); }
.tok-f { color: var(--code-function); }
.tok-p { color: var(--code-muted); }

.code-block--light .tok-c { color: var(--ink-600); }
.code-block--light .tok-k { color: var(--cyan-800); }
.code-block--light .tok-s { color: var(--emerald-800); }
.code-block--light .tok-t { color: var(--indigo-700); }
.code-block--light .tok-n { color: var(--amber-800); }
.code-block--light .tok-f { color: var(--indigo-800); }
.code-block--light .tok-p { color: var(--ink-600); }

/* ==========================================================================
   21. Call-to-action band
   ========================================================================== */

.cta-band {
  --color-focus: var(--cyan-300);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.25rem, 0.5rem + 4vw, 4.5rem);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(55% 110% at 0% 0%, rgba(16, 185, 129, 0.34) 0%, rgba(16, 185, 129, 0) 62%),
    radial-gradient(60% 120% at 100% 100%, rgba(89, 84, 245, 0.5) 0%, rgba(89, 84, 245, 0) 62%),
    linear-gradient(135deg, var(--ink-900) 0%, #10283A 55%, var(--ink-950) 100%);
  /* Solid under the gradient: the band's white text keeps a dark background
     where the gradient is not painted, and a checker that cannot read an
     image measures the text against it. */
  background-color: var(--ink-950);
  box-shadow: var(--shadow-xl);
  color: var(--color-on-dark-muted);
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 50%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 90% at 70% 50%, #000 20%, transparent 100%);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 64rem) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.5fr) auto; gap: var(--space-12); }
}

.cta-band h2 {
  max-width: 38rem;
  margin-bottom: var(--space-3);
  color: var(--color-on-dark);
  font-size: var(--text-4xl);
}

.cta-band p { max-width: 38rem; }
.cta-band p:last-child { margin-bottom: 0; }

.cta-band a:not(.btn) {
  color: var(--cyan-200);
  text-decoration-color: rgba(184, 235, 253, 0.5);
}

.cta-band a:not(.btn):hover { color: var(--color-on-dark); }

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 29.99rem) {
  .cta-band__actions .btn { width: 100%; }
}

.cta-band--light {
  --color-focus: var(--indigo-600);
  border: 1px solid var(--cyan-100);
  background:
    radial-gradient(55% 110% at 0% 0%, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0) 62%),
    radial-gradient(60% 120% at 100% 100%, rgba(67, 56, 202, 0.12) 0%, rgba(67, 56, 202, 0) 62%),
    linear-gradient(135deg, var(--cyan-50) 0%, var(--color-surface) 50%, var(--indigo-50) 100%);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-secondary);
}

.cta-band--light::after { display: none; }
.cta-band--light h2 { color: var(--color-text-strong); }

.cta-band--light a:not(.btn) {
  color: var(--color-link);
  text-decoration-color: rgba(14, 116, 144, 0.45);
}

.cta-band--light a:not(.btn):hover { color: var(--color-link-hover); }

/* ==========================================================================
   22. Site footer
   ========================================================================== */

.site-footer {
  padding-block: var(--space-16) var(--space-10);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.site-footer__top {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 64rem) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: var(--space-12); }
}

/* From 1280px the host columns take more of the row, so every host's status
   fits on one line beside the brand column. */
@media (min-width: 80rem) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 3.4fr); }
}

/* The brand, the launch badge and the feed line, one under another. */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__brand .brand { margin: 0 0 var(--space-4); }
.site-footer__brand p { max-width: 22rem; }
.site-footer__brand .badge { margin-bottom: var(--space-4); }

/* The updates feed under the launch badge. */
.site-footer__follow { margin: 0; }
.site-footer__follow a { font-weight: 600; }

.footer-grid {
  display: grid;
  gap: var(--space-8) var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48rem) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.footer-col { min-width: 0; }

.footer-col h2 {
  margin: 0 0 var(--space-1);
  color: var(--color-text-strong);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: 0;
}

.footer-col__host {
  display: inline-block;
  margin-bottom: var(--space-1);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
  text-decoration: none;
}

a.footer-col__host:hover { color: var(--color-link); text-decoration: underline; }

/* What the host is, or when it opens: plain small text, never a chip, so a
   long status wraps like any sentence. */
.footer-col__note {
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.footer-col .footer-col__host + ul { margin-top: var(--space-3); }

.footer-col ul {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col ul a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.footer-col ul a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  justify-content: space-between;
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.footer-meta {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.footer-meta p { margin: 0; }
.footer-meta a { font-weight: 600; }

/* The static-site line: the small secondary style of the legal row. */
.footer-note {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

/* Side by side from 1024px, where both groups fit on one row. */
@media (min-width: 64rem) {
  .footer-meta--end { text-align: right; }
}

/* ==========================================================================
   23. Documentation layout
   ========================================================================== */

.docs-layout {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-8) var(--space-16);
}

@media (min-width: 64rem) {
  .docs-layout {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: var(--space-10);
    padding-top: var(--space-10);
  }
}

/* With the on-page contents from 1280px, a narrower contents column and
   gap leave the article room for code blocks of about 100 characters at
   1536px and wider. */
@media (min-width: 80rem) {
  .docs-layout { grid-template-columns: 15.5rem minmax(0, 1fr) 12rem; gap: var(--space-8); }
}

@media (min-width: 96rem) {
  .docs-layout { gap: var(--space-10); }
}

/* Sidebar: <details class="docs-sidebar">. Collapsed behind its summary on
   small screens; always shown from 1024px where ::details-content exists. */
.docs-sidebar { min-width: 0; }

.docs-sidebar > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  color: var(--color-text-strong);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.docs-sidebar > summary::-webkit-details-marker { display: none; }
.docs-sidebar > summary::marker { content: ""; }

.docs-sidebar > summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.2rem;
  border-right: 2px solid var(--ink-500);
  border-bottom: 2px solid var(--ink-500);
  transform: rotate(45deg);
  transition: transform var(--duration) var(--ease-out);
}

.docs-sidebar[open] > summary::after { margin-top: 0.2rem; transform: rotate(-135deg); }

.docs-sidebar[open] > .docs-nav {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

@supports selector(::details-content) {
  @media (min-width: 64rem) {
    .docs-sidebar > summary { display: none; }

    .docs-sidebar::details-content {
      display: block;
      content-visibility: visible;
    }

    .docs-sidebar,
    .docs-sidebar[open] {
      position: sticky;
      top: calc(var(--header-h) + var(--space-6));
      align-self: start;
      max-height: calc(100vh - var(--header-h) - var(--space-10));
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .docs-sidebar[open] > .docs-nav,
    .docs-sidebar > .docs-nav {
      margin: 0;
      padding: 0 var(--space-2) var(--space-6) 0;
      border: 0;
      background: none;
    }
  }
}

.docs-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-nav__group + .docs-nav__group { margin-top: var(--space-6); }

/* Group names in sentence case, so a long one such as "Standard library
   and core types" stays easy to scan when it wraps. */
.docs-nav__title,
.docs-nav__group > summary {
  display: block;
  margin: 0 0 var(--space-2);
  padding: 0 0.75rem;
  color: var(--color-text-strong);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
}

/* The chevron sits on the first line of a name that wraps. */
.docs-nav__group > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  list-style: none;
  cursor: pointer;
}

.docs-nav__group > summary::-webkit-details-marker { display: none; }
.docs-nav__group > summary::marker { content: ""; }

.docs-nav__group > summary::after {
  content: "";
  flex: none;
  margin-top: 0.35rem;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid var(--ink-500);
  border-bottom: 1.5px solid var(--ink-500);
  transform: rotate(-45deg);
  transition: transform var(--duration) var(--ease-out);
}

.docs-nav__group[open] > summary::after { transform: rotate(45deg); }

.docs-nav a {
  display: block;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-decoration: none;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.docs-nav a:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-strong);
}

.docs-nav a[aria-current="page"] {
  background: var(--cyan-50);
  box-shadow: inset 2px 0 0 var(--cyan-600);
  color: var(--cyan-800);
  font-weight: 600;
}

.docs-nav ul ul { margin: 0.15rem 0 0.35rem 0.75rem; padding-left: 0.5rem; border-left: 1px solid var(--color-border); }

.docs-content {
  min-width: 0;
  max-width: 50rem;
}

@media (min-width: 80rem) {
  .docs-content { max-width: 55rem; }
}

/* An article opens at reading size, not as a landing page. */
.docs-content > h1 { font-size: var(--text-4xl); }
.docs-content > .lede { font-size: var(--text-lg); }

.docs-toc { display: none; }

@media (min-width: 80rem) {
  .docs-toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    display: block;
    align-self: start;
    max-height: calc(100vh - var(--header-h) - var(--space-10));
    overflow-y: auto;
  }
}

.toc__title {
  margin: 0 0 var(--space-3);
  color: var(--color-text-strong);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.toc ul {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--color-border);
  list-style: none;
}

.toc a {
  display: block;
  margin-left: -1px;
  padding: 0.3rem 0 0.3rem 0.875rem;
  border-left: 2px solid transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
  text-decoration: none;
}

.toc a:hover {
  border-left-color: var(--ink-300);
  color: var(--color-text-strong);
}

.toc a[aria-current="true"],
.toc a[aria-current="location"] {
  border-left-color: var(--cyan-600);
  color: var(--cyan-800);
  font-weight: 600;
}

.toc ul ul { border-left: 0; }
.toc ul ul a { padding-left: 1.75rem; }

/* On-page navigation as a row of chips, for marketing pages */
.page-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.page-toc a:hover { border-color: var(--cyan-300); color: var(--color-link-hover); }

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  list-style: none;
}

.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }

.breadcrumbs li + li::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-top: 1.5px solid var(--ink-400);
  border-right: 1.5px solid var(--ink-400);
  transform: rotate(45deg);
}

.breadcrumbs a { color: var(--color-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-link); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-text-strong); font-weight: 500; }

.pager {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 48rem) {
  .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pager__link--next { grid-column: 2; }
}

.pager__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-decoration: none;
  transition: border-color var(--duration) ease, box-shadow var(--duration) ease;
}

.pager__link:hover {
  border-color: var(--cyan-300);
  box-shadow: var(--shadow-sm);
}

.pager__link--next { text-align: right; }

.pager__dir {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.pager__title {
  color: var(--color-link);
  font-weight: 600;
}

/* ==========================================================================
   24. Prose (long-form text, documentation pages)
   ========================================================================== */

.prose {
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.prose > * { margin-block: 0; }
.prose > * + * { margin-top: 1.1em; }

.prose h2 {
  margin-top: var(--space-12);
  font-size: var(--text-3xl);
}

.prose h3 {
  margin-top: var(--space-8);
  font-size: var(--text-xl);
}

.prose h4 { margin-top: var(--space-6); }
.prose h2 + *,
.prose h3 + *,
.prose h4 + * { margin-top: var(--space-3); }
.prose > :first-child { margin-top: 0; }

.prose ul,
.prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--cyan-600); }
.prose ol > li::marker { color: var(--color-muted); font-weight: 600; }

.prose blockquote {
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--cyan-200);
  color: var(--color-text-secondary);
}

.prose dl { display: grid; gap: var(--space-2); }
.prose dt { color: var(--color-text-strong); font-weight: 600; }
.prose dd { margin: 0 0 var(--space-2); color: var(--color-text-secondary); }

.prose > .table-wrap,
.prose > .code-block,
.prose > .callout { margin-bottom: 0; }

.prose > * + .table-wrap,
.prose > * + .code-block,
.prose > * + .callout { margin-top: var(--space-6); }

/* In a documentation article the text keeps its measure, and code blocks
   and tables take the article's full width. */
.docs-content .prose { max-width: none; }
.docs-content .prose > :not(.code-block, .table-wrap) { max-width: var(--measure); }

/* ==========================================================================
   25. Not-found page
   ========================================================================== */

.error-page {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding-block: var(--space-20);
  text-align: center;
}

/* The column is wide enough for one primary and three secondary buttons on
   one row from 768px; its paragraphs keep the narrower 32rem measure. */
.error-page__inner { max-width: 44rem; }

.error-page__inner > p:not(.badge) {
  max-width: 32rem;
  margin-inline: auto;
}

.error-code {
  display: block;
  margin-bottom: var(--space-2);
}

.error-code::before {
  content: "404";
  display: block;
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 12vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--cyan-700);
  -webkit-text-fill-color: transparent;
}

.error-page .hero__actions { justify-content: center; }

/* A not-found page shows at most four buttons; its other destinations are a
   row of text links under them, parted by small dots. */
.error-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.error-links li { position: relative; }

.error-links li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--space-6) / -2 - 2px);
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.error-links a {
  display: inline-block;
  padding-block: var(--space-1);
  font-weight: 500;
}

/* ==========================================================================
   26. Motion (only when the reader has not asked for less)
   ========================================================================== */

/* Each animation runs twice and stops: 4.8s in all, within the five seconds
   after which WCAG 2.2.2 would ask for a way to pause it, which a page with
   no script cannot offer. The badge's ring rests invisible, and the flow's
   dashes stop where they started, since each run moves them by two whole
   dash periods. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .badge__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--emerald-500);
    animation: ael-pulse 2.4s var(--ease-out) 2 both;
  }

  .hub__flow { animation: ael-flow 2.4s linear 2; }
}

@keyframes ael-pulse {
  0% { opacity: 0.55; transform: scale(1); }
  70%,
  100% { opacity: 0; transform: scale(2.8); }
}

@keyframes ael-flow {
  to { stroke-dashoffset: -24; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .btn:active,
  .card--link:hover,
  .feature-card--link:hover,
  .link-arrow:hover::after { transform: none; }

  .link-arrow:hover::after { transform: rotate(45deg); }
}

/* ==========================================================================
   27. Forced colours and print
   ========================================================================== */

@media (forced-colors: active) {
  .btn,
  .badge,
  .pill,
  .tag,
  .card,
  .feature-card,
  .faq__item,
  .callout,
  .pager__link,
  .menu__toggle,
  .docs-sidebar > summary,
  .expander > summary,
  .page-toc a { border: 1px solid CanvasText; }

  .text-gradient,
  .fact__value,
  .error-code::before {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }

  .hero::before,
  .hero::after,
  .page-header::before,
  .page-header::after,
  .cta-band::after,
  .hero__visual::before,
  .feature-card--accent::before { display: none; }

  /* The scroll edges and their covers are painted in the page's colours,
     which forced colours replace; the scrollbar still shows. */
  .table-wrap,
  .window pre,
  .code-block pre { background-image: none; }

  .site-nav a[aria-current="page"],
  .docs-nav a[aria-current="page"] { text-decoration: underline; }
}

@media print {
  .site-header,
  .menu,
  .skip,
  .docs-sidebar,
  .docs-toc,
  .hero__visual,
  .cta-band__actions,
  .float-card { display: none !important; }

  .rail__head { position: static; }

  body { background: #FFFFFF; color: #000000; }

  .hero,
  .page-header,
  .cta-band,
  .section--subtle,
  .capability-strip {
    border: 0;
    background: none !important;
    box-shadow: none;
    color: #000000;
  }

  .cta-band h2 { color: #000000; }
  a { color: #000000; }
  .code-block { border: 1px solid #000000; background: #FFFFFF; box-shadow: none; }
  .code-block pre,
  .code-block__label { color: #000000; background: #FFFFFF; }

  /* Paper does not scroll: a long code line wraps, and nothing fades. */
  .code-block pre { white-space: pre-wrap; overflow-wrap: anywhere; mask-image: none; }
}

/* A printed page shows every expander's tail, where the browser can style a
   disclosure's content. */
@supports selector(::details-content) {
  @media print {
    .expander > summary { display: none; }

    .expander::details-content {
      display: block;
      content-visibility: visible;
    }
  }
}