/* ==========================================================================
   TechRS — core.css  (design system v3: offensive-security brand)
   Tokens, base, fonts, header/nav, footer, buttons, chips, badges, forms,
   cards, pagination, prose, a11y toolbar, utilities.
   Bidirectional: every rule uses logical properties so the same CSS serves
   English (LTR) and Hebrew (RTL). Dark is the default theme; light via
   html[data-theme="light"]. Text/surface pairs are AA-checked (see
   scripts/contrast_check.py).
   ========================================================================== */

/* ─────────────────────────────────────────────
   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 — dark theme is the default
   ───────────────────────────────────────────── */
:root {
  /* Brand constants */
  --brand-cyan: #19c4dc;
  --brand-cyan-bright: #45dcf0;
  --brand-purple: #7b6cff;
  --brand-purple-deep: #5143d6;
  --brand-green: #34e3a8;
  --brand-amber: #f5a524;
  --brand-danger: #ff4d6d;
  --ink-on-brand: #031a21;

  /* Severity signal colors (fills/edges; text uses --sev-*-text) */
  --sev-critical: #ff4d6d;
  --sev-high: #ff8a3d;
  --sev-medium: #f5c542;
  --sev-low: #45dcf0;
  --sev-info: #8a96aa;
  --sev-critical-text: #ff7d93;
  --sev-high-text: #ffa56b;
  --sev-medium-text: #f7d36e;
  --sev-low-text: #7ce6f4;

  /* Surfaces */
  --bg-page: #05080f;
  --bg-section: #070b14;
  --bg-card: #0a101c;
  --bg-card-hover: #0e1626;
  --bg-elevated: #111a2b;
  --bg-inset: #060a12;
  --code-bg: #060a12;
  --header-bg: rgba(5, 8, 15, 0.72);

  /* Lines & glass */
  --surface-glass: rgba(148, 163, 184, 0.04);
  --border-glass: rgba(148, 163, 184, 0.10);
  --border-subtle: rgba(148, 163, 184, 0.12);
  --border-strong: rgba(148, 163, 184, 0.22);
  --grid-line: rgba(148, 163, 184, 0.06);

  /* Text */
  --text-primary: #eef2f8;
  --text-secondary: #b9c3d3;
  --text-muted: #8e9ab0;

  /* Accent ink (safe as text) */
  --accent-text: #45dcf0;
  --accent-text-strong: #8beaf7;
  --accent-2-text: #a99fff;
  --danger-text: #ff7d93;
  --warn-text: #f7c66e;
  --ok-text: #5ceab5;
  --focus-ring: #45dcf0;

  /* Chips */
  --chip-cyan-text: #8beaf7;
  --chip-cyan-bg: rgba(25, 196, 220, 0.12);
  --chip-cyan-border: rgba(25, 196, 220, 0.30);
  --chip-purple-text: #c6bfff;
  --chip-purple-bg: rgba(123, 108, 255, 0.14);
  --chip-purple-border: rgba(123, 108, 255, 0.36);
  --chip-neutral-bg: rgba(148, 163, 184, 0.08);
  --kev-text: #5ceab5;

  /* Gradients */
  --gradient-primary: linear-gradient(120deg, #19c4dc 0%, #7b6cff 100%);
  --gradient-cyber: linear-gradient(120deg, #45dcf0 0%, #34e3a8 100%);
  --gradient-text: linear-gradient(100deg, #45dcf0 0%, #8f84ff 55%, #34e3a8 100%);
  --gradient-edge: linear-gradient(135deg, rgba(69, 220, 240, 0.55), rgba(123, 108, 255, 0.08) 40%, rgba(123, 108, 255, 0.0) 60%, rgba(52, 227, 168, 0.35));
  --gradient-mesh:
    radial-gradient(900px 520px at 12% -10%, rgba(25, 196, 220, 0.14) 0%, transparent 60%),
    radial-gradient(760px 520px at 92% 0%, rgba(123, 108, 255, 0.12) 0%, transparent 60%);

  /* 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;
  --tracking-display: -0.035em;
  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.14em;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --step-1: clamp(1.13rem, 1.06rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.24rem + 0.8vw, 1.85rem);
  --step-3: clamp(1.85rem, 1.5rem + 1.6vw, 2.75rem);
  --step-4: clamp(2.3rem, 1.7rem + 2.8vw, 3.9rem);
  --step-5: clamp(2.7rem, 1.75rem + 4.6vw, 5.4rem);

  --leading-tight: 1.06;
  --leading-snug: 1.25;
  --leading-body: 1.7;

  /* 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(4.5rem, 3rem + 6vw, 8rem);
  --gap-grid: clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
  --container-text: 70ch;

  /* Radii */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 14px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.5), 0 30px 70px rgba(0, 0, 0, 0.6);
  --ring-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glow-cyan-edge: 0 0 0 1px rgba(69, 220, 240, 0.35), 0 16px 40px rgba(25, 196, 220, 0.14);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --transition: var(--dur-base) var(--ease-out-emphasis);
  --transition-fast: var(--dur-fast) var(--ease-standard);

  /* Layout */
  --container-max: 1220px;
  --container-pad: clamp(1.1rem, 4vw, 2rem);
  --navbar-height: 72px;

  color-scheme: dark;
}

/* Hebrew: Heebo throughout, no negative tracking or forced uppercase */
:root:lang(he) {
  --font-body: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  --font-display: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  --tracking-display: -0.01em;
  --tracking-tight: 0;
  --tracking-eyebrow: 0.04em;
  --leading-tight: 1.12;
}

/* Light theme */
:root[data-theme="light"] {
  --bg-page: #f7f9fc;
  --bg-section: #eef2f8;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-elevated: #f1f5fa;
  --bg-inset: #f3f6fb;
  --header-bg: rgba(247, 249, 252, 0.82);

  --surface-glass: rgba(15, 23, 42, 0.02);
  --border-glass: rgba(15, 23, 42, 0.08);
  --border-subtle: #e2e8f0;
  --border-strong: #c7d2e0;
  --grid-line: rgba(15, 23, 42, 0.05);

  --text-primary: #0b1220;
  --text-secondary: #344256;
  --text-muted: #556274;

  --accent-text: #0a6f80;
  --accent-text-strong: #075866;
  --accent-2-text: #4b3fd0;
  --danger-text: #b4122f;
  --warn-text: #7a4d00;
  --ok-text: #0b6b4f;
  --focus-ring: #0a6f80;

  --sev-critical-text: #b4122f;
  --sev-high-text: #a24300;
  --sev-medium-text: #7a5a00;
  --sev-low-text: #0a6f80;

  --chip-cyan-text: #075866;
  --chip-cyan-bg: rgba(25, 196, 220, 0.10);
  --chip-cyan-border: rgba(10, 111, 128, 0.30);
  --chip-purple-text: #4136b8;
  --chip-purple-bg: rgba(123, 108, 255, 0.09);
  --chip-purple-border: rgba(75, 63, 208, 0.30);
  --chip-neutral-bg: rgba(15, 23, 42, 0.04);
  --kev-text: #0b6b4f;

  --gradient-text: linear-gradient(100deg, #0a7d90 0%, #5143d6 60%, #0b7a5a 100%);
  --gradient-mesh:
    radial-gradient(900px 520px at 12% -10%, rgba(25, 196, 220, 0.12) 0%, transparent 60%),
    radial-gradient(760px 520px at 92% 0%, rgba(123, 108, 255, 0.10) 0%, transparent 60%);

  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05), 0 2px 8px rgba(11, 18, 32, 0.05);
  --shadow-md: 0 2px 4px rgba(11, 18, 32, 0.05), 0 12px 28px rgba(11, 18, 32, 0.08);
  --shadow-lg: 0 6px 12px rgba(11, 18, 32, 0.06), 0 28px 60px rgba(11, 18, 32, 0.12);
  --ring-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --glow-cyan-edge: 0 0 0 1px rgba(10, 111, 128, 0.28), 0 16px 40px rgba(25, 196, 220, 0.14);

  color-scheme: light;
}

/* ─────────────────────────────────────────────
   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);
}

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;
}

main {
  flex: 1;
}
main:focus {
  outline: none;
}

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

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;
}

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

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

::selection {
  background: rgba(69, 220, 240, 0.28);
  color: inherit;
}

[hidden] {
  display: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ─────────────────────────────────────────────
   4. Utilities & shared typography
   ───────────────────────────────────────────── */
.container {
  inline-size: 100%;
  max-inline-size: var(--container-max);
  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: -100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--brand-cyan);
  color: var(--ink-on-brand);
  padding: var(--space-3) var(--space-6);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 700;
  white-space: nowrap;
  z-index: 1000;
}
[dir="rtl"] .skip-link {
  transform: translateX(50%);
}
.skip-link:focus,
.skip-link:focus-visible {
  inset-block-start: 0;
  outline: 2px solid var(--ink-on-brand);
  outline-offset: -4px;
}

.glass {
  background: var(--surface-glass);
  border: 1px solid var(--border-glass);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before {
  content: "";
  inline-size: 1.6em;
  block-size: 1px;
  background: currentColor;
  opacity: 0.7;
}
:root:lang(he) .eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
}

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
:root.a11y-high-contrast .gradient-text {
  background: none;
  color: var(--accent-text);
}

/* Section scaffold (home + list pages) */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}
.section-title {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.section-more {
  color: var(--accent-text);
  font-weight: 600;
  font-size: var(--step--1);
  white-space: nowrap;
}
.section-more:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Page chrome for list / data pages (vulns, articles, search) */
.page-head {
  margin-block: var(--space-12) var(--space-8);
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--border-subtle);
}
.page-head p {
  color: var(--text-secondary);
  max-inline-size: var(--container-text);
  margin-block-start: var(--space-3);
}
.page-title {
  font-size: var(--step-4);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.empty-state {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--text-secondary);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
}
.empty-state a {
  color: var(--accent-text);
  font-weight: 600;
}

