/* ============================================================================
 * site/styles/responsive.css — 320–1600 breakpoint scaffold
 * Cascade position 5 of 5 (tokens → base → components → sections → responsive).
 * Loaded LAST, so a breakpoint rule wins over the desktop-first rule it steps
 * down from.
 *
 * PUBLISH ROOT: `site/` is the only publishable directory in this repository.
 * Nothing here may reference the private research directories, the
 * repository-root legacy page, the older landing seeds, or the raw design
 * deliveries. All paths inside `site/` are relative.
 *
 * ---------------------------------------------------------------------------
 * THE CORE QUERY POINTS
 * ---------------------------------------------------------------------------
 * Desktop-first. Three shared `max-width` queries, no container
 * query, and no `clamp()` — type steps through discrete token values so the
 * three evidence widths are exactly reproducible and reviewable.
 *
 *   query               range        role in the accepted package   purpose
 *   —                   ≥1200px      --bp-desktop                   full desktop composition
 *   max-width: 1199px   1024–1199    --bp-desktop-sm                desktop minus absolutely-positioned decoration
 *   max-width: 1023px   768–1023     --bp-tablet                    tablet recomposition, multi-column → single column
 *   max-width: 767px    320–767      --bp-mobile                    mobile recomposition: type, padding, targets, density
 *
 * The role column above names the role that OPENS each range, which is how the
 * accepted `design-system/RESPONSIVE.md` writes it.
 *
 * THE CORE LITERALS. `1199px`, `1023px` and `767px` are written literally
 * because CSS media queries cannot reference custom properties — a breakpoint
 * token is unreadable at exactly the place that needs it. Each is 1px below the
 * accepted `design-system/tokens.json → breakpoint` role that CLOSES its range,
 * which is the role one row up in the table: `1199px` below `--bp-desktop`
 * (1200), `1023px` below `--bp-desktop-sm` (1024), `767px` below `--bp-tablet`
 * (768). That correspondence is the reason those seven documentation-only roles
 * are excluded from `styles/tokens.css`. These
 * three media conditions own the shared composition. A fourth, locale-only
 * `1199px` navigation threshold below is the measured last width where the
 * Vietnamese desktop row cannot preserve the pill's 8px end inset; it changes
 * no page composition. At 1200px the measured end clearance is 9px.
 * Every design value in every stylesheet — colour, size,
 * radius, border, shadow, duration, easing, spacing — is a `var()`. The only
 * other literals anywhere under `site/` are structural CSS mechanics with no
 * token role at all, enumerated in the header of `base.css`.
 *
 * `--bp-floor` (320px) and `--bp-ceiling` (1600px) are guardrail values, not
 * query points: nothing scales with the viewport, so there is no upper bound
 * beyond which the layout breaks, and the floor is a legibility and target-size
 * commitment rather than a rule.
 *
 * ---------------------------------------------------------------------------
 * HOW THE SCAFFOLD WORKS
 * ---------------------------------------------------------------------------
 * `base.css` declares desktop-first aliases — `--page-gutter`,
 * `--page-section-y`, `--page-card-pad`, `--page-band-inset`, `--page-h1-size`,
 * `--page-h2-size` — and every rule in every layer consumes the alias, never
 * the width-specific role. This file re-points those aliases at each step. One
 * assignment therefore steps the whole page, no rule is duplicated per width,
 * and a component can never drift out of the rhythm by forgetting a query.
 *
 * Component- and section-level per-width rules are added here by Tasks 04–06.
 * A component must not carry its own media query.
 *
 * ---------------------------------------------------------------------------
 * GUARDRAILS THAT HOLD AT EVERY WIDTH 320–1600
 * ---------------------------------------------------------------------------
 *  1. No page-level horizontal overflow. `documentElement.scrollWidth` must not
 *     exceed `clientWidth` at 320, 360, 390, 480, 768, 1024, 1200, 1440, 1600.
 *  2. Overflow is contained, never page-level. A fixture that cannot compress
 *     uses `overflow-x: auto` with an inner `min-width`, so the panel scrolls.
 *  3. All grid tracks use `minmax(0, 1fr)`, never a bare `1fr`.
 *  4. Decorative absolutely-positioned elements are hidden before they can
 *     collide: hero orbits below 1200px.
 *  5. Chip and tab rows wrap; they never become horizontal scrollers.
 *  6. Marquee rails clip within the page box.
 *  7. Ceiling at 1600px: content stops growing at `--container-content`, bands
 *     at `--container-wide`; extra width is absorbed by gutters.
 *  8. Floor at 320px: nothing content-critical below `--text-caption-size`, no
 *     target below the minimum, no clipped label, no truncated heading. Exactly
 *     two roles sit below 13px — `--text-mono-label-size` and `--text-tag-size`
 *     — and neither may ever carry content-critical copy.
 *  9. DOM order never changes. Exactly two visual reorders exist, both at
 *     ≤1023px, both moving a whole self-contained block.
 * 10. Hit targets ≥44×44px below 768px.
 * 11. No horizontal-scroll-only content.
 * 12. Sticky header height is bounded, and the announcement strip's absence
 *     must not shift the navigation.
 * 13. Every section keeps its identity at every width: all ten markers
 *     present, exactly once, in order. No section is `display: none`'d.
 *
 * ---------------------------------------------------------------------------
 * OWNERSHIP
 * ---------------------------------------------------------------------------
 * Task 02 creates the scaffold and the global step-downs. Tasks 04–05 add their
 * section rules. Task 06 owns the final 320–1600 behavior and the guardrail
 * hardening. Task 07 verifies all nine probe widths.
 * ========================================================================= */

