/* site.css — generated by build.sh — do not edit.
   Edit the sources in design/ui-kit/css/ and run: make css (bash design/ui-kit/build.sh)
   Sources, in layer order: fonts.css tokens.css base.css layout.css hero.css shell.css actions.css content.css page-docs.css page-download.css page-contact.css */

/* ===== fonts.css ===== */

/* ==========================================================================
   fonts.css — self-hosted Geist and Geist Mono (stream A)

   Files: ../fonts/Geist-Variable.woff2, ../fonts/GeistMono-Variable.woff2
   Source: release v1.9.2 of github.com/vercel/geist-font (webfonts/*[wght].woff2),
   renamed without brackets. License: SIL Open Font License 1.1, ../fonts/LICENSE-OFL.txt.

   Both are variable fonts (wght axis 100–900), so one file per family covers
   every weight the kit uses: sans 400/500/600/700, mono 400/500/600.
   Used on every page; the families are referenced only through
   --font-sans / --font-mono in tokens.css.

   @font-face is not affected by cascade layers, so this file has no @layer.
   Paths are relative to css/, which is also where site.css is written.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ===== tokens.css ===== */

/* ==========================================================================
   tokens.css — every design token of the kit (stream A)

   Source of values: design/variants/06-grain-and-wind (README.md, index.html).
   Names are fixed by design/ui-kit/SPEC.md, section "Токены".
   This file and hero.css are the only CSS files allowed to contain hex or
   rgb() values; build.sh fails on any other occurrence. Need a shade?
   Use color-mix() on a token, never a new hex.

   One dark theme (color-scheme: dark). A light theme, if it ever appears,
   is a block :root[data-theme="light"] { … } that overrides these same
   tokens; components never know about it.

   The layer order of the whole kit is declared here, first.

   Contrast of later page pairs (S5-2, WCAG 2.x): violet/bg 10.77,
   violet/bg-2 10.13, dim/bg-3 6.32, dim/bg-2 6.91, muted/bg 9.63,
   teal/bg-2 12.42; bars teal/bg 13.21, amber/bg 13.55, teal/code 13.43.
   ========================================================================== */

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

@layer tokens {
  :root {
    color-scheme: dark;

    /* --- Color: surfaces ------------------------------------------------ */
    --bg: #090A1F;            /* page background */
    --bg-2: #0F1130;          /* cards, table heads, form */
    --bg-3: #161941;          /* raised elements, active items */
    --code: #070818;          /* code blocks and form fields */

    /* --- Color: lines --------------------------------------------------- */
    --line: #262A5C;          /* decorative borders */
    --line-2: #3A4080;        /* visible borders, separators */
    --field-border: #6A72B8;  /* form field border, 3:1 against the field */

    /* --- Color: text ---------------------------------------------------- */
    --text: #F3F5FF;          /* body text, headings */
    --muted: #AEB4DB;         /* secondary text */
    --dim: #959CCB;           /* labels, captions */

    /* --- Color: accents ------------------------------------------------- */
    --teal: #5EEAD4;          /* links, focus, active, POST, 2xx, success */
    --teal-ink: #04201C;      /* text on a teal fill */
    --teal-active: #2DD4BF;   /* pressed primary button */
    --violet: #B4BCFF;        /* JSON keys, flags, path params, GET */
    --amber: #FCD34D;         /* numbers, required, 4xx, requires confirm, warning */
    --amber-ink: #1F1600;     /* text on an amber fill */
    --rose: #F9A8D4;          /* null/true/false, 5xx, DELETE */
    --danger: #FCA5A5;        /* form errors */
    --white: #FFFFFF;         /* primary button, hero text */

    /* --- Color: meaningful borders -------------------------------------- */
    /* Secondary button border: white 55 % gives 3.26:1 on the worst pixel of
       the Status band and 6.23:1 on --bg (50 % gave 2.97 on the band). */
    --btn-border-secondary: color-mix(in srgb, var(--white) 55%, transparent);

    /* --- Color: aliases (components use these) -------------------------- */
    --accent: var(--teal);
    --link: var(--teal);
    --focus: var(--teal);
    --ok: var(--teal);
    --warn: var(--amber);
    --err: var(--danger);

    /* --- Color: hero and Status band only ------------------------------- */
    --hero-text: #FFFFFF;
    --hero-sub: #DDE3FF;
    --hero-eyebrow: #C9F7EE;
    --hero-scrim: #070818;    /* never below 38 % opacity under hero text */
    --grad-1: #0B0A2E;
    --grad-2: #1A1868;
    --grad-3: #26318F;
    --grad-4: #0F6C78;
    --grad-5: #0B7F76;
    --glow-teal: #0E8C82;
    --glow-indigo: #3B3BB8;

    /* --- Type ----------------------------------------------------------- */
    --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-h3: 18px;
    --fs-h2: clamp(28px, 4vw, 40px);
    --fs-h1: clamp(32px, 4.6vw, 56px);
    --fs-display: clamp(38px, 6.2vw, 72px);

    --lh-tight: 1.02;
    --lh-heading: 1.15;
    --lh-body: 1.6;
    --lh-code: 1.65;

    --tracking-display: -0.035em;
    --tracking-label: 0.06em;

    /* --- Space (4-based scale) ------------------------------------------ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Short synonyms, so CSS copied from the variant mock-ups keeps working. */
    --s1: var(--space-1);
    --s2: var(--space-2);
    --s3: var(--space-3);
    --s4: var(--space-4);
    --s5: var(--space-5);
    --s6: var(--space-6);
    --s7: var(--space-7);
    --s8: var(--space-8);
    --s9: var(--space-9);

    /* --- Radii ---------------------------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* --- Shadows (hero card and pop-up elements only) ------------------- */
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-2: 0 12px 40px rgb(0 0 0 / .45);

    /* --- Containers ----------------------------------------------------- */
    --maxw: 1200px;
    --maxw-docs: 1440px;
    --gutter: max(16px, env(safe-area-inset-left, 0px));

    /* --- Layout knobs (layout.css). Change per element with a modifier
           class (.stack--gap-2 … .stack--gap-8), never with style="". ----- */
    --stack-gap: var(--space-4);

    /* --- Motion --------------------------------------------------------- */
    --dur: 150ms;
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* --- Z-index -------------------------------------------------------- */
    --z-header: 10;
    --z-overlay: 20;

    /* --- Focus ring (box-shadow) ---------------------------------------- */
    --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
  }

  @media (min-width: 720px) {
    :root {
      --gutter: 24px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur: 0ms;
    }
  }
}

/* ===== base.css ===== */

/* ==========================================================================
   base.css — reset, default typography, focus, selection, utilities (stream A)

   Used on every page. This is the only file that styles bare tags
   (h1–h3, p, ul, ol, hr, a, code, pre, kbd, table); components style classes.
   Paragraphs and lists have no outer margin: vertical rhythm comes from
   .stack / .sec-head / .prose in layout.css.

   Text classes (layer base): .eyebrow, .lead, .caption, .display, .skip-link.
   Utilities (layer utilities, win over components): .u-visually-hidden,
   .u-mono, .u-muted, .u-dim, .u-nowrap, the forced-colors focus outline.
   ========================================================================== */

@layer base {
  /* --- Reset ------------------------------------------------------------ */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: var(--space-6);
  }

  body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

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

  svg {
    max-width: 100%;
  }

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

  /* --- Headings --------------------------------------------------------- */
  h1,
  h2,
  h3 {
    margin: 0;
    font-weight: 600;
    line-height: var(--lh-heading);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-h1);
    letter-spacing: var(--tracking-display);
  }

  h2 {
    font-size: var(--fs-h2);
    letter-spacing: -0.02em;
  }

  h3 {
    font-size: var(--fs-h3);
    letter-spacing: -0.01em;
  }

  /* --- Text blocks ------------------------------------------------------ */
  p {
    margin: 0;
    text-wrap: pretty;
  }

  ul,
  ol {
    margin: 0;
    padding-left: 1.25em;
  }

  hr {
    height: 0;
    margin: var(--space-6) 0;
    border: 0;
    border-top: 1px solid var(--line);
  }

  strong,
  b {
    font-weight: 600;
  }

  /* --- Links (visited looks the same on purpose) ------------------------ */
  a {
    color: var(--link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-thickness var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  a:hover {
    text-decoration-thickness: 2px;
  }

  /* --- Code ------------------------------------------------------------- */
  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
    font-variant-ligatures: none;
  }

  code,
  kbd,
  samp {
    font-size: 0.92em;
  }

  pre {
    margin: 0;
    overflow-x: auto;
    font-size: var(--fs-sm);
    line-height: var(--lh-code);
    tab-size: 2;
  }

  pre code {
    font-size: inherit;
  }

  kbd {
    padding: 1px 5px;
    border: 1px solid var(--line-2);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--bg-2);
  }

  /* --- Tables (look of a full table is in content.css, .table) ---------- */
  table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }

  th {
    text-align: left;
    font-weight: 600;
  }

  /* --- Selection and focus ---------------------------------------------- */
  ::selection {
    background: color-mix(in srgb, var(--teal) 35%, transparent);
    color: var(--text);
  }

  :focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }

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

  /* --- Skip link: hidden until focused ---------------------------------- */
  .skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--z-overlay);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--text);
    color: var(--bg);
    font-weight: 500;
    text-decoration: none;
    transform: translateY(calc(-100% - var(--space-4)));
  }

  .skip-link:focus,
  .skip-link:focus-visible {
    transform: none;
  }

  /* --- Text classes ----------------------------------------------------- */

  /* Small mono label above a heading or inside a card/footer column. */
  .eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--dim);
  }

  /* Intro paragraph under an H1/H2. */
  .lead {
    max-width: 62ch;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--muted);
  }

  /* Small text under code, figures, forms. */
  .caption {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--dim);
  }

  /* The biggest heading size (hero H1). */
  .display {
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    font-weight: 600;
  }
}

@layer utilities {
  .u-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

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

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

  .u-dim {
    color: var(--dim);
  }

  .u-nowrap {
    white-space: nowrap;
  }

  /* Windows high-contrast mode drops box-shadow, the focus ring of every
     component: a real outline instead. In this layer it beats the
     `outline: none` of components without !important (S5-2). */
  @media (forced-colors: active) {
    :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
  }
}