/* Inline SVG icons */
.icon {
  display: inline-block;
  inline-size: 1.15em;
  block-size: 1.15em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
/* Arrow glyph points "back" (left) in source; flip so it points forward in
   the reading direction */
.icon-fwd {
  transform: scaleX(-1);
}
[dir="rtl"] .icon-fwd {
  transform: none;
}

/* ─────────────────────────────────────────────
   5. Buttons
   ───────────────────────────────────────────── */
.btn {
  --btn-pad-y: 0.78rem;
  --btn-pad-x: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-glass);
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--step--1);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
    background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}
.btn:hover {
  border-color: var(--accent-text);
  color: var(--accent-text-strong);
}
.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.btn .icon {
  inline-size: 1.05em;
  block-size: 1.05em;
  transition: translate var(--transition);
}
.btn:hover .icon-fwd {
  translate: 3px 0;
}
[dir="rtl"] .btn:hover .icon-fwd {
  translate: -3px 0;
}

.btn-primary {
  background: var(--gradient-cyber);
  border-color: transparent;
  color: var(--ink-on-brand);
  box-shadow: 0 6px 24px rgba(25, 196, 220, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-primary:hover {
  color: var(--ink-on-brand);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(25, 196, 220, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-lg {
  --btn-pad-y: 0.95rem;
  --btn-pad-x: 1.7rem;
  font-size: var(--step-0);
  border-radius: var(--radius-lg);
}
.btn-sm {
  --btn-pad-y: 0.5rem;
  --btn-pad-x: 0.95rem;
}
.btn-danger {
  color: #fff;
  background: var(--brand-danger);
  border-color: transparent;
}
:root[data-theme="light"] .btn-danger {
  background: var(--danger-text);
}

.text-link {
  color: var(--accent-text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* ─────────────────────────────────────────────
   6. Chips & badges
   ───────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.12rem 0.62rem;
  border-radius: var(--radius-full);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.6;
  background: var(--chip-neutral-bg);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  white-space: nowrap;
}
a.chip {
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
a.chip:hover {
  border-color: var(--accent-text);
  color: var(--accent-text);
}
.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);
}
.chip-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: 0.02em;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.08rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--chip-neutral-bg);
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.badge-critical {
  background: rgba(255, 77, 109, 0.13);
  border-color: rgba(255, 77, 109, 0.42);
  color: var(--sev-critical-text);
}
.badge-high {
  background: rgba(255, 138, 61, 0.12);
  border-color: rgba(255, 138, 61, 0.42);
  color: var(--sev-high-text);
}
.badge-medium {
  background: rgba(245, 197, 66, 0.10);
  border-color: rgba(245, 197, 66, 0.38);
  color: var(--sev-medium-text);
}
.badge-low {
  background: rgba(69, 220, 240, 0.08);
  border-color: rgba(69, 220, 240, 0.30);
  color: var(--sev-low-text);
}
.badge-none {
  background: rgba(148, 163, 184, 0.06);
  border-color: var(--border-glass);
  color: var(--text-muted);
}
.badge-kev {
  background: rgba(52, 227, 168, 0.11);
  border-color: rgba(52, 227, 168, 0.42);
  color: var(--kev-text);
}
.badge-ransom {
  background: transparent;
  border: 1.5px solid rgba(255, 77, 109, 0.55);
  color: var(--danger-text);
}
:root[data-theme="light"] .badge-critical { background: #fde9ed; border-color: rgba(180, 18, 47, 0.30); }
:root[data-theme="light"] .badge-high { background: #fff0e5; border-color: rgba(162, 67, 0, 0.30); }
:root[data-theme="light"] .badge-medium { background: #fdf6dc; border-color: rgba(122, 90, 0, 0.30); }
:root[data-theme="light"] .badge-low { background: #e6f7fa; border-color: rgba(10, 111, 128, 0.28); }
:root[data-theme="light"] .badge-kev { background: #e3f7ef; border-color: rgba(11, 107, 79, 0.30); }

/* ─────────────────────────────────────────────
   7. Forms
   ───────────────────────────────────────────── */
input[type="search"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="tel"],
input[type="number"],
input:not([type]),
textarea,
select {
  inline-size: 100%;
  padding: 0.72rem 0.95rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-inset);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--step-0);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}
textarea {
  resize: vertical;
  min-block-size: 8rem;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
input:hover,
textarea:hover,
select:hover {
  border-color: color-mix(in srgb, var(--accent-text) 45%, var(--border-strong));
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 4px rgba(69, 220, 240, 0.12);
}
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--danger-text);
}
input[type="checkbox"],
input[type="radio"] {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  accent-color: var(--brand-cyan);
  flex-shrink: 0;
}

label {
  font-weight: 600;
}

.stacked-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-inline-size: 640px;
}
.contact-form,
.newsletter-form {
  max-inline-size: 560px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}
.form-field > label,
.form-field > .form-label {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--step--1);
}
.form-hint {
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 400;
}
.field-error {
  color: var(--danger-text);
  font-size: var(--step--1);
  font-weight: 600;
}
.form-status {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(52, 227, 168, 0.10);
  border: 1px solid rgba(52, 227, 168, 0.40);
  color: var(--text-primary);
  margin-block-end: var(--space-6);
}
.form-status.error {
  background: rgba(255, 77, 109, 0.10);
  border-color: var(--danger-text);
}
/* 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;
}

/* ─────────────────────────────────────────────
   8. Header & navigation
   ───────────────────────────────────────────── */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  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);
}

.navbar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-block-size: var(--navbar-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.brand-logo {
  block-size: 28px;
  inline-size: auto;
}
.brand-logo--for-light {
  display: none;
}
:root[data-theme="light"] .brand-logo--for-dark {
  display: none;
}
:root[data-theme="light"] .brand-logo--for-light {
  display: block;
}

.nav-toggle,
.nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.nav-toggle {
  margin-inline-start: auto;
}
.nav-toggle .icon,
.nav-close .icon {
  inline-size: 22px;
  block-size: 22px;
}
.nav-close {
  align-self: flex-end;
}

.nav-drawer {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.nav-links > li {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-links > li > a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--step--1);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.nav-links > li > a:hover,
.nav-links > li > a[aria-current="page"] {
  color: var(--text-primary);
  background: var(--chip-neutral-bg);
}
.nav-links > li > a[aria-current="page"] {
  color: var(--accent-text-strong);
}

/* Services mega-menu (disclosure) */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  margin-inline-start: -0.45rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.menu-toggle:hover {
  color: var(--text-primary);
}
.menu-toggle .icon {
  inline-size: 14px;
  block-size: 14px;
  transition: rotate var(--transition);
}
.menu-toggle[aria-expanded="true"] .icon {
  rotate: 180deg;
}
.mega {
  position: absolute;
  inset-block-start: calc(100% + 12px);
  inset-inline-start: -1rem;
  inline-size: min(640px, 90vw);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition: opacity var(--transition-fast), translate var(--transition), visibility 0s linear var(--dur-fast);
}
.mega::before { /* hover bridge */
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -14px;
  block-size: 14px;
}
.has-menu.is-open .mega {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity var(--transition-fast), translate var(--transition), visibility 0s;
}
.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}
.mega-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  transition: background-color var(--transition-fast);
}
.mega-item:hover,
.mega-item:focus-visible {
  background: var(--bg-elevated);
}
.mega-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--radius-md);
  background: var(--chip-cyan-bg);
  border: 1px solid var(--chip-cyan-border);
  color: var(--accent-text);
  flex-shrink: 0;
}
.mega-icon .icon {
  inline-size: 19px;
  block-size: 19px;
}
.mega-title {
  display: block;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--text-primary);
  line-height: 1.35;
}
.mega-text {
  display: block;
  font-size: var(--step--2);
  color: var(--text-muted);
  line-height: 1.5;
  margin-block-start: 0.2rem;
}
.mega-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-1);
  border-block-start: 1px solid var(--border-subtle);
  font-size: var(--step--1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.lang-switch:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.lang-switch .icon {
  inline-size: 16px;
  block-size: 16px;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.theme-toggle .icon {
  inline-size: 18px;
  block-size: 18px;
}
.theme-toggle-sun { display: none; }
:root[data-theme="light"] .theme-toggle-sun { display: inline-flex; }
:root[data-theme="light"] .theme-toggle-moon { display: none; }
.nav-account {
  color: var(--text-secondary);
  font-size: var(--step--1);
  font-weight: 600;
}

/* Mobile drawer */
@media (max-width: 1023.98px) {
  .nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4) var(--container-pad) var(--space-8);
    background: var(--bg-page);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    translate: 0 -8px;
    transition: opacity var(--transition-fast), translate var(--transition), visibility 0s linear var(--dur-fast);
  }
  .nav-drawer.is-open {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--transition-fast), translate var(--transition), visibility 0s;
  }
  body.drawer-open {
    overflow: hidden;
  }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-links > li {
    flex-wrap: wrap;
    border-block-end: 1px solid var(--border-subtle);
  }
  .nav-links > li > a {
    flex: 1;
    padding: var(--space-4) var(--space-1);
    font-size: var(--step-1);
    color: var(--text-primary);
    background: none !important;
  }
  .menu-toggle {
    display: none;
  }
  .mega {
    position: static;
    inline-size: 100%;
    opacity: 1;
    visibility: visible;
    translate: none;
    padding: 0 0 var(--space-3);
    background: none;
    border: 0;
    box-shadow: none;
  }
  .mega::before { display: none; }
  .mega-grid {
    grid-template-columns: 1fr;
  }
  .mega-text,
  .mega-foot {
    display: none;
  }
  .nav-actions {
    margin-inline-start: 0;
    flex-wrap: wrap;
    padding-block-start: var(--space-2);
  }
  .nav-actions .btn-primary {
    inline-size: 100%;
    order: -1;
    margin-block-end: var(--space-2);
    --btn-pad-y: 0.95rem;
    font-size: var(--step-0);
  }
}
@media (min-width: 1024px) {
  .nav-toggle,
  .nav-close {
    display: none;
  }
}

