/* ==========================================================================
   TechRS — core.css · design system v4 "Signal"
   --------------------------------------------------------------------------
   Light editorial base (paper · ink · sand) with the TechRS teal circuit
   accent. Tokens, base, typography, surfaces, buttons, chips/badges, forms,
   announcement bar, header/nav, footer, pagination, prose, a11y toolbar,
   print. Bidirectional: logical properties only, so one stylesheet serves
   English (LTR, /) and Hebrew (RTL, /he/). Light is the default theme
   (<html data-theme="light">); dark via html[data-theme="dark"]. Every
   text/surface pair below is AA-checked.

   PUBLIC CONTRACT — other stylesheets and templates rely on these names.
   Scopes (token remaps; components inside adapt automatically)
     paper  :root, .on-paper                     page surfaces (default)
     ink    .on-ink, .panel-ink, .section--ink,  dark ink surfaces; also set
            .site-footer, .window--ink           color: var(--on-ink)
     .on-paper inside an ink scope restores the page tokens (e.g. a paper
     cut-out card sitting on an ink section).
   Tokens
     raw palette   --paper --stone --sand --sand-strong --sand-ink
                   --ink-panel --ink-panel-2 --on-ink --on-ink-2
                   --on-ink-muted --on-ink-accent --on-ink-line
                   --sev-{critical,high,medium,low,info} (fills)
     semantic      --bg-page --bg-section --bg-card --bg-elevated --bg-inset
     (use these;   --bg-card-hover --ink --text-primary --text-secondary
      re-resolved  --text-muted --border-subtle --border-strong --accent
      per scope)   --accent-text --accent-text-strong --focus-ring
                   --danger-text --warn-text --ok-text --sev-*-text
                   --field-tick --field-accent --field-accent-2 --logo-accent
                   --btn-* (button colors), --badge-tint
     type          --font-body --font-display --font-mono --step--2…--step-5
                   --step-hero --weight-display --tracking-hero
                   --tracking-display --tracking-tight --tracking-eyebrow
                   --leading-hero --leading-tight --ui-size --ui-size-lg
                   --ui-tracking --ui-case (nav/button micro type)
     layout        --container-max (content width) --container-pad
                   --navbar-height --space-section --gap-grid
     motion        --ease-out --ease-in-out --dur-fast --dur-reveal
     shape         --radius-sm…--radius-2xl --radius-full --shadow-float
   Components
     .container .visually-hidden .icon .icon-fwd .icon-back .eyebrow .idx
     .section(--alt --ink --tight) .section-header(--center) .section-heading
     .section-lead .card .stretched-link .panel-ink .cutout
     .window(.window-bar .window-title .window-body .window--ink)
     .btn .btn-primary .btn-sand .btn-sm .btn-lg .btn-block .btn--no-caret
     .btn-danger .text-link .chip .chip-mono .badge .badge-{critical,high,
     medium,low,none,info,kev,ransom} .checklist(--lg) .prose .pagination
     .display-hero .display-2 (opt-in display type helpers)
   Notes for page CSS
     • --ink is the foreground ink of the current scope (light text in dark
       theme / on ink); --ink-panel is the dark panel color in both themes.
       --paper is the page surface (dark in dark theme): for text on ink use
       --on-ink, never --paper.
     • Content inside a [data-field] host needs position:relative;z-index:1
       (.cutout already has it).
     • The primary/sand button caret is the affordance: don't add arrow
       icons inside .btn-primary/.btn-sand (use .btn--no-caret to drop it).
     • Hebrew (:root:lang(he)) swaps the type tokens (no uppercase, Heebo,
       no negative tracking below -0.01em); components need no HE rules.
     • Never set --text-muted on --sand (4.2:1); use --sand-ink.
     • Dark theme: .btn-sand is tonal (sand text on a sand tint) beside the
       light solid .btn-primary; --sand itself stays light for fills.
     • <main> clips horizontal overflow (overflow-x: clip): a too-wide block
       gets cut, not scrolled — fix the block, don't fight the clip.
     • Touch screens (pointer: coarse): .btn and .btn-sm are 44px tall, as
       are the theme toggle, a11y launcher and pagination links (the drawer
       layout's menu/close toggles are 44px at any pointer). Under 480px a
       button label too long for its container wraps inside the button
       (keep the label in ONE child, e.g. <span>text <bdi>@handle</bdi>
       </span>, or each flex child wraps on its own).
     • In a .window-bar only .window-title shrinks (ellipsis); any other
       child stays on one line.
     • Dark and high-contrast palettes are screen-only; print is ink on paper.
     • Form controls (text fields, selects, checkboxes, switches) draw their
       edge in --control-line (≥3:1 on page, card and ink, WCAG 1.4.11);
       --border-strong is for decorative hairlines only.
   ========================================================================== */

/* ─────────────────────────────────────────────
   1. Fonts (self-hosted variable fonts)
   ───────────────────────────────────────────── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/inter-var-latin.4b73e2ff3024.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/heebo-var-hebrew.de80852899c5.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/heebo-var-latin.480b1d24f2aa.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-var-latin.b636a65da4f0.woff2") format("woff2");
}

/* ─────────────────────────────────────────────
   2. Design tokens
   2a. Raw palette — light theme (default)
   ───────────────────────────────────────────── */