/* ===== layout.css ===== */

/* ==========================================================================
   layout.css — containers, grids, section rhythm, docs layout (stream A)

   Mobile-first: base rules are for a 360px phone, @media (min-width: …)
   widens. Breakpoints: 720px (tablet), 1024px (desktop), 1240px (three
   docs columns). Every grid track is minmax(0, …) and every grid child that
   may hold code has min-width: 0, so long lines scroll inside their block
   instead of widening the page.

   Blocks and where they are used on the site:
     .wrap, .wrap--docs      page container (all pages; docs pages use --docs)
     .section, --tight       vertical rhythm of landing/download sections
     .sec-head               eyebrow + H2 + lead at the top of a section
     .grid, --2, --3, --4    card grids that collapse to fewer columns
     .split                  hero: text 1.08fr + card 0.92fr
     .two, --center          two equal columns (code pair, unsubscribe/ClickHouse);
                             --center aligns them in the middle from 1024px
     .stack, --gap-N         vertical gap; --gap-2 … --gap-8 pick --space-N
     .cluster                wrapping row (buttons, badges, pills)
     .docs-layout            docs page: nav | main | aside, then __foot (ticket S1-3)
     .prose                  Markdown text of docs pages (68ch)
   ========================================================================== */

@layer layout {
  /* --- Containers ------------------------------------------------------- */
  .wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .wrap--docs {
    max-width: var(--maxw-docs);
  }

  /* --- Section rhythm --------------------------------------------------- */
  .section {
    padding-block: var(--space-8);
  }

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

  @media (min-width: 1024px) {
    .section {
      padding-block: var(--space-9);
    }

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

  /* Section head: eyebrow, H2, lead — in this order, all optional. */
  .sec-head {
    max-width: 68ch;
    margin-bottom: var(--space-7);
  }

  .sec-head > * + * {
    margin-top: var(--space-4);
  }

  .sec-head > .eyebrow + * {
    margin-top: var(--space-3);
  }

  /* --- Grids ------------------------------------------------------------ */
  /* .grid alone is one column. --2/--3/--4 set the maximum number of
     columns; a column never gets narrower than --_min, so the grid drops to
     fewer columns on narrow screens (4 → 3 → 2 → 1) without media queries. */
  .grid {
    --_gap: var(--space-5);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--_gap);
  }

  .grid--2 {
    --_cols: 2;
    --_min: 280px;
  }

  .grid--3 {
    --_cols: 3;
    --_min: 240px;
  }

  .grid--4 {
    --_cols: 4;
    --_min: 200px;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(
      auto-fit,
      minmax(max(min(100%, var(--_min)), calc((100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols))), 1fr)
    );
  }

  .grid > * {
    min-width: 0;
  }

  /* --- Hero split: text + card ------------------------------------------ */
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    align-items: center;
  }

  @media (min-width: 1024px) {
    .split {
      grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    }
  }

  /* --- Two equal columns ------------------------------------------------ */
  .two {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }

  @media (min-width: 1024px) {
    .two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Short text next to a tall code column: centre it, not top (S5-2). */
    .two--center {
      align-items: center;
    }
  }

  .split > *,
  .two > * {
    min-width: 0;
  }

  /* --- Stack and cluster ------------------------------------------------ */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }

  .stack > * {
    min-width: 0;
  }

  /* Gap modifiers instead of style="--stack-gap: …": the site's templates
     carry no inline styles at all. The default gap is --space-4. */
  .stack--gap-2 { --stack-gap: var(--space-2); }
  .stack--gap-3 { --stack-gap: var(--space-3); }
  .stack--gap-5 { --stack-gap: var(--space-5); }
  .stack--gap-6 { --stack-gap: var(--space-6); }
  .stack--gap-7 { --stack-gap: var(--space-7); }
  .stack--gap-8 { --stack-gap: var(--space-8); }

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

  /* --- Docs layout: nav | main | aside ---------------------------------- */
  /* < 1024px: one column — nav (a <details> drawer from shell.css), text,
     then code. ≥ 1024px: nav on the left, aside under the text.
     ≥ 1240px: three columns 248px | text | 460px. */
  .docs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-block: var(--space-6) var(--space-8);
  }

  .docs-layout__nav,
  .docs-layout__main,
  .docs-layout__aside,
  .docs-layout__foot {
    min-width: 0;
  }

  /* __foot: the pager (and anything else that closes the page) — after the
     examples on phones, under the text column on desktop. Added by stream E. */

  @media (min-width: 1024px) {
    .docs-layout {
      grid-template-columns: 248px minmax(0, 1fr);
      column-gap: var(--space-6);
    }

    .docs-layout__nav {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: start;
      position: sticky;
      top: var(--space-5);
      max-height: calc(100vh - 2 * var(--space-5));
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .docs-layout__main {
      grid-column: 2;
      grid-row: 1;
    }

    .docs-layout__aside {
      grid-column: 2;
      grid-row: 2;
    }

    .docs-layout__foot {
      grid-column: 2;
      grid-row: 3;
    }
  }

  @media (min-width: 1240px) {
    .docs-layout {
      grid-template-columns: 248px minmax(0, 1fr) 460px;
    }

    .docs-layout__nav {
      grid-row: 1;
    }

    .docs-layout__aside {
      grid-column: 3;
      grid-row: 1;
    }

    .docs-layout__foot {
      grid-row: 2;
    }
  }

  /* --- Prose: Markdown output of docs pages ----------------------------- */
  /* Styles bare tags on purpose: the HTML comes from Markdown and has no
     classes. Components placed inside (.code, .table, .callout) keep their
     own look; .prose only adds spacing. */
  .prose {
    max-width: 68ch;
  }

  .prose > * + * {
    margin-top: var(--space-4);
  }

  .prose > h2 {
    margin-top: var(--space-7);
  }

  .prose > h3 {
    margin-top: var(--space-6);
  }

  .prose > h2 + *,
  .prose > h3 + * {
    margin-top: var(--space-3);
  }

  .prose li + li {
    margin-top: var(--space-2);
  }

  .prose li > ul,
  .prose li > ol {
    margin-top: var(--space-2);
  }

  /* Markdown tables come as the kit's .table-wrap > .table (content.Render,
     S5-2): a named region that scrolls from the keyboard. */
}

/* ===== hero.css ===== */

/* ==========================================================================
   hero.css — landing hero with grain and wind lines, Status band (stream A)

   Where: landing page only — the hero at the top (ticket S0-3) and the
   "Status: pre-release." band at the bottom. Inner pages (docs, download,
   contact) use .hero--compact: same type, plain dark background, no picture.

   Markup: partials/hero-bg.html (SVG + scrim), partials/status-band.html.

   Blocks:
     .wind          the shared SVG picture: gradient --grad-1…5, two glows
                    (hero only), wind lines, grain. Its colors come from
                    tokens through classes (.wind__stop--*, .wind__line--*),
                    so the SVG markup has no hex codes.
     .hero          section: __bg, __scrim, __inner, __content, __eyebrow,
                    __title, __sub, __actions, __note, __card;
                    modifier --compact.
     .band          Status band: __bg, __scrim, __inner, __content, __title,
                    __text, __actions, __phases, __phase (--next).

   Contrast: white hero text on the bare teal part of the gradient is only
   4.39:1, so the scrim (--hero-scrim, never below 38 %) is required. With
   it the worst pixel gives 6.79 (white) / 5.34 (--hero-sub) / 5.83
   (--hero-eyebrow). Do not remove the scrim and do not brighten the
   gradient. Numbers: design/variants/06-grain-and-wind/README.md.

   Two grain modes:
     1. Default — feTurbulence filter inside the SVG (rect.wind__grain,
        overlay blend at 18 %). No extra request, but a full-screen
        turbulence filter is expensive to rasterize on weak phones
        (once, there is no animation) and looks a little different in
        Chrome, Safari and Firefox.
     2. Class .hero__bg--texture on the SVG — hides the filter and lays a
        pre-rendered tile ../img/hero-grain.png over the gradient with the
        same blend and opacity. Cheaper on phones, identical in all
        browsers. The PNG is a placeholder path: the file is not made yet;
        render it (256×256, grey noise) before switching the class on.
   ========================================================================== */