/* --- ≥1200px — full desktop composition ------------------------------------
 * No query. The desktop-first defaults in `base.css` and the section layer are
 * the ≥1200px composition; every block below steps down from them. */

/* Vietnamese labels need more inline room than English. Enter the existing
 * native menu before the measured desktop row can wrap, while leaving every
 * non-navigation desktop composition unchanged. */
@media (min-width: 1024px) and (max-width: 1199px) {
  html[lang="vi"] .nav__links { display: none; }

  html[lang="vi"] .menu { display: block; }
}

/* --- ≤1023px — tablet recomposition ---------------------------------------
 * Type and rhythm step down together; multi-column grids collapse to one
 * column; the navigation link list gives way to the native disclosure sheet.
 * Sections 04–06 land their collapse rules in this block. */
@media (max-width: 1023px) {
  :root {
    --page-section-y: var(--section-y-tablet);
    --page-h1-size: var(--text-h1-size-tablet);
    --page-h2-size: var(--text-h2-size-tablet);
    /* The announcement strip is gone; this clears the compact sticky pill. */
    --page-header-offset: calc(var(--space-12) - var(--space-6));
  }

  /* Navigation: the link list gives way to the native disclosure sheet, which
   * carries the same four anchors in the same order. The action cluster stays
   * visible alongside the menu control at this step. */
  .nav__links {
    display: none;
  }

  .menu {
    display: block;
  }

  .hero-intro { min-block-size: 0; padding-block: var(--space-10); }
  .hero-intro::before { inset-inline: var(--space-6); }
  .hero__head--v2 { margin-block-end: 0; }
  .hero-orbit {
    position: absolute;
    inset-block: var(--space-4);
    inset-inline: var(--page-gutter);
    display: block;
    inline-size: auto;
    block-size: auto;
    margin: 0;
  }
  .hero-orbit::before { inset: 20% 4%; }
  .hero-orbit::after { inset: 28% 11%; }
  .orbit-mark { position: absolute; display: grid; }
  .orbit-mark:nth-child(n + 7) { display: none; }
  .orbit-mark:nth-child(1) { inset-block-start: 12%; inset-inline-start: 50%; }
  .orbit-mark:nth-child(2) { inset-block-start: 28%; inset-inline-start: 85%; }
  .orbit-mark:nth-child(3) { inset-block-start: 72%; inset-inline-start: 85%; }
  .orbit-mark:nth-child(4) { inset-block-start: 88%; inset-inline-start: 50%; }
  .orbit-mark:nth-child(5) { inset-block-start: 72%; inset-inline-start: 15%; }
  .orbit-mark:nth-child(6) { inset-block-start: 28%; inset-inline-start: 15%; }
  .hero--v2 .product-stage { margin-inline: 0; }
  .product-tabs__panel { grid-template-columns: minmax(0, 1fr); }
  .hero--v2 .product-stage__surface { padding-block: calc(var(--space-7) - var(--space-1)); }
  .platform-rail { max-inline-size: 500px; }

  /* The ink band re-pads. */
  .band__inner {
    padding: var(--space-11) var(--gutter) var(--space-10);
  }

  /* Multi-column grids collapse to one column. */
  .panel__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-7) var(--space-6);
  }

  .panel__tab:first-child {
    margin-inline: var(--space-8);
  }

  .panel__tab:last-child {
    margin-inline: var(--space-6);
  }

  .pillars__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Each pillar card becomes a horizontal row with the link pulled inline.
   * The placement below moves whole cells within one card; it does not
   * contradict DOM order, which stays glyph → title → body → link. */
  .pillar {
    grid-template-columns: var(--target-min) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-4);
  }

  .pillar > .glyph {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .pillar__title,
  .pillar__body {
    grid-column: 2;
  }

  .pillar__link {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-block-start: 0;
  }

  .strip__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .problem__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rhythm-section-head-to-content);
  }

  .bubble--offset {
    margin-inline-start: 0;
  }

  .wf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quad { grid-template-columns: minmax(0, 1fr); }

  .intel .quad,
  .listen .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* --- Task 05: `backlinks` … `closing` at ≤1023px ----------------------- */


  /* The cream mega-panel goes single column: copy above, fixtures below. */
  .market__panel {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .market__copy { gap: var(--space-3); }
  .market__stage { gap: var(--space-3); padding: var(--space-3); }
  .engagement .funnel__cap {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .engagement .wf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .engagement .funnel__paths { block-size: var(--space-9); }

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

  /* The footer becomes three equal groups with the brand block spanning all
   * three below them. */
  .footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
  }

  /* VISUAL REORDER 2 of 2 (guardrail 9). The link groups lead and the brand
   * block closes. Like the recommended tier it moves a whole self-contained
   * block, and the brand block still precedes the legal bar in both DOM and
   * visual order. */
  .footer__brand {
    grid-column: 1 / -1;
    order: 2;
  }
}