/* ─────────────────────────────────────────────
   9. Cards (article teasers + generic)
   ───────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-grid);
}
@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .card-grid-guides {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm), var(--ring-inset-light);
  overflow: hidden;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition-fast), background-color var(--transition-fast);
}
.card:hover {
  transform: translateY(-3px);
  background: var(--bg-card-hover);
  border-color: var(--chip-cyan-border);
  box-shadow: var(--shadow-md), var(--glow-cyan-edge);
}
.card:focus-within {
  border-color: var(--focus-ring);
}
.card-guide {
  border-inline-start: 3px solid var(--brand-purple);
}
.card-media {
  display: block;
  overflow: hidden;
}
.card-media img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--transition);
}
.card:hover .card-media img {
  transform: scale(1.03);
}
.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  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: var(--leading-snug);
}
.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;
}
.card-summary {
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: 1.65;
}
.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);
}

/* ─────────────────────────────────────────────
   10. Pagination
   ───────────────────────────────────────────── */
.pagination {
  margin-block-start: var(--space-12);
}
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
}
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--text-secondary);
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background-color var(--transition-fast);
}
.pagination a:hover {
  border-color: var(--accent-text);
  color: var(--accent-text);
}
.pagination a[aria-current="page"] {
  background: var(--gradient-cyber);
  border-color: transparent;
  color: var(--ink-on-brand);
}
.pagination-ellipsis {
  color: var(--text-muted);
  padding-inline: var(--space-1);
}