@layer components {
  /* --- Shared SVG picture ---------------------------------------------- */
  .wind__stop--1 { stop-color: var(--grad-1); }
  .wind__stop--2 { stop-color: var(--grad-2); }
  .wind__stop--3 { stop-color: var(--grad-3); }
  .wind__stop--4 { stop-color: var(--grad-4); }
  .wind__stop--5 { stop-color: var(--grad-5); }
  .wind__stop--glow-teal { stop-color: var(--glow-teal); }
  .wind__stop--glow-indigo { stop-color: var(--glow-indigo); }

  .wind__line {
    fill: none;
    stroke: var(--white);
    stroke-opacity: .13;
    stroke-width: 1.1;
  }

  .wind__line--soft {
    stroke: color-mix(in srgb, var(--violet) 60%, var(--white));
    stroke-opacity: .2;
    stroke-width: 1.6;
  }

  .wind__line--teal {
    stroke: var(--teal);
    stroke-opacity: .42;
    stroke-width: 1.3;
  }

  .wind__grain {
    opacity: .18;
    mix-blend-mode: overlay;
  }

  /* --- Hero ------------------------------------------------------------ */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-8);
    border-bottom: 1px solid var(--line);
    color: var(--hero-text);
  }

  @media (min-width: 1024px) {
    .hero {
      padding-block: var(--space-9) calc(var(--space-9) + var(--space-5));
    }
  }

  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  /* Texture mode: see the file comment. */
  .hero__bg--texture .wind__grain {
    display: none;
  }

  .hero:has(> .hero__bg--texture)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../img/hero-grain.png") repeat;
    background-size: 256px 256px;
    opacity: .18;
    mix-blend-mode: overlay;
    pointer-events: none;
  }

  /* Darkens the picture under the text: 58 % left → 44 % → 38 % right,
     plus a fade into the page background at the bottom. */
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, transparent 72%, var(--bg) 100%),
      linear-gradient(
        90deg,
        color-mix(in srgb, var(--hero-scrim) 58%, transparent) 0%,
        color-mix(in srgb, var(--hero-scrim) 44%, transparent) 50%,
        color-mix(in srgb, var(--hero-scrim) 38%, transparent) 100%
      );
  }

  .hero__content {
    min-width: 0;
    color: var(--hero-text);
  }

  .hero__eyebrow {
    color: var(--hero-eyebrow);
  }

  .hero__title {
    margin: var(--space-4) 0 var(--space-5);
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    color: var(--hero-text);
    text-wrap: balance;
  }

  .hero__sub {
    max-width: 58ch;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--hero-sub);
  }

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

  /* Phone: buttons take the full width, one under the other. */
  .hero__actions > * {
    flex: 1 1 100%;
  }

  @media (min-width: 720px) {
    .hero__actions > * {
      flex: 0 0 auto;
    }
  }

  .hero__note {
    margin-top: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--hero-sub);
  }

  /* Card with real commands instead of a product screenshot. Holds one or
     more .code blocks (content.css, modifier .code--hero). */
  .hero__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-2);
    border: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--code) 86%, transparent);
    box-shadow: var(--shadow-2);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--text);
  }

  /* --- Compact hero: inner pages, no picture --------------------------- */
  .hero--compact {
    padding-block: var(--space-7) var(--space-6);
    background: var(--bg);
    color: var(--text);
  }

  .hero--compact .hero__bg,
  .hero--compact .hero__scrim {
    display: none;
  }

  .hero--compact .hero__content {
    color: var(--text);
  }

  .hero--compact .hero__eyebrow {
    color: var(--dim);
  }

  .hero--compact .hero__title {
    margin: var(--space-3) 0 var(--space-4);
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
    color: var(--text);
  }

  .hero--compact .hero__sub,
  .hero--compact .hero__note {
    color: var(--muted);
  }

  /* --- Status band ----------------------------------------------------- */
  /* Placed inside .wrap at the end of the landing page. */
  .band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
    border-radius: var(--radius-lg);
    color: var(--hero-text);
  }

  .band__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  /* The band picture is calmer than the hero: thinner, fainter lines. */
  .band__bg .wind__line {
    stroke-opacity: .12;
    stroke-width: 1;
  }

  .band__bg .wind__line--soft {
    stroke-opacity: .18;
  }

  .band__bg .wind__line--teal {
    stroke-opacity: .38;
  }

  .band__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--hero-scrim) 48%, transparent),
      color-mix(in srgb, var(--hero-scrim) 38%, transparent)
    );
  }

  .band__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-6) var(--space-4);
  }

  @media (min-width: 720px) {
    .band__inner {
      gap: var(--space-7);
      padding: var(--space-7) var(--space-5);
    }
  }

  @media (min-width: 1024px) {
    .band__inner {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
      padding: var(--space-8) var(--space-7);
    }
  }

  .band__content {
    min-width: 0;
  }

  .band__title {
    margin-bottom: var(--space-4);
    color: var(--hero-text);
  }

  .band__text {
    max-width: 56ch;
    color: var(--hero-sub);
  }

  .band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }

  .band__actions > * {
    flex: 1 1 100%;
  }

  @media (min-width: 720px) {
    .band__actions > * {
      flex: 0 0 auto;
    }
  }

  /* Roadmap phases P0–P8 done, release not yet: text and border style
     (solid vs dashed) carry the meaning, not color alone. A phase is a code
     ("P4") or a code with a name ("P4 Domains & DNS", the site's
     home.status.phases): cells are at least 8.5rem wide and the name wraps
     inside its cell, so 360px gets two columns and nothing is cut. */
  .band__phases {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .band__phase {
    padding: var(--space-3) var(--space-2);
    border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--code) 72%, transparent);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    color: var(--hero-eyebrow);
  }

  .band__phase--next {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--white) 40%, transparent);
    background: color-mix(in srgb, var(--code) 50%, transparent);
    color: var(--hero-sub);
  }
}

/* ===== shell.css ===== */

/*
 * shell.css — page shell: site header, brand, main navigation, footer,
 * breadcrumbs, documentation navigation, pager, docs toolbar,
 * docs page head and sections (.docs-head, .docs-section).
 * Stream B of the UI kit (design/ui-kit/SPEC.md, section "B").
 * Layer: components. Colours come only from tokens.css custom properties.
 * Classes used but not styled here: .wrap (layout.css), .eyebrow and
 * .skip-link (base.css), .btn .btn--primary .btn--sm (actions.css),
 * .badge .badge--prerelease (content.css).
 */
