:root {
  color-scheme: light dark;
  --color-surface: #F3F4F1;
  --color-surface-soft: #E9EBE5;
  --color-ink: #16191E;
  --color-ink-soft: #566069;
  --color-border: #D5D9D1;
  --color-accent: #F5D547;
  --color-accent-ink: #16191E;
  --color-accent-soft: #F5D547;
  --color-surface-card: #FFFFFF;
  --color-ok: #1B7446;
  --color-ok-soft: #E1F0E6;
  --color-warn: #8A570B;
  --color-warn-soft: #F7EAD2;
  --color-band: #16191E;
  --color-band-ink: #F3F4F1;
  --color-band-muted: #A9AFB6;
  --color-band-line: #353A42;
  --color-btn: #16191E;
  --color-btn-ink: #F3F4F1;
  --font-sans: Inter, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --type-body-family: Inter, system-ui, sans-serif;
  --type-body-size: 17px;
  --type-body-line-height: 1.6;
  --type-body-weight: 400;
  --type-small-family: Inter, system-ui, sans-serif;
  --type-small-size: 14px;
  --type-small-line-height: 1.55;
  --type-small-weight: 400;
  --type-card-family: Inter, system-ui, sans-serif;
  --type-card-size: 16px;
  --type-card-line-height: 1.55;
  --type-card-weight: 400;
  --type-eyebrow-family: "JetBrains Mono", ui-monospace, monospace;
  --type-eyebrow-size: 12px;
  --type-eyebrow-line-height: 1.2;
  --type-eyebrow-weight: 500;
  --type-eyebrow-letter-spacing: 0.12em;
  --type-eyebrow-transform: uppercase;
  --type-lead-family: Inter, system-ui, sans-serif;
  --type-lead-size: 20px;
  --type-lead-line-height: 1.5;
  --type-lead-weight: 400;
  --type-h3-family: Inter, system-ui, sans-serif;
  --type-h3-size: 22px;
  --type-h3-line-height: 1.25;
  --type-h3-weight: 600;
  --type-h3-letter-spacing: -0.015em;
  --type-h2-family: Inter, system-ui, sans-serif;
  --type-h2-size: 40px;
  --type-h2-line-height: 1.1;
  --type-h2-weight: 600;
  --type-h2-letter-spacing: -0.025em;
  --type-h1-family: Inter, system-ui, sans-serif;
  --type-h1-size: 72px;
  --type-h1-line-height: 1.05;
  --type-h1-weight: 600;
  --type-h1-letter-spacing: -0.035em;
  --type-tile-family: Inter, system-ui, sans-serif;
  --type-tile-size: 40px;
  --type-tile-line-height: 1.0;
  --type-tile-weight: 600;
  --type-numbers-family: "JetBrains Mono", ui-monospace, monospace;
  --type-numbers-size: 16px;
  --type-numbers-line-height: 1.5;
  --type-numbers-weight: 500;
  --type-h1-long-family: Inter, system-ui, sans-serif;
  --type-h1-long-size: 58px;
  --type-h1-long-line-height: 1.08;
  --type-h1-long-weight: 600;
  --type-h1-long-letter-spacing: -0.035em;
  --type-button-family: Inter, system-ui, sans-serif;
  --type-button-size: 15px;
  --type-button-line-height: 1;
  --type-button-weight: 600;
  --type-button-letter-spacing: 0.01em;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-15: 120px;
  --radius-card: 16px;
  --radius-pill: 9999px;
  --shadow-card: 0px 4px 20px -8px #00000014;
  --layout-container: 1200px;
  --layout-measure: 44rem;
  --layout-measure-narrow: 30rem;
  --texture-halftone: radial-gradient(circle at center, color-mix(in srgb, var(--color-ink) 24%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px;
  --texture-corner-marks: 7px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: #111316;
    --color-surface-soft: #15181B;
    --color-ink: #ECEEE9;
    --color-ink-soft: #9CA3AA;
    --color-border: #2D3238;
    --color-accent: #E9CB3D;
    --color-accent-ink: #111316;
    --color-accent-soft: #E9CB3D61;
    --color-surface-card: #1A1D21;
    --color-ok: #62CC9A;
    --color-ok-soft: #62CC9A1F;
    --color-warn: #E8B25A;
    --color-warn-soft: #E8B25A21;
    --color-band: #1D2025;
    --color-band-ink: #ECEEE9;
    --color-band-muted: #9CA3AA;
    --color-band-line: #353A42;
    --color-btn: #ECEEE9;
    --color-btn-ink: #111316;
  }
}

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  font-variant-numeric: tabular-nums lining-nums;  /* S135 (R-S3): equal-width, full-height digits in prices and totals */
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-weight);
}
a { color: inherit; }
h1, h2, h3 { font-weight: 600; margin: 0 0 var(--space-2); overflow-wrap: break-word; }
h1 { font-family: var(--type-h1-family); font-size: var(--type-h1-size); line-height: var(--type-h1-line-height);
     font-weight: var(--type-h1-weight); letter-spacing: var(--type-h1-letter-spacing); overflow-wrap: normal; hyphens: manual; }
/* DE/RU/UK headlines run ~1.4× the EN length — one step smaller so the hero stays at 4–5 lines (S124 review) */
html[lang="de"] h1, html[lang="ru"] h1, html[lang="uk"] h1 { font-size: var(--type-h1-long-size); }
h2 { font-family: var(--type-h2-family); font-size: var(--type-h2-size); line-height: var(--type-h2-line-height); letter-spacing: var(--type-h2-letter-spacing); }
h3 { font-family: var(--type-h3-family); font-size: var(--type-h3-size); line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-letter-spacing); }
p { margin: 0 0 var(--space-2); }
ul { margin: 0; padding: 0; list-style: none; }
.small { font-family: var(--type-small-family); font-size: var(--type-small-size); line-height: var(--type-small-line-height); color: var(--color-ink-soft); }
.mono, .numbers-table { font-family: var(--type-numbers-family); font-size: var(--type-numbers-size); line-height: var(--type-numbers-line-height); font-weight: var(--type-numbers-weight); }
.container { max-width: var(--layout-container); margin: 0 auto; padding: 0 var(--space-3); }
.measure { max-width: var(--layout-measure); }
/* S124 (D7): block rhythm 96 -> 120px; hairline on every .block EXCEPT the first (adjacent-sibling
   selector, not a hardcoded "first" block id — works regardless of build_body order). */