/* ─────────────────────────────────────────────
   11. Footer
   ───────────────────────────────────────────── */
.site-footer {
  position: relative;
  margin-block-start: auto;
  background: var(--bg-section);
  border-block-start: 1px solid var(--border-subtle);
  padding-block: var(--space-16) var(--space-8);
  font-size: var(--step--1);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -1px;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(69, 220, 240, 0.5), rgba(123, 108, 255, 0.4), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }
}
.footer-brand .brand-logo {
  block-size: 26px;
}
.footer-mission {
  margin-block-start: var(--space-4);
  color: var(--text-secondary);
  max-inline-size: 36ch;
  line-height: 1.65;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}
.footer-contact a:hover {
  color: var(--accent-text);
}
.footer-contact .icon {
  inline-size: 16px;
  block-size: 16px;
  color: var(--accent-text);
}
.footer-title {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: var(--space-4);
}
:root:lang(he) .footer-title {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-col a {
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}
.footer-col a:hover {
  color: var(--text-primary);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.footer-social .icon {
  inline-size: 16px;
  block-size: 16px;
  color: var(--accent-text);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border-subtle);
  color: var(--text-muted);
}
.footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.footer-legal a:hover {
  color: var(--text-primary);
}
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-muted);
}
.status-dot::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(52, 227, 168, 0.18);
}