@layer components {

  /*
   * .site-header — top bar on every page (ticket S0-3, all pages).
   * Not sticky. Markup: header.site-header > div.wrap.site-header__inner >
   *   a.brand, span.badge.badge--prerelease.site-header__badge,
   *   nav.site-nav, a.btn.btn--primary.btn--sm.site-header__cta.
   * Phone (< 720px): row 1 — brand left, Download right; row 2 — nav links
   * and the badge. No burger, no JS. Desktop: one row, about 64px high.
   */
  .site-header {
    position: relative;
    z-index: var(--z-header);
    background: var(--bg);
    border-block-end: 1px solid var(--line);
  }

  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding-block: var(--space-3) var(--space-2);
  }

  .site-header__inner > .brand { order: 1; }

  .site-header__cta {
    order: 2;
    flex: none;
    margin-inline-start: auto;
  }

  /* Line break: keeps the nav links on row 2 on any phone width. */
  .site-header__inner::after {
    content: "";
    order: 3;
    flex-basis: 100%;
    height: 0;
  }

  .site-header__inner > .site-nav {
    order: 4;
    flex: 1 1 auto;
    min-width: 0;
  }

  .site-header__badge {
    order: 5;
    flex: none;
  }

  @media (min-width: 720px) {
    .site-header__inner {
      flex-wrap: nowrap;
      column-gap: var(--space-4);
      min-height: 64px;
      padding-block: 0;
    }

    .site-header__inner > .brand,
    .site-header__cta,
    .site-header__inner > .site-nav,
    .site-header__badge { order: 0; }

    .site-header__inner > .site-nav {
      flex: 0 1 auto;
      margin-inline-start: auto;
    }

    .site-header__cta { margin-inline-start: 0; }

    .site-header__inner::after { content: none; }
  }

  /*
   * .brand — wind mark (three wind lines on the indigo→teal tile) + the
   * word "Postwind". Used in the header and the footer.
   * Markup: a.brand > span.brand__mark > svg.brand__icon, span.brand__name.
   * The tile colour is a CSS gradient, so the SVG has no ids and no hex.
   */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    border-radius: var(--radius-sm);
  }

  .brand:hover,
  .brand:visited { color: var(--text); }

  .brand:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }

  .brand__mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--glow-indigo), var(--glow-teal));
    color: var(--white);
  }

  .brand__icon {
    display: block;
    width: 100%;
    height: 100%;
  }

  /*
   * .site-nav — main navigation (Docs, Contact). Link colour --muted,
   * --text on hover; the current page has aria-current="page": --text and a
   * 2px teal underline. Markup: nav.site-nav[aria-label="Main"] >
   *   ul.site-nav__list > li > a.site-nav__link.
   */
  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-nav__link {
    --_pad-x: 10px;
    display: inline-block;
    padding: var(--space-2) var(--_pad-x);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }

  /* On the phone the first link lines up with the brand text edge. */
  .site-nav__list > li:first-child > .site-nav__link {
    margin-inline-start: calc(-1 * var(--_pad-x));
  }

  .site-nav__link:visited { color: var(--muted); }

  .site-nav__link:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--white) 6%, transparent);
  }

  .site-nav__link:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }

  .site-nav__link[aria-current="page"] {
    color: var(--text);
    text-decoration-line: underline;
    text-decoration-color: var(--teal);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  @media (min-width: 720px) {
    .site-nav__link { --_pad-x: 12px; }

    .site-nav__list > li:first-child > .site-nav__link { margin-inline-start: 0; }
  }

  /*
   * .site-footer — bottom of every page (ticket S0-3).
   * Markup: footer.site-footer > div.wrap > div.site-footer__grid >
   *   div.site-footer__brand + three nav.site-footer__col (h2.eyebrow
   *   .site-footer__title, ul.site-footer__list > li > a.site-footer__link);
   *   then div.site-footer__bottom > p.site-footer__note + p.site-footer__legal.
   * Phone: one column; >= 720px: three columns, brand above;
   * >= 1024px: brand + three columns in one row.
   */
  .site-footer {
    padding-block: var(--space-7) var(--space-6);
    border-block-start: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
    line-height: var(--lh-body);
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  @media (min-width: 720px) {
    .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .site-footer__brand { grid-column: 1 / -1; }
  }

  @media (min-width: 1024px) {
    .site-footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }

    .site-footer__brand { grid-column: auto; }
  }

  .site-footer__col { min-width: 0; }

  .site-footer__title {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-xs);
    line-height: 1.4;
  }

  .site-footer__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-footer__link,
  .site-footer__link:visited {
    color: var(--muted);
    text-decoration: none;
    border-radius: 4px;
  }

  .site-footer__link:hover {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .site-footer__link:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--line);
  }

  .site-footer__note {
    max-width: 68ch;
    margin: 0;
    color: var(--dim);
    font-size: var(--fs-sm);
  }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    color: var(--dim);
    font-size: var(--fs-sm);
  }

  /*
   * .breadcrumbs — trail above the docs page title (ticket S1-3).
   * Markup: nav.breadcrumbs[aria-label="Breadcrumb"] > ol.breadcrumbs__list >
   *   li.breadcrumbs__item > a.breadcrumbs__link; the last item is
   *   span.breadcrumbs__current[aria-current="page"] (no link).
   * The "/" separator is drawn by ::after on every item but the last and is
   * hidden from screen readers. It trails its item, so when the trail wraps
   * the "/" stays at the end of the upper line and never starts a line.
   */
  .breadcrumbs {
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: 1.4;
  }

  .breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .breadcrumbs__item {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .breadcrumbs__item:not(:last-child)::after {
    content: "/";
    content: "/" / "";
    margin-inline: var(--space-2);
    color: var(--dim);
    white-space: nowrap;
  }

  .breadcrumbs__link,
  .breadcrumbs__link:visited {
    color: var(--muted);
    text-decoration: none;
    border-radius: 4px;
  }

  .breadcrumbs__link:hover {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .breadcrumbs__link:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }

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

  /*
   * .toolbar — one mono line above or below the docs content:
   * "Generated from Postwind commit a19b2e4 · OpenAPI 3.1" (ticket S1-3).
   * Markup: p.toolbar > span.toolbar__item (a.toolbar__link inside if needed).
   * The "·" between items is drawn by ::after of every item but the last.
   */
  .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: var(--space-1);
    margin: 0;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.5;
  }

  /* Trailing separator, as in .breadcrumbs: a wrapped line never starts with "·". */
  .toolbar__item:not(:last-child)::after {
    content: "·";
    content: "·" / "";
    margin-inline: var(--space-2);
  }

  .toolbar__link,
  .toolbar__link:visited {
    color: var(--muted);
    text-underline-offset: 3px;
    border-radius: 4px;
  }

  .toolbar__link:hover { color: var(--text); }

  .toolbar__link:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }

  /*
   * .docs-nav — left navigation of the docs section (ticket S1-3).
   * Markup: nav.docs-nav[aria-label="Documentation"] > div.docs-nav__group >
   *   h2.eyebrow.docs-nav__title (optional; may hold span.docs-nav__count),
   *   ul.docs-nav__list > li > a.docs-nav__link (+ ul.docs-nav__sublist for
   *   the operations of the current group; its parent link gets
   *   .docs-nav__link--parent).
   * Current page: aria-current="page" — --bg-3 fill and a 2px teal bar left.
   * Two copies on a docs page, both inside .docs-layout__nav:
   *   nav.docs-nav.docs-nav--sidebar — shown at >= 1024px (the column is sticky);
   *   details.docs-nav__drawer > summary.docs-nav__summary + nav.docs-nav —
   *   shown below 1024px, closed by default (no "open" attribute, no JS).
   * The hidden copy is display:none, so screen readers meet only one.
   */
  .docs-nav {
    --_pad-x: 10px;
    font-size: 14px;
    line-height: 1.4;
  }

  .docs-nav__group + .docs-nav__group { margin-block-start: var(--space-5); }

  .docs-nav__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    padding-inline: var(--_pad-x);
    font-size: var(--fs-xs);
    line-height: 1.4;
  }

  .docs-nav__list,
  .docs-nav__sublist {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .docs-nav__sublist {
    margin: 2px 0 6px var(--_pad-x);
    padding-inline-start: var(--space-2);
    border-inline-start: 1px solid var(--line);
  }

  .docs-nav__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 5px var(--_pad-x);
    border-radius: 6px;
    color: var(--muted);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }

  .docs-nav__link:visited { color: var(--muted); }

  .docs-nav__link:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--white) 5%, transparent);
  }

  .docs-nav__link:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }

  .docs-nav__link--parent,
  .docs-nav__link--parent:visited {
    color: var(--text);
    font-weight: 500;
  }

  .docs-nav__link[aria-current="page"] {
    color: var(--text);
    background: var(--bg-3);
    box-shadow: inset 2px 0 0 var(--teal);
  }

  .docs-nav__link[aria-current="page"]:focus-visible {
    box-shadow: inset 2px 0 0 var(--teal), var(--ring);
  }

  /* High-contrast mode drops the bar (box-shadow): underline instead. */
  @media (forced-colors: active) {
    .docs-nav__link[aria-current="page"] { text-decoration: underline 2px; }
  }

  .docs-nav__count {
    flex: none;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }

  /* Desktop copy. Stickiness and own scrolling come from .docs-layout__nav
     (layout.css), so this modifier only marks the copy for the switch below. */
  .docs-nav--sidebar { padding-inline-end: var(--space-1); }

  /* Phone/tablet copy: a closed <details>. */
  .docs-nav__drawer {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-2);
  }

  .docs-nav__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 14px;
    border-radius: var(--radius-md);
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
  }

  .docs-nav__summary::-webkit-details-marker { display: none; }

  .docs-nav__summary::after {
    content: "+";
    content: "+" / "";
    flex: none;
    margin-inline-start: auto;
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: 500;
    line-height: 1;
  }

  .docs-nav__drawer[open] > .docs-nav__summary::after {
    content: "\2212";
    content: "\2212" / "";
  }

  .docs-nav__summary:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }

  .docs-nav__current {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .docs-nav__drawer > .docs-nav {
    padding: var(--space-4) var(--space-2) var(--space-3);
    border-block-start: 1px solid var(--line);
  }

  /* Which copy shows, when both sit in the docs layout column. */
  .docs-layout__nav > .docs-nav--sidebar { display: none; }

  @media (min-width: 1024px) {
    .docs-layout__nav > .docs-nav--sidebar { display: block; }

    .docs-layout__nav > .docs-nav__drawer { display: none; }
  }

  /*
   * .pager — "Previous / Next" at the bottom of every docs page
   * (ticket S1-3). Markup: nav.pager[aria-label="Previous and next page"] >
   *   a.pager__item.pager__item--prev / --next > span.eyebrow.pager__label +
   *   span.pager__title. Either item may be missing; --next keeps the right
   *   column. Phone: the two cards stack.
   */
  .pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  @media (min-width: 720px) {
    .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .pager__item--next {
      grid-column: 2;
      align-items: flex-end;
      text-align: end;
    }
  }

  .pager__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--text);
    font-weight: 500;
    line-height: var(--lh-heading);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }

  .pager__item:visited { color: var(--text); }

  .pager__item:hover {
    border-color: var(--teal);
    background: var(--bg-2);
  }

  .pager__item:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }

  .pager__label {
    margin: 0;
    font-size: var(--fs-xs);
  }

  .pager__item--prev .pager__label::before {
    content: "\2190\00a0";
    content: "\2190\00a0" / "";
  }

  .pager__item--next .pager__label::after {
    content: "\00a0\2192";
    content: "\00a0\2192" / "";
  }

  .pager__title { overflow-wrap: anywhere; }

  /*
   * .docs-head, .docs-section — the parts of a docs page inside
   * .docs-layout__main (ticket S1-3; added by stream E for demo/page-docs.html).
   * Markup: div.docs-head > nav.breadcrumbs, p.endpoint (content.css),
   *   h1.docs-head__title, p.docs-head__desc;
   *   section.docs-section[aria-labelledby] > h2.docs-section__title + content
   *   (.table-wrap, .schema, p).
   * Docs headings are smaller than landing ones: H1 32–44px (variant 06),
   * section H2 20px. Space between the parts comes from the parent
   * (.stack and its .stack--gap-N modifiers), not from margins.
   */
  .docs-head {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
  }

  .docs-head__title {
    font-size: clamp(32px, 3.2vw, 44px);
    line-height: var(--lh-heading);
    letter-spacing: -0.03em;
  }

  .docs-head__desc {
    max-width: 68ch;
    color: var(--muted);
  }

  .docs-section {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
  }

  .docs-section__title {
    font-size: var(--fs-lg);
    letter-spacing: -0.01em;
  }

  /* A schema or tool name is one long word: break it at 320px (S5-2). */
  .docs-head__title,
  .docs-section__title {
    overflow-wrap: anywhere;
  }
}

/* ===== actions.css ===== */

/*
 * actions.css — действия и формы (UI-кит postwind.org, поток C).
 * Слой: @layer components (объявлен в tokens.css). Только var(--…) из tokens.css;
 * внутренние параметры компонентов — локальные переменные с префиксом --_.
 * Блоки: .btn, .link, .field/.input/.select/.textarea/.checkbox, .form, .form-status,
 *        .honeypot, .tabs, .copy, .disclosure.
 * Демо: demo/actions.html. Партиалы: partials/button.html, form-contact.html, form-states.html,
 *       tabs.html, copy-button.html, disclosure.html.
 */

