/* QODIQA design system. One token set, one type scale, one component set. Every route uses only this file
   (plus the optional module styles at the end of the page list). No per-page overrides of type, container or rhythm. */

/* ============================== TOKENS ============================== */
:root {
  /* colour: one dark base, two surfaces, one border, one hover border */
  --bg: #07080c; --surface-1: #0c0e14; --surface-2: #11141c;
  --border: rgba(255, 255, 255, .09); --border-hover: rgba(255, 255, 255, .22);
  --text: #e9ecf3; --text-dim: #a5adbd; --text-faint: #8a93a6;
  /* one spectral accent, used sparingly: thin lines, active states, primary button, one highlight per section */
  --spectrum: linear-gradient(90deg, #FBBA02 0%, #FC6A02 20%, #F81530 43%, #C02E62 62%, #5A5DCB 78%, #0189FD 100%);
  --focus: #8ab4ff;
  /* the brand name in running text: semibold and a touch lighter than the text around it (one rule, .brand) */
  --brand-weight: 600; --brand-color-mix: 12%; --brand-tint: #fff;
  /* exactly three semantic colours, reused everywhere */
  --valid: #5fd39a; --invalid: #ff6b7a; --notice: #f2b84b;
  /* shape: one radius for panels, one for controls, one soft elevation */
  --r-panel: 14px; --r-control: 10px;
  --elev: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 14px 32px -18px rgba(0, 0, 0, .65);
  /* motion: one easing, two durations */
  --ease: cubic-bezier(.22, .61, .36, 1); --t-fast: 240ms; --t: 560ms;
  /* reveal: one duration and one stagger for line-by-line reveals (hero headline, hero words) */
  --motion-reveal: 700ms; --motion-stagger: 80ms;
  /* framed boxes: one dot-grid background for every card, panel, callout, terminal and table frame (see FRAMED BOXES at the end of this file; the diagram frame in dg.css uses the same dot) */
  --framed-pitch: 20px; --framed-dot: .05; --framed-ink: 255 255 255; --framed-hair: rgba(255, 255, 255, .035); --framed-fill: var(--surface-1);
  --nest-fill: #090b10; --lit-ring: linear-gradient(135deg, rgb(var(--framed-orange)), rgb(var(--framed-magenta)) 52%, rgb(var(--framed-blue))); --lit-glow: 0 0 16px 0 rgb(var(--framed-orange) / .2), 0 0 22px 1px rgb(var(--framed-magenta) / .16), 0 6px 24px -2px rgb(var(--framed-blue) / .2);
  --lit-edge-ring: linear-gradient(135deg, rgb(var(--framed-orange) / .42), rgb(var(--framed-magenta) / .42) 52%, rgb(var(--framed-blue) / .42)); --lit-edge-glow: 0 0 12px 0 rgb(var(--framed-orange) / .1), 0 0 16px 0 rgb(var(--framed-magenta) / .08), 0 4px 16px -2px rgb(var(--framed-blue) / .1);
  --framed-glow-a: .085; --framed-glow-b: .05; --framed-orange: 252 106 2; --framed-magenta: 192 46 98; --framed-blue: 1 137 253; --framed-amber: 242 184 75;
  /* diagram timing (the JS twin is assets/js/timing.mjs): step = one highlight or pulse, stagger = gap between the starts of consecutive steps, hover = hover and focus highlight */
  --dg-step-default: 260ms; --dg-stagger: 180ms; --dg-hover: 100ms;
  /* diagram sizes: every diagram (assets/js/diagram.mjs compaction + dg.css) reads these, so they all change together */
  --dg-node-h: 48px; --dg-node-h-plain: 44px; --dg-node-minw: 110px; --dg-node-padx: 12px; --dg-gap: 24px; --dg-margin: 12px; --dg-node-r: 8px; --dg-pad: 16px; --dg-flow: 16px; --dg-max-w: 1040px;
  /* type scale (px at a 16px root; the root grows on very wide screens) */
  --font-italic: 'Inter Italic', 'Geist', ui-sans-serif, system-ui, sans-serif; /* Geist has no italic file: the real italic of the self-hosted Inter, used where the design asks for italic text */
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* ONE TYPE SYSTEM for titles, subtitles, leads and boxes (the TYPE ROLES block at the end of this file applies it; tests/check-type-tokens.mjs enforces it on every route).
     title    = the home headline 'Consent is checked before AI runs.' (47.5 px at 1440, 32 px floor); every page title and section title (h1, h2)
     subtitle = the home text 'Every request is checked before it runs.' (32 px at 1440, 24 px floor); every subtitle under a title (h3 outside a box)
     lead     = the home text 'One request, from the application to a receipt...' (18 px); every lead paragraph (.lede, .lead)
     card     = the domain cards of /conformance ('68 conditions in 13 domains'): title 15 px, body 14 px (the domain card has 12 px; 14 is the site floor for prose), mono label 12 px; every box */
  --type-title-family: var(--font); --type-title-weight: 500; --type-title-size: clamp(2rem, 3.3vw, 3rem); --type-title-lh: 1.1; --type-title-ls: -.03em;
  /* hero = the home rotating headline ONLY (.rot__h): the same values the page title had (47.52 px at 1440), kept as its own token so changing --type-title can never move it */
  --type-hero-family: var(--font); --type-hero-weight: 500; --type-hero-size: clamp(2rem, 3.3vw, 3rem); --type-hero-lh: 1.1; --type-hero-ls: -.03em;
  /* h2 = every section title (24 px at 390, 32 px from ~1000 px up): same family and weight as the hero, clearly smaller */
  --type-h2-family: var(--font); --type-h2-weight: 500; --type-h2-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem); --type-h2-lh: 1.15; --type-h2-ls: -.03em;
  /* subtitle must stay strictly below the h2 at every width: 20 px at 390, 24 px from ~900 px up (h2 is 24..32 px) */
  --type-subtitle-family: var(--font); --type-subtitle-weight: 500; --type-subtitle-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); --type-subtitle-lh: 1.2; --type-subtitle-ls: -.02em;
  /* lead = the body size: an alias of --text-body (14 px / 400 / 1.45) */
  --type-lead-family: var(--font); --type-lead-weight: var(--text-body-weight); --type-lead-size: var(--text-body-size); --type-lead-lh: var(--text-body-lh); --type-lead-ls: normal;
  --type-card-title-family: var(--font); --type-card-title-weight: 500; --type-card-title-size: var(--text-card-title-size); --type-card-title-lh: 1.3; --type-card-title-ls: normal;
  --type-card-body-family: var(--font); --type-card-body-weight: 400; --type-card-body-size: var(--text-body-size); --type-card-body-lh: 1.45; --type-card-body-ls: normal;
  /* THE TEXT SIZES of the whole site, measured on the About page cards Specification / Gateway / Verifier (.flow__node: title, body, link line; identical at 1440 and 390):
     card title 15 px / 500 / 1.3 · body 14 px / 400 / 1.45 · link line 14 px / 500 / 1.6. Everything that is not a title, subtitle, lead, hero headline or diagram text uses one of these four sizes.
     --text-small (12 px, 2 px below body) is the only extra size: badges, chips, mono labels, matrix cells, captions and table captions where 14 px does not fit. */
  --text-card-title-size: .9375rem; --text-card-title-weight: 500; --text-card-title-lh: 1.3;
  --text-body-size: .875rem; --text-body-weight: 400; --text-body-lh: 1.45;
  --text-link-size: .875rem; --text-link-weight: 500; --text-link-lh: 1.6;
  --text-small-size: .75rem; --text-small-weight: 500; --text-small-lh: 1.3;
  /* CODE and identifiers (error codes, header names, keys, endpoints, commands, hashes, inline code, pre, terminals): one mono size, a little under --text-small. */
  --text-code-size: .71875rem; --text-code-weight: 400; --text-code-lh: 1.45;
  --text-code: var(--text-code-weight) var(--text-code-size)/var(--text-code-lh) var(--mono);
  --text-card-title: var(--text-card-title-weight) var(--text-card-title-size)/var(--text-card-title-lh) var(--font);
  --text-body: var(--text-body-weight) var(--text-body-size)/var(--text-body-lh) var(--font);
  --text-link: var(--text-link-weight) var(--text-link-size)/var(--text-link-lh) var(--font);
  --text-small: var(--text-small-weight) var(--text-small-size)/var(--text-small-lh) var(--font);
  --type-card-label-family: var(--mono); --type-card-label-weight: 500; --type-card-label-size: var(--text-small-size); --type-card-label-lh: 1; --type-card-label-ls: .06em;
  /* shorthands (font only; letter-spacing has its own token) */
  --type-title: var(--type-title-weight) var(--type-title-size)/var(--type-title-lh) var(--type-title-family);
  --type-hero: var(--type-hero-weight) var(--type-hero-size)/var(--type-hero-lh) var(--type-hero-family);
  --type-h2: var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-lh) var(--type-h2-family);
  --type-subtitle: var(--type-subtitle-weight) var(--type-subtitle-size)/var(--type-subtitle-lh) var(--type-subtitle-family);
  --type-lead: var(--type-lead-weight) var(--type-lead-size)/var(--type-lead-lh) var(--type-lead-family);
  --type-card-title: var(--type-card-title-weight) var(--type-card-title-size)/var(--type-card-title-lh) var(--type-card-title-family);
  --type-card-body: var(--type-card-body-weight) var(--type-card-body-size)/var(--type-card-body-lh) var(--type-card-body-family);
  --type-card-label: var(--type-card-label-weight) var(--type-card-label-size)/var(--type-card-label-lh) var(--type-card-label-family);
  --fs-h1: var(--type-title-size);
  --fs-h2: var(--type-h2-size);
  --fs-h3: var(--type-card-title-size);
  --fs-card: var(--type-card-title-size);
  --fs-lead: var(--type-lead-size);
  --fs-body: var(--text-body-size);            /* legacy alias: the body size (14 px) */
  --fs-small: var(--text-body-size);           /* legacy alias (14 px) */
  --fs-code: var(--text-body-size);            /* legacy alias (14 px) */
  --fs-eyebrow: var(--text-small-size);         /* legacy alias (12 px) */
  --fs-words: var(--text-body-size);           /* legacy alias (14 px) */
  --btn-h: 34px;                               /* the ONE button height: buttons, link-buttons, chips, tabs, segmented items, search, back-to-top */
  --pill-h: var(--btn-h);                       /* THE pill-button height = the header 'Specification' pill (measured 34px): every .btn pill (primary gradient, secondary ghost, icon / arrow), the header CTA, hero buttons and the console Run share it with chips, tabs, search and icons */
  --btn-px: 16px;                              /* inline padding */
  --btn-fs: var(--text-body-size);               /* 14 px: buttons use the body size */
  --btn-gap: 8px;                              /* label to icon */
  --btn-icon: var(--text-body-size);
  --btn-row: 12px;                             /* gap between buttons in a row */
  --fs-btn: var(--btn-fs);
  --fs-nav: var(--text-body-size);             /* legacy alias (14 px) */
  --fs-foot: var(--text-body-size);            /* legacy alias (14 px) */
  --fs-table: var(--text-body-size);           /* legacy alias (14 px) */
  --lh-body: var(--text-body-lh);
  /* layout: one container, one gutter, one section rhythm, one text measure */
  --container: 72rem; --gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* ONE spacing system: chapters (sections) 48-96px apart, blocks inside a section 32-40px, headings to text 12-16px; sections use the shared .section component */
  --space-chapter: clamp(3rem, 6.5vw, 6rem); --space-block: clamp(2rem, 2.8vw, 2.5rem); --space-head: clamp(.75rem, 1vw, 1rem);
  --section-y: calc(var(--space-chapter) / 2);
  --measure: 66ch; --measure-lead: 70ch;
  --header-h: 4.375rem;
  /* the logo's six colours, in the order the logo runs them (warm to cool): the brand accent family */
  --brand-amber: #FBBA02; --brand-orange: #FC6A02; --brand-red: #F81530; --brand-magenta: #C02E62; --brand-indigo: #5A5DCB; --brand-blue: #0189FD;
  color-scheme: dark;
}
@font-face { font-family: 'Geist'; src: url('/assets/fonts/geist-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter Italic'; src: url('/assets/fonts/inter-latin-wght-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* ============================== BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }
html { overscroll-behavior-x: none; font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (min-width: 2400px) { html { font-size: 112.5%; } }
@media (min-width: 3200px) { html { font-size: 125%; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--text-body-size)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select, option, optgroup { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(138, 180, 255, .3); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: .75rem; top: -4rem; z-index: 100; background: var(--text); color: var(--bg); padding: .6rem 1rem; border-radius: 8px; text-decoration: none; }
.skip-link:focus { top: .75rem; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 80; transform: translate(-50%, 1rem); padding: .6rem 1rem; border: 1px solid var(--border-hover); border-radius: var(--r-control); background: var(--surface-2); font-size: var(--text-body-size); opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ============================== TYPE (one scale, no overrides) ============================== */
h1 { font: var(--type-title); letter-spacing: var(--type-title-ls); text-wrap: balance; text-align: left; max-width: 26ch; }
h2 { font: var(--type-h2); letter-spacing: var(--type-h2-ls); text-wrap: balance; text-align: left; max-width: 32ch; }
:is(.cap, .card-icon-row, .rc, .tile, .card, .panel, .ph, .aud, .horizon__card, .callout, .ipanel, .dl-card, .fw-card, .sdoc, .hw-tile, .sd-panel, .gwp-panel, .qs-panel, .cite-panel, .cf-tile, .an-proves > div, .dms > div, .callouts > div, .st5, .fw-what, .fw-panel, .doc, .docentry, .sdk, .cat, .osp-pane, .hw-art, .hw-merkle, .hw-deleg, .info__body > section, .c-card) h2 { max-width: none; }
.rot__h { font: var(--type-hero); letter-spacing: var(--type-hero-ls); max-width: none; text-align: inherit; }
h3 { font: var(--type-subtitle); letter-spacing: var(--type-subtitle-ls); text-wrap: balance; }
h4 { font: var(--type-card-title); letter-spacing: var(--type-card-title-ls); }
p, li, dd { text-wrap: pretty; }
em { font-style: normal; color: var(--text); }
strong, b { font-weight: 500; color: var(--text); }
.eyebrow { font-size: var(--text-small-size); line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.lede, .lead { color: var(--text-dim); max-width: var(--measure-lead); }
.meta, .hint { font-size: var(--text-body-size); line-height: 1.55; color: var(--text-faint); }
.hint { display: block; font-weight: 400; margin-top: .15rem; }
code, kbd, samp { font: var(--text-code); }
p code, li code, td code, dd code, th code, small code, h1 code, h2 code, h3 code, h4 code { line-height: 1; }
p code, li code, dd code, td code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; color: var(--text); }
/* Inline code in running text never splits across lines (the build adds code-short / code-long, tools/code-wrap.mjs). Short: one piece, drops whole to the next line. Long (37+ characters): wraps only at the <wbr> the build puts after / _ - . : , overflow-wrap:anywhere as the last resort. The box repeats on a wrap (clone). Code in pre, terminals, tables and components with their own code rules is untouched. */
body code.code-short, body code.code-long { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body code.code-short { white-space: nowrap; }
body code.code-long { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
a:not([class]) { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-hover); text-underline-offset: .22em; transition: text-decoration-color var(--t-fast) var(--ease); }
a:not([class]):hover { text-decoration-color: var(--text); }
.prose { max-width: var(--measure); display: grid; gap: 1.1rem; color: var(--text-dim); }
.prose strong { color: var(--text); }
.prose ul, .prose ol { display: grid; gap: .5rem; padding-left: 1.25rem; list-style: disc; }
.prose ol { list-style: decimal; }
.prose h2, .prose h3 { color: var(--text); margin-top: .75rem; }

/* ============================== LAYOUT (one container, one rhythm) ============================== */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--container); }
.section { position: relative; padding-block: var(--section-y); }
.section--alt { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface-1) 75%, transparent) 38%, transparent); }
/* a rule between full-width blocks fades out at both ends, so it never reads as a seam */
:root { --rule-fade: linear-gradient(90deg, transparent 8%, var(--border) 24%, var(--border) 76%, transparent 92%); }
.page-hero + .section, .c-hero + .section { border-top: 0; }
.sec-head { display: grid; gap: var(--space-head); justify-items: start; margin-bottom: var(--space-block); }
.sec-head h2, .sec-head h1 { max-width: 32ch; }
.stack { display: grid; gap: 1.25rem; align-content: start; }
.stack-lg { display: grid; gap: 2rem; align-content: start; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--btn-row); }
.two-col { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.two-col > :first-child { grid-column: span 4; display: grid; gap: 1rem; align-content: start; }
.two-col > :last-child { grid-column: span 8; }
.two-col > :only-child { grid-column: 1 / -1; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 60rem) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .two-col > :first-child, .two-col > :last-child { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .grid, .grid--2, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* page opening: the same calm first screen on every route */
.page-hero { padding-block: clamp(4rem, 7vw, 6.5rem) clamp(3rem, 5vw, 5rem); }
.page-hero > .wrap { display: grid; gap: 1.25rem; justify-items: start; }
.page-hero h1 { max-width: 26ch; }
.hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem) !important; align-items: center; justify-items: stretch !important; }
.hero-split > div { display: grid; gap: 1.25rem; justify-items: start; }
.hero-split > .term { justify-self: stretch; }
@media (max-width: 60rem) { .hero-split { grid-template-columns: minmax(0, 1fr); } }

/* ============================== BUTTONS ============================== */
/* ONE BUTTON. One size for every button, link-button, chip, tab and segmented item: 34px high, 16px inline padding, 13.5px / 500, a full pill, 14px icons,
   8px between label and icon. There is no compact or large variant. Variants differ only by colour and border, never by size:
   primary (the logo gradient), secondary (the default: 1px border on a faint surface), quiet (no fill; a transparent 1px border keeps the same box; the border shows on hover).
   Every class that draws a control is listed ONCE here; page stylesheets set colour and state only, never height, padding or font size. */
.btn,
.chip-btn,
.chip-link,
.gl-az a,
.dg__btn,
.dg__chip,
button.dl-pill,
.seg > :not(.seg__ink),
[role="tab"],
.console__btn,
.c-search,
.c-doc,
.c-burger {
  position: relative; isolation: isolate; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap);
  height: var(--btn-h); min-height: 0; padding: 0 var(--btn-px); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: rgba(255, 255, 255, .035); color: var(--text); font-family: inherit; font-size: var(--btn-fs); font-weight: 500; line-height: 1; letter-spacing: 0; text-align: center;
  text-decoration: none; white-space: nowrap; vertical-align: middle; cursor: pointer; appearance: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease), background-position var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.btn svg, .chip-btn svg, .dg__btn svg, .dg__chip svg, .c-search svg, .c-doc svg, .c-burger svg { width: var(--btn-icon); height: var(--btn-icon); flex: none; }
