/* Brand V1 tokens, generated from brand/StoneReason-Brand-V1/web/brand-tokens.css. Locked: edit neither. */
/* StoneReason Brand Tokens v1.0.0 — brand layer only (colour, type, logo geometry). Product-level semantic tokens build on these. */
:root {
  /* Neutral palette */
  --sr-color-basalt: #0E0F11;
  --sr-color-basalt-900: #15171A;
  --sr-color-graphite: #2A2D33;
  --sr-color-slate: #5E646E;
  --sr-color-ash: #A9AEB6;
  --sr-color-mist: #DCDEE3;
  --sr-color-chalk: #F2F3F5;
  --sr-color-white: #FFFFFF;
  /* Accent — one hue, two tints */
  --sr-color-cobalt: #2A4FE0;
  --sr-color-cobalt-700: #1F3FC4;
  --sr-color-cobalt-300: #6B8AFF;
  --sr-color-cobalt-200: #8FA6FF;

  /* Semantic — light mode (default) */
  --sr-bg-primary: var(--sr-color-white);
  --sr-bg-secondary: var(--sr-color-chalk);
  --sr-surface: var(--sr-color-white);
  --sr-surface-elevated: var(--sr-color-white);
  --sr-text-primary: var(--sr-color-basalt);
  --sr-text-secondary: var(--sr-color-slate);
  --sr-text-inverse: var(--sr-color-chalk);
  --sr-border: var(--sr-color-mist);
  --sr-border-strong: var(--sr-color-graphite);
  --sr-disabled: var(--sr-color-ash);
  --sr-link: var(--sr-color-cobalt);
  --sr-focus: var(--sr-color-cobalt);
  --sr-accent: var(--sr-color-cobalt);
  --sr-accent-hover: var(--sr-color-cobalt-700);
  --sr-accent-on: var(--sr-color-white);
  --sr-logo-ink: var(--sr-color-basalt);
  --sr-seam-lit: var(--sr-color-cobalt);

  /* Typography */
  --sr-font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sr-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sr-weight-regular: 400;
  --sr-weight-medium: 500;
  --sr-weight-semibold: 600;
  --sr-text-display: 56px; --sr-lh-display: 1.05; --sr-ls-display: -0.03em;
  --sr-text-h1: 40px; --sr-lh-h1: 1.1;  --sr-ls-h1: -0.025em;
  --sr-text-h2: 28px; --sr-lh-h2: 1.2;  --sr-ls-h2: -0.02em;
  --sr-text-h3: 20px; --sr-lh-h3: 1.3;  --sr-ls-h3: -0.015em;
  --sr-text-h4: 16px; --sr-lh-h4: 1.4;  --sr-ls-h4: -0.01em;
  --sr-text-body-lg: 18px; --sr-lh-body-lg: 1.55;
  --sr-text-body: 15px; --sr-lh-body: 1.6;
  --sr-text-small: 13px; --sr-lh-small: 1.5;
  --sr-text-caption: 12px; --sr-lh-caption: 1.4; --sr-ls-caption: 0.005em;
  --sr-text-label: 11px; --sr-lh-label: 1.2; --sr-ls-label: 0.08em;
  --sr-text-button: 14px; --sr-lh-button: 1;
  --sr-text-nav: 14px; --sr-lh-nav: 1;
  --sr-text-code: 13px; --sr-lh-code: 1.6;
  --sr-wordmark-tracking: -0.025em;

  /* Shape */
  --sr-radius-sm: 4px;
  --sr-radius-md: 6px;
  --sr-radius-lg: 10px;
  --sr-radius-app-icon: 22.37%;

  /* Logo geometry (relative to symbol height S) */
  --sr-logo-clear-space: 0.5;      /* X = 0.5 × S on every side */
  --sr-logo-symbol-min: 16px;
  --sr-logo-horizontal-min-height: 24px;   /* symbol height in the horizontal lockup */
  --sr-logo-compact-min-height: 20px;
  --sr-logo-stacked-min-width: 96px;
  --sr-seam-ratio: 0.09375;        /* 3 / 32 */
}

[data-theme="dark"], .sr-dark {
  --sr-bg-primary: var(--sr-color-basalt);
  --sr-bg-secondary: var(--sr-color-basalt-900);
  --sr-surface: var(--sr-color-basalt-900);
  --sr-surface-elevated: #1C1F24;
  --sr-text-primary: var(--sr-color-chalk);
  --sr-text-secondary: var(--sr-color-ash);
  --sr-text-inverse: var(--sr-color-basalt);
  --sr-border: var(--sr-color-graphite);
  --sr-border-strong: var(--sr-color-ash);
  --sr-disabled: var(--sr-color-slate);
  --sr-link: var(--sr-color-cobalt-300);
  --sr-focus: var(--sr-color-cobalt-300);
  --sr-accent: var(--sr-color-cobalt-300);
  --sr-accent-hover: var(--sr-color-cobalt-200);
  --sr-accent-on: var(--sr-color-basalt);
  --sr-logo-ink: var(--sr-color-chalk);
  --sr-seam-lit: var(--sr-color-cobalt-300);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sr-bg-primary: var(--sr-color-basalt);
    --sr-bg-secondary: var(--sr-color-basalt-900);
    --sr-surface: var(--sr-color-basalt-900);
    --sr-surface-elevated: #1C1F24;
    --sr-text-primary: var(--sr-color-chalk);
    --sr-text-secondary: var(--sr-color-ash);
    --sr-text-inverse: var(--sr-color-basalt);
    --sr-border: var(--sr-color-graphite);
    --sr-border-strong: var(--sr-color-ash);
    --sr-disabled: var(--sr-color-slate);
    --sr-link: var(--sr-color-cobalt-300);
    --sr-focus: var(--sr-color-cobalt-300);
    --sr-accent: var(--sr-color-cobalt-300);
    --sr-accent-hover: var(--sr-color-cobalt-200);
    --sr-accent-on: var(--sr-color-basalt);
    --sr-logo-ink: var(--sr-color-chalk);
    --sr-seam-lit: var(--sr-color-cobalt-300);
  }
}

/* Inline monochrome logos (logos/monochrome/*-mono.svg) inherit this */
.sr-logo { color: var(--sr-logo-ink); }
:focus-visible { outline: 2px solid var(--sr-focus); outline-offset: 2px; }


/* ------------------------------------------------------------------ */

/* StoneReason — site stylesheet.
 *
 * The brand layer is Brand V1 and is not restated here: colour, type scale and
 * logo geometry come from brand/StoneReason-Brand-V1/web/brand-tokens.css,
 * inlined at build time above this file. What lives here is the *site* layer —
 * layout, rhythm, and the few components this site needs.
 *
 * Composition over decoration: sections are separated by a rule and by space,
 * not by floating cards. */

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

