/*
 * Breakpoint overrides, one tier per Figma frame.
 *
 *   1440  Home 804:6258 — hero drops its 1456px box and runs full-bleed
 *   1024  Home 822:14869 — type steps to the 0.8 ramp, rail narrows to 134px
 *    768  Home 870:2658 — bar shrinks to 67px, rail lies down, 0.6 ramp
 *    576  Home 1108:8310 — 43.8/34 ramp, hero stacks
 *
 * variables.css / style.css are the 1710px frame (301:110), so each block carries only
 * what its own frame measures differently. Values are transcribed, never interpolated:
 * between two tiers the wider tier's values hold.
 */

/* <1710px — the document card stops pinning its spec panel: a pinned panel does not
   shrink with the card, so the body absorbs every lost pixel and collapses. The design
   scales it instead (810:10869 is 362 of 1023 at 1440; 602:6546 is 448 of 1240 at 1720). */
@media (max-width: 1709.98px) {
  .doc-card__aside {
    flex-basis: var(--doc-card-aside-fluid);
    width: var(--doc-card-aside-fluid);
  }
}

/* ≤1440px — Home 804:6258 */
@media (max-width: 1440px) {
  :root {
    /* 804:6412 puts the section's copy column 58px inside the rail, not 64, and
       804:6413 starts it 64px down rather than 72. The rail (804:6404) and the
       footer copy (805:7168) do not move. */
    --content-pad-x: 58px;
    --content-pad-y: var(--sp-64);

    /* No frame draws a document card at this width or below, so the doc column keeps
       the band and the right pad it had before the 1710 frames were measured. */
    --doc-pad-y: var(--sp-64);
    --doc-pad-right: var(--content-pad-x);

    /* 804:6415 — the copy column's own rhythm: 43px between blocks, 22px inside
       one. Both step here and again at 1024. */
    --block-gap: 43px;
    --prose-gap: var(--sp-22);

    /* 804:6265 — the eyebrow rule's row is 47px here (16 above, 15 below) where
       the 1710 frame draws 31 (15 above, nothing below). */
    --hero-meta-pad-top: var(--sp-16);

    /* The footer's wider shell only lines its divider up with the section rails
       while the page is wider than the 1640px container; from here down it has
       to share the page's shell or the rule sits ~26px off. */
    --footer-gutter: var(--page-gutter);
    --footer-container-max: var(--container-max);
    --footer-rail-width: var(--rail-width);
    --footer-rail-gap: var(--rail-gap);

    /* FAQ — 1069:17744 keeps the desktop 76px band but pads the column on the
       left only, so the bar and the ask card settle on the groups' own 1000px cap
       (1069:17750 and 1069:17849 are both exactly 1000). See variables.css. */
    --faq-pad-right: 0px;
    --faq-bar-max: var(--faq-block-max);
    --faq-ask-max: var(--faq-block-max);

    /* 804:6261 — the hero is the full frame here, not the 1456px box 301:163
       centres at 1710. Its copy therefore starts at the 48px pad alone. */
    --hero-width: 100%;
    --hero-height: 855.42px;
    --hero-inner-height: 855.42px;
    --hero-body-pad-top: 94.42px;
    --hero-pad-bottom: 95px;
    --hero-meta-pad-bottom: 15px;
  }

  /* 804:6278 — 19px on a 620px column, leading 31.35 against 1710's 30.4. The
     frame is drawn around the single paragraph this tier still shows, so the
     current two-paragraph copy grows the hero past its 855.42. */
  .hero__intro {
    max-width: var(--measure-620);
    font-size: var(--fs-19);
    line-height: var(--lh-31-35);
  }

  /* 804:6419 / 822:14992 / 870:2808 — prose copy keeps its 17px but tightens to
     27.2 leading from here down. .lead is deliberately not in this rule:
     804:6487 / 804:6602 / 804:6554 still measure exactly 28. */
  .prose p {
    line-height: var(--lh-27-2);
  }

  /* 804:6285 — the hero's underlined link pads 16px to its rule here, not the
     13px of the 1710 frame (301:183). Every narrower frame draws the same 16. */
  .btn--underline {
    padding-bottom: var(--sp-16);
  }

  /* 1237:18690 — the longest label wraps from here down, and each card stacks
     its own kind/when/what, so one wrapped label would drop that card's date
     below its neighbours'. Every frame draws the four on one baseline. */
  .date-card__kind {
    min-height: 34px;
  }
}