.btn { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* secondary hover: a gradient edge */
.btn::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(110deg, rgba(252, 106, 2, .75), rgba(192, 46, 98, .75), rgba(1, 137, 253, .75)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity var(--t) var(--ease); }
.btn:hover:not(:disabled) { background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .3); transform: translateY(-1px); }
.btn:hover:not(:disabled)::before { opacity: 1; }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn:disabled, .chip-btn:disabled, .dg__btn:disabled { opacity: .4; cursor: not-allowed; }
/* primary */
.btn:not(.btn--icon):not(.btn--text):not(.btn--quiet):not(.cs-reset):not(.qf__x),
.dg__btn { box-sizing: border-box; height: var(--pill-h); min-height: var(--pill-h); }
.btn--primary, .console__btn { background: linear-gradient(110deg, #c4561d 0%, #b02a5e 50%, #3f62c8 100%) 0% 50% / 200% 100%; color: #fff; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 22px -10px rgba(176, 42, 94, .65); }
.btn--primary::before { display: none; }
.btn--primary:hover:not(:disabled) { background: linear-gradient(110deg, #c4561d 0%, #b02a5e 50%, #3f62c8 100%) 100% 50% / 200% 100%; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 12px 30px -10px rgba(176, 42, 94, .8), 0 0 0 4px rgba(176, 42, 94, .16); }
a.btn--primary::before { content: '\2192'; display: inline-block; position: static; inset: auto; z-index: auto; order: 1; padding: 0; width: auto; height: auto; background: none; -webkit-mask: none; mask: none; opacity: 1; font-size: var(--btn-icon); line-height: 1; transition: transform var(--t-fast) var(--ease); }
a.btn--primary:hover::before { transform: translateX(3px); opacity: 1; }
/* quiet: the same box with a transparent border, so it lines up with its neighbours; the border appears on hover */
.btn--text, .btn--quiet, .link-quiet, .c-doc, .c-burger, [role="tab"], .seg > :not(.seg__ink) { border-color: transparent; background: none; color: var(--text-dim); -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn--text:hover:not(:disabled), .btn--quiet:hover:not(:disabled), .link-quiet:hover, .c-doc:hover, .c-doc:focus-visible, .c-doc[aria-current="page"], .c-burger:hover { color: var(--text); border-color: rgba(255, 255, 255, .22); background: none; transform: none; }
.btn--text::before, .btn--quiet::before { display: none; }
/* icon-only: the same 34px, square (a circle) */
.btn--icon, .c-search, .gl-az a { width: var(--btn-h); padding: 0; list-style: none; }
.btn--icon::-webkit-details-marker { display: none; }
/* chips and filters: secondary look, pressed = the text colour border */
.chip-btn, .chip-link, .gl-az a, .dg__btn, .dg__chip, button.dl-pill, .c-search { color: var(--text-dim); background: rgba(255, 255, 255, .03); border-color: var(--border); }
.chip-btn:hover, .chip-link:hover, .gl-az a:hover, .dg__btn:hover, .dg__chip:hover, button.dl-pill:hover, .c-search:hover, .c-search:focus-visible { color: var(--text); border-color: var(--border-hover); background: rgba(255, 255, 255, .06); }
.chip-btn[aria-pressed="true"] { color: var(--text); border-color: var(--text); }
.chip-link { text-decoration: none; }
.c-search .c-kbd { display: none; }
/* rows of controls: one gap, one baseline */
.cta-row, .toolbar, .chips, .dg__chips, .dg__tools, .cs__ctl, .sd-links, .cite-actions, .pg-bar, .story__cta, .panel__links, .qf__nav, .code__bar, .spec-tools, .gl-bar, .api-ex-bar { gap: var(--btn-row); align-items: center; }
/* touch: keep the 34px look, give every control a 44px hit area through an invisible pseudo-element (no layout change) */
@media (pointer: coarse), (hover: none) {
  .btn::after, .chip-btn::after, .chip-link::after, .gl-az a::after, .dg__btn::after, .dg__chip::after, button.dl-pill::after, [role="tab"]::after, .c-social a::after, .console__btn::after, .c-search::after, .c-doc::after, .c-burger::after, .totop::after { content: ''; position: absolute; inset: -6px; }
  .seg > :not(.seg__ink)::after { content: ''; position: absolute; inset: -6px 0; }
}
/* phone: the visible pill keeps the shared height, the hit area is at least 44px tall (vertical extension only, so side-by-side pills 12px apart never overlap) */
@media (max-width: 40rem) {
  .btn:not(.btn--icon):not(.btn--text):not(.btn--quiet):not(.qf__x)::after, .dg__btn::after, .cs-run::after { content: ''; position: absolute; inset: -5px 0; }
}
.link-arrow, .c-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--text); text-decoration: none; font-weight: 500; font-size: var(--text-body-size); border-bottom: 1px solid var(--border-hover); padding-bottom: 1px; width: fit-content; transition: border-color var(--t-fast) var(--ease); }
.link-arrow::after, .c-link::after { content: '\2192'; color: var(--text-faint); transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.link-arrow:hover, .c-link:hover { border-color: var(--text); }
.link-arrow:hover::after, .c-link:hover::after { transform: translateX(3px); color: var(--text); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .65rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.5; white-space: nowrap; }
.badge--ok { color: var(--valid); border-color: color-mix(in srgb, var(--valid) 40%, transparent); }
.badge--warn { color: var(--notice); border-color: color-mix(in srgb, var(--notice) 40%, transparent); }

/* ============================== PANEL, PANEL WITH HEADER, CODE ============================== */
.tile, .panel, .card, .ph, .code, .term, .legal-banner { border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); box-shadow: var(--elev); }
.tile, .ph { padding: 14px 16px; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; text-decoration: none; color: inherit; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
a.tile:hover, .tile:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.tile p, .ph p { color: var(--text-dim); }
.tile .link-arrow, .tile .link-quiet { margin-top: auto; }
.tile > :last-child:not(p):not(h3):not(ul) { margin-top: auto; }
.ph { border-style: dashed; background: transparent; box-shadow: none; }
.ph:hover { transform: none; }
.ph__tag { display: inline-flex; padding: .1rem .6rem; border: 1px solid color-mix(in srgb, var(--notice) 45%, transparent); border-radius: 999px; color: var(--notice); text-transform: uppercase; }
.card { overflow: hidden; }
.card__head, .code__bar, .term__bar, .panel__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; padding: .75rem 1.25rem; min-height: 3.25rem; border-bottom: 1px solid var(--border); color: var(--text-faint); font-size: var(--text-body-size); }
.card__head h3, .panel__head h3 { color: var(--text); }
.card__body, .panel__body { padding: 1.25rem; display: grid; gap: 1rem; }
.code, .term { overflow: hidden; }
.term__bar i { display: none; }
.term__bar span { margin: 0 !important; }
pre { margin: 0; overflow: auto; padding: 1.1rem 1.25rem; font: var(--text-code); line-height: 1.7; color: var(--text-dim); tab-size: 2; }
pre code { font: inherit; background: none; border: 0; padding: 0; color: inherit; }
pre .c { color: var(--text-faint); } pre .k { color: var(--text); } pre .s { color: var(--notice); } pre .ok { color: var(--valid); } pre .bad { color: var(--invalid); }
pre .hl { background: color-mix(in srgb, var(--invalid) 24%, transparent); color: #fff; border-radius: 2px; }
.hash { font-family: var(--mono); font-size: var(--text-code-size); word-break: break-all; color: var(--text-dim); }

/* ============================== INPUT ============================== */
.field { display: grid; gap: .5rem; }
.field label { font-size: var(--text-body-size); font-weight: 500; color: var(--text); }
.input, .textarea, .field input, .field textarea, .field select, .search input { width: 100%; padding: .7rem .9rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-control); color: var(--text); font-size: var(--text-body-size); line-height: 1.5; transition: border-color var(--t-fast) var(--ease); }
.textarea { min-height: 11rem; resize: vertical; font-family: var(--mono); font-size: var(--text-code-size); line-height: 1.6; }
.textarea--keys { min-height: 7rem; }
.input:hover, .textarea:hover, .search input:hover { border-color: var(--border-hover); }
.input:focus, .textarea:focus, .search input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(138, 180, 255, .18); }
::placeholder { color: var(--text-faint); opacity: 1; }
.disclosure { border-top: 1px solid var(--border); padding-top: .75rem; }
.disclosure summary { cursor: pointer; min-height: 2.25rem; display: flex; align-items: center; color: var(--text-dim); font-size: var(--text-body-size); }
.disclosure summary:hover { color: var(--text); }
.disclosure__body { padding-top: .75rem; }

/* ============================== VERDICT CHIP AND RESULT PANEL (identical everywhere) ============================== */
.status { display: inline-flex; align-items: center; justify-content: center; justify-self: start; align-self: start; width: fit-content; max-width: 100%; min-height: 1.75rem; gap: .5rem; padding: .25rem .9rem; border: 1px solid var(--border-hover); border-radius: 999px; font-size: var(--text-code-size); font-weight: 600; letter-spacing: .05em; color: var(--text-dim); }
.status svg { width: 1.1rem; height: 1.1rem; flex: none; }
.status--valid, .status--ok { color: var(--valid); border-color: color-mix(in srgb, var(--valid) 55%, transparent); background: color-mix(in srgb, var(--valid) 10%, transparent); }
.status--invalid, .status--bad { color: var(--invalid); border-color: color-mix(in srgb, var(--invalid) 55%, transparent); background: color-mix(in srgb, var(--invalid) 10%, transparent); }
.status--input, .status--notice { color: var(--notice); border-color: color-mix(in srgb, var(--notice) 55%, transparent); background: color-mix(in srgb, var(--notice) 10%, transparent); }
.result { display: grid; gap: 1.25rem; }
.result__verdict { display: grid; gap: .75rem; justify-items: start; }
.result__reason { color: var(--text); }
.result__fix { color: var(--text-dim); font-size: var(--text-body-size); }
.checks { display: grid; border: 1px solid var(--border); border-radius: var(--r-control); overflow: hidden; }
.checks li { --bl: 1.4rem; display: grid; grid-template-columns: 18px 1fr auto; gap: .75rem; align-items: start; padding: .65rem 1rem; font-size: var(--text-body-size); line-height: var(--bl); color: var(--text-dim); }
.checks li + li { border-top: 1px solid var(--border); }
.checks li .state { color: var(--text-faint); font-size: var(--text-body-size); }
.checks li[data-state="pass"] .state { color: var(--valid); }
.checks li[data-state="fail"] .state { color: var(--invalid); }
.checks li[data-state="fail"] { background: color-mix(in srgb, var(--invalid) 6%, transparent); }

/* ============================== BADGE (shared) ==============================
   ONE circle for every tick, check, step number and status dot on the site. Sizes: 22px (.bdg) and 18px (.bdg--sm, .tick), dots 8px and 10px.
   The glyph or the number is centred by the badge itself (inline-grid, place-items: center), never by padding or offsets. The circle never has
   overflow: hidden and its host never clips it. Rows that hold a badge declare --bl (the line height of their first text line) so the badge
   sits on the middle of that first line: margin-top = (--bl - size) / 2.
   Real elements:  <span class="bdg bdg--ok"><svg>..</svg></span>  .bdg--bad  .bdg--idle  .bdg--on (current step)  .bdg--solid  .bdg--num (a number)  .bdg--sm (18px)
                   <span class="tick"></span> (assets/js/badge.mjs) takes glyph and colour from [data-state] on its parent row.
   CSS counters (.steps li, .rail7 li, .seq-item, .an__bind li) and the .checklist tick draw the same circle through the selector list below. */
.bdg, .tick, .st__n, .gq-step i,
.steps li::before, .rail7 li::before, .seq-item::before, .an__bind li::before, .checklist li::before, .an-checklist li::before, .info__list li::before {
  --bs: 22px; box-sizing: border-box; display: inline-grid; place-items: center; flex: none; width: var(--bs); height: var(--bs); margin: calc((var(--bl, var(--bs)) - var(--bs)) / 2) 0 0; padding: 0;
  border: 1.5px solid var(--bc, var(--border-hover)); border-radius: 50%; background: var(--bb, transparent); color: var(--bf, var(--text-dim));
  font: 500 var(--text-small-size)/1 var(--mono); font-style: normal; letter-spacing: 0; text-align: center; overflow: visible; vertical-align: top;
}
.bdg--sm, .tick, .checklist li::before { --bs: 18px; font-size: var(--text-small-size); }
.bdg > svg, .tick > svg { display: block; width: 72%; height: 72%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tick path { display: none; }
[data-state="pass"] > .tick .g-ok, [data-state="fail"] > .tick .g-bad, [data-state="skip"] > .tick .g-off { display: inline; }
.bdg--ok, [data-state="pass"] > .tick { --bc: var(--valid); --bf: var(--valid); --bb: color-mix(in srgb, var(--valid) 16%, transparent); }
.bdg--bad, [data-state="fail"] > .tick { --bc: var(--invalid); --bf: var(--invalid); --bb: color-mix(in srgb, var(--invalid) 16%, transparent); }
.bdg--idle, [data-state="idle"] > .tick, [data-state="skip"] > .tick { --bc: var(--border-hover); --bf: var(--text-faint); }
.bdg--on { --bc: var(--text); --bb: var(--text); --bf: var(--bg); }
.bdg--solid { --bb: var(--valid); --bf: #07080c; box-shadow: 0 0 0 2px var(--bg); }
.checklist li::before { --bc: var(--valid); --bb: color-mix(in srgb, var(--valid) 16%, transparent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd39a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.6 3.7 3.7 7.3-8.6'/%3E%3C/svg%3E"); background-position: center; background-size: 72%; background-repeat: no-repeat; }
.st__n, .gq-step i, .steps li::before, .rail7 li::before, .seq-item::before, .an__bind li::before, .an-checklist li::before, .info__list li::before { font-variant-numeric: tabular-nums; }
/* status dots: 8px and 10px circles, one geometry */
.bdg--dot, .pill-note__dot, .console__title::before, .fm__state::before, .horizon__out li::before { --ds: 8px; }
.fm__dots i, .pp li::before, .story.is-stacked .st5::before { --ds: 10px; }
.bdg--dot, .pill-note__dot, .console__title::before, .fm__state::before, .horizon__out li::before, .fm__dots i, .pp li::before, .story.is-stacked .st5::before { box-sizing: border-box; display: inline-block; flex: none; width: var(--ds); height: var(--ds); border-radius: 50%; }
.bdg--dot { background: currentColor; }


/* ============================== TABS, STEPPER ============================== */
.tabs [role="tablist"], .tabbar { display: flex; flex-wrap: wrap; gap: .25rem; position: relative; border-bottom: 1px solid var(--border); }
.tabs [role="tab"], .tabbar [role="tab"] { color: var(--text-faint); }
.tabs [role="tab"]:hover, .tabbar [role="tab"]:hover, .tabs [aria-selected="true"], .tabbar [aria-selected="true"] { color: var(--text); }
.tabs [role="tablist"]:not(.seg) [aria-selected="true"], .tabbar [aria-selected="true"] { border-color: var(--border-hover); background: var(--surface-2); }
.tabs [role="tabpanel"] { padding-top: 1rem; color: var(--text-dim); font-size: var(--text-body-size); }
/* ============================== STEP TABS (shared) ==============================
   Cards that pick one of 3 or 4 steps: a number badge, a title and ONE line of description (--stab-n sets the columns). Used by the "check it
   yourself" stepper (/open-source, role="tab") and the "three commands" block (/anchors, aria-pressed). Every tab in a row has the same height
   (grid stretch), the description never wraps (copy is written to fit, tests/check-tabs.mjs enforces it), and the progress bar is drawn ON the
   bottom edge of the selected tab, never through its text. Narrow screens: two columns (four tabs) or one (three tabs). The tab text is never
   selectable, so a double click cannot paint the neighbouring heading. */
.stabs { grid-auto-rows: 1fr; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--stab-n, 4), minmax(0, 1fr)); gap: var(--btn-row); min-width: 0; }
.stabs--3 { --stab-n: 3; }
.stabs > li { display: grid; min-width: 0; }
.stabs .stab {
  appearance: none; position: relative; isolation: isolate; box-sizing: border-box; width: 100%; height: auto; min-height: 3.75rem; display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: 1fr auto;
  align-items: center; justify-content: stretch; gap: .2rem .7rem; padding: .7rem .9rem .8rem; border: 1px solid var(--border); border-radius: var(--r-control); background: rgba(255, 255, 255, .02); color: var(--text-dim);
  font: inherit; font-size: var(--text-body-size); line-height: 1.35; font-weight: 400; text-align: left; white-space: normal; letter-spacing: 0; cursor: pointer; --bl: 22px;
  -webkit-user-select: none; user-select: none; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.stabs .stab:hover { border-color: var(--border-hover); background: rgba(255, 255, 255, .035); }
.stabs .stab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.stab__t { color: var(--text); font: var(--text-card-title); min-width: 0; overflow-wrap: anywhere; }
.stab__d { grid-column: 1 / -1; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-body-size); line-height: 1.3; color: var(--text-faint); }
.stabs .stab[aria-selected="true"], .stabs .stab[aria-pressed="true"] { background: var(--surface-2); border-color: var(--border-hover); }
.stabs .stab[aria-selected="true"] .bdg, .stabs .stab[aria-pressed="true"] .bdg { --bc: var(--text); --bb: var(--text); --bf: var(--bg); }
.stabs .stab[aria-selected="true"] .stab__d, .stabs .stab[aria-pressed="true"] .stab__d { color: var(--text-dim); }
.stabs .stab[aria-selected="true"]::before, .stabs .stab[aria-pressed="true"]::before { content: ''; position: absolute; z-index: 1; left: .9rem; right: .9rem; bottom: -1px; height: 2px; border-radius: 2px; background: var(--spectrum); }
@media (max-width: 63.99rem) { .stabs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .stabs--3 { grid-template-columns: minmax(0, 1fr); } .stabs .stab { padding: .6rem .75rem .7rem; gap: .15rem .6rem; } }
.tabbar__ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--w, 0); transform: translateX(var(--x, 0)); background: var(--spectrum); border-radius: 2px; transition: transform var(--t-fast) var(--ease), width var(--t-fast) var(--ease); }
.stepper, .guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .75rem 1.5rem; }
.guide > li { display: flex; gap: .85rem; align-items: flex-start; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--text-faint); transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.guide > li b { display: block; color: inherit; font-weight: 500; }
.guide > li span { display: block; font-size: var(--text-body-size); }
.guide > li.is-active, .guide > li.is-done { color: var(--text); border-top-color: var(--text); }
.guide > li.is-done { border-top-color: var(--valid); }

/* ============================== CALLOUT, KV, LISTS, TABLE ============================== */
.notice, .legal-banner, .callout { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.25rem; border: 1px solid color-mix(in srgb, var(--notice) 35%, transparent); border-left-width: 3px; border-radius: var(--r-control); background: color-mix(in srgb, var(--notice) 6%, transparent); color: var(--text-dim); font-size: var(--text-body-size); box-shadow: none; }
.notice svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .15rem; color: var(--notice); }
.notice p { margin: 0 !important; }
.kv { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; border-top: 1px solid var(--border); }
.kv dt, .kv dd { padding: .85rem 0; border-bottom: 1px solid var(--border); }
.kv dt { color: var(--text-faint); font-size: var(--text-body-size); padding-right: 1rem; }
.kv dd { color: var(--text); }
@media (max-width: 40rem) { .kv { grid-template-columns: minmax(0, 1fr); } .kv dt { border-bottom: 0; padding-bottom: 0; } }
.limits, .checklist, .steps { display: grid; gap: .9rem; }
.limits li, .checklist li { position: relative; padding-left: 1.5rem; color: var(--text-dim); }
.checklist li { --bl: calc(var(--text-body-size) * var(--lh-body)); padding-left: calc(18px + .75rem); }
.limits li::before { content: ''; position: absolute; left: 0; top: .72em; width: .55rem; height: 1px; background: var(--border-hover); }
.checklist li::before { content: ''; position: absolute; left: 0; top: calc((var(--bl) - 18px) / 2); }
.steps { counter-reset: s; }
.steps li { --bl: calc(var(--text-body-size) * var(--lh-body)); counter-increment: s; display: grid; grid-template-columns: 22px 1fr; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--border); }
.steps li::before { content: counter(s); }
.steps strong { display: block; }
.steps span { color: var(--text-dim); font-size: var(--text-body-size); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-panel); }
/* the lit-border card look of .cap, for a table */
.table-wrap--card { background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)), var(--surface-1); box-shadow: var(--elev); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-body-size); }
th, td { text-align: left; vertical-align: top; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); }
th { color: var(--text-faint); font-weight: 500; font-size: var(--text-body-size); letter-spacing: .06em; text-transform: uppercase; background: var(--surface-1); }
tr:last-child td { border-bottom: 0; }
td { color: var(--text-dim); }
.def { display: grid; gap: 1rem; } .def dt { color: var(--text); font-weight: 500; } .def dd { color: var(--text-dim); font-size: var(--text-body-size); }
.gloss { display: grid; gap: 0; border-top: 1px solid var(--border); } .gloss__i { display: grid; grid-template-columns: minmax(10rem, 1fr) 3fr; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--border); } .gloss__i dt { color: var(--text); font-weight: 500; } .gloss__i dd { color: var(--text-dim); }
@media (max-width: 40rem) { .gloss__i { grid-template-columns: minmax(0, 1fr); gap: .25rem; } }
.two-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 52rem) { .two-lists { grid-template-columns: minmax(0, 1fr); } }

/* ============================== DOCUMENT LISTS (specification, documents) ============================== */
.spec-tools { display: grid; gap: 1rem; margin-bottom: 2rem; }
.search { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.search input { max-width: 26rem; }
.chips { display: flex; flex-wrap: wrap; }
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cat { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--r-control); text-decoration: none; background: var(--surface-1); transition: border-color var(--t-fast) var(--ease); }
.cat:hover { border-color: var(--border-hover); }
.cat span { color: var(--text-faint); }
@media (max-width: 60rem) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc, .docentry { display: grid; gap: .6rem; padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); align-content: start; transition: border-color var(--t-fast) var(--ease); }
.doc:hover, .docentry:hover { border-color: var(--border-hover); }
.doc__id { font: 400 var(--text-code-size) var(--mono); color: var(--text-faint); }
.doc__meta, .doc__links, .docentry__act { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: var(--text-body-size); color: var(--text-faint); }
.doc__links a, .docentry__act a { color: var(--text); }
#list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 52rem) { #list { grid-template-columns: minmax(0, 1fr); } }
.legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.legal__toc { grid-column: span 4; } .legal__body { grid-column: span 8; display: grid; gap: 1.25rem; max-width: var(--measure); color: var(--text-dim); }
@media (max-width: 60rem) { .legal__toc, .legal__body { grid-column: 1 / -1; } }

/* ============================== HEADER ============================== */
.c-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.c-brand { display: inline-flex; flex: none; }
.c-brand img { height: 1.375rem; width: auto; }
.c-card { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .85rem; align-items: start; height: 100%; padding: .85rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); text-decoration: none; color: var(--text); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.c-card:hover, .c-card:focus-visible { border-color: var(--border-hover); background: var(--surface-2); transform: translateY(-1px); }
.c-card[aria-current="page"] { border-color: color-mix(in srgb, var(--brand-blue) 55%, transparent); }
.c-card__t { display: grid; gap: .15rem; } .c-card__t small { color: var(--text-faint); }
.c-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; color: var(--text-dim); background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid var(--border); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.c-ico svg { width: 1.25rem; height: 1.25rem; }
.c-card:hover .c-ico, .c-card:focus-visible .c-ico { color: var(--bg); border-color: transparent; background: var(--spectrum); }
.c-quiet { color: var(--text-dim); text-decoration: none; font-size: var(--text-body-size); transition: color var(--t-fast) var(--ease); }
.c-quiet:hover { color: var(--text); }

/* ============================== FOOTER (six aligned columns, one per menu) ============================== */
.c-foot { border-top: 1px solid transparent; border-image: var(--rule-fade) 1; padding-block: 2rem 1.25rem; color: var(--text-dim); font-size: var(--text-body-size); }
.c-foot { --fx: 0%; --fy: 100%; --fc1: var(--framed-orange); --fc2: var(--framed-magenta); --fk: .6; } /* the footer takes the shared dot grid and corner glow (third list of FRAMED BOXES: no veil, no hairline, so no hard edge at its top) */
.c-foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; margin-bottom: 1.25rem; }
.c-foot__brand { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.c-foot__brand img { height: 1.25rem; width: auto; }
.c-foot__top .c-social { margin-top: 0; }
.c-foot__cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem 1.25rem; align-items: start; }
.c-foot h2 { font-size: var(--text-small-size); line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin-bottom: .5rem; }
.c-foot li a { display: inline-flex; align-items: center; min-height: 1.5rem; color: var(--text-dim); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: .25em; line-height: 1.5; white-space: nowrap; transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease); }
.c-foot a:hover { color: var(--text); }
.c-foot li a:hover { text-decoration: underline; text-decoration-color: var(--brand-blue); }
.c-foot a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.c-foot .fw-xi { width: .62em; height: .62em; margin-left: .35em; opacity: .7; flex: none; }
.c-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 2rem; margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--border); color: var(--text-faint); font-size: var(--text-body-size); line-height: 1.5; }
.c-foot__base p { margin: 0; }
@media (min-width: 64.01rem) and (max-width: 80rem) { .c-foot li a { font-size: var(--text-small-size); } }
@media (max-width: 64rem) { .c-foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .c-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================== HOME: HERO, FLOW ============================== */
/* ---- Hero: arc, logo, then text, on one centre axis ---- */
.c-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--header-h)); padding-block: clamp(1.5rem, 5svh, 4rem) clamp(3.5rem, 8svh, 5.5rem); text-align: center; }
/* no hero bottom fade: the glow layer (.bg) is one continuous fixed layer under hero and sections, so there is no seam to hide */
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; opacity: .42; will-change: transform; transform: translate3d(calc(var(--px, 0) * 1.4px), calc(var(--py, 0) * 1px), 0); }
.aurora i:nth-child(1) { left: -20vmax; top: -6%; background: radial-gradient(closest-side, rgba(252, 106, 2, .55), rgba(248, 21, 48, .22) 55%, transparent); }
.aurora i:nth-child(2) { right: -22vmax; top: -10%; background: radial-gradient(closest-side, rgba(1, 137, 253, .5), rgba(90, 93, 203, .24) 55%, transparent); }
.aurora i:nth-child(3) { left: 24%; top: 20%; width: 54vmax; height: 40vmax; background: radial-gradient(closest-side, rgba(192, 46, 98, .42), rgba(90, 93, 203, .2) 60%, transparent); }
/* the arc zone is its own block in the flow, so the arc and the logo can never overlap the text below */
.c-hero__arc { position: relative; width: 100%; height: clamp(15rem, min(25vw, 38svh), 24rem); flex: none; margin-bottom: clamp(1rem, 3svh, 2.5rem); }
.c-hero__arc canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stations { position: absolute; inset: 0; pointer-events: none; }
.stations li { position: absolute; transform: translateX(-50%); font-size: var(--text-small-size); letter-spacing: .16em; text-transform: uppercase; color: rgba(233, 236, 243, .78); white-space: nowrap; }
.stations li:nth-child(1) { left: 15%; top: calc(80% + 1.5rem); } .stations li:nth-child(2) { left: 38.5%; top: calc(30% + 1.5rem); }
.stations li:nth-child(3) { left: 61.5%; top: calc(30% + 1.5rem); } .stations li:nth-child(4) { left: 85%; top: calc(80% + 1.5rem); }
@media (max-width: 40rem) {
  .c-hero__arc { height: 15rem; }
  .stations li { font-size: var(--text-small-size); letter-spacing: .1em; }
  .stations li:nth-child(1) { left: 12%; top: calc(82% + 1.2rem); } .stations li:nth-child(2) { left: 36%; top: calc(34% + 1.2rem); }
  .stations li:nth-child(3) { left: 64%; top: calc(34% + 1.2rem); } .stations li:nth-child(4) { left: 88%; top: calc(82% + 1.2rem); }
}
/* the logo sits under the crown of the arc and is ignited by the travelling dot (--lit, --lo and --g are set by the scene) */
.hero-logo { position: absolute; left: 50%; top: 54%; transform: translateX(-50%); width: clamp(13.75rem, 33vw, 31.5rem); aspect-ratio: 1941 / 453; --lit: 100%; --lo: 1; --g: .3; }
.hero-logo::before { content: ''; position: absolute; inset: -90% -22%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(1, 137, 253, .3), rgba(192, 46, 98, .18) 45%, transparent 75%); opacity: var(--g); }
.hero-logo span, .hero-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-logo__dim { opacity: .24; }
.hero-logo__lit { opacity: var(--lo); -webkit-mask-image: linear-gradient(90deg, #000 var(--lit), transparent calc(var(--lit) + 16%)); mask-image: linear-gradient(90deg, #000 var(--lit), transparent calc(var(--lit) + 16%)); }
@media (max-width: 40rem) { .hero-logo { top: 58%; } }
.c-hero__in { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; margin-inline: auto; }
.c-hero__in > * { margin: 0; }
.c-hero__in h1 { max-width: none; text-wrap: balance; }
@media (max-width: 39.99rem) { .br-d { display: none; } }
.c-hero__in .lede { margin-top: 1.5rem; max-width: 70ch; text-wrap: pretty; color: #c3c9d6; }
.c-hero__in h1 { margin-top: 0; }
.c-hero__in .lede { margin-top: 1.75rem; }
.c-hero__in .cta-row { margin-top: 2.5rem; justify-content: center; }
.scroll-cue { position: absolute; left: 50%; bottom: 1rem; width: 2.5rem; height: 2.5rem; margin-left: -1.25rem; display: grid; place-items: center; color: var(--text-faint); text-decoration: none; }
.scroll-cue svg { width: 1.25rem; height: 1.25rem; }
.scroll-cue:hover { color: var(--text); }
@media (prefers-reduced-motion: no-preference) { @keyframes cue { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(5px); opacity: 1; } } .scroll-cue svg { animation: cue 2.4s var(--ease) infinite; } }


/* ---- connectors: a line that is drawn down the page as you scroll, linking the sections ---- */
.connector { position: relative; height: 0; z-index: 2; }
.connector i { position: absolute; left: 50%; top: -2.75rem; width: 1px; height: 5.5rem; background: linear-gradient(180deg, transparent, var(--brand-indigo) 30%, var(--brand-blue)); transform: scaleY(var(--p, 1)); transform-origin: top; }
@media (max-width: 47.99rem) { .connector i { top: -1.5rem; height: 3rem; } }
.connector i::after { content: ''; position: absolute; left: -3px; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-blue); box-shadow: 0 0 14px 2px rgba(1, 137, 253, .7); opacity: var(--dot, 0); }

/* ---- sections: colour where it carries meaning ---- */
.section--glow { position: relative; isolation: isolate; }
.section--glow::before { content: ''; position: absolute; inset: 8% -10% auto -10%; height: 70%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 30% 40%, rgba(90, 93, 203, .2), transparent), radial-gradient(ellipse 45% 55% at 75% 55%, rgba(1, 137, 253, .16), transparent), radial-gradient(ellipse 30% 40% at 50% 80%, rgba(192, 46, 98, .12), transparent); }
.sec-head .eyebrow { display: inline-flex; align-items: center; gap: .6rem; }
.sec-head .eyebrow::before { content: ''; width: 1.1rem; height: 2px; border-radius: 2px; background: var(--spectrum); }
.numeral b { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.c-flow__rail b { position: absolute; top: -4px; left: calc((100% + .875rem) * var(--k, 0)); margin-left: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px 3px rgba(255, 255, 255, .55), 0 0 28px 8px rgba(1, 137, 253, .45); transition: left var(--t) var(--ease); }
.c-flow__rail { overflow: visible; }
.c-flow__n { transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease); }
.c-flow__btn[aria-pressed="true"] .c-flow__n { box-shadow: 0 0 0 4px rgba(1, 137, 253, .22); }
.final { background: radial-gradient(ellipse 60% 52% at 50% 56%, rgba(90, 93, 203, .18), transparent 70%); }
.final .cta-row { gap: var(--btn-row); }

