/* ==========================================================================
   Editloft design system
   The reusable base for every plugin promo site in this fleet.

   Sections marked "PLUGIN-SPECIFIC" carry Editloft's own palette/voice and
   should be swapped per plugin. Everything else — the scale logic, the
   layout primitives, the component structure — is the reusable base.

   Architecture: cascade layers, low specificity throughout, custom
   properties as the single source of truth. No inline styles, no
   one-off hex in components below this file.
   ========================================================================== */

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


/* ==========================================================================
   FONTS
   Fraunces (display serif, headings) and JetBrains Mono (eyebrows, labels,
   status pills, code) are self-hosted variable fonts — both OFL. Drop the
   supplied woff2 files at the paths below and these activate automatically.

   Body copy uses Libre Franklin: a humanist grotesque with Franklin Gothic
   lineage, the same family tree many newsroom mastheads set body text in.
   It is declared as a progressive enhancement — if the woff2 file isn't
   present yet, the browser falls through to the system stack below it and
   nothing breaks. This keeps the base buildable before every asset lands.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-variable.woff2") format("woff2-variations"),
       url("fonts/fraunces-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic-variable.woff2") format("woff2-variations"),
       url("fonts/fraunces-italic-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-variable.woff2") format("woff2-variations"),
       url("fonts/jetbrains-mono-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/libre-franklin-variable.woff2") format("woff2-variations"),
       url("fonts/libre-franklin-variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   TOKENS
   ========================================================================== */