/* --- ≤767px — mobile recomposition ----------------------------------------
 * Everything from the ≤1023px rules, plus the mobile type scale, tighter page
 * gutter, tighter card and band padding, larger hit targets, and the deliberate
 * density reductions. Mobile is a recomposition, not a scaled desktop — but DOM
 * order is identical to every other width. */
@media (max-width: 767px) {
  :root {
    --page-gutter: var(--gutter-mobile);
    --page-section-y: var(--section-y-mobile);
    --page-card-pad: var(--card-pad-mobile);
    --page-band-inset: var(--band-inset-mobile);
    --page-h1-size: var(--text-h1-size-mobile);
    --page-h2-size: var(--text-h2-size-mobile);
    --rhythm-section-transition: var(--space-9);
    /* The compact sticky pill is the complete mobile header. */
    --page-header-offset: calc(var(--space-12) - var(--space-6));
  }

  /* Touch and legibility: every control clears the minimum hit target. */
  .btn,
  .btn--sm {
    min-block-size: var(--target-min);
    padding: var(--space-3) var(--space-4);
  }

  /* Navigation keeps the logo and the native menu disclosure. */
  .nav {
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2);
  }

  /* The sheet spans the navigation pill rather than the narrow menu control:
   * anchored to the control it cannot be wider than it without pushing the
   * page box past the viewport. Making the control static hands the
   * containing block to the pill, which is already positioned. */
  .menu {
    position: static;
  }

  .menu__sheet {
    inset-inline: 0;
    min-inline-size: auto;
  }

  /* The compact mobile navigation preserves the native menu disclosure inside
   * the 320px floor instead of letting its text label create page overflow. */
  .menu__toggle { min-inline-size: var(--target-min); padding-inline: var(--space-3); }
  .menu__label { display: none; }

  /* The ink band softens its radius and tightens its padding. */
  .band {
    border-radius: var(--radius-panel);
  }

  .band__inner {
    padding: var(--space-10) var(--gutter-mobile) var(--space-9);
  }

  /* Hero: tighter rhythm, a smaller inline glyph cluster, and a full-width
   * stacked CTA column. */
  .hero {
    padding-block: var(--space-9) var(--space-7);
  }

  .hero--v2 { padding-block: 0; }
  .hero-intro { padding-block: var(--space-10); }
  .hero-intro::before { inset: var(--space-4); }
  .site-header-v2 .nav { margin-block: var(--space-2); }
  .hero__head--v2 { gap: var(--space-4); margin-block-end: 0; }
  .hero-orbit { inset-block: var(--space-3); inset-inline: var(--band-inset-mobile); }
  .hero-orbit::before { inset: 24% 2%; }
  .hero-orbit::after { inset: 31% 8%; }
  .orbit-mark { width: var(--space-7); height: var(--space-7); padding: var(--space-2); }
  .product-stage__surface { padding: var(--space-5); }
  .product-stage__heading { display: grid; gap: var(--space-3); }
  .surface-source { text-align: start; }
  .product-tabs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
  .product-tabs__list button { min-inline-size: 0; min-block-size: var(--target-min); padding-inline: var(--space-2); font-size: var(--text-caption-size); }
  .product-tabs__panel { gap: var(--space-4); }
  .marketplace__bar, .marketplace__rows > div { grid-template-columns: minmax(0, 1fr) auto; }
  .marketplace__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketplace__rows > div { padding: calc(var(--space-1) / 2); font-size: var(--text-mono-label-size); line-height: var(--text-tight-lh); }
  .marketplace__rows > div > :last-child { display: none; }
  .platform-rail { max-inline-size: 420px; padding-block: var(--space-2); }

  .hero__cluster .glyph--lg {
    inline-size: var(--glyph-md);
    block-size: var(--glyph-md);
    font-size: var(--text-body-size);
  }

  .intel .quad,
  .listen .quad { grid-template-columns: minmax(0, 1fr); }
  .intel .fcard,
  .listen .fcard { min-block-size: 0; }
  .intel .fcard,
  .listen .fcard { padding: var(--space-3); }
  .intel .fcard__head p,
  .listen .fcard__head p { line-height: var(--text-tight-lh); }
  .intel .chart { max-block-size: var(--space-10); }
  .intel .ledger__row { padding: var(--space-1) var(--space-2); }
  .listen .thread,
  .listen .alert { padding: var(--space-2); }
  .market__panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); }
  .market__copy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .market__lead { grid-column: 1 / -1; }
  .market__stage { gap: var(--space-3); padding: var(--space-3); }
  .market .answer { gap: var(--space-2); padding: var(--space-3); }
  .market ol.answer__rows { gap: var(--space-1); padding-inline-start: var(--space-5); }
  .market .catalog th,
  .market .catalog td { padding: var(--space-2); }
  .market .console__inner { padding: 0; }
  .market .market__flow { display: none; }
  .listen .alerts__signal { block-size: var(--space-7); object-fit: contain; }
  .engagement .band__inner { gap: var(--space-7); padding: var(--space-8) var(--space-4); }
  .engagement .funnel { gap: var(--space-3); }
  .engagement .funnel__cap {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .engagement .wf { gap: var(--space-3); }
  .engagement .wf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engagement .funnel__paths { block-size: var(--space-9); }
  .engagement .wf__card { padding: var(--space-5); }
  .engagement .queue,
  .engagement .composer,
  .engagement .published { gap: var(--space-3); padding: var(--space-4); }
  .engagement .queue__row { padding: var(--space-2); }
  .intel .fcard { padding: var(--space-2); }
  .intel .fixture { gap: var(--space-1); }
  .intel .fixture__cap .tag { padding: 0 var(--space-2); }
  .intel .fcard:first-child .chart,
  .intel .fcard:nth-child(4) .chart,
  .intel .collage { display: none; }
  .intel .inset { padding: var(--space-2); }
  .intel .tile { padding: var(--space-2); }
  .intel .bars { gap: var(--space-1); }
  .intel .bar { gap: 0 var(--space-2); }
  .market__panel { padding: var(--space-2); }
  .market__stage { gap: var(--space-2); padding: var(--space-1); }
  .funnel__row--engines .node { padding: var(--space-2); font-size: var(--text-mono-label-size); }
  .funnel__row--engines .node:nth-child(n + 5) { display: none; }
  .funnel__paths { max-block-size: calc(var(--space-12) * 2); }

  /* Product panel: the tab insets tighten again and the body re-pads. */
  .panel__tab:first-child {
    margin-inline: var(--space-6);
  }

  .panel__tab:last-child {
    margin-inline: var(--space-3);
  }

  .panel__body {
    padding: var(--space-6) var(--space-5);
  }

  /* Pillars abandon the horizontal row form and return to a stacked block. */
  .pillar {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .pillar > .glyph,
  .pillar__title,
  .pillar__body,
  .pillar__link {
    grid-column: 1;
    grid-row: auto;
  }

  /* Guardrail 10 — hit targets ≥44×44px below 768px, resolved (Task 06).
   *
   * Task 04's gate measured this link at 312×24 here and deferred the call.
   * Guardrail 10 names "nav rows, FAQ summaries, pause controls and the poster
   * play button" as examples and opens the list with "including", so the
   * enumeration is representative, not exhaustive; the ≤767px spec grants
   * `min-height: 44px` to `.btn` and `.btn--sm` because those were the only
   * controls the spec itself enumerated, not because everything else is
   * exempt. Task 05 had already read the guardrail the same way for
   * `.footer__links a`, which is the same shape of target — a standalone link
   * occupying its own row rather than a link inside a sentence, so WCAG 2.2
   * 2.5.8's inline exception does not reach it. Resolving it the other way
   * would leave two identical targets governed by two different rules.
   *
   * The card returns to a stacked block at this width, so the link already
   * owns a full row; giving the row the minimum height costs 20px per card and
   * moves nothing else. The `--space-3` top margin is retained, so adjacent
   * targets never touch.
   *
   * `.announce__link` is handled below. Guardrail 10 is written without an
   * exception clause, so WCAG 2.2 2.5.8's inline allowance does not release
   * anything here: the repository contract is the stricter of the two and it
   * is the one that binds. */
  .pillar__link {
    display: flex;
    align-items: center;
    min-block-size: var(--target-min);
    margin-block-start: var(--space-3);
  }

  /* Guardrail 10 for the last target under 44px (Task 06).
   *
   * The announcement link is the one target that cannot take the minimum by
   * growing: below 768px the strip lays out as ordinary inline flow and the
   * link is the last clause of a wrapping sentence, so a 44px line box would
   * add roughly 20px to a sticky header that guardrail 12 caps at 25% of a
   * 390 × 640 viewport — the same budget Task 04 recovered by making the strip
   * a sentence in the first place. Two contracts, and the fix has to satisfy
   * both.
   *
   * So the TARGET grows and the LAYOUT does not. An absolutely-positioned
   * pseudo-element centred on the link presents a `--target-min` pointer area
   * without participating in flow, which is the standard way to reconcile the
   * two: the sentence keeps its line height, the header keeps its measured
   * 144.6px, and the thing a finger has to hit is 44px tall. Nothing else in
   * the strip is a target, so the enlarged area overlaps no other target, and
   * WCAG 2.2 2.5.8 measures the area that accepts the pointer rather than the
   * text box inside it. */
  .announce__link {
    position: relative;
  }

  .announce__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: var(--target-min);
    transform: translateY(-50%);
  }

  /* An honesty tag wraps and centres rather than forcing overflow. */
  .tag {
    white-space: normal;
    text-align: center;
  }

  /* --- Task 05: `backlinks` … `closing` at ≤767px ------------------------ */


  /* The cream panel and its ink stage take the mobile card padding. */
  .market__panel {
    padding: var(--card-pad-mobile);
    border-radius: var(--radius-card);
  }

  .market__stage {
    padding: var(--space-4);
  }

  /* Density reduction, deliberate and not accidental: the thread grid goes to
   * one column and the SECOND thread card is dropped rather than shrunk. One
   * legible thread communicates the fixture; two at 390px would be illegible,
   * and the fixture's text equivalent still states what it shows. */
  .threads {
    grid-template-columns: minmax(0, 1fr);
  }

  .threads .thread:nth-child(2) {
    display: none;
  }

  /* The footer drops to two groups with the brand spanning both, and the legal
   * bar stacks left-aligned. */
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }



}

