/*!
 * Premium Website Design System — v2.0.0
 * m.eylon studio · MIT License
 *
 * Single-file design system. No build step. No dependencies.
 *
 * Usage:
 *   <link rel="stylesheet" href="design-system.css">
 *   <html lang="he" dir="rtl">
 *
 * Theme control:
 *   default            → follows OS (prefers-color-scheme)
 *   <html data-theme="light">  → forced light
 *   <html data-theme="dark">   → forced dark
 *
 * Architecture note: dark mode is implemented with the CSS `light-dark()`
 * function driven by `color-scheme`, so the palette is declared ONCE.
 * Only four scalar "strength" values need a per-theme override (see §1.9).
 */

@layer reset, tokens, base, layout, components, utilities;

/* ============================================================================
   §0  RESET
   ========================================================================= */
@layer reset {

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

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
  }

  body {
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

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

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  /* Hebrew must not be hyphenated automatically — it breaks words badly. */
  :lang(he) p, :lang(he) li { hyphens: none; }

  ul[class], ol[class] { list-style: none; padding: 0; }

  a { color: inherit; }

  table { border-collapse: collapse; border-spacing: 0; }

  :target { scroll-margin-block-start: var(--space-20, 5rem); }

  html:focus-within { scroll-behavior: smooth; }

  @media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
  }
}


/* ============================================================================
   §1  TOKENS — the single source of truth.
       Nothing below this block may contain a raw color, size, or duration.
   ========================================================================= */