.block { padding-block: var(--space-10); }
.block + .block { border-top: 1px solid var(--color-border); }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

/* S124 (D5, D2/R-I6): the one repeating block-anatomy device — eyebrow -> h1/h2 -> lead */
.eyebrow {
  display: block;
  font-family: var(--type-eyebrow-family);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line-height);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-letter-spacing);
  text-transform: var(--type-eyebrow-transform);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}
.lead {
  font-family: var(--type-lead-family);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line-height);
  font-weight: var(--type-lead-weight);
  color: var(--color-ink-soft);
  margin: var(--space-3) 0 0;
}
.block-head { margin-bottom: var(--space-4); }
.block-head h2 { margin-bottom: 0; }
.hero-text .eyebrow { margin-bottom: var(--space-3); }
/* S126 (DESIGN-DIFF-TECHTIDE T5): hero lead sits further from h1 and reads narrower than a block lead */
.hero-text .lead { margin-top: var(--space-4); max-width: var(--layout-measure-narrow); }

.card { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3); }
/* S140: the accent word = a marker highlight behind ink text (box-shadow, no gradient), never a coloured word */
.accent, .hl { color: inherit; box-shadow: inset 0 -0.42em 0 var(--color-accent-soft); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.cta-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.link-secondary { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
.link-secondary:hover { text-decoration-thickness: 2px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-btn);
  color: var(--color-btn-ink);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-family: var(--type-button-family);
  font-size: var(--type-button-size);
  line-height: var(--type-button-line-height);
  font-weight: var(--type-button-weight);
  letter-spacing: var(--type-button-letter-spacing);
  min-height: 44px;
}
/* S126 (DESIGN-DIFF-TECHTIDE T9): outline pill, same box as .button — HERO + SITUATIONS secondary action */
.button-outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-ink);
}
.button-outline:hover { border-color: var(--color-ink); }

.missing-block {
  border: 1px dashed var(--color-border);
  padding: var(--space-2);
  color: var(--color-ink-soft);
  font-family: var(--type-numbers-family);
  font-size: var(--type-small-size);
}

/* SKIP LINK (WB-site-discovery-0929): visually hidden, visible on :focus only */
.skip-link { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 20;
             padding: var(--space-1) var(--space-2); background: var(--color-btn);
             color: var(--color-btn-ink); border-radius: var(--radius-pill);
             font-size: var(--type-small-size); text-decoration: none;
             transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* NAV — S126 (DESIGN-DIFF-TECHTIDE T14): sticky, hairline, blur. padding-top/bottom only (space-2) —
   .nav shares the header element with .container, whose own horizontal padding (space-3) must survive
   the cascade, so the horizontal side is left unset here rather than forced to a literal 0. */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
       padding-top: var(--space-2); padding-bottom: var(--space-2); flex-wrap: wrap;
       position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--color-surface) 92%, transparent);
       -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
       border-bottom: 1px solid var(--color-border); }
.nav-identity { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.nav-name { font-weight: 600; text-decoration: none; }
.lang-switch { display: flex; gap: var(--space-1); flex-wrap: wrap; min-width: 0; }
.lang-switch a, .lang-switch .lang-current { display: inline-block; padding: 6px 8px; }  /* S129: ≥ 24 px tap target */
.lang-switch a { text-decoration: none; }
.lang-switch .lang-current { font-weight: 600; }

/* HERO (D1-D3, D8): two columns — text 7fr | right (photo or tiles) 5fr */
.hero { position: relative; overflow: hidden; padding: var(--space-15) 0; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--texture-halftone); pointer-events: none; }
.hero-grid { position: relative; display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.hero-text { flex: 7 1 360px; min-width: 0; max-width: 60rem; }
/* S129: the proof line — value + label per item, hairline between; replaces the 2×2 tiles beside the h1 */
.proof-line { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); }
.hero-proof { position: relative; }
.proof-item + .proof-item { border-left: 1px solid var(--color-border); padding-left: var(--space-3); }
.proof-item strong { color: var(--color-ink); font-weight: 600; }
.ap-proof { column-gap: var(--space-4); }
.ap-proof .proof-item + .proof-item { border-left: 0; padding-left: 0; }
.hero-right { flex: 5 1 280px; min-width: 0; }
.hero-photo { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
/* S133 (R-O1 A): the one-workflow schema — a titled card, nodes joined by hairline arrows, the side
   exit to a person. Tokens only: card surface, border, ONE accent on the main node. */
.hero-schema { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
               padding: var(--space-4); max-width: 26rem; margin-left: auto; }
.hero-schema .eyebrow { margin-bottom: var(--space-3); }
.schema-node { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-card);
               padding: var(--space-2) var(--space-3); min-width: 0; }
.schema-node span { display: block; }
.schema-label { font-weight: 600; }
.schema-main { border-color: var(--color-ink); background: var(--color-surface-soft); }
.schema-aside { border-style: dashed; }
.schema-row { display: grid; grid-template-columns: minmax(0, 3fr) 20px minmax(0, 2fr); align-items: center; }
.schema-side { display: block; height: 1px; background: var(--color-border); }
.schema-arrow { display: block; width: 1px; height: 20px; background: var(--color-border); margin: 0 auto; position: relative; }
.schema-arrow::after { content: ""; position: absolute; left: -4px; bottom: 0; width: 7px; height: 7px;
                       border-right: 1px solid var(--color-ink-soft); border-bottom: 1px solid var(--color-ink-soft); transform: rotate(45deg); }