@layer components {

  /* ------------------------------------------------------------------
   * .btn — кнопка или ссылка-кнопка.
   * Где: hero и плашка Status главной (Download / Read the API docs / Contact),
   *      шапка (.btn--primary .btn--sm), форма контактов (Send), карточки загрузки.
   * Модификаторы: --primary, --secondary (то же, что .btn без модификатора),
   *      --ghost, --danger; размеры --sm (32px), --lg (48px); --block (на телефоне
   *      на всю ширину). Элемент: .btn__icon (16px inline SVG, aria-hidden).
   * Состояния: :hover, :active, :focus-visible (--ring), :disabled / [aria-disabled="true"]
   *      (для <a> шаблон снимает href и ставит aria-disabled="true").
   * ------------------------------------------------------------------ */
  .btn {
    --_h: 40px;
    --_px: var(--space-4);
    --_fs: 15px;
    --_bg: transparent;
    --_fg: var(--text);
    --_bd: color-mix(in srgb, var(--white) 50%, transparent);
    --_bg-hover: color-mix(in srgb, var(--white) 8%, transparent);
    --_fg-hover: var(--text);
    --_bd-hover: var(--text);
    --_bg-active: color-mix(in srgb, var(--white) 14%, transparent);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--_h);
    padding: 0 var(--_px);
    font-family: var(--font-sans);
    font-size: var(--_fs);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--_fg);
    background: var(--_bg);
    border: 1px solid var(--_bd);
    border-radius: var(--radius-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      color var(--dur) var(--ease),
      transform var(--dur) var(--ease);
  }
  .btn:visited { color: var(--_fg); }
  .btn:hover:not(:disabled, [aria-disabled="true"]) {
    color: var(--_fg-hover);
    background: var(--_bg-hover);
    border-color: var(--_bd-hover);
  }
  .btn:active:not(:disabled, [aria-disabled="true"]) {
    background: var(--_bg-active);
    transform: translateY(1px);
  }
  .btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }
  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .btn[hidden] { display: none; }

  .btn__icon {
    flex: none;
    width: 16px;
    height: 16px;
  }

  .btn--primary {
    --_bg: var(--white);
    --_fg: var(--bg);
    --_bd: var(--white);
    --_bg-hover: var(--teal);
    --_fg-hover: var(--bg);
    --_bd-hover: var(--teal);
    --_bg-active: var(--teal-active);
  }
  .btn--primary:active:not(:disabled, [aria-disabled="true"]) { border-color: var(--teal-active); }

  .btn--secondary {
    --_bg: transparent;
    --_fg: var(--text);
    --_bd: var(--btn-border-secondary);
  }

  .btn--ghost {
    --_fg: var(--muted);
    --_bd: transparent;
    --_bd-hover: transparent;
    --_bg-hover: color-mix(in srgb, var(--white) 6%, transparent);
    --_bg-active: color-mix(in srgb, var(--white) 10%, transparent);
  }

  .btn--danger {
    --_fg: var(--danger);
    --_bd: var(--danger);
    --_fg-hover: var(--danger);
    --_bd-hover: var(--danger);
    --_bg-hover: color-mix(in srgb, var(--danger) 12%, transparent);
    --_bg-active: color-mix(in srgb, var(--danger) 20%, transparent);
  }

  .btn--sm { --_h: 32px; --_px: var(--space-3); --_fs: 14px; }
  .btn--lg { --_h: 48px; --_px: var(--space-5); --_fs: var(--fs-base); }

  .btn--block { width: 100%; }
  @media (min-width: 720px) {
    .btn--block { width: auto; }
  }

  /* ------------------------------------------------------------------
   * .link — текстовые ссылки вне .prose (там хватает base.css).
   * Где: «Next steps» на /download, ссылки в карточках, футер.
   * Модификаторы: --arrow («→» через ::after, сдвиг на hover; при reduced motion
   *      без сдвига), --quiet (цвет текста, подчёркивание только на hover).
   * Visited не отличается.
   * ------------------------------------------------------------------ */
  .link {
    color: var(--link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    border-radius: 2px;
    transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
  }
  .link:visited { color: var(--link); }
  .link:hover { text-decoration-thickness: 2px; }
  .link:focus-visible { outline: none; box-shadow: var(--ring); }

  .link--arrow {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    font-weight: 500;
    text-decoration-line: none;
  }
  .link--arrow::after {
    content: "→";
    content: "→" / "";
    display: inline-block;
    transition: transform var(--dur) var(--ease);
  }
  .link--arrow:hover { text-decoration-line: underline; }
  .link--arrow:hover::after { transform: translateX(3px); }

  .link--quiet,
  .link--quiet:visited {
    color: var(--text);
    text-decoration-line: none;
  }
  .link--quiet:hover { text-decoration-line: underline; }

  /* ------------------------------------------------------------------
   * .field — поле формы с подписью, подсказкой и ошибкой.
   * Где: форма контактов (/contact, тикет S3-1), будущие формы.
   * Элементы: __label (14px/500), __optional («(optional)» в подписи), __control
   *      (ставится на сам контрол или .select-wrap), __hint (13px, --dim),
   *      __error (13px, --danger, с иконкой __error-icon; связывается с контролом
   *      через aria-describedby, у контрола aria-invalid="true").
   * Контролы: .input, .select (внутри .select-wrap — стрелка ::after), .textarea,
   *      .checkbox (> .checkbox__input + .checkbox__label).
   * Состояния: :hover, :focus (рамка --teal + --ring), [aria-invalid="true"]
   *      (рамка --danger), :disabled, [readonly].
   * ------------------------------------------------------------------ */
  .field {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
  }
  .field__label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text);
  }
  .field__optional {
    font-weight: 400;
    color: var(--dim);
  }
  .field__control {
    width: 100%;
    min-width: 0;
  }
  .field__hint {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--dim);
  }
  .field__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--danger);
  }
  .field__error[hidden] { display: none; }
  .field__error-icon {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
  }

  .input,
  .select,
  .textarea {
    --_bd: var(--field-border);
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 10px var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--fs-base); /* 16px: iOS не масштабирует страницу при фокусе */
    font-weight: 400;
    line-height: 1.4;
    color: var(--text);
    background: var(--code);
    border: 1px solid var(--_bd);
    border-radius: var(--radius-sm);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .input::placeholder,
  .textarea::placeholder {
    color: var(--dim);
    opacity: 1;
  }
  .input:hover,
  .select:hover,
  .textarea:hover { --_bd: var(--muted); }
  .input:focus,
  .select:focus,
  .textarea:focus {
    --_bd: var(--teal);
    outline: none;
  }
  .input:focus-visible,
  .select:focus-visible,
  .textarea:focus-visible { box-shadow: var(--ring); }
  .input[aria-invalid="true"],
  .select[aria-invalid="true"],
  .textarea[aria-invalid="true"] { --_bd: var(--danger); }
  .input:disabled,
  .select:disabled,
  .textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .input[readonly],
  .textarea[readonly] { background: var(--bg-2); }

  .select {
    padding-right: 40px;
    cursor: pointer;
  }
  .select option {
    color: var(--text);
    background: var(--bg-2);
  }
  .select-wrap {
    position: relative;
    display: block;
    min-width: 0;
  }
  .select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--space-4);
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }

  .textarea {
    min-height: 160px;
    line-height: var(--lh-body);
    resize: vertical;
  }

  .checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    cursor: pointer;
  }
  .checkbox__input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--teal);
    cursor: pointer;
  }
  .checkbox__input:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }
  .checkbox__input:disabled,
  .checkbox__input:disabled + .checkbox__label {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ------------------------------------------------------------------
   * .form — раскладка формы.
   * Где: /contact (тикет S3-1).
   * Модификатор: --card (подложка --bg-2, рамка, радиус — как в варианте 06).
   * Элементы: __row (две колонки на ≥720px, одна на телефоне), __fieldset/__legend
   *      (группы полей), __actions (кнопки), __note (строка о приватности).
   * ------------------------------------------------------------------ */
  .form {
    --_gap: calc(var(--space-4) + var(--space-1)); /* 20px */
    display: grid;
    align-content: start;
    gap: var(--_gap);
    min-width: 0;
  }
  .form--card {
    padding: var(--space-5) var(--space-4);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }
  .form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--_gap) var(--space-4);
  }
  .form__fieldset {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .form__legend {
    padding: 0;
    margin-bottom: var(--space-2);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
  }
  .form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
  }
  .form__note {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--dim);
  }
  @media (min-width: 720px) {
    .form--card { padding: var(--space-6); }
    .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ------------------------------------------------------------------
   * .form-status — итог отправки формы (role="status").
   * Где: /contact после отправки; сводка ошибок над формой.
   * Модификаторы: --success (--ok), --error (--err). Рамка + иконка + текст:
   *      цвет не единственный носитель смысла.
   * Элементы: __icon (20px inline SVG), __body, __title, __text.
   * ------------------------------------------------------------------ */
  .form-status {
    --_c: var(--ok);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: color-mix(in srgb, var(--_c) 8%, var(--bg-2));
    border: 1px solid var(--_c);
    border-radius: var(--radius-sm);
  }
  .form-status[hidden] { display: none; }
  .form-status--success { --_c: var(--ok); }
  .form-status--error { --_c: var(--err); }
  .form-status__icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--_c);
  }
  .form-status__body { min-width: 0; }
  .form-status__title {
    margin: 0;
    font-weight: 600;
    color: var(--text);
  }
  .form-status__text {
    margin: 0;
    color: var(--muted);
  }

  /* .honeypot — поле-ловушка для ботов. В разметке вместе с .u-visually-hidden;
   * здесь то же скрытие, чтобы ловушка не появилась, если утилиты нет. */
  .honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ------------------------------------------------------------------
   * .tabs — табы. Разметка: div.tabs[data-tabs] > div.tabs__list[role=tablist]
   *      > button.tabs__tab[role=tab]; div.tabs__panel[role=tabpanel] > .tabs__panel-title.
   * Без JS: список табов скрыт, все панели видны одна под другой со своими
   *      заголовками. С JS (tabs.js ставит класс js на <html>): список виден,
   *      заголовки панелей скрыты, неактивные панели получают hidden.
   * Активный таб — [aria-selected="true"]: текст --text и бирюзовая линия 2px.
   * Фокус таба — кольцо внутрь (список прокручивается по горизонтали и обрезал бы
   *      внешнее --ring).
   * Модификаторы: --code (табы в шапке блока кода: «HTTP API | MCP», корень вместе
   *      с классом .code потока D), --install («Build from source | Docker Compose | Helm»).
   * Где: главная (секции 3 и 8), /docs (API/MCP), /download.
   * ------------------------------------------------------------------ */
  .tabs {
    --_ring-in: inset 0 0 0 2px var(--focus);
    min-width: 0;
  }
  .tabs__list {
    display: none;
    gap: var(--space-1);
    overflow-x: auto;
    scrollbar-width: thin;
    box-shadow: inset 0 -1px 0 var(--line);
  }
  .js .tabs__list { display: flex; }

  .tabs__tab {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: 0;
    padding: 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .tabs__tab::after {
    content: "";
    position: absolute;
    right: var(--space-2);
    bottom: 0;
    left: var(--space-2);
    height: 2px;
    background: transparent;
    border-radius: 2px 2px 0 0;
  }
  .tabs__tab:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--white) 4%, transparent);
  }
  .tabs__tab[aria-selected="true"] { color: var(--text); }
  .tabs__tab[aria-selected="true"]::after { background: var(--teal); }
  /* High-contrast mode repaints backgrounds: keep the bar as a system colour. */
  @media (forced-colors: active) {
    .tabs__tab[aria-selected="true"]::after { background: Highlight; forced-color-adjust: none; }
  }
  .tabs__tab:focus-visible {
    outline: none;
    box-shadow: var(--_ring-in);
  }

  .tabs__panel { min-width: 0; }
  .tabs__panel[hidden] { display: none; }
  .tabs__panel:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }
  .tabs__panel-title {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: var(--lh-heading);
    color: var(--text);
  }
  .js .tabs__panel-title { display: none; }

  /* --install: табы над отдельными блоками кода */
  .tabs--install {
    display: grid;
    gap: var(--space-5);
  }
  .js .tabs--install { gap: var(--space-4); }

  /* --code: табы — шапка блока .code; панели — его содержимое */
  .tabs--code > .tabs__list {
    gap: 0;
    padding: 0 var(--space-2);
  }
  .tabs--code .tabs__tab {
    min-height: 40px;
    padding: 0 var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
  }
  .tabs--code .tabs__panel:focus-visible { box-shadow: var(--_ring-in); }
  .tabs--code .tabs__panel-title {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text);
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
  }
  .tabs--code > .tabs__panel + .tabs__panel { border-top: 1px solid var(--line-2); }

  @media (max-width: 719.98px) {
    .tabs__tab { padding: 0 10px; font-size: var(--fs-sm); }
    .tabs__tab::after { right: 6px; left: 6px; }
  }

  /* ------------------------------------------------------------------
   * .copy — кнопка «Copy» в .code__head (поток D).
   * В разметке с атрибутом hidden; copy.js снимает hidden, копирует текст
   * ближайшего <pre> (или элемента из data-copy-target) и на 1.5 с ставит
   * состояние .is-copied («Copied») или .is-failed («Select & copy», текст выделен).
   * Элементы: __icon (14px inline SVG), __label (меняемый текст).
   * .copy-status — общий визуально скрытый role="status", его создаёт copy.js.
   * ------------------------------------------------------------------ */
  .copy {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 0 0 0 auto;
    padding: 0 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .copy[hidden] { display: none; }
  .copy:hover {
    color: var(--text);
    border-color: var(--muted);
  }
  .copy:active { background: color-mix(in srgb, var(--white) 6%, transparent); }
  .copy:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }
  .copy__icon {
    flex: none;
    width: 14px;
    height: 14px;
  }
  .copy.is-copied {
    color: var(--ok);
    border-color: var(--ok);
  }
  .copy.is-failed {
    color: var(--warn);
    border-color: var(--warn);
  }
  .copy-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ------------------------------------------------------------------
   * .disclosure — стилизованный <details>.
   * Где: «Show 23 fields» в дереве схемы (/docs), вложенные объекты схемы,
   *      свёрнутые подробности на телефоне.
   * Элементы: __summary (класс обязателен на <summary>; шеврон через ::before),
   *      __meta (счётчик справа, mono --dim), __body.
   * Модификатор: --inline (без рамки, summary — строка mono 13px --link;
   *      так его использует .schema__nested потока D).
   * ------------------------------------------------------------------ */
  .disclosure {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  .disclosure__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text);
    list-style: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur) var(--ease);
  }
  .disclosure__summary::-webkit-details-marker { display: none; }
  .disclosure__summary::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 2px solid var(--teal);
    border-bottom: 2px solid var(--teal);
    transform: rotate(-45deg);
    transition: transform var(--dur) var(--ease);
  }
  .disclosure[open] > .disclosure__summary::before { transform: rotate(45deg); }
  .disclosure__summary:hover { background: color-mix(in srgb, var(--white) 4%, transparent); }
  .disclosure__summary:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }
  .disclosure__meta {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--dim);
  }
  .disclosure__body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--line);
  }

  .disclosure--inline { border: 0; border-radius: 0; }
  .disclosure--inline > .disclosure__summary {
    display: inline-flex;
    gap: var(--space-2);
    min-height: 24px;
    padding: 0 var(--space-1) 0 0;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--link);
    border-radius: 4px;
  }
  .disclosure--inline > .disclosure__summary:hover {
    background: transparent;
    text-decoration-line: underline;
    text-underline-offset: 3px;
  }
  .disclosure--inline > .disclosure__summary::before { width: 6px; height: 6px; }
  .disclosure--inline > .disclosure__body {
    padding: var(--space-2) 0 0;
    border-top: 0;
  }

  /* ------------------------------------------------------------------
   * Уменьшенное движение: без переходов и сдвигов (дублирует --dur: 0ms из tokens.css).
   * ------------------------------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .btn,
    .link,
    .link--arrow::after,
    .input,
    .select,
    .textarea,
    .tabs__tab,
    .copy,
    .disclosure__summary,
    .disclosure__summary::before { transition: none; }
    .btn:active:not(:disabled, [aria-disabled="true"]) { transform: none; }
    .link--arrow:hover::after { transform: none; }
  }
}

/* ===== content.css ===== */