@layer tokens {

  :root {

    /* §1.0 — Enables light-dark() and fixes native controls, scrollbars,
       datepickers and form widgets in dark mode. Without this line the
       browser renders all built-in UI as light. */
    color-scheme: light dark;

    /* §1.1 — Direction flag.
       Physical transforms (translateX) are NOT mirrored by dir="rtl".
       Multiply every horizontal offset by this so motion follows reading
       direction. Set to -1 in the [dir="rtl"] block below. */
    --flow-dir: 1;

    /* ── §1.2 Brand ────────────────────────────────────────────────────────
       --color-brand      : surfaces (button fills, borders). Constant across
                            themes so button contrast stays predictable.
       --color-brand-text : brand used AS TEXT. Must shift per theme to stay
                            readable on the surrounding background. */
    --color-brand:         oklch(52% 0.22 250);
    --color-brand-text:    light-dark(oklch(48% 0.22 250), oklch(76% 0.15 250));
    --color-brand-hover:   color-mix(in oklch, var(--color-brand) 85%, var(--mix-shade));
    --color-brand-active:  color-mix(in oklch, var(--color-brand) 74%, var(--mix-shade));
    --color-brand-subtle:  color-mix(in oklch, var(--color-brand) var(--alpha-subtle), transparent);
    --color-brand-border:  color-mix(in oklch, var(--color-brand) 30%, transparent);

    --color-accent:        oklch(68% 0.18 55);
    --color-accent-text:   light-dark(oklch(52% 0.16 55), oklch(80% 0.15 55));
    --color-accent-hover:  color-mix(in oklch, var(--color-accent) 85%, var(--mix-shade));
    --color-accent-subtle: color-mix(in oklch, var(--color-accent) var(--alpha-subtle), transparent);

    /* ── §1.3 Surface ─────────────────────────────────────────────────── */
    --color-bg:             light-dark(oklch(98.5% 0.004 250), oklch(12% 0.015 250));
    --color-surface:        light-dark(oklch(100% 0 0),        oklch(17% 0.015 250));
    --color-surface-raised: light-dark(oklch(99% 0.003 250),   oklch(22% 0.015 250));
    --color-surface-sunken: light-dark(oklch(96% 0.005 250),   oklch(9% 0.015 250));
    --color-border:         light-dark(oklch(88% 0.01 250),    oklch(28% 0.015 250));
    --color-border-strong:  light-dark(oklch(75% 0.015 250),   oklch(40% 0.015 250));

    /* Glass — for overlays on imagery or dark backgrounds. */
    --color-glass-bg:     light-dark(oklch(100% 0 0 / 60%), oklch(22% 0.015 250 / 55%));
    --color-glass-border: light-dark(oklch(100% 0 0 / 70%), oklch(100% 0 0 / 12%));
    --blur-glass: 16px;

    /* ── §1.4 Text ────────────────────────────────────────────────────── */
    --color-text:         light-dark(oklch(18% 0.02 250),  oklch(92% 0.008 250));
    --color-text-muted:   light-dark(oklch(45% 0.015 250), oklch(70% 0.012 250));
    --color-text-faint:   light-dark(oklch(58% 0.01 250),  oklch(56% 0.01 250));
    /* Text placed ON a saturated brand/error surface. Constant on purpose. */
    --color-text-inverse: oklch(98% 0.004 250);

    /* ── §1.5 Semantic ────────────────────────────────────────────────── */
    --color-success:        oklch(58% 0.18 145);
    --color-success-text:   light-dark(oklch(45% 0.16 145), oklch(78% 0.16 145));
    --color-success-subtle: color-mix(in oklch, var(--color-success) var(--alpha-subtle), transparent);

    --color-warning:        oklch(72% 0.18 75);
    --color-warning-text:   light-dark(oklch(50% 0.14 75), oklch(82% 0.15 75));
    --color-warning-subtle: color-mix(in oklch, var(--color-warning) var(--alpha-subtle), transparent);

    --color-error:          oklch(55% 0.22 25);
    --color-error-text:     light-dark(oklch(52% 0.22 25), oklch(76% 0.17 25));
    --color-error-hover:    color-mix(in oklch, var(--color-error) 85%, var(--mix-shade));
    --color-error-subtle:   color-mix(in oklch, var(--color-error) var(--alpha-subtle), transparent);

    --color-info:           oklch(62% 0.16 235);
    --color-info-text:      light-dark(oklch(48% 0.16 235), oklch(78% 0.13 235));
    --color-info-subtle:    color-mix(in oklch, var(--color-info) var(--alpha-subtle), transparent);

    /* ── §1.6 Type scale (fluid — no breakpoints needed) ──────────────── */
    --text-xs:   clamp(0.70rem, 0.65rem + 0.25vw, 0.75rem);   /* 11–12px */
    --text-sm:   clamp(0.82rem, 0.78rem + 0.25vw, 0.875rem);  /* 13–14px */
    --text-base: clamp(1rem,    0.96rem + 0.25vw, 1.0625rem); /* 16–17px */
    --text-lg:   clamp(1.15rem, 1.05rem + 0.5vw,  1.25rem);   /* 18–20px */
    --text-xl:   clamp(1.35rem, 1.15rem + 1vw,    1.75rem);   /* 22–28px */
    --text-2xl:  clamp(1.65rem, 1.25rem + 2vw,    2.5rem);    /* 26–40px */
    --text-3xl:  clamp(2rem,    1.5rem  + 2.5vw,  3.5rem);    /* 32–56px */
    --text-4xl:  clamp(2.5rem,  1.75rem + 4vw,    5rem);      /* 40–80px */

    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --leading-none:    1;
    --leading-tight:   1.2;
    --leading-snug:    1.4;
    --leading-base:    1.6;
    --leading-relaxed: 1.8;   /* minimum for Hebrew body text */
    --leading-loose:   2;

    --tracking-tighter: -0.04em;
    --tracking-tight:   -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.08em;
    --tracking-wider:   0.1em;

    /* Font stacks — override these two to rebrand typography. */
    --font-he-body:    'Heebo', system-ui, sans-serif;
    --font-he-display: 'Frank Ruhl Libre', Georgia, serif;
    --font-en-body:    'Inter', system-ui, sans-serif;
    --font-en-display: 'Playfair Display', Georgia, serif;
    --font-mono:       ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

    /* ── §1.7 Spacing (8pt grid) ──────────────────────────────────────── */
    --space-0:  0;
    --space-1:  0.25rem;  /* 4px  */
    --space-2:  0.5rem;   /* 8px  */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    /* ── §1.8 Sizing ──────────────────────────────────────────────────── */
    --size-dot:       0.375rem;  /*  6px */
    --size-icon-sm:   2rem;      /* 32px */
    --size-icon-md:   2.5rem;    /* 40px */
    --size-icon-lg:   3rem;      /* 48px */
    --size-control:   2.75rem;   /* 44px — minimum touch target (WCAG 2.5.5) */
    --size-avatar-sm: 2rem;
    --size-avatar-md: 2.5rem;
    --size-avatar-lg: 4rem;
    --size-border:    1px;
    --size-border-strong: 1.5px;
    --size-ring:      3px;

    --radius-xs:   0.25rem;  /*  4px */
    --radius-sm:   0.375rem; /*  6px */
    --radius-md:   0.625rem; /* 10px */
    --radius-lg:   1rem;     /* 16px */
    --radius-xl:   1.5rem;   /* 24px */
    --radius-pill: 9999px;
    --radius-circle: 50%;

    /* ── §1.9 Theme strength scalars ──────────────────────────────────────
       These are the ONLY values that must be redeclared per theme, because
       light-dark() accepts colors only — not percentages or keywords. */
    --mix-shade:          black;  /* hover darkens in light mode */
    --alpha-subtle:       12%;    /* tint strength of *-subtle fills */
    --alpha-shadow:       10%;    /* base shadow opacity */
    --alpha-shadow-brand: 25%;

    /* ── §1.10 Elevation — derived, never hardcoded ───────────────────── */
    --color-shadow: light-dark(oklch(18% 0.02 250), oklch(0% 0 0));

    --shadow-sm:
      0 1px 3px color-mix(in oklch, var(--color-shadow) calc(var(--alpha-shadow) * 0.8), transparent),
      0 1px 2px color-mix(in oklch, var(--color-shadow) calc(var(--alpha-shadow) * 0.5), transparent);
    --shadow-md:
      0 4px 12px color-mix(in oklch, var(--color-shadow) var(--alpha-shadow), transparent),
      0 2px 4px  color-mix(in oklch, var(--color-shadow) calc(var(--alpha-shadow) * 0.6), transparent);
    --shadow-lg:
      0 12px 32px color-mix(in oklch, var(--color-shadow) calc(var(--alpha-shadow) * 1.2), transparent),
      0 4px 8px   color-mix(in oklch, var(--color-shadow) calc(var(--alpha-shadow) * 0.6), transparent);
    --shadow-xl:
      0 24px 64px color-mix(in oklch, var(--color-shadow) calc(var(--alpha-shadow) * 1.4), transparent),
      0 8px 16px  color-mix(in oklch, var(--color-shadow) calc(var(--alpha-shadow) * 0.8), transparent);
    /* Derived from --color-brand, so rebranding updates the glow for free. */
    --shadow-brand:
      0 4px 20px color-mix(in oklch, var(--color-brand) var(--alpha-shadow-brand), transparent);

    /* ── §1.11 Motion ─────────────────────────────────────────────────── */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);
    --duration-fast:  120ms;
    --duration-base:  220ms;
    --duration-slow:  380ms;
    --duration-xslow: 600ms;

    /* ── §1.12 Layout ─────────────────────────────────────────────────── */
    --container-sm:  40rem;   /*  640px */
    --container-md:  48rem;   /*  768px */
    --container-lg:  64rem;   /* 1024px */
    --container-xl:  80rem;   /* 1280px */
    --container-2xl: 90rem;   /* 1440px */
    --measure:       65ch;    /* max readable line length */

    /* Breakpoints. CSS custom properties cannot be used inside @media, so
       these exist for documentation and for JS (getComputedStyle) only.
       The literal values below are mirrored in every media query in §3. */
    --bp-sm:  40rem;   /*  640px */
    --bp-md:  48rem;   /*  768px */
    --bp-lg:  64rem;   /* 1024px */
    --bp-xl:  80rem;   /* 1280px */

    /* ── §1.13 Z-index — ordered by real stacking need ────────────────────
       BUGFIX v2: sticky used to outrank modal (50 vs 30), so a sticky nav
       rendered on top of open dialogs. */
    --z-base:    0;
    --z-raised:  10;
    --z-sticky:  20;
    --z-overlay: 30;
    --z-modal:   40;
    --z-toast:   50;
    --z-max:     60;
  }

  /* Per-theme scalar overrides — the only duplicated block in the system. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --mix-shade:          white;  /* on dark, hover must LIGHTEN */
      --alpha-subtle:       18%;
      --alpha-shadow:       38%;
      --alpha-shadow-brand: 40%;
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --mix-shade:          white;
    --alpha-subtle:       18%;
    --alpha-shadow:       38%;
    --alpha-shadow-brand: 40%;
  }

  :root[data-theme="light"] { color-scheme: light; }

  /* Mirror horizontal motion for right-to-left reading. */
  [dir="rtl"] { --flow-dir: -1; }
}