@layer tokens {
  :root {
    /* -- Brand colour primitives (PLUGIN-SPECIFIC) --------------------- */
    /* Navy is the confirmed, permanent brand colour. Kept as a literal hex,
       never converted to rgb()/oklch() notation. Do not "correct" it. */
    --color-navy: #123456;
    --color-copper: #b3652a;      /* matches the solid-square accent in the launch diagrams */
    --color-paper: #f6f1e6;       /* the diagrams' own background; used as the site's light paper tone */
    --color-slate: #4a5d6e;       /* the diagrams' secondary/muted ink */

    /* Deepened copper for solid interactive fills (buttons). Pure copper
       against paper text only clears WCAG AA at large/bold sizes (~3.9:1);
       this deepened value clears 4.5:1 with paper-coloured text on top,
       so small-size button labels stay compliant without diluting the
       accent everywhere else. */
    --color-copper-deep: color-mix(in oklch, var(--color-copper) 78%, black 22%);
    --color-copper-bright: color-mix(in oklch, var(--color-copper) 88%, white 12%);

    /* Neutral ramp, derived from navy so every neutral carries a slight
       cool bias rather than reaching for generic grey. */
    --color-ink-900: color-mix(in oklch, var(--color-navy) 92%, black 8%);
    --color-ink-800: color-mix(in oklch, var(--color-navy) 78%, black 22%);
    --color-ink-700: var(--color-navy);
    --color-ink-600: color-mix(in oklch, var(--color-navy) 70%, white 30%);
    --color-ink-500: color-mix(in oklch, var(--color-navy) 52%, white 48%);
    --color-ink-400: color-mix(in oklch, var(--color-navy) 34%, white 66%);
    --color-ink-300: color-mix(in oklch, var(--color-navy) 20%, white 80%);
    --color-ink-200: color-mix(in oklch, var(--color-navy) 11%, white 89%);
    --color-ink-100: color-mix(in oklch, var(--color-navy) 5%, white 95%);
    --color-ink-50:  color-mix(in oklch, var(--color-navy) 2%, white 98%);

    /* -- Semantic tokens (theme-neutral names; safe to reuse per plugin) - */
    --color-bg: var(--color-paper);
    --color-bg-elevated: #ffffff;
    --color-bg-inset: var(--color-ink-100);
    --color-text: var(--color-ink-900);
    --color-text-secondary: var(--color-slate);
    --color-text-on-accent: var(--color-paper);
    --color-border: var(--color-ink-200);
    --color-border-strong: var(--color-ink-400);
    --color-accent: var(--color-copper);
    --color-accent-strong: var(--color-copper-deep);
    --color-link: var(--color-navy);
    --color-link-hover: var(--color-copper-deep);
    --color-focus-ring: var(--color-copper-deep);

    /* Status-pill motif: WordPress's native statuses read as outlined,
       the custom statuses Editloft restores read as solid copper. Reused
       for any "native vs. added" distinction across the site, not only
       literal post statuses. */
    --color-status-native-fg: var(--color-navy);
    --color-status-native-border: var(--color-navy);
    --color-status-native-bg: transparent;
    --color-status-custom-fg: var(--color-paper);
    --color-status-custom-bg: var(--color-copper);

    /* Success/warn/error/info: kept quiet, editorial, not stoplight-bright */
    --color-success: #2f6b4f;
    --color-warn: #8a5a1f;
    --color-error: #8a2f2f;
    --color-info: var(--color-navy);

    /* -- Typography -------------------------------------------------- */
    --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, "SFMono-Regular", monospace;
    --font-body: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    /* Fluid modular scale, ~1.25 ratio, tuned between 320px and 1440px */
    --text--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --text-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --text-1:  clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
    --text-2:  clamp(1.375rem, 1.3rem + 0.4vw, 1.625rem);
    --text-3:  clamp(1.75rem, 1.6rem + 0.75vw, 2.125rem);
    --text-4:  clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
    --text-5:  clamp(2.75rem, 2.2rem + 2.75vw, 4.25rem);
    --text-6:  clamp(3.25rem, 2.4rem + 4.25vw, 5.5rem);

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-body: 1.6;
    --measure-body: 65ch;
    --measure-narrow: 45ch;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;
    --tracking-label: 0.12em;

    /* -- Spacing, 4px base grid --------------------------------------- */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    /* Section rhythm: fluid so large sections don't crowd on small
       viewports and don't feel thin on large ones. */
    --space-section: clamp(var(--space-16), 6vw + 2rem, var(--space-32));

    /* -- Radii ---------------------------------------------------------
       Deliberately restrained. Cards and blocks stay near-square, like
       print modules; only true "pill" components (status pills, tags,
       buttons) get a full radius. No rounded-lg-everywhere. */
    --radius-sm: 0.125rem;
    --radius-md: 0.25rem;
    --radius-pill: 999px;

    /* -- Shadows ---------------------------------------------------------
       Tinted with navy instead of flat black, at low opacity, single
       layer. Reads as a hairline lift, not a glossy SaaS card. */
    --shadow-sm: 0 1px 2px color-mix(in oklch, var(--color-navy) 14%, transparent);
    --shadow-md: 0 4px 12px color-mix(in oklch, var(--color-navy) 16%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in oklch, var(--color-navy) 18%, transparent);

    /* -- Containers ---------------------------------------------------- */
    --container-max: 75rem;   /* 1200px, standard content */
    --container-wide: 90rem;  /* 1440px, diagrams and full-bleed sections */
    --container-pad: clamp(var(--space-4), 4vw, var(--space-8));

    /* -- Motion ---------------------------------------------------------
       Default is zero animation. These exist only for the few
       interactions that use them (link/button state, focus). */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    color-scheme: light;
  }

  /* -- Dark mode ---------------------------------------------------------
     Not an inverted filter: a real second palette. The light theme reads
     as cream paper with navy ink; dark reads as its negative, a deep navy
     page with warm paper-toned ink, so the brand relationship (paper vs.
     ink) survives the switch instead of collapsing into generic slate. */
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;

      --color-ink-900: color-mix(in oklch, var(--color-paper) 94%, black 6%);
      --color-ink-800: color-mix(in oklch, var(--color-paper) 82%, black 18%);
      --color-ink-700: color-mix(in oklch, var(--color-paper) 66%, black 34%);
      --color-ink-600: color-mix(in oklch, var(--color-paper) 50%, black 50%);
      --color-ink-500: color-mix(in oklch, var(--color-navy) 55%, black 20%);
      --color-ink-400: color-mix(in oklch, var(--color-navy) 70%, black 12%);
      --color-ink-300: color-mix(in oklch, var(--color-navy) 82%, black 6%);
      --color-ink-200: color-mix(in oklch, var(--color-navy) 90%, black 4%);
      --color-ink-100: color-mix(in oklch, var(--color-navy) 96%, black 2%);
      --color-ink-50:  #0a1826;

      --color-bg: #0a1826;
      --color-bg-elevated: color-mix(in oklch, var(--color-navy) 88%, black 12%);
      --color-bg-inset: color-mix(in oklch, var(--color-navy) 80%, black 20%);
      --color-text: var(--color-ink-900);
      --color-text-secondary: color-mix(in oklch, var(--color-slate) 60%, var(--color-paper) 40%);
      --color-text-on-accent: var(--color-ink-900);
      --color-border: var(--color-ink-300);
      --color-border-strong: var(--color-ink-500);

      /* Pure copper on the dark navy page falls just under 3:1; this
         dark-mode variant is lifted toward white so large text, borders
         and icons using --color-accent still clear WCAG for UI/large text. */
      --color-accent: var(--color-copper-bright);
      --color-accent-strong: color-mix(in oklch, var(--color-copper-bright) 90%, white 10%);
      --color-link: color-mix(in oklch, var(--color-paper) 85%, var(--color-copper) 15%);
      --color-link-hover: var(--color-copper-bright);
      --color-focus-ring: var(--color-copper-bright);

      --color-status-native-fg: var(--color-ink-900);
      --color-status-native-border: var(--color-ink-500);
      --color-status-custom-fg: var(--color-ink-50);
      --color-status-custom-bg: var(--color-copper-bright);

      --shadow-sm: 0 1px 2px color-mix(in oklch, black 40%, transparent);
      --shadow-md: 0 4px 16px color-mix(in oklch, black 45%, transparent);
      --shadow-lg: 0 16px 40px color-mix(in oklch, black 50%, transparent);
    }
  }

  /* Explicit theme override, so a future toggle wins in either direction
     regardless of OS preference. Same values as the media query above. */
  :root[data-theme="dark"] {
    color-scheme: dark;

    --color-ink-900: color-mix(in oklch, var(--color-paper) 94%, black 6%);
    --color-ink-800: color-mix(in oklch, var(--color-paper) 82%, black 18%);
    --color-ink-700: color-mix(in oklch, var(--color-paper) 66%, black 34%);
    --color-ink-600: color-mix(in oklch, var(--color-paper) 50%, black 50%);
    --color-ink-500: color-mix(in oklch, var(--color-navy) 55%, black 20%);
    --color-ink-400: color-mix(in oklch, var(--color-navy) 70%, black 12%);
    --color-ink-300: color-mix(in oklch, var(--color-navy) 82%, black 6%);
    --color-ink-200: color-mix(in oklch, var(--color-navy) 90%, black 4%);
    --color-ink-100: color-mix(in oklch, var(--color-navy) 96%, black 2%);
    --color-ink-50:  #0a1826;

    --color-bg: #0a1826;
    --color-bg-elevated: color-mix(in oklch, var(--color-navy) 88%, black 12%);
    --color-bg-inset: color-mix(in oklch, var(--color-navy) 80%, black 20%);
    --color-text: var(--color-ink-900);
    --color-text-secondary: color-mix(in oklch, var(--color-slate) 60%, var(--color-paper) 40%);
    --color-text-on-accent: var(--color-ink-900);
    --color-border: var(--color-ink-300);
    --color-border-strong: var(--color-ink-500);

    --color-accent: var(--color-copper-bright);
    --color-accent-strong: color-mix(in oklch, var(--color-copper-bright) 90%, white 10%);
    --color-link: color-mix(in oklch, var(--color-paper) 85%, var(--color-copper) 15%);
    --color-link-hover: var(--color-copper-bright);
    --color-focus-ring: var(--color-copper-bright);

    --color-status-native-fg: var(--color-ink-900);
    --color-status-native-border: var(--color-ink-500);
    --color-status-custom-fg: var(--color-ink-50);
    --color-status-custom-bg: var(--color-copper-bright);

    --shadow-sm: 0 1px 2px color-mix(in oklch, black 40%, transparent);
    --shadow-md: 0 4px 16px color-mix(in oklch, black 45%, transparent);
    --shadow-lg: 0 16px 40px color-mix(in oklch, black 50%, transparent);
  }

  :root[data-theme="light"] {
    color-scheme: light;
    /* Falls through to the base :root values declared above; this
       selector exists purely so a toggle can force light against a
       dark OS preference. */
  }
}