:root {
  /* Paper (page) palette */
  --paper: #ffffff;
  --stone: #f6f4f0;
  --paper-card: #ffffff;
  --paper-inset: #f1eee9;
  --paper-hover: #f1eee9;
  --paper-fg: #121417;            /* 18.4:1 on paper */
  --paper-fg-2: #474c53;          /*  8.6:1 */
  --paper-fg-3: #666c73;          /*  5.3:1 paper · 4.8 stone · 4.6 inset */
  --paper-line: #e6e1da;
  --paper-line-2: #cdc6bc;
  --paper-control: #8f877c;       /* checkbox/switch edges, 3.5:1 */
  --paper-accent: #1ba0af;        /* brand teal: fills, ticks, rings */
  --paper-accent-text: #0d7380;   /* teal as text/links/focus, 5.5:1 */
  --paper-accent-strong: #0a5c66;
  --paper-danger: #b42318;
  --paper-warn: #8a6100;
  --paper-ok: #0f7a4a;
  --paper-sev-critical: #b42318;
  --paper-sev-high: #b54708;
  --paper-sev-medium: #8a6100;
  --paper-sev-low: #0d7380;
  --paper-solid: #141618;         /* primary button / solid fills */
  --paper-solid-fg: #ffffff;
  --paper-solid-hover: #2b2f33;
  --paper-field-tick: #dcd2c5;
  --paper-field-accent: #1ba0af;
  --paper-field-accent-2: #0d7380;
  --paper-tint: 12%;              /* badge tint strength */

  /* Sand — secondary button, announcement bar, highlight fills */
  --sand: #ece4d9;
  --sand-strong: #e2d6c6;
  --sand-ink: #26211c;            /* 12.6:1 on sand */

  /* Ink panels (footer, accent panels) */
  --ink-panel: #141618;
  --ink-panel-2: #1c1f22;
  --ink-panel-3: #25292d;
  --ink-inset: #0d0f10;
  --ink-edge: #141618;            /* panel border: invisible in light */
  --on-ink: #f2efe9;              /* 15.8:1 on ink */
  --on-ink-2: #c9c4bb;            /* 10.4:1 */
  --on-ink-muted: #a29d95;        /*  6.7:1 */
  --on-ink-accent: #3cc6d4;       /*  8.8:1 */
  --on-ink-accent-strong: #84dde6;
  --on-ink-line: #2c3034;
  --on-ink-line-2: #42474d;
  --on-ink-control: #7d7870;
  --on-ink-danger: #f97066;
  --on-ink-warn: #e9b949;
  --on-ink-ok: #47c08a;
  --on-ink-sev-high: #fb8f50;
  --on-ink-field-tick: #2a2e33;
  --on-ink-field-accent: #2fb9c8;
  --on-ink-field-accent-2: #7fdbe4;

  /* Severity fills (theme-independent; text uses --sev-*-text) */
  --sev-critical: #e5484d;
  --sev-high: #f76b15;
  --sev-medium: #f5b400;
  --sev-low: #1ba0af;
  --sev-info: #8b8d98;

  /* Chrome */
  --announce-bg: #ece4d9;
  --announce-fg: #26211c;
  --announce-line: rgba(38, 33, 28, 0.32);
  --header-bg: rgba(255, 255, 255, 0.94);
  --code-bg: #141618;             /* code blocks stay dark in both themes */

  /* Typography */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-micro: var(--font-mono);  /* mono micro labels (Hebrew: body face) */
  --weight-display: 560;
  --tracking-hero: -0.045em;
  --tracking-display: -0.035em;
  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.14em;
  --leading-hero: 0.98;
  --leading-tight: 1.04;
  --leading-snug: 1.25;
  --leading-body: 1.65;
  --eyebrow-size: 0.72rem;
  --eyebrow-case: uppercase;
  --ui-size: 0.74rem;             /* nav links + buttons */
  --ui-size-lg: 0.8rem;
  --ui-tracking: 0.06em;
  --ui-case: uppercase;

  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.875rem, 0.84rem + 0.1vw, 0.92rem); /* ≥14px: phone body copy */
  --step-0: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.4rem + 3.2vw, 4.25rem);
  --step-5: clamp(2.5rem, 1.3rem + 4.2vw, 5rem);
  --step-hero: clamp(3rem, 1.1rem + 6.6vw, 6.75rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-section: clamp(80px, 11vw, 150px);
  --gap-grid: clamp(16px, 0.6rem + 1.6vw, 28px);
  --container-text: 70ch;

  /* Shape — crisp, almost square corners */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-full: 999px;

  /* Shadows — hairlines instead of shadows; only floating windows float */
  --shadow-float: 0 40px 80px -30px rgba(18, 20, 23, 0.35);
  --shadow-md: 0 14px 34px -18px rgba(18, 20, 23, 0.32);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.3s;
  --dur-reveal: 0.8s;
  --transition: var(--dur-base) var(--ease-out);
  --transition-fast: var(--dur-fast) var(--ease-standard);

  /* Layout */
  --container-max: 1200px;        /* content width (padding excluded) */
  --container-pad: clamp(20px, 4vw, 40px);
  --navbar-height: 68px;
  --announce-height: 36px;

  color-scheme: light;
}

/* 2b. Hebrew typography — Heebo, no forced case, near-zero tracking */
:root:lang(he) {
  --font-body: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  --font-display: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  --font-micro: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  --weight-display: 600;
  --tracking-hero: -0.01em;
  --tracking-display: -0.01em;
  --tracking-tight: 0em;
  --tracking-eyebrow: 0.02em;
  --leading-hero: 1.08;
  --leading-tight: 1.12;
  --eyebrow-size: 0.85rem;
  --eyebrow-case: none;
  --ui-size: 0.92rem;
  --ui-size-lg: 1rem;
  --ui-tracking: 0em;
  --ui-case: none;
  --step-hero: clamp(2.5rem, 1.2rem + 5vw, 5.4rem);
  --step-5: clamp(2.3rem, 1.25rem + 3.5vw, 4.4rem);
}

/* 2c. Dark theme — raw palette only; the scopes below re-resolve. Screen
   only: print always uses the light palette (backgrounds don't print). */
@media not print {
  html[data-theme="dark"] {
    --paper: #0e1012;
    --stone: #131619;
    --paper-card: #16191c;
    --paper-inset: #0b0d0e;
    --paper-hover: #1b1f23;
    --paper-fg: #ecebe6;
    --paper-fg-2: #b9b6ae;
    --paper-fg-3: #8f8b84;          /* 5.6:1 page · 5.2 card */
    --paper-line: #262a2f;
    --paper-line-2: #353a40;
    --paper-control: #6e737a;
    --paper-accent: #2fb9c8;
    --paper-accent-text: #45c9d6;
    --paper-accent-strong: #7fdbe4;
    --paper-danger: #f97066;
    --paper-warn: #e9b949;
    --paper-ok: #47c08a;
    --paper-sev-critical: #f97066;
    --paper-sev-high: #fb8f50;
    --paper-sev-medium: #e9b949;
    --paper-sev-low: #45c9d6;
    --paper-solid: #ecebe6;
    --paper-solid-fg: #0e1012;
    --paper-solid-hover: #ffffff;
    --paper-field-tick: #2a2f34;
    --paper-field-accent: #2fb9c8;
    --paper-field-accent-2: #7fdbe4;
    --paper-tint: 16%;

    --sand: #e9e0d3;
    --sand-strong: #dcd0bf;
    --sand-ink: #26211c;

    --ink-panel: #08090a;
    --ink-panel-2: #121417;
    --ink-panel-3: #1a1d20;
    --ink-inset: #050606;
    --ink-edge: #2c3034;

    --announce-bg: #1b1a17;
    --announce-fg: #e6dfd3;
    --announce-line: rgba(230, 223, 211, 0.3);
    --header-bg: rgba(14, 16, 18, 0.9);
    --code-bg: #08090a;

    --shadow-float: 0 40px 80px -30px rgba(0, 0, 0, 0.75);
    --shadow-md: 0 14px 34px -16px rgba(0, 0, 0, 0.7);

    color-scheme: dark;
  }
}

/* 2d. Semantic tokens — PAPER scope (page default; .on-paper restores it) */
:root,
.on-paper {
  --bg-page: var(--paper);
  --bg-section: var(--stone);
  --bg-card: var(--paper-card);
  --bg-elevated: var(--paper-card);
  --bg-inset: var(--paper-inset);
  --bg-card-hover: var(--paper-hover);
  --ink: var(--paper-fg);
  --text-primary: var(--paper-fg);
  --text-secondary: var(--paper-fg-2);
  --text-muted: var(--paper-fg-3);
  --border-subtle: var(--paper-line);
  --border-strong: var(--paper-line-2);
  --control-line: var(--paper-control);
  --accent: var(--paper-accent);
  --accent-text: var(--paper-accent-text);
  --accent-text-strong: var(--paper-accent-strong);
  --focus-ring: var(--paper-accent-text);
  --danger-text: var(--paper-danger);
  --warn-text: var(--paper-warn);
  --ok-text: var(--paper-ok);
  --sev-critical-text: var(--paper-sev-critical);
  --sev-high-text: var(--paper-sev-high);
  --sev-medium-text: var(--paper-sev-medium);
  --sev-low-text: var(--paper-sev-low);
  --badge-tint: var(--paper-tint);
  --kev-bg: var(--paper-solid);
  --kev-fg: var(--paper-solid-fg);
  --kev-text: var(--paper-fg);
  --btn-line: color-mix(in srgb, var(--paper-fg) 85%, transparent);
  --btn-fg: var(--paper-fg);
  --btn-hover-bg: var(--paper-fg);
  --btn-hover-fg: var(--paper);
  --btn-solid-bg: var(--paper-solid);
  --btn-solid-fg: var(--paper-solid-fg);
  --btn-solid-hover: var(--paper-solid-hover);
  --field-tick: var(--paper-field-tick);
  --field-accent: var(--paper-field-accent);
  --field-accent-2: var(--paper-field-accent-2);
  --logo-accent: var(--paper-accent);
  --window-dot: var(--paper-line-2);
  --chip-cyan-text: var(--paper-accent-strong);
  --chip-cyan-bg: color-mix(in srgb, var(--paper-accent) 9%, transparent);
  --chip-cyan-border: color-mix(in srgb, var(--paper-accent-text) 32%, transparent);
  --chip-purple-text: var(--sand-ink);
  --chip-purple-bg: var(--sand);
  --chip-purple-border: var(--sand-strong);
}
.on-paper {
  color: var(--text-primary);
}