/* ============================================================================
   §2  BASE — element defaults, typography, RTL
   ========================================================================= */
@layer base {

  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--leading-base);
    font-family: var(--font-en-body);
  }

  /* §2.1 — Language-driven typography.
     :lang() inherits, so <html lang="he"> is enough for a whole page, and a
     nested <section lang="en"> switches just that subtree. */
  :lang(he) {
    font-family: var(--font-he-body);
    line-height: var(--leading-relaxed);
    letter-spacing: 0.01em;
  }

  :lang(he) h1, :lang(he) h2, :lang(he) .display {
    font-family: var(--font-he-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }

  :lang(en) {
    font-family: var(--font-en-body);
    line-height: var(--leading-base);
  }

  :lang(en) h1, :lang(en) h2, :lang(en) .display {
    font-family: var(--font-en-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
  }

  h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); }
  h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
  h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); }
  h4 { font-size: var(--text-xl);  line-height: var(--leading-snug); }
  h5 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); }
  h6 { font-size: var(--text-base); font-weight: var(--weight-semibold); }

  h3, h4, h5, h6 { font-weight: var(--weight-semibold); }

  p, li { font-size: var(--text-base); }

  strong, b { font-weight: var(--weight-semibold); }

  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: isolate;
  }

  code:not(pre code) {
    background: var(--color-surface-raised);
    border: var(--size-border) solid var(--color-border);
    border-radius: var(--radius-xs);
    padding: 0.1em 0.35em;
  }

  hr {
    border: none;
    border-block-start: var(--size-border) solid var(--color-border);
    margin-block: var(--space-8);
  }

  blockquote {
    border-inline-start: 3px solid var(--color-brand);
    padding-inline-start: var(--space-5);
    color: var(--color-text-muted);
  }

  ::selection {
    background: var(--color-brand-subtle);
    color: var(--color-text);
  }

  ::placeholder { color: var(--color-text-faint); opacity: 1; }

  /* §2.2 — Global focus ring. Never remove it; only ever restyle it. */
  :focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  /* §2.3 — Bidi helpers */
  .mixed-text  { unicode-bidi: plaintext; text-align: start; }
  .ltr-isolate { direction: ltr; unicode-bidi: isolate; display: inline-block; }
  .rtl-isolate { direction: rtl; unicode-bidi: isolate; display: inline-block; }
  .nums        { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

  /* §2.4 — Directional icons must mirror; symbolic ones must not. */
  [dir="rtl"] .icon-directional { transform: scaleX(-1); }
  [dir="rtl"] .icon-logo,
  [dir="rtl"] .icon-star,
  [dir="rtl"] .icon-heart,
  [dir="rtl"] .icon-check { transform: none; }
}


/* ============================================================================
   §3  LAYOUT
   ========================================================================= */
@layer layout {

  .container {
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--space-6);
  }

  .container-narrow { max-width: var(--container-md); }
  .container-wide   { max-width: var(--container-2xl); }

  /* Mobile-first throughout — v1 mixed min-width and max-width queries. */
  @media (min-width: 48rem) {
    .container { padding-inline: var(--space-10); }
  }
  @media (min-width: 80rem) {
    .container { padding-inline: var(--space-16); }
  }

  .section       { padding-block: clamp(var(--space-12), 8vw, var(--space-24)); }
  .section-tight { padding-block: clamp(var(--space-8), 5vw, var(--space-16)); }
  .section-alt   { background: var(--color-surface-sunken); }

  /* §3.1 — Grids.
     Component grids use container queries so a card grid reflows by the width
     of ITS OWN container, not the viewport. Drop one into a sidebar and it
     still behaves. */
  .grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
    gap: var(--space-6);
  }

  .grid-2, .grid-3, .grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    container-type: inline-size;
  }
  .grid-4 { gap: var(--space-5); }

  @media (min-width: 48rem) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 64rem) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
  }

  /* §3.2 — Flow primitives */
  .stack   { display: flex; flex-direction: column; gap: var(--space-4); }
  .stack-sm { gap: var(--space-2); }
  .stack-lg { gap: var(--space-8); }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .prose { max-width: var(--measure); }
  .prose > * + * { margin-block-start: var(--space-4); }
}


/* ============================================================================
   §4  COMPONENTS
   ========================================================================= */