/* ---------- site-layer tokens ---------- */
:root {
  --page: 1200px;
  --prose: 68ch;
  --gutter: 24px;
  --rule: 1px solid var(--sr-border);

  --step-1: 8px;
  --step-2: 16px;
  --step-3: 24px;
  --step-4: 40px;
  --step-5: 64px;
  --step-6: 96px;
  --section-y: clamp(56px, 9vw, 112px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--sr-bg-primary);
  color: var(--sr-text-primary);
  font-family: var(--sr-font-sans);
  font-size: var(--sr-text-body);
  line-height: var(--sr-lh-body);
  font-weight: var(--sr-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--sr-weight-medium); text-wrap: balance; }
h1 { font-size: var(--sr-text-h1); line-height: var(--sr-lh-h1); letter-spacing: var(--sr-ls-h1); }
h2 { font-size: var(--sr-text-h2); line-height: var(--sr-lh-h2); letter-spacing: var(--sr-ls-h2); }
h3 { font-size: var(--sr-text-h3); line-height: var(--sr-lh-h3); letter-spacing: var(--sr-ls-h3); font-weight: var(--sr-weight-semibold); }
h4 { font-size: var(--sr-text-h4); line-height: var(--sr-lh-h4); letter-spacing: var(--sr-ls-h4); font-weight: var(--sr-weight-semibold); }
p { margin: 0; }
img, svg { max-width: 100%; }

a { color: var(--sr-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sr-accent-hover); }

:focus-visible {
  outline: 2px solid var(--sr-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

code, kbd, pre, samp { font-family: var(--sr-font-mono); font-size: var(--sr-text-code); }

hr { border: 0; border-top: var(--rule); margin: 0; }

::selection { background: var(--sr-accent); color: var(--sr-accent-on); }

/* ---------- skip link ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--sr-text-primary);
  color: var(--sr-bg-primary);
  font-weight: var(--sr-weight-semibold);
}
.skip:focus { left: 0; color: var(--sr-bg-primary); }

/* ---------- layout primitives ---------- */
.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose { max-width: var(--prose); }
.section { padding-block: var(--section-y); }
.section + .section { border-top: var(--rule); }

.eyebrow {
  font-size: var(--sr-text-label);
  line-height: var(--sr-lh-label);
  letter-spacing: var(--sr-ls-label);
  font-weight: var(--sr-weight-semibold);
  text-transform: uppercase;
  color: var(--sr-text-secondary);
  margin: 0 0 var(--step-3);
}
.lede {
  font-size: var(--sr-text-body-lg);
  line-height: var(--sr-lh-body-lg);
  color: var(--sr-text-secondary);
}
.muted { color: var(--sr-text-secondary); }
.mono { font-family: var(--sr-font-mono); }

.grid > *, .hero__grid > *, .docs > *, .stack > * { min-width: 0; }

.stack > * + * { margin-top: var(--step-3); }
.stack-tight > * + * { margin-top: var(--step-2); }
.stack-loose > * + * { margin-top: var(--step-4); }

/* ---------- header ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--sr-bg-primary) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--rule);
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--step-4);
  min-height: 64px;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* The logo is a file, never re-drawn, and carries no nav inside it. */
.masthead__logo { display: flex; align-items: center; flex: 0 0 auto; }
.masthead__logo img { height: 26px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: var(--step-3); }
.nav--primary { flex: 1 1 auto; }
.nav--end { flex: 0 0 auto; gap: var(--step-2); }
.nav a {
  font-size: var(--sr-text-nav);
  line-height: var(--sr-lh-nav);
  font-weight: var(--sr-weight-medium);
  color: var(--sr-text-primary);
  text-decoration: none;
  padding: 8px 2px;
}
.nav a:hover { color: var(--sr-accent); }
.nav a[aria-current="page"] { color: var(--sr-accent); }

.nav-toggle { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 18px;
  font-size: var(--sr-text-button);
  line-height: var(--sr-lh-button);
  font-weight: var(--sr-weight-semibold);
  font-family: inherit;
  border-radius: var(--sr-radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  /* A button is sized by its own label. Without this the masthead's flex row
     squeezes the padding away and the text touches the edges. */
  flex: 0 0 auto;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
/* The `a.` half of each selector is load-bearing, not decoration.
 *
 * `.nav a`, `.foot a` and `.docs__nav a` all set a link colour and all score
 * (0,1,1); `.btn--primary` scores (0,1,0) and lost to every one of them. So the
 * masthead's primary button was drawing body-ink on cobalt at 3:1 in light mode
 * and chalk on pale cobalt at about 2.2:1 in dark -- the tokens were right the
 * whole time and nothing was using them. `a.btn--primary` is (0,2,1) and wins,
 * without an `!important` that the next component would have to fight.
 *
 *     TOKEN_DEFINED != TOKEN_APPLIED
 */
.btn--primary, a.btn--primary { background: var(--sr-accent); color: var(--sr-accent-on); }
.btn--primary:hover, a.btn--primary:hover { background: var(--sr-accent-hover); color: var(--sr-accent-on); }
.btn--secondary, a.btn--secondary { border-color: var(--sr-border-strong); color: var(--sr-text-primary); background: transparent; }
.btn--secondary:hover, a.btn--secondary:hover { border-color: var(--sr-accent); color: var(--sr-accent); }
.btn--lg { min-height: 48px; padding: 13px 24px; font-size: 15px; }
.btn[disabled] { background: var(--sr-disabled); border-color: var(--sr-disabled); color: var(--sr-bg-primary); cursor: not-allowed; }

.actions { display: flex; flex-wrap: wrap; gap: var(--step-2); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(56px, 10vw, 120px) var(--section-y); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.hero h1 {
  font-size: var(--sr-text-display);
  line-height: var(--sr-lh-display);
  letter-spacing: var(--sr-ls-display);
}
.hero .lede { margin-top: var(--step-3); max-width: 54ch; }
.hero .actions { margin-top: var(--step-4); }
.hero__note { margin-top: var(--step-3); font-size: var(--sr-text-small); color: var(--sr-text-secondary); }

/* ---------- the evidence panel (hero visual) ----------
 * A real API response, not a fabricated dashboard. */
.panel {
  border: var(--rule);
  border-radius: var(--sr-radius-md);
  background: var(--sr-surface);
  overflow: hidden;
}
.panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-2);
  padding: 10px 14px;
  border-bottom: var(--rule);
  background: var(--sr-bg-secondary);
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-label);
  letter-spacing: 0.04em;
  color: var(--sr-text-secondary);
  text-transform: uppercase;
}
.panel__body { padding: var(--step-3); }
.panel__body--flush { padding: 0; }

/* ---------- code ---------- */
pre {
  margin: 0;
  padding: var(--step-3);
  overflow-x: auto;
  background: var(--sr-bg-secondary);
  border: var(--rule);
  border-radius: var(--sr-radius-md);
  font-size: var(--sr-text-code);
  line-height: var(--sr-lh-code);
  tab-size: 2;
}
.panel pre { border: 0; border-radius: 0; background: transparent; }
pre code { font-size: inherit; }
:not(pre) > code {
  background: var(--sr-bg-secondary);
  border: var(--rule);
  border-radius: var(--sr-radius-sm);
  padding: 0.1em 0.35em;
  font-size: 0.92em;
  overflow-wrap: break-word;
}
/* Token colours: three roles only, all AA on the code background. */
.t-key { color: var(--sr-text-secondary); }
.t-str { color: var(--sr-accent); }
.t-num { color: var(--sr-text-primary); font-weight: var(--sr-weight-medium); }
.t-cmt { color: var(--sr-text-secondary); font-style: italic; }
.t-com { color: var(--sr-text-secondary); font-style: italic; }
.t-fn  { color: var(--sr-text-primary); font-weight: var(--sr-weight-medium); }

/* ---------- the five dimensions ---------- */
.dims { display: grid; gap: 0; border: var(--rule); border-radius: var(--sr-radius-md); overflow: hidden; }
.dim {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--step-3);
  padding: 14px var(--step-3);
  align-items: baseline;
}
.dim + .dim { border-top: var(--rule); }
.dim__name {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sr-text-secondary);
}
.dim__value { font-family: var(--sr-font-mono); font-size: var(--sr-text-small); font-weight: var(--sr-weight-medium); }
.dim__means { grid-column: 2; font-size: var(--sr-text-small); color: var(--sr-text-secondary); margin-top: 4px; }