/* ---- the console (shared by /try and the animated preview on the homepage) ---- */
.console { border: 1px solid var(--border-hover); border-radius: 18px; background: rgba(12, 14, 20, .92); box-shadow: var(--elev), 0 40px 80px -40px rgba(1, 137, 253, .35); overflow: hidden; }
.console__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .75rem 1rem .75rem 1.25rem; border-bottom: 1px solid var(--border); }
.console__title { font-size: var(--text-body-size); color: var(--text-faint); display: inline-flex; align-items: center; gap: .6rem; }
.console__title::before { content: ''; background: var(--spectrum); }
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 0; padding: 0; border: 0; border-radius: 22px; background: rgba(255, 255, 255, .04); position: relative; }
.seg > :not(.seg__ink) { z-index: 1; color: var(--text-faint); cursor: default; }
.seg button { cursor: pointer; } .seg button:hover { color: var(--text); }
.seg .is-on, .seg [aria-selected="true"] { color: var(--text); }
.seg__ink { position: absolute; z-index: 0; top: var(--y, 0); height: var(--h, 100%); left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-hover); transition: transform var(--t-fast) var(--ease), width var(--t-fast) var(--ease), top var(--t-fast) var(--ease), height var(--t-fast) var(--ease); }
.console--mini .seg .is-on { background: var(--surface-2); border: 1px solid var(--border-hover); }
.console__body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.console__in, .console__out { padding: 1.25rem; display: grid; gap: .9rem; align-content: start; min-width: 0; }
.console__out { border-left: 1px solid var(--border); background: rgba(255, 255, 255, .012); }
.console__label { font-size: var(--text-body-size); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.console__code { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); min-height: 11.5rem; white-space: pre-wrap; word-break: break-all; }
.console__btn { justify-self: start; }
.console__btn.is-press { transform: scale(.96); box-shadow: 0 0 0 5px rgba(255, 255, 255, .14); }
.console__status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .7rem 1.25rem; border-top: 1px solid var(--border); background: rgba(0, 0, 0, .25); font: 400 var(--text-code-size) var(--mono); color: var(--text-faint); }
.console__status > span:first-child { font-family: var(--font); font-weight: 600; letter-spacing: .05em; color: var(--text-dim); }
.console__status.is-valid > span:first-child { color: var(--valid); } .console__status.is-invalid > span:first-child { color: var(--invalid); } .console__status.is-input > span:first-child { color: var(--notice); }
.console__digest { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-actions { margin-top: 2rem; justify-content: center; }
@media (max-width: 52rem) { .console__body { grid-template-columns: minmax(0, 1fr); } .console__out { border-left: 0; border-top: 1px solid var(--border); } .console__status { grid-template-columns: auto minmax(0, 1fr); } .console__status > span:last-child { display: none; } .console--mini .seg { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  @keyframes aurora-a { from { transform: translate3d(calc(var(--px, 0) * 1.4px), calc(var(--py, 0) * 1px), 0) scale(1); } to { transform: translate3d(calc(var(--px, 0) * 1.4px + 6vmax), calc(var(--py, 0) * 1px - 3vmax), 0) scale(1.15); } }
  .aurora i { animation: aurora-a 22s ease-in-out infinite alternate; }
  .aurora i:nth-child(2) { animation-duration: 27s; animation-direction: alternate-reverse; } .aurora i:nth-child(3) { animation-duration: 31s; }
  .connector i::after { animation: dot-pulse 2.4s ease-in-out infinite; }
  @keyframes dot-pulse { 50% { box-shadow: 0 0 22px 5px rgba(1, 137, 253, .9); } }
}

.c-flow { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.c-flow__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.c-flow__steps li { position: relative; }
.c-flow__steps li { z-index: 1; }
.c-flow__btn { display: grid; justify-items: start; gap: .6rem; width: 100%; min-height: 4rem; padding: .25rem .25rem .5rem 0; background: none; border: 0; color: var(--text-faint); font-size: var(--text-body-size); cursor: pointer; text-align: left; transition: color var(--t-fast) var(--ease); }
.c-flow__btn:hover, .c-flow__btn[aria-pressed="true"] { color: var(--text); }
.c-flow__n { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--border-hover); border-radius: 50%; background: var(--bg); font: 400 var(--text-code-size) var(--mono); position: relative; z-index: 1; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.c-flow__btn[aria-pressed="true"] .c-flow__n { border-color: var(--text); background: var(--text); color: var(--bg); }
.c-flow__wrap { position: relative; }
.c-flow__rail { position: absolute; left: .875rem; right: 0; top: 1.125rem; height: 1px; background: var(--border); z-index: 0; pointer-events: none; }
.c-flow__rail i { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--spectrum); border-radius: 2px; transform: scaleX(var(--draw, 0)); transform-origin: left; transition: transform var(--t) var(--ease); }
.c-flow__panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; min-height: 10rem; }
.c-flow__copy { grid-column: span 5; display: grid; gap: .75rem; align-content: start; }
.c-flow__copy p { color: var(--text-dim); max-width: 38ch; }
.c-flow__code { grid-column: span 7; }
.c-flow__copy, .c-flow__code { transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.c-flow.is-swap .c-flow__copy, .c-flow.is-swap .c-flow__code { opacity: 0; transform: translateY(6px); }
.c-flow__code { border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); box-shadow: var(--elev); white-space: pre-wrap; word-break: break-all; }
.c-flow__code b { color: var(--text); font-weight: 500; }
@media (max-width: 40rem) {
  .c-flow__steps { grid-template-columns: minmax(0, 1fr); }
  .c-flow__btn { grid-template-columns: 1.75rem 1fr; align-items: center; min-height: 2.75rem; padding-block: .25rem; gap: .85rem; }
  .c-flow__rail { left: .875rem; right: auto; top: 1.5rem; bottom: 1.5rem; width: 1px; height: auto; } .c-flow__rail b { display: none; }
  .c-flow__rail i { width: 3px; left: -1px; top: 0; height: 100%; transform: scaleY(var(--draw, 0)); transform-origin: top; }
}
@media (max-width: 60rem) { .c-flow__copy, .c-flow__code { grid-column: 1 / -1; } }
.numerals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.numeral { display: grid; gap: .25rem; padding-top: 1.25rem; border-top: 1px solid var(--border-hover); }
.numeral b { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.025em; font-weight: 500; font-variant-numeric: tabular-nums; }
.numeral span { color: var(--text-dim); font-size: var(--text-body-size); }
@media (max-width: 40rem) { .numerals { grid-template-columns: minmax(0, 1fr); } }

/* ============================== HUB (/try) ============================== */
.hub { display: grid; gap: 2rem; }
.hub__panel[hidden] { display: none !important; }
.hub__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: start; }
@media (max-width: 60rem) { .hub__grid { grid-template-columns: minmax(0, 1fr); } }
.pipe { display: grid; border: 1px solid var(--border); border-radius: var(--r-control); overflow: hidden; }
.pipe li { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: .7rem 1rem; align-items: baseline; font-size: var(--text-body-size); color: var(--text-dim); transition: background var(--t) var(--ease); }
.pipe li + li { border-top: 1px solid var(--border); }
.pipe b { font-weight: 500; color: var(--text-dim); }
.pipe code { font: 400 var(--text-code-size)/1.55 var(--mono); color: var(--text-faint); word-break: break-all; }
.pipe .verdict { font-weight: 600; letter-spacing: .05em; }
.pipe li.ok b, .pipe li.ok .verdict { color: var(--valid); }
.pipe li.bad { background: color-mix(in srgb, var(--invalid) 7%, transparent); }
.pipe li.bad b, .pipe li.bad .verdict { color: var(--invalid); }
.pipe .diff { color: var(--invalid); background: color-mix(in srgb, var(--invalid) 20%, transparent); }
@media (max-width: 40rem) { .pipe li { grid-template-columns: minmax(0, 1fr); gap: .15rem; } }
.vec-table td:first-child { font-family: var(--mono); color: var(--text); white-space: nowrap; }
.vec-table .btn { white-space: nowrap; }
.vec-note { max-width: var(--measure); }
/* simulator */
.pg-runs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 40rem) { .pg-runs { grid-template-columns: minmax(0, 1fr); } }
.run { display: grid; gap: .35rem; text-align: left; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); cursor: pointer; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.run:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.run[aria-pressed="true"] { border-color: var(--text); }
.run__t { font-weight: 500; } .run__d { color: var(--text-dim); font-size: var(--text-body-size); } .run__k { color: var(--text-faint); font-size: var(--text-body-size); }
.run__k--fx { color: var(--notice); }
.pg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.pg-bar__step { display: flex; gap: .5rem; }
.pg-prog { position: relative; flex: 1; min-width: 12rem; height: 2.25rem; display: flex; align-items: center; color: var(--text-faint); font-size: var(--text-body-size); }
.pg-prog i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--spectrum); border-radius: 2px; transition: width var(--t) var(--ease); }
.pg-prog::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--border); border-radius: 2px; }
.pg { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: start; }
@media (max-width: 60rem) { .pg { grid-template-columns: minmax(0, 1fr); } }
.pg__term, .pg__ev { border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); box-shadow: var(--elev); overflow: hidden; }
.pg__bar, .pg__evh { display: flex; align-items: center; gap: .6rem; padding: .75rem 1.25rem; min-height: 3.25rem; border-bottom: 1px solid var(--border); color: var(--text-faint); font-size: var(--text-body-size); justify-content: space-between; }
.pg__bar i { display: none; }
.pg__kind { font-size: var(--text-body-size); letter-spacing: .06em; }
.pg__screen { min-height: 18rem; max-height: 26rem; overflow: auto; padding: 1.1rem 1.25rem; font: 400 var(--text-code-size)/1.7 var(--mono); color: var(--text-dim); white-space: pre-wrap; word-break: break-word; }
.pg__screen .ok { color: var(--valid); } .pg__screen .bad, .pg__screen .no { color: var(--invalid); } .pg__screen .hd, .pg__screen .k { color: var(--text); } .pg__screen .c, .pg__screen .dim { color: var(--text-faint); }
.pg__empty { color: var(--text-faint); }
.pg__banner { margin: 0; padding: .75rem 1.25rem; border-top: 1px solid var(--border); color: var(--notice); font-size: var(--text-body-size); }
.pg__evn { padding: .75rem 1.25rem; color: var(--text-faint); font-size: var(--text-body-size); line-height: 1.55; border-top: 1px solid var(--border); }
.pg__chain { display: grid; padding: .5rem 1.25rem; }
.pg__chain li { display: grid; gap: .1rem; padding: .6rem 0; font: 400 var(--text-code-size)/1.5 var(--mono); color: var(--text-faint); border-bottom: 1px solid var(--border); }
.pg__chain li b { color: var(--text); font-weight: 500; }
.pg__rcpt { border-top: 1px solid var(--border); }
.pg__rd { display: grid; grid-template-columns: 6rem 1fr; gap: .4rem 1rem; padding: 1rem 1.25rem 0; font-size: var(--text-body-size); color: var(--text-faint); }
.pg__rcpt .meta { padding: .5rem 1.25rem; }
.pg__rcpt .code { margin: 0 1.25rem 1.25rem; }
.pg-sum { border: 1px solid var(--border); border-radius: var(--r-panel); padding: 1.5rem; display: grid; gap: .75rem; background: var(--surface-1); }
.pg-sum p { color: var(--text-dim); max-width: var(--measure); }
.pg-hint { max-width: var(--measure); }
.pill-note { justify-self: start; display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .9rem; border: 1px solid var(--border-hover); border-radius: 999px; color: var(--text-dim); font-size: var(--text-body-size); }
.pill-note__dot { background: var(--notice); }

/* ============================== MOTION: one system, ease-out, two durations ============================== */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
  .c-hero__in > *, .page-hero > .wrap > * { animation: rise var(--t) var(--ease) backwards; }
  .c-hero__in > :nth-child(2), .page-hero > .wrap > :nth-child(2) { animation-delay: 90ms; }
  .c-hero__in > :nth-child(3), .page-hero > .wrap > :nth-child(3) { animation-delay: 180ms; }
  .c-hero__in > :nth-child(4), .page-hero > .wrap > :nth-child(4) { animation-delay: 270ms; }
  .fx .rv { opacity: 0; transform: translateY(14px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); transition-delay: var(--d, 0ms); }
  .fx .rv.is-in { opacity: 1; transform: none; }
  .pg__chain li.new { animation: rise var(--t) var(--ease); }
  .hub__panel:not([hidden]) { animation: rise var(--t-fast) var(--ease); }
  .result__verdict { animation: rise var(--t-fast) var(--ease); }
  .result .status { animation: pop var(--t-fast) var(--ease) 80ms backwards; }
  .checks li { animation: rise var(--t-fast) var(--ease) backwards; }
  .checks li:nth-child(1) { animation-delay: 160ms; } .checks li:nth-child(2) { animation-delay: 240ms; } .checks li:nth-child(3) { animation-delay: 320ms; } .checks li:nth-child(4) { animation-delay: 400ms; } .checks li:nth-child(5) { animation-delay: 480ms; } .checks li:nth-child(n+6) { animation-delay: 560ms; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 160ms var(--ease) both vt-out; }
  ::view-transition-new(root) { animation: 240ms var(--ease) both vt-in; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; } }
}

/* spacing helpers used by page bodies (no inline styles anywhere) */
.c-flow + p, .grid + p, .numerals + p, .grid + .numerals { margin-top: 2.25rem; }
.grid + .numerals { margin-top: 3rem; }
.final .sec-head { justify-items: start; text-align: left; margin-bottom: 0; }
.final .sec-head h2 { max-width: 32ch; }
.final .cta-row { justify-content: center; }

/* numbered lists (investors) and the calm gap between a page opening and its first section */
.numlist { display: grid; border-top: 1px solid var(--border); }
.numlist li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.numlist .n { font: 400 var(--text-code-size) var(--mono); color: var(--text-faint); }
.numlist b { display: block; font-weight: 500; color: var(--text); }
.numlist span:not(.n) { color: var(--text-dim); font-size: var(--text-body-size); }
@media (max-width: 40rem) { .numlist li { grid-template-columns: 2.5rem minmax(0, 1fr); } .numlist li > a { grid-column: 2; } }
.page-hero + .section { padding-top: clamp(1rem, 2vw, 2rem); }

/* local design review page (/_design/) */
.ds-sw { display: block; width: 100%; height: 3rem; border: 1px solid var(--border-hover); border-radius: var(--r-control); }
.ds-sw[data-c="bg"] { background: var(--bg); } .ds-sw[data-c="surface-1"] { background: var(--surface-1); } .ds-sw[data-c="surface-2"] { background: var(--surface-2); }
.ds-sw[data-c="spectrum"] { background: var(--spectrum); } .ds-sw[data-c="valid"] { background: var(--valid); } .ds-sw[data-c="invalid"] { background: var(--invalid); }
.ds-sw[data-c="notice"] { background: var(--notice); } .ds-sw[data-c="text"] { background: var(--text); }
.stack > *, .stack-lg > *, .hub__grid > *, .hub > *, .pg > *, .grid > *, .two-col > * { min-width: 0; }
.pipe code { background: none; border: 0; padding: 0; }
.disclosure summary { list-style: none; gap: .5rem; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before { content: ''; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease); }
.disclosure[open] summary::before { transform: rotate(45deg); }
.c-foot h2 { letter-spacing: .06em; text-wrap: balance; }

/* simulator transcript and evidence chain (markup produced by playground.mjs) */
.pg__screen { white-space: normal; word-break: normal; }
.ts { margin: 0 0 1.5rem; }
.ts__h { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; margin-bottom: .4rem; }
.ts__n { color: var(--text-faint); } .ts__t { color: var(--text); font-weight: 500; } .ts__f { margin-left: auto; color: var(--text-faint); font-size: var(--text-body-size); }
.ts__r { font-weight: 500; } .ts__r.pass { color: var(--valid); } .ts__r.fail { color: var(--invalid); } .ts__r.skip { color: var(--text-faint); }
.ts__l { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr); gap: 0 1rem; padding-left: 1rem; border-left: 1px solid var(--border-hover); }
.ts__l dt { color: var(--text-faint); } .ts__l dd { margin: 0; overflow-wrap: anywhere; color: var(--text); }
.caret { display: inline-block; width: .55ch; height: 1em; vertical-align: -.15em; background: var(--valid); }
@media (max-width: 40rem) { .ts__l { grid-template-columns: minmax(0, 1fr); } .ts__l dd { margin-bottom: .45rem; } }
.blkp { position: relative; margin-left: .5rem; padding: .55rem .5rem .55rem 1.2rem; border-left: 1px solid var(--border-hover); font: 400 var(--text-code-size)/1.5 var(--mono); color: var(--text-dim); }
.blkp::before { content: ''; position: absolute; left: -.28rem; top: .9rem; width: .5rem; height: .5rem; background: var(--bg); border: 1px solid var(--text-dim); transform: rotate(45deg); }
.blkp b { display: block; color: var(--text); font-weight: 500; } .blkp .h { color: var(--text-dim); } .blkp .p { color: var(--text-faint); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes blink { 50% { opacity: 0; } }
  @keyframes blkin { from { transform: translateX(14px); opacity: 0; } }
  .caret { animation: blink 1s steps(2) infinite; }
  .blkp.new { animation: blkin var(--t) var(--ease); }
}
/* sample vectors: stacked rows on small screens instead of a sideways-scrolling table */
@media (max-width: 40rem) {
  .vec-table thead { display: none; }
  .vec-table, .vec-table tbody, .vec-table tr, .vec-table td { display: block; }
  .vec-table tr { padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); display: grid; gap: .5rem; }
  .vec-table tr:last-child { border-bottom: 0; }
  .vec-table td { padding: 0; border: 0; }
  .vec-table tr[hidden] { display: none; }
}