/* ─────────────────────────────────────────────
   12. Long-form prose (legal pages, about, articles fallback)
   ───────────────────────────────────────────── */
.prose {
  max-inline-size: var(--container-text);
  color: var(--text-secondary);
  line-height: 1.8;
}
.prose > * + * {
  margin-block-start: var(--space-4);
}
.prose h2 {
  font-size: var(--step-2);
  color: var(--text-primary);
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-2);
}
.prose h3 {
  font-size: var(--step-1);
  color: var(--text-primary);
  margin-block-start: var(--space-8);
}
.prose h2 + *,
.prose h3 + * {
  margin-block-start: var(--space-3);
}
.prose a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prose a:hover {
  text-decoration-thickness: 2px;
}
.prose strong {
  color: var(--text-primary);
  font-weight: 600;
}
.prose ul,
.prose ol {
  padding-inline-start: 1.4em;
}
.prose ul {
  list-style: none;
}
.prose ul > li {
  position: relative;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.1em;
  inset-block-start: 0.78em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 1px;
  background: var(--accent-text);
  rotate: 45deg;
}
.prose ol {
  list-style: decimal;
}
.prose li + li {
  margin-block-start: var(--space-2);
}
.prose .lead {
  font-size: var(--step-1);
  color: var(--text-primary);
  line-height: 1.6;
}
.prose code {
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 0.86em;
}
.prose table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.prose th,
.prose td {
  padding: var(--space-3);
  border-block-end: 1px solid var(--border-subtle);
  text-align: start;
  vertical-align: top;
}
.prose th {
  color: var(--text-primary);
  font-weight: 600;
}
.prose dl {
  display: grid;
  gap: var(--space-3);
}
.prose dt {
  color: var(--text-primary);
  font-weight: 600;
}
.prose address {
  font-style: normal;
}