/* At the 320px floor the six-column publisher table cannot remain legible in
 * a 212px content box. Keep the decision-bearing publisher/authority/traffic
 * fields visible and retain every row in the DOM for assistive text and the
 * exact fixture-count contract. */
@media (max-width: 359px) {
  .market .console__scroll .console__inner {
    min-inline-size: 0;
  }

  .market .catalog {
    table-layout: fixed;
  }

  .market .catalog th,
  .market .catalog td {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .market .catalog th:nth-child(n + 4),
  .market .catalog td:nth-child(n + 4) {
    display: none;
  }
}

/* Task 07 — the independent v2 geometry has a deliberately shorter tablet
 * hero and 820/1300/1250 story cadence. These values are layout corrections,
 * not hidden content: all modules remain in normal DOM order. */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header-v2 .nav { margin-block: var(--space-2); }
  .hero--v2 { margin-block-start: 0; padding-block-end: 0; }
  .hero__head--v2 { margin-block-end: 0; }
  .product-tabs__panel { grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--space-12) * 2)); }
  .marketplace__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketplace__bar, .marketplace__rows > div { grid-template-columns: minmax(0, 1fr) auto; }
  .marketplace__rows > div { padding-block: calc(var(--space-1) / 2); font-size: var(--text-mono-label-size); line-height: var(--text-tight-lh); }
  .marketplace__rows > div > :last-child { display: none; }
}