@media (max-width: 900px) { .hero-schema { margin-left: 0; max-width: none; } }

/* CREDIBILITY TILES (D3, P-022-1): hero right half when no photo, or a strip under the hero when
   both a photo and tiles exist */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.tile { background: var(--color-surface-soft); border-radius: var(--radius-card); padding: var(--space-3);
        min-width: 0; overflow-wrap: break-word; }
.tile-value { display: block; font-family: var(--type-tile-family); font-size: var(--type-tile-size);
              line-height: var(--type-tile-line-height); font-weight: var(--type-tile-weight); }
.tile-label { display: block; margin-top: var(--space-1); color: var(--color-ink-soft); }
.tiles-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3);
               padding: var(--space-6) var(--space-3) 0; }
@media (max-width: 700px) { .tiles-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* SITUATIONS (D5): 2x2 filled cards + cta-row */
.sit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.sit-lead { font-weight: 600; display: block; margin-bottom: var(--space-1); }  /* S129: bold 3–4-word lead-in per card */
@media (max-width: 700px) { .sit-grid { grid-template-columns: 1fr; } }

/* FIVE STEPS (S130, JOURNEY-REVIEW-2026-09-20 §5, R-M1): Dima's compact FOUR-COLUMN table —
   step (number · name) · time & cost (when, then pay + you-give bullets) · what we do & you get
   (one sentence per line, ◆ milestone lines inside) · you decide. Replaces the S129 six-row grid +
   ◆ rule (listed delta, V-S128-02). Same content on phones as stacked cards. */
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
           border-radius: 50%; background: var(--color-ink); color: var(--color-surface);
           font-weight: 600; margin-bottom: var(--space-2); }
.sit-note { margin-top: var(--space-4); max-width: var(--layout-measure, 44rem); }

.steps-table { display: grid; grid-template-columns: minmax(9rem, 12rem) minmax(0, 1.1fr) minmax(0, 1.8fr) minmax(0, 0.9fr);  /* S130 v2: col 1 wide enough for "Kostenloses Erstgespräch" / "Prozessanalyse" (DE shot broke mid-word) */
               margin-top: var(--space-6); }
.steps-th { padding: 0 var(--space-2) var(--space-2) 0; color: var(--color-ink-soft);
            font-family: var(--type-small-family); font-size: var(--type-small-size);
            line-height: var(--type-small-line-height); border-bottom: 2px solid var(--color-border); }
.steps-cell { padding: var(--space-4) var(--space-2) var(--space-4) 0; min-width: 0; overflow-wrap: break-word;
              font-family: var(--type-small-family); font-size: var(--type-small-size);
              line-height: var(--type-small-line-height); border-bottom: 1px solid var(--color-border); }
.steps-cell h3 { font-family: var(--type-h3-family); font-size: var(--type-h3-size);
                 line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-letter-spacing);
                 margin-bottom: 0; overflow-wrap: normal; hyphens: manual; }  /* never split a step name mid-word */
.step-when { margin: 0 0 var(--space-1); color: var(--color-ink); font-weight: 600; }
.steps-legend { margin-top: var(--space-3); }

/* fragment cells (R-L4): 1–4 short items as a dot-bulleted list, the dot drawn by ::before */
.cell-list { margin: 0; padding: 0; list-style: none; }
.cell-list li { position: relative; padding-left: var(--space-2); }
.cell-list li + li { margin-top: var(--space-1); }
.cell-list li::before { content: "\00B7"; position: absolute; left: 0; color: var(--color-ink-soft); }
/* sentence cells (UL-R1a, S130): one sentence per line, no dot */
.cell-sent { margin: 0; }
.cell-sent + .cell-sent { margin-top: var(--space-1); }
.cell-decide { margin: 0; font-weight: 600; color: var(--color-ink); }

/* S133 (R-O1 E–G): three phase cards — eyebrow + chip, title, step rows with hairlines, footer sum.
   The highlighted card takes the accent border; the gate sentence sits under the phase-2 step. */
.phase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
/* S135 (R-S2): four shared row lines across the three cards — top (head + title + switch) · step row 1 ·
   step row 2 (phase 2: the payback rule) · footer. Each card spans four rows of the grid and takes them
   as a SUBGRID, so a row is as tall as its tallest cell in any card; .phase-steps and the checked
   .variant-panel are display: contents, so their step rows and footer land in the card's rows. */
.phase-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding: var(--space-4); min-width: 0; }
.phase-top { min-width: 0; }
.phase-steps { display: contents; }
.phase-highlight { border-color: var(--color-ink); }
.phase-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.phase-head .eyebrow { margin: 0; }
.phase-card .chip { display: inline-block; white-space: nowrap; font-family: var(--type-small-family); font-size: var(--type-small-size);
                    color: var(--color-ink-soft); border: 1px dashed var(--color-border); border-radius: 999px; padding: 2px 10px; }
.phase-card h3 { margin-bottom: var(--space-3); }
.phase-step { display: flex; flex-direction: column; padding: var(--space-3) 0; border-top: 1px solid var(--color-border);
              font-family: var(--type-small-family); font-size: var(--type-small-size); line-height: var(--type-small-line-height); }
.phase-step-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-1); }
.phase-step-head .step-no { width: 24px; height: 24px; margin: 0; font-size: var(--type-small-size); }
.phase-step-head h4 { margin: 0; font-size: var(--type-body-size); font-weight: 600; overflow-wrap: normal; hyphens: manual; }
.phase-when { margin-left: auto; white-space: nowrap; }
.phase-price { margin: 0 0 var(--space-1); font-weight: 600; color: var(--color-ink); }
/* S135 (R-S1, the showcase geometry on tokens — no emoji, no green, no new font): body indented
   under the number (24px disc + the head gap), one paragraph per sentence run with ◆ milestones on
   their own line, your time + you decide as ONE soft box of two labelled rows, dashed hairline
   between steps, a titled payback rule with an accent edge, footer sum split left | right. */