/* Certainty is expressed by fill, never by hue — Brand V1 p24. */
.fill { display: inline-block; width: 11px; height: 11px; margin-right: 8px; vertical-align: baseline; border: 1.5px solid var(--sr-text-primary); }
.fill--solid { background: var(--sr-text-primary); }
.fill--half { background: linear-gradient(90deg, var(--sr-text-primary) 50%, transparent 50%); }
.fill--empty { background: transparent; }
.fill--dashed { border-style: dashed; background: transparent; }

/* ---------- grids ---------- */
.grid { display: grid; gap: var(--step-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* A "card" here is a bordered block used only where items are genuinely
 * parallel and separable. Sections are not cards. */
.tile { border: var(--rule); border-radius: var(--sr-radius-md); padding: var(--step-3); background: var(--sr-surface); }
.tile h3 { margin-bottom: var(--step-1); }
.tile p { color: var(--sr-text-secondary); font-size: var(--sr-text-small); }
.tile__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--step-2); margin-bottom: var(--step-1); }
.tile__top h3 { margin-bottom: 0; }
.tile__top .sbadge { flex: 0 0 auto; align-self: flex-start; }
/* One lifecycle phase: an eyebrow label over the tiles that belong to it. */
.lifephase + .lifephase { margin-top: var(--step-4); }

/* ---------- pricing plans ----------
   Five cards read as one comparison table. Each card is a subgrid that shares
   the parent's row tracks, so the description, price, annual line, every feature
   row and the CTA all sit on the same baseline across all five cards regardless
   of how any one label wraps. Eleven shared rows: header, description, price,
   annual, the six comparison rows, and the CTA. */
.plans-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto repeat(6, auto) auto;
  align-items: stretch;
}
.plan {
  display: grid;
  grid-row: span 11;
  grid-template-rows: subgrid;
  row-gap: 0;
  border: var(--rule); border-radius: var(--sr-radius-md);
  background: var(--sr-surface); padding: var(--step-3); min-width: 0;
}
.plan--featured { border-color: var(--sr-accent); box-shadow: 0 0 0 1px var(--sr-accent) inset; }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan__head h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.plan__tag { color: var(--sr-text-secondary); font-size: var(--sr-text-small); margin: 6px 0 14px; align-self: start; }
.plan__price { margin: 0; align-self: end; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.plan__amt { font-size: 30px; font-weight: var(--sr-weight-semibold); letter-spacing: -0.02em; line-height: 1.1; }
.plan__per { color: var(--sr-text-secondary); font-size: var(--sr-text-small); }
.plan__sub { color: var(--sr-text-secondary); font-size: var(--sr-text-caption); margin: 4px 0 16px; align-self: start; }
/* The six comparison rows are themselves a subgrid so their label/value rows
   align across cards even when a label wraps to two lines. */
.plan__limits {
  list-style: none; margin: 0 0 18px; padding: 0;
  grid-row: span 6;
  display: grid; grid-template-rows: subgrid; row-gap: 0;
  font-size: var(--sr-text-small);
}
.plan__limits li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px dashed var(--sr-border); padding: 4px 0 7px;
}
.plan__k { color: var(--sr-text-secondary); }
.plan__v { font-weight: var(--sr-weight-medium); text-align: right; font-variant-numeric: tabular-nums; }
.plan__unit { color: var(--sr-text-secondary); font-weight: 400; font-size: var(--sr-text-caption); }
.plan__cta { align-self: end; padding-top: 6px; }
.btn--block { display: block; width: 100%; text-align: center; }
/* Below the five-across breakpoint, stop sharing row tracks: each card becomes a
   naturally compact stack, so a phone gets no forced dead space. */
@media (max-width: 1000px) {
  .plans-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; max-width: 30rem; margin-inline: auto; }
  .plan { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }
  .plan__limits { grid-row: auto; grid-template-rows: none; display: grid; gap: 0; }
  .plan__cta { margin-top: 8px; }
}

.feature { border-top: 2px solid var(--sr-text-primary); padding-top: var(--step-3); }
.feature h3 { margin-bottom: var(--step-2); }
.feature p { color: var(--sr-text-secondary); }
/* A feature card that is itself a link (the Legal Center hub). */
a.feature { display: block; text-decoration: none; color: inherit;
  transition: border-color 120ms ease; }
a.feature h3 { color: var(--sr-text-primary); }
a.feature:hover { border-top-color: var(--sr-accent); }
a.feature:hover h3 { color: var(--sr-accent); }

/* ---------- figures (numbers) ---------- */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: var(--rule); border-radius: var(--sr-radius-md); overflow: hidden; }
.figure { padding: var(--step-3); }
.figure + .figure { border-left: var(--rule); }
.figure__n { font-size: 34px; line-height: 1.1; font-weight: var(--sr-weight-medium); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.figure__l { margin-top: 6px; font-size: var(--sr-text-small); font-weight: var(--sr-weight-medium); }
.figure__d { margin-top: 4px; font-size: var(--sr-text-caption); line-height: var(--sr-lh-caption); color: var(--sr-text-secondary); }

/* ---------- lifecycle (payments) ---------- */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: var(--rule); border-radius: var(--sr-radius-md); overflow: hidden; }
.flow__step { padding: var(--step-3); position: relative; }
.flow__step + .flow__step { border-left: var(--rule); }
.flow__n { font-family: var(--sr-font-mono); font-size: var(--sr-text-label); letter-spacing: 0.06em; color: var(--sr-text-secondary); }
.flow__t { margin-top: var(--step-1); font-weight: var(--sr-weight-semibold); font-size: var(--sr-text-h4); }
.flow__d { margin-top: 6px; font-size: var(--sr-text-small); color: var(--sr-text-secondary); }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; border: var(--rule); border-radius: var(--sr-radius-md); }
/* Long unbreakable identifiers (e.g. a base64 chain id) must wrap rather than
   push the page wider than a phone. */