/* ==========================================================================
   RESET
   ========================================================================== */

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

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

  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
    margin: 0;
  }

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

  img, picture, svg {
    max-width: 100%;
    display: block;
  }

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

  a { color: inherit; }

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


/* ==========================================================================
   BASE
   ========================================================================== */

@layer base {
  html {
    font-size: 100%;
    scroll-behavior: smooth;
  }

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

  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-0);
    line-height: var(--leading-body);
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    color: var(--color-ink-900);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  h1 { font-size: var(--text-5); }
  h2 { font-size: var(--text-4); }
  h3 { font-size: var(--text-3); }
  h4 { font-size: var(--text-2); }

  p {
    max-width: var(--measure-body);
    text-wrap: pretty;
  }

  p + p { margin-top: var(--space-4); }

  a {
    color: var(--color-link);
    text-decoration-thickness: from-font;
    text-underline-offset: 0.15em;
  }

  a:hover { color: var(--color-link-hover); }

  a:not([class]) {
    text-decoration-line: underline;
  }

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

  ::selection {
    background: var(--color-copper);
    color: var(--color-paper);
  }

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

  /* Skip link: visually hidden until focused */
  .skip-link {
    position: absolute;
    top: -3rem;
    left: var(--space-4);
    z-index: 100;
    background: var(--color-ink-900);
    color: var(--color-bg);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text--1);
    transition: top var(--duration-base) var(--ease-standard);
  }

  .skip-link:focus {
    top: var(--space-4);
  }
}