@media (min-width: 1024px) {
  .hero--v2 { margin-block-start: 0; }
  .hero--v2 .hero__title { max-inline-size: calc(var(--container-text) + (var(--space-10) * 2)); }

  /* Give the complete engagement story enough air to read as a sequence. */
  .engagement .band__inner { gap: var(--space-8); padding-block: var(--space-10); }
  .engagement .band__inner { max-inline-size: calc(var(--container-content) + (var(--space-5) * 2)); }
  .engagement .funnel { max-inline-size: var(--container-content); }
  .engagement .funnel__paths { block-size: var(--space-8); }
  .engagement .wf { gap: var(--space-6); }
  .engagement .wf__card { padding: var(--space-6); }
  .engagement .queue,
  .engagement .composer,
  .engagement .published { padding: var(--space-4); }
  .engagement .queue__row { padding: var(--space-3); }
  .engagement .rail__chip { padding: var(--space-2) var(--space-4); }

  .closing__inner { padding-block: var(--space-5); }
  .footer { margin-block-start: var(--space-5); }
  .footer__grid { padding-block: var(--space-4); }
}

/* Task 06 lower-page recomposition. */
@media (max-width: 1023px) {
  .proof-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .footer__brand { grid-column: 1 / -1; order: 0; }
}
@media (max-width: 767px) {
  .proof-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .proof-card { padding: var(--space-3); }
  .proof-card > strong { font-size: var(--text-h2-size-mobile); }.proof-card__quote { font-size: var(--text-caption-size); }
  .synthetic-marker { font-size: var(--text-tag-size); }.proof__disclosure { text-align: start; }
  .faq__q { padding: var(--space-4) var(--space-5); }.faq__a { padding: 0 var(--space-5) var(--space-4); }
  .closing__inner { padding: var(--space-6) var(--space-4); }.closing__title { font-size: var(--text-h1-size-mobile); }.closing-platforms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); min-block-size: var(--space-9); }.closing-mark { inline-size: var(--space-7); block-size: var(--space-7); padding: var(--space-3); }.closing-mark--wikipedia, .closing-mark--youtube { display: none; }
  .footer { margin-block-start: var(--space-5); }.footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-4); }.footer__brand { grid-column: 1 / -1; }.footer__legal { padding: var(--space-3) var(--space-5); flex-direction: column; gap: var(--space-1); }.footer__affiliation { margin-inline-start: 0; }.footer__links { gap: var(--space-1); }.footer__links a { display: flex; align-items: center; min-block-size: var(--target-min); }
}