.u-break { overflow-wrap: anywhere; word-break: break-word; }
table { border-collapse: collapse; width: 100%; font-size: var(--sr-text-small); }
/* A docs table can carry a long route string or a comma-list of fields that
   will not shrink below its content. Rather than push the whole page wider than
   a phone, let the table itself scroll. Cells still wrap; only an over-wide
   table scrolls, so nothing changes where one already fits. */
.docs__body table { display: block; overflow-x: auto; }
th, td { text-align: left; padding: 12px var(--step-2); border-bottom: var(--rule); vertical-align: top; }
thead th {
  font-size: var(--sr-text-label);
  letter-spacing: var(--sr-ls-label);
  text-transform: uppercase;
  color: var(--sr-text-secondary);
  font-weight: var(--sr-weight-semibold);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td .mono, th .mono { white-space: nowrap; }

/* ---------- notes ---------- */
.note {
  border-left: 2px solid var(--sr-border-strong);
  padding: var(--step-2) 0 var(--step-2) var(--step-3);
  font-size: var(--sr-text-small);
  color: var(--sr-text-secondary);
}
.note--accent { border-left-color: var(--sr-accent); }
.note strong { color: var(--sr-text-primary); }

/* ---------- inverted band ---------- */
.band {
  background: var(--sr-color-basalt);
  color: var(--sr-color-chalk);
  --sr-text-primary: var(--sr-color-chalk);
  --sr-text-secondary: var(--sr-color-ash);
  --sr-border: var(--sr-color-graphite);
  --sr-border-strong: var(--sr-color-ash);
  --sr-surface: var(--sr-color-basalt-900);
  --sr-bg-secondary: var(--sr-color-basalt-900);
  --sr-link: var(--sr-color-cobalt-300);
  --sr-accent: var(--sr-color-cobalt-300);
  --sr-accent-hover: var(--sr-color-cobalt-200);
  --sr-accent-on: var(--sr-color-basalt);
}
.band .btn--secondary { border-color: var(--sr-color-ash); color: var(--sr-color-chalk); }
.band .btn--secondary:hover { border-color: var(--sr-color-cobalt-300); color: var(--sr-color-cobalt-300); }

/* ---------- docs layout ---------- */
.docs { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.docs__nav { position: sticky; top: 88px; font-size: var(--sr-text-small); }
.docs__nav h2 {
  font-size: var(--sr-text-label);
  letter-spacing: var(--sr-ls-label);
  text-transform: uppercase;
  color: var(--sr-text-secondary);
  font-weight: var(--sr-weight-semibold);
  margin-bottom: var(--step-2);
}
.docs__nav ul { list-style: none; margin: 0 0 var(--step-4); padding: 0; }
.docs__nav li + li { margin-top: 2px; }
.docs__nav a { display: flex; align-items: center; min-height: 24px; padding: 6px 10px; margin-left: -10px; border-radius: var(--sr-radius-sm); color: var(--sr-text-primary); text-decoration: none; }
.docs__nav a:hover { background: var(--sr-bg-secondary); color: var(--sr-accent); }
.docs__nav a[aria-current="page"] { background: var(--sr-bg-secondary); color: var(--sr-accent); font-weight: var(--sr-weight-medium); }

.docs__body > * + * { margin-top: var(--step-3); }
.docs__body h2 { margin-top: var(--step-5); padding-top: var(--step-1); }
.docs__body h3 { margin-top: var(--step-4); }
.docs__body > h2:first-child { margin-top: 0; }
.docs__body ul, .docs__body ol { margin: 0; padding-left: 1.3em; }
.docs__body li + li { margin-top: var(--step-1); }
.docs__body p, .docs__body li { max-width: var(--prose); }

/* ---------- forms ---------- */
.field { display: block; }
.field + .field { margin-top: var(--step-3); }
.field__label { display: block; font-size: var(--sr-text-small); font-weight: var(--sr-weight-semibold); margin-bottom: 6px; }
.field__hint { display: block; font-size: var(--sr-text-caption); color: var(--sr-text-secondary); margin-top: 6px; }
input[type="text"], input[type="email"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  font: inherit;
  font-size: var(--sr-text-body);
  color: var(--sr-text-primary);
  background: var(--sr-surface);
  border: 1px solid var(--sr-border-strong);
  border-radius: var(--sr-radius-sm);
}
input:focus-visible, select:focus-visible { border-color: var(--sr-accent); }
fieldset { border: var(--rule); border-radius: var(--sr-radius-md); padding: var(--step-3); margin: 0; }
legend { font-size: var(--sr-text-small); font-weight: var(--sr-weight-semibold); padding-inline: 6px; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--step-2); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--sr-text-small); }
.check input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--sr-accent); flex: 0 0 auto; }
.check span { display: block; }
.check em { display: block; font-style: normal; color: var(--sr-text-secondary); font-size: var(--sr-text-caption); }

.result { margin-top: var(--step-3); }
.result[hidden] { display: none !important; }

/* ---------- footer ---------- */
.foot { border-top: var(--rule); padding-block: var(--step-5) var(--step-4); margin-top: 0; }
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--step-4); }
.foot h2 {
  font-size: var(--sr-text-label);
  letter-spacing: var(--sr-ls-label);
  text-transform: uppercase;
  color: var(--sr-text-secondary);
  font-weight: var(--sr-weight-semibold);
  margin-bottom: var(--step-2);
}
.foot ul { list-style: none; margin: 0; padding: 0; font-size: var(--sr-text-small); }
.foot li + li { margin-top: var(--step-1); }
/* 2.5.8 Target Size (Minimum). These sit in a column two or three pixels
 * apart, so the spacing exception does not save them: each one has to be 24px
 * tall in its own right. */
.foot a { color: var(--sr-text-primary); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 24px; }
.foot a:hover { color: var(--sr-accent); text-decoration: underline; }
.foot__logo img { height: 22px; width: auto; display: block; }
.foot__line { font-size: var(--sr-text-caption); color: var(--sr-text-secondary); margin-top: var(--step-2); max-width: 42ch; }
.foot__bottom {
  margin-top: var(--step-5);
  padding-top: var(--step-3);
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-3);
  justify-content: space-between;
  font-size: var(--sr-text-caption);
  color: var(--sr-text-secondary);
}

/* The minimal footer: one copyright line and a short row of legal/status
 * links. Company and licence detail lives one layer deeper under /legal/, so
 * the footer stays the same legible row on every page. */
.foot--minimal { padding-block: var(--step-4); }
.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-2) var(--step-4);
  font-size: var(--sr-text-small);
  color: var(--sr-text-secondary);
}
.foot__copy { color: var(--sr-text-secondary); }
.foot__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step-1) var(--step-3);
}

/* ---------- the lock: the one approved motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lock-a, .lock-b { animation: lock-in 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .lock-a { --from: -0.28; }
  .lock-b { --from: 0.28; }
  @keyframes lock-in {
    from { transform: translateX(calc(var(--from) * 32px)); }
    to { transform: translateX(0); }
  }
}

/* ---------- responsive ----------
 * Checked at 1440, 1280, 1024, 768, 430, 390 and 360. */
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow__step:nth-child(3n+1) { border-left: 0; }
  .flow__step:nth-child(n+4) { border-top: var(--rule); }
}