.phase-step + .phase-step, .phase-steps + .phase-gate { border-top-style: dashed; }
.phase-step-body { display: flex; flex-direction: column; flex: 1 1 auto; padding-left: calc(24px + var(--space-2)); }
.phase-desc { margin: 0; }
/* S135 (R-S3): reading text in the step cards at type.card (16 px); price, when and footer stay type.small */
.phase-desc, .phase-commit, .phase-gate-box { font-size: var(--type-card-size); line-height: var(--type-card-line-height); }
.phase-desc + .phase-desc { margin-top: var(--space-1); }
.phase-commit { margin-top: auto; padding: var(--space-1) var(--space-2); background: var(--color-surface-soft);
                border: 1px solid var(--color-border); border-radius: 12px; }
/* inline label + value, wrapping the full box width: a label column squeezed the DE/RU values
   ("Sie entscheiden", "Вы решаете") into a narrow tower (S135 read-back) */
.phase-desc:last-of-type { margin-bottom: var(--space-2); }
.commit-row + .commit-row { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-border); }
.commit-label { margin-right: 6px; }
.commit-label { color: var(--color-ink-soft); }
.commit-decide { font-weight: 600; color: var(--color-ink); }
.phase-gate { display: flex; flex-direction: column; padding: var(--space-3) 0; border-top: 1px solid var(--color-border);
              font-family: var(--type-small-family); font-size: var(--type-small-size); line-height: var(--type-small-line-height); }
.phase-gate .phase-step-head { padding-left: calc(24px + var(--space-2)); }
.phase-gate-box { flex: 1 1 auto; margin: var(--space-1) 0 0 calc(24px + var(--space-2)); padding: var(--space-2) var(--space-3);
                  background: var(--color-surface-soft); border-left: 3px solid var(--color-ink); border-radius: 0 12px 12px 0; }
.phase-gate-box p { margin: 0; }
.phase-footer { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
                margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--color-border); color: var(--color-ink); }
.phase-footer-sum { font-weight: 600; white-space: nowrap; }
.phase-footer-time { color: var(--color-ink-soft); text-align: right; }
@media (max-width: 900px) { .phase-grid { grid-template-columns: 1fr; }
  .phase-card { display: flex; flex-direction: column; grid-row: auto; }
  .phase-commit { margin-top: 0; } .phase-footer { margin-top: auto; } }

/* S134 (R-Q1, WB-S134-A §2 · S134 orchestrator fix after WB-S134-B): the phase-G3 "who builds it"
   toggle — CSS-only (no JavaScript on this site). The two hidden <input type="radio"> are the FIRST
   children of the phase card, so ":checked ~" reaches (1) the chip in .phase-head (both variants'
   chips are in the head, the checked one shows — the card keeps the same head geometry as phases 1
   and 2), (2) the label row .variant-switch (labels only, a joined pill row), (3) the .variant-panel
   siblings, which are card-level children and therefore stack full width on every viewport (the
   WB-S134-B phone defect: panels were flex children of the label row). The default variant carries
   the HTML `checked` attribute; with CSS off both panels render (progressive enhancement). */
.phase-card { position: relative; }
.variant-prompt { margin: var(--space-3) 0 var(--space-1); color: var(--color-ink-soft); }
.variant-switch { display: flex; gap: 2px; padding: 3px; margin-bottom: var(--space-2); background: var(--color-surface-soft);
                  border: 1px solid var(--color-border); border-radius: 12px; }