/* ≤1129.98px — the bar's six links stop fitting on the designed 40px gap, and left
   alone the row wraps and the bar grows past the 92px --header-height the hero, the
   banner band and scroll-padding all assume. Both numbers are measured: 1129.98 because
   six links first fit at 1128 with IBM Plex Mono loaded and 1130 on the fallback
   metrics; 18 because the tightest viewport here is 1025, which fits 19 at most.

   Drop the FAQ item from the bar and this whole block comes off. */
@media (max-width: 1129.98px) {
  .header__nav {
    gap: var(--sp-18);
  }
}

/* ≤1024px — Home 822:14869 */
@media (max-width: 1024px) {
  :root {
    /* 822:14935 sits the section shell 24px in and 822:14975 adds its own 24px,
       so the rail's stroke lands at 48px rather than the desktop 75px. */
    --page-gutter: var(--sp-24);
    --container-pad: var(--sp-24);
    --footer-gutter: var(--sp-24);

    /* 822:14976 — the rail keeps its column here, it just narrows. */
    --rail-width: 134px;
    --rail-gap: var(--sp-22);
    --content-pad-x: var(--sp-40);
    --content-pad-y: var(--sp-52);
    --block-gap: 44px;
    /* 822:15493 — the footer's copy follows the sections in at this width,
       where at 1440 it stayed on 64. */
    --footer-pad-x: var(--sp-40);

    /* FAQ — 1040:13782 gives up the rail's 76px band for the sections' own 52,
       and 1040:13637 measures the same 52 below the pager. Every block fills the
       column from here down, so the caps above stop biting. */
    --faq-pad-y: var(--content-pad-y);
    --faq-pad-y-end: var(--content-pad-y);

    --hero-height: 710.14px;
    --hero-inner-height: 710.14px;
    --hero-pad-top: 51.2px;
    --hero-body-pad-top: 81.92px;
    --hero-body-gap: 30.7px;
    /* 822:14917 pads top and bottom equally, unlike the wider frames. */
    --hero-pad-bottom: 81.92px;
  }

  /* 822:14919 / 822:14987 / 822:14990 — the 0.8 ramp. */
  .h1 {
    max-width: var(--measure-900);
    font-size: var(--fs-64);
    line-height: var(--lh-57-2);
  }

  .h2 {
    font-size: var(--fs-51-2);
    line-height: var(--lh-52-22);
    letter-spacing: var(--ls-tight-2);
  }

  /* 822:15471 keeps Subscribe's heading on the desktop 54/56.16. Restated
     rather than left out of the rule above: the element carries both classes at
     the same specificity, and .h2 here wins on source order. */
  .h2--compact {
    font-size: var(--fs-54);
    line-height: var(--lh-56-16);
    letter-spacing: var(--ls-tight-1);
  }

  .h3 {
    font-size: var(--fs-22-5);
    line-height: var(--lh-34-92);
  }

  /* .h1--page is absent by design: 848:15614 puts the banner title on the h1
     ramp from here down. See the guard in style.css. */

  /* 822:14946 — three 201px cards to a row, the fourth wrapping under them.
     Grow 0: the frame leaves the row's slack on the right rather than sharing
     it out. */
  .dates__grid {
    flex-wrap: wrap;
  }

  .date-card {
    flex: 0 1 201px;
  }

  /* 822:14948 — steps down and picks up tracking; 315:2832 is 13px with none. */
  .date-card__kind {
    font-size: var(--fs-11);
    letter-spacing: var(--ls-wide-154);
    text-transform: uppercase;
    /* Two 14px lines on this ramp — see the 1440 tier for why it reserves. */
    min-height: 28px;
  }

  /* 822:15470 / 822:15480 — the form drops under the intro, still 56px apart. */
  .subscribe__content {
    flex-direction: column;
  }

  /* Stacked, flex-basis sizes the height, so the desktop bases have to go back
     to auto or the form reserves its 698px as empty height under the button. */
  .subscribe__intro,
  .subscribe__form,
  .subscribe__success {
    flex-basis: auto;
    width: 100%;
  }

  .steps,
  .timeline {
    width: 100%;
  }

  .footer__cols {
    flex-wrap: wrap;
  }

  .footer__col {
    flex: 1 1 200px;
  }

  .footer__admin-block {
    width: 100%;
  }

  /* The content-page frames do exist at this width — 810:13782, 849:17040,
     854:19983 — and the type above is transcribed from them. The doc-card's
     stacking is unchanged and matches what they draw. */
  .doc-card__body {
    flex: 1 1 100%;
    padding: var(--sp-40) var(--sp-40);
  }

  .doc-card__aside {
    flex: 0 0 auto;
    width: 100%;
    border-left: none;
    border-top: var(--bw-1) solid var(--border-rule);
    padding: var(--sp-32) var(--sp-40);
  }

  /* With the aside under the body, 810:13782 sets the note beside the claim and
     runs the spec rows across in one line. Unwinds again at 576 (1120:12691). */
  .doc-card__claim {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-20);
  }

  .doc-card__claim-title {
    padding-bottom: 0;
  }

  .doc-card__specs {
    display: flex;
    gap: var(--sp-40);
  }

  .doc-card__spec {
    flex: 1 1 0;
  }

  .doc-card__spec:last-child {
    border-bottom: none;
  }

  /* 848:15635 — joins the h2 ramp here and holds it down to 768 (940:2049). */
  .doc-card__title {
    font-size: var(--fs-51-2);
    line-height: var(--lh-52-22);
    letter-spacing: var(--ls-tight-2);
  }

  /* The banner shares the section shell's gutter once the 1336px box no longer
     fits, so its title lines up with the copy column under it. */
  .page-banner__inner {
    padding-inline: var(--sp-24);
  }

  .page-banner__title {
    padding-bottom: var(--sp-28);
  }
}