@media (max-width: 1024px) {
  :root { --gutter: 20px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--step-5); }
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs__nav {
    position: static;
    border: var(--rule);
    border-radius: var(--sr-radius-md);
    padding: var(--step-3);
  }
  .docs__nav ul { margin-bottom: var(--step-3); }
  .docs__nav ul:last-child { margin-bottom: 0; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--step-4); }
}

@media (max-width: 860px) {
  .masthead__inner { gap: var(--step-3); flex-wrap: wrap; min-height: 60px; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--sr-border-strong);
    border-radius: var(--sr-radius-sm);
    color: var(--sr-text-primary);
    cursor: pointer;
  }
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .masthead[data-open="true"] .nav { display: flex; }
  .masthead[data-open="true"] .nav--primary { padding-top: var(--step-2); border-top: var(--rule); }
  .masthead[data-open="true"] .nav--end { padding-bottom: var(--step-3); gap: var(--step-2); }
  .nav--primary a { padding: 12px 0; border-bottom: var(--rule); }
  .nav--end { flex-direction: row; padding-top: var(--step-2); }
  .nav--end .btn { flex: 1 1 auto; }

  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure:nth-child(odd) { border-left: 0; }
  .figure:nth-child(n+3) { border-top: var(--rule); }
}

@media (max-width: 680px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); gap: var(--step-3); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow__step + .flow__step { border-left: 0; border-top: var(--rule); }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  h1 { font-size: clamp(28px, 8vw, 40px); }
  h2 { font-size: clamp(22px, 6vw, 28px); }
  .dim { grid-template-columns: 1fr; gap: 4px; }
  .dim__means { grid-column: 1; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--step-3); }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure { border-left: 0 !important; }
  .figure + .figure { border-top: var(--rule); }
}

@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .actions .btn { width: 100%; }
}

/* ---------- print ---------- */
@media print {
  .masthead, .foot, .skip, .actions { display: none; }
  body { background: #fff; color: #000; }
  .section { padding-block: 16px; }
}

/* 2.4.1 Bypass Blocks. The skip link needs somewhere focusable to land, which
 * is `tabindex="-1"` on <main>; this removes the outline the browser then
 * draws around the whole page, while leaving every real focus ring alone. */
main:focus { outline: none; }

/* 2.1.1 Keyboard, via axe's scrollable-region-focusable. A <pre> that scrolls
 * sideways is a region a mouse can reach and a keyboard cannot, so it is given
 * a tab stop -- and, having one, it has to show that it has one. */
pre[tabindex] { }
pre[tabindex]:focus-visible { outline: 2px solid var(--sr-focus); outline-offset: 2px; }

/* ======================================================================== *
 * StoneReason V4 — semantic colour + component layer.
 *
 * Brand V1 (the cobalt accent, neutrals, type) is locked and lives above this
 * file. This layer adds MEANING through colour — but never colour alone: every
 * status also carries a text label and a shape (a dot, a square, or an icon),
 * so it survives greyscale, colour-blindness and a screen reader. Product
 * areas get a restrained accent each; the page ground stays calm.
 *
 *     COLOUR != MEANING        colour is a second channel, not the only one
 * ======================================================================== */
:root {
  --sr-success: #1f7a4d; --sr-success-bg: #e9f6ef; --sr-success-line: #b6dfc8;
  --sr-warn:    #8a5a00; --sr-warn-bg:    #fdf3db; --sr-warn-line:    #efd9a3;
  --sr-danger:  #b3261e; --sr-danger-bg:  #fce9e7; --sr-danger-line:  #f2c2bd;
  --sr-info:    #1f5fbf; --sr-info-bg:    #e9f0fc; --sr-info-line:    #bcd3f4;
  --sr-verify:  #6a3fc0; --sr-verify-bg:  #f1ecfb; --sr-verify-line:  #d6c7f1;
  --sr-monitor: #0f7c86; --sr-monitor-bg: #e3f5f6; --sr-monitor-line: #b1e2e5;
  /* Product accents — one hue per area, drawn from the palette above. */
  --sr-access:   var(--sr-accent);
  --sr-payments: var(--sr-success);
  --sr-verifyp:  var(--sr-verify);
  --sr-monitorp: var(--sr-monitor);
}
/* Dark: darker tints, lighter ink, still AA. Applied wherever the brand marks
   a surface dark, plus the public site's inverted band. */
[data-theme="dark"], .sr-dark, .band {
  --sr-success: #5fd39a; --sr-success-bg: #13271d; --sr-success-line: #245a3f;
  --sr-warn:    #e6b656; --sr-warn-bg:    #2a2411; --sr-warn-line:    #5c4a1e;
  --sr-danger:  #f2938b; --sr-danger-bg:  #2b1512; --sr-danger-line:  #5c2a24;
  --sr-info:    #7fb0f5; --sr-info-bg:    #111d2e; --sr-info-line:    #274363;
  --sr-verify:  #b79ef0; --sr-verify-bg:  #1c1430; --sr-verify-line:  #3d2c66;
  --sr-monitor: #5fd0d8; --sr-monitor-bg: #0e2628; --sr-monitor-line: #1f5257;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sr-success: #5fd39a; --sr-success-bg: #13271d; --sr-success-line: #245a3f;
    --sr-warn:    #e6b656; --sr-warn-bg:    #2a2411; --sr-warn-line:    #5c4a1e;
    --sr-danger:  #f2938b; --sr-danger-bg:  #2b1512; --sr-danger-line:  #5c2a24;
    --sr-info:    #7fb0f5; --sr-info-bg:    #111d2e; --sr-info-line:    #274363;
    --sr-verify:  #b79ef0; --sr-verify-bg:  #1c1430; --sr-verify-line:  #3d2c66;
    --sr-monitor: #5fd0d8; --sr-monitor-bg: #0e2628; --sr-monitor-line: #1f5257;
  }
}

/* ---------- status badge: colour + shape + label ---------- */
.sbadge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 100px;
  font-size: var(--sr-text-caption); line-height: 1.35;
  font-weight: var(--sr-weight-semibold); font-family: var(--sr-font-sans);
  border: 1px solid transparent; white-space: nowrap; vertical-align: middle;
}
.sbadge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.sbadge--success { color: var(--sr-success); background: var(--sr-success-bg); border-color: var(--sr-success-line); }
.sbadge--warn    { color: var(--sr-warn);    background: var(--sr-warn-bg);    border-color: var(--sr-warn-line); }
.sbadge--danger  { color: var(--sr-danger);  background: var(--sr-danger-bg);  border-color: var(--sr-danger-line); }
.sbadge--info    { color: var(--sr-info);    background: var(--sr-info-bg);    border-color: var(--sr-info-line); }
.sbadge--verify  { color: var(--sr-verify);  background: var(--sr-verify-bg);  border-color: var(--sr-verify-line); }
.sbadge--monitor { color: var(--sr-monitor); background: var(--sr-monitor-bg); border-color: var(--sr-monitor-line); }
.sbadge--beta    { color: var(--sr-accent);  background: var(--sr-info-bg);    border-color: var(--sr-info-line); }
.sbadge--neutral { color: var(--sr-text-secondary); background: var(--sr-bg-secondary); border-color: var(--sr-border); }
/* "unsupported / not deployed" reads as intentional, not broken: a hollow
   square, not a filled dot. */