.variant-radio { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.variant-label { flex: 1 1 auto; padding: 6px var(--space-1); border: 1px solid transparent; border-radius: 9px; cursor: pointer;
  text-align: center; white-space: nowrap; color: var(--color-ink-soft); font-family: var(--type-small-family); font-size: var(--type-small-size); line-height: 1.4; min-height: 24px; }
.phase-head .variant-chip { display: none; }
.variant-panel { display: none; }
#g3-variant-we_build-en:checked ~ .phase-top .variant-chip[data-variant="we_build"],
#g3-variant-your_team-en:checked ~ .phase-top .variant-chip[data-variant="your_team"],
#g3-variant-we_build-de:checked ~ .phase-top .variant-chip[data-variant="we_build"],
#g3-variant-your_team-de:checked ~ .phase-top .variant-chip[data-variant="your_team"],
#g3-variant-we_build-ru:checked ~ .phase-top .variant-chip[data-variant="we_build"],
#g3-variant-we_build-uk:checked ~ .phase-top .variant-chip[data-variant="we_build"],
#g3-variant-your_team-ru:checked ~ .phase-top .variant-chip[data-variant="your_team"],
#g3-variant-your_team-uk:checked ~ .phase-top .variant-chip[data-variant="your_team"] { display: inline-block; }
#g3-variant-we_build-en:checked ~ .phase-top .variant-label[for="g3-variant-we_build-en"],
#g3-variant-your_team-en:checked ~ .phase-top .variant-label[for="g3-variant-your_team-en"],
#g3-variant-we_build-de:checked ~ .phase-top .variant-label[for="g3-variant-we_build-de"],
#g3-variant-your_team-de:checked ~ .phase-top .variant-label[for="g3-variant-your_team-de"],
#g3-variant-we_build-ru:checked ~ .phase-top .variant-label[for="g3-variant-we_build-ru"],
#g3-variant-we_build-uk:checked ~ .phase-top .variant-label[for="g3-variant-we_build-uk"],
#g3-variant-your_team-ru:checked ~ .phase-top .variant-label[for="g3-variant-your_team-ru"],
#g3-variant-your_team-uk:checked ~ .phase-top .variant-label[for="g3-variant-your_team-uk"] { background: var(--color-surface); border-color: var(--color-border); color: var(--color-ink); font-weight: 600; }
#g3-variant-we_build-en:checked ~ .variant-panel[data-variant="we_build"],
#g3-variant-your_team-en:checked ~ .variant-panel[data-variant="your_team"],
#g3-variant-we_build-de:checked ~ .variant-panel[data-variant="we_build"],
#g3-variant-your_team-de:checked ~ .variant-panel[data-variant="your_team"],
#g3-variant-we_build-ru:checked ~ .variant-panel[data-variant="we_build"],
#g3-variant-we_build-uk:checked ~ .variant-panel[data-variant="we_build"],
#g3-variant-your_team-ru:checked ~ .variant-panel[data-variant="your_team"],
#g3-variant-your_team-uk:checked ~ .variant-panel[data-variant="your_team"] { display: contents; }
.variant-radio:focus-visible ~ .phase-top .variant-label { outline: 1px solid var(--color-border); }

/* mobile: one panel card per step — number · name · when, then the three columns as label: value */
.steps-cards { display: none; }
@media (max-width: 900px) {
  .steps-table, .steps-legend { display: none; }
  .steps-cards { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
  .steps-cards .cell-list, .steps-cards .cell-sent { font-size: var(--type-small-size); line-height: var(--type-small-line-height); }
  .steps-cards .card-row { margin-top: var(--space-2); }
}

/* NUMBERS BOX (S129, DESIGN-REVIEW §3d — the S128 draft): today → after → what changes → worth per
   year, numbers right-aligned in mono; the two unpriced rows as one sentence; a framed ledger
   (saved − running = impact) with a double rule; investment line + ceiling; the gate sentence. */
.numbers-box { position: relative; background: var(--color-surface-soft); padding: var(--space-6); }
.corner-mark { position: absolute; width: var(--texture-corner-marks); height: var(--texture-corner-marks); }
.corner-tl { top: 0; left: 0; border-top: 1px solid var(--color-ink); border-left: 1px solid var(--color-ink); }
.corner-tr { top: 0; right: 0; border-top: 1px solid var(--color-ink); border-right: 1px solid var(--color-ink); }
.corner-bl { bottom: 0; left: 0; border-bottom: 1px solid var(--color-ink); border-left: 1px solid var(--color-ink); }
.corner-br { bottom: 0; right: 0; border-bottom: 1px solid var(--color-ink); border-right: 1px solid var(--color-ink); }
.tb-table { width: 100%; border-collapse: collapse; }
.tb-table th { text-align: left; font-weight: 400; color: var(--color-ink-soft);
               font-family: var(--type-small-family); font-size: var(--type-small-size);
               padding: 0 var(--space-2) var(--space-1) 0; border-bottom: 1px solid var(--color-border); }
.tb-table td { padding: var(--space-2) var(--space-2) var(--space-2) 0; vertical-align: top;
               border-bottom: 1px solid var(--color-border); }
.tb-table .lbl { font-weight: 600; }
.tb-table th.num, .tb-table td.num { text-align: right; padding-right: 0; }
.tb-table .soft { color: var(--color-ink-soft); }
.tb-table .mono { font-family: var(--type-numbers-family); }
.tb-table .change-more { display: block; color: var(--color-ink-soft); }
.tb-table .worth-unit { display: block; }
.numbers-unpriced { margin: var(--space-3) 0 0; max-width: var(--layout-measure); }
.ledger { margin: var(--space-4) 0 0 auto; max-width: 30rem; border: 1px solid var(--color-ink);
          padding: var(--space-2) var(--space-3); background: var(--color-surface); }
.lrow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
        padding: var(--space-1) 0; }
.lrow .mono { font-family: var(--type-numbers-family); }
.lrow > span:last-child { white-space: nowrap; }  /* S129: DE label lengths must not wrap the value */
.lrow.total { border-top: 3px double var(--color-ink); margin-top: var(--space-1); padding-top: var(--space-2); font-weight: 600; }
.lrow.total .big { font-size: var(--type-h3-size); }
.lrow.total .small { font-weight: 400; }
.numbers-investment { margin: var(--space-4) 0 0; }
.numbers-payback { margin-top: var(--space-2); color: var(--color-ink-soft); }
/* S131 kpi layout (V-S131-02): ONE hero figure (h1-long size, same sans, proportional figures) +
   one stat tile, on the card surface inside the soft box; the ledger names itself. */
.numbers-kpis { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-3); margin-bottom: var(--space-5); }
.kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
       padding: var(--space-4); min-width: 0; overflow-wrap: break-word; }
.kpi-value { display: block; font-size: var(--type-h2-size); line-height: 1.1; font-weight: 600;
             letter-spacing: var(--type-h2-letter-spacing); font-variant-numeric: normal; }
.kpi-hero .kpi-value { font-size: var(--type-h1-long-size); line-height: 1.05; }
.kpi-label { display: block; margin-top: var(--space-1); color: var(--color-ink-soft); }
.ledger-title { margin: 0 0 var(--space-1); font-family: var(--type-small-family); font-size: var(--type-small-size);
                color: var(--color-ink-soft); }
.lbl-sub { display: block; font-weight: 400; color: var(--color-ink-soft); font-family: var(--type-small-family); font-size: var(--type-small-size); }
.lrow-note { display: block; font-weight: 400; color: var(--color-ink-soft); font-family: var(--type-small-family); font-size: var(--type-small-size); }
.invest-title { margin: 0; }
.invest-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.invest-cell { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
               padding: var(--space-3); min-width: 0; overflow-wrap: break-word; }