@layer components {

  /* ── §4.1 Button ──────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--size-control);
    padding: var(--space-3) var(--space-6);
    border: var(--size-border-strong) solid transparent;
    border-radius: var(--radius-md);
    background: none;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition:
      background-color var(--duration-fast) var(--ease-out-quart),
      border-color     var(--duration-fast) var(--ease-out-quart),
      color            var(--duration-fast) var(--ease-out-quart),
      box-shadow       var(--duration-fast) var(--ease-out-quart),
      transform        var(--duration-fast) var(--ease-out-quart);
  }

  .btn:active { transform: scale(0.98); }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .btn[aria-busy="true"] {
    cursor: progress;
    pointer-events: none;
  }

  .btn[aria-busy="true"]::before {
    content: '';
    inline-size: 0.9em;
    block-size: 0.9em;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--radius-circle);
    animation: spin var(--duration-xslow) linear infinite;
  }

  .btn-primary {
    background: var(--color-brand);
    color: var(--color-text-inverse);
    border-color: var(--color-brand);
  }
  .btn-primary:hover:not(:disabled) {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
    box-shadow: var(--shadow-brand);
  }
  .btn-primary:active:not(:disabled) { background: var(--color-brand-active); }

  .btn-secondary {
    color: var(--color-brand-text);
    border-color: var(--color-brand-border);
  }
  .btn-secondary:hover:not(:disabled) {
    background: var(--color-brand-subtle);
    border-color: var(--color-brand);
  }

  .btn-ghost {
    color: var(--color-text-muted);
    border-color: var(--color-border);
  }
  .btn-ghost:hover:not(:disabled) {
    background: var(--color-surface-raised);
    color: var(--color-text);
    border-color: var(--color-border-strong);
  }

  .btn-bare {
    color: var(--color-text-muted);
    border-color: transparent;
    padding-inline: var(--space-3);
  }
  .btn-bare:hover:not(:disabled) {
    background: var(--color-surface-raised);
    color: var(--color-text);
  }

  .btn-danger {
    background: var(--color-error);
    color: var(--color-text-inverse);
    border-color: var(--color-error);
  }
  .btn-danger:hover:not(:disabled) {
    background: var(--color-error-hover);
    border-color: var(--color-error-hover);
  }
  .btn-danger:focus-visible { outline-color: var(--color-error); }

  .btn-sm {
    min-block-size: auto;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
  }
  .btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
    border-radius: var(--radius-lg);
  }
  .btn-pill  { border-radius: var(--radius-pill); }
  .btn-block { display: flex; inline-size: 100%; }

  .btn-icon {
    padding: var(--space-3);
    inline-size: var(--size-control);
    block-size: var(--size-control);
  }
  .btn-icon.btn-sm {
    inline-size: var(--size-icon-sm);
    block-size: var(--size-icon-sm);
    padding: var(--space-2);
  }

  /* ── §4.2 Forms ──────────────────────────────────────────────────────── */
  .form-group { display: flex; flex-direction: column; gap: var(--space-2); }

  .form-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
  }
  .form-label[data-required]::after {
    content: ' *';
    color: var(--color-error-text);
  }

  .form-input,
  .form-select,
  .form-textarea {
    inline-size: 100%;
    min-block-size: var(--size-control);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    color: var(--color-text);
    border: var(--size-border-strong) solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-base);
    transition:
      border-color var(--duration-fast) var(--ease-out-quart),
      box-shadow   var(--duration-fast) var(--ease-out-quart);
  }

  .form-textarea { min-block-size: 6rem; resize: vertical; }

  .form-select {
    appearance: none;
    padding-inline-end: var(--space-10);
    /* Chevron drawn with a gradient so no image asset or icon font is needed.
       inset-inline-end positions it correctly in both directions. */
    background-image:
      linear-gradient(45deg,  transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
      calc(100% - var(--space-5)) center,
      calc(100% - var(--space-4)) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
  [dir="rtl"] .form-select {
    background-position:
      var(--space-4) center,
      var(--space-5) center;
  }

  .form-input:hover:not(:disabled),
  .form-select:hover:not(:disabled),
  .form-textarea:hover:not(:disabled) {
    border-color: var(--color-border-strong);
  }

  /* v1 used `outline: none` on :focus, which silently violated the system's
     own accessibility rule. The ring below REPLACES the outline only for
     pointer focus; keyboard focus still gets the global outline too. */
  .form-input:focus-visible,
  .form-select:focus-visible,
  .form-textarea:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 1px;
    border-color: var(--color-brand);
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 var(--size-ring) var(--color-brand-border);
  }

  .form-input:disabled,
  .form-select:disabled,
  .form-textarea:disabled {
    background: var(--color-surface-sunken);
    color: var(--color-text-faint);
    cursor: not-allowed;
    border-color: var(--color-border);
  }

  .form-input[aria-invalid="true"],
  .form-select[aria-invalid="true"],
  .form-textarea[aria-invalid="true"] {
    border-color: var(--color-error);
  }
  .form-input[aria-invalid="true"]:focus,
  .form-textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 var(--size-ring) var(--color-error-subtle);
  }

  .form-hint  { font-size: var(--text-xs); color: var(--color-text-faint); }
  .form-error { font-size: var(--text-xs); color: var(--color-error-text); font-weight: var(--weight-medium); }

  .form-check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
  }
  .form-check input[type="checkbox"],
  .form-check input[type="radio"] {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    accent-color: var(--color-brand);
    cursor: pointer;
    flex-shrink: 0;
  }
  .form-check:has(input:disabled) { cursor: not-allowed; opacity: 0.5; }

  /* ── §4.3 Card ───────────────────────────────────────────────────────── */
  .card {
    background: var(--color-surface);
    border: var(--size-border) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition:
      box-shadow   var(--duration-base) var(--ease-out-quart),
      border-color var(--duration-base) var(--ease-out-quart),
      transform    var(--duration-base) var(--ease-out-quart);
  }

  .card-interactive { cursor: pointer; }
  .card-interactive:hover,
  .card-interactive:focus-within {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-border-strong);
    transform: translateY(-2px);
  }

  .card-featured {
    border: 2px solid var(--color-brand);
    box-shadow: var(--shadow-brand);
    position: relative;
  }

  .card-raised { box-shadow: var(--shadow-md); border-color: transparent; }

  .card-glass {
    background: var(--color-glass-bg);
    border-color: var(--color-glass-border);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));
  }
  /* Fallback: without backdrop-filter the glass would be unreadably thin. */
  @supports not (backdrop-filter: blur(1px)) {
    .card-glass { background: var(--color-surface); }
  }

  .card-pad-lg { padding: var(--space-8); }

  /* ── §4.4 Badge ──────────────────────────────────────────────────────────
     v1 forced a dot on every badge with a `.no-dot` escape hatch. Inverted:
     the dot is now opt-in via `.badge-dot`, which is what most tags want. */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: var(--size-border) solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    white-space: nowrap;
  }

  .badge-dot::before {
    content: '';
    inline-size: var(--size-dot);
    block-size: var(--size-dot);
    border-radius: var(--radius-circle);
    background: currentColor;
    flex-shrink: 0;
  }

  .badge-brand   { background: var(--color-brand-subtle);   color: var(--color-brand-text);   }
  .badge-accent  { background: var(--color-accent-subtle);  color: var(--color-accent-text);  }
  .badge-success { background: var(--color-success-subtle); color: var(--color-success-text); }
  .badge-warning { background: var(--color-warning-subtle); color: var(--color-warning-text); }
  .badge-error   { background: var(--color-error-subtle);   color: var(--color-error-text);   }
  .badge-info    { background: var(--color-info-subtle);    color: var(--color-info-text);    }
  .badge-neutral {
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    border-color: var(--color-border);
  }
  .badge-solid   { background: var(--color-brand); color: var(--color-text-inverse); }

  /* ── §4.5 Alert ──────────────────────────────────────────────────────── */
  .alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: var(--size-border) solid transparent;
    border-inline-start-width: 3px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
  }
  .alert-title { font-weight: var(--weight-semibold); margin-block-end: var(--space-1); }
  .alert-info    { background: var(--color-info-subtle);    border-color: var(--color-info);    color: var(--color-info-text); }
  .alert-success { background: var(--color-success-subtle); border-color: var(--color-success); color: var(--color-success-text); }
  .alert-warning { background: var(--color-warning-subtle); border-color: var(--color-warning); color: var(--color-warning-text); }
  .alert-error   { background: var(--color-error-subtle);   border-color: var(--color-error);   color: var(--color-error-text); }

  /* ── §4.6 Navigation ─────────────────────────────────────────────────── */
  .nav {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background: var(--color-surface);
    border-block-end: var(--size-border) solid transparent;
    transition:
      background-color var(--duration-base) var(--ease-out-quart),
      border-color     var(--duration-base) var(--ease-out-quart),
      box-shadow       var(--duration-base) var(--ease-out-quart);
  }

  /* Toggled by JS once the hero scrolls out of view. */
  .nav.is-scrolled {
    background: var(--color-glass-bg);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));
    border-block-end-color: var(--color-border);
    box-shadow: var(--shadow-sm);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .nav.is-scrolled { background: var(--color-surface); }
  }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-4);
  }

  .nav-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-decoration: none;
    color: var(--color-text);
    letter-spacing: var(--tracking-tight);
  }

  .nav-links {
    display: none;
    align-items: center;
    gap: var(--space-6);
    list-style: none;
  }

  .nav-link {
    position: relative;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    padding-block: var(--space-2);
    transition: color var(--duration-fast) var(--ease-out-quart);
  }
  .nav-link:hover { color: var(--color-text); }
  .nav-link[aria-current="page"] { color: var(--color-brand-text); }
  .nav-link[aria-current="page"]::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background: var(--color-brand);
    border-radius: var(--radius-pill);
  }

  .nav-toggle { display: inline-flex; }

  @media (min-width: 64rem) {
    .nav-links  { display: flex; }
    .nav-toggle { display: none; }
  }

  /* Mobile drawer — a <dialog> so the browser handles focus trapping,
     Escape, and inertness of the page behind it. */
  .nav-drawer {
    inline-size: min(20rem, 85vw);
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    margin-inline-start: auto;   /* slides in from the reading-end edge */
    padding: var(--space-6);
    border: none;
    border-inline-start: var(--size-border) solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
  }
  .nav-drawer::backdrop {
    background: color-mix(in oklch, var(--color-shadow) 45%, transparent);
    backdrop-filter: blur(2px);
  }
  .nav-drawer .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    margin-block-start: var(--space-8);
  }
  .nav-drawer .nav-link {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
  }
  .nav-drawer .nav-link:hover { background: var(--color-surface-raised); }
  .nav-drawer .nav-link[aria-current="page"]::after { content: none; }

  /* ── §4.7 Hero ───────────────────────────────────────────────────────── */
  .hero {
    padding-block: clamp(var(--space-16), 12vw, var(--space-24));
    text-align: center;
  }
  .hero-left { text-align: start; }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-brand-text);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-block-end: var(--space-5);
  }

  .hero-headline {
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-text);
    /* Hebrew words run longer than English ones — 16ch wraps too early. */
    max-inline-size: 20ch;
    margin-inline: auto;
    margin-block-end: var(--space-6);
  }
  :lang(en) .hero-headline { max-inline-size: 16ch; }
  .hero-left .hero-headline { margin-inline: 0; }

  .hero-subheadline {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    max-inline-size: 55ch;
    margin-inline: auto;
    margin-block-end: var(--space-8);
  }
  .hero-left .hero-subheadline { margin-inline: 0; }

  .hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .hero-left .hero-actions { justify-content: flex-start; }

  /* ── §4.8 Section header ─────────────────────────────────────────────── */
  .section-header {
    text-align: center;
    max-inline-size: var(--container-sm);
    margin-inline: auto;
    margin-block-end: clamp(var(--space-10), 6vw, var(--space-16));
  }

  .section-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-brand-text);
    margin-block-end: var(--space-3);
  }

  .section-title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin-block-end: var(--space-4);
  }

  .section-description {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
  }

  /* ── §4.9 Feature card ───────────────────────────────────────────────── */
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
    gap: var(--space-6);
  }

  .feature-card {
    padding: var(--space-8);
    background: var(--color-surface);
    border: var(--size-border) solid var(--color-border);
    border-radius: var(--radius-lg);
    transition:
      box-shadow var(--duration-base) var(--ease-out-quart),
      transform  var(--duration-base) var(--ease-out-quart);
  }
  .feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
  }

  .feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-icon-lg);
    block-size: var(--size-icon-lg);
    border-radius: var(--radius-md);
    background: var(--color-brand-subtle);
    color: var(--color-brand-text);
    font-size: var(--text-xl);
    margin-block-end: var(--space-5);
  }

  .feature-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-block-end: var(--space-3);
  }

  .feature-description {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
  }

  /* ── §4.10 Testimonial ───────────────────────────────────────────────── */
  .testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
    gap: var(--space-5);
  }

  .testimonial-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: var(--size-border) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
  }

  /* Stars are decorative glyphs. Mark the container aria-hidden and put the
     real rating in adjacent visually-hidden text. */
  .testimonial-stars {
    color: var(--color-accent);
    font-size: var(--text-sm);
    letter-spacing: 2px;
    margin-block-end: var(--space-4);
  }

  /* Reset the base <blockquote> rule — a testimonial card is already framed,
     and the extra brand bar was inherited, not designed. */
  .testimonial-quote {
    border: none;
    padding-inline: 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    font-style: italic;
    margin-block-end: var(--space-5);
    flex-grow: 1;
  }

  .testimonial-author { display: flex; align-items: center; gap: var(--space-3); }
  .testimonial-name   { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .testimonial-role   { font-size: var(--text-xs); color: var(--color-text-muted); }

  /* ── §4.11 Avatar ────────────────────────────────────────────────────── */
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--size-avatar-md);
    block-size: var(--size-avatar-md);
    border-radius: var(--radius-circle);
    background: var(--color-brand-subtle);
    color: var(--color-brand-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    overflow: hidden;
    flex-shrink: 0;
  }
  .avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .avatar-sm { inline-size: var(--size-avatar-sm); block-size: var(--size-avatar-sm); font-size: var(--text-xs); }
  .avatar-lg { inline-size: var(--size-avatar-lg); block-size: var(--size-avatar-lg); font-size: var(--text-lg); }

  /* ── §4.12 Modal — native <dialog> ───────────────────────────────────── */
  .modal {
    inline-size: min(32rem, calc(100vw - var(--space-8)));
    max-block-size: min(85dvh, 48rem);
    padding: 0;
    border: var(--size-border) solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-xl);
  }
  .modal::backdrop {
    background: color-mix(in oklch, var(--color-shadow) 50%, transparent);
    backdrop-filter: blur(3px);
  }
  .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6);
    border-block-end: var(--size-border) solid var(--color-border);
  }
  .modal-title { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
  .modal-body  { padding: var(--space-6); overflow-y: auto; }
  .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-block-start: var(--size-border) solid var(--color-border);
    background: var(--color-surface-raised);
  }
  .modal-wide { inline-size: min(56rem, calc(100vw - var(--space-8))); }

  /* ── §4.13 Toast ─────────────────────────────────────────────────────── */
  .toast-region {
    position: fixed;
    inset-block-end: var(--space-6);
    inset-inline-end: var(--space-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    inline-size: min(24rem, calc(100vw - var(--space-8)));
    pointer-events: none;
  }
  .toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: var(--size-border) solid var(--color-border);
    border-inline-start: 3px solid var(--color-brand);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    pointer-events: auto;
    animation: toast-in var(--duration-base) var(--ease-out-expo);
  }
  .toast-success { border-inline-start-color: var(--color-success); }
  .toast-error   { border-inline-start-color: var(--color-error); }
  .toast-warning { border-inline-start-color: var(--color-warning); }
  .toast-body    { flex-grow: 1; }
  .toast-title   { font-weight: var(--weight-semibold); }

  /* ── §4.14 Dropdown / menu ───────────────────────────────────────────── */
  .dropdown { position: relative; display: inline-block; }

  .menu {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-start: 0;
    z-index: var(--z-overlay);
    min-inline-size: 12rem;
    padding: var(--space-2);
    background: var(--color-surface);
    border: var(--size-border) solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    list-style: none;
  }
  .menu[hidden] { display: none; }
  .menu-end { inset-inline-start: auto; inset-inline-end: 0; }

  .menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    font-size: var(--text-sm);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out-quart);
  }
  .menu-item:hover { background: var(--color-surface-raised); }
  .menu-item[aria-checked="true"] { color: var(--color-brand-text); font-weight: var(--weight-medium); }
  .menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
  .menu-separator { block-size: var(--size-border); background: var(--color-border); margin-block: var(--space-2); }

  /* ── §4.15 Accordion ─────────────────────────────────────────────────── */
  .accordion { border-block-start: var(--size-border) solid var(--color-border); }

  .accordion-item { border-block-end: var(--size-border) solid var(--color-border); }

  .accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    inline-size: 100%;
    padding: var(--space-5) var(--space-1);
    border: none;
    background: none;
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    text-align: start;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out-quart);
  }
  .accordion-trigger:hover { color: var(--color-brand-text); }

  /* A chevron built from two borders. The border pair is logical, so in RTL
     it lands on the opposite corner — which means the rotation must flip too,
     otherwise the arrow points sideways instead of down. */
  .accordion-trigger::after {
    content: '';
    inline-size: 0.5em;
    block-size: 0.5em;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    rotate: calc(45deg * var(--flow-dir));
    flex-shrink: 0;
    transition: rotate var(--duration-base) var(--ease-out-quart);
  }
  .accordion-trigger[aria-expanded="true"]::after { rotate: calc(-135deg * var(--flow-dir)); }

  .accordion-panel {
    padding-block-end: var(--space-5);
    padding-inline: var(--space-1);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    max-inline-size: var(--measure);
  }
  .accordion-panel[hidden] { display: none; }

  /* ── §4.16 Tabs ──────────────────────────────────────────────────────── */
  .tablist {
    display: flex;
    gap: var(--space-1);
    border-block-end: var(--size-border) solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tablist::-webkit-scrollbar { display: none; }

  .tab {
    padding: var(--space-3) var(--space-5);
    border: none;
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    background: none;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition:
      color var(--duration-fast) var(--ease-out-quart),
      border-color var(--duration-fast) var(--ease-out-quart);
  }
  .tab:hover { color: var(--color-text); }
  .tab[aria-selected="true"] {
    color: var(--color-brand-text);
    border-block-end-color: var(--color-brand);
  }
  .tabpanel { padding-block-start: var(--space-6); }
  .tabpanel[hidden] { display: none; }

  /* ── §4.17 Tooltip ───────────────────────────────────────────────────── */
  .tooltip-host { position: relative; display: inline-flex; }

  .tooltip {
    position: absolute;
    inset-block-end: calc(100% + var(--space-2));
    inset-inline-start: 50%;
    translate: calc(-50% * var(--flow-dir)) 0;
    z-index: var(--z-overlay);
    padding: var(--space-2) var(--space-3);
    background: var(--color-text);
    color: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out-quart);
  }
  .tooltip-host:hover .tooltip,
  .tooltip-host:focus-within .tooltip { opacity: 1; }

  /* ── §4.18 Table ─────────────────────────────────────────────────────── */
  .table-wrap {
    overflow-x: auto;
    border: var(--size-border) solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .table { inline-size: 100%; font-size: var(--text-sm); }

  .table th,
  .table td {
    padding: var(--space-3) var(--space-5);
    text-align: start;
    border-block-end: var(--size-border) solid var(--color-border);
  }
  .table thead th {
    background: var(--color-surface-raised);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
  }
  .table tbody tr:last-child td { border-block-end: none; }
  .table tbody tr:hover { background: var(--color-surface-raised); }
  .table td.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

  /* ── §4.19 Pagination & breadcrumb ───────────────────────────────────── */
  .pagination { display: flex; align-items: center; gap: var(--space-1); list-style: none; }
  .pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--size-icon-sm);
    block-size: var(--size-icon-sm);
    padding-inline: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out-quart);
  }
  .pagination-item:hover { background: var(--color-surface-raised); color: var(--color-text); }
  .pagination-item[aria-current="page"] {
    background: var(--color-brand);
    color: var(--color-text-inverse);
    font-weight: var(--weight-semibold);
  }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }
  .breadcrumb li + li::before {
    content: '/';
    margin-inline-end: var(--space-2);
    color: var(--color-text-faint);
  }
  .breadcrumb a { text-decoration: none; }
  .breadcrumb a:hover { color: var(--color-text); text-decoration: underline; }

  /* ── §4.20 Pricing ───────────────────────────────────────────────────── */
  .price {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    margin-block: var(--space-4);
  }
  .price-amount {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
  }
  .price-period { font-size: var(--text-sm); color: var(--color-text-muted); }

  .price-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
  .price-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }
  .price-list li::before {
    content: '✓';
    color: var(--color-success-text);
    font-weight: var(--weight-bold);
    flex-shrink: 0;
  }

  .card-featured-ribbon {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    translate: calc(-50% * var(--flow-dir)) -50%;
  }

  /* ── §4.21 Skeleton ──────────────────────────────────────────────────── */
  .skeleton {
    background: linear-gradient(
      90deg,
      var(--color-surface-raised) 25%,
      var(--color-border) 50%,
      var(--color-surface-raised) 75%
    );
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton-sweep 1.4s ease-in-out infinite;
  }
  .skeleton-text { block-size: 0.8em; margin-block: 0.2em; }
  .skeleton-circle { border-radius: var(--radius-circle); }

  /* ── §4.22 Footer ────────────────────────────────────────────────────── */
  .footer {
    background: var(--color-surface-sunken);
    border-block-start: var(--size-border) solid var(--color-border);
    padding-block: var(--space-16) var(--space-8);
    font-size: var(--text-sm);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: var(--space-10);
    margin-block-end: var(--space-12);
  }
  .footer-heading {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text);
    margin-block-end: var(--space-4);
  }
  .footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
  .footer-link {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out-quart);
  }
  .footer-link:hover { color: var(--color-text); }
  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block-start: var(--space-6);
    border-block-start: var(--size-border) solid var(--color-border);
    color: var(--color-text-faint);
    font-size: var(--text-xs);
  }

  /* ── §4.23 Divider ───────────────────────────────────────────────────── */
  .divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text-faint);
    font-size: var(--text-xs);
  }
  .divider::before,
  .divider::after {
    content: '';
    flex-grow: 1;
    block-size: var(--size-border);
    background: var(--color-border);
  }
}