.c-social { display: flex; gap: var(--btn-row); flex-wrap: wrap; margin-top: 1.125rem; }
.c-social a { display: grid; place-items: center; position: relative; width: var(--btn-h); height: var(--btn-h); border-radius: 50%; color: var(--text-faint); border: 1px solid var(--border); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.c-social a:hover { color: var(--text); border-color: var(--border-hover); transform: translateY(-2px); }
.c-social a:hover path { fill: url(#soc-g); }
.c-social a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.c-social svg { width: var(--btn-icon); height: var(--btn-icon); display: block; }
.console__code, .c-flow__code, pre { font-size: var(--text-code-size); }
.console--mini .console__code { font-size: var(--text-small-size); line-height: 1.55; }
.console--mini .checks li, .console .checks li { grid-template-columns: 18px 1fr auto; }
.console__code .hl { background: color-mix(in srgb, var(--invalid) 30%, transparent); color: #fff; border-radius: 2px; }
.section--glow::before { inset: 0; height: auto; -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); }
.aurora i { opacity: .46; }

/* ---- /try console ---- */
.console--app .console__body { min-height: 34rem; }
.console--app .seg { }
.console__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; min-height: 2.25rem; }
.console__in .textarea { min-height: 14rem; }
.console--app .console__in .toolbar { margin-top: .25rem; }
.console__in .code { border-radius: 12px; box-shadow: none; background: var(--bg); }
.console__in .code pre { max-height: 17rem; }
.console__out .result .checks { background: rgba(0, 0, 0, .18); }
.console__out .pipe { border-radius: 12px; background: rgba(0, 0, 0, .18); }
.console__out .pg__chain { border: 1px solid var(--border); border-radius: 12px; background: rgba(0, 0, 0, .18); max-height: 16rem; overflow: auto; }
.console__out .pg__rcpt { border: 0; display: grid; gap: .75rem; }
.console__out .pg__rd { padding: 0; }
.console__out .pg-sum { border: 0; padding: 0; background: none; }
.legend { display: grid; gap: .6rem; margin-top: .5rem; } .legend > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; align-items: start; } .legend dd { color: var(--text-dim); font-size: var(--text-body-size); }
.legend .status { font-size: var(--text-small-size); padding: .2rem .6rem; }
@media (max-width: 40rem) { .legend > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; } }
.pg-bar { margin: 0; }
.console__in .pg__term { background: var(--bg); box-shadow: none; border-radius: 12px; }
.console__in .pg__screen { min-height: 14rem; max-height: 18rem; }
.pg-runs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vec-list { display: grid; gap: .35rem; max-height: 28rem; overflow: auto; padding-right: .25rem; }
.vec { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; width: 100%; text-align: left; padding: .6rem .85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.vec:hover { border-color: var(--border-hover); } .vec[aria-pressed="true"] { border-color: var(--text); background: var(--surface-2); }
.vec__id { font: 400 var(--text-code-size) var(--mono); color: var(--text); } .vec__d { grid-column: 1; color: var(--text-dim); font-size: var(--text-body-size); } .vec__k { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: var(--text-small-size); letter-spacing: .06em; font-weight: 600; }
.vec__k--valid { color: var(--valid); } .vec__k--invalid { color: var(--invalid); }
.console__status[id="hub-status"] { position: sticky; bottom: 0; }
.pipe li { grid-template-columns: 9.5rem minmax(0, 1fr); }
.pipe li b { display: flex; align-items: center; gap: .5rem; }

/* ---- /roadmap: a sunrise horizon and a spine that is drawn as you scroll ---- */
.horizon-hero { position: relative; isolation: isolate; overflow: hidden; padding-bottom: clamp(7rem, 14vw, 12rem); }
.horizon-hero > .wrap { position: relative; z-index: 1; }
.horizon-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; --rise: 0px; }
.horizon-art i { position: absolute; left: 50%; bottom: 0; border-radius: 50%; aspect-ratio: 1; translate: -50% calc(50% + var(--rise)); }
.horizon-art i:nth-of-type(1) { width: 34vmax; background: radial-gradient(closest-side, transparent calc(100% - 1.5px), rgba(251, 186, 2, .75) calc(100% - 1.5px)); }
.horizon-art i:nth-of-type(2) { width: 54vmax; background: radial-gradient(closest-side, transparent calc(100% - 1.5px), rgba(252, 106, 2, .55) calc(100% - 1.5px)); }
.horizon-art i:nth-of-type(3) { width: 76vmax; background: radial-gradient(closest-side, transparent calc(100% - 1.5px), rgba(192, 46, 98, .5) calc(100% - 1.5px)); }
.horizon-art i:nth-of-type(4) { width: 100vmax; background: radial-gradient(closest-side, transparent calc(100% - 1.5px), rgba(1, 137, 253, .45) calc(100% - 1.5px)); }
.horizon-art b { position: absolute; left: 50%; bottom: 0; width: 120vmax; aspect-ratio: 1; border-radius: 50%; translate: -50% calc(50% + var(--rise)); background: radial-gradient(closest-side, rgba(251, 186, 2, .42) 0, rgba(252, 106, 2, .26) 18%, rgba(248, 21, 48, .16) 34%, rgba(192, 46, 98, .12) 50%, rgba(90, 93, 203, .1) 66%, rgba(1, 137, 253, .07) 82%, transparent 100%); }
.horizon-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; z-index: 0; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
.horizons { --spine: 0; position: relative; display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.horizons::before, .horizons::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px; }
.horizons::before { background: var(--border); }
.horizons::after { background: linear-gradient(180deg, var(--brand-amber), var(--brand-orange), var(--brand-red), var(--brand-magenta), var(--brand-indigo), var(--brand-blue)); transform: scaleY(var(--spine)); transform-origin: top; }
.horizon { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); --hc: var(--brand-amber); }
.horizon:nth-child(2) { --hc: var(--brand-red); } .horizon:nth-child(3) { --hc: var(--brand-indigo); } .horizon:nth-child(4) { --hc: var(--brand-blue); }
.horizon__node { position: absolute; left: 50%; top: 2.1rem; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border-hover); z-index: 1; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.horizon.is-on .horizon__node { background: var(--hc); border-color: var(--hc); box-shadow: 0 0 0 6px color-mix(in srgb, var(--hc) 24%, transparent), 0 0 24px 4px color-mix(in srgb, var(--hc) 55%, transparent); }
.horizon__card { grid-column: 1; margin-right: clamp(2rem, 5vw, 4.5rem); padding: 1.75rem; border: 1px solid var(--border); border-top: 2px solid var(--hc); border-radius: var(--r-panel); background: var(--surface-1); box-shadow: var(--elev); display: grid; gap: .85rem; align-content: start; opacity: .78; transform: translateY(8px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease); }
.horizon:nth-child(even) .horizon__card { grid-column: 2; margin-right: 0; margin-left: clamp(2rem, 5vw, 4.5rem); }
.horizon.is-on .horizon__card { opacity: 1; transform: none; border-color: var(--border-hover); border-top-color: var(--hc); }
.horizon__n { font-size: var(--text-small-size); letter-spacing: .12em; text-transform: uppercase; color: var(--hc); font-weight: 500; }
.horizon__ambition { color: var(--text); font-size: var(--text-body-size); line-height: 1.5; }
.horizon__out { display: grid; gap: .65rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.horizon__out li { position: relative; padding-left: 1.4rem; color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.55; }
.horizon__out li::before { content: ''; position: absolute; left: 0; top: calc(.775em - 4px); background: var(--hc); opacity: .85; }
@media (max-width: 52rem) {
  .horizons::before, .horizons::after { left: .55rem; }
  .horizon { grid-template-columns: minmax(0, 1fr); }
  .horizon__node { left: .55rem; }
  .horizon__card, .horizon:nth-child(even) .horizon__card { grid-column: 1; margin: 0 0 0 2.25rem; }
}

/* ---- /how-it-works figure: the hero's path, drawn statically with a quiet flowing dash ---- */
.flow-fig { display: grid; gap: 1rem; }
.flow-fig svg { width: 100%; height: auto; overflow: visible; }
.fl-glow { fill: none; stroke-width: 18; opacity: .1; stroke-linecap: round; } .fl-line { fill: none; stroke-width: 2; opacity: .8; stroke-linecap: round; }
.fl-run { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 26; opacity: .85; }
.fl-block { fill: none; stroke: var(--invalid); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: .8; }
.fl-x path { stroke: var(--invalid); stroke-width: 3; stroke-linecap: round; fill: none; }
.fl-n circle { fill: var(--bg); stroke: var(--c); stroke-width: 2.5; filter: drop-shadow(0 0 10px var(--c)); }
.fl-t { fill: var(--text); font: 500 17px var(--font); } .fl-s { fill: var(--text-faint); font: 400 13.5px var(--font); } .fl-b { fill: var(--invalid); font: 600 13px var(--font); letter-spacing: .08em; }
@media (prefers-reduced-motion: no-preference) { @keyframes fl-dash { to { stroke-dashoffset: -280; } } .fl-run { animation: fl-dash 9s linear infinite; } }
.fl-n1 { --c: #FBBA02; } .fl-n2 { --c: #F81530; } .fl-n3 { --c: #5A5DCB; } .fl-n4 { --c: #0189FD; }
.horizon-art i:nth-of-type(n) { opacity: .6; }
.horizon-hero > .wrap { text-shadow: 0 0 28px var(--bg), 0 0 8px var(--bg); }
.horizon-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(100deg, rgba(7, 8, 12, .85) 0%, rgba(7, 8, 12, .5) 38%, transparent 62%); }
@media (max-width: 40rem) {
  .c-hero { padding-block: .75rem 3.25rem; }
  .c-hero__arc { height: 13.5rem; margin-bottom: .75rem; }
  .c-hero__in .lede { margin-top: 1.25rem; }
  .c-hero__in .cta-row { margin-top: 1.75rem; flex-wrap: nowrap; }
  .c-hero__in .cta-row { flex-direction: column; width: 100%; max-width: 22rem; margin-inline: auto; }
  .c-hero__in .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .btn:hover:not(:disabled), .btn:active:not(:disabled), a.btn--primary:hover::before { transform: none; } .btn--primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 22px -10px rgba(176, 42, 94, .65); } }

/* ---- header and dropdown panels (refined) ---- */
.c-card { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .85rem; padding: .875rem 1rem; border-color: transparent; background: transparent; border-radius: 12px; align-items: center; }
.c-card:hover, .c-card:focus-visible { border-color: var(--border-hover); background: rgba(255, 255, 255, .055); transform: none; }
.c-ico { width: 2.25rem; height: 2.25rem; border-radius: 10px; }
.c-ico svg { width: 1.125rem; height: 1.125rem; }
.c-card:hover .c-ico, .c-card:focus-visible .c-ico { color: #fff; border-color: transparent; background: linear-gradient(135deg, #c4561d, #b02a5e 55%, #3f62c8); }
/* five items fit in one column when the panel is narrow */
.c-card { min-height: 4.25rem; }
.c-foot { padding-block: 1.75rem 1rem; }
.c-foot__base { margin-top: 1rem; }

/* ---- hero: the five action words ---- */
.words { --wgap: clamp(1.75rem, 4.2vw, 3.75rem); display: grid; justify-items: center; gap: .9rem; margin-top: 1.75rem; }
.words__row { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem var(--wgap); padding-bottom: .55rem; }
.word { --wc: var(--brand-orange); --wl: color-mix(in srgb, var(--wc) 72%, #fff); position: relative; font-size: var(--text-body-size); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1.4; color: var(--wl); text-shadow: 0 0 12px color-mix(in srgb, var(--wc) 28%, transparent); transition: color var(--motion-reveal) var(--ease), text-shadow var(--motion-reveal) var(--ease), opacity var(--dg-step-default) var(--ease); }
.word:nth-child(1) { --wc: var(--brand-orange); } .word:nth-child(2) { --wc: var(--brand-red); } .word:nth-child(3) { --wc: var(--brand-magenta); } .word:nth-child(4) { --wc: var(--brand-indigo); } .word:nth-child(5) { --wc: var(--brand-blue); }
.word + .word::before { content: ''; position: absolute; left: calc(var(--wgap) / -2); top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--border-hover); }
.words__cap { margin: 0; min-height: 1.6em; color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.6; text-align: center; opacity: 0; transition: opacity var(--dg-step-default) var(--ease); }
/* live: the words rest muted and light one after another on the hero clock, in the logo colours with a soft glow, then fade back (no underline, no highlight, no ink line) */
.words.is-live .word { color: #9aa3b4; text-shadow: none; }
.words.is-live .word.is-on { transition-duration: var(--t-fast); color: var(--wl); text-shadow: 0 0 14px color-mix(in srgb, var(--wc) 55%, transparent); }
.words.is-live .words__cap.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .word { opacity: .8; text-shadow: none; } }
@media (max-width: 39.99rem) { .words { --wgap: 1.4rem; margin-top: 1.25rem; } .word { font-size: var(--text-body-size); letter-spacing: .14em; } .word + .word::before { display: none; } .words__row { max-width: 19rem; gap: .5rem 1.25rem; } }
.c-hero__in .cta-row { margin-top: 1.5rem; }

/* ============================== HOME: "WHAT IT DOES" (five steps) ==============================
   Three renderings of the same DOM: (1) static, a full-width stack of five panels (no JS, reduced motion);
   (2) .is-stacked, a vertical timeline that plays each step as it arrives (tablet and phone);
   (3) .is-pinned, a sticky stage on a wide, tall screen where one scroll value drives node, dot and panel. */
.sec-head--center { justify-items: start; text-align: left; }
.sec-head--center h2 { max-width: 32ch; text-wrap: balance; }
.sec-head--center .lede { max-width: 70ch; text-wrap: pretty; }
.story { position: relative; isolation: isolate; border-top: 0; overflow-anchor: none; }
.story__pin { position: relative; }
.story__pin::before { content: ''; position: absolute; inset: -6% 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 46% 42% at 50% 8%, rgba(90, 93, 203, .16), transparent 70%), radial-gradient(ellipse 36% 36% at 82% 70%, rgba(1, 137, 253, .08), transparent 70%), radial-gradient(ellipse 34% 34% at 14% 60%, rgba(248, 21, 48, .06), transparent 70%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); }
.track, .story__prog { display: none; }
/* the step panel. Local sizes in ONE place (everything else reads the shared tokens: --text-body-size 14, --text-small-size 12, --text-card-title, --r-control):
   --s5-pad = panel padding (28 to 32 px), --s5-gap = gap between the text zone and the visual zone, --s5-num = step numeral width (its height is 2/3 of it),
   --s5-in = padding inside the nested cards, --s5-line = hairline inside a nested card, --s5-conn = connector lines. */
.story { --s5-pad: clamp(1.75rem, 2.2vw, 2rem); --s5-gap: 2rem; --s5-num: 4.75rem; --s5-in: 1rem; --s5-line: rgba(255, 255, 255, .07); --s5-conn: rgba(255, 255, 255, .22); }
.steps5 { display: grid; gap: 1.25rem; }
.st5 { display: grid; gap: 1.25rem; padding: var(--s5-pad); border: 1px solid var(--border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)), var(--surface-1); box-shadow: var(--elev); }
.st5__head { display: flex; align-items: center; gap: .9rem; }
.st5__head > div { display: grid; gap: .1rem; }
.st5__head small { font-size: var(--text-small-size); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.st5__head span:not(.c-ico) { font-size: var(--text-body-size); color: var(--text-dim); }
.st5__cols { display: grid; gap: 1.5rem var(--s5-gap); align-items: stretch; }
@media (min-width: 56.25rem) { .st5__cols { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); } }
/* text zone: numeral, title, text, why-it-matters inset, step counter (pinned to the bottom edge) */
.st5__copy { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.st5__num { display: flex; align-items: center; gap: .9rem; }
.st5__n { flex: none; width: var(--s5-num); height: auto; overflow: visible; opacity: .8; }
.st5__n text { font-family: var(--font); font-size: 54px; font-weight: 200; letter-spacing: -.02em; font-variant-numeric: tabular-nums; fill: none; stroke-width: 1.1; }
.st5__num small { font-size: var(--text-small-size); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.st5 .st5__copy > p:not([class]) { max-width: 44ch; color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.55; }
.st5__why { margin-top: .15rem; padding-top: .95rem; border-top: 1px solid var(--s5-line); }
.st5__inset { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; padding: .8rem .95rem .8rem 1.15rem; }   /* content only: no fill, border or radius; the padding is plain spacing that keeps the content where it was (and the text wrap), and the left gap is the accent line's */
.st5__inset::before { content: ''; position: absolute; left: 0; top: .55rem; bottom: .55rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--brand-amber), var(--brand-magenta) 55%, var(--brand-blue)); opacity: .5; }
.st5__inset .c-ico { width: 2rem; height: 2rem; border-radius: 8px; }
.st5__inset .c-ico svg { width: 1rem; height: 1rem; }
.st5__inset > div { display: grid; gap: .2rem; min-width: 0; }
.st5__inset b { font-size: var(--text-small-size); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--text-faint); }
.st5__inset span { font-size: .9375rem; line-height: 1.45; color: var(--text); }
.st5__seg { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; gap: .9rem; }
.st5__cnt { flex: none; font: 500 var(--text-small-size)/1 var(--mono); letter-spacing: .06em; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.st5__bar { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; }
.st5__bar li { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.st5__bar li.is-past { background: rgba(255, 255, 255, .3); }
.st5__bar li.is-cur { background: var(--spectrum); }
/* visual zone: the card fills the zone from the same top edge as the text zone; the footnote sits on the same bottom edge as the step counter */
.st5__vis { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .7rem; min-width: 0; }
.vc__src { font-size: var(--text-body-size); color: var(--text-faint); text-align: right; }
/* nested cards: flat opaque, hairline border (fill comes from the FRAMED BOXES block) */
.vc { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--border); border-radius: var(--r-control); overflow: hidden; }
.vc__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem var(--s5-in); border-bottom: 1px solid var(--s5-line); font: 500 var(--text-small-size)/1.3 var(--mono); letter-spacing: .04em; color: var(--text-faint); }
.vc__bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc__bar span:first-child { font-family: var(--font); letter-spacing: .02em; color: var(--text-dim); }
.vc code { padding: 0; border: 0; background: none; font: 400 var(--text-small-size)/1.5 var(--mono); color: var(--text); }
.vc__rows { display: grid; flex: 1; grid-auto-rows: minmax(2.5rem, 1fr); padding: 0 var(--s5-in); }
.vc__rows > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--s5-line); }
.vc__rows > div:last-child { border-bottom: 0; }
.vc dt { font-size: var(--text-body-size); color: var(--text-faint); }
.vc dd { font: 400 var(--text-small-size)/1.5 var(--mono); color: var(--text); overflow-wrap: anywhere; }
.vcr.is-sig dd { color: var(--brand-amber); }
.vc__foot { display: flex; align-items: center; gap: .8rem; padding: .75rem var(--s5-in); border-top: 1px solid var(--s5-line); }
.vc__lbl { flex: 1; font-size: var(--text-body-size); color: var(--text-dim); }
.vc__seal { width: 1.5rem; height: 1.5rem; color: var(--valid); }
.vc__seal svg { display: block; width: 100%; height: 100%; }
.v-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .75rem .2rem .45rem; border: 1px solid var(--border-hover); border-radius: 999px; font: 500 var(--text-small-size)/1.3 var(--mono); letter-spacing: .04em; color: var(--text-dim); }
.vc__ring { position: relative; width: 1.1rem; height: 1.1rem; }
.vc__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 4; }
.rg-b { stroke: rgba(255, 255, 255, .12); } .rg-f { stroke: var(--brand-blue); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.vc__prompt .is-bad, .vc__hash.is-bad { color: var(--invalid); }
.vc__pend { visibility: hidden; }   /* the not-yet-typed rest of a digest keeps its place, so typing never re-wraps or grows the row */
/* 2 Binding: request and prompt, then the comparison joined by a vertical connector */
.vc__rows--fix { flex: none; grid-auto-rows: auto; }
.v-cmp { flex: 1; display: grid; grid-template-rows: auto minmax(3rem, 1fr) auto; align-content: center; padding: var(--s5-in); border-top: 1px solid var(--s5-line); }
.v-hb { display: grid; gap: .35rem; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: 8px; }
.v-lbl { font-size: var(--text-body-size); color: var(--text-faint); }
.v-hb .vc__hash { display: block; overflow-wrap: anywhere; word-break: break-all; }
.v-mid { position: relative; display: flex; align-items: center; justify-content: center; }
.v-mid::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: linear-gradient(180deg, var(--brand-amber), var(--brand-magenta) 50%, var(--brand-blue)); opacity: .6; transform-origin: top; }
.v-mid__g { position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: .25rem .6rem; border-radius: 999px; background: var(--nest-fill); }
.v-eq { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--border-hover); border-radius: 50%; font: 400 1.25rem/1 var(--mono); color: var(--text-dim); }
.v-mid .status { min-width: 6.5rem; }
/* 3 Decision: two outcome cards, a thin divider with a small "vs" node, a vertical pipeline of checks in each */
.v-two { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem minmax(0, 1fr); min-height: 0; }
.v-vs { position: relative; display: grid; place-items: center; }
.v-vs::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: linear-gradient(180deg, transparent, var(--border-hover) 20%, var(--border-hover) 80%, transparent); }
.v-vs span { position: relative; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font: 500 var(--text-small-size)/1 var(--mono); letter-spacing: .02em; color: var(--text-faint); }
.dc { display: flex; flex-direction: column; gap: .8rem; min-width: 0; min-height: 0; padding: .85rem var(--s5-in) var(--s5-in); border: 1px solid var(--border); border-radius: var(--r-control); }
.dc__h { padding-bottom: .65rem; border-bottom: 1px solid var(--s5-line); font-size: var(--text-small-size); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.dc__l { display: grid; flex: 1; grid-auto-rows: minmax(2.6rem, 1fr); }
.dc__l li { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: .7rem; align-content: start; font-size: var(--text-body-size); line-height: 1.25rem; color: var(--text-dim); }
.dc__l li > .tick { grid-row: 1 / span 2; margin-top: 1px; justify-self: center; }
.dc__l li > code { grid-column: 2; padding: 0; border: 0; background: none; font: 400 var(--text-small-size)/1.4 var(--mono); color: var(--text-faint); overflow-wrap: anywhere; }
.dc__l li:not(:last-child)::after { content: ''; position: absolute; left: .75rem; top: 24px; bottom: 2px; width: 0; border-left: 1px solid var(--s5-conn); transform-origin: top; }
.dc__l li[data-state="fail"]::after, .dc__l li[data-state="skip"]::after { border-left-style: dashed; }
.dc__l li[data-state="skip"] { opacity: .45; }
.dc__out { display: grid; gap: .5rem; align-content: start; justify-items: center; min-height: 4.6rem; text-align: center; }   /* the outcome (a wide pill and one sentence) is reserved from the start, so revealing it does not grow the card */
.dc__out .status { justify-self: stretch; width: 100%; min-height: 2.25rem; }
.dc__out small { font-size: var(--text-body-size); color: var(--text-dim); }
/* 4 Record: slim entry rows joined by a vertical chain; the Merkle leaf and signed root sit under one bracket */
.chb { display: grid; flex: 1; grid-template-rows: auto minmax(.9rem, 1fr) auto minmax(.9rem, 1fr) auto; padding: var(--s5-in); }
.chb__b { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 8px; font-size: var(--text-body-size); }
.chb__b b { font-weight: 500; color: var(--text); }
.chb__b small { font: 400 var(--text-small-size)/1.3 var(--mono); color: var(--text-faint); }
.chb__l { position: relative; justify-self: center; width: 1px; min-height: .9rem; background: linear-gradient(180deg, var(--brand-indigo), var(--brand-blue)); opacity: .75; transform-origin: top; }
.chb__l::before { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border: 1px solid var(--brand-indigo); border-radius: 50%; background: var(--nest-fill); }
.chb__g { position: relative; display: grid; grid-template-rows: auto minmax(.9rem, 1fr) auto; padding-left: 1rem; }
.chb__g .chb__l { left: -.5rem; }
.chb__g::before { content: ''; position: absolute; left: 0; top: 1.15rem; bottom: 1.15rem; width: .5rem; border: 1px solid var(--border-hover); border-right: 0; border-radius: 6px 0 0 6px; }
/* 5 Receipt: the signed receipt, an arrow, the independent verifier with its three checks and the VALID badge */
.v-pair { display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr); min-height: 0; }
.v-arrow { position: relative; display: grid; place-items: center; color: var(--text-dim); }
.v-arrow::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--s5-conn); }
.v-arrow svg { position: relative; width: 1.5rem; height: 1.5rem; padding: calc(.2rem - 1px); border-radius: 50%; }
.v-rc .vc__rows > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; align-content: center; }
.v-rc .vc__rows { grid-auto-rows: minmax(0, 1fr); }
.vf { display: grid; flex: 1; grid-auto-rows: minmax(0, 1fr); }
.vf li { display: flex; align-items: center; gap: .65rem; padding: .35rem var(--s5-in); border-bottom: 1px solid var(--s5-line); font-size: var(--text-body-size); color: var(--text-faint); }
.vf li[data-state="pass"] { color: var(--text-dim); }
.stamp { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: var(--s5-in); padding: .65rem; border: 1px solid color-mix(in srgb, var(--valid) 55%, transparent); border-radius: var(--r-control); background: color-mix(in srgb, var(--valid) 10%, transparent); color: var(--valid); }
.stamp svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.stamp b { font: 600 var(--text-body-size)/1 var(--mono); letter-spacing: .18em; }
.stamp[data-k="invalid"] { border-color: color-mix(in srgb, var(--invalid) 55%, transparent); background: color-mix(in srgb, var(--invalid) 10%, transparent); color: var(--invalid); }
.stamp[data-k="invalid"] svg { display: none; }