/* 2e. Semantic tokens — INK scope (dark accent panels, footer, console) */
.on-ink,
.panel-ink,
.section--ink,
.site-footer,
.window--ink {
  --bg-page: var(--ink-panel);
  --bg-section: var(--ink-panel);
  --bg-card: var(--ink-panel-2);
  --bg-elevated: var(--ink-panel-2);
  --bg-inset: var(--ink-inset);
  --bg-card-hover: var(--ink-panel-3);
  --ink: var(--on-ink);
  --text-primary: var(--on-ink);
  --text-secondary: var(--on-ink-2);
  --text-muted: var(--on-ink-muted);
  --border-subtle: var(--on-ink-line);
  --border-strong: var(--on-ink-line-2);
  --control-line: var(--on-ink-control);
  --accent: var(--on-ink-accent);
  --accent-text: var(--on-ink-accent);
  --accent-text-strong: var(--on-ink-accent-strong);
  --focus-ring: var(--on-ink-accent);
  --danger-text: var(--on-ink-danger);
  --warn-text: var(--on-ink-warn);
  --ok-text: var(--on-ink-ok);
  --sev-critical-text: var(--on-ink-danger);
  --sev-high-text: var(--on-ink-sev-high);
  --sev-medium-text: var(--on-ink-warn);
  --sev-low-text: var(--on-ink-accent);
  --badge-tint: 16%;
  --kev-bg: var(--on-ink);
  --kev-fg: var(--ink-panel);
  --kev-text: var(--on-ink);
  --btn-line: color-mix(in srgb, var(--on-ink) 70%, transparent);
  --btn-fg: var(--on-ink);
  --btn-hover-bg: var(--on-ink);
  --btn-hover-fg: var(--ink-panel);
  --btn-solid-bg: #ffffff;
  --btn-solid-fg: var(--ink-panel);
  --btn-solid-hover: var(--on-ink);
  --field-tick: var(--on-ink-field-tick);
  --field-accent: var(--on-ink-field-accent);
  --field-accent-2: var(--on-ink-field-accent-2);
  --logo-accent: var(--on-ink-accent);
  --window-dot: var(--on-ink-line-2);
  --chip-cyan-text: var(--on-ink-accent-strong);
  --chip-cyan-bg: color-mix(in srgb, var(--on-ink-accent) 12%, transparent);
  --chip-cyan-border: color-mix(in srgb, var(--on-ink-accent) 36%, transparent);
  color: var(--on-ink);
}

/* ─────────────────────────────────────────────
   3. Reset & base
   ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--navbar-height) + 1rem);
  background: var(--bg-page);
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--bg-page);
  text-align: start;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

/* `clip` (not hidden) creates no scroll container, so sticky children still
   stick; it stops a stray wide element from inflating the mobile layout
   viewport (which would also stretch the fixed drawer and toolbar). */