.sbadge--muted { color: var(--sr-text-secondary); background: transparent; border-color: var(--sr-border); }
.sbadge--muted::before { border-radius: 1px; background: transparent; border: 1.5px solid currentColor; width: 8px; height: 8px; }

/* ---------- tinted callout / status card ---------- */
.callout {
  border: 1px solid var(--sr-border); border-left-width: 3px;
  border-radius: var(--sr-radius-md); padding: var(--step-3, 24px);
  background: var(--sr-surface);
}
.callout__title { display: flex; align-items: center; gap: 8px; font-weight: var(--sr-weight-semibold); margin-bottom: 6px; }
.callout > p { color: var(--sr-text-secondary); font-size: var(--sr-text-small); }
.callout--success { background: var(--sr-success-bg); border-color: var(--sr-success-line); border-left-color: var(--sr-success); }
.callout--warn    { background: var(--sr-warn-bg);    border-color: var(--sr-warn-line);    border-left-color: var(--sr-warn); }
.callout--danger  { background: var(--sr-danger-bg);  border-color: var(--sr-danger-line);  border-left-color: var(--sr-danger); }
.callout--info    { background: var(--sr-info-bg);    border-color: var(--sr-info-line);    border-left-color: var(--sr-info); }
.callout--verify  { background: var(--sr-verify-bg);  border-color: var(--sr-verify-line);  border-left-color: var(--sr-verify); }
.callout--success .callout__title { color: var(--sr-success); }
.callout--warn    .callout__title { color: var(--sr-warn); }
.callout--danger  .callout__title { color: var(--sr-danger); }
.callout--info    .callout__title { color: var(--sr-info); }
.callout--verify  .callout__title { color: var(--sr-verify); }

/* ---------- usage meter ---------- */
.meter { height: 8px; border-radius: 100px; background: var(--sr-bg-secondary); overflow: hidden; border: 1px solid var(--sr-border); }
.meter__fill { height: 100%; background: var(--sr-accent); border-radius: 100px; min-width: 3px; }
.meter--warn .meter__fill { background: var(--sr-warn); }
.meter--near .meter__fill { background: var(--sr-danger); }
.meter__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--step-2, 16px); font-size: var(--sr-text-caption); color: var(--sr-text-secondary); margin-bottom: 6px; }
.meter__row strong { color: var(--sr-text-primary); font-variant-numeric: tabular-nums; }

/* ---------- product-accented card ---------- */
.pcard { border: 1px solid var(--sr-border); border-top: 3px solid var(--pc, var(--sr-accent)); border-radius: var(--sr-radius-md); padding: var(--step-3, 24px); background: var(--sr-surface); }
.pcard--access   { --pc: var(--sr-access); }
.pcard--payments { --pc: var(--sr-payments); }
.pcard--verify   { --pc: var(--sr-verifyp); }
.pcard--monitor  { --pc: var(--sr-monitorp); }
.pcard__eyebrow { font-family: var(--sr-font-mono); font-size: var(--sr-text-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pc, var(--sr-accent)); font-weight: var(--sr-weight-semibold); }
.pcard h3 { margin: var(--step-1, 8px) 0; }
.pcard p { color: var(--sr-text-secondary); font-size: var(--sr-text-small); }

/* ---------- small line-icon system ---------- */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon--lg { width: 22px; height: 22px; }
.ico-tint { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--sr-radius-md); background: var(--sr-bg-secondary); color: var(--sr-accent); }
.ico-tint--access   { background: var(--sr-info-bg);    color: var(--sr-access); }
.ico-tint--payments { background: var(--sr-success-bg); color: var(--sr-payments); }
.ico-tint--verify   { background: var(--sr-verify-bg);  color: var(--sr-verifyp); }
.ico-tint--monitor  { background: var(--sr-monitor-bg); color: var(--sr-monitorp); }

/* ---------- homepage hero extras ---------- */
.hero__caps { display: flex; flex-wrap: wrap; gap: var(--step-1, 8px); margin-top: var(--step-3, 24px); }
.hero__caps .sbadge { padding: 5px 12px 5px 10px; font-size: var(--sr-text-small); }
.kvline { display: grid; gap: 0; margin: 0 0 var(--step-2, 16px); }
.kvline > div { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: var(--step-2, 16px); padding: 7px 0; align-items: baseline; }
.kvline > div + div { border-top: var(--rule, 1px solid var(--sr-border)); }
.kvline dt { font-family: var(--sr-font-mono); font-size: var(--sr-text-label); letter-spacing: 0.05em; text-transform: uppercase; color: var(--sr-text-secondary); margin: 0; }
.kvline dd { margin: 0; font-size: var(--sr-text-small); font-weight: var(--sr-weight-medium); }
.ico-tint { margin-bottom: var(--step-2, 16px); }
.pcard .ico-tint + .pcard__eyebrow { margin-top: 0; }

/* ---------- networks index: live-summary stat strip ---------- */
/* A row of labelled stats, not pills: it reads as status and stays visually
   distinct from the outline filter chips below it, so the two do not blur into
   one crowded band. */
.netsummary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-2) var(--step-4); }
.netstat { display: inline-flex; align-items: baseline; gap: 8px; font-size: var(--sr-text-small); color: var(--sr-text-secondary); }
.netstat__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sr-accent); align-self: center; flex: 0 0 auto; }
.netstat strong { color: var(--sr-text-primary); font-size: var(--sr-text-body); font-weight: var(--sr-weight-semibold); font-variant-numeric: tabular-nums; }
.netstat--access .netstat__dot { background: var(--sr-info); }
.netstat--payments .netstat__dot { background: var(--sr-success); }
.netstat--balances .netstat__dot { background: var(--sr-verify); }

/* ---------- payment lifecycle (semantic states) ---------- */
.flow--lifecycle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow--lifecycle .flow__step { padding-top: calc(var(--step-3) + 3px); }
.flow__step--waiting  { box-shadow: inset 0 3px 0 var(--sr-border-strong); }
.flow__step--detected { box-shadow: inset 0 3px 0 var(--sr-info); }
.flow__step--pending  { box-shadow: inset 0 3px 0 var(--sr-warn); }
.flow__step--final    { box-shadow: inset 0 3px 0 var(--sr-success); }
.flow--lifecycle .flow__t { margin-top: var(--step-2); }
@media (max-width: 680px) {
  .flow--lifecycle { grid-template-columns: minmax(0, 1fr); }
  .flow__step--waiting, .flow__step--detected, .flow__step--pending, .flow__step--final { box-shadow: inset 3px 0 0 currentColor; }
}