/* live: values appear one by one, IN PLACE (opacity only: nothing moves, every size is reserved); connectors draw once (transform on the line only) */
.story.is-live [data-r] { transition: opacity var(--dg-step-default) var(--ease); }
.story.is-live [data-r]:not(.is-in) { opacity: 0; }
.story.is-live .chb__l { transition: opacity var(--dg-step-default) var(--ease), transform var(--dg-step-default) var(--ease); }
.story.is-live .chb__l:not(.is-in) { transform: scaleY(0); }
.story.is-live .dc__l li::after { transition: transform var(--dg-step-default) var(--ease) 80ms; }
.story.is-live .dc__l li:not(.is-in)::after { transform: scaleY(0); }
.story.is-live .rg-f { transition: stroke-dashoffset var(--dg-step-default) var(--ease); } .story.is-live .vc__ring.is-run .rg-f { stroke-dashoffset: 100; }
.story.is-live .vc__ring:not(.is-run) .rg-f { transition: none; }
.story.is-live .vc__hash, .story.is-live .vc__prompt .is-bad { transition: color var(--dg-step-default) var(--ease); }
@media (prefers-reduced-motion: reduce) { .story.is-live [data-r], .story.is-live .chb__l, .story.is-live .dc__l li::after, .story.is-live .rg-f { transition: none; } }

/* the cta row and the node row */
.story__cta { justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); gap: .875rem; }
.story .node { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: .7rem; width: 100%; text-align: center; border-radius: var(--r-control); }
.node__ic { position: relative; display: grid; place-items: center; }
.node__ok { display: none; position: absolute; z-index: 2; right: -6px; bottom: -6px; }
.story .node:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.node__t { display: grid; gap: .1rem; justify-items: center; max-width: 13rem; }
.node__t b { font-size: var(--text-card-title-size); font-weight: 600; } .node__t small { font-size: var(--text-small-size); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.node__t span { font-size: var(--text-body-size); color: var(--text-dim); line-height: 1.4; }

/* (2) stacked timeline: tablet and phone, no pinning */
.story.is-stacked .steps5 { position: relative; gap: 1.5rem; padding-left: 2.1rem; }
.story.is-stacked .steps5::before { content: ''; position: absolute; left: .55rem; top: .4rem; bottom: .4rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--brand-amber), var(--brand-red) 30%, var(--brand-indigo) 70%, var(--brand-blue)); opacity: .55; }
.story.is-stacked .st5 { position: relative; }
.story.is-stacked .st5::before { content: ''; position: absolute; left: calc(-1.85rem + 1px); top: calc(1.75rem - 3.5px); background: var(--bg); border: 2px solid var(--brand-indigo); transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.story.is-stacked .st5.is-in::before { background: var(--brand-blue); box-shadow: 0 0 14px 2px rgba(1, 137, 253, .6); }
.story.is-stacked .st5__head span:not(.c-ico) { display: block; }
.story.is-stacked .st5__num small { display: none; }   /* the timeline head above already shows the stage label */

/* (3) stage: the wheel steps through the five steps while the pointer is over this block; elsewhere the page scrolls as usual */
@media (min-width: 64rem) {
  .story.is-stage .sec-head { margin-bottom: clamp(1.5rem, 3vh, 2.25rem); gap: .65rem; }
  .story.is-stage .story__stage { position: relative; display: grid; gap: clamp(1.25rem, 2.6vh, 2rem); }
  .story.is-stage .track { display: block; position: relative; }
  .track__nodes { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
  .track__line, .track__fill { position: absolute; left: 10%; right: 10%; top: 1.3rem; height: 2px; border-radius: 2px; }
  .track__line { background: rgba(255, 255, 255, .1); }
  .track__fill { background: linear-gradient(90deg, var(--brand-amber), var(--brand-orange) 20%, var(--brand-red) 43%, var(--brand-magenta) 62%, var(--brand-indigo) 78%, var(--brand-blue)); box-shadow: 0 0 12px rgba(252, 106, 2, .35); transform-origin: 0 50%; transform: scaleX(var(--x, 0)); }
  .track__dot { position: absolute; left: 10%; top: calc(1.3rem - 5px); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(1, 137, 253, .35), 0 0 18px 4px rgba(1, 137, 253, .85); transform: translateX(calc(var(--x, 0) * var(--rw, 0px))); z-index: 0; }
  .story.is-stage .node { opacity: .5; transition: opacity 120ms linear; }
  .story.is-stage .node .c-ico { z-index: 1; width: 2.6rem; height: 2.6rem; position: relative; background: var(--surface-2); transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), border-color 120ms linear, color 120ms linear; }
  .story.is-stage .node .c-ico::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, #c4561d, #b02a5e 55%, #3f62c8); opacity: 0; transition: opacity 120ms linear; pointer-events: none; }   /* the active fill is a layer that fades in, not a background swap */
  .story.is-stage .node .c-ico > svg { position: relative; }
  .story.is-stage .node.is-on .c-ico::before { opacity: 1; }
  .story.is-stage .node.is-past { opacity: .85; }
  .story.is-stage .node.is-past .c-ico { border-color: color-mix(in srgb, var(--valid) 55%, transparent); }
  .story.is-stage .node__ic { width: 2.6rem; height: 2.6rem; }
  .story.is-stage .node__ok { display: inline-grid; opacity: 0; transition: opacity 120ms linear; }   /* always laid out: the done mark fades in, the icon never passes through an empty state */
  .story.is-stage .node.is-past .node__ok { opacity: 1; }
  .story.is-stage .node.is-on { opacity: 1; }
  .story.is-stage .node.is-on .c-ico { transform: scale(1.22); color: #fff; border-color: transparent; box-shadow: 0 0 0 4px rgba(1, 137, 253, .14), 0 0 26px 2px rgba(90, 93, 203, .55); }
  .story.is-stage .node:hover { opacity: 1; } .story.is-stage .node:hover .c-ico { border-color: var(--border-hover); }
  .story.is-stage .node__t span { font-size: var(--text-body-size); }
  .story.is-stage .steps5 { position: relative; display: grid; padding: var(--s5-pad); border: 1px solid var(--border); border-radius: var(--r-panel); background-color: var(--surface-1); box-shadow: var(--elev); }   /* the card (fill, border, glow, dots) is PERMANENT: it never fades or moves; only the five contents inside it change */   /* all five views share ONE grid cell: the frame is as tall as the tallest view at every width, so nothing moves between steps */
  .story.is-stage .st5 { grid-area: 1 / 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; grid-template-rows: minmax(0, 1fr); align-content: stretch; opacity: 0; visibility: hidden; will-change: opacity; transition: opacity 100ms linear, visibility 0s linear 100ms; pointer-events: none; }
  .story.is-stage .steps5 > .st5:not(#_fr) { background-image: none; }   /* switch = an opacity-only cross-fade of the CONTENT: out 100 ms and in 100 ms start together, both linear, so the two opacities always add up to 1 (nothing dips); no translate, scale or blur */
  .story.is-stage .st5.is-on { opacity: 1; visibility: visible; transition: opacity 100ms linear, visibility 0s linear 0s; pointer-events: auto; }
  .story.is-stage .story__stage, .story.is-stage .steps5 { overflow-anchor: none; }
  .story.is-stage .st5__head { display: none; }
  .story.is-stage .st5__cols { height: 100%; align-items: stretch; }
  .story.is-stage .st5 .st5__copy > p:not([class]) { min-height: 4.65em; }   /* three lines of copy at every step, four reserved: the why block starts at the same y in all five views */
  /* the step position is the horizontal counter at the foot of the text zone (.st5__seg), not a rail outside the panel */
  .stage__hint { display: none; }
  .story.is-stage .stage__hint { display: block; text-align: center; margin-top: -.25rem; font-size: var(--text-body-size); letter-spacing: .06em; color: var(--text-faint); transition: opacity var(--dg-step-default) var(--ease); }
  .stage__hint.is-gone { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .story.is-stage .st5, .story.is-stage .st5.is-on, .story.is-stage .node, .story.is-stage .node .c-ico, .story.is-stage .node .c-ico::before, .story.is-stage .node__ok { transition: none; } }
@media (max-width: 47.99rem) {
  .story.is-stacked .steps5 { padding-left: 1.7rem; } .story.is-stacked .st5::before { left: calc(-1.5rem + 1px); } .st5__head b { font-size: var(--text-body-size); } .story__cta { flex-direction: column; align-items: stretch; } .story__cta .btn { justify-content: center; }
  .st5 { padding: 1.25rem; } .story { --s5-num: 3.75rem; --s5-in: .85rem; }
  .vc__rows > div { grid-template-columns: 5.25rem minmax(0, 1fr); gap: .6rem; }
  .v-two { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 2.25rem auto; }
  .v-vs::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; margin: 0; background: linear-gradient(90deg, transparent, var(--border-hover) 20%, var(--border-hover) 80%, transparent); }
  .v-pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 2.5rem auto; }
  .v-arrow::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } .v-arrow svg { transform: rotate(90deg); }
  .chb__b { grid-template-columns: minmax(0, 1fr) auto; row-gap: .15rem; } .chb__b code { grid-column: 1 / -1; grid-row: 2; } .chb__b small { grid-column: 2; grid-row: 1; }
  .vc__bar { flex-wrap: wrap; gap: .1rem .75rem; } .vc__bar span { white-space: normal; overflow: visible; }
}

/* ============================== HOME: repositories, audiences, integrations ticker ============================== */
.repos, .auds { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.rc, .aud { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1.125rem 1.25rem; border: 1px solid var(--border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)), var(--surface-1); box-shadow: var(--elev); color: inherit; text-decoration: none; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.rc:hover, .rc:focus-visible, .aud:hover, .aud:focus-visible { border-color: var(--border-hover); transform: translateY(-2px); }
.rc:focus-visible, .aud:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* a faint gradient edge in the logo palette on the hovered or focused panel */
.rc::before, .aud::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--brand-amber), var(--brand-red) 40%, var(--brand-indigo) 75%, var(--brand-blue)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity var(--t-fast) var(--ease); pointer-events: none; }
.rc:hover::before, .rc:focus-visible::before, .aud:hover::before, .aud:focus-visible::before { opacity: .55; }
.rc code { padding: 0; border: 0; background: none; font: 400 var(--text-code-size)/1.3 var(--mono); color: var(--text); }
.rc p, .aud__out { color: var(--text-dim); }
.aud .link-arrow { margin-top: auto; padding-top: .35rem; }
.rc:hover .link-arrow::after, .aud:hover .link-arrow::after, .rc:focus-visible .link-arrow::after, .aud:focus-visible .link-arrow::after { transform: translateX(3px); }
.aud ul { display: grid; gap: .35rem; padding: .85rem 0 .3rem; border-top: 1px solid var(--border); width: 100%; }
.aud li { font-size: var(--text-body-size); color: var(--text-dim); line-height: 1.45; }
.aud .aud__out { color: var(--text); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1.25rem; border-top: 1px solid var(--border); }
.facts a { display: flex; align-items: baseline; gap: .6rem; color: var(--text-dim); font-size: var(--text-body-size); text-decoration: none; line-height: 1.45; transition: color var(--t-fast) var(--ease); }
.facts b { flex: none; font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.facts a:hover, .facts a:focus-visible { color: var(--text); } .facts a:hover b { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quiet-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.5rem; font-size: var(--text-body-size); color: var(--text-faint); }
.quiet-row a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--border); } .quiet-row a:hover { color: var(--text); border-color: var(--border-hover); }
@media (max-width: 63.99rem) { .repos, .auds, .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .repos, .auds, .facts { grid-template-columns: 1fr; } }
/* staggered reveal, only after the script has marked the cards */
.rv { transition: opacity var(--t) var(--ease) calc(var(--i, 0) * 90ms), transform var(--t) var(--ease) calc(var(--i, 0) * 90ms), border-color var(--t-fast) var(--ease); }
.rv:not(.is-in) { opacity: 0; transform: translateY(14px); }
.rv.is-in:hover, .rv.is-in:focus-visible { transition-delay: 0s; }