main {
  flex: 1;
  overflow-x: clip;
}
main:focus {
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  overflow-wrap: break-word;
  text-wrap: balance;
}
h1,
h2 {
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

p {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

img,
svg,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

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

hr {
  border: 0;
  border-block-start: 1px solid var(--border-subtle);
}

table {
  border-collapse: collapse;
}

::selection {
  background: color-mix(in srgb, var(--paper-accent) 24%, transparent);
  color: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Transitions drop to 0s, not 0.01ms: a 0.01ms `visibility` transition
   still starts at its old value, so a panel that had just been shown (the
   nav drawer) was "hidden" at the instant JS moved focus into it, and
   focus stayed on the button behind it. Nothing listens for
   transitionend. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  html {
    scroll-behavior: auto;
  }
  ::details-content {
    transition-duration: 0s !important;
  }
}

/* ─────────────────────────────────────────────
   4. Layout, utilities & icons
   ───────────────────────────────────────────── */
.container {
  inline-size: 100%;
  max-inline-size: calc(var(--container-max) + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 10000;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  background: var(--btn-solid-bg);
  color: var(--btn-solid-fg);
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--ui-tracking);
  text-transform: var(--ui-case);
  white-space: nowrap;
  translate: 0 calc(-100% - 20px);
}
.skip-link:focus,
.skip-link:focus-visible {
  z-index: 2147483647; /* above the homepage intro overlay while it docks */
  translate: 0 0;
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Legacy hairline "glass" surface (vulns widget) — now a flat card */
.glass {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

/* Inline SVG icons */
.icon {
  display: inline-block;
  inline-size: 1.15em;
  block-size: 1.15em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
/* The arrow glyph points "back" (left) in source: .icon-fwd turns it to the
   reading direction, .icon-back keeps it pointing backwards in RTL too. */
.icon-fwd {
  transform: scaleX(-1);
}
[dir="rtl"] .icon-fwd {
  transform: none;
}
[dir="rtl"] .icon-back {
  transform: scaleX(-1);
}

/* Stretched link: makes a whole card the hit area; the focus ring follows */
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.stretched-link:focus-visible {
  outline: none;
}
.stretched-link:focus-visible::after {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────
   5. Typography helpers
   ───────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: var(--eyebrow-case);
  color: var(--text-muted);
}

/* Mono index — "01/" — never mirrored */
.idx {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  direction: ltr;
  unicode-bidi: isolate;
}

/* Opt-in display sizes (hero H1, section H2) */
.display-hero {
  font-family: var(--font-display);
  font-size: var(--step-hero);
  font-weight: var(--weight-display);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
}
.display-2 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

/* Section scaffold */
.section {
  position: relative;
  padding-block: var(--space-section);
}
.section--alt {
  background: var(--bg-section);
}
.section--ink {
  background: var(--ink-panel);
}
html[data-theme="dark"] .section--ink {
  border-block: 1px solid var(--ink-edge);
}
.section--tight {
  padding-block: clamp(48px, 6vw, 88px);
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-inline-size: 780px;
  margin-block-end: clamp(40px, 5vw, 72px);
}
.section-header--center {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}
.section-heading {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.section-lead {
  max-inline-size: 56ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Compact section head for list pages & widgets */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-block-end: var(--space-6);
}
.section-title {
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}
.section-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--accent-text);
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
}
.section-more:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Check list (service highlights, deliverables) */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: 1.5;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.checklist .icon {
  inline-size: 1.05em;
  block-size: 1.05em;
  margin-block-start: 0.2em;
  color: var(--accent-text);
}
.checklist--lg {
  font-size: var(--step-0);
  gap: 14px;
}

/* ─────────────────────────────────────────────
   6. Surfaces — card, ink panel, cut-out, window
   ───────────────────────────────────────────── */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
/* Media cards manage their own inner padding */
.card:has(> .card-body),
.card:has(> .card-media) {
  padding: 0;
  overflow: hidden;
}
a.card:hover,
.card:has(.stretched-link:hover),
.card:has(.card-title a:hover) {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
}
.card:focus-within {
  border-color: var(--border-strong);
}

.card-media {
  display: block;
  overflow: hidden;
  border-block-end: 1px solid var(--border-subtle);
}
.card-media img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: scale 0.6s var(--ease-out);
}
.card:hover .card-media img {
  scale: 1.02;
}
.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(18px, 2vw, 24px);
  flex: 1;
}
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.card-title {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.card-title a {
  color: var(--text-primary);
  transition: color var(--transition-fast);
}
.card-title a:hover {
  color: var(--accent-text);
}
.card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card-summary {
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: 1.6;
}
.article-card .card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-footer-meta {
  margin-block-start: auto;
  padding-block-start: var(--space-2);
  color: var(--text-muted);
  font-size: var(--step--1);
}

/* Dark ink block (FAQ heading block, bounty band, contact aside) */
.panel-ink {
  position: relative;
  padding: clamp(24px, 3.2vw, 44px);
  background: var(--ink-panel);
  border: 1px solid var(--ink-edge);
  border-radius: var(--radius-lg);
}

/* Cut-out: a block of the surface color sitting on a tick field */
.cutout {
  position: relative;
  z-index: 1;
  background: var(--bg-page);
  padding: clamp(12px, 1.6vw, 24px);
}

/* Floating mock window (console, finding document, menus) */
.window {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
html[data-theme="dark"] .window {
  border-color: var(--border-strong);
}
.window-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 38px;
  padding-inline: 14px;
  border-block-end: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}
.window-bar::before {
  content: "";
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  margin-inline-end: 26px;
  border-radius: 50%;
  background: var(--window-dot);
  box-shadow: 12px 0 0 var(--window-dot), 24px 0 0 var(--window-dot);
}
[dir="rtl"] .window-bar::before {
  box-shadow: -12px 0 0 var(--window-dot), -24px 0 0 var(--window-dot);
}
.window-title {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Only the title gives way in a narrow bar: a page/id label beside it
   ("TRS-07") must not wrap onto two lines */
.window-bar > :not(.window-title) {
  flex: none;
  white-space: nowrap;
}
.window-body {
  padding: clamp(16px, 2vw, 24px);
}
.window--ink {
  background: var(--ink-panel);
  border-color: var(--on-ink-line);
}

/* ─────────────────────────────────────────────
   7. Buttons
   .btn = outline · .btn-primary = solid ink · .btn-sand = sand
   The primary/sand caret blinks on hover/focus (static with reduced motion)
   ───────────────────────────────────────────── */
.btn {
  --btn-h: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: var(--btn-h);
  padding-block: 0.5em;
  padding-inline: 16px;
  border: 1px solid var(--btn-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--ui-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ui-tracking);
  text-transform: var(--ui-case);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}
.btn:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
}
.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn .icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  transition: translate var(--dur-fast) var(--ease-out);
}
.btn:hover .icon-fwd {
  translate: 3px 0;
}
[dir="rtl"] .btn:hover .icon-fwd {
  translate: -3px 0;
}

.btn-primary {
  background: var(--btn-solid-bg);
  border-color: var(--btn-solid-bg);
  color: var(--btn-solid-fg);
}
.btn-primary:hover {
  background: var(--btn-solid-hover);
  border-color: var(--btn-solid-hover);
  color: var(--btn-solid-fg);
}
.btn-sand {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--sand-ink);
}
.btn-sand:hover {
  background: var(--sand-strong);
  border-color: var(--sand-strong);
  color: var(--sand-ink);
}
/* Dark theme: the solid primary is already a light slab, so a solid sand
   button beside it read as a second primary. Sand steps down to a tonal
   button (sand text, sand-tinted fill and edge) and the pair keeps its
   primary/secondary order. Screen only; high contrast keeps its solids. */
@media not print {
  html[data-theme="dark"]:not(.a11y-high-contrast) .btn-sand {
    background: color-mix(in srgb, var(--sand) 14%, transparent);
    border-color: color-mix(in srgb, var(--sand) 52%, transparent);
    color: var(--sand);
  }
  html[data-theme="dark"]:not(.a11y-high-contrast) .btn-sand:hover {
    background: color-mix(in srgb, var(--sand) 24%, transparent);
    border-color: color-mix(in srgb, var(--sand) 72%, transparent);
    color: #ffffff;
  }
}
/* Terminal caret — the TechRS signature */
.btn-primary::after,
.btn-sand::after {
  content: "";
  flex: none;
  inline-size: 1.5px;
  block-size: 0.95em;
  margin-inline-start: 2px;
  background: currentColor;
  opacity: 0.55;
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after,
.btn-sand:hover::after,
.btn-sand:focus-visible::after {
  animation: caret-blink 1s steps(1, end) infinite;
}
.btn--no-caret::after {
  content: none;
}
@keyframes caret-blink {
  0%, 49% { opacity: 0.55; }
  50%, 100% { opacity: 0; }
}

.btn-sm {
  --btn-h: 34px;
  padding-inline: 12px;
}
.btn-lg {
  --btn-h: 48px;
  padding-inline: 22px;
  font-size: var(--ui-size-lg);
}
.btn-block {
  inline-size: 100%;
}
/* Phones: side padding steps down, and a label that is still wider than
   its container wraps inside the button instead of being cut off by it
   (inline-flex buttons shrink to fit, so only a label that cannot fit on
   its line wraps; every other button is unchanged) */
@media (max-width: 479.98px) {
  .btn {
    max-inline-size: 100%;
    white-space: normal;
  }
  .btn-lg {
    padding-inline: 18px;
  }
}
/* Touch screens: buttons reach the 44px target size; fine pointers keep
   the 40 / 34px desktop sizes */
@media (pointer: coarse) {
  .btn,
  .btn-sm {
    --btn-h: 44px;
  }
  .btn-lg {
    --btn-h: 48px;
  }
}
.btn-danger {
  background: var(--danger-text);
  border-color: var(--danger-text);
  color: var(--paper-solid-fg);
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--danger-text) 84%, #000);
  border-color: color-mix(in srgb, var(--danger-text) 84%, #000);
  color: var(--paper-solid-fg);
}
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-danger:hover {
  color: var(--paper);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.text-link:hover {
  color: var(--accent-text-strong);
  text-decoration-color: currentColor;
}
.text-link .icon {
  inline-size: 1em;
  block-size: 1em;
  transition: translate var(--dur-fast) var(--ease-out);
}
.text-link:hover .icon-fwd {
  translate: 3px 0;
}
[dir="rtl"] .text-link:hover .icon-fwd {
  translate: -3px 0;
}

/* ─────────────────────────────────────────────
   8. Chips & badges
   ───────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}
a.chip {
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
a.chip:hover {
  border-color: var(--ink);
}
.chip-mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.chip-category {
  background: var(--chip-cyan-bg);
  border-color: var(--chip-cyan-border);
  color: var(--chip-cyan-text);
}
.chip-level {
  background: var(--chip-purple-bg);
  border-color: var(--chip-purple-border);
  color: var(--chip-purple-text);
}

.badge {
  --badge-c: var(--sev-info);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 2px 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.badge-critical,
.badge-high,
.badge-medium,
.badge-low {
  background: color-mix(in srgb, var(--badge-c) var(--badge-tint), var(--bg-card));
  border-color: color-mix(in srgb, var(--badge-c) 42%, var(--bg-card));
}
.badge-critical {
  --badge-c: var(--sev-critical);
  color: var(--sev-critical-text);
}
.badge-high {
  --badge-c: var(--sev-high);
  color: var(--sev-high-text);
}
.badge-medium {
  --badge-c: var(--sev-medium);
  color: var(--sev-medium-text);
}
.badge-low {
  --badge-c: var(--sev-low);
  color: var(--sev-low-text);
}
.badge-none,
.badge-info {
  background: var(--bg-inset);
  border-color: var(--border-strong);
  color: var(--text-muted);
}
/* Known-exploited: the strongest signal gets a solid ink badge */
.badge-kev {
  background: var(--kev-bg);
  border-color: var(--kev-bg);
  color: var(--kev-fg);
}
.badge-ransom {
  background: transparent;
  border-color: var(--danger-text);
  color: var(--danger-text);
}

/* ─────────────────────────────────────────────
   9. Forms
   ───────────────────────────────────────────── */
input[type="search"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input:not([type]),
textarea,
select {
  inline-size: 100%;
  min-block-size: 46px;
  padding: 10px 14px;
  border: 1px solid var(--control-line); /* the field edge identifies it: ≥3:1 */
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--step-0);
  line-height: 1.4;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
textarea {
  resize: vertical;
  min-block-size: 8rem;
  padding-block: 12px;
  line-height: 1.6;
}
select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  background-position: calc(100% - 21px) 52%, calc(100% - 16px) 52%;
}
[dir="rtl"] select {
  background-position: 16px 52%, 21px 52%;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
input:hover,
textarea:hover,
select:hover {
  border-color: var(--text-secondary);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--focus-ring);
}
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--danger-text);
}

/* Custom square checkbox / round radio with a teal check */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  border: 1px solid var(--control-line);
  border-radius: 2px;
  background: var(--bg-card);
  aspect-ratio: 1;
  cursor: pointer;
  vertical-align: -0.2em;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
/* Geometry lock (0,2,1): generic `.x input { min-block-size }` rules in page
   CSS must not stretch the drawn box */
input[type="checkbox"][type],
input[type="radio"][type] {
  min-block-size: 0;
  min-inline-size: 0;
  padding: 0;
}
input[type="radio"] {
  border-radius: 50%;
}
input[type="checkbox"]::before {
  content: "";
  inline-size: 11px;
  block-size: 11px;
  background: var(--btn-solid-fg);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  scale: 0;
  transition: scale 0.12s var(--ease-out);
}
input[type="radio"]::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--accent-text);
  scale: 0;
  transition: scale 0.12s var(--ease-out);
}
input[type="checkbox"]:checked {
  background: var(--accent-text);
  border-color: var(--accent-text);
}
input[type="checkbox"]:checked::before {
  background: var(--bg-card);
  scale: 1;
}
input[type="radio"]:checked {
  border-color: var(--accent-text);
}
input[type="radio"]:checked::before {
  scale: 1;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline-offset: 2px;
}