/* ---------- V4.1: code copy buttons ---------- */
.codeblock { position: relative; }
.codeblock > pre { margin: 0; }
.copybtn {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  font: inherit; font-size: var(--sr-text-caption); font-weight: var(--sr-weight-semibold);
  padding: 4px 10px; border-radius: var(--sr-radius-sm); cursor: pointer;
  background: var(--sr-surface); color: var(--sr-text-secondary); border: 1px solid var(--sr-border-strong);
}
.copybtn:hover { color: var(--sr-accent); border-color: var(--sr-accent); }
.copybtn.is-copied { color: var(--sr-success); border-color: var(--sr-success-line); background: var(--sr-success-bg); }

/* ---------- V4.1: network filter ---------- */
/* Separated from the summary above by space and a hairline rule, so the status
   strip and the filter controls are clearly two different things. */
.netfilter { display: flex; flex-wrap: wrap; gap: var(--step-2) var(--step-3); align-items: center; justify-content: space-between;
  margin-top: var(--step-3); padding-top: var(--step-3); border-top: 1px solid var(--sr-border); }
.chips { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips__label { font-size: var(--sr-text-small); font-weight: var(--sr-weight-semibold); color: var(--sr-text-secondary); margin-right: 4px; }
.chip {
  font: inherit; font-size: var(--sr-text-small); font-weight: var(--sr-weight-medium);
  padding: 7px 15px; border-radius: 100px; border: 1px solid var(--sr-border-strong);
  background: var(--sr-surface); color: var(--sr-text-secondary); cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } }
.chip:hover { border-color: var(--sr-accent); color: var(--sr-accent); }
.chip.is-active { background: var(--sr-accent); border-color: var(--sr-accent); color: var(--sr-accent-on); }
.netfilter__search input {
  min-height: 40px; padding: 9px 12px; min-width: 220px; font: inherit; font-size: var(--sr-text-small);
  color: var(--sr-text-primary); background: var(--sr-surface);
  border: 1px solid var(--sr-border-strong); border-radius: var(--sr-radius-sm);
}
.netfilter__search input:focus-visible { border-color: var(--sr-accent); }
@media (max-width: 560px) { .netfilter__search, .netfilter__search input { width: 100%; } }

/* ---------- V4.1: Developer Center search ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.docsearch { position: relative; margin-bottom: var(--step-3); }
.docsearch input {
  width: 100%; min-height: 40px; padding: 9px 12px; font: inherit; font-size: var(--sr-text-small);
  color: var(--sr-text-primary); background: var(--sr-surface);
  border: 1px solid var(--sr-border-strong); border-radius: var(--sr-radius-sm);
}
.docsearch input:focus-visible { border-color: var(--sr-accent); }
.docsearch__results {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--sr-surface); border: 1px solid var(--sr-border-strong);
  border-radius: var(--sr-radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.docsearch__hit { display: block; padding: 9px 12px; text-decoration: none; color: var(--sr-text-primary); }
.docsearch__hit + .docsearch__hit { border-top: 1px solid var(--sr-border); }
.docsearch__hit:hover { background: var(--sr-bg-secondary); color: var(--sr-text-primary); }
.docsearch__t { display: block; font-weight: var(--sr-weight-semibold); font-size: var(--sr-text-small); }
.docsearch__s { display: block; font-size: var(--sr-text-caption); color: var(--sr-text-secondary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docsearch__empty { padding: 12px; margin: 0; font-size: var(--sr-text-small); color: var(--sr-text-secondary); }

/* ---------- V4.1: dense tables become cards on phones ---------- */
@media (max-width: 680px) {
  .netcards { overflow: visible; border: 0; border-radius: 0; }
  .netcards table, .netcards tbody, .netcards tr, .netcards th, .netcards td { display: block; width: 100%; }
  .netcards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .netcards tr { border: 1px solid var(--sr-border); border-radius: var(--sr-radius-md); background: var(--sr-surface); padding: 6px 14px 10px; margin-bottom: 12px; }
  .netcards tbody tr:last-child td { border-bottom: 0; }
  .netcards th[scope="row"] { font-size: var(--sr-text-h4); font-weight: var(--sr-weight-semibold); padding: 8px 0; border: 0; }
  .netcards td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border: 0; border-top: 1px solid var(--sr-border); text-align: right; }
  .netcards td::before { content: attr(data-label); color: var(--sr-text-secondary); font-size: var(--sr-text-caption); font-weight: var(--sr-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; text-align: left; }
}

/* ---------- V4.1: networks settlement (human label + protocol code) ---------- */
.finality { display: block; font-weight: var(--sr-weight-medium); }
.finality__code { display: inline-block; margin-top: 2px; font-family: var(--sr-font-mono); font-size: var(--sr-text-caption); color: var(--sr-text-secondary); overflow-wrap: anywhere; max-width: 100%; }

/* ================================================================== */
/* Proof Center  (/proof/, /proof/finality/, /proof/errors/, /limits/) */
/* Generated from the deployment manifest + qualification-truth.json.   */
/* Spacing is scoped to .proofpage because inline-style margins are      */
/* blocked by the production CSP (style-src 'self').                     */
/* ================================================================== */
.proofpage .lede { margin-top: var(--step-2); }
.proofpage .actions,
.proofpage .netfilter,
.proofpage .callout,
.proofpage .table-scroll,
.proofpage .grid,
.proofpage .figures,
.proofpage .flow,
.proofpage .pmetrics,
.proofpage .proof-limits { margin-top: var(--step-4); }
.proofpage .netfilter__count,
.proofpage .hero__note,
.proofpage .muted.pcell-small { margin-top: var(--step-3); }
.proofpage .proofsim__pick { margin-top: var(--step-4); }
.proofpage .proofsim__panel { margin-top: var(--step-3); }

/* small + note text (no inline font-size under CSP) */
.pcell-small { font-size: var(--sr-text-small); }
.pcell-note { color: var(--sr-text-secondary); }

/* Hero */
.proof-hero { text-align: left; }
.proof-hero > * + * { margin-top: var(--step-3); }

/* Metric cards */
.pmetrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--step-2); }
.pmetric { border: var(--rule); border-radius: var(--sr-radius-md); padding: var(--step-3); background: var(--sr-surface); display: flex; flex-direction: column; gap: 5px; }
.pmetric--accent { box-shadow: inset 0 3px 0 var(--sr-accent); }
.pmetric__n { font-size: var(--sr-text-h2); line-height: 1.05; font-weight: var(--sr-weight-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }
.pmetric__n code { font-size: var(--sr-text-h4); font-weight: var(--sr-weight-medium); }
.pmetric__l { font-size: var(--sr-text-label); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--sr-weight-semibold); color: var(--sr-text-secondary); }
.pmetric__d { font-size: var(--sr-text-caption); color: var(--sr-text-secondary); }

/* Live indicator dot */
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sr-success); display: inline-block; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: proof-pulse 2.4s ease-in-out infinite; }
  @keyframes proof-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--sr-success); } 50% { box-shadow: 0 0 0 4px transparent; } }
}