/* the integrations band: full bleed, two slow lanes */
.band { padding-block: 0 var(--section-y); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 2.5vw, 2.25rem); justify-items: center; overflow: hidden; }
.band:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.band__eyebrow { text-align: center; }
.ticker { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); width: 100%; min-width: 0; }
.ticker__lane { width: 100%; }
.ticker__track { display: flex; justify-content: center; }
.ticker__track ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.25rem 3.5rem; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.ticker__track ul + ul, .ticker .mk[aria-hidden] { display: none; }
/* logo tile: a neutral surface with a hairline; the mark sits in a 20px box (contain). Light tile only for marks whose official colour is too dark for the dark surface. Decorative: the name is next to it. */
.lg { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; box-sizing: border-box; border-radius: var(--r-control); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); }
.lg svg { display: block; width: 20px; height: 20px; flex: none; }
.lg--light { background: #F2F3F6; border-color: rgba(255, 255, 255, .2); }
.lg--mono b { font-weight: 600; font-size: var(--text-small-size); line-height: 1; color: var(--text-dim); }
.lg--gen svg { width: 16px; height: 16px; }
.lg--36 { width: 36px; height: 36px; border-radius: var(--r-control); } .lg--36 svg { width: 22px; height: 22px; } .lg--36.lg--gen svg { width: 20px; height: 20px; } .lg--36.lg--mono b { font-size: var(--text-body-size); }
.mk a { display: inline-flex; align-items: center; gap: .6rem; height: 2rem; line-height: 1; white-space: nowrap; font-size: var(--text-body-size); font-weight: 500; letter-spacing: .005em; color: var(--text-faint); text-decoration: none; border-radius: 6px; transition: color var(--t-fast) var(--ease); }
.mk a:hover, .mk a:focus-visible { color: var(--text); }
.mk a:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.mk { display: inline-flex; }
.mk svg { display: block; width: 1.375rem; height: 1.375rem; fill: currentColor; flex: none; }
.mk svg.gi { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mk span { display: block; padding-top: 1px; }
.mk em { font-style: normal; font-size: var(--text-small-size); line-height: 1; letter-spacing: .08em; text-transform: uppercase; padding: .22rem .45rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-faint); }
@media (max-width: 47.99rem) { .mk a { height: 1.75rem; font-size: var(--text-body-size); } .mk svg { width: 1.2rem; height: 1.2rem; } .ticker__track ul { gap: 1rem 2.25rem; } }
@media (prefers-reduced-motion: no-preference) {
  .ticker__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .ticker__track { justify-content: flex-start; width: max-content; animation: tick 190s linear infinite; will-change: transform; }
  .ticker__lane[data-lane="b"] .ticker__track { animation-duration: 210s; animation-direction: reverse; }
  .ticker__lane[data-lane="c"] .ticker__track { animation-duration: 230s; }
  .ticker__track ul, .ticker__track ul + ul { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 3.5rem; max-width: none; margin: 0; padding: 0 3.5rem 0 0; flex: none; }
  .ticker .mk[aria-hidden] { display: inline-flex; }
  .band { padding-inline: 0; }
  .band:has(a:focus-visible) .ticker__track, .band.is-off .ticker__track { animation-play-state: paused; }
  @keyframes tick { to { transform: translate3d(-50%, 0, 0); } }
}
/* audience panels: the icon, title, outcome, lines and link sit on shared rows so every panel reads at the same heights */
/* the audience panels use the header-row variant of the compact icon card (.cap--hd, below); their list keeps its divider */
.aud ul { margin-top: 12px; }
@media (min-width: 40rem) { .rv.aud { transition-property: opacity, transform, border-color; } }
.c-foot .c-social a { display: grid; place-items: center; justify-content: center; min-height: 0; line-height: 0; }

/* header actions: GitHub (icon and text), the secondary and the primary small button, one height */
.c-quiet--gh { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding-inline: .25rem; }
.c-quiet--gh svg { width: 1.125rem; height: 1.125rem; }

/* ============================== footer watermark, back to top, background layer ============================== */
.c-foot { position: relative; overflow: hidden; }
.c-foot > .c-wrap { position: relative; z-index: 1; }
.c-foot__mark { position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .075;
  background: linear-gradient(100deg, #FBBA02 0%, #FC6A02 20%, #F81530 43%, #C02E62 62%, #5A5DCB 78%, #0189FD 100%) 0 0 / 140% 100%;
  -webkit-mask: url(/assets/img/qodiqa-wordmark.svg) center calc(100% + clamp(1rem, 4vw, 4.5rem)) / 100% auto no-repeat, linear-gradient(0deg, #000 8%, transparent 78%); -webkit-mask-composite: source-in;
  mask: url(/assets/img/qodiqa-wordmark.svg) center calc(100% + clamp(1rem, 4vw, 4.5rem)) / 100% auto no-repeat, linear-gradient(0deg, #000 8%, transparent 78%); mask-composite: intersect; }
@media (max-width: 47.99rem) { .c-foot__mark { opacity: .06; } }
@media (prefers-reduced-motion: no-preference) { @keyframes mark-drift { to { background-position: 100% 0; } } .c-foot__mark { animation: mark-drift 60s ease-in-out infinite alternate; } }

.totop { position: fixed; z-index: 40; right: 1.5rem; bottom: calc(1.5rem + var(--lift, 0px)); width: var(--btn-h); height: var(--btn-h); padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: rgba(14, 16, 24, .72); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); color: var(--text-dim); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.totop.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.totop:hover { color: var(--text); border-color: var(--border-hover); transform: translateY(-2px); }
.totop:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.totop svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.totop__track { stroke: rgba(255, 255, 255, .08); stroke-width: 1.5; }
.totop__ring { stroke: url(#bgA); stroke: var(--brand-blue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); transform: rotate(-90deg); transform-origin: 50% 50%; }
.totop__arrow { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 47.99rem) { .totop { right: 1rem; bottom: calc(1rem + var(--lift, 0px)); } }
@media (prefers-reduced-motion: reduce) { .totop { transition: none; } }

/* background layer: behind everything, never in front of content; opacity follows tokens and the page's density */
:root { --bg-line: .06; --bg-dot: .07; --bg-guide: .045; --bg-node: .22; }
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.bg[data-bg="calm"] { --bg-line: .045; --bg-dot: .045; --bg-guide: .035; --bg-node: .16; }
.bg[data-bg="quiet"] { --bg-line: .03; --bg-dot: 0; --bg-guide: .03; --bg-node: .1; }
.bg__move { position: absolute; inset: -16px 0; transform: translate3d(0, calc(var(--bgy, 0) * 1px), 0); will-change: transform; }
.bg__dots { position: absolute; inset: 0; opacity: var(--bg-dot); background: radial-gradient(circle, #fff 0.9px, transparent 1.1px) 0 0 / 30px 30px; -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 40%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 70% 62% at 50% 40%, #000 20%, transparent 78%); }
.bg__cols { position: absolute; inset: 0; margin-inline: auto; width: min(var(--container), 100%); padding-inline: var(--gutter); background-origin: content-box; background-repeat: no-repeat; background-size: 1px 100%; background-image: linear-gradient(rgba(255,255,255,var(--bg-guide)), rgba(255,255,255,var(--bg-guide))), linear-gradient(rgba(255,255,255,var(--bg-guide)), rgba(255,255,255,var(--bg-guide))), linear-gradient(rgba(255,255,255,var(--bg-guide)), rgba(255,255,255,var(--bg-guide))), linear-gradient(rgba(255,255,255,var(--bg-guide)), rgba(255,255,255,var(--bg-guide))), linear-gradient(rgba(255,255,255,var(--bg-guide)), rgba(255,255,255,var(--bg-guide))); background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent); }
.bg__lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: calc(var(--bg-line) * 3); fill: none; }
.bg__lines path { opacity: .9; }
.bg__n { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, var(--bg-node)); background: rgba(7, 8, 12, .6); }
.bg__n::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: rgba(255, 255, 255, var(--bg-node)); }
@media (max-width: 47.99rem) { .bg__dots, .bg__cols { display: none; } .bg__lines { opacity: calc(var(--bg-line) * 2); } .bg__n:nth-of-type(n+4) { display: none; } }

/* ============================== PRODUCT PAGES: in-page navigation, flagship layout ============================== */
.subnav { position: sticky; top: var(--header-h); z-index: 30; border-bottom: 1px solid var(--border); background: rgba(7, 8, 12, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.subnav ul { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding-block: .4rem; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .25rem .8rem; border-radius: 999px; white-space: nowrap; font-size: var(--text-body-size); color: var(--text-dim); text-decoration: none; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.subnav a:hover { color: var(--text); background: rgba(255, 255, 255, .045); }
.subnav a[aria-current="true"] { color: var(--text); background: rgba(255, 255, 255, .08); box-shadow: inset 0 -2px 0 var(--brand-blue); }
.subnav a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 63.99rem) { .subnav { display: none; } }
/* ---- developer pages (/quickstart /api /sdks /security): compact hero, key facts, tight section heads, one shared in-page nav ---- */
.page-hero--compact { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(.75rem, 1.5vw, 1.25rem); }
.page-hero--compact > .wrap { gap: .7rem; }
.page-hero--compact .lede { max-width: 70ch; text-wrap: pretty; }
.keyfacts { display: flex; flex-wrap: wrap; gap: .4rem; }
.keyfacts li { --ds: 8px; display: block; padding: .25rem .75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.5; }
.keyfacts .bdg--dot { vertical-align: middle; margin: -.1em .5rem 0 0; }
.keyfacts b { font-weight: 500; font-size: inherit; color: var(--text); }
.keyfacts .bdg--dot { color: var(--valid); }
.keyfacts .bdg--notice { color: var(--notice); }
.keyfacts .bdg--idle-dot { color: var(--text-faint); }
.subnav ~ .section { scroll-margin-top: calc(var(--header-h) + 3.25rem); }
.tbl { font-size: var(--text-body-size); }
.tbl th, .tbl td { padding: .5rem .9rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.tbl thead th { font-size: var(--text-small-size); padding-block: .45rem; }
.tbl tbody th { font-size: var(--text-body-size); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); background: none; }
.tbl td code, .tbl th code { font-family: var(--mono); font-size: var(--text-code-size); color: var(--text); background: none; border: 0; padding: 0; white-space: normal; overflow-wrap: anywhere; }
.sec-head--tight { gap: .35rem; margin-bottom: .9rem; }
.sec-head--tight > p:not(.eyebrow) { color: var(--text-dim); font-size: var(--text-body-size); max-width: none; }
.gw-hero { position: relative; isolation: isolate; text-align: center; padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(2.5rem, 4vw, 4rem); }
.gw-hero .wrap { display: grid; justify-items: center; gap: 1.1rem; }
.gw-hero h1 { max-width: 26ch; }
.gw-hero .lede { max-width: 46rem; text-wrap: balance; }
.gw-hero .cta-row { justify-content: center; margin-top: .5rem; }
.gw-arc { width: min(34rem, 88%); height: auto; overflow: visible; margin-bottom: .25rem; }
.gw-arc path.base { stroke: url(#gwg); stroke-width: 2; fill: none; opacity: .75; }
.gw-arc .nd { fill: var(--bg); stroke-width: 2; }
.gw-arc text { fill: var(--text-faint); font: 500 11px var(--font); letter-spacing: .1em; text-transform: uppercase; }
.gw-arc .dot { fill: #fff; filter: drop-shadow(0 0 6px rgba(1, 137, 253, .9)); offset-path: path('M20 130 C 120 10, 340 10, 440 130'); offset-distance: 0%; opacity: 0; }
@media (prefers-reduced-motion: no-preference) { @keyframes gw-run { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } .gw-arc .dot { animation: gw-run 6s var(--ease) infinite; } }
.gw-sec { scroll-margin-top: calc(var(--header-h) + 3.25rem); }
.gw-sec .sec-head { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
/* where it sits */
.gwd { width: 100%; max-width: 62rem; margin-inline: auto; display: block; height: auto; }
.gwd .box { fill: var(--surface-1); stroke: var(--border-hover); stroke-width: 1; }
.gwd .box--gw { fill: rgba(90, 93, 203, .1); stroke: #7f8df5; stroke-width: 1.5; }
.gwd text { fill: var(--text); font: 500 14px var(--font); } .gwd .sub { fill: var(--text-faint); font-size: 11.5px; font-weight: 400; }
.gwd .flow { fill: none; stroke: #7f8df5; stroke-width: 1.6; stroke-dasharray: 5 7; opacity: .85; }
.gwd .flow--down { stroke: rgba(255, 255, 255, .28); }
@media (prefers-reduced-motion: no-preference) { @keyframes gw-dash { to { stroke-dashoffset: -48; } } .gwd .flow { animation: gw-dash 3.4s linear infinite; } }
.callouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.callouts > div { padding: 1.25rem 1.4rem; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); }
.callouts b { display: block; margin-bottom: .35rem; font-weight: 500; } .callouts p { color: var(--text-dim); font-size: var(--text-body-size); }
/* the seven stages */
.rail7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .75rem; position: relative; counter-reset: st; }
.rail7::before { content: ''; position: absolute; left: 3%; right: 3%; top: calc(11px - 1px); height: 2px; background: linear-gradient(90deg, var(--brand-amber), var(--brand-red) 40%, var(--brand-indigo) 75%, var(--brand-blue)); opacity: .55; }
.rail7 li { position: relative; display: grid; gap: .5rem; align-content: start; justify-items: start; }
.rail7 li::before { counter-increment: st; content: counter(st); position: relative; background: var(--surface-2); color: var(--text); }
.rail7 b { font-weight: 500; } .rail7 p { font-size: var(--text-body-size); color: var(--text-dim); line-height: 1.5; }
.rail7 .codes { display: grid; gap: 6px; margin-top: 6px; } .rail7 .codes code { padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255, 255, 255, .03); font-size: var(--text-code-size); color: var(--text-faint); white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 63.99rem) { .rail7 { grid-template-columns: 1fr; gap: 1rem; } .rail7::before { left: calc(11px - 1px); right: auto; top: 1rem; bottom: 1rem; width: 2px; height: auto; } .rail7 li { grid-template-columns: 22px 1fr; column-gap: 1rem; } .rail7 li::before { grid-row: span 3; } }
/* capabilities, decision-maker blocks, deploy cards */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
/* COMPACT ICON CARD (.cap, aliases .card-icon-row, .rc and a .tile that starts with a number badge or icon): the icon, number badge or mark sits BESIDE the text (a 36px tile, 32px on phones), title and body are left-aligned in
   the right column, padding 14px 16px, 4px between title and body, no min-height: a card is exactly as tall as its content. An optional trailing element (a.cap gets an arrow)
   sits top right in a third auto column and never adds height. Large feature cards, the console, diagrams and terminals are other components and stay large. */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.cap, .card-icon-row, .rc{ position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; grid-template-rows: repeat(7, auto) 1fr; align-items: start; align-content: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)), var(--surface-1); box-shadow: var(--elev); color: inherit; text-decoration: none; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
/* a .tile that starts with a number badge or icon is the same component; it keeps the border, radius and fill of .tile */
.tile:has(> :is(.bdg--num, .c-ico):first-child){ position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; grid-template-rows: repeat(7, auto) 1fr; align-items: start; align-content: start; padding: 14px 16px; color: inherit; text-decoration: none; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.cap > *, .card-icon-row > *, .rc > *, .tile:has(> :is(.bdg--num, .c-ico):first-child) > * { grid-column: 2; min-width: 0; margin: 0; }
/* 4px between title and body is a margin, not a row gap: the icon spans several implicit rows and a row gap would add its empty tracks as dead space */
.cap > :nth-child(n+3), .card-icon-row > :nth-child(n+3), .rc > :nth-child(n+3), .tile:has(> :is(.bdg--num, .c-ico):first-child) > :nth-child(n+3) { margin-top: 4px; }
.cap:not(:has(> :is(.c-ico, .bdg, .mark, .tick, .stab__n):first-child)) > :nth-child(2) { margin-top: 4px; }
.cap:not(:has(> :is(.c-ico, .bdg, .mark, .tick, .stab__n):first-child)) > *, .card-icon-row:not(:has(> :is(.c-ico, .bdg, .mark, .tick):first-child)) > * { grid-column: 1 / -1; }
.cap > :is(.c-ico, .bdg, .mark, .tick):first-child, .card-icon-row > :is(.c-ico, .bdg, .mark, .tick):first-child, .rc > :is(.c-ico, .bdg, .mark, .tick):first-child, .tile:has(> :is(.bdg--num, .c-ico):first-child) > :is(.c-ico, .bdg, .mark, .tick):first-child { grid-column: 1; grid-row: 1 / span 8; align-self: start; }
.cap > .c-ico, .card-icon-row > .c-ico, .rc > .c-ico, .tile:has(> :is(.bdg--num, .c-ico):first-child) > .c-ico { width: 36px; height: 36px; border-radius: 9px; }
.cap > .c-ico svg, .card-icon-row > .c-ico svg, .rc > .c-ico svg, .tile:has(> :is(.bdg--num, .c-ico):first-child) > .c-ico svg { width: 18px; height: 18px; }
.cap p, .card-icon-row p, .rc p, .tile:has(> :is(.bdg--num, .c-ico):first-child) p { color: var(--text-dim); }
/* a long card body is split: a short summary stays in the card and the rest sits behind a keyboard-accessible "More" (details/summary, never inside a linked card) */
.cap-more > summary { display: inline-block; cursor: pointer; list-style: none; color: var(--text-faint); font-size: var(--text-body-size); line-height: 1.45; border-radius: 4px; transition: color var(--t-fast) var(--ease); }
.cap-more > summary::-webkit-details-marker { display: none; }
.cap-more > summary::after { content: '+'; margin-inline-start: .4em; }
.cap-more[open] > summary::after { content: "\2212"; }
.cap-more > summary:hover { color: var(--text); }
.cap-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cap-more > p { margin-top: 4px; }
/* a trailing link or button sits in the last (flexible) row, so in an equal-height row the links line up at the card foot instead of leaving dead space under the text */
.cap > :is(.link-arrow, .btn), .card-icon-row > :is(.link-arrow, .btn), .rc > :is(.link-arrow, .btn), .tile:has(> :is(.bdg--num, .c-ico):first-child) > :is(.link-arrow, .btn) { grid-row: 8; align-self: end; }
.cap .link-arrow, .cap .btn, .card-icon-row .link-arrow, .rc .link-arrow, .tile:has(> :is(.bdg--num, .c-ico):first-child) .link-arrow, .card-icon-row .btn, .rc .btn, .tile:has(> :is(.bdg--num, .c-ico):first-child) .btn { margin-top: 6px; justify-self: start; font-size: var(--text-body-size); }
.cap .btn, .card-icon-row .btn, .rc .btn, .tile:has(> :is(.bdg--num, .c-ico):first-child) .btn { font-size: var(--btn-fs); }
.cap > .cap__go, .cap__go, a.cap:not(:has(.link-arrow))::after { margin-top: 0; grid-column: 3; grid-row: 1; justify-self: end; align-self: start; color: var(--text-faint); font-size: var(--text-body-size); line-height: 1.3; transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
a.cap:not(:has(.link-arrow))::after { content: '\2192'; }
a.cap:hover::after, a.cap:focus-visible::after { color: var(--text); transform: translateX(2px); }
/* shared by the Gateway "What is in the box" and Open source "What is public" cards: each card links to GitHub; the GitHub mark sits beside the arrow in the arrow's slot (the arrow is a real element here, not ::after) */
a.cap.cap:not(:has(.link-arrow)):has(> .cap__gh)::after { content: none; }
.cap__gh { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; width: .864em; white-space: nowrap; } /* same width as the arrow alone, so the title and text column keep their width; the mark extends left into the gap */
.cap__gh > * { flex: none; }
.cap__gh .ghm { width: 16px; height: 16px; margin: 0; vertical-align: 0; }
.cap__arr { display: inline-block; transition: transform var(--t-fast) var(--ease); }
a.cap:hover .cap__gh, a.cap:focus-visible .cap__gh { color: var(--text); }
a.cap:hover .cap__arr, a.cap:focus-visible .cap__arr { transform: translateX(2px); }
a.cap:hover, a.cap:focus-visible { border-color: var(--border-hover); transform: translateY(-2px); }
a.cap:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 47.99rem) { .cap, .card-icon-row, .rc, .tile:has(> :is(.bdg--num, .c-ico):first-child) { padding: 12px 14px; } .cap > .c-ico, .card-icon-row > .c-ico, .rc > .c-ico, .tile:has(> :is(.bdg--num, .c-ico):first-child) > .c-ico { width: 32px; height: 32px; } .cap > .c-ico svg, .card-icon-row > .c-ico svg, .rc > .c-ico svg, .tile:has(> :is(.bdg--num, .c-ico):first-child) > .c-ico svg { width: 16px; height: 16px; } }
/* HEADER-ROW VARIANT (.cap--hd, on .cap, .rc, .aud or .tile): for a card with MORE than a title and one line (a lead, a list, a link line, a "More" disclosure). The icon tile and the title share the first row,
   the title to the right of the icon and centred on it, wrapping inside its own column; everything below spans the full card width. In a grid whose children are all header-row cards the card is a subgrid of four rows (header, lead, list, link), so in one row
   of cards the header row is as tall as the tallest title and the lead, list and link line start at the same y; the link line (or the "More" disclosure) sits on the last row. No min-height, no dead space. */
:is(.cap, .card-icon-row, .rc, .aud).cap--hd { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 12px; row-gap: 0; align-items: start; align-content: start; }
:not(:has(> :not(.cap--hd))) > :is(.cap, .card-icon-row, .rc, .aud).cap--hd { grid-template-rows: subgrid; grid-row: span 4; }
:is(.cap, .card-icon-row, .rc, .aud).cap--hd > * { grid-column: 1 / -1; grid-row: auto; min-width: 0; margin: 8px 0 0; }
:is(.cap, .card-icon-row, .rc, .aud).cap--hd > :first-child { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
:is(.cap, .card-icon-row, .rc, .aud).cap--hd > :nth-child(2) { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
:is(.cap, .card-icon-row, .rc, .aud).cap--hd > :is(.link-arrow, .btn, details, a:last-child) { grid-row: 4; align-self: end; justify-self: start; margin-top: 8px; padding-top: 0; }
:is(.cap, .card-icon-row, .rc, .aud).cap--hd > .c-ico { width: 36px; height: 36px; border-radius: 9px; }
:is(.cap, .card-icon-row, .rc, .aud).cap--hd > .c-ico svg { width: 18px; height: 18px; }
:is(.cap, .card-icon-row, .rc, .aud).cap--hd p { color: var(--text-dim); }
@media (max-width: 47.99rem) { :is(.cap, .card-icon-row, .rc, .aud).cap--hd > .c-ico { width: 32px; height: 32px; } :is(.cap, .card-icon-row, .rc, .aud).cap--hd > .c-ico svg { width: 16px; height: 16px; } }
@media (max-width: 63.99rem) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .callouts { grid-template-columns: 1fr; } }
@media (max-width: 39.99rem) { .caps { grid-template-columns: 1fr; } }
/* a generic .caps grid (one without its own page layout class) never ends on a lone card: four cards go 4 across (wide) or 2+2, and an odd count (3, 5, 7) stacks in one column on tablets instead of 2+1 */
@media (min-width: 64rem) { .caps:not(.gwp-caps, .osp-caps, .pt-grid, .qs-nextgrid, .sd-today, .sec-caps, .sec-caps2, .sec-threats):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .caps:not(.gwp-caps, .osp-caps, .pt-grid, .qs-nextgrid, .sd-today, .sec-caps, .sec-caps2, .sec-threats):has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 63.99rem) { .caps:not(.gwp-caps, .osp-caps, .pt-grid, .qs-nextgrid, .sd-today, .sec-caps, .sec-caps2, .sec-threats):is(:has(> :nth-child(3):last-child), :has(> :nth-child(5):last-child), :has(> :nth-child(7):last-child)) { grid-template-columns: minmax(0, 1fr); } }
.repos { gap: 12px; }
@media (max-width: 74.99rem) { .repos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 39.99rem) { .repos { grid-template-columns: 1fr; } }
.kv { border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); overflow: hidden; }
.kv > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .5rem 2rem; padding: 1rem 1.4rem; border-top: 1px solid var(--border); }
.kv > div:first-child { border-top: 0; }
.kv > .kv__h { background: rgba(255, 255, 255, .03); font-size: var(--text-small-size); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); padding-block: .65rem; }
.kv b { font-weight: 500; } .kv p { color: var(--text-dim); font-size: var(--text-body-size); }
@media (max-width: 47.99rem) { .kv > div { grid-template-columns: 1fr; } .kv > .kv__h { display: none; } }
.spec { width: 100%; }
.spec th { text-align: left; font-weight: 400; color: var(--text-faint); font-size: var(--text-body-size); width: 28%; vertical-align: top; white-space: normal; }
.spec td { color: var(--text); font-size: var(--text-body-size); }
.spec td code { white-space: normal; }
.spec th, .spec td { padding: .8rem 1.25rem; border-top: 1px solid var(--border); }
.spec tr:first-child th, .spec tr:first-child td { border-top: 0; }
.spec .grp th { background: rgba(255, 255, 255, .03); font-size: var(--text-small-size); letter-spacing: .1em; text-transform: uppercase; width: auto; }
@media (max-width: 47.99rem) { .spec th, .spec td { display: block; width: auto; padding: .35rem 1.1rem; } .spec th { padding-top: .8rem; } }
.qs3 { display: grid; gap: clamp(1.25rem, 2vw, 2rem); counter-reset: q; }
.qs3 > li { display: grid; gap: .5rem 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: start; min-width: 0; padding-top: clamp(1.25rem, 2vw, 2rem); border-top: 1px solid var(--border); }
.qs3 > li:first-child { border-top: 0; padding-top: 0; }
.qs3 > li > h3, .qs3 > li > p { grid-column: 1; }
.qs3 > li > .code { grid-column: 2; grid-row: 1 / span 3; }
.qs3 h3 { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.qs3 h3::before { counter-increment: q; content: counter(q); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--border-hover); font: 400 var(--text-code-size) var(--mono); }
.qs3 p { color: var(--text-dim); font-size: var(--text-body-size); }
.qs3 .code pre { font-size: var(--text-code-size); overflow-x: auto; }
@media (max-width: 63.99rem) { .qs3 > li { grid-template-columns: 1fr; } .qs3 > li > .code { grid-column: 1; grid-row: auto; } }
.dms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
.dms > div { padding: 1.5rem; border-top: 2px solid; border-image: linear-gradient(90deg, var(--brand-amber), var(--brand-red), var(--brand-blue)) 1; background: var(--surface-1); }
.dms h3 { font-weight: 500; margin-bottom: .5rem; } .dms p { color: var(--text-dim); font-size: var(--text-body-size); }
@media (max-width: 63.99rem) { .dms { grid-template-columns: 1fr; } }
.gw-end { text-align: center; display: grid; gap: 1rem; justify-items: center; }
.gw-end .quiet-row { margin-top: 0; }

/* ============================== /try: information area under the console ============================== */
.info__mode { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); grid-template-columns: 13rem minmax(0, 1fr); align-items: start; }
.info__mode[hidden] { display: none; }
.info__mode:not(.is-in) { opacity: 0; transform: translateY(8px); }
.info__mode { transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.info__nav { position: sticky; top: calc(var(--header-h) + 1.25rem); display: grid; gap: .15rem; align-content: start; }
.info__nav p { font-size: var(--text-small-size); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .5rem; }
.info__nav a { display: block; padding: .4rem .75rem; border-left: 2px solid var(--border); font-size: var(--text-body-size); color: var(--text-dim); text-decoration: none; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.info__nav a:hover { color: var(--text); }
.info__nav a[aria-current="true"] { color: var(--text); border-left-color: var(--brand-blue); }
.info__nav a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.info__body { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); min-width: 0; }
.info__body > section { scroll-margin-top: calc(var(--header-h) + 1rem); padding: clamp(1.25rem, 2.2vw, 1.75rem); border: 1px solid var(--border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)), var(--surface-1); box-shadow: var(--elev); display: grid; gap: .9rem; }
.info__body p, .info__body li { color: var(--text-dim); }
.info__body .eyebrow { margin-bottom: -.4rem; }
.info__list { display: grid; gap: .5rem; counter-reset: ck; }
.info__list li { display: grid; grid-template-columns: 1.9rem 1fr; gap: .75rem; align-items: baseline; }
.info__list li::before { counter-increment: ck; content: counter(ck); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--border-hover); font: 500 var(--text-code-size) var(--mono); color: var(--text); }
.info__list b { color: var(--text); font-weight: 500; }
.offd { width: 100%; height: auto; max-width: 40rem; }
.offd .box { fill: var(--surface-2); stroke: var(--border-hover); } .offd text { fill: var(--text); font: 500 13px var(--font); } .offd .sub { fill: var(--text-faint); font-size: 11px; font-weight: 400; }
.offd .arrow { stroke: #7f8df5; stroke-width: 1.6; fill: none; }
.offd .ok { stroke: var(--valid); } .offd .okt { fill: var(--valid); }
.faq details { border-top: 1px solid var(--border); padding-block: .2rem; }
.faq details:first-child { border-top: 0; }
.faq summary { cursor: pointer; padding: .7rem 0; color: var(--text); font-weight: 500; font-size: var(--text-body-size); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--text-faint); transition: transform var(--t-fast) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.faq details > p { padding-bottom: .8rem; }
@media (max-width: 63.99rem) { .info__mode { grid-template-columns: 1fr; } .info__nav { display: none; } }

.rail7 b { display: block; min-height: 2.9em; line-height: 1.45; }
@media (max-width: 63.99rem) { .rail7 b { min-height: 0; } }
.rail7 .codes code { overflow-wrap: normal; }
.qs3 .code pre { overflow-x: auto; scrollbar-width: thin; }

.info__mode--solo { grid-template-columns: 1fr; max-width: 52rem; }
.info__body p b { color: var(--text); font-weight: 500; }
.info__body .table-wrap { margin-top: .25rem; }
.info__body .code + .code { margin-top: 0; }

.qs3 .code pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
/* the panels' numbered rows use the shared badge: position them on the first line of their row */
.an-checklist li::before, .info__list li::before { position: static; left: auto; top: auto; --bl: 1.6em; }
.an-checklist li { padding-left: 0; display: grid; grid-template-columns: 22px 1fr; gap: .15rem .75rem; align-items: start; }
.an-checklist li::before { content: counter(c); }

/* ============================== FRAMED BOXES ==============================
   One dot-grid look for every framed box (the same dot as the diagram frame in dg.css): a dot grid at very low contrast, a faint brand glow in ONE corner of the box,
   and an inner hairline. Everything is drawn as background layers on the element itself (no pseudo-elements, so hover borders, arrows and connector lines are untouched):
     glow  : radial-gradient at the box's corner, brand colours orange -> magenta -> blue
     veil  : the box's own fill colour fading in away from that corner, so the dots thin out towards the opposite edges and stay off the body text (only on boxes with an opaque fill)
     dots  : a 20px dot grid at --framed-dot (5%) times --fk
   markup: class "framed" on any element, or no markup change at all: the selector lists below name the existing components.
   Per-box custom properties (all optional): --fx / --fy corner (0% or 100%), --fc1 / --fc2 glow colours (rgb triples), --fk intensity factor (1 = full, .5 = light).
   Corner rule: content cards top-left (orange), code, terminals and tables top-right (blue), notices and warnings bottom-right (amber), overlays and forms bottom-left (magenta).
   Light version (--fk .55) for the compact icon cards. No animation anywhere in this block, so there is nothing to disable under prefers-reduced-motion. */
:where(.framed, .tile, .panel, .card, .kv, .callouts > div, .an-proves > div, .an, .cs, .cite-form, .gwp-panel, .sd-panel, .doc, .docentry, .sdk, .cat, .run, .osp-pane, .cap, .card-icon-row, .rc, .aud, .table-wrap, .ipanel, .cite-card, .fw-what, .hw-art, .hw-merkle, .hw-deleg, .info__body > section, .horizon__card, .st5, .story.is-stage .steps5, .code, .term, .pg__term, .pg__ev, .console__code, .c-flow__code, .dl-card, .dl-rule, .hw-detail, .hw-card, .hw-tile, .hw-more, .an__card, .an__panel, .cs__res, .av-cmds, .vc, .dc, .disclosure, .cx, .callout, .notice, .legal-banner, .qs-proof, .c-pal__box, .c-menu, .cx__pop, .cf-drawer__panel, .qf__panel, .pg-sum, .cf-bar, .fw-scope) {
  --fx: 0%; --fy: 0%; --fc1: var(--framed-orange); --fc2: var(--framed-magenta); --fk: 1;
}
/* code, terminals, tables, data wells: top-right, blue; a bit lighter behind monospaced text */
:where(.code, .term, .pg__term, .pg__ev, .console__code, .c-flow__code, .table-wrap, .kv, .an__card, .vc, .dc, .hw-card, .cf-bar, .av-cmds) { --fx: 100%; --fy: 0%; --fc1: var(--framed-blue); --fc2: var(--framed-magenta); --fk: .8; }
/* notices, warnings, scope and limits: bottom-right, amber */
:where(.callout, .notice, .legal-banner, .qs-proof, .fw-scope) { --fx: 100%; --fy: 100%; --fc1: var(--framed-amber); --fc2: var(--framed-orange); --fk: .8; }
/* overlays, forms, search palette, side panels: bottom-left, magenta */
:where(.c-pal__box, .c-menu, .cx__pop, .cf-drawer__panel, .qf__panel, .cite-form, .cx, .pg-sum) { --fx: 0%; --fy: 100%; --fc1: var(--framed-magenta); --fc2: var(--framed-blue); }
/* compact icon cards: the lightest version */
:where(.cap, .card-icon-row, .rc, .tile:has(> :is(.bdg--num, .c-ico):first-child), .st5, .story.is-stage .steps5) { --fk: .55; }
/* text-heavy panels: lighter again, the corner glow stays */
:where(.info__body > section, .hw-art, .hw-merkle, .hw-deleg, .cite-card, .fw-what, .horizon__card, .ipanel) { --fk: .8; }

/* layers (top to bottom): glow, veil, dots. The :not(#_fr) lifts these above the components' own flat fills in the per-page sheets, which load after this one. */
:is(.framed, .tile, .panel, .card, .kv, .callouts > div, .an-proves > div, .an, .cs, .cite-form, .gwp-panel, .sd-panel, .doc, .docentry, .sdk, .cat, .run, .osp-pane, .c-pal__box, .c-menu, .cx__pop, .cf-drawer__panel):not(#_fr) {
  background-image:
    radial-gradient(ellipse 55% 75% at var(--fx) var(--fy), rgb(var(--fc1) / calc(var(--framed-glow-a) * var(--fk))), rgb(var(--fc2) / calc(var(--framed-glow-b) * var(--fk))) 45%, transparent 72%),
    radial-gradient(ellipse 130% 130% at var(--fx) var(--fy), transparent 0, transparent 14%, var(--framed-fill) 70%),
    radial-gradient(circle at 1px 1px, rgb(var(--framed-ink) / calc(var(--framed-dot) * var(--fk))) 1px, transparent 1.4px);
  background-size: 100% 100%, 100% 100%, var(--framed-pitch) var(--framed-pitch); background-repeat: no-repeat, no-repeat, repeat; background-position: 0 0, 0 0, 0 0;
}
/* the same three layers over the components' existing soft white gradient fill (kept as the top layer) */
:is(.cap, .card-icon-row, .rc, .aud, .table-wrap--card, .ipanel, .cite-card, .fw-what, .hw-art, .hw-merkle, .hw-deleg, .info__body > section, .horizon__card, .st5, .qf__panel, .story.is-stage .steps5):not(#_fr) {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)),
    radial-gradient(ellipse 55% 75% at var(--fx) var(--fy), rgb(var(--fc1) / calc(var(--framed-glow-a) * var(--fk))), rgb(var(--fc2) / calc(var(--framed-glow-b) * var(--fk))) 45%, transparent 72%),
    radial-gradient(ellipse 130% 130% at var(--fx) var(--fy), transparent 0, transparent 14%, var(--framed-fill) 70%),
    radial-gradient(circle at 1px 1px, rgb(var(--framed-ink) / calc(var(--framed-dot) * var(--fk))) 1px, transparent 1.4px);
  background-size: 100% 100%, 100% 100%, 100% 100%, var(--framed-pitch) var(--framed-pitch); background-repeat: no-repeat, no-repeat, no-repeat, repeat; background-position: 0 0, 0 0, 0 0, 0 0;
}
/* boxes whose fill is translucent or tinted (code wells, notices): glow and dots only, no veil */
:is(.c-foot, .code, .term, .pg__term, .pg__ev, .console__code, .c-flow__code, .table-wrap:not(.table-wrap--card), .dl-card, .dl-rule, .hw-detail, .hw-card, .hw-tile, .hw-more, .an__card, .an__panel, .cs__res, .av-cmds, .disclosure, .cx, .callout, .notice, .legal-banner, .qs-proof, .cf-bar, .pg-sum):not(#_fr) {
  background-image:
    radial-gradient(ellipse 55% 75% at var(--fx) var(--fy), rgb(var(--fc1) / calc(var(--framed-glow-a) * var(--fk))), rgb(var(--fc2) / calc(var(--framed-glow-b) * var(--fk))) 45%, transparent 72%),
    radial-gradient(circle at 1px 1px, rgb(var(--framed-ink) / calc(var(--framed-dot) * var(--fk))) 1px, transparent 1.4px);
  background-size: 100% 100%, var(--framed-pitch) var(--framed-pitch); background-repeat: no-repeat, repeat; background-position: 0 0, 0 0;
}
/* a box INSIDE another framed box (the step cards and decision columns of the home stage) is a flat, opaque, slightly darker tint with a hairline border: no dots, no glow, no hairline outline of its own. The panel behind it keeps the only grid, and the opaque fill keeps that grid from showing through twice. (These two were once in the translucent list above, whose :is() takes the highest specificity in the list and so beat this rule: that is how the nested cards kept a second 20px grid.) */
:is(.vc, .dc):not(#_fr) { background-image: none; background-color: var(--nest-fill); outline: 0; }
/* the stage panel: its corner glow is replaced by the lit border below (one glow, not two); the dot grid stays as the panel's own single layer */
.story.is-stage .steps5:not(#_fr) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)), radial-gradient(circle at 1px 1px, rgb(var(--framed-ink) / calc(var(--framed-dot) * var(--fk))) 1px, transparent 1.4px); background-size: 100% 100%, var(--framed-pitch) var(--framed-pitch); background-repeat: no-repeat, repeat; background-position: 0 0, 0 0; }
/* LIT BORDER (shared, .lit-border): a 1px gradient ring in the site accent (orange, magenta, blue: the card-hover ring) plus a soft outer glow, drawn as two pseudo-elements whose OPACITY alone changes (compositor only, no layout, no paint). .is-lit turns it on over 500 ms ease-out and off over 500 ms; nothing else ever changes it, so it is independent of any content inside the panel. The glow is a box-shadow of a layer that sits inside the border box, so it only ever paints OUTSIDE the box: it cannot tint the text, and it stays under the header (the panel does not create a stacking level above --z-header). */
.lit-border { position: relative; isolation: isolate; }
.lit-border::before, .lit-border::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 500ms cubic-bezier(.22, .61, .36, 1); }
.lit-border::before { z-index: 1; padding: 1px; background: var(--lit-ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.lit-border::after { z-index: -1; box-shadow: var(--lit-glow); }
.lit-border.is-lit::before, .lit-border.is-lit::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lit-border::before, .lit-border::after { opacity: 1; transition: none; } }   /* reduced motion: always lit, statically */
/* LIT EDGE (shared, .lit-edge): the medium lit treatment of a window nested in a lit panel (outer .lit-border strongest, .lit-edge medium). A 1px edge in the site accent (orange, magenta, blue at ~42%) plus a soft 12-16px glow, both PERMANENT and static: no transition, no animation, no state. The ring is not a pseudo-element: .vc clips its content (overflow hidden), which would clip a ring drawn outside the padding box, so the 1px (transparent) border itself carries the gradient (border-box layer under a padding-box fill), which keeps the radius, the 1px box and every size unchanged. The glow is the element's own box-shadow (paints outside only). Glass: an OPAQUE dark fill (--nest-fill) under a faint white inner gradient: opaque so the panel's own dot grid cannot show through (one dot layer on the stage); the glass look comes from the gradient. Generic: any card that sits inside another framed panel can take it. */
.lit-edge:not(#_fr) { border-color: transparent; background-color: transparent; background-image: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), linear-gradient(var(--nest-fill), var(--nest-fill)), var(--lit-edge-ring); background-origin: border-box; background-clip: padding-box, padding-box, border-box; background-repeat: no-repeat; background-size: 100% 100%; box-shadow: var(--lit-edge-glow); outline: 0; }
/* a frame with no fill of its own gets the card fill, so the page's dot grid cannot show through its own (zero specificity: any component fill wins) */
:where(.framed) { background-color: var(--surface-1); }
/* scope and limits keeps its warning tint as the top layer */
.fw-scope:not(#_fr) {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--notice) 7%, transparent), color-mix(in srgb, var(--notice) 2%, transparent)),
    radial-gradient(ellipse 55% 75% at var(--fx) var(--fy), rgb(var(--fc1) / calc(var(--framed-glow-a) * var(--fk))), rgb(var(--fc2) / calc(var(--framed-glow-b) * var(--fk))) 45%, transparent 72%),
    radial-gradient(ellipse 130% 130% at var(--fx) var(--fy), transparent 0, transparent 14%, var(--framed-fill) 70%),
    radial-gradient(circle at 1px 1px, rgb(var(--framed-ink) / calc(var(--framed-dot) * var(--fk))) 1px, transparent 1.4px);
  background-size: 100% 100%, 100% 100%, 100% 100%, var(--framed-pitch) var(--framed-pitch); background-repeat: no-repeat, no-repeat, no-repeat, repeat; background-position: 0 0, 0 0, 0 0, 0 0;
}
/* inner hairline (an outline pulled inside the border: it follows the radius, takes no space and yields to any focus outline) */
:is(.framed, .tile, .panel, .card, .kv, .callouts > div, .an-proves > div, .an, .cs, .cite-form, .gwp-panel, .sd-panel, .doc, .docentry, .sdk, .cat, .run, .osp-pane, .cap, .card-icon-row, .rc, .aud, .table-wrap, .ipanel, .cite-card, .fw-what, .hw-art, .hw-merkle, .hw-deleg, .info__body > section, .horizon__card, .code, .term, .pg__term, .pg__ev, .console__code, .c-flow__code, .hw-detail, .hw-card, .hw-tile, .an__card, .vc, .dc, .callout, .notice, .legal-banner, .qs-proof, .c-pal__box, .c-menu, .cx__pop, .cf-drawer__panel, .qf__panel, .cx, .cf-bar, .pg-sum, .hw-more, .an__panel, .cs__res, .av-cmds, .dl-rule, .disclosure, .fw-scope) { outline: 1px solid var(--framed-hair); outline-offset: -2px; }

/* ============================== CARD HOVER (shared) ==============================
   ONE style for every card-like block (icon, title, short text in a grid). The 1px border brightens and shows a gradient edge in the logo palette with a soft glow,
   the card lifts 2px and its fill changes a little; about 150 ms. A small script in calm.js sets --mx / --my (the pointer, in px inside the card) so the lit part of
   the edge follows the pointer; without them the edge is a uniform gradient. Keyboard focus inside a card does the same; on touch a press does. Reduced motion: no
   lift, only the border. Not for code blocks, tables, the console's main panels or large containers. To add a card type, add its selector to the three selector lists below AND to
   the list in assets/js/calm.js (tests/page-cards.test.mjs checks that the two lists and the pages agree). */
:is(.tile, .cap, .card-icon-row, .rc, .aud, .ph, .horizon__card, .card, .dms > div, .an-proves > div, .c-menu .c-card) {
  position: relative; isolation: isolate;
  transition: border-color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
:is(.tile, .cap, .card-icon-row, .rc, .aud, .ph, .horizon__card, .card, .dms > div, .an-proves > div, .c-menu .c-card)::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), #FBBA02, #FC6A02 22%, #C02E62 52%, #0189FD 100%),
    linear-gradient(135deg, #FC6A02, #C02E62 52%, #0189FD);
  background-blend-mode: normal;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity 150ms var(--ease);
}
@media (hover: hover) {
  :is(.tile, .cap, .card-icon-row, .rc, .aud, .ph, .horizon__card, .card, .dms > div, .an-proves > div, .c-menu .c-card):hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--elev), 0 10px 30px -14px rgba(90, 93, 203, .55), inset 0 0 0 999px rgba(255, 255, 255, .018); }
  :is(.tile, .cap, .card-icon-row, .rc, .aud, .ph, .horizon__card, .card, .dms > div, .an-proves > div, .c-menu .c-card):hover::before { opacity: .9; }
}
:is(.tile, .cap, .card-icon-row, .rc, .aud, .ph, .horizon__card, .card, .dms > div, .an-proves > div, .c-menu .c-card):is(:active, :has(:focus-visible)) { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--elev), 0 10px 30px -14px rgba(90, 93, 203, .55), inset 0 0 0 999px rgba(255, 255, 255, .018); }
:is(.tile, .cap, .card-icon-row, .rc, .aud, .ph, .horizon__card, .card, .dms > div, .an-proves > div, .c-menu .c-card):is(:active, :has(:focus-visible))::before { opacity: .9; }
@media (prefers-reduced-motion: reduce) {
  :is(.tile, .cap, .card-icon-row, .rc, .aud, .ph, .horizon__card, .card, .dms > div, .an-proves > div, .c-menu .c-card):is(:hover, :active, :has(:focus-visible)) { transform: none; }
}

/* ============================== CHAPTER CONNECTOR (shared) ==============================
   Between two consecutive sections: a thin vertical line (48px) fading into blue and ending in a small glowing node, centred on the container axis, instead of a rule
   or a large blank space. Drawn by the shared .section component (no markup), decorative only; the glow loops slowly and is static under reduced motion. */
main > .section + .section::before, .rm-col > .section + .section::before, .rm-bg + .section::before, .c-foot::before { content: ''; position: absolute; left: 50%; top: -1.5rem; width: 1px; height: 3rem; margin-left: -.5px; pointer-events: none; z-index: 2; background: linear-gradient(180deg, transparent, var(--brand-indigo) 38%, var(--brand-blue)); }
main > .section + .section::after, .rm-col > .section + .section::after, .rm-bg + .section::after, .c-foot::after { content: ''; position: absolute; left: 50%; top: calc(1.5rem - 3px); width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; pointer-events: none; z-index: 2; background: var(--brand-blue); box-shadow: 0 0 12px 2px rgba(1, 137, 253, .65); }
main > .section.section--plain + .section::before, main > .section + .section.section--plain::before, main > .section.section--plain::after { content: none; }
@media (prefers-reduced-motion: no-preference) { @keyframes chap-glow { 0%, 100% { box-shadow: 0 0 8px 1px rgba(1, 137, 253, .45); } 50% { box-shadow: 0 0 16px 4px rgba(1, 137, 253, .85); } } main > .section + .section::after, .rm-col > .section + .section::after, .rm-bg + .section::after, .c-foot::after { animation: chap-glow 7s ease-in-out infinite; } }

/* homepage: the hero dissolves into the next section (no edge): its lower part fades into the page background, and the next section's glow starts inside it */
.c-hero { margin-bottom: calc(var(--space-chapter) * -.5); padding-bottom: calc(clamp(3.5rem, 8svh, 5.5rem) + var(--space-chapter) * .5); }
.c-hero > .wrap { position: relative; z-index: 1; } .c-hero > .scroll-cue { z-index: 1; }
.story__pin::before { top: -22svh; }
/* the integrations band sits right above the footer: a small gap only */
.band { padding-block: 0 2.5rem; }

/* ============================== HEADER (shared: bar, two-pane panels, search palette, sheet) ============================== */
:root { --header-full: 4.375rem; /* header stacking scale: --z-line and --z-dropdown are local to the .c-head stacking context (isolation: isolate), back to front: page content < line < bar < panel */ --z-line: 1; --z-dropdown: 2; --z-header: 50; --z-overlay: 90; }
.c-head { position: sticky; top: 0; z-index: var(--z-header); isolation: isolate; height: var(--header-h); }
.c-head::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(7, 8, 12, .8); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.c-head.is-scrolled::before { background: rgba(7, 8, 12, .94); border-bottom-color: rgba(255, 255, 255, .13); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); }
.c-head__in { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); height: 100%; }
.c-prog { position: absolute; z-index: var(--z-line); left: 0; right: 0; bottom: 0; height: 2px; background: var(--spectrum); transform: scaleX(var(--hp, 0)); transform-origin: left; opacity: .9; pointer-events: none; }
.c-nav { flex: 0 1 auto; }
.c-nav > ul { display: flex; gap: .125rem; }
.c-nav > ul > li { position: relative; }
.c-nav__link { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .25rem .58rem; background: none; border: 0; border-radius: 999px; color: var(--text-dim); font: inherit; font-size: var(--text-body-size); font-weight: 400; letter-spacing: .012em; text-decoration: none; cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.c-nav__link::after { content: ''; position: absolute; left: .65rem; right: .65rem; bottom: .3rem; height: 2px; border-radius: 2px; background: var(--spectrum); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.c-nav__link:hover, .c-nav__link:focus-visible, [data-menu].is-open > .c-nav__link { color: var(--text); background: rgba(255, 255, 255, .06); }
.c-nav__link[aria-current="page"], .is-current > .c-nav__link { color: #fff; }
.c-nav__link[aria-current="page"]::after, .is-current > .c-nav__link::after { transform: scaleX(1); }
.c-nav__link:hover::after { transform: scaleX(1); opacity: .55; }
.c-nav__link svg { width: .55rem; height: .55rem; flex: none; opacity: .6; transition: transform var(--t-fast) var(--ease); }
[data-menu].is-open > .c-nav__link svg { transform: rotate(180deg); }
.c-menu { position: absolute; z-index: var(--z-dropdown); top: calc(100% + .5rem); left: 0; margin-left: var(--pshift, 0); width: 38rem; max-width: calc(100vw - 2rem); display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: .5rem; padding: .5rem; border: 1px solid var(--border-hover); border-radius: 18px; background: rgba(12, 14, 20, .97); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 28px 60px -24px rgba(0, 0, 0, .85), 0 8px 20px -12px rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: top left; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast); }
.c-menu::before { content: ''; position: absolute; inset: -1px -1px auto -1px; height: 1px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, transparent, rgba(252, 106, 2, .7), rgba(192, 46, 98, .7), rgba(1, 137, 253, .7), transparent); pointer-events: none; }
.c-menu::after { content: ''; position: absolute; left: 0; right: 0; top: -.75rem; height: .75rem; }
[data-menu].is-open > .c-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.c-tile { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: 14px; color: var(--text); text-decoration: none; background: radial-gradient(120% 90% at 0% 0%, rgba(252, 106, 2, .16), transparent 58%), radial-gradient(120% 100% at 100% 100%, rgba(1, 137, 253, .18), transparent 62%), rgba(255, 255, 255, .035); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.c-tile:hover, .c-tile:focus-visible { border-color: var(--border-hover); }
.c-tile__ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #c4561d, #b02a5e 55%, #3f62c8); }
.c-tile__ico svg { width: 1.3rem; height: 1.3rem; }
.c-tile__name { margin-top: .4rem; font: var(--text-card-title); }
.c-tile__desc { color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.5; }
.c-tile__cta { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: .75rem; font-size: var(--text-body-size); font-weight: 500; }
.c-tile__cta svg { width: .8rem; height: .8rem; transition: transform var(--t-fast) var(--ease); }
.c-tile:hover .c-tile__cta svg, .c-tile:focus-visible .c-tile__cta svg { transform: translateX(3px); }
.c-list { display: grid; gap: .125rem; align-content: start; }
.c-list > li { opacity: 0; transform: translateY(4px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
[data-menu].is-open .c-list > li { opacity: 1; transform: none; }
[data-menu].is-open .c-list > li:nth-child(2) { transition-delay: 35ms; } [data-menu].is-open .c-list > li:nth-child(3) { transition-delay: 70ms; } [data-menu].is-open .c-list > li:nth-child(4) { transition-delay: 105ms; } [data-menu].is-open .c-list > li:nth-child(5) { transition-delay: 140ms; } [data-menu].is-open .c-list > li:nth-child(6) { transition-delay: 175ms; }
.c-list .c-card { min-height: 3.75rem; padding: .7rem .85rem; }
.c-card[aria-current="page"] { background: rgba(255, 255, 255, .06); border-color: color-mix(in srgb, var(--brand-blue) 45%, transparent); }
.c-card[aria-current="page"] .c-ico { color: #fff; border-color: transparent; background: linear-gradient(135deg, #c4561d, #b02a5e 55%, #3f62c8); }
.c-menu__more { margin-top: .25rem; padding-top: .375rem; border-top: 1px solid var(--border); }
.c-menu__more a { display: flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 10px; color: var(--text-dim); font-size: var(--text-body-size); text-decoration: none; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.c-menu__more a::after { content: '\2192'; transition: transform var(--t-fast) var(--ease); }
.c-menu__more a:hover, .c-menu__more a:focus-visible { color: var(--text); background: rgba(255, 255, 255, .045); }
.c-menu__more a:hover::after { transform: translateX(3px); }
/* actions: search, quiet Specification link, one primary pill */
.c-actions { display: flex; align-items: center; gap: clamp(.5rem, 1.1vw, 1rem); flex: none; margin-left: auto; }
.c-kbd, .c-pal kbd { display: inline-block; padding: .08rem .38rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: var(--text-small-size); line-height: 1.5; color: var(--text-faint); background: rgba(255, 255, 255, .03); }
.c-live { display: inline-block; flex: none; width: 6px; height: 6px; margin: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
@media (prefers-reduced-motion: no-preference) { .c-live { animation: c-pulse 2.4s ease-out infinite; } }
@keyframes c-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 70%, 100% { box-shadow: 0 0 0 .5rem rgba(255, 255, 255, 0); } }
.c-burger { display: none; }
@media (max-width: 63.99rem) { .c-nav, .c-actions { display: none; } .c-burger { display: inline-flex; margin-left: auto; } }
/* search palette */
.c-pal { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; align-items: flex-start; padding: min(14vh, 8rem) 1rem 1rem; background: rgba(4, 5, 8, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.c-pal[hidden] { display: none; }
.c-pal__box { width: min(100%, 38rem); max-height: min(72vh, 34rem); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-hover); border-radius: 18px; background: rgba(12, 14, 20, .98); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 40px 80px -30px rgba(0, 0, 0, .9); }
@keyframes c-pal-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
@media (prefers-reduced-motion: no-preference) { .c-pal__box { animation: c-pal-in var(--t-fast) var(--ease); } }
.c-pal__field { display: flex; align-items: center; gap: .75rem; flex: none; height: 3.5rem; padding: 0 1rem; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.c-pal__field:focus-within { border-bottom-color: var(--brand-blue); }
.c-pal__field > svg { width: 1.1rem; height: 1.1rem; flex: none; }
.c-pal__field input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: var(--text-body-size); }
.c-pal__field { position: relative; }
.c-pal__hint { position: absolute; left: 2.85rem; right: 4rem; top: 50%; transform: translateY(-50%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-faint); font-size: var(--text-body-size); pointer-events: none; }
.c-pal__field.has-value .c-pal__hint { display: none; }
/* compact bar after a few pixels of scroll: smaller logo and controls, a deeper blurred background; the bar's own height (and every sticky offset) stays fixed so nothing shifts */
.c-brand img, .c-nav__link, .c-search, .c-doc, .c-cta { transition: height var(--t-fast) var(--ease), min-height var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.c-head.is-scrolled .c-brand img { height: 1.2rem; }
.c-head.is-scrolled .c-nav__link { min-height: 2.25rem; }
.c-pal__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .5rem; }
.c-pal__g { margin: .6rem .75rem .25rem; font-size: var(--text-small-size); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.c-pal__list [role="option"] { display: grid; gap: .1rem; padding: .6rem .75rem; border-radius: 10px; color: var(--text); text-decoration: none; }
.c-pal__list [role="option"] b { font-weight: 500; font-size: var(--text-body-size); }
.c-pal__list [role="option"] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-size: var(--text-body-size); }
.c-pal__list [role="option"][aria-selected="true"] { background: rgba(255, 255, 255, .07); box-shadow: inset 2px 0 0 #3fa4ff; }
.c-pal__none { margin: 0; padding: 1.5rem .75rem; color: var(--text-dim); }
.c-pal__foot { display: flex; gap: 1.25rem; flex: none; margin: 0; padding: .6rem 1rem; border-top: 1px solid var(--border); color: var(--text-faint); font-size: var(--text-small-size); }
.c-pal__foot kbd { margin-right: .2rem; }
@media (max-width: 39.99rem) { .c-pal { padding-top: 4.5rem; } .c-pal__foot { display: none; } }
/* mobile and tablet sheet */
.c-sheet { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; flex-direction: column; background: var(--bg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast); }
.c-sheet.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.c-sheet__bar { flex: none; display: flex; align-items: center; justify-content: space-between; height: var(--header-full); padding-inline: var(--gutter); border-bottom: 1px solid var(--border); }
.c-sheet__body { flex: 1; min-height: 0; width: 100%; max-width: 40rem; margin-inline: auto; overflow-y: auto; overscroll-behavior: contain; padding: 1rem var(--gutter) 1.5rem; }
.c-sheet__search { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3rem; margin-bottom: .5rem; padding: 0 1rem; border: 1px solid var(--border-hover); border-radius: 12px; background: rgba(255, 255, 255, .04); color: var(--text-dim); font: inherit; font-size: var(--text-body-size); text-align: left; cursor: pointer; }
.c-sheet__search svg { width: 1.1rem; height: 1.1rem; flex: none; }
.c-sheet__g { border-bottom: 1px solid var(--border); }
.c-sheet__top { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.5rem; padding: 0; background: none; border: 0; color: var(--text); font: inherit; font-size: var(--text-body-size); font-weight: 500; text-decoration: none; text-align: left; cursor: pointer; }
.c-sheet__top svg { width: .8rem; height: .8rem; transition: transform var(--t-fast) var(--ease); }
.c-sheet__top[aria-expanded="true"] svg { transform: rotate(180deg); }
.c-sheet__g ul { display: none; gap: .5rem; }
.c-sheet__top[aria-expanded="true"] + ul { display: grid; padding-bottom: .75rem; }
.c-sheet__g li a.c-card { min-height: 3.5rem; align-items: center; background: var(--surface-1); border-color: var(--border); }
.c-sheet .c-quiet { display: inline-flex; align-items: center; min-height: 3rem; margin-top: .5rem; }
.c-sheet__foot { flex: none; display: grid; grid-template-columns: 1.4fr 1fr; gap: .75rem; padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--bg); }
.c-sheet__cta { width: 100%; }
@media (prefers-reduced-motion: no-preference) { .c-sheet__top[aria-expanded="true"] + ul > li { animation: rise var(--t-fast) var(--ease) backwards; } }
@media (prefers-reduced-motion: reduce) { .c-menu, .c-sheet { transform: none; } .c-head { transition: none; } .c-list > li { transform: none; transition: opacity var(--t-fast) var(--ease); } }
.c-head { overflow-x: clip; }
@media (max-width: 73.99rem) { .c-nav__link { padding-inline: .58rem; } .c-nav__link::after { left: .58rem; right: .58rem; } }
@media (max-width: 68.74rem) { .c-doc { width: var(--btn-h); padding: 0; } .c-doc span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.c-sheet__foot { padding-inline: max(var(--gutter), calc((100% - 40rem) / 2 + var(--gutter))); }

/* ---- type scale: card titles and the small button use their own tokens (one place) ---- */
/* hero: with the smaller scale the headline block is narrower, so its two lines still fill it */
.c-hero__in { max-width: 55rem; }

/* pill rows and sub-navigation never scroll sideways: on a phone the section bar is a plain wrapped block above the content */
@media (max-width: 47.99rem) { .subnav { position: static; } .subnav ul { flex-wrap: wrap; justify-content: center; overflow: visible; } }

/* the GitHub mark next to every github.com link text */
.ghm { display: inline-block; flex: none; width: 1em; height: 1em; margin-inline-end: .4em; vertical-align: -.14em; fill: currentColor; stroke: none; }

/* ---- visual accents (CSS only; every animation stops under prefers-reduced-motion) ---- */
/* a slow gradient mesh behind every page hero, faded out at the bottom so it never makes a seam */
.page-hero { position: relative; isolation: isolate; overflow-x: clip; }
.page-hero::before { content: ''; position: absolute; inset: 0 -8% 0; z-index: -1; pointer-events: none; opacity: .55;
  background: radial-gradient(ellipse 38% 70% at 12% 0%, rgba(252, 106, 2, .16), transparent 70%), radial-gradient(ellipse 34% 65% at 88% 10%, rgba(1, 137, 253, .15), transparent 70%), radial-gradient(ellipse 30% 55% at 52% 0%, rgba(192, 46, 98, .12), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 92%); mask-image: linear-gradient(180deg, #000, transparent 92%); }
/* signal: a bright pulse travels along the blue connector between chapters */
main > .section + .section::before, .rm-col > .section + .section::before, .rm-bg + .section::before, .c-foot::before, .connector i { background: linear-gradient(180deg, transparent, #bfe3ff, transparent) 0 -60% / 100% 45% no-repeat, linear-gradient(180deg, transparent, var(--brand-indigo) 38%, var(--brand-blue)); }
/* verified: the receipt stamp and the seal glow once, then breathe */
.stamp[data-k="valid"], .vc__seal { box-shadow: 0 0 0 0 rgba(95, 211, 154, .45); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes drift-a { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(3%, 4%, 0); } }
  .page-hero::before { animation: drift-a 26s ease-in-out infinite alternate; }
  @keyframes signal { from { background-position: 0 -60%, 0 0; } to { background-position: 0 160%, 0 0; } }
  main > .section + .section::before, .rm-col > .section + .section::before, .rm-bg + .section::before, .c-foot::before, .connector i { animation: signal 3.4s linear infinite; }
  @keyframes seal-ring { 0% { box-shadow: 0 0 0 0 rgba(95, 211, 154, .5); } 100% { box-shadow: 0 0 0 16px rgba(95, 211, 154, 0); } }
  @keyframes seal-glow { 0%, 100% { box-shadow: 0 0 10px -2px rgba(95, 211, 154, .35); } 50% { box-shadow: 0 0 20px 0 rgba(95, 211, 154, .55); } }
  .stamp[data-k="valid"] { animation: seal-ring 1.4s ease-out 1, seal-glow 4.5s ease-in-out 1.4s infinite; }
  .vc__seal.is-on { border-radius: 50%; animation: seal-ring 1.4s ease-out 1; }
}
/* Standards menu: a wide panel with two groups side by side. The phone sheet shows one flat list. */
.c-menu--wide { width: 54rem; grid-template-columns: 13.5rem minmax(0, 1fr); align-items: start; }
/* Frameworks menu: compact equal rows (fixed-width mark column, one-line title and descriptor, same x in every row); both columns start on one baseline and the shorter one just ends earlier. */
.c-menu--wide .c-groups { align-items: start; gap: .25rem 1rem; }
.c-menu--wide .c-list { gap: 0; }
.c-menu--wide .c-list .c-card { min-height: 0; height: 3.25rem; padding: .3rem .6rem; }
.c-menu--wide .c-list .c-card .c-card__t { gap: 0; min-width: 0; }
.c-menu--wide .c-list .c-card .c-card__t :is(b, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-menu--wide .c-list .c-card .c-card__t small { font: var(--text-small-weight) var(--text-small-size)/var(--text-small-lh) var(--font); }
.c-menu--wide .c-group__t { padding: .15rem .6rem 0; }
.c-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; align-content: start; }
.c-group { display: grid; gap: .25rem; align-content: start; }
.c-group__t { padding: .35rem .85rem 0; color: var(--text-faint); font-size: var(--text-small-size); line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.c-foot h2 { white-space: normal; text-wrap: balance; }

/* ============================== FRAMEWORK MARKS (shared: header menu, index cards, page header) ==============================
   Every framework mark is the owner's official logo as a self-hosted image on a light tile (img.fw-mark), or a typographic monogram tile if no logo file exists (span.fw-mark). One style,
   four sizes via --ms (28 menu, 40 cards, 48 page title, 56 fact card). Width is 1.6 x height so "AI Act" and "42001" sit in the same tile. */
.fw-mark { --ms: 28px; box-sizing: border-box; display: inline-grid; place-items: center; flex: none; width: calc(var(--ms) * 1.6); height: var(--ms); padding: 0 2px; border: 1px solid color-mix(in srgb, var(--brand-blue) 38%, var(--border)); border-radius: calc(var(--ms) * .25); background: rgba(255, 255, 255, .04); color: var(--text-dim); font: 600 var(--text-small-size)/1 var(--font); letter-spacing: 0; white-space: nowrap; text-align: center; }
.fw-mark--sm { --ms: 28px; } .fw-mark--md { --ms: 40px; }
/* Official logo files (assets/img/frameworks/, see THIRD_PARTY_NOTICES.md): a light tile that always stays light, fixed height 28 or 40, width follows the logo (aspect kept, contained, capped). */
img.fw-mark { display: block; width: calc(var(--ms) * 1.6); height: var(--ms); padding: calc(var(--ms) * .07) calc(var(--ms) * .08); object-fit: contain; background: #fff; border-color: color-mix(in srgb, var(--brand-blue) 28%, #c9ced6); }
.c-pal__list [role="option"].has-mark { grid-template-columns: calc(28px * 1.6) minmax(0, 1fr); column-gap: .75rem; align-items: center; } .c-pal__list [role="option"].has-mark > .fw-mark { grid-row: 1 / span 2; }
.c-card:has(> .fw-mark) { grid-template-columns: calc(28px * 1.6) minmax(0, 1fr); gap: .7rem; align-items: center; } .c-card > img.fw-mark, .c-pal__list [role="option"].has-mark > img.fw-mark { justify-self: start; }
.c-card:hover .fw-mark, .c-card:focus-visible .fw-mark, .c-card[aria-current="page"] .fw-mark { color: var(--text); border-color: color-mix(in srgb, var(--brand-blue) 70%, transparent); }
.c-sheet__g li.c-group__t { padding: .6rem .85rem .1rem; }
.c-foot__note { margin-top: 1rem; color: var(--text-faint); font-size: var(--text-body-size); line-height: 1.5; max-width: none; text-wrap: balance; }
.c-foot__note + .c-foot__base { margin-top: .75rem; }

/* ============================== TYPE ROLES (one type system; the tokens are --type-* at the top of this file) ==============================
   h1 and h2 are titles (see the base rules), h3 outside a box is a subtitle, .lede/.lead is a lead. Everything inside a BOX (card, callout, panel, tile, tab, table card)
   uses the three card tokens: title (h2-h4 and the named title classes), body (an unclassed p and the named body classes) and the small mono label.
   tests/check-type-tokens.mjs holds the same lists; a new box class or title class goes in BOTH places. */
:is(.cap, .card-icon-row, .rc, .tile, .card, .panel, .ph, .aud, .horizon__card, .callout, .ipanel, .dl-card, .fw-card, .sdoc, .hw-tile, .sd-panel, .gwp-panel, .qs-panel, .cite-panel, .cf-tile, .an-proves > div, .dms > div, .callouts > div, .st5, .fw-what, .fw-panel, .doc, .docentry, .sdk, .cat, .osp-pane, .hw-art, .hw-merkle, .hw-deleg, .info__body > section, .c-card) :is(h2, h3, h4, .cf-tile__name, .cf-doc__t, .ipanel__title, .gtitle, .rm-head, .fo__name, .inv-founder__name, .pt-need__t, .c-card__t b, .st5__head b) { font: var(--type-card-title); letter-spacing: var(--type-card-title-ls); text-wrap: pretty; }
:is(.cap, .card-icon-row, .rc, .tile, .card, .panel, .ph, .aud, .horizon__card, .callout, .ipanel, .dl-card, .fw-card, .sdoc, .hw-tile, .sd-panel, .gwp-panel, .qs-panel, .cite-panel, .cf-tile, .an-proves > div, .dms > div, .callouts > div, .st5, .fw-what, .fw-panel, .doc, .docentry, .sdk, .cat, .osp-pane, .hw-art, .hw-merkle, .hw-deleg, .info__body > section, .c-card) :is(p:not([class]), .aud__out, .pt-need__c, .rm-obj, .cf-tile__line, .cf-doc__m, .pt-note, .hw-note, .gwp-foot, .sec-scope__foot, .dl-role, .hw-hint, .hw-status, .hw-lead2, .hw-mk-cap, .c-card__t small, .callout > span, .qs-lead) { font: var(--type-card-body); letter-spacing: var(--type-card-body-ls); }
:is(.lede, .lead, .ab-text p, .ab-leadline, .rm-final) { font: var(--type-lead); letter-spacing: var(--type-lead-ls); }
.rm-sub { font: var(--type-subtitle); letter-spacing: var(--type-subtitle-ls); }
/* titles that sit outside a box: form dialogs (rendered outside main), and any h4 */
:is(.qf__head h2, .qf-h, .qf-sum__h, .qf-rev__gh h4, h4) { font: var(--type-card-title); letter-spacing: var(--type-card-title-ls); }
/* labels win over everything above (hence the id in :not) */
:is(.cf-tile__n, .cf-tile__cnt, .cf-doc__id, .rm-n, .ph__tag, .rows2__lab, .fw-panel h4, .pt-pilot h4, .fw-pop__h):not(#_t) { font: var(--type-card-label); letter-spacing: var(--type-card-label-ls); }

/* READING GUIDE (/try/): the closed modes are display:none (the global [hidden] rule), so the guide takes the height of the open mode. The row of three cards is therefore never shorter than four lines of body text (the tallest mode at 1440), so switching modes does not move the page below it. Line-driven, not a pixel value: it follows the body size and line height. */
.gcards { min-height: calc(28px + 4 * var(--text-body-size) * var(--text-body-lh)); }

/* FONT SIZES: follow-ups from fsB */

/* SHARED MOTION (opt-in classes, every animation gated by prefers-reduced-motion: no-preference; without it nothing moves and nothing is hidden)
   .m-rise   : fade and rise as the block scrolls into view (scroll-driven, no script); --m-i (0..4) staggers the blocks of one group
   .m-aurora : a very slow aurora behind the section (the paint is static; the drift is the animation); the element gets position: relative here; the paint sits on its ::before, because a section's own ::before and ::after are the chapter connector
   .m-sweep  : the light travelling along the thin line drawn by the element's ::after */
.m-aurora { position: relative; isolation: isolate; }
.m-aurora::before { content: ''; position: absolute; inset: -2rem 0; z-index: -1; pointer-events: none; background-image: radial-gradient(40% 50% at 12% 30%, rgb(var(--framed-orange) / .1), transparent 70%), radial-gradient(40% 50% at 55% 75%, rgb(var(--framed-magenta) / .09), transparent 70%), radial-gradient(40% 50% at 92% 25%, rgb(var(--framed-blue) / .1), transparent 70%); background-size: 160% 160%; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-composite: intersect; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes m-aurora { from { background-position: 0% 0%, 100% 100%, 50% 0%; } to { background-position: 100% 60%, 0% 20%, 0% 100%; } }
  @keyframes m-sweep { from { background-position: 200% 0; } to { background-position: -100% 0; } }
  .m-aurora::before { animation: m-aurora 48s ease-in-out infinite alternate; }
  .m-sweep::after { animation: m-sweep 7s linear infinite; }
  @supports (animation-timeline: view()) {
    @keyframes m-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
    .m-rise { --m-i: 0; animation: m-rise linear both; animation-timeline: view(); animation-range: entry calc(var(--m-i) * 6%) entry calc(32% + var(--m-i) * 6%); }
  }
}

/* ============================== HEADER DROPDOWN PANELS (one compact component for About, Product, Standard, Frameworks, Developers) ==============================
   Slim header strip (icon, title, one line) on top, a two-column grid of rounded rows, one quiet call-to-action bottom-right. Opens with a 140 ms fade and a 4 px slide. */
.c-head .c-menu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: min(38rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); padding: 12px; border-radius: 16px; border: 1px solid var(--border); background: rgba(12, 14, 20, .94); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 44px -22px rgba(0, 0, 0, .8), 0 6px 16px -10px rgba(0, 0, 0, .55); transform: translateY(-4px); transform-origin: top left; transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 0s linear 140ms; }
.c-head .c-menu:not(#_fr) { background-image: none; }
.c-head .c-menu::before { border-radius: 16px 16px 0 0; opacity: .6; }
.c-head .c-menu.c-menu--wide { width: min(42.5rem, calc(100vw - 2rem)); }
.c-head [data-menu].is-open > .c-menu { transform: none; transition-delay: 0s; }
.c-pn__head { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 1px; align-items: center; padding: 2px 6px 10px; border-bottom: 1px solid var(--border); }
.c-pn__ico { grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #c4561d, #b02a5e 55%, #3f62c8); }
.c-pn__ico svg { width: 15px; height: 15px; }
.c-pn__t { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--text); }
.c-pn__d { font-size: 12.5px; line-height: 1.35; color: var(--text-dim); }
.c-head .c-menu .c-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.c-head .c-menu .c-list--1 { grid-template-columns: minmax(0, 1fr); }
.c-head .c-menu .c-list > li, .c-head [data-menu].is-open .c-list > li { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
.c-head .c-menu .c-card { position: relative; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; min-height: 52px; height: auto; padding: 8px 28px 8px 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; box-shadow: none; transform: none; transition: background 140ms var(--ease), border-color 140ms var(--ease); }
.c-head .c-menu .c-card::before { display: none; }
.c-head .c-menu .c-card::after { content: ''; position: absolute; right: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; opacity: 0; transform: translateX(-4px); transition: opacity 140ms var(--ease), transform 140ms var(--ease); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h8M7 3l3 3-3 3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h8M7 3l3 3-3 3'/%3E%3C/svg%3E") center / contain no-repeat; color: var(--text-dim); }
.c-head .c-menu .c-card:hover, .c-head .c-menu .c-card:focus-visible { background: rgba(255, 255, 255, .06); border-color: var(--border); transform: none; box-shadow: none; }
.c-head .c-menu .c-card:hover::after, .c-head .c-menu .c-card:focus-visible::after { opacity: 1; transform: none; }
.c-head .c-menu .c-card:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand-blue) 80%, #fff); outline-offset: -2px; }
.c-head .c-menu .c-card__t { gap: 1px; min-width: 0; transition: transform 140ms var(--ease); }
.c-head .c-menu .c-card:hover .c-card__t, .c-head .c-menu .c-card:focus-visible .c-card__t { transform: translateX(2px); }
.c-head .c-menu .c-card__t b { font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0; }
.c-head .c-menu .c-card__t small { font-size: 12.5px; font-weight: 400; line-height: 1.35; letter-spacing: 0; color: var(--text-dim); }
.c-head .c-menu .c-ico { width: 32px; height: 32px; border-radius: 9px; }
.c-head .c-menu .c-ico svg { width: 16px; height: 16px; }
.c-head .c-menu .c-card[aria-current="page"] { background: color-mix(in srgb, var(--brand-blue) 12%, transparent); border-color: color-mix(in srgb, var(--brand-blue) 38%, transparent); }
.c-head .c-menu .c-card[aria-current="page"] .c-card__t b { color: color-mix(in srgb, var(--brand-blue) 70%, #fff); }
.c-pn__foot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 6px 6px 0; border-top: 1px solid var(--border); }
.c-pn__foot a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; margin-top: 2px; border-radius: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--text-dim); text-decoration: none; transition: color 140ms var(--ease), background 140ms var(--ease); }
.c-pn__foot a svg { width: 11px; height: 11px; transition: transform 140ms var(--ease); }
.c-pn__foot a:hover, .c-pn__foot a:focus-visible { color: var(--text); background: rgba(255, 255, 255, .05); }
.c-pn__foot a:hover svg, .c-pn__foot a:focus-visible svg { transform: translateX(3px); }
.c-pn__foot a:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand-blue) 80%, #fff); outline-offset: 0; }
.c-pn__more { margin-right: auto; }
/* Frameworks: two compact columns, small-caps labels, 28 px tiles holding 20 px marks */
.c-head .c-menu--wide .c-groups { gap: 6px 10px; }
.c-head .c-menu--wide .c-group { gap: 4px; }
.c-head .c-menu--wide .c-group__t { padding: 6px 10px 2px; font-size: 12px; letter-spacing: .1em; }
.c-head .c-menu--wide .c-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.c-head .c-menu--wide .c-list .c-card { min-height: 0; height: 46px; padding: 4px 24px 4px 8px; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; }
.c-head .c-menu--wide .c-card .fw-mark { --ms: 28px; width: 42px; padding: 4px 3px; }
.c-head .c-menu--wide .c-card__t b { font-size: 13.5px; }
.c-head .c-menu--wide .c-card__t small { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .c-head .c-menu, .c-head [data-menu].is-open > .c-menu { transform: none; transition: opacity 1ms linear, visibility 0s; } .c-head .c-menu .c-card, .c-head .c-menu .c-card__t, .c-head .c-menu .c-card::after, .c-pn__foot a svg { transition: none; transform: none; } }

/* ============================== BRAND NAME IN TEXT ==============================
   tools/brand-wrap.mjs wraps the standalone lowercase word in <span class="brand"> at build time (visible text only).
   Same font, size and style; semibold and ~12% toward the strongest text colour (white on dark, ink in a light section).
   In headings the weight is the heading's own; only the colour rule applies. No spacing, underline, icon or gradient. */
[data-theme="light"] { --brand-tint: #0E1020; }
.brand { display: inline; margin: 0; padding: 0; width: auto; font-weight: var(--brand-weight); color: color-mix(in srgb, currentColor calc(100% - var(--brand-color-mix)), var(--brand-tint)); }
.txt, .brand-run { display: inline; }   /* build/runtime wrappers that keep a sentence with the name one flex/grid item (tools/brand-wrap.mjs, calm.js) */
h1 .brand, h2 .brand, h3 .brand, h4 .brand, h5 .brand, h6 .brand, strong .brand, b .brand, th .brand { font-weight: inherit; }

/* ============================== THE ONE HERO (every title hero on the site) ==============================
   Source of truth: the Architecture hero. One block, no per-page copies. Markup (tools/hero-render.mjs builds the optional parts):
   <section class="page-hero"><div class="wrap"> <p class="eyebrow">Group · Page</p> <h1>Title with a <span class="hero-key">key word.</span></h1>
   <p class="lede">Subtitle</p> [<ul class="hero-facts">…</ul>] [<div class="cta-row">buttons</div>] </div></section>
   - left edge: the hero's .wrap carries the same inline padding as every section's .wrap, so text starts on the content column; min-width:0 stops long words from widening the grid track
   - top: the same distance from the header on every page; blocks 24 px apart; 12 px mono eyebrow; title from the page-title token; 16 px muted subtitle at 62ch
   - hero buttons are the shared pill height (--pill-h = --btn-h; --hero-btn-h is an alias); same pill, border, gradient and hover as .btn
   Hero shapes that carry their own structure (the numbered Partners / Investors / Developers heroes, the Frameworks logo title) keep it and take the same eyebrow, title, subtitle and button treatment. */
:root { --hero-btn-h: var(--pill-h); --hero-pt: clamp(4rem, 7vw, 6.5rem); --hero-pb: clamp(1.5rem, 3vw, 2.25rem); --hero-gap: 1.5rem; }
.page-hero { padding-block: var(--hero-pt) var(--hero-pb); }
.page-hero + .section { padding-top: 0; }
.page-hero > .wrap { display: grid; gap: var(--hero-gap); justify-items: start; padding-inline: var(--gutter); min-width: 0; }
.page-hero > .wrap > * { min-width: 0; max-width: 100%; }
:is(.page-hero, .pp-hero, .iv-hero) .eyebrow { font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; color: var(--text-faint); }
.page-hero h1 { max-width: 26ch; }
.page-hero .lede { max-width: 62ch; font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
.page-hero .meta { max-width: 62ch; }
.hero-key, .cat-key { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-facts li { display: inline-flex; align-items: center; gap: .45rem; min-height: 28px; padding: 0 .7rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 .75rem/1.2 var(--mono); letter-spacing: .02em; color: var(--text-dim); }
.hero-facts li.is-hint { color: var(--text-faint); background: rgba(255, 255, 255, .02); }
.hero-facts svg { width: 14px; height: 14px; flex: none; }
:is(.page-hero, .pp-hero, .iv-hero, .dv-hero) :is(.cta-row, .pp-cta, .iv-hero__cta, .dv-herobar .cta-row) { gap: var(--btn-row); align-items: center; }
/* hero buttons take the shared pill height (--pill-h) from the .btn rule above; --hero-btn-h stays as an alias */
@media (max-width: 40rem) { :is(.page-hero, .pp-hero, .iv-hero, .dv-hero) :is(.cta-row, .pp-cta) { gap: 12px; } :is(.page-hero, .pp-hero, .iv-hero, .dv-hero) .btn { max-width: 100%; } }
/* facts the pages already carry as badges (Frameworks, Developers) wear the same glass chip */
:is(.fw-hero, .dv-hero) :is(.fw-badges, .dv-badges) .badge { display: inline-flex; align-items: center; gap: .45rem; min-height: 28px; padding: 0 .7rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 .75rem/1.2 var(--mono); letter-spacing: .02em; color: var(--text-dim); }
:is(.fw-hero, .dv-hero) :is(.fw-badges, .dv-badges) .badge b { font-weight: 500; color: var(--text); font-size: inherit; }
/* the zero-height rail box must not let its list margin push the page down (it made rail pages 32 px lower than the rest) */
.rm-rail { display: flow-root; }
/* protected media: logos, images, diagrams, animations (text stays selectable). Keep in sync with SEL in assets/js/protect.mjs. Opt out with data-allow-copy. */
:is(img, picture, canvas, video, .hero-logo, .mk svg, .ig-svg, .ig-lg, .dg__svg, .ad-svg, svg.cd, .dl-link svg) { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
html [data-allow-copy], html [data-allow-copy] * { -webkit-user-select: auto; user-select: auto; -webkit-user-drag: auto; -webkit-touch-callout: default; }

/* final QA, phone: form controls are 16px so iOS does not zoom on focus (new token, desktop unchanged); the brand, footer links and contact addresses get an invisible 44px-class hit area (no layout change) */
:root { --text-input-size: 16px; }
@media (max-width: 40rem) {
  :root:root:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]), :root:root:root select, :root:root:root textarea { font-size: var(--text-input-size); }
  .c-brand, .c-foot__cols li a, .ct-addr a { position: relative; }
  .c-brand::after { content: ""; position: absolute; inset: -12px -6px; }
  .c-foot__cols li a::after, .ct-addr a::after { content: ""; position: absolute; inset: -8px 0; }
}