/* ≤1023.98px — the bar collapses to a drawer. The 1024 frame (822:14887) still
   draws all six links and the Subscribe pill, so the drawer starts one pixel
   below, the widest point the design leaves undefined. */
@media (max-width: 1023.98px) {
  .header__toggle {
    display: inline-flex;
  }

  .header__panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-8);
    padding: var(--sp-20) var(--sp-24) var(--sp-24);
    /* Opaque, unlike the 94% bar it drops out of — this panel covers hero copy,
       which ghosts through the links at 94%. */
    background: var(--c-cyan-6);
    border-bottom: var(--bw-1) solid var(--border-nav);
    display: none;
  }

  .header__panel.is-open {
    display: flex;
  }

  /* A plain stack here, so the bar's centring is undone. */
  .header__nav {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--sp-8);
  }

  .header__link {
    padding-block: var(--sp-8);
  }

  /* In the drawer the link is a full-width row: the desktop link is only as
     wide as its label, so most of a drawer row would not respond to a tap. */
  .header__nav .header__link {
    width: 100%;
    min-height: 44px;
    align-content: center;
  }

  /* 870:3440 takes the Register pill out of the bar, so the drawer is where it
     has to live — dropping it outright would leave the mailing list unreachable
     from the bar on a phone. */
  .header__actions .btn--nav {
    display: none;
  }

  .header__panel-cta {
    display: flex;
    /* Last thing in the drawer, set apart: it is the call to action, not a
       section link. */
    margin-top: var(--sp-12);
    padding-block: var(--sp-13);
  }
}