/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

@layer layout {
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .container-wide {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  /* Section rhythm via gap on a flex column, not stacked margins. Every
     direct child section on a page should be a `.stack` item, or nest
     `.stack` inside `main` and let gap do the spacing work. */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-section);
  }

  .stack--tight {
    gap: var(--space-12);
  }

  section {
    padding-block: var(--space-section);
  }

  section:first-child {
    padding-top: var(--space-16);
  }

  /* Wide-media frame: the two launch diagrams (and any future ones) carry
     SVG <text> baked at a fixed pixel size. Scaling the whole graphic down
     to a 375px viewport would make the labels illegible, so instead of
     shrinking, the frame scrolls horizontally at a legible minimum width.
     Give the frame a tabindex and aria-label in markup (see _skeleton.html)
     so keyboard and screen-reader users get a real scrollable region. */
  .diagram-frame {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
  }

  .diagram-frame svg {
    min-width: 48rem; /* 768px: below intrinsic size but keeps text legible */
    width: 100%;
    height: auto;
  }

  .diagram-frame::after {
    content: "";
  }
}


/* ==========================================================================
   COMPONENTS
   ========================================================================== */

@layer components {

  /* -- Eyebrow / kicker label -------------------------------------------- */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text--1);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent-strong);
  }

  /* -- Header / nav -------------------------------------------------------
     Sticky, but tasteful: a hairline border, no shadow-on-scroll gimmick,
     backdrop blur kept subtle. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
  }

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

  .site-header__brand {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-1);
    color: var(--color-ink-900);
    text-decoration: none;
  }

  .site-header__brand .mark {
    color: var(--color-accent-strong);
  }

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

  .site-nav a {
    font-family: var(--font-mono);
    font-size: var(--text--1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-ink-700);
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    color: var(--color-accent-strong);
  }

  .site-nav a[aria-current="page"] {
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 2px;
  }

  .nav-toggle {
    display: none;
  }

  /* -- Hero ---------------------------------------------------------------- */
  .hero {
    display: grid;
    gap: var(--space-8);
    align-items: center;
  }

  @media (min-width: 60rem) {
    .hero {
      grid-template-columns: 1.1fr 0.9fr;
      gap: var(--space-16);
    }
  }

  .hero__eyebrow {
    margin-bottom: var(--space-4);
  }

  .hero h1 {
    font-size: var(--text-6);
  }

  .hero__lede {
    margin-top: var(--space-6);
    font-size: var(--text-1);
    color: var(--color-text-secondary);
    max-width: var(--measure-narrow);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
  }

  /* -- Buttons -------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text--1);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard);
  }

  .btn--primary {
    background: var(--color-copper-deep);
    color: var(--color-paper);
  }

  .btn--primary:hover {
    background: var(--color-copper);
    color: var(--color-paper);
  }

  .btn--secondary {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-ink-900);
  }

  .btn--secondary:hover {
    border-color: var(--color-accent-strong);
    color: var(--color-accent-strong);
  }

  /* -- Status pills ----------------------------------------------------------
     Reuses the editorial status motif site-wide: outlined = WordPress's
     own, solid copper = what Editloft adds. */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text--1);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    line-height: 1.4;
  }

  .pill--native {
    background: var(--color-status-native-bg);
    border: 1.5px solid var(--color-status-native-border);
    color: var(--color-status-native-fg);
  }

  .pill--custom {
    background: var(--color-status-custom-bg);
    color: var(--color-status-custom-fg);
    border: 1.5px solid transparent;
  }

  /* -- Feature cards --------------------------------------------------------- */
  .card-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }

  .card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-6);
  }

  .card h3 {
    font-size: var(--text-2);
    margin-bottom: var(--space-2);
  }

  .card p {
    color: var(--color-text-secondary);
    font-size: var(--text-0);
  }

  .card__eyebrow {
    margin-bottom: var(--space-3);
  }

  /* -- Section blocks / comparison ------------------------------------------- */
  .section-head {
    max-width: var(--measure-narrow);
    margin-bottom: var(--space-8);
  }

  .section-head .eyebrow {
    margin-bottom: var(--space-3);
  }

  .compare-grid {
    display: grid;
    gap: var(--space-6);
  }

  @media (min-width: 48rem) {
    .compare-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .compare-block {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-6);
  }

  .compare-block--native {
    background: transparent;
  }

  .compare-block--custom {
    background: color-mix(in oklch, var(--color-copper) 6%, var(--color-bg-elevated) 94%);
    border-color: color-mix(in oklch, var(--color-copper) 40%, var(--color-border) 60%);
  }

  /* -- Callout / note blocks --------------------------------------------------- */
  .callout {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-sm);
    border-inline-start: 3px solid var(--color-accent);
    background: var(--color-bg-inset);
  }

  .callout__label {
    font-family: var(--font-mono);
    font-size: var(--text--1);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent-strong);
    flex-shrink: 0;
  }

  .callout p {
    margin: 0;
    color: var(--color-text);
    max-width: none;
  }

  /* -- Code snippet block --------------------------------------------------- */
  .code-block {
    background: var(--color-ink-900);
    color: var(--color-ink-50);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-6);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text--1);
    line-height: 1.7;
  }

  .code-block .comment {
    color: color-mix(in oklch, var(--color-ink-50) 55%, transparent);
  }

  /* -- Footer --------------------------------------------------------------- */
  .site-footer {
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-12);
  }

  .site-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }

  .site-footer__license {
    font-family: var(--font-mono);
    font-size: var(--text--1);
    color: var(--color-text-secondary);
    max-width: var(--measure-narrow);
  }

  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
  }

  .site-footer__links a {
    font-family: var(--font-mono);
    font-size: var(--text--1);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    color: var(--color-ink-700);
  }

  .site-footer__links a:hover {
    color: var(--color-accent-strong);
  }
}