.invest-cell span { display: block; }
.invest-cell .cell-title { color: var(--color-ink-soft); }
.invest-cell .cell-value { font-size: var(--type-h3-size); font-weight: 600; margin-top: 2px; }
.invest-cell .cell-note { color: var(--color-ink-soft); margin-top: 2px; }
.invest-summary { margin: var(--space-2) 0 0; }
@media (max-width: 700px) { .numbers-kpis { grid-template-columns: 1fr; } .invest-cells { grid-template-columns: 1fr; } }
/* S131 R-N2 "cards" layout: the mock's geometry in tokens — equal cards, table in a card, light, one accent */
.numbers-cards .ncards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.numbers-cards .ncard { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-card);
                        padding: var(--space-4); min-width: 0; overflow-wrap: break-word; }
.numbers-cards .ncard .eyebrow { margin-bottom: var(--space-2); }
.numbers-cards .kpi-big { margin: 0; }
.numbers-cards .kpi-value { display: inline; font-size: var(--type-h1-long-size); line-height: 1.05; font-weight: 600; letter-spacing: var(--type-h2-letter-spacing); white-space: nowrap; }
.numbers-cards .invest-card .kpi-value { font-size: var(--type-h2-size); }
.numbers-cards .kpi-unit { color: var(--color-ink-soft); font-size: var(--type-h3-size); }
.numbers-cards .kpi-text { margin: var(--space-2) 0 0; color: var(--color-ink-soft); }
.numbers-cards .compare-card { margin-top: var(--space-4); padding: 0; overflow: hidden; }
.numbers-cards .compare-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3);
                               padding: var(--space-4) var(--space-4) var(--space-3); }
.numbers-cards .compare-head h3 { margin: 0; }
.numbers-cards .compare-sub { margin: 2px 0 0; color: var(--color-ink-soft); }
.numbers-cards .compare-tag { margin: 4px 0 0; white-space: nowrap; }
.cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp-table th { text-align: left; font-family: var(--type-eyebrow-family); font-size: var(--type-eyebrow-size);
                letter-spacing: var(--type-eyebrow-letter-spacing); text-transform: uppercase; font-weight: 500;
                color: var(--color-ink-soft); background: var(--color-surface-soft);
                padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.cmp-table td { padding: var(--space-3) var(--space-4); vertical-align: middle; border-bottom: 1px solid var(--color-border); }
.cmp-table tr:last-child td { border-bottom: 0; }
.cmp-table td.lbl { font-weight: 600; }
.cmp-table .lever { background: var(--color-surface-soft); }
.cmp-table td.lever { font-weight: 600; }
.cmp-table td.lever .change-more { display: block; font-weight: 400; color: var(--color-ink-soft); }
.numbers-cards .compare-card + .ncards-2 { margin-top: var(--space-4); }
.numbers-cards .ledger-card .lrow { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.numbers-cards .ledger-card .lrow.total { border-top: 3px double var(--color-ink); border-bottom: 0; margin-top: var(--space-1); padding-top: var(--space-3); }
.numbers-cards .ledger-card .lrow-pu { border-bottom: 0; padding-top: 0; color: var(--color-ink-soft); }
.numbers-cards .invest-card { background: var(--color-surface-soft); border-color: transparent; }
.numbers-cards .invest-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.numbers-cards .chip { display: inline-block; white-space: nowrap; font-family: var(--type-small-family); font-size: var(--type-small-size);
                       color: var(--color-ok); background: var(--color-ok-soft); border-radius: 999px; padding: 4px 12px; margin-top: 4px; }
.numbers-cards .invest-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-3); }
.numbers-cards .invest-cell { border-color: transparent; }
.numbers-cards .invest-running { margin: var(--space-3) 0 0; color: var(--color-ink-soft); }
.numbers-cards .invest-summary { margin: var(--space-1) 0 0; font-weight: 600; }
.numbers-cards .numbers-payback { margin-top: var(--space-4); }
@media (max-width: 700px) {
  .numbers-cards .ncards-2 { grid-template-columns: 1fr; }
  .numbers-cards .invest-cells { grid-template-columns: 1fr; }
  .numbers-cards .compare-head { flex-direction: column; }
  .numbers-cards .chip { white-space: normal; }
  .cmp-table { table-layout: auto; }
  .cmp-table thead { display: none; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td { display: block; }
  .cmp-table tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
  .cmp-table td { padding: 2px 0; border: 0; background: none; }
  .cmp-table td::before { content: attr(data-label); color: var(--color-ink-soft); margin-right: var(--space-1); font-weight: 400; }
  .cmp-table td.lbl::before { content: none; }
  .cmp-table td.lever { margin-top: var(--space-1); }
}
@media (max-width: 700px) {
  .tb-table thead { display: none; }
  .tb-table, .tb-table tbody, .tb-table tr, .tb-table td { display: block; }
  .tb-table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
  .tb-table td { border: 0; padding: 2px 0; }
  .tb-table td.num { text-align: left; }
  .tb-table td::before { content: attr(data-label); color: var(--color-ink-soft); margin-right: var(--space-1); }
  .tb-table td.lbl::before { content: none; }
  .ledger { max-width: none; }
  /* S131: on a phone every ledger row stacks label over value; nothing is kept on one line */
  .lrow { flex-direction: column; align-items: flex-start; gap: 2px; }
  .lrow > span:last-child { white-space: normal; }
}

/* HOW WE WORK (D10): two filled cards */
.how-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-4); }
.how-grid li { padding: var(--space-1) 0 var(--space-1) var(--space-3); position: relative; }
/* S129: a list needs a list signal — ✓ on the included card, – on the not-sold card (glyph in CSS, not in the text) */
.how-includes li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-ok); }
.how-not li::before { content: "\2013"; position: absolute; left: 0; color: var(--color-ink-soft); }
.credit { margin-top: var(--space-4); color: var(--color-ink-soft); }
@media (max-width: 700px) { .how-grid { grid-template-columns: 1fr; } }

/* EVIDENCE (D-evidence, replaces PROOF) */
.evidence-all { margin-top: var(--space-3); }
.evidence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.evidence-card { min-width: 0; overflow-wrap: break-word; }
.evidence-changed { font-weight: 600; }