/* Content-bearing regions keep their natural block size at every responsive
 * step, including desktop intelligence. */
@media (min-width: 1024px) {
  .hero--v2 { padding-block-end: 0; }
  .product-tabs__panel[hidden] { display: none; }
  .intel .fcard, .listen .fcard { padding: var(--space-6); }
  .hero--v2 .marketplace__rows > div { padding-block: var(--space-6); }
  .proof-bento { grid-template-columns: 1.2fr .8fr 1fr; }
  .proof-card { padding: var(--space-6); }
  .faq__item { padding-block: var(--space-5); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .product-tabs__panel[hidden] { display: none; }
  .hero--v2 .marketplace__rows > div { padding-block: var(--space-2); }
  .intel .fcard, .listen .fcard { padding: var(--space-6); }
  .proof-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engagement .band__inner { gap: var(--space-7); padding-block: var(--space-9); }
  .closing__inner { padding-block: var(--space-6); }
}

@media (max-width: 767px) {
  .product-tabs__panel[hidden] { display: none; }
  .orbit-mark:nth-child(n + 6) { display: none; }
  .orbit-mark:nth-child(1) { inset-block-start: 12%; inset-inline-start: 50%; }
  .orbit-mark:nth-child(2) { inset-block-start: 34%; inset-inline-start: 86%; }
  .orbit-mark:nth-child(3) { inset-block-start: 84%; inset-inline-start: 72%; }
  .orbit-mark:nth-child(4) { inset-block-start: 84%; inset-inline-start: 28%; }
  .orbit-mark:nth-child(5) { inset-block-start: 34%; inset-inline-start: 14%; }
  .engagement .wf { grid-template-columns: minmax(0, 1fr); }
  .intel .quad, .listen .quad, .proof-bento { grid-template-columns: minmax(0, 1fr); }
  .closing-mark--wikipedia, .closing-mark--youtube { display: grid; }
  /* Vietnamese carries longer unbroken semantic phrases at the same content
   * density. Reuse existing type roles to keep the 390px draft readable while
   * preventing translation-only vertical padding from dominating the page. */
  html:lang(vi) .hero__title {
    font-size: var(--text-h2-size-mobile);
  }

  html:lang(vi) .hero__stand,
  html:lang(vi) .sechead__stand,
  html:lang(vi) .band__stand {
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lh);
  }

  html:lang(vi) .problem__body {
    font-size: var(--text-body-size);
  }

  html:lang(vi) .intel .fcard__head p,
  html:lang(vi) .listen .fcard__head p {
    font-size: var(--text-mono-label-size);
  }

  html:lang(vi) .intel .fcard,
  html:lang(vi) .listen .fcard,
  html:lang(vi) .proof-card {
    padding: var(--space-2);
  }

  html:lang(vi) .market__panel,
  html:lang(vi) .faq__q {
    padding: var(--space-3);
  }

  html:lang(vi) .closing__inner {
    padding-block: var(--space-6);
  }
}

/* A fixture head and its specimen share one spacing owner. The card grid gap
 * is the full 8px; adding a head margin here would double-count it. */
.listen .fcard {
  grid-template-rows: auto auto;
  align-content: start;
}

.listen .fixture,
.listen .fixture > .inset,
.listen .fixture > .console {
  min-block-size: 0;
  aspect-ratio: auto;
}

.proof__head,
.faq__head {
  gap: var(--rhythm-head-stack);
}

@media (max-width: 1023px) {
  .faq__grid { gap: var(--rhythm-section-head-to-content); }
}

/* All text-bearing fixtures remain content-driven at every width. */

@media (min-width: 768px) and (max-width: 1199px) {
  /* A two-column catalog leaves each nested row narrower than its status and
   * source cells at tablet/small-desktop widths. Keep one complete signal per
   * line and reserve a readable title measure before the fixed-width cells. */
  .marketplace__rows {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketplace__rows > div {
    column-gap: var(--space-3);
  }

  .marketplace__rows > div > b {
    min-inline-size: 12ch;
  }
}

@media (max-width: 767px) {
  /* Long translated prompt labels need the full phone width. */
  .marketplace__rows {
    grid-template-columns: minmax(0, 1fr);
  }
}