label {
  font-weight: 600;
}

.stacked-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-inline-size: 640px;
}
.newsletter-form {
  max-inline-size: 560px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.form-field > label,
.form-field > .form-label,
.form-label {
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
}
.form-hint {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
}
.field-error {
  color: var(--danger-text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
}
.form-status {
  padding: var(--space-4) var(--space-5);
  border: 1px solid color-mix(in srgb, var(--ok-text) 40%, transparent);
  border-inline-start-width: 3px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ok-text) 7%, var(--bg-card));
  color: var(--text-primary);
  margin-block-end: var(--space-6);
}
.form-status.error {
  border-color: color-mix(in srgb, var(--danger-text) 45%, transparent);
  background: color-mix(in srgb, var(--danger-text) 6%, var(--bg-card));
}
/* Honeypot: MUST stay invisible to humans but present in the DOM for bots */
.hp-field {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────
   10. Announcement bar
   ───────────────────────────────────────────── */
.announce {
  background: var(--announce-bg);
  color: var(--announce-fg);
  font-size: 0.82rem;
  line-height: 1.35;
}
.announce-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-block-size: var(--announce-height);
  padding-block: 5px;
}
.announce-text {
  display: flex;
  align-items: center;
  gap: 9px;
  min-inline-size: 0;
}
.announce-copy {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.announce-dot {
  position: relative;
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--paper-accent);
}
.announce-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--paper-accent);
  opacity: 0;
  animation: live-ping 2.4s var(--ease-out) infinite;
}
@keyframes live-ping {
  0% { opacity: 0.7; scale: 0.4; }
  70%, 100% { opacity: 0; scale: 1.25; }
}
.announce-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-block-size: 24px;
  padding: 3px 8px 3px 9px;
  border: 1px solid var(--announce-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-micro);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: var(--ui-case);
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}
:root:lang(he) .announce-link {
  font-size: 0.78rem;
  letter-spacing: 0;
}
.announce-link:hover {
  background: var(--announce-fg);
  border-color: var(--announce-fg);
  color: var(--announce-bg);
}
.announce-link .icon {
  inline-size: 11px;
  block-size: 11px;
  rotate: -90deg;
}
[dir="rtl"] .announce-link .icon {
  rotate: 90deg;
}
/* Touch screens: the pill's hit area fills the bar's height (36px) */
@media (pointer: coarse) {
  .announce-link {
    position: relative;
  }
  .announce-link::after {
    content: "";
    position: absolute;
    inset: -6px -4px;
  }
}
@media (max-width: 719.98px) {
  .announce {
    font-size: 0.78rem;
  }
  .announce-more {
    display: none;
  }
}

/* ─────────────────────────────────────────────
   11. Header & navigation
   ───────────────────────────────────────────── */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-block-end: 1px solid transparent;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.site-header.is-scrolled {
  border-block-end-color: var(--border-subtle);
}
/* The stuck header lies inside the page's scroll-padding zone (html
   scroll-padding-block-start), so focusing anything in it (Tab or
   Shift+Tab into the nav, the drawer handing focus back to its toggle)
   made Chrome "reveal" it by scrolling the page about half a screen up.
   A matching negative scroll margin tells scroll-into-view it is visible. */
.site-header :is(a, button) {
  scroll-margin-block-start: calc(-1 * (var(--navbar-height) + 1rem));
}

.navbar {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  min-block-size: var(--navbar-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
.brand:focus-visible {
  outline-offset: 6px;
}

/* Inline SVG logo (partials/logo.html): TECH = currentColor, RS = traces */
.logo {
  color: var(--text-primary);
}
.logo .logo-trace,
.logo .logo-node {
  stroke: var(--logo-accent, var(--accent));
}
/* Scoped to .brand so a clone of the logo (intro.js) is not pinned.
   26px centres on a whole pixel in the 68px header (crisper at DPR 1) */
.brand .logo,
.brand .brand-logo {
  block-size: 26px;
  inline-size: auto;
}

.nav-toggle,
.nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px; /* drawer layout = touch layout: 44px targets */
  block-size: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.nav-toggle:hover,
.nav-close:hover {
  border-color: var(--ink);
}
.nav-toggle .icon,
.nav-close .icon {
  inline-size: 20px;
  block-size: 20px;
}
.nav-toggle {
  margin-inline-start: auto;
}

.nav-drawer {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  flex: 1;
  min-inline-size: 0;
}
.drawer-head {
  display: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}
.nav-links > li {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-links > li > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--text-primary);
  font-size: var(--ui-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ui-tracking);
  text-transform: var(--ui-case);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}
.nav-links > li > a:hover {
  text-decoration-color: currentColor;
}
.nav-links > li > a[aria-current="page"] {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}
.nav-idx {
  display: none;
}

/* Services mega menu (disclosure; site.js toggles li.is-open) */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 28px;
  margin-inline-start: -10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: color var(--transition-fast);
}
.menu-toggle:hover,
.has-menu.is-open .menu-toggle {
  color: var(--text-primary);
}
.menu-toggle .icon {
  inline-size: 12px;
  block-size: 12px;
  transition: rotate var(--transition);
}
.menu-toggle[aria-expanded="true"] .icon {
  rotate: 180deg;
}
.mega {
  position: absolute;
  inset-block-start: calc(100% + 16px);
  inset-inline-start: -14px;
  z-index: 5;
  inline-size: min(680px, calc(100vw - 2 * var(--container-pad)));
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition: opacity var(--transition-fast), translate var(--transition),
    visibility 0s linear var(--dur-fast);
}
html[data-theme="dark"] .mega {
  border-color: var(--border-strong);
}
.mega::before { /* hover bridge */
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -18px;
  block-size: 18px;
}
.has-menu.is-open .mega {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity var(--transition-fast), translate var(--transition), visibility 0s;
}
/* One sheet: a 2×2 grid of hairline cells, then a foot row */
.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-subtle);
  border-block-end: 1px solid var(--border-subtle);
  border-start-start-radius: calc(var(--radius-lg) - 1px);
  border-start-end-radius: calc(var(--radius-lg) - 1px);
  overflow: hidden;
}
.mega-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
  background: var(--bg-card);
  transition: background-color var(--transition-fast);
}
.mega-item:hover {
  background: var(--bg-card-hover);
}
.mega-item:focus-visible {
  outline-offset: -3px;
}
.mega-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 18px;
}
.mega-icon {
  display: inline-flex;
  color: var(--accent-text);
}
.mega-icon .icon {
  inline-size: 18px;
  block-size: 18px;
}
.mega-title {
  display: block;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.mega-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}