/* ==========================================================================
   content.css — поток D: код и подсветка, инлайновый код, метод+путь,
   таблицы, статусы ответов, дерево схемы, бейджи/методы/pills, callout,
   карточки, плитки фактов, dl.kv, .checks, схема архитектуры.

   Слой: @layer components (объявлен в tokens.css).
   Цвета — только var(--…) из tokens.css; оттенки — color-mix() от токена.
   Внутренние параметры компонентов — локальные переменные с префиксом --_
   (задаются и читаются только внутри этого файла).
   Чужие классы: .copy, .tabs--code, .tabs__* и .disclosure — поток C
   (actions.css); здесь только их место в раскладке, не внешний вид.
   Mobile-first: базовые стили для 360px, @media (min-width) расширяют.
   Теги внутри компонента стилизуются только там, где разметка их требует
   (th/td у таблицы, dt/dd у списков определений) и всегда под классом блока.
   Демо: demo/content.html. Партиалы: partials/*.html потока D.
   ========================================================================== */

@layer components {

  /* ------------------------------------------------------------------------
     Инлайновый код в тексте.
     Где: абзацы главной, описания операций /docs, подписи /download.
     Только «голый» <code> вне <pre>; у <code class="…"> свой вид в блоке.
     ------------------------------------------------------------------------ */
  :not(pre) > code:not([class]) {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--text);
    font-size: 0.92em;
    overflow-wrap: anywhere;
  }

  /* ------------------------------------------------------------------------
     .code — блок кода.
     Где: главная (секции 3 и 8, карточка hero), /docs (правая колонка,
     карточка MCP-инструмента), /download (команды). Тикеты S0-3, S1-3, S2-2.
     Разметка: figure.code > figcaption.code__head + pre.code__body > code.
     В одном блоке может идти несколько пар head/body (запрос + ответ);
     тогда второй и следующие head — div.code__head.
     Модификаторы: .code--inline-head (без шапки; .copy в углу),
                   .code--hero (полупрозрачный фон для .hero__card).
     В шапке справа — .copy (поток C). Блок с табами «HTTP API | MCP» —
     div.code.tabs.tabs--code: шапка — .tabs__list (поток C), в каждой
     .tabs__panel своя .code__head (что за пример + .copy) и pre.code__body.
     Markdown-сниппеты (goldmark) дают голый <pre><code class="language-x">
     без .code__body: .code > pre и .code > div > pre (панель таба) выглядят
     так же, а соседние pre + pre разделены линией.
     ------------------------------------------------------------------------ */
  .code {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--code);
    color: var(--text);
  }

  .code__head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    min-height: 44px;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
    border-bottom: 1px solid var(--line);
    font: 500 var(--fs-xs)/1.4 var(--font-mono);
    color: var(--dim);
  }

  .code__label {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .code__lang {
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
  }

  /* Basis 0: the title never drops to its own line (which would start the
     line with "·"); a long title wraps inside itself instead. */
  .code__title {
    flex: 1 1 0%;
    min-width: 0;
    color: var(--muted);
  }

  .code__lang + .code__title::before,
  .code__label > .status + .code__title::before {
    content: "·";
    content: "·" / "";
    margin-right: var(--space-2);
    color: var(--dim);
  }

  .code__body,
  .code > pre,
  .code > div > pre {
    margin: 0;
    padding: var(--space-4);
    overflow-x: auto;
    background: transparent;
    color: var(--text);
    font: 400 var(--fs-sm)/var(--lh-code) var(--font-mono);
    tab-size: 2;
    white-space: pre;
  }

  .code__body > code,
  .code > pre > code,
  .code > div > pre > code {
    font: inherit;
    color: inherit;
  }

  .code > pre + pre,
  .code > div > pre + pre {
    border-top: 1px solid var(--line);
  }

  /* pre прокручивается — ему дают tabindex="0"; кольцо внутрь, т. к. .code обрезает края */
  .code__body:focus-visible,
  .code > pre:focus-visible,
  .code > div > pre:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--focus);
  }

  .code__body + .code__head {
    border-top: 1px solid var(--line);
  }

  .code--inline-head > .copy {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
  }

  .code--inline-head > .code__body {
    padding-right: 80px;
  }

  .code--hero {
    border-color: color-mix(in srgb, var(--white) 10%, transparent);
    background: color-mix(in srgb, var(--code) 86%, transparent);
  }

  .code--hero > .code__head {
    border-color: color-mix(in srgb, var(--white) 10%, transparent);
  }

  /* --- Подсветка. Формат серверного токенизатора (02-docs-section §7.4). ---
     Классы ставятся на <span> внутри pre > code. Не привязаны к .code,
     чтобы работать и в карточке hero, и в любом другом pre. */
  .tok-key   { color: var(--violet); }
  .tok-str   { color: var(--teal); }
  .tok-num   { color: var(--amber); }
  .tok-lit   { color: var(--rose); }
  .tok-cmt   { color: var(--dim); }
  .tok-cmd   { color: var(--text); font-weight: 600; }
  .tok-flag  { color: var(--violet); }
  .tok-var   { color: var(--amber); }
  .tok-punct { color: var(--dim); }

  /* ------------------------------------------------------------------------
     .endpoint — строка «метод + путь» операции.
     Где: шапка операции /docs/api/…, заголовки примеров. Тикет S1-3.
     Разметка: p.endpoint > span.method.method--post + code.endpoint__path
               (параметры пути — span.endpoint__param).
     ------------------------------------------------------------------------ */
  .endpoint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0;
  }

  .endpoint__path {
    min-width: 0;
    font: 500 14px/1.5 var(--font-mono);
    color: var(--text);
    overflow-wrap: anywhere;
  }

  .endpoint__param {
    color: var(--violet);
  }

  /* ------------------------------------------------------------------------
     .table — таблицы параметров, заголовков и ответов.
     Где: /docs (операция API, аргументы MCP), /download (требования).
     Разметка: div.table-wrap[role=region][tabindex=0][aria-label] > table.table.
     На телефоне таблица остаётся таблицей: прокрутка внутри .table-wrap.
     Модификаторы: .table--params (Name | Type | Description),
                   .table--responses (Status | Description).
     ------------------------------------------------------------------------ */
  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg);
  }

  .table-wrap:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }

  .table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
  }

  .table th,
  .table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
  }

  .table th {
    background: var(--bg-2);
    color: var(--dim);
    font: 500 var(--fs-xs)/1.3 var(--font-mono);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .table td {
    color: var(--text);
  }

  .table tbody tr:last-child > td {
    border-bottom: 0;
  }

  /* Markdown tables (.prose): a config key keeps its column wide enough
     instead of breaking per letter; a phone scrolls the .table-wrap. */
  .prose .table code { overflow-wrap: break-word; }

  .table__name {
    font: 500 13px/1.5 var(--font-mono);
    color: var(--text);
  }

  .table__type {
    font: 400 var(--fs-xs)/1.6 var(--font-mono);
    color: var(--muted);
    white-space: nowrap;
  }

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

  .table--params {
    min-width: 32rem;
  }

  .table--params td:first-child {
    white-space: nowrap;
  }

  .table--params .pill {
    margin-left: var(--space-2);
  }

  .table--responses td:first-child {
    width: 1%;
    white-space: nowrap;
  }

  /* --- .status — код ответа: точка + число (цвет не единственный носитель) --- */
  .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 13px/1.5 var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text);
  }

  .status__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
  }

  .status--2xx { color: var(--teal); }
  .status--3xx { color: var(--violet); }
  .status--4xx { color: var(--amber); }
  .status--5xx { color: var(--rose); }

  /* ------------------------------------------------------------------------
     .schema — дерево схемы JSON (рекурсивный partial "schema", 02 §4.7).
     Где: /docs — схема ответа и тела запроса, аргументы MCP, /docs/api/schemas.
     Разметка: ul.schema.schema--root > li.schema__caption + li.schema__field…;
     вложенный объект — details.disclosure.disclosure--inline.schema__nested
     > summary.disclosure__summary + div.disclosure__body > ul.schema; остаток списка — li.schema__more с тем же details.
     Строка поля: .schema__line (.schema__name, .schema__type, .pill--required),
     .schema__enum (значения .pill), .schema__desc. nullable — текстом «| null».
     ------------------------------------------------------------------------ */
  .schema {
    display: grid;
    margin: 0;
    padding: 0 0 0 var(--space-3);
    border-left: 1px solid var(--line);
    list-style: none;
    font-size: 14px;
  }

  .schema--root {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-2);
  }

  .schema__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--line);
    font: 400 var(--fs-xs)/1.5 var(--font-mono);
    color: var(--dim);
  }

  .schema__root-name {
    font: 600 14px/1.4 var(--font-mono);
    color: var(--text);
    overflow-wrap: anywhere;
  }
  .schema__caption { min-width: 0; }

  .schema__field,
  .schema__more {
    position: relative;
    min-width: 0;
    padding: 6px 0 6px var(--space-3);
  }

  /* засечка от линии вложенности к полю */
  .schema:not(.schema--root) > .schema__field::before,
  .schema:not(.schema--root) > .schema__more::before {
    content: "";
    position: absolute;
    top: 17px;
    left: calc(-1 * var(--space-3));
    width: calc(var(--space-3) + 6px);
    border-top: 1px solid var(--line);
  }

  .schema--root > .schema__field,
  .schema--root > .schema__more {
    padding-left: 0;
  }

  .schema__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) 10px;
  }

  .schema__name {
    font: 500 13px/1.5 var(--font-mono);
    color: var(--text);
    overflow-wrap: anywhere;
  }

  .schema__type {
    font: 400 var(--fs-xs)/1.5 var(--font-mono);
    color: var(--muted);
    overflow-wrap: anywhere;
  }

  .schema__desc {
    max-width: 68ch;
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
  }

  .schema__enum {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
  }

  .schema__nested {
    margin-top: var(--space-1);
  }

  .schema__nested .schema {
    margin-left: 3px;
  }

  /* ------------------------------------------------------------------------
     Бейджи, методы, pills.
     .badge — метка статуса (шапка, подвал: .badge--prerelease; заливки
       .badge--teal/--amber/--rose/--violet для плашек в карточках).
     .method — HTTP-метод, всегда с текстом (цвет дублирует слово).
     .pill — нейтральная метка 12px (значения enum, теги);
       .pill--required, .pill--optional, .pill--scope, .pill--confirm.
     Где: все страницы; /docs — шапка операции, таблицы, дерево, карточка MCP.
     ------------------------------------------------------------------------ */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-pill);
    color: var(--muted);
    font: 500 var(--fs-xs)/1.2 var(--font-mono);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .badge--prerelease {
    border-color: color-mix(in srgb, var(--teal) 45%, transparent);
    background: color-mix(in srgb, var(--teal) 6%, transparent);
    color: var(--teal);
  }

  .badge--prerelease::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .badge--teal   { border-color: var(--teal);   background: var(--teal);   color: var(--teal-ink); }
  .badge--amber  { border-color: var(--amber);  background: var(--amber);  color: var(--amber-ink); }
  .badge--rose   { border-color: var(--rose);   background: var(--rose);   color: var(--bg); }
  .badge--violet { border-color: var(--violet); background: var(--violet); color: var(--bg); }

  .method {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--bg-3);
    color: var(--text);
    font: 600 var(--fs-xs)/1 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .method--get    { background: var(--violet); color: var(--bg); }
  .method--post   { background: var(--teal);   color: var(--teal-ink); }
  .method--put,
  .method--patch  { background: var(--amber);  color: var(--amber-ink); }
  .method--delete { background: var(--rose);   color: var(--bg); }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-pill);
    background: var(--bg-3);
    color: var(--text);
    font: 500 var(--fs-xs)/1.3 var(--font-mono);
    white-space: nowrap;
  }

  .pill--required {
    border-color: var(--amber);
    background: transparent;
    color: var(--amber);
  }

  .pill--optional {
    border-style: dashed;
    background: transparent;
    color: var(--dim);
  }

  .pill--scope {
    border-color: color-mix(in srgb, var(--violet) 55%, transparent);
    background: color-mix(in srgb, var(--violet) 10%, transparent);
    color: var(--violet);
  }

  .pill--confirm {
    border-color: var(--amber);
    background: var(--amber);
    color: var(--amber-ink);
  }

  /* ------------------------------------------------------------------------
     .callout — врезка.
     Где: /download (уведомление pre-release, .callout--warn), /docs
     (правила, предупреждения), главная (заметки).
     Разметка: div.callout.callout--info[role=note] > svg.callout__icon
               + div.callout__body > p.callout__title + p…
     Модификаторы: --info (teal), --warn (amber), --danger (rose),
                   --note (рамка --line-2, без иконки).
     ------------------------------------------------------------------------ */
  .callout {
    --_accent: var(--line-2);
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4) 20px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--_accent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--_accent) 5%, var(--bg-2));
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
  }

  .callout__icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--_accent);
  }

  .callout__body {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
  }

  .callout__body > * {
    margin: 0;
  }

  .callout__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
  }

  .callout--info   { --_accent: var(--teal); }
  .callout--warn   { --_accent: var(--amber); }
  .callout--danger { --_accent: var(--rose); }

  .callout--note {
    grid-template-columns: minmax(0, 1fr);
    background: var(--bg-2);
  }

  /* ------------------------------------------------------------------------
     .card — карточка.
     Где: главная (сервисы, Deliverability/Unsubscribe), /download (платформы,
     Next steps), /docs (карточка MCP-инструмента). Тикеты S0-3, S1-3, S2-2.
     Элементы: __icon, __eyebrow, __title, __name, __text, __footer,
               __target, __meta, __status, __dl, __section-title, __args.
     Модификаторы: --feature (иконка 24px сверху), --service (имя mono + строка),
       --link (вся карточка — ссылка, стрелка), --asset (+ .is-unavailable),
       --tool (MCP-инструмент: Call it / Needs / Returns).
     ------------------------------------------------------------------------ */
  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-2);
    color: var(--text);
  }

  .card__icon {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--teal);
  }

  .card__eyebrow {
    margin: 0;
    color: var(--dim);
    font: 500 var(--fs-xs)/1.4 var(--font-mono);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .card__title {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .card__text {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
  }

  .card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-2);
  }

  /* --feature */
  .card--feature {
    gap: var(--space-4);
  }

  /* --service */
  .card--service .card__title {
    color: var(--teal);
    font: 500 14px/1.3 var(--font-mono);
    letter-spacing: 0;
  }

  /* --link: <a class="card card--link"> */
  .card--link {
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }

  .card--link:hover {
    border-color: var(--line-2);
    color: var(--text);
  }

  .card--link:active {
    background: var(--bg-3);
  }

  .card--link .card__title::after {
    content: "→";
    content: "→" / "";
    display: inline-block;
    margin-left: 0.4em;
    color: var(--teal);
    transition: transform var(--dur) var(--ease);
  }

  .card--link:hover .card__title::after {
    transform: translateX(3px);
  }

  /* --asset */
  .card__target {
    color: var(--violet);
    font: 400 13px/1.4 var(--font-mono);
    overflow-wrap: anywhere;
  }

  .card__meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
    margin: 0;
    font: 400 13px/1.5 var(--font-mono);
  }

  .card__meta dt {
    color: var(--dim);
  }

  .card__meta dd {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
  }

  .card__status {
    display: inline-flex;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
  }

  .card--asset.is-unavailable {
    border-style: dashed;
    border-color: var(--line-2);
  }

  .card--asset.is-unavailable .card__title,
  .card--asset.is-unavailable .card__target {
    color: var(--muted);
  }

  /* platform.js marks the visitor's platform (S2-2); the label stays hidden
     until then, display: inline-flex would otherwise override [hidden]. */
  .card--asset.is-recommended {
    border-color: var(--teal);
  }

  .card--asset.is-recommended .card__status {
    border-color: var(--teal);
    color: var(--teal);
  }

  .card__status[hidden] {
    display: none;
  }

  /* --tool */
  .card--tool {
    gap: var(--space-4);
    border-color: var(--line-2);
  }

  .card--tool .card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) 10px;
  }

  .card__name {
    color: var(--text);
    font: 500 15px/1.3 var(--font-mono);
    overflow-wrap: anywhere;
  }

  .card__dl {
    display: grid;
    gap: var(--space-3);
    margin: 0;
  }

  .card__dl dt {
    color: var(--dim);
    font: 500 var(--fs-xs)/1.3 var(--font-mono);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .card__dl dd {
    margin: var(--space-1) 0 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
  }

  .card__section-title {
    margin: 0 0 var(--space-2);
    color: var(--dim);
    font: 500 var(--fs-xs)/1.3 var(--font-mono);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .card__args {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    list-style: none;
  }

  .card__arg {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
  }

  .card__arg-name {
    color: var(--text);
    font: 500 13px/1.5 var(--font-mono);
    overflow-wrap: anywhere;
  }

  .card__arg-type {
    color: var(--muted);
    font: 400 var(--fs-xs)/1.5 var(--font-mono);
  }

  /* ------------------------------------------------------------------------
     .stats — плитки фактов (proof strip).
     Где: главная, секция 2 «Факты». Тикет S0-3.
     Разметка: ul.stats > li.stats__item > a.stat > .stat__value + .stat__label
               + .stat__link. Каждая плитка — ссылка на docs/download.
     Сетка: 1 колонка (телефон, значение и подпись в строку) → 2 (≥720px)
            → 4 (≥1024px); разделители — 1px --line через gap.
     ------------------------------------------------------------------------ */
  .stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--line);
    list-style: none;
  }

  .stats__item {
    display: flex;
    min-width: 0;
    background: var(--bg);
  }

  .stat {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    min-width: 0;
    padding: 14px var(--space-4);
    color: var(--muted);
    text-decoration: none;
    transition: background-color var(--dur) var(--ease);
  }

  .stat:hover {
    background: var(--bg-2);
    color: var(--muted);
  }

  .stat:focus-visible {
    box-shadow: inset 0 0 0 2px var(--focus);
  }

  .stat__value {
    color: var(--text);
    font: 500 22px/1.2 var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    transition: color var(--dur) var(--ease);
  }

  .stat:hover .stat__value {
    color: var(--teal);
  }

  .stat__label {
    font-size: 14px;
    line-height: 1.4;
  }

  .stat__link {
    flex-basis: 100%;
    color: var(--teal);
    font-size: 13px;
    line-height: 1.4;
  }

  @media (min-width: 720px) {
    .stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      gap: var(--space-1);
      padding: 18px 20px;
    }

    .stat__value {
      font-size: 28px;
    }

    .stat__link {
      flex-basis: auto;
      margin-top: auto;
      padding-top: var(--space-1);
    }
  }

  @media (min-width: 1024px) {
    .stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* ------------------------------------------------------------------------
     dl.kv — список «термин → значение».
     Где: /download (Requirements), /docs (метаданные операции). Тикеты S1-3, S2-2.
     Разметка: dl.kv > dt + dd (пары подряд). На ≥720px — строка 160px | 1fr.
     ------------------------------------------------------------------------ */
  .kv {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    border-top: 1px solid var(--line);
  }

  .kv dt {
    padding-top: var(--space-3);
    color: var(--dim);
    font: 500 var(--fs-xs)/1.5 var(--font-mono);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .kv dd {
    margin: 0;
    padding: var(--space-1) 0 var(--space-3);
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
  }

  @media (min-width: 720px) {
    .kv {
      grid-template-columns: 160px minmax(0, 1fr);
    }

    .kv dt {
      padding: var(--space-3) 0;
      border-bottom: 1px solid var(--line);
      line-height: 24px;
    }

    .kv dd {
      padding: var(--space-3) 0 var(--space-3) var(--space-4);
    }
  }

  /* ------------------------------------------------------------------------
     .checks — список с бирюзовой галочкой.
     Где: главная, секция 5 «Deliverability by default». Тикет S0-3.
     Разметка: ul.checks > li.checks__item. Галочка — ::before (кружок)
     + ::after (маска с inline SVG, цвет — background-color из токена).
     ------------------------------------------------------------------------ */
  .checks {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    list-style: none;
  }

  .checks__item {
    position: relative;
    padding: var(--space-4) 0 var(--space-4) 36px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    line-height: 1.6;
  }

  .checks__item::before,
  .checks__item::after {
    content: "";
    position: absolute;
    top: calc(var(--space-4) + 2px);
    left: 0;
    width: 22px;
    height: 22px;
  }

  .checks__item::before {
    border: 1px solid color-mix(in srgb, var(--teal) 50%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--teal) 12%, transparent);
  }

  .checks__item::after {
    background: var(--teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 11.4l2.6 2.6L15 8.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 11.4l2.6 2.6L15 8.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
  }

  /* ------------------------------------------------------------------------
     .diagram — схема архитектуры «binary → ClickHouse / recipient MX /
     inbound SMTP» (inline SVG, partials/diagram.html).
     Где: главная, секция 4 «One binary, six subservices». Тикет S0-3.
     Две раскладки: .diagram__svg--tall (по умолчанию, телефон) и
     .diagram__svg--wide (≥900px — как задано для схемы в SPEC §D; на 720px
     широкая схема ужимает подписи до ~7px, поэтому не общий брейкпоинт).
     Цвета SVG — классами ниже; hex внутри SVG нет.
     ------------------------------------------------------------------------ */
  .diagram {
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-2);
  }

  .diagram__svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .diagram__svg--wide {
    display: none;
  }

  .diagram__svg--tall {
    max-width: 360px;
    margin-inline: auto;
  }

  @media (min-width: 900px) {
    .diagram {
      padding: var(--space-5);
    }

    .diagram__svg--wide {
      display: block;
    }

    .diagram__svg--tall {
      display: none;
    }
  }

  .diagram__box {
    fill: var(--bg-3);
    stroke: var(--line-2);
  }

  .diagram__box--bin {
    fill: var(--bg-2);
    stroke: color-mix(in srgb, var(--teal) 60%, transparent);
  }

  .diagram__chip {
    fill: color-mix(in srgb, var(--line) 55%, var(--bg-3));
    stroke: var(--line-2);
  }

  .diagram__title {
    fill: var(--text);
    font: 600 15px var(--font-sans);
  }

  .diagram__meta {
    fill: var(--muted);
    font: 400 12px var(--font-mono);
  }

  .diagram__chip-text {
    fill: var(--text);
    font: 500 12px var(--font-mono);
  }

  .diagram__line {
    fill: none;
    stroke: var(--teal);
    stroke-width: 1.5;
  }

  .diagram__line--back {
    stroke: var(--violet);
    stroke-dasharray: 5 5;
  }

  .diagram__arrow {
    fill: var(--teal);
  }

  .diagram__arrow--back {
    fill: var(--violet);
  }
}