/* PROOF (fallback only, pre-0.2.0 site.yaml) */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.proof-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3);
              min-width: 0; overflow-wrap: break-word; }
.proof-card.owed { border-style: dashed; color: var(--color-ink-soft); box-shadow: none; }
.proof-card.filled { box-shadow: var(--shadow-card); }
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } }

/* PERSON (D11) */
.person-body { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.person-photo { flex-shrink: 0; width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.person-text { flex: 1 1 320px; min-width: 0; }
.person-line { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.person-name { font-weight: 600; }
.person-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
/* S133 (R-O1 J): bio + three-column strip | rule card (quote, name, photo slot or initials) */
.person-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
.person-intro { max-width: var(--layout-measure); }
.person-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4);
                padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.strip-col span { display: block; min-width: 0; overflow-wrap: break-word; }
.strip-value { font-weight: 600; margin: 2px 0; }
.rule-card { padding: var(--space-4); }
.rule-quote { font-family: var(--type-lead-family); font-size: var(--type-lead-size); line-height: var(--type-lead-line-height); margin: 0 0 var(--space-3); }
.rule-who { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.rule-who div span { display: block; }
.rule-who .person-photo { width: 48px; height: 48px; }
.person-initials { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
                   background: var(--color-surface-soft); color: var(--color-ink); font-weight: 600; flex-shrink: 0; }
@media (max-width: 900px) { .person-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .person-strip { grid-template-columns: 1fr; } }

/* FAQ (D9/JN-09): first item open by default; "+"/"-" via ::marker, no glyph in the HTML */
.faq details { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; }
.faq summary { cursor: pointer; font-size: var(--type-body-size); font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: "+  "; }
.faq details[open] summary::marker { content: "\2013  "; }
.faq p { margin-top: var(--space-1); }
.faq-close { margin-top: var(--space-3); }

/* CTA (D12; S140 R-S140-02): full-bleed dark band — band / band-ink / band-muted / band-line; the one button is the marker */
.cta-band.block { background: var(--color-band); color: var(--color-band-ink); border-top-color: var(--color-band-line); }
.cta-band .eyebrow, .cta-band .lead, .cta-band .small, .cta-band .cta-meta, .cta-band .cta-ru, .cta-band .not-ready { color: var(--color-band-muted); }
.cta-band .button { background: var(--color-accent); color: var(--color-accent-ink); }
.cta-band .link-secondary, .cta-band a { color: var(--color-band-ink); }
.cta-band :focus-visible { outline-color: var(--color-band-ink); }
.cta-band .container { text-align: center; }
.cta-band .block-head .lead { margin-left: auto; margin-right: auto; }
.cta-meta { color: var(--color-ink-soft); margin-top: var(--space-2); }
.cta-meta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; }
.cta-ru, .not-ready { margin-top: var(--space-4); color: var(--color-ink-soft); }

/* FOOTER */
.footer { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
          justify-content: space-between; border-top: 1px solid var(--color-border);
          padding: var(--space-4) var(--space-3); color: var(--color-ink-soft); }
.footer a { text-decoration: none; display: inline-block; padding: 6px 0; }  /* S129: ≥ 24 px tap target */

/* WB-site-launch-0929: Impressum/Datenschutz — reads as a document, not a marketing block; h1
   at the h2 token (72 px reads as a headline, not a page title) and a modest measure. */
.legal-page { padding: var(--space-5) var(--space-3); max-width: 44rem; }
.legal-page h1 { font-size: var(--type-h2-size); line-height: var(--type-h2-line-height);
                 letter-spacing: var(--type-h2-letter-spacing); margin-bottom: var(--space-3); }
.legal-page section { margin-top: var(--space-4); }
.legal-page section h2 { font-size: var(--type-h3-size, 22px); margin-bottom: var(--space-1); }
.legal-page p { margin: 0 0 var(--space-1); }
.legal-note { color: var(--color-ink-soft); font-style: italic; }
.legal-address { line-height: 1.6; }

/* A+ LAYOUT (S139, PLAN-SITE-APLUS): GEOMETRY from the mock, SKIN = tokens. New selectors are .ap-* */
.ap-protocol-card { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-card);
                    padding: var(--space-3); max-width: 26rem; margin-left: auto; position: relative; }
.ap-protocol-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.ap-protocol-head .eyebrow { margin-bottom: var(--space-2); }
.ap-chip { display: inline-block; white-space: nowrap; font-family: var(--type-small-family); font-size: var(--type-small-size);
           color: var(--color-ink-soft); border: 1px dashed var(--color-border); border-radius: var(--radius-pill); padding: 2px 10px; }
.ap-protocol li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem; gap: var(--space-1); align-items: baseline;
                  padding: var(--space-1) 0; border-top: 1px solid var(--color-border);
                  font-family: var(--type-small-family); font-size: var(--type-small-size); line-height: var(--type-small-line-height); }
.ap-pn { font-family: var(--type-numbers-family); font-variant-numeric: tabular-nums; color: var(--color-ink-soft); }
.ap-pt { min-width: 0; overflow-wrap: break-word; }
.ap-ps { text-align: center; color: var(--color-ink-soft); }
.ap-ok .ap-ps, .ap-ps-ok { color: var(--color-ok); font-weight: 600; }
.ap-person .ap-ps, .ap-ps-person { color: var(--color-warn); font-weight: 600; }
.ap-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; }
.ap-loop { margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-2); background: var(--color-surface-soft);
           border-radius: var(--radius-card);
           font-size: var(--type-card-size); line-height: var(--type-card-line-height); }