/* ≤768px — Home 870:2658 */
@media (max-width: 768px) {
  :root {
    /* 870:3412 — the bar is 67px here, and the logo 100×27 is what makes it so. */
    --header-height: 67px;

    /* 870:2795 — 18px of shell (2.4% of the frame, as at 1024) plus a 20px
       container pad, which is also the hero's own inset at this width. */
    --page-gutter: var(--sp-18);
    --container-pad: var(--sp-20);
    --footer-gutter: var(--sp-18);

    --content-pad-x: 0px;
    --content-pad-y: var(--sp-20);
    --block-gap: var(--sp-32);
    --footer-pad-x: 0px;

    /* FAQ — 1085:20068. The blocks tighten from 28 to 20 apart (1108:3486 sits at
       411 under a bar ending on 391). The 40 below the pager is the 20 + 20 every
       copy column carries here — see the note on .section__content below. */
    --faq-pad-y: var(--sp-20);
    --faq-pad-y-end: var(--sp-40);
    --faq-stack-gap: var(--sp-20);

    /* 870:3546 — Subscribe lies down with everything else, but on its own 38px
       band rather than the copy column's 20. */
    --subscribe-pad-x: 0px;
    --subscribe-pad-y: 38px;

    --hero-height: 527px;
    --hero-inner-height: 527px;
    --hero-pad: 38px;
    --hero-pad-top: 0px;
    --hero-body-pad-top: 38px;
    --hero-body-gap: 23px;
    --hero-pad-bottom: 38px;
  }

  /* 870:3414 — the brand link sits flush at x=0 inside the bar's own 20px pad
     (the desktop 20px inset is gone) and its vertical padding halves with the
     logo, which is what takes the bar from 92px to the frame's 67px. */
  .header__brand {
    padding: 5px 0;
  }

  .header__logo {
    width: 100px;
    height: 27px;
  }

  /* 870:3460 draws the burger 24×12.5 with no box, which is not a tappable
     target. 37px is the tallest that still lets the bar close at the frame's 67. */
  .header__toggle {
    height: 37px;
  }

  /* 870:2672 / 870:2803 / 870:2806 — the 0.6 ramp. */
  .h1 {
    max-width: none;
    font-size: var(--fs-58-4);
    line-height: var(--lh-57-2);
  }

  /* Tracking has to be restated for --compact: it is held back at the desktop
     -1.62 at 1024 so Subscribe's heading can stay on 54, and from here down it
     rejoins the plain h2 on -1.86. */
  .h2,
  .h2--compact {
    font-size: var(--fs-38-4);
    line-height: var(--lh-39-17);
    letter-spacing: var(--ls-tight-2);
  }

  .h3 {
    font-size: var(--fs-19);
    line-height: var(--lh-29-45);
  }

  /* .h1--page rides the h1 ramp here too — 940:2011. See the ≤1024 tier. */

  /* 870:2678 — the intro steps down with the ramp; 620 still caps the column. */
  .hero__intro {
    font-size: var(--fs-17);
    line-height: var(--lh-27-2);
    border-bottom-right-radius: 0;
  }

  /* 870:2673 — the rules stop at 393px rather than spanning the column. */
  .hero__rule {
    max-width: 393px;
  }

  /* 870:2796 — the rail lies down and becomes a rule above the copy. This width,
     not 1024, where the column survives. */
  .container {
    flex-direction: column;
  }

  .rail,
  .footer__rail {
    flex: 0 0 auto;
    width: 100%;
    padding-right: 0;
    padding-block: var(--sp-18) 0;
    border-right: 0;
    border-top: var(--rail-border) solid var(--color-accent);
  }

  .rail__stack,
  .footer__rail-stack {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-16);
    text-align: left;
  }

  .rail__marker,
  .rail__marker--flush {
    display: none;
  }

  .footer__divider {
    display: none;
  }

  .section__content,
  .footer__content,
  .dates__grid,
  .subscribe__content {
    width: 100%;
    padding-inline: 0;
  }

  /* 870:2801 — 20px above. The 40 below is 20 + 20: the frame pads its sections
     top and bottom, and ours carry no outer padding to split it with. */
  .section__content {
    padding-block: var(--sp-20) var(--sp-40);
  }

  .footer__content {
    padding-block: 38px;
  }

  /* 870:2765 — the rule above zeroes this strip's inline padding only, so its
     48px block padding is a desktop measurement left behind. 1108:8415 measures
     the same 20 at 576. The 40 below is the copy columns' 20 + 20. */
  .dates__grid {
    padding-block: var(--sp-20) var(--sp-40);
  }

  /* 870:2766 — still three to a row, 211.71px each, 28px apart. */
  .date-card {
    flex: 1 1 211px;
  }

  /* 870:2665 keeps both eyebrow labels on one row here — 190px at x=0 and 117px
     at x=575 — so the row does not stack until below the smallest frame. */
  .hero__actions {
    gap: var(--sp-20);
  }

  .step {
    flex-direction: column;
    gap: var(--sp-12);
  }

  .step__index {
    flex-basis: auto;
    width: auto;
  }

  .step__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-8);
  }

  .timeline__row {
    flex-direction: column;
    gap: var(--sp-8);
  }

  .page-banner__meta > * {
    white-space: normal;
  }

  .page-banner__meta {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .tag-row {
    flex-direction: column;
    gap: var(--sp-8);
  }

  .tag-row__tag {
    flex-basis: auto;
    width: auto;
  }

  .timeline__when {
    flex-basis: auto;
    width: auto;
  }

  /* Stacked, the cross axis is horizontal, so align-items sizes each field's
     width: flex-start shrinks them to an input's default ~173px. */
  .subscribe__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-28);
  }

  .footer__ticker-text {
    font-size: var(--fs-17);
  }

  /* 870:4075 keeps the three link columns side by side, with the brand block on its own
     row above them (870:3336). A real basis, not 0: a zero-basis column always "fits",
     so all four would stay on one line. 145px is the widest of the three (870:3348). */
  .footer__col {
    flex: 1 1 145px;
  }

  /* Must follow .footer__col — same specificity, and the brand carries both
     classes, so source order is what decides which basis it gets. */
  .footer__col--brand {
    flex: 1 1 100%;
  }

  /* 870:3339 runs the strapline across the full row here, so the 240px column
     cap that shapes it beside the links on desktop has to come off. */
  .footer__brand-desc {
    max-width: none;
  }

  /* Wraps if it must, but the gap stays 28: 878:5485/5488 at 768 and
     1118:12084/12087 at 576 both draw the pair 135px wide on x=0 and x=163,
     the same 28 the 1710 frame uses. */
  .cta-row {
    flex-wrap: wrap;
  }

  .scroll-top {
    right: var(--sp-20);
    bottom: var(--sp-20);
  }

  /* 940:2702 — the comparison tables become one bordered block per row instead of
     scrolling sideways, so the min-widths that held a column open come off with it.
     Changing `display` drops the native table semantics, so the per-cell headings
     js/data-table.js writes in are what carry them. */
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td {
    display: block;
  }

  .data-table thead,
  .data-table colgroup {
    display: none;
  }

  .data-table,
  .data-table--wide {
    min-width: 0;
    max-width: none;
  }

  /* 940:2703 laps each row 1px onto the next so two touching rows share one rule.
     Dropped borders rather than a -1px margin: the margin hangs off the last row, and
     .table-scroll counts that pixel as overflow and grows a second scrollbar. */
  .data-table tbody tr {
    padding: var(--bw-1);
    border: var(--bw-1) solid var(--border-rule);
  }

  .data-table tbody tr + tr {
    border-top: 0;
  }

  /* 940:2704 — the topic cell becomes the block's header band. */
  .data-table tbody th {
    padding: var(--sp-12) var(--sp-16);
    border: 0;
    background: var(--bg-page-alt);
  }

  /* 940:2706 — one value per row, ruled off from the band above it. */
  .data-table td {
    padding: var(--sp-13) var(--sp-16) var(--sp-12);
    border: 0;
    border-top: var(--bw-1) solid var(--border-rule);
  }

  /* 940:2707 — the heading, and the 4.75px between it and its value. */
  .data-table__label {
    display: block;
    padding-bottom: var(--sp-4-75);
    font-family: var(--font-mono);
    font-size: var(--fs-10);
    line-height: var(--lh-22);
    letter-spacing: var(--ls-wide-14);
    text-transform: uppercase;
    color: var(--c-cyan-65);
  }

  /* Doc-card padding only. The type is untouched on purpose: 940:2049 and
     940:2066 keep the title and claim on the sizes they inherit. */
  .doc-card__body {
    padding: var(--sp-32) var(--sp-32);
  }

  .doc-card__aside {
    padding: var(--sp-32);
  }

  .doc-card__claim-title {
    padding-bottom: var(--sp-16);
  }

  /* 940:2431 — steps down a size, keeping the desktop 1.32 leading ratio. */
  .note__title {
    font-size: var(--fs-20);
    line-height: var(--lh-26-4);
  }

  /* 940:2385 — set on .doc-lead, not .lead: the home page's lead stays on 28
     here (870:2808) and only the content pages' steps. */
  .doc-lead {
    line-height: var(--lh-27-2);
  }

  /* 1085:20077 — the FAQ lead is the one block the frame does not run to the
     full column: 620 under a 691px heading, on the same 17/28 as every wider
     tier (its 56px box is two lines of 28, not of 27.2). */
  .faq-intro__lead {
    max-width: var(--measure-620);
  }

  /* The FAQ bar below the last frame that draws it: the field's 254px minimum
     (1011:12646) pushes SEARCH to its own row under ~353 and the chips wrap to four
     rows by 320. Dropping the minimum and railing the chips holds the bar at the 768
     frame's 171px all the way down; both rules are inert at 768 itself. */
  .faq-search {
    min-width: 0;
  }

  /* A full row of its own, so the rail is the width of the bar and the count and
     Expand all sit under it rather than stealing from it — which is the two-row
     filter block 1108:3466 draws at this width anyway. */
  .faq-chips {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    /* Room for a chip's 2px focus ring at its 3px offset: overflow-y computes to
       auto the moment overflow-x does, so without it the ring is clipped and can
       hang a second scrollbar off the rail. */
    padding-block: 5px;
    margin-block: -5px;
  }

  /* Deliberately not a [data-scroll-region]: every chip is a button, so tabbing
     already walks the rail. A region would add a redundant stop and take the
     group's role off the chips. */

  /* Under ~430 the longest group name no longer fits its row, and nowrap
     overflowed the page rather than the row. The name wraps instead, on a
     divider floor so it cannot squeeze the rule out altogether. */
  .faq-category__name {
    white-space: normal;
  }

  .faq-category__divider {
    min-width: var(--sp-24);
  }
}