/* ===== page-docs.css ===== */

/* ==========================================================================
   page-docs.css — styles of the /docs pages only (D34)

   Owner: ticket S1-3. Rules go only inside @layer components, and every class
   starts with the page prefix (.docs-…), apart from three modifiers of kit
   components the docs pages alone use: .schema__field--confirm (the confirm
   argument of a tool, 02 §5.3), .schema-raw (a schema node the parser does
   not understand, 02 §1.4) and .table--tools (the tool table, 02 §5.5).
   Colors only through tokens; build.sh checks it.
   ========================================================================== */

@layer components {
  /* /docs cards: the guide links under the text, the code at the bottom. */
  .docs-card {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    min-width: 0;
  }

  .docs-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* A path in a table or a sentence wraps at any character on a phone. */
  .docs-path {
    font: 500 var(--fs-sm) / 1.5 var(--font-mono);
    overflow-wrap: anywhere;
  }

  .docs-head__desc > p + p { margin-block-start: var(--space-3); }

  /* A badge in the page head may hold a long tool name: it wraps instead
     of widening the column on a phone. */
  .docs-head .pill {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .docs-nav__sublist .docs-nav__link { overflow-wrap: anywhere; }

  /* A tool name as the page title: the heading's size, no code chip. */
  .docs-head__name {
    overflow-wrap: anywhere;
    font-size: inherit;
    letter-spacing: -0.02em;
  }

  /* A page without examples (an index, a guide, a group) gives the third
     column of .docs-layout to its text. */
  @media (min-width: 1240px) {
    .docs-layout:not(:has(> .docs-layout__aside)) {
      grid-template-columns: 248px minmax(0, 1fr);
    }
  }

  /* One response of an operation; one schema of /docs/api/schemas. */
  .docs-response,
  .docs-schema {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
  }

  .docs-response + .docs-response {
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--line);
  }

  .docs-response__title,
  .docs-schema__title,
  .docs-tools__group {
    font-size: var(--fs-md);
    scroll-margin-block-start: var(--space-5);
  }

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

  .docs-tools__group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    margin-block-start: var(--space-4);
  }

  .docs-tools__api { font-size: var(--fs-sm); font-weight: 400; }

  /* The confirm argument stands out in the input tree of a tool. */
  .schema .schema__field--confirm {
    border-inline-start: 2px solid var(--amber);
    padding-inline-start: var(--space-3);
  }

  .schema-raw > summary {
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--muted);
  }

  .schema-raw > pre { max-height: 20rem; overflow: auto; }

  .table--tools { min-width: 40rem; }

  .table--tools td:first-child,
  .table--tools td:nth-child(3) { white-space: nowrap; }
}

/* ===== page-download.css ===== */

/* ==========================================================================
   page-download.css — styles of the /download pages only (D34)

   Owner: ticket S2-2. Rules go only inside @layer components, and every class
   starts with the page prefix (.download-…). Colors only through tokens; build.sh
   checks it. Shared components belong in the other kit files, not here.
   ========================================================================== */

@layer components {
  /* The Download button carries the full file name: let it wrap on a phone. */
  .download-asset__btn {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* ===== page-contact.css ===== */

/* ==========================================================================
   page-contact.css — styles of the /contact pages only (D34)

   Owner: ticket S3-1. Rules go only inside @layer components, and every class
   starts with the page prefix (.contact-…). Colors only through tokens; build.sh
   checks it. Shared components belong in the other kit files, not here.
   ========================================================================== */

@layer components {
  /* --- .contact-layout: the form, then the direct channels card ----------
     One column on a phone (the card goes under the form, 05 §5); from
     1024px the form takes the wider column on the left. */
  .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
  }

  .contact-layout > * {
    min-width: 0;
  }

  @media (min-width: 1024px) {
    .contact-layout {
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }
  }
}