/* ============================================================================
   07-blueprint.css — "terminal-grade infrastructure"
   ----------------------------------------------------------------------------
   The rendering language reviewed on ninedeploy.com and guardianwaf.com:
   blueprint paper, hairline panels, oversized tight-tracked display, mono
   micro-labels and instrument readouts.

   This layer sits LAST (declared after `utilities` in 01-tokens.css), so it
   restyles the shared primitives without editing their definitions, and every
   value it introduces comes from the token file — no literals below except
   measurement-safe fallbacks.
   ========================================================================= */

@layer blueprint {

  /* --- Shared: micro-label ------------------------------------------------ */

  .bp-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
    font-family: var(--font-label);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .bp-eyebrow__idx {
    color: var(--data);
    font-variant-numeric: tabular-nums;
  }
  /* The rule that trails every label: the hairline is the ornament, not a
     box, so it stretches to whatever width the row has left. */
  .bp-eyebrow::after {
    content: "";
    flex: 1 1 auto;
    block-size: 1px;
    background-color: var(--bp-hair);
  }

  .bp-live {
    display: inline-block;
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background-color: var(--bp-live);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-live) 22%, transparent);
  }

  /* --- Shared: section header -------------------------------------------- */

  .bp-shead { display: grid; gap: var(--space-s); }
  .bp-shead h2 { font-size: var(--step-5); }
  .bp-shead__lead {
    color: var(--ink-2);
    font-size: var(--step-1);
    max-inline-size: 62ch;
  }

  /* --- Hero --------------------------------------------------------------- */

  .bp-hero {
    position: relative;
    padding-block: var(--space-2xl) var(--space-xl);
    overflow: clip;
    border-block-end: 1px solid var(--rule);
    background-color: var(--paper);
  }
  /* Drafting grid. Two crossed hairline sets at a 32px module plus a heavier
     one every 8 modules — a drawing sheet, not a texture blur. */
  .bp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(to right, var(--bp-grid) 1px, transparent 1px),
      linear-gradient(to bottom, var(--bp-grid) 1px, transparent 1px),
      linear-gradient(to right, var(--bp-grid-strong) 1px, transparent 1px),
      linear-gradient(to bottom, var(--bp-grid-strong) 1px, transparent 1px);
    background-size: 32px 32px, 32px 32px, 256px 256px, 256px 256px;
    mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
  }

  .bp-hero__grid {
    position: relative;
    display: grid;
    gap: var(--space-2xl);
    align-items: start;
  }
  @media (min-width: 64em) {
    .bp-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  }

  .bp-hero__main { display: grid; gap: var(--space-l); justify-items: start; }

  .bp-hero__title {
    font-size: var(--step-6);
    font-weight: 700;
    max-inline-size: 18ch;
  }
  .bp-hero__lead {
    color: var(--ink-2);
    font-size: var(--step-1);
    max-inline-size: 52ch;
  }

  /* --- Hero: cold-aisle background --------------------------------------- */
  /* The home hero runs on the live site's cold-aisle canvas (hero-aisle.ts),
     so it is a dark band in BOTH themes, the way dgnteknoloji.com renders it.
     Instead of restyling every child, the hero re-scopes the colour tokens
     to their dark values: terminal, readout, buttons and labels then follow
     automatically. The derived tokens (--bp-hair…) are redeclared here
     because a custom property computed on :root does not re-resolve below. */
  .bp-hero--aisle {
    isolation: isolate;
    border-block-end-color: #28322e;
    background-color: #0a100e;
    color: var(--on-deep);

    --paper:          #0a100e;
    --surface:        rgb(12 19 17 / 0.78);
    --surface-sunken: rgb(8 13 11 / 0.8);
    --ink:            #eef1ee;
    --ink-2:          #c3ccc8;
    --ink-3:          #a9b3af;
    --data:           #8cbcc4;
    --brand-deep:     #9bd93e;
    --rule:           rgb(255 255 255 / 0.16);
    --rule-strong:    rgb(255 255 255 / 0.42);
    --bp-hair:        rgb(255 255 255 / 0.16);
    --bp-hair-soft:   rgb(255 255 255 / 0.09);
    --bp-panel:       rgb(12 19 17 / 0.78);
    --bp-live:        #9bd93e;
    --focus-ring:     2px solid #9bd93e;
  }
  /* Stacked layout: text runs over the bright vanishing point, so the scrim
     darkens evenly instead of only from the left. */
  @media (max-width: 63.99em) {
    .bp-hero--aisle .hero__scrim {
      background: linear-gradient(to bottom, rgb(8 13 11 / 0.62), rgb(8 13 11 / 0.5) 45%, rgb(8 13 11 / 0.8));
    }
  }
  /* The drafting grid would fight the perspective lines; the aisle is the
     drawing here. */
  .bp-hero--aisle::before { display: none; }
  .bp-hero--aisle .bp-hero__grid { z-index: 1; }

  @media (min-width: 64em) {
    .bp-hero--aisle { padding-block: var(--space-3xl) var(--space-2xl); }
  }

  /* Full-screen hero: the band fills the first screen under the sticky
     header on any resolution and centres its content. svh (not dvh) so the
     mobile URL bar collapsing does not resize the canvas mid-scroll; the
     vh line is the fallback. Content taller than the screen still grows. */
  .bp-hero--aisle {
    display: grid;
    align-content: center;
    min-block-size: calc(100vh - var(--header-h) - 1px);
    min-block-size: calc(100svh - var(--header-h) - 1px);
  }

  /* The card sits on a moving picture: frost it so text never sits on a
     bright LED. */
  .bp-hero--aisle .herocards__stack {
    background-color: rgb(10 16 14 / 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  /* The card's top edge lines up with the headline, not the 25 YIL badge:
     on desktop the text column becomes a subgrid (badge / title / lead
     rows) so the card can start on the title row whatever the badge or
     font size is. */
  @media (min-width: 64em) {
    .bp-hero--aisle .bp-hero__grid {
      grid-template-rows: auto auto auto;
      row-gap: var(--space-l);
    }
    .bp-hero--aisle .bp-hero__main {
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
    }
    .bp-hero--aisle .herocards {
      grid-row: 2 / -1;
      align-self: start;
    }
    /* The title's line box starts above the letters (half-leading plus the
       font's ascender room), so a card aligned to the box looked lower than
       the headline. Trim the box to the cap height: the card's top edge then
       meets the top of the letters. Browsers without text-box keep the
       box-top alignment. */
    .bp-hero--aisle .bp-hero__title { text-box: trim-start cap alphabetic; }
  }
  /* The dots belong to the card: pull them in. The 44px buttons keep their
     hit area; only the gap above them goes. */
  .bp-hero--aisle .herocards { gap: 0; }

  /* --- Numbered service index -------------------------------------------- */

  .bp-index {
    display: grid;
    list-style: none;
    /* Block-start margin is left to .flow, which spaces it from the
       section header; this layer would otherwise override it. */
    margin-inline: 0;
    margin-block-end: 0;
    padding: 0;
    border-block-start: 1px solid var(--rule);
  }
  .bp-index__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2xs) var(--space-m);
    padding-block: var(--space-m);
    border-block-end: 1px solid var(--rule);
    text-decoration: none;
    color: var(--ink);
    transition: background-color var(--dur-fast) var(--ease);
  }
  .bp-index__row:hover { background-color: var(--surface); }
  .bp-index__num {
    align-self: start;
    padding-block-start: 0.35em;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-mono);
    color: var(--data);
    font-variant-numeric: tabular-nums;
  }
  .bp-index__title {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 600;
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-snug);
  }
  .bp-index__desc {
    grid-column: 2;
    color: var(--ink-2);
    max-inline-size: 62ch;
  }
  .bp-index__go {
    grid-row: 1 / span 2;
    grid-column: 3;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    align-self: center;
    font-family: var(--font-label);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--data);
    white-space: nowrap;
  }
  .bp-index__row:hover .bp-index__go { text-decoration: underline; text-underline-offset: 0.25em; }

  @media (max-width: 47.99em) {
    .bp-index__row { grid-template-columns: auto minmax(0, 1fr); }
    .bp-index__go {
      grid-row: auto;
      grid-column: 2;
      justify-self: start;
      margin-block-start: var(--space-3xs);
    }
  }

  /* --- Numbered stages ---------------------------------------------------- */

  .bp-stages {
    display: grid;
    gap: 0;
    list-style: none;
    /* Block-start margin is left to .flow, which spaces it from the
       section header; this layer would otherwise override it. */
    margin-inline: 0;
    margin-block-end: 0;
    padding: 0;
    border-block-start: 1px solid var(--rule);
  }
  @media (min-width: 64em) {
    .bp-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .bp-stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-block: var(--space-l);
    padding-inline: 0;
    border-block-end: 1px solid var(--rule);
  }
  .bp-stage__num {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-mono);
    color: var(--data);
    font-variant-numeric: tabular-nums;
  }
  .bp-stage__title {
    font-size: var(--step-2);
    letter-spacing: var(--tracking-display);
  }
  .bp-stage__text { color: var(--ink-2); font-size: var(--step--1); }
  /* margin-top: auto pins the tag to the foot of the cell, so every tag in a
     row sits on one line however long the copy above it runs. */
  .bp-stage__meta {
    margin: auto 0 0;
    padding-block-start: var(--space-3xs);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-mono);
    color: var(--ink-3);
  }
  /* Body wrapper (collapsible on phones). On wider screens it simply fills
     the card, so the meta tag can still sit at the foot via margin-top. */
  .bp-stage__body { flex: 1 1 auto; display: flex; flex-direction: column; }
  .bp-stage__inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  /* Phones: accordion (assets/ts/dgn/stages.ts sets data-accordion and the
     toggles). Height animates with the grid-rows 0fr → 1fr technique, so no
     JS measuring and no layout jump. */
  .bp-stages[data-accordion] .bp-stage {
    padding-block: var(--space-s);
    gap: var(--space-3xs);
  }
  .bp-stages[data-accordion] .bp-stage:not(.is-open) { padding-block-end: var(--space-2xs); }
  .bp-stages[data-accordion] .bp-stage__body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--dur-base) var(--ease-out);
  }
  .bp-stages[data-accordion] .bp-stage__body[data-collapsed="true"] { grid-template-rows: 0fr; }
  /* No padding on the clipped box itself: padding survives a 0fr row and
     left a gap under every closed title. The spacing lives inside instead. */
  .bp-stages[data-accordion] .bp-stage__inner {
    min-block-size: 0;
    overflow: hidden;
  }
  .bp-stages[data-accordion] .bp-stage__text { padding-block-start: var(--space-2xs); }
  .bp-stages[data-accordion] .bp-stage__meta { padding-block-end: var(--space-2xs); }
  .bp-stage__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
  }
  /* Chevron drawn in CSS so it follows currentColor and rotates when open. */
  .bp-stage__toggle::after {
    content: "";
    flex: none;
    inline-size: 0.55rem;
    block-size: 0.55rem;
    margin-inline-end: 0.2rem;
    border-inline-end: 1.5px solid var(--data);
    border-block-end: 1.5px solid var(--data);
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .bp-stage__toggle[aria-expanded="true"]::after { transform: translateY(15%) rotate(-135deg); }

  /* Hairline column separators only where the grid actually has columns —
     on mobile these would become horizontal struts. */
  @media (min-width: 64em) {
    /* Every cell gets air on both sides of its hairline; only the outer
       edges of each row stay flush with the section's text column. */
    .bp-stage { padding-inline: var(--space-l); }
    .bp-stage:nth-child(3n + 1) { padding-inline-start: 0; }
    .bp-stage:nth-child(3n) { padding-inline-end: 0; }
    .bp-stage:not(:nth-child(3n)) { border-inline-end: 1px solid var(--rule); }
  }

  /* --- Comparison table --------------------------------------------------- */

  .bp-tablewrap { overflow-x: auto; }
  .bp-compare {
    inline-size: 100%;
    min-inline-size: 44rem;
    font-size: var(--step--1);
  }
  .bp-compare th,
  .bp-compare td {
    padding: var(--space-2xs) var(--space-s);
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--rule);
  }
  .bp-compare thead th {
    font-family: var(--font-label);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
    border-block-end: 1px solid var(--rule-strong);
    white-space: nowrap;
  }
  .bp-compare thead th[scope="col"]:nth-child(2) { color: var(--data); }
  .bp-compare tbody th {
    font-weight: 500;
    color: var(--ink);
    font-size: var(--step-0);
  }
  .bp-compare tbody td { color: var(--ink-2); }

  /* Below the three-column threshold a comparison table stops being a table
     and becomes a stack of labelled rows — the same information, no sideways
     scrolling and no horizontal page scroll at 320px. The labels come from
     `data-label` on each cell, so they stay translatable. */
  @media (max-width: 47.99em) {
    .bp-tablewrap { overflow-x: visible; }
    .bp-compare,
    .bp-compare thead,
    .bp-compare tbody,
    .bp-compare tr,
    .bp-compare th,
    .bp-compare td { display: block; min-inline-size: 0; }

    .bp-compare thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .bp-compare tbody tr {
      padding-block: var(--space-s);
      border-block-end: 1px solid var(--rule);
    }
    .bp-compare tbody th {
      padding-inline: 0;
      border-block-end: 0;
      font-family: var(--font-label);
      font-size: var(--step--2);
      font-weight: 500;
      letter-spacing: var(--tracking-label);
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .bp-compare tbody td {
      display: grid;
      grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
      gap: var(--space-s);
      padding: var(--space-3xs) 0;
      border-block-end: 1px solid var(--bp-hair-soft);
    }
    .bp-compare tbody td:last-child { border-block-end: 0; }
    .bp-compare tbody td::before {
      content: attr(data-label);
      font-family: var(--font-label);
      font-size: var(--step--2);
      letter-spacing: var(--tracking-label);
      text-transform: uppercase;
      color: var(--ink-3);
    }
  }

  /* --- Inner pages: section headings -------------------------------------- */

  /* Every inner page builds its section headers from `.section-heading`, so
     matching it to the home page's `.bp-shead` brings the whole interior onto
     the same scale without touching each page's markup. */
  /* Inner pages: one h2 size. Intro (.split) and .headed sections already use
     the base h2 (--step-4); section headings were --step-5, so the same page
     showed 41.6px and 68px h2s side by side. The home page's .bp-shead keeps
     its own, larger display scale. */
  .section-heading h2 {
    font-size: var(--step-4);
    letter-spacing: var(--tracking-display);
  }
  .section-heading p {
    color: var(--ink-2);
    font-size: var(--step-1);
    max-inline-size: 62ch;
  }

  /* --- Inner pages: page hero -------------------------------------------- */

  /* The class stays `.page-hero` deliberately: guide.ejs publishes a
     SpeakableSpecification cssSelector of `.page-hero h1`, so renaming the
     element would silently break that structured-data claim. */
  .page-hero {
    position: relative;
    overflow: clip;
    padding-block: var(--space-2xl) var(--space-xl);
    background-color: var(--paper);
    border-block-end: 1px solid var(--rule);
  }
  /* Same drafting sheet as the home hero, so the interior reads as the same
     document rather than a different template. */
  .page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(to right, var(--bp-grid) 1px, transparent 1px),
      linear-gradient(to bottom, var(--bp-grid) 1px, transparent 1px),
      linear-gradient(to right, var(--bp-grid-strong) 1px, transparent 1px),
      linear-gradient(to bottom, var(--bp-grid-strong) 1px, transparent 1px);
    background-size: 32px 32px, 32px 32px, 256px 256px, 256px 256px;
    mask-image: linear-gradient(to bottom, #000 0, #000 60%, transparent 100%);
  }
  .page-hero > .container { position: relative; }

  .page-hero h1 {
    font-size: var(--step-6);
    font-weight: 700;
    max-inline-size: 20ch;
  }

  /* Banner: back to the live site's full-bleed photo band. The figure and
     its fade come from 04-components.css; this layer only has to undo its
     own .page-hero rules where a banner precedes the hero — the title rises
     into the fade, the section turns transparent, and the drafting grid is
     dropped so it does not draw over the photograph. */
  .page-hero__figure + .page-hero {
    overflow: visible;
    margin-block-start: calc(var(--band-h) * (var(--band-fade) - 1));
    padding-block: calc(var(--band-h) * 0.28) var(--space-xl);
    background-color: transparent;
  }
  .page-hero__figure + .page-hero::before { content: none; }

  /* --- Inner pages: shared primitives ------------------------------------- */

  .card { border-color: var(--bp-hair); }
  .card__icon { color: var(--data); }
  .card--marked { border-block-start-color: var(--data); }

  .key-list li::before { background-color: var(--data); }

  .spec-row__icon { border-color: var(--bp-hair); color: var(--data); }

  .link-grid a:hover { color: var(--data); border-block-end-color: currentColor; }

  .spec-table { border-color: var(--bp-hair); }
  .spec-table thead th { background-color: transparent; }
  .spec-table__level { background-color: var(--data); color: #fff; }

  .tabrail__link[aria-selected="true"] { border-block-end-color: var(--data); }

  /* --- Pricing: category rail --------------------------------------------
     Nine categories do not fit one row at desktop widths (the last one fell
     onto a second line, and EN/RU labels are longer still). From 64em the
     rail turns into a sticky vertical list beside the tables; below that it
     stays a single horizontally scrolling row, with a fade on the right edge
     so it reads as "more this way". */
  .pricing-layout { display: grid; gap: var(--space-l); }
  /* Only one panel is visible at a time, but .flow spaces every panel after
     the first — so tabs 2…n started 32px lower than tab 1. Panels share one
     slot; the general-terms card after them keeps its .flow spacing. */
  .pricing-layout__panels > .tabpanel { margin-block-start: 0; }
  /* Panel heading carries the same icon as its tab, so the selection on the
     left and the heading on the right read as one thing. */
  .tabpanel__title {
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }
  .tabpanel__title .icon {
    flex: none;
    inline-size: 0.8em;
    block-size: 0.8em;
    color: var(--data);
  }

  @media (max-width: 63.99em) {
    .pricing-layout .tabrail {
      -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
              mask-image: linear-gradient(to right, #000 85%, transparent);
    }
  }

  @media (min-width: 64em) {
    .pricing-layout {
      grid-template-columns: 15rem minmax(0, 1fr);
      gap: var(--space-2xl);
      align-items: start;
    }
    .pricing-layout .tabrail {
      position: sticky;
      inset-block-start: calc(var(--header-h) + var(--space-m));
      overflow: visible;
      border-block-end: 0;
      border-inline-end: 1px solid var(--rule);
    }
    .pricing-layout .tabrail__list {
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 0;
    }
    .pricing-layout .tabrail__link {
      display: flex;
      inline-size: 100%;
      padding: var(--space-xs) var(--space-s) var(--space-xs) 0;
      margin-inline-end: -1px;
      border-block-end: 0;
      border-inline-end: 2px solid transparent;
      white-space: normal;
    }
    .pricing-layout .tabrail__link[aria-selected="true"] {
      border-inline-end-color: var(--data);
    }
  }

  .price-card { border-color: var(--bp-hair); }

  .breadcrumb a:hover { color: var(--data); }

  /* --- Header: touch targets --------------------------------------------- */
  /* Language links and the theme button were 30x26 and 32x32 — under the
     44px touch minimum. The hit area grows; the type stays a small label
     (11 → 12px so it clears the 12px floor). */
  .lang-switch { font-size: 0.75rem; }
  .lang-switch a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding: 0 var(--space-3xs);
  }
  .theme-toggle,
  .nav-toggle {
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    align-items: center;
    justify-content: center;
  }
  .nav-toggle {
    display: none;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--ink);
  }
  .nav-toggle[hidden] { display: none; }
  .nav-toggle__bar { transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); transform-origin: center; transform-box: fill-box; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

  /* --- Header: narrow-screen menu ----------------------------------------
     Below 64em the four nav items used to squeeze into one row under the
     logo at 9.9px, 38px tall. Now they sit behind the toggle and open as a
     full-width panel under the header: 16px type, 48px rows, submenus
     inline. Only applies once nav.ts has set data-open — no JS, no
     collapse. */
  @media (max-width: 63.99em) {
    .site-header__inner {
      display: flex;
      position: static;
      padding-block-end: 0;
    }
    .site-logo { grid-row: auto; }
    .site-logo img { block-size: 3rem; }
    .nav-toggle:not([hidden]) { display: inline-flex; }

    .site-nav[data-open] {
      position: absolute;
      inset-inline: 0;
      inset-block-start: 100%;
      margin: 0;
      padding: var(--space-2xs) var(--space-m) var(--space-m);
      max-block-size: calc(100dvh - 4.5rem);
      overflow-y: auto;
      border-block: 1px solid var(--rule);
      background-color: var(--surface);
      box-shadow: var(--shadow-m);
    }
    .site-nav[data-open="false"] { display: none; }
    .site-nav[data-open] .site-nav__list {
      flex-direction: column;
      align-items: stretch;
      flex-wrap: nowrap;
      gap: 0;
      padding: 0;
    }
    .site-nav[data-open] .site-nav__item { border-block-end: 1px solid var(--rule); }
    .site-nav[data-open] .site-nav__item:last-child { border-block-end: 0; }
    .site-nav[data-open] .site-nav__link {
      inline-size: 100%;
      justify-content: space-between;
      min-block-size: 3rem;
      padding-inline: 0;
      font-size: var(--step-0);
      font-weight: 500;
      letter-spacing: 0.04em;
    }
    .site-nav[data-open] .site-nav__link[aria-current]::after { content: none; }
    .site-nav[data-open] .site-nav__link[aria-current] { color: var(--brand-deep); }
    .site-nav[data-open] .site-nav__menu {
      position: static;
      padding: 0 0 var(--space-2xs) var(--space-s);
      border: 0;
      box-shadow: none;
      background: transparent;
    }
    .site-nav[data-open] .site-nav__menu .site-nav__link {
      min-block-size: 2.75rem;
      font-size: var(--step--1);
      text-transform: none;
      letter-spacing: 0;
      color: var(--ink-2);
    }
  }

  /* --- Breadcrumb: touch targets on narrow screens ----------------------- */
  @media (max-width: 47.99em) {
    .breadcrumb a {
      display: inline-flex;
      align-items: center;
      min-block-size: 2.75rem;
    }
  }

  /* --- Footer ------------------------------------------------------------- */
  /* Titles and the copyright/address line were 11px (address 9.9px on
     phones); social links were 22px-tall targets. All lifted to the 12px
     floor / 44px touch minimum. */
  .site-footer__title { font-size: 0.75rem; }
  .site-footer__bottom,
  .site-footer__address { font-size: 0.75rem; }
  .site-footer__social a { min-block-size: 2.75rem; }
  .site-footer__social li + li { margin-block-start: 0; }
  @media (max-width: 63.99em) {
    .site-footer__address { flex-wrap: wrap; }
  }

  /* --- Comparison: the DGN column is the answer, so it reads as one ----- */
  .bp-compare thead th:nth-child(2),
  .bp-compare tbody td:nth-child(2) {
    background-color: color-mix(in srgb, var(--data) 6%, transparent);
  }
  .bp-compare tbody td:nth-child(2) { color: var(--ink); }

  /* --- Reduced motion ----------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .bp-index__row,
    .bp-index__go { transition: none; }
  }
}