/* 7-state payment lifecycle */
.flow--proof { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.flow--proof .flow__step { padding-top: calc(var(--step-3) + 3px); }
.flow__step--verified   { box-shadow: inset 0 3px 0 var(--sr-info); }
.flow__step--reconciled { box-shadow: inset 0 3px 0 var(--sr-success); }
.flow__step--issued     { box-shadow: inset 0 3px 0 var(--sr-verify); }
@media (max-width: 1100px) {
  .flow--proof { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow--proof .flow__step:nth-child(4n+1) { border-left: 0; }
  .flow--proof .flow__step:nth-child(n+5) { border-top: var(--rule); }
}
@media (max-width: 680px) {
  .flow--proof { grid-template-columns: minmax(0, 1fr); }
  .flow--proof .flow__step:nth-child(n+2) { border-top: var(--rule); }
  .flow--proof .flow__step { border-left: 0; }
}

/* Scenario selector (payment simulation) */
.proofsim__out { margin: 0; }
.proof-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 680px) { .proof-figs { grid-template-columns: minmax(0, 1fr); } }

/* Capability / error matrix: keep the meaning column readable */
.proof-matrix .pcell-note { font-size: var(--sr-text-small); }

/* =========================================================================
   Homepage — payment operating stack: animated story + four pillars.
   All motion is decorative over content that is fully visible at rest, and
   is disabled under prefers-reduced-motion.
   ========================================================================= */

/* --- The lifecycle story card --------------------------------------------- */
.storycard { display: block; }
.story {
  border: var(--rule); border-radius: 14px; background: var(--sr-surface);
  padding: var(--step-3); overflow: hidden;
}
.story__head { display: flex; align-items: center; justify-content: space-between; gap: var(--step-2); flex-wrap: wrap; }
.story__title { font-size: var(--sr-text-small); color: var(--sr-text-secondary); }
.story__title strong { color: var(--sr-text-primary); }
.story__toggle { display: inline-flex; border: var(--rule); border-radius: 999px; overflow: hidden; }
.story__tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: var(--sr-text-small); color: var(--sr-text-secondary);
  padding: 4px 12px;
}
.story__tab.is-active { background: var(--sr-accent); color: var(--sr-accent-on); }
.story__stages { list-style: none; margin: var(--step-3) 0 0; padding: 0; display: grid; gap: 6px; }
.story__stage {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--step-2);
  padding: 8px 12px; border-radius: 8px; border: 1px solid transparent;
  background: var(--sr-bg-secondary); position: relative;
}
.story__stage::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 3px; background: var(--sr-border);
}
.story__k { font-size: var(--sr-text-small); color: var(--sr-text-secondary); }
.story__v { font-size: var(--sr-text-small); color: var(--sr-text-primary); font-variant-numeric: tabular-nums; text-align: right; }
.story__stage[data-stage="guard"]::before   { background: var(--sr-info); }
.story__stage[data-stage="pay"]::before      { background: var(--sr-warn); }
.story__stage[data-stage="verify"]::before,
.story__stage[data-stage="passport"]::before { background: var(--sr-verify); }
.story__stage[data-stage="operate"]::before  { background: var(--sr-monitor); }
.story__stage[data-stage="exec"]::before,
.story__stage[data-stage="final"]::before    { background: var(--sr-success); }
.story__result { margin-top: var(--step-3); padding-top: var(--step-3); border-top: var(--rule); }
.story__note { margin: var(--step-1) 0 0; font-size: var(--sr-text-small); color: var(--sr-text-secondary); }
.story--short .story__result .sbadge { }
.story__laws { list-style: none; margin: var(--step-3) 0 0; padding: 0; display: grid; gap: 4px; }
.story__laws li { font-size: var(--sr-text-small); color: var(--sr-text-secondary); }
.story__laws .mono { color: var(--sr-text-primary); }

/* Travelling highlight: each stage glows in turn. Content is legible without it. */
@media (prefers-reduced-motion: no-preference) {
  .story__stages .story__stage { animation: lc-pulse 9s linear infinite; }
  .story__stage:nth-child(1) { animation-delay: 0s; }
  .story__stage:nth-child(2) { animation-delay: 1s; }
  .story__stage:nth-child(3) { animation-delay: 2s; }
  .story__stage:nth-child(4) { animation-delay: 3s; }
  .story__stage:nth-child(5) { animation-delay: 4s; }
  .story__stage:nth-child(6) { animation-delay: 5s; }
  .story__stage:nth-child(7) { animation-delay: 6s; }
  .story__stage:nth-child(8) { animation-delay: 7s; }
  .story__stage:nth-child(9) { animation-delay: 8s; }
  @keyframes lc-pulse {
    0%, 8%   { border-color: var(--sr-border-strong); transform: translateX(2px); }
    11%, 100% { border-color: transparent; transform: none; }
  }
}

/* --- Four pillars --------------------------------------------------------- */
.pillars { }
.pillar {
  border: var(--rule); border-left: 3px solid var(--sr-border-strong);
  border-radius: 12px; padding: var(--step-3); background: var(--sr-surface);
}
.pillar__top { display: flex; align-items: center; justify-content: space-between; gap: var(--step-2); }
.pillar__eyebrow { margin: 0; font-size: var(--sr-text-small); letter-spacing: .04em; text-transform: uppercase; color: var(--sr-text-secondary); }
.pillar h3 { margin: var(--step-1) 0 var(--step-2); }
.pillar__law { margin-top: var(--step-2); font-size: var(--sr-text-small); color: var(--sr-text-secondary); }
.pillar--guard   { border-left-color: var(--sr-info); }
.pillar--pay     { border-left-color: var(--sr-warn); }
.pillar--verify  { border-left-color: var(--sr-verify); }
.pillar--operate { border-left-color: var(--sr-monitor); }

/* --- Developer flow list + audience -------------------------------------- */
.flowlist { margin: var(--step-3) 0 0; padding-left: 0; list-style: none; display: grid; gap: 8px; counter-reset: fl; }
.flowlist li { position: relative; padding-left: 34px; counter-increment: fl; color: var(--sr-text-secondary); font-size: var(--sr-text-small); }
.flowlist li::before {
  content: counter(fl, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-variant-numeric: tabular-nums; color: var(--sr-accent); font-weight: 600;
}
.flowlist .mono { color: var(--sr-text-primary); }
.sbadge--monitor { color: var(--sr-monitor); background: var(--sr-monitor-bg); border-color: var(--sr-monitor-line); }

/* Homepage spacing utilities (CSP-clean: no inline style attributes). */
.mt-2 { margin-top: var(--step-2); }
.mt-3 { margin-top: var(--step-3); }
.mt-4 { margin-top: var(--step-4); }
.u-small { font-size: var(--sr-text-small); }
.u-align-start { align-items: start; }
.mt-5 { margin-top: var(--step-5); }
.u-prose { max-width: var(--prose); }
.my-3 { margin: var(--step-3) 0; }
.caption-left { text-align: left; padding: 12px 16px; font-size: var(--sr-text-small); }