/* ============================================================================
   §5  UTILITIES — motion, accessibility, print
   ========================================================================= */
@layer utilities {

  /* ── §5.1 Keyframes ──────────────────────────────────────────────────────
     Horizontal offsets are multiplied by --flow-dir so RTL enters from the
     correct side. v1's `slide-in-start` used a raw translateX(-20px), which
     made RTL content fly in from the wrong edge. */
  @keyframes fade-up {
    from { opacity: 0; translate: 0 1rem; }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes slide-in-start {
    from { opacity: 0; translate: calc(-1.25rem * var(--flow-dir)) 0; }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes slide-in-end {
    from { opacity: 0; translate: calc(1.25rem * var(--flow-dir)) 0; }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes scale-in {
    from { opacity: 0; scale: 0.95; }
    to   { opacity: 1; scale: 1; }
  }
  @keyframes spin {
    to { rotate: 360deg; }
  }
  @keyframes skeleton-sweep {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }
  @keyframes toast-in {
    from { opacity: 0; translate: 0 0.5rem; scale: 0.98; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
  }

  .animate-fade-up       { animation: fade-up var(--duration-slow) var(--ease-out-expo) both; }
  .animate-fade-in       { animation: fade-in var(--duration-slow) var(--ease-out-quart) both; }
  .animate-slide-in      { animation: slide-in-start var(--duration-slow) var(--ease-out-expo) both; }
  .animate-slide-in-end  { animation: slide-in-end var(--duration-slow) var(--ease-out-expo) both; }
  .animate-scale-in      { animation: scale-in var(--duration-base) var(--ease-out-back) both; }

  .delay-1 { animation-delay: 80ms;  }
  .delay-2 { animation-delay: 160ms; }
  .delay-3 { animation-delay: 240ms; }
  .delay-4 { animation-delay: 320ms; }
  .delay-5 { animation-delay: 400ms; }

  /* ── §5.2 Scroll reveal — pair with the IntersectionObserver snippet ─── */
  [data-animate] {
    opacity: 0;
    translate: 0 1.25rem;
    transition:
      opacity   var(--duration-slow) var(--ease-out-expo),
      translate var(--duration-slow) var(--ease-out-expo);
  }
  [data-animate].is-visible { opacity: 1; translate: 0 0; }

  [data-animate]:nth-child(2) { transition-delay: 80ms;  }
  [data-animate]:nth-child(3) { transition-delay: 160ms; }
  [data-animate]:nth-child(4) { transition-delay: 240ms; }
  [data-animate]:nth-child(5) { transition-delay: 320ms; }

  /* ── §5.3 Accessibility ──────────────────────────────────────────────── */
  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    inset-block-start: calc(var(--space-4) * -1);
    inset-inline-start: var(--space-4);
    z-index: var(--z-max);
    padding: var(--space-3) var(--space-5);
    background: var(--color-brand);
    color: var(--color-text-inverse);
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    translate: 0 -200%;
    transition: translate var(--duration-fast) var(--ease-out-quart);
  }
  .skip-link:focus { translate: 0 calc(var(--space-8)); }

  /* ── §5.4 Text utilities ─────────────────────────────────────────────── */
  .text-xs   { font-size: var(--text-xs); }
  .text-sm   { font-size: var(--text-sm); }
  .text-base { font-size: var(--text-base); }
  .text-lg   { font-size: var(--text-lg); }
  .text-xl   { font-size: var(--text-xl); }
  .text-2xl  { font-size: var(--text-2xl); }
  .text-3xl  { font-size: var(--text-3xl); }
  .text-4xl  { font-size: var(--text-4xl); }

  .text-muted   { color: var(--color-text-muted); }
  .text-faint   { color: var(--color-text-faint); }
  .text-brand   { color: var(--color-brand-text); }
  .text-success { color: var(--color-success-text); }
  .text-error   { color: var(--color-error-text); }

  .text-start  { text-align: start; }
  .text-center { text-align: center; }
  .text-end    { text-align: end; }
  .text-balance { text-wrap: balance; }
  .text-pretty  { text-wrap: pretty; }

  .font-medium   { font-weight: var(--weight-medium); }
  .font-semibold { font-weight: var(--weight-semibold); }
  .font-bold     { font-weight: var(--weight-bold); }

  .measure { max-inline-size: var(--measure); }

  /* ── §5.5 Reduced motion — a requirement, not a nicety ───────────────── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    [data-animate] { opacity: 1; translate: none; }
    .btn:active { transform: none; }
    .card-interactive:hover,
    .feature-card:hover { transform: none; }
    .skeleton { animation: none; }
  }

  /* ── §5.6 Forced colors (Windows High Contrast) ──────────────────────── */
  @media (forced-colors: active) {
    .btn, .card, .form-input, .badge, .modal {
      border: 1px solid ButtonBorder;
    }
    .btn-primary { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    :focus-visible { outline: 2px solid Highlight; }
    .skeleton { animation: none; background: Canvas; }
  }

  /* ── §5.7 Print ──────────────────────────────────────────────────────── */
  /* The only raw colors in the file, and deliberately so: print output must be
     ink-on-paper regardless of the screen theme, so it must NOT resolve
     through light-dark(). Any other raw hex in this file is a bug. */
  @media print {
    .nav, .footer, .toast-region, .skip-link, .btn { display: none !important; }
    body { background: #fff; color: #000; }
    .card, .feature-card { box-shadow: none; border: 1px solid #999; }
    a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
  }
}