/* ==========================================================================
   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
     chrome        --announce-bg --announce-fg --announce-muted (quiet
                   text on the top bar) --announce-line --header-bg
     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). The top bar's
       language link and theme toggle (from 1024px) are 44px too, so on
       touch the bar grows from 36px to 44px. 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-muted: #5d5851;      /* 5.6:1 on the bar (its prefs corner) */
  --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-muted: #a9a49b;    /* 7.0:1 on the dark bar */
    --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
   ───────────────────────────────────────────── */
/* div.announce > .announce-inner > aside.announce-msg (the message and its
   link) + .announce-prefs (language link + theme toggle, role=group). The
   prefs show from 1024px, small and muted in the bar's inline-end corner;
   below that the nav drawer holds the same controls. partials/
   site_prefs.html renders both copies; CSS shows one per layout. */
.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-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-inline-size: 0;
}
.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;
  }
}
/* Prefs corner (from 1024px). The 1fr | auto | 1fr grid keeps the message
   centred; when space runs out (Hebrew, 160% text) the message ellipsizes
   instead of running into the prefs. 28px targets keep the bar at 36px. */
.announce-prefs {
  display: none;
}
@media (min-width: 1024px) {
  .announce-inner {
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    column-gap: 24px;
    padding-block: 4px;
  }
  .announce-msg {
    grid-column: 2;
  }
  .announce-prefs {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 2px;
  }
}
.announce-prefs .lang-switch {
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  color: var(--announce-muted);
}
.announce-prefs .theme-toggle {
  inline-size: 28px;
  block-size: 28px;
  border: 0;
  color: var(--announce-muted);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.announce-prefs .theme-toggle .icon {
  inline-size: 15px;
  block-size: 15px;
}
.announce-prefs .lang-switch:hover,
.announce-prefs .theme-toggle:hover {
  color: var(--announce-fg);
  background: color-mix(in srgb, var(--announce-fg) 9%, transparent);
}
/* 1px offset keeps the ring inside the bar, clear of the sticky header */
.announce-prefs :focus-visible {
  outline-offset: 1px;
}
/* Touch tablets get this layout too: 44px targets, so the bar is 44px */
@media (pointer: coarse) and (min-width: 1024px) {
  .announce-inner {
    padding-block: 0;
  }
  .announce-prefs .lang-switch,
  .announce-prefs .theme-toggle {
    inline-size: 44px;
    block-size: 44px;
  }
}

/* ─────────────────────────────────────────────
   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;
}
/* Flag-only switch: the language name is visually hidden (it is the link's
   accessible name, and the title tooltip) */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.lang-switch:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
/* The hidden name still renders: keep it on the page face, so Hebrew pages
   don't download Inter for one word */
.lang-switch[lang="en"] {
  font-family: var(--font-body);
}
.lang-switch[lang="he"] {
  font-family: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
}
.lang-switch .flag {
  display: block;
  inline-size: 20px;
  block-size: 15px;
  border-radius: 2px;
  /* hairline keeps the flags' white off the sand bar and the paper */
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent);
}
.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 services
   chevron grows to a touch-sized target, as does a theme toggle that the
   top bar (section 10) or the drawer doesn't size itself */
@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;
  }
  /* Same box as the theme toggle it pairs with in the drawer */
  .nav-actions .lang-switch {
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 1px solid var(--border-strong);
  }
  .nav-actions .lang-switch:hover {
    border-color: var(--ink);
  }
  .nav-actions .lang-switch .flag {
    inline-size: 24px;
    block-size: 18px;
  }
  .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;
  }
  /* Language + theme sit in the top bar here (.announce-prefs, section 10):
     the header keeps one action, the CTA */
  .nav-actions .lang-switch,
  .nav-actions .theme-toggle {
    display: none;
  }
}
@media (min-width: 1024px) and (max-width: 1179.98px) {
  .nav-links > li > a {
    padding-inline: 9px;
  }
  /* With only the CTA at the header's end the nav sits nearer it: the 680px
     Services panel (hung from its first item) would cross the inline-end
     edge in Hebrew below ~1080px and scroll the page sideways */
  .mega {
    inline-size: 620px;
  }
}

/* ─────────────────────────────────────────────
   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-muted: #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;
  }
}