.mega-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 20px;
}
.mega-foot .text-link {
  font-size: var(--ui-size);
  letter-spacing: var(--ui-tracking);
  text-transform: var(--ui-case);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 8px;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--transition-fast);
}
.lang-switch:hover {
  text-decoration-color: currentColor;
}
.lang-switch[lang="en"] { /* page face: Heebo's Latin on Hebrew pages, so "English" costs no Inter download */
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lang-switch[lang="he"] {
  font-family: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0;
}
.lang-switch .icon {
  inline-size: 15px;
  block-size: 15px;
  color: var(--text-muted);
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.theme-toggle:hover {
  border-color: var(--ink);
}
.theme-toggle .icon {
  inline-size: 16px;
  block-size: 16px;
}
/* Touch screens (tablets get the desktop header from 1024px): the theme
   toggle and the services chevron grow to touch-sized targets */
@media (pointer: coarse) {
  .theme-toggle {
    inline-size: 44px;
    block-size: 44px;
  }
  .menu-toggle {
    inline-size: 28px;
    block-size: 40px;
  }
}
/* The icon shows the active theme (matches aria-pressed = light on) */
.theme-toggle-sun {
  display: inline-flex;
}
.theme-toggle-moon {
  display: none;
}
html[data-theme="dark"] .theme-toggle-sun {
  display: none;
}
html[data-theme="dark"] .theme-toggle-moon {
  display: inline-flex;
}
.nav-mail {
  display: none; /* drawer-only (mobile) */
}
.nav-account {
  padding: 8px 6px;
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-weight: 600;
}
.nav-account:hover {
  color: var(--text-primary);
}

/* Mobile: the drawer becomes a full-height editorial sheet */
@media (max-width: 1023.98px) {
  .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg-page);
  }
  body.drawer-open .site-header {
    z-index: 300; /* above the a11y launcher */
  }
  body.drawer-open {
    overflow: hidden;
  }
  .nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 10;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--container-pad) calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-page);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    translate: 0 -10px;
    transition: opacity 0.2s var(--ease-standard), translate 0.4s var(--ease-out),
      visibility 0s linear 0.2s;
  }
  .nav-drawer.is-open {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.2s var(--ease-standard), translate 0.4s var(--ease-out), visibility 0s;
  }
  /* The drawer scrolls on short screens (iPhone SE, landscape): keyboard
     focus reveals links below its sticky head; its own links drop the
     header's negative scroll margin (only the head's close button keeps it) */
  .nav-drawer {
    scroll-padding-block-start: calc(var(--navbar-height) + 8px);
  }
  .nav-links :is(a, button),
  .nav-actions :is(a, button) {
    scroll-margin-block-start: 0;
  }
  .drawer-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    min-block-size: var(--navbar-height);
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    background: var(--bg-page);
    border-block-end: 1px solid var(--border-subtle);
  }
  .drawer-brand {
    display: inline-flex;
    color: var(--text-primary);
  }
  .drawer-brand .logo,
  .drawer-brand .drawer-logo {
    block-size: 26px;
    inline-size: auto;
  }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 8px 0 32px;
  }
  .nav-links > li {
    flex-wrap: wrap;
    border-block-end: 1px solid var(--border-subtle);
  }
  .nav-links > li > a {
    flex: 1;
    align-items: baseline;
    gap: 16px;
    padding: 20px 0 18px;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: var(--weight-display);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    text-transform: none;
    text-decoration: none;
  }
  .nav-links > li > a[aria-current="page"] {
    color: var(--accent-text);
  }
  .nav-idx {
    display: inline-block;
    min-inline-size: 2.4em;
    font-size: 0.72rem;
  }
  .menu-toggle {
    display: none;
  }
  /* The panel keeps its closed values (opacity 0, hidden) and is shown
     only inside the open drawer: a panel left "visible" in the closed
     drawer ran the desktop fade-out when the viewport crossed 1024px
     (tablet rotation, window resize) and painted a ghost menu under the
     header. It hides 0.2s after the drawer closes, with the drawer's fade. */
  .mega {
    position: static;
    z-index: auto; /* a flex item keeps its z-index even when static: at 5 the
                      sub-links slid over the sticky drawer head (and its
                      close button) when the drawer scrolled on short screens */
    inline-size: 100%;
    padding: 0 0 18px;
    background: none;
    border: 0;
    box-shadow: none;
    translate: none;
    transition: opacity 0s linear 0.2s, visibility 0s linear 0.2s;
  }
  .nav-drawer.is-open .mega {
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .mega::before,
  .mega-text,
  .mega-foot {
    display: none;
  }
  .mega-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-inline-start: calc(0.72rem * 2.4 + 16px);
    background: none;
    border: 0;
    border-inline-start: 1px solid var(--border-subtle);
    border-radius: 0;
  }
  .mega-item {
    padding: 8px 0;
    padding-inline-start: 16px;
    background: none;
  }
  .mega-item:hover {
    background: none;
  }
  .mega-item:hover .mega-title {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .mega-head {
    display: none;
  }
  .mega-title {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
  }
  .nav-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-block-start: auto;
    padding-block-start: 20px;
  }
  .nav-actions .lang-switch {
    min-block-size: 44px;
    padding-inline: 0;
  }
  .nav-actions .theme-toggle {
    margin-inline-start: auto;
    inline-size: 44px;
    block-size: 44px;
  }
  .nav-mail {
    order: 5;
    display: inline-flex;
    flex: 1 1 100%;
    --btn-h: 48px;
    margin-block-start: 6px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }
  .nav-mail .icon {
    inline-size: 16px;
    block-size: 16px;
  }
  .nav-cta {
    order: 6;
    flex: 1 1 100%;
    --btn-h: 52px;
    font-size: var(--ui-size-lg);
    background: var(--btn-solid-bg);
    border-color: var(--btn-solid-bg);
    color: var(--btn-solid-fg);
  }
  .nav-cta:hover {
    background: var(--btn-solid-hover);
    border-color: var(--btn-solid-hover);
    color: var(--btn-solid-fg);
  }
  .nav-cta::after {
    content: "";
    flex: none;
    inline-size: 1.5px;
    block-size: 0.95em;
    margin-inline-start: 2px;
    background: currentColor;
    opacity: 0.55;
  }
}
@media (min-width: 1024px) {
  .nav-toggle,
  .nav-close {
    display: none;
  }
}
@media (min-width: 1024px) and (max-width: 1179.98px) {
  .nav-links > li > a {
    padding-inline: 9px;
  }
  .lang-switch .icon {
    display: none;
  }
}

/* ─────────────────────────────────────────────
   12. Footer — ink in both themes, giant wordmark
   ───────────────────────────────────────────── */
.site-footer {
  position: relative;
  margin-block-start: auto;
  padding-block: clamp(56px, 7vw, 104px) 28px;
  background: var(--ink-panel);
  font-size: var(--step--1);
}
html[data-theme="dark"] .site-footer {
  border-block-start: 1px solid var(--ink-edge);
}
.footer-mark {
  margin-block-end: clamp(48px, 7vw, 104px);
  color: var(--on-ink);
}
.footer-wordmark {
  --logo-accent: var(--on-ink-accent);
  display: block;
  inline-size: 100%;
  max-inline-size: none;
  block-size: auto;
  color: var(--on-ink);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px clamp(20px, 4vw, 32px);
}
.footer-brand {
  grid-column: 1 / -1;
}
/* Below ~1360px the legal row starts under the fixed a11y launcher:
   leave room so the last line is never covered */