.ap-note { margin: var(--space-1) 0 0; }
@media (max-width: 900px) { .ap-protocol-card { margin-left: 0; max-width: none; } }
.ap-tiles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ap-tiles3 .tile { min-width: 0; }
.ap-principle h3 { margin: 0 0 var(--space-1); font-size: var(--type-body-size); }
.ap-principle .eyebrow { margin-bottom: var(--space-1); }
.ap-principle p:last-child { margin: 0; font-size: var(--type-card-size); line-height: var(--type-card-line-height); }
.ap-ptile span { display: block; min-width: 0; overflow-wrap: break-word; }
.ap-fits { margin: var(--space-3) 0 0; color: var(--color-ink-soft); max-width: var(--layout-measure); }
.ap-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: stretch; margin-top: var(--space-4); }
.ap-step { display: flex; flex-direction: column; min-width: 0; padding: var(--space-4); font-size: var(--type-card-size); line-height: var(--type-card-line-height); }
/* R4: one subgrid row per part (top · title · duration · text · extras/rule · decision) so the three cards align */
@media (min-width: 901px) {
  .ap-steps { row-gap: 0; }
  .ap-step { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
}
.ap-step h3 { margin: var(--space-2) 0 0; overflow-wrap: break-word; hyphens: manual; }
.ap-step-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.ap-step-n { font-family: var(--type-numbers-family); font-size: var(--type-h2-size); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.ap-step-price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; }
.ap-step-price strong { font-size: var(--type-h3-size); font-variant-numeric: tabular-nums; }
.ap-price-note { display: block; }
.ap-dur { margin: var(--space-1) 0 var(--space-2); }
.ap-text { margin: 0 0 var(--space-2); }
.ap-extra { margin: 0 0 var(--space-1); }
.ap-decide { margin: auto 0 0; padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.ap-rule { margin: var(--space-2) 0 var(--space-2); padding: var(--space-2); background: var(--color-surface-soft);
           border-radius: var(--radius-card); }
.ap-rule p { margin: 0; }
.ap-rule-label { margin-bottom: 4px !important; }
.ap-rule strong { font-weight: 700; box-shadow: inset 0 -0.42em 0 var(--color-accent-soft); }
.ap-note-line { margin: var(--space-1) 0 0; }
.ap-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0 0; }
.ap-links-center { justify-content: center; }
.ap-not li { padding: var(--space-1) 0 var(--space-1) var(--space-3); position: relative; }
.ap-not li::before { content: "\2715"; position: absolute; left: 0; color: var(--color-ink-soft); }
.ap-conf { margin-top: var(--space-4); max-width: var(--layout-measure); }
.ap-conf h3 { margin-bottom: var(--space-1); }
.ap-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.ap-case { display: flex; flex-direction: column; font-size: var(--type-card-size); line-height: var(--type-card-line-height); }
.ap-case .eyebrow { margin-bottom: var(--space-1); }
.ap-stat { margin: 0; font-family: var(--type-numbers-family); font-size: var(--type-h2-size); line-height: 1.1; font-weight: 600;
           font-variant-numeric: tabular-nums; color: var(--color-ink); overflow-wrap: anywhere; }
.ap-case-label { margin: var(--space-2) 0 var(--space-1); }
.ap-case .ap-chip { align-self: flex-start; margin-top: auto; }
.ap-case .evidence-changed { margin-bottom: var(--space-2); }
/* S140 (R-S140-01): system view — protocol card, geometry from option-4-protocol.html, colours from tokens */
.ap-proto { background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-card);
            padding: var(--space-3); min-width: 0; }
.ap-proto-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
                 padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.ap-proto-label { font-family: var(--type-eyebrow-family); font-size: var(--type-small-size); font-weight: 500;
                  letter-spacing: var(--type-eyebrow-letter-spacing); text-transform: uppercase; }
.ap-prow { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-1) var(--space-3);
           align-items: start; padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border); }
.ap-prow h3 { margin: 0; font-size: var(--type-body-size); line-height: 1.3; letter-spacing: 0; }
.ap-pcol { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; min-width: 0; }
.ap-pcol p { margin: 0; font-size: var(--type-small-size); line-height: var(--type-small-line-height); }
.ap-pcol.today p { color: var(--color-ink-soft); }
.ap-pcol .eyebrow { margin: 0; font-size: var(--type-eyebrow-size); }
.ap-pcol.after .eyebrow { color: var(--color-ink); }
.ap-tag { display: inline-block; font-family: var(--type-eyebrow-family); font-size: var(--type-eyebrow-size); padding: 2px 8px; border-radius: var(--radius-pill); }
.ap-tag.ok { color: var(--color-ok); background: var(--color-ok-soft); }
.ap-tag.hand { color: var(--color-warn); background: var(--color-warn-soft); }
.ap-pstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-2) 0 var(--space-1); }
.ap-pstat { min-width: 0; font-size: var(--type-small-size); line-height: 1.35; color: var(--color-ink-soft); }
.ap-pstat b { display: block; font-size: var(--type-h3-size); line-height: 1.1; font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
.ap-pnote { margin: var(--space-3) 0 0; max-width: var(--layout-measure); color: var(--color-ink-soft); }
.ap-pnote b { color: var(--color-ink); font-weight: 600; }
@media (max-width: 760px) { .ap-prow { grid-template-columns: minmax(0, 1fr); } .ap-pstats { grid-template-columns: minmax(0, 1fr); } }
.subpage { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.subpage h1 { font-size: var(--type-h2-size); line-height: var(--type-h2-line-height); letter-spacing: var(--type-h2-letter-spacing); }
.subpage .block { padding-top: var(--space-4); }
@media (max-width: 900px) { .ap-steps, .ap-cases { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .ap-tiles3 { grid-template-columns: 1fr; } }

/* S124 (D1): h1 mobile floor — 72 -> 44px, override the var, not a second token */
@media (max-width: 700px) {
  :root { --type-h1-size: 44px; --type-h1-long-size: 38px; }
  /* S126 (DESIGN-DIFF-TECHTIDE T10): mobile block rhythm 80 -> 48px */
  .block { padding-block: var(--space-6); }
}

@media print { .hero::before { display: none; } }