/* ≤576px — Home 1108:8310. Nothing here redraws a component: the tier only
   continues the type ramp, so body copy and the hero intro stay on 768's
   17/27.2 and the hero's two calls to action stay on one row. */
@media (max-width: 576px) {
  :root {
    /* 1108:8409 sits the shell 13.824px in — the same 2.4% of the frame the
       1024 and 768 tiers use, which at this width is no longer 18px. The
       container's own 20px pad rides on top, putting content on x=33.82. */
    --page-gutter: 13.824px;
    --footer-gutter: 13.824px;

    /* 1108:8314 — the hero pads 20px inline and starts flush under the bar, as
       at 768; 1108:8320 pads 28px above the title and 28px below the buttons,
       on a 20px gap between the copy blocks. */
    --hero-pad: var(--sp-20);
    --hero-pad-top: 0px;
    --hero-pad-bottom: 28px;
    --hero-body-pad-top: 28px;
    --hero-body-gap: var(--sp-20);
    /* 1108:8311 — 497 measured from the nav's bottom. */
    --hero-height: 497px;
    --hero-inner-height: 497px;

    /* 1108:8454 — the copy column tightens again: 28px between blocks and back
       to the 1710 frame's 20px inside one. */
    --block-gap: var(--sp-28);
    --prose-gap: var(--sp-20);
  }

  /* Keep the banner's inset equal to the container's or the banner title and the
     copy under it stop lining up. */
  .page-banner__inner {
    padding-inline: var(--container-pad);
  }

  /* 1108:8322 / 1108:8453 — the 576 ramp. The tracking is the base -3.24/-1.86;
     only the size and leading step, so neither is overridden here. */
  .h1 {
    font-size: var(--fs-43-8);
    line-height: var(--lh-42-9);
  }

  /* --compact is NOT brought along: 1118:10728 keeps Subscribe's heading on the
     768 tier's 38.4 while the section h2 steps to 34, so here alone it is the
     larger of the two. */
  .h2 {
    font-size: var(--fs-34);
    line-height: var(--lh-34-68);
  }

  /* .h1--page inherits the h1 ramp here too — 1122:13649. */

  /* 1122:13671 / 1122:13685 — both doc-card headings step once more here. */
  .doc-card__title {
    font-size: var(--fs-34);
    line-height: var(--lh-34-68);
    letter-spacing: var(--ls-tight-2);
  }

  .doc-card__claim-title {
    font-size: var(--fs-30);
    line-height: var(--lh-33);
  }

  /* Body copy is deliberately not overridden: 1108:8458 / 1108:8460 set the same
     17/27.2 as 768, so the h3 above is the odd one out at 19/29.45 (1108:8456). */

  /* 1108:8328 — the intro is 17/27.2 here too, so the 1440 override that took
     it to 19/31.35 has to be undone rather than left to cascade. */
  .hero__intro {
    font-size: var(--fs-17);
    line-height: var(--lh-27-2);
  }

  /* 1108:8320 draws the title, rules and intro on the full 536px column. The
     column has to stretch to say so: as a flex-start item it otherwise
     shrink-wraps to the 761px rule and runs 205px past the viewport. */
  .hero__body,
  .hero__body > * {
    align-self: stretch;
  }

  /* 1108:8323 — the rules fill that column, capped at 761 rather than fixed to
     it; the 393px cap is the 768 frame's alone. */
  .hero__rule {
    width: 100%;
    max-width: 761px;
  }

  /* 1108:9865 — the two calls to action stay on one row and split it, 48px
     apart, each centring its own label. */
  .hero__actions {
    gap: 48px;
  }

  /* Half the row explicitly, not `flex: 1 1 0`: under border-box a zero basis
     floors at the item's own padding, so the solid button came out 60px wider
     than the underlined one. */
  .hero__actions > .btn {
    flex: 1 1 calc(50% - 24px);
    min-width: 0;
  }

  /* 1118:12084 / 1118:12087 keep the section CTAs at their natural 135px side by
     side, so only the mailing list's submit fills its column. */
  .btn--accent {
    width: 100%;
  }

  .footer__ticker {
    align-items: flex-start;
  }

  .footer__ticker-text {
    font-size: var(--fs-15);
  }

  /* Three link columns no longer fit this narrow. The frame pairs them two-up
     (804:6181); one per row until that is settled with the designer. */
  .footer__col {
    flex: 1 1 100%;
  }

  .note {
    flex-direction: column;
    gap: var(--sp-12);
  }

  .note__index {
    flex-basis: auto;
    width: auto;
  }

  /* Even inset now that the section no longer eats 24px of the width */
  .doc-card__body,
  .doc-card__aside {
    padding: var(--sp-24);
  }

  /* 1120:12691 puts the note back under the claim and the specs back into rows
     — one key/value pair per line, as they are above 1024. */
  .doc-card__claim {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-8);
  }

  .doc-card__claim-title {
    padding-bottom: var(--sp-24);
  }

  .doc-card__specs {
    display: block;
  }

  .doc-card__spec:last-child {
    border-bottom: var(--bw-1) solid var(--border-rule);
  }

  /* The FAQ has no 576 frame. 768 (1085:20011) fits the ask card's copy beside
     its 199px link stack on exactly 691; this is where they stop fitting, so the
     row gap below is this tier's own. */
  .faq-ask {
    row-gap: var(--sp-24);
  }

  .faq-ask__actions {
    width: 100%;
  }

  /* The register modal (1772:24808) is drawn at one width only — there is no narrow
     frame for it. Below here its 620px card is the viewport, so the paired rows have
     less than half of 265px each: they stack, and the gutter steps back to the 20px
     the rest of this tier uses. */
  .register__head,
  .register__body {
    padding-inline: var(--sp-20);
  }

  .register__row {
    flex-direction: column;
    /* Stretch, not the flex-start the row carries: `flex: 1 1 0` on a field-group
       is a main-axis rule, so once the row is a column nothing gives the fields a
       width and each one shrinks to its caption. */
    align-items: stretch;
  }

  .register__actions {
    flex-wrap: wrap;
  }
}