@media (max-width: 1359.98px) {
  .site-footer {
    padding-block-end: 84px;
  }
}
@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: auto;
    padding-inline-end: clamp(16px, 4vw, 64px);
  }
}
.footer-mission {
  max-inline-size: 38ch;
  color: var(--on-ink);
  font-size: var(--step-0);
  line-height: 1.6;
}
/* Footer links carry their row spacing as padding (no list gap), so each
   is a ~35px touch target in the dense phone columns; the negative list
   margins keep the text exactly where the 12px gaps put it. */
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-block-start: 16px;
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  color: var(--on-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--on-ink) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--transition-fast);
}
.footer-contact a:hover {
  text-decoration-color: currentColor;
}
.footer-contact .icon {
  inline-size: 16px;
  block-size: 16px;
  color: var(--on-ink-accent);
}
.footer-title {
  margin-block-end: 18px;
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: var(--eyebrow-case);
  color: var(--on-ink-muted);
}
.footer-col ul {
  display: flex;
  flex-direction: column;
}
.footer-col ul:not(.footer-contact) {
  margin-block: -6px;
}
.footer-col li {
  display: flex;
}
.footer-col a {
  padding-block: 6px;
  color: var(--on-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--transition-fast);
}
.footer-col a:hover {
  text-decoration-color: currentColor;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-block-start: clamp(56px, 7vw, 96px);
  padding-block-start: 22px;
  border-block-start: 1px solid var(--on-ink-line);
  color: var(--on-ink-muted);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: var(--eyebrow-case);
}
:root:lang(he) .footer-legal {
  font-size: 0.82rem;
  letter-spacing: 0;
}
.footer-legal a:hover {
  color: var(--on-ink);
}
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.status-dot::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--on-ink-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--on-ink-accent) 22%, transparent);
}

/* ─────────────────────────────────────────────
   13. Pagination
   ───────────────────────────────────────────── */
.pagination {
  margin-block-start: var(--space-12);
}
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-inline-size: 40px;
  block-size: 40px;
  padding-inline: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background-color var(--transition-fast);
}
.pagination a:hover {
  border-color: var(--ink);
}
.pagination a[rel="prev"],
.pagination a[rel="next"] {
  font-family: var(--font-body);
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: var(--ui-tracking);
  text-transform: var(--ui-case);
}
.pagination a[rel="prev"] .icon,
.pagination a[rel="next"] .icon {
  inline-size: 14px;
  block-size: 14px;
}
.pagination a[aria-current="page"] {
  background: var(--btn-solid-bg);
  border-color: var(--btn-solid-bg);
  color: var(--btn-solid-fg);
}
.pagination-ellipsis {
  color: var(--text-muted);
  padding-inline: var(--space-1);
}
@media (pointer: coarse) {
  .pagination a {
    min-inline-size: 44px;
    block-size: 44px;
  }
}

/* ─────────────────────────────────────────────
   14. Long-form prose (legal pages, policy, fallback)
   ───────────────────────────────────────────── */
.prose {
  max-inline-size: var(--container-text);
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: 1.7;
}
.prose > * + * {
  margin-block-start: 1.05em;
}
.prose h2 {
  margin-block-start: 2.6em;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.prose h3 {
  margin-block-start: 2em;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}
.prose h2 + *,
.prose h3 + * {
  margin-block-start: 0.7em;
}
.prose a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover {
  color: var(--accent-text-strong);
  text-decoration-thickness: 2px;
}
.prose strong {
  color: var(--text-primary);
  font-weight: 600;
}
.prose ul,
.prose ol {
  padding-inline-start: 1.4em;
}
.prose ul > li {
  position: relative;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.1em;
  inset-block-start: 0.72em;
  inline-size: 5px;
  block-size: 5px;
  background: var(--accent);
}
.prose ol {
  list-style: decimal;
}
.prose ol > li::marker {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.prose li + li {
  margin-block-start: 0.5em;
}
.prose .lead {
  font-size: var(--step-1);
  color: var(--text-primary);
  line-height: 1.6;
}
.prose code {
  padding: 0.1em 0.4em;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  color: var(--text-primary);
  font-size: 0.86em;
}
.prose blockquote {
  padding-inline-start: 1.1em;
  border-inline-start: 2px solid var(--accent);
  color: var(--text-primary);
}
.prose hr {
  margin-block: 2.4em;
}
.prose table {
  inline-size: 100%;
  font-size: var(--step--1);
}
.prose th,
.prose td {
  padding: 12px;
  border-block-end: 1px solid var(--border-subtle);
  text-align: start;
  vertical-align: top;
}
.prose th {
  color: var(--text-primary);
  font-weight: 600;
  border-block-end-color: var(--border-strong);
}
.prose dl {
  display: grid;
  gap: var(--space-3);
}
.prose dt {
  color: var(--text-primary);
  font-weight: 600;
}
.prose address {
  font-style: normal;
}

/* ─────────────────────────────────────────────
   15. Accessibility widget (launcher + toolbar)
   ───────────────────────────────────────────── */
.a11y-widget {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-start: 20px;
  z-index: 150;
}
.a11y-launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}
.a11y-launcher:hover,
.a11y-launcher[aria-expanded="true"] {
  background: var(--btn-solid-bg);
  border-color: var(--btn-solid-bg);
  color: var(--btn-solid-fg);
}
.a11y-launcher .icon {
  inline-size: 22px;
  block-size: 22px;
}
@media (max-width: 1024px) {
  .a11y-widget {
    inset-block-end: calc(14px + env(safe-area-inset-bottom, 0px));
    inset-inline-start: auto;
    inset-inline-end: 14px;
  }
  .a11y-launcher {
    inline-size: 40px;
    block-size: 40px;
  }
  .a11y-launcher .icon {
    inline-size: 20px;
    block-size: 20px;
  }
}
@media (pointer: coarse) {
  .a11y-launcher {
    inline-size: 44px;
    block-size: 44px;
  }
}
.a11y-toolbar {
  position: absolute;
  inset-block-end: calc(100% + 12px);
  inset-inline-start: 0;
  inline-size: min(304px, calc(100vw - 40px));
  max-block-size: calc(100vh - 100px);
  overflow-y: auto;
  padding: 18px 18px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}
/* After the base rule (same specificity): with the launcher on the
   inline-end edge the panel opens from that corner, never off-screen */
@media (max-width: 1024px) {
  .a11y-toolbar {
    inset-inline-start: auto;
    inset-inline-end: 0;
    inline-size: min(304px, calc(100vw - 28px));
  }
}
html[data-theme="dark"] .a11y-toolbar {
  border-color: var(--border-strong);
}
.a11y-title {
  margin-block-end: 8px;
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: var(--eyebrow-case);
  color: var(--text-muted);
}
.a11y-actions {
  display: grid;
}
.a11y-actions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  inline-size: 100%;
  min-block-size: 42px;
  padding: 8px 2px;
  border-block-end: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: start;
  transition: color var(--transition-fast);
}
.a11y-actions button:hover {
  color: var(--accent-text);
}
.a11y-actions button:focus-visible {
  outline-offset: -2px;
}
.a11y-actions button > span[aria-hidden="true"] {
  flex: none;
  min-inline-size: 30px;
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-align: center;
  color: var(--text-secondary);
  direction: ltr; /* "A+" must not flip to "+A" in RTL */
  unicode-bidi: isolate;
}
/* Toggle switch for the on/off options */
.a11y-actions button[aria-pressed]::after {
  content: "";
  flex: none;
  inline-size: 30px;
  block-size: 18px;
  border-radius: var(--radius-full);
  background-color: var(--control-line);
  background-image: radial-gradient(circle closest-side, var(--bg-card) 6px, transparent 6.5px);
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: left center;
  transition: background-color var(--transition-fast), background-position var(--transition-fast);
}
[dir="rtl"] .a11y-actions button[aria-pressed]::after {
  background-position: right center;
}
.a11y-actions button[aria-pressed="true"]::after {
  background-color: var(--accent-text);
  background-position: right center;
}
[dir="rtl"] .a11y-actions button[aria-pressed="true"]::after {
  background-position: left center;
}
.a11y-actions button[data-a11y-action="reset"] {
  border-block-end: 0;
  color: var(--text-secondary);
}
.a11y-statement-link {
  display: inline-block;
  margin-block-start: 10px;
  color: var(--accent-text);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─────────────────────────────────────────────
   16. Accessibility state classes (set on <html> by site.js / boot.js)
   ───────────────────────────────────────────── */
/* High contrast: black ground, white text, cyan accents, no decoration
   (screen only — print stays ink on paper) */
@media not print {
  :root.a11y-high-contrast {
    --paper: #000000;
    --stone: #000000;
    --paper-card: #000000;
    --paper-inset: #000000;
    --paper-hover: #1c1c1c;
    --paper-fg: #ffffff;
    --paper-fg-2: #ffffff;
    --paper-fg-3: #e2e2e2;
    --paper-line: #9a9a9a;
    --paper-line-2: #ffffff;
    --paper-control: #ffffff;
    --paper-accent: #7fe7f2;
    --paper-accent-text: #7fe7f2;
    --paper-accent-strong: #b8f3f9;
    --paper-danger: #ff9aa2;
    --paper-warn: #ffd666;
    --paper-ok: #8ff0c0;
    --paper-sev-critical: #ff9aa2;
    --paper-sev-high: #ffc199;
    --paper-sev-medium: #ffd666;
    --paper-sev-low: #7fe7f2;
    --paper-solid: #ffffff;
    --paper-solid-fg: #000000;
    --paper-solid-hover: #7fe7f2;
    --paper-field-tick: transparent;
    --paper-field-accent: transparent;
    --paper-field-accent-2: transparent;
    --paper-tint: 0%;
    --sand: #ffffff;
    --sand-strong: #7fe7f2;
    --sand-ink: #000000;
    --ink-panel: #000000;
    --ink-panel-2: #000000;
    --ink-panel-3: #1c1c1c;
    --ink-inset: #000000;
    --ink-edge: #ffffff;
    --on-ink: #ffffff;
    --on-ink-2: #ffffff;
    --on-ink-muted: #e2e2e2;
    --on-ink-accent: #7fe7f2;
    --on-ink-accent-strong: #b8f3f9;
    --on-ink-line: #9a9a9a;
    --on-ink-line-2: #ffffff;
    --on-ink-control: #ffffff;
    --on-ink-danger: #ff9aa2;
    --on-ink-warn: #ffd666;
    --on-ink-ok: #8ff0c0;
    --on-ink-sev-high: #ffc199;
    --on-ink-field-tick: transparent;
    --on-ink-field-accent: transparent;
    --on-ink-field-accent-2: transparent;
    --announce-bg: #000000;
    --announce-fg: #ffffff;
    --announce-line: #ffffff;
    --header-bg: #000000;
    --code-bg: #000000;
    --shadow-float: 0 0 0 1px #ffffff;
    --shadow-md: 0 0 0 1px #ffffff;
    color-scheme: dark;
  }
}
:root.a11y-high-contrast .announce,
:root.a11y-high-contrast .site-header {
  border-block-end: 1px solid #ffffff;
}
:root.a11y-high-contrast a:not(.btn):not(.brand):not(.mega-item),
:root.a11y-high-contrast .mega-title {
  text-decoration: underline;
}
:root.a11y-high-contrast .badge-kev {
  outline: 1px solid #ffffff;
}
/* Grayscale on the root keeps fixed elements (drawer, toolbar) positioned */
:root.a11y-grayscale {
  filter: grayscale(1);
}
:root.a11y-highlight-links a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 0.15em;
  outline: 1px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}
:root.a11y-readable-font body,
:root.a11y-readable-font h1,
:root.a11y-readable-font h2,
:root.a11y-readable-font h3,
:root.a11y-readable-font h4,
:root.a11y-readable-font h5,
:root.a11y-readable-font h6,
:root.a11y-readable-font button,
:root.a11y-readable-font input,
:root.a11y-readable-font select,
:root.a11y-readable-font textarea,
:root.a11y-readable-font .btn,
:root.a11y-readable-font .eyebrow,
:root.a11y-readable-font .idx,
:root.a11y-readable-font .announce-link,
:root.a11y-readable-font .nav-links a,
:root.a11y-readable-font .lang-switch {
  font-family: Arial, Tahoma, "Segoe UI", sans-serif !important;
  letter-spacing: 0.02em !important;
  word-spacing: 0.08em !important;
}
:root.a11y-reduce-motion,
:root.a11y-reduce-motion *,
:root.a11y-reduce-motion *::before,
:root.a11y-reduce-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
:root.a11y-reduce-motion ::details-content {
  transition: none !important;
}

/* Reveal-on-scroll (site.js adds .reveal-ready to <html>; content is
   visible without JS and with reduced motion) */
.reveal-ready [data-reveal] {
  opacity: 0;
  translate: 0 18px;
  transition: opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] {
    opacity: 1;
    translate: none;
  }
}
:root.a11y-reduce-motion [data-reveal] {
  opacity: 1 !important;
  translate: none !important;
}

/* ─────────────────────────────────────────────
   17. Print — ink on paper, no chrome
   ───────────────────────────────────────────── */
@media print {
  :root,
  .on-paper,
  .on-ink,
  .panel-ink,
  .section--ink,
  .site-footer,
  .window--ink {
    --bg-page: #ffffff;
    --bg-section: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-inset: #ffffff;
    --bg-card-hover: #ffffff;
    --ink: #000000;
    --text-primary: #000000;
    --text-secondary: #1f1f1f;
    --text-muted: #444444;
    --border-subtle: #bbbbbb;
    --border-strong: #888888;
    --accent: #0d7380;
    --accent-text: #0a5c66;
    --btn-fg: #000000;
    --btn-line: #000000;
    --btn-solid-bg: #ffffff;
    --btn-solid-fg: #000000;
    --field-tick: transparent;
    --field-accent: transparent;
    --field-accent-2: transparent;
    --shadow-float: none;
    color-scheme: light;
  }
  html,
  body {
    background: #ffffff !important;
    color: #000000;
  }
  body {
    font-size: 11pt;
  }
  .skip-link,
  .announce,
  .site-header,
  .nav-drawer,
  .a11y-widget,
  .footer-mark,
  .footer-grid,
  .field-canvas {
    display: none !important;
  }
  .site-footer,
  .panel-ink,
  .section--ink,
  .on-ink,
  .window,
  .window--ink {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
  }
  .panel-ink,
  .window {
    border: 1px solid #888888;
  }
  .site-footer {
    padding-block: 16pt 0;
  }
  .footer-legal {
    margin: 0;
    color: #444444;
    border-color: #bbbbbb;
  }
  .section {
    padding-block: 18pt;
  }
  .btn {
    border: 1px solid #000000 !important;
    background: none !important;
    color: #000000 !important;
  }
  .btn::after {
    content: none !important;
  }
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444444;
    word-break: break-all;
  }
  h1, h2, h3, h4 {
    break-after: avoid;
  }
  .card,
  .window,
  .panel-ink,
  figure,
  pre,
  table,
  img {
    break-inside: avoid;
  }
  [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
  }
}