/* ─────────────────────────────────────────────
   13. Accessibility widget (launcher + toolbar)
   ───────────────────────────────────────────── */
.a11y-widget {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-start: var(--space-5);
  z-index: 150;
}
.a11y-launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  transition: border-color var(--transition-fast), transform var(--transition);
}
.a11y-launcher:hover {
  border-color: var(--accent-text);
  transform: translateY(-2px);
}
.a11y-launcher .icon {
  inline-size: 22px;
  block-size: 22px;
}
.a11y-toolbar {
  position: absolute;
  inset-block-end: calc(100% + var(--space-3));
  inset-inline-start: 0;
  inline-size: min(300px, calc(100vw - 2.5rem));
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
}
.a11y-title {
  font-size: var(--step-0);
  margin-block-end: var(--space-3);
}
.a11y-actions {
  display: grid;
  gap: var(--space-2);
}
.a11y-actions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  inline-size: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--step--1);
  font-weight: 600;
  text-align: start;
  color: var(--text-secondary);
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background-color var(--transition-fast);
}
.a11y-actions button:hover {
  border-color: var(--accent-text);
  color: var(--accent-text);
}
.a11y-actions button[aria-pressed="true"] {
  background: var(--chip-cyan-bg);
  border-color: var(--chip-cyan-border);
  color: var(--chip-cyan-text);
}
.a11y-statement-link {
  display: inline-block;
  margin-block-start: var(--space-4);
  color: var(--accent-text);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ─────────────────────────────────────────────
   14. Accessibility state classes (set on <html> by JS)
   ───────────────────────────────────────────── */
:root.a11y-high-contrast {
  --bg-page: #000000;
  --bg-section: #000000;
  --bg-card: #0a0a0a;
  --bg-card-hover: #141414;
  --bg-elevated: #141414;
  --bg-inset: #000000;
  --code-bg: #000000;
  --header-bg: rgba(0, 0, 0, 0.96);
  --surface-glass: rgba(255, 255, 255, 0.04);
  --border-glass: rgba(255, 255, 255, 0.5);
  --border-strong: rgba(255, 255, 255, 0.7);
  --border-subtle: rgba(255, 255, 255, 0.5);
  --grid-line: transparent;
  --text-primary: #ffffff;
  --text-secondary: #f2f5f9;
  --text-muted: #d7dee8;
  --accent-text: #8beaf8;
  --accent-text-strong: #a8f0fa;
  --accent-2-text: #d6cffc;
  --danger-text: #ff9aae;
  --warn-text: #ffd699;
  --focus-ring: #ffffff;
  --sev-critical-text: #ff9aae;
  --sev-high-text: #ffc199;
  --sev-medium-text: #ffe599;
  --sev-low-text: #a8f0fa;
  --chip-cyan-text: #a8f0fa;
  --chip-purple-text: #d6cffc;
  --kev-text: #9ff3d3;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  color-scheme: dark;
}
:root.a11y-high-contrast a {
  text-decoration: underline;
}
:root.a11y-grayscale .site-header,
:root.a11y-grayscale main,
:root.a11y-grayscale .site-footer,
:root.a11y-grayscale .a11y-widget {
  filter: grayscale(1);
}
:root.a11y-highlight-links a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  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 .eyebrow {
  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;
}

/* Reveal-on-scroll (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 0.7s var(--ease-out-emphasis), translate 0.7s var(--ease-out-emphasis);
  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;
}