/* ==========================================================================
   UTILITIES
   ========================================================================== */

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .text-secondary { color: var(--color-text-secondary); }
  .text-center { text-align: center; }

  .mono {
    font-family: var(--font-mono);
  }

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


/* ==========================================================================
   SITE LAYER (multi-page marketing site)
   Structure adapted from the ConsultingWP Light block theme: sticky header
   with a call to action, split hero with dual buttons, stat strip, icon
   cards, alternating feature rows, steps, FAQ accordion, closing CTA band,
   multi-column footer. Re-skinned to the Editloft tokens above. Everything
   here reads tokens only, so a new plugin site swaps the PLUGIN-SPECIFIC
   colour block and inherits the whole layer.
   No inline styles anywhere: the CSP is style-src 'self'.
   ========================================================================== */

@layer components {

  /* -- Bands: full-width sections that own their own rhythm ---------------- */
  .band {
    padding-block: var(--space-section);
  }
  .band--tight { padding-block: var(--space-16); }
  .band--elevated {
    background: var(--color-bg-elevated);
    border-block: 1px solid var(--color-border);
  }
  .band--navy {
    background: var(--color-navy);
    color: var(--color-paper);
  }
  .band--navy h2, .band--navy h3 { color: var(--color-paper); }
  .band--navy p { color: color-mix(in oklch, var(--color-paper) 82%, var(--color-navy) 18%); }
  .band--navy .eyebrow { color: var(--color-copper-bright); }
  .band--navy a:not(.btn) { color: var(--color-paper); }

  .section-head { margin-bottom: var(--space-12); max-width: 46rem; }
  .section-head p { margin-top: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-1); }
  .section-head--center { text-align: center; margin-inline: auto; }
  .section-head--center p { margin-inline: auto; }

  /* -- Header: brand, nav, CTA ---------------------------------------------- */
  .site-header__brand .mark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .site-header__brand svg { width: 1.5rem; height: 1.5rem; color: var(--color-accent); }
  .site-header__cta { display: none; }
  .site-nav--desktop { display: none; }
  .nav-menu { position: relative; }
  .nav-menu summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--text--1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
  }
  .nav-menu summary::-webkit-details-marker { display: none; }
  .nav-menu[open] summary { background: var(--color-bg-elevated); }
  .nav-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    min-width: 16rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
  }
  .nav-menu__panel ul { list-style: none; margin: 0; padding: 0; }
  .nav-menu__panel a {
    display: block;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--text--1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }
  .nav-menu__panel a:hover, .nav-menu__panel a[aria-current="page"] { background: var(--color-bg-inset); }
  @media (min-width: 64rem) {
    .site-nav--desktop { display: block; }
    .site-header__cta { display: inline-flex; }
    .nav-menu { display: none; }
    .site-header__row { gap: var(--space-8); }
  }

  /* -- Hero (home) --------------------------------------------------------- */
  .hero--home {
    padding-block: var(--space-16) var(--space-section);
    gap: var(--space-12);
  }
  @media (min-width: 60rem) {
    .hero--home { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-16); }
  }
  .hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--text--1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-secondary);
  }
  .hero__proof li::before { content: "\2713\00a0"; color: var(--color-success); }

  /* -- Page hero (interior pages) ------------------------------------------ */
  .page-hero {
    padding-block: var(--space-16) var(--space-12);
    border-bottom: 1px solid var(--color-border);
  }
  .page-hero h1 { font-size: var(--text-5); max-width: 22ch; }
  .page-hero__lede { margin-top: var(--space-6); font-size: var(--text-1); color: var(--color-text-secondary); max-width: 52ch; }
  .page-hero .hero__actions { margin-top: var(--space-8); }
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--text--1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-secondary);
  }
  .breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-border-strong); }
  .breadcrumb a { color: inherit; }

  /* -- Product illustration: a calendar drawn in CSS ------------------------ */
  .mock {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .mock__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-inset);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--text--1);
    color: var(--color-text-secondary);
  }
  .mock__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--color-border-strong); }
  .mock__title { margin-left: var(--space-2); }
  .mock__body { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; }
  .mock__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-right: 1px solid var(--color-border);
  }
  .mock__dow {
    padding: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-inset);
  }
  .mock__day {
    min-height: 5.25rem;
    padding: var(--space-2);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
  }
  .mock__day:nth-child(5n+5) { border-right: 0; }
  .mock__chip {
    display: block;
    padding: 0.2rem 0.4rem;
    font-size: 0.6875rem;
    line-height: 1.25;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-navy);
    background: var(--color-bg-inset);
    color: var(--color-text);
  }
  .mock__chip--draft { border-left-color: var(--color-slate); }
  .mock__chip--pending { border-left-color: var(--color-copper); }
  .mock__chip--future { border-left-color: var(--color-navy); }
  .mock__chip--publish { border-left-color: var(--color-success); }
  .mock__side { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-bg-inset); }
  .mock__side-title {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-secondary);
  }
  .mock__caption {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text--1);
    color: var(--color-text-secondary);
  }
  @media (max-width: 34rem) {
    .mock__body { grid-template-columns: 1fr; }
    .mock__side { display: none; }
    .mock__grid { border-right: 0; }
  }

  /* Audit trail illustration */
  .log {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text--1);
  }
  .log li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }
  .log li:last-child { border-bottom: 0; }
  .log__when { font-family: var(--font-mono); color: var(--color-text-secondary); }
  .log__what { color: var(--color-text); }
  .log__via {
    grid-column: 2;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent-strong);
  }

  /* Transition graph illustration */
  .graph { display: grid; gap: var(--space-3); }
  .graph__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
  }
  @media (min-width: 40rem) {
    .graph__row { grid-template-columns: 8rem auto 1fr; gap: var(--space-4); }
  }
  .graph__arrow { font-family: var(--font-mono); color: var(--color-text-secondary); }
  .graph__who { font-size: var(--text--1); color: var(--color-text-secondary); }
  .graph__who strong { color: var(--color-text); }

  /* -- Stat strip ---------------------------------------------------------- */
  .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media (min-width: 48rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .stat { border-top: 2px solid var(--color-accent); padding-top: var(--space-4); }
  .stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-4);
    font-weight: 600;
    line-height: 1;
    color: var(--color-ink-900);
  }
  .stat__label { display: block; margin-top: var(--space-2); font-size: var(--text--1); color: var(--color-text-secondary); }

  /* -- Icon cards ---------------------------------------------------------- */
  .icon-card__icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    margin-bottom: var(--space-4);
    background: var(--color-bg-inset);
    color: var(--color-accent-strong);
    border-radius: var(--radius-md);
  }
  .icon-card__icon svg { width: 1.5rem; height: 1.5rem; }
  .card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
  }
  .card-link:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); color: inherit; }
  .card__more {
    display: inline-block;
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text--1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent-strong);
  }

  /* -- Feature rows (alternating text + visual) ---------------------------- */
  .feature-row {
    display: grid;
    gap: var(--space-8);
    align-items: center;
    padding-block: var(--space-12);
  }
  .feature-row + .feature-row { border-top: 1px solid var(--color-border); }
  @media (min-width: 60rem) {
    .feature-row { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
    .feature-row--flip > :first-child { order: 2; }
  }
  .feature-row h2, .feature-row h3 { font-size: var(--text-4); margin-bottom: var(--space-4); }
  .feature-row p { color: var(--color-text-secondary); }
  .tick-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-3); }
  .tick-list li { position: relative; padding-left: var(--space-8); max-width: var(--measure-body); }
  .tick-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 1rem;
    height: 0.5rem;
    border-left: 2px solid var(--color-success);
    border-bottom: 2px solid var(--color-success);
    transform: rotate(-45deg) scale(0.9);
  }

  /* -- Steps --------------------------------------------------------------- */
  .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); counter-reset: step; }
  @media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .step { counter-increment: step; border-top: 1px solid var(--color-border-strong); padding-top: var(--space-4); }
  .step::before {
    content: "0" counter(step);
    display: block;
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text--1);
    letter-spacing: var(--tracking-label);
    color: var(--color-accent-strong);
  }
  .step h3 { font-size: var(--text-2); margin-bottom: var(--space-2); }
  .step p { color: var(--color-text-secondary); }

  /* -- Persona / benefit cards --------------------------------------------- */
  .persona { display: flex; flex-direction: column; gap: var(--space-3); }
  .persona__role {
    font-family: var(--font-mono);
    font-size: var(--text--1);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent-strong);
  }
  .persona blockquote {
    margin: 0;
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--text-1);
    line-height: var(--leading-snug);
    color: var(--color-ink-900);
  }

  /* -- Statement panel (stands in for testimonials: none are invented) ------ */
  .statement { max-width: 52rem; margin: 0; }
  .statement blockquote {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
  }
  .statement figcaption {
    margin-top: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text--1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  /* -- FAQ accordion (native details, no JS) -------------------------------- */
  .faq { display: grid; gap: var(--space-3); max-width: 52rem; }
  .faq details {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
  .faq summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-4) var(--space-16) var(--space-4) var(--space-6);
    position: relative;
    font-family: var(--font-display);
    font-size: var(--text-1);
    font-weight: 600;
    color: var(--color-ink-900);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+";
    position: absolute;
    right: var(--space-6);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: var(--text-2);
    color: var(--color-accent-strong);
  }
  .faq details[open] summary::after { content: "\2212"; }
  .faq details[open] summary { border-bottom: 1px solid var(--color-border); }
  .faq__body { padding: var(--space-4) var(--space-6) var(--space-6); color: var(--color-text-secondary); }
  .faq summary:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: -3px; }

  /* -- Release list --------------------------------------------------------- */
  .releases { list-style: none; margin: 0; padding: 0; display: grid; }
  .release {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-6);
    border-top: 1px solid var(--color-border);
  }
  @media (min-width: 48rem) { .release { grid-template-columns: 14rem 1fr; gap: var(--space-8); } }
  .release__meta { font-family: var(--font-mono); font-size: var(--text--1); letter-spacing: var(--tracking-wide); color: var(--color-text-secondary); }
  .release__meta strong { display: block; color: var(--color-ink-900); font-weight: 600; }
  .release h3 { font-size: var(--text-2); margin-bottom: var(--space-2); }
  .release p { color: var(--color-text-secondary); }

  /* -- Comparison table ------------------------------------------------------ */
  .table-wrap { overflow-x: auto; border: 1px solid var(--color-border); background: var(--color-bg-elevated); }
  .table-wrap:focus-visible { outline: 3px solid var(--color-focus-ring); }
  .compare-table { width: 100%; border-collapse: collapse; min-width: 40rem; font-size: var(--text-0); }
  .compare-table caption { text-align: left; padding: var(--space-4) var(--space-6); font-family: var(--font-mono); font-size: var(--text--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-secondary); }
  .compare-table th, .compare-table td { text-align: left; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); vertical-align: top; }
  .compare-table thead th { background: var(--color-bg-inset); font-family: var(--font-mono); font-size: var(--text--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
  .compare-table tbody th { font-weight: 600; color: var(--color-ink-900); width: 26%; }
  .compare-table td { color: var(--color-text-secondary); }

  /* -- CTA band -------------------------------------------------------------- */
  .cta-band { text-align: center; }
  .cta-band h2 { font-size: var(--text-4); max-width: 24ch; margin-inline: auto; }
  .cta-band p { margin: var(--space-4) auto 0; font-size: var(--text-1); }
  .cta-band .hero__actions { justify-content: center; margin-top: var(--space-8); }
  .btn--light { background: var(--color-paper); color: var(--color-navy); border-color: var(--color-paper); }
  .btn--light:hover { background: #ffffff; color: var(--color-navy); }
  .btn--ghost-light { background: transparent; color: var(--color-paper); border-color: color-mix(in oklch, var(--color-paper) 55%, transparent); }
  .btn--ghost-light:hover { border-color: var(--color-paper); color: var(--color-paper); }
  .btn--lg { padding: var(--space-4) var(--space-8); }

  /* -- Prose pages (about, legal) -------------------------------------------- */
  .prose { max-width: 46rem; }
  .prose h2 { font-size: var(--text-3); margin-top: var(--space-12); margin-bottom: var(--space-4); }
  .prose h3 { font-size: var(--text-2); margin-top: var(--space-8); margin-bottom: var(--space-3); }
  .prose ul, .prose ol { margin: var(--space-4) 0; padding-left: var(--space-6); max-width: var(--measure-body); }
  .prose li + li { margin-top: var(--space-2); }
  .prose > :first-child { margin-top: 0; }
  .two-col { display: grid; gap: var(--space-12); }
  @media (min-width: 60rem) { .two-col { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-16); } }
  .toc { position: sticky; top: 6rem; align-self: start; font-size: var(--text--1); }
  .toc ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
  .toc a { color: var(--color-text-secondary); text-decoration: none; }
  .toc a:hover { color: var(--color-accent-strong); text-decoration: underline; }
  @media (max-width: 59.99rem) { .toc { position: static; } }

  /* -- Footer, multi-column ---------------------------------------------------- */
  .site-footer--full { padding-block: var(--space-16) var(--space-8); }
  .footer-grid { display: grid; gap: var(--space-12); grid-template-columns: 1fr; }
  @media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
  .footer-brand .mark { font-family: var(--font-display); font-size: var(--text-2); font-weight: 600; }
  .footer-brand p { margin-top: var(--space-3); font-size: var(--text--1); color: var(--color-text-secondary); }
  .footer-title {
    font-family: var(--font-mono);
    font-size: var(--text--1);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
  }
  .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
  .footer-col a { text-decoration: none; }
  .footer-col a:hover { text-decoration: underline; }
  .footer-base {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text--1);
    color: var(--color-text-secondary);
  }
  .footer-base p { max-width: none; }

  .site-nav ul { list-style: none; margin: 0; padding: 0; }
  .hero--home h1 { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem); }

  .site-social { margin-top: var(--space-8); max-width: none; font-size: var(--text--1); color: var(--color-text-secondary); }
  .site-social a { display: inline-block; padding-block: var(--space-1); }

  .page-hero__meta { margin-top: var(--space-6); font-size: var(--text--1); color: var(--color-text-secondary); max-width: none; }

  .shot { margin: 0; background: var(--color-bg-elevated); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); overflow: hidden; }
  .shot img { width: 100%; height: auto; display: block; }
  .shot__caption { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text--1); color: var(--color-text-secondary); }

  .feature-row > * { min-width: 0; }
  .code-block { overflow-x: auto; max-width: 100%; }

  @media print {
    .site-header, .site-footer, .cta-band, .toc { display: none; }
  }
}