/* ==========================================================================
   responsive.css — mobile-first overrides (min-width only)
   sm 576 | md 768 | lg 1024 | xl 1200  (keep in sync with variables.css)
   ========================================================================== */

/* ---- sm: >= 576px -------------------------------------------------------- */
@media (min-width: 576px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .module-list,
  .industry-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Every module row as tall as the tallest, so the colour bars run one
     height whether a description takes one line or two */
  .module-list {
    grid-auto-rows: 1fr;
  }

  .site-footer__columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .form-panel {
    padding: var(--space-8);
  }

  /* Drawer: a sheet beside the page instead of full screen */
  .mobile-nav {
    width: 400px;
  }

  .ask-card__answer {
    min-height: 9.5em;
  }

  /* RM ONE AI control strip: the promises on one line, bullets between */
  .control-strip__list {
    flex-direction: row;
  }
  .control-strip__list li + li::before {
    display: inline;
  }

  /* Pre-demo discovery: short contact fields and the participants + timing
     pair side by side (the long-label context fields wait for lg) */
  .discovery__fields--4,
  .discovery__group-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- md: >= 768px -------------------------------------------------------- */
@media (min-width: 768px) {
  /* Who we serve hero lead at the deck's 15pt (website deck slide 14) */
  .page-hero__lead--lg {
    font-size: var(--font-size-lead-lg);
  }

  /* Photo caption row: title beside text */
  .media__caption--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* RM ONE AI page: metric band in a row; type cards two a row; support
     panel areas beside their text */
  .metric-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .metric-band__item {
    justify-content: center; /* each label centred in its third of the band */
  }
  .type-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .support-panel__row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  }

  /* Resources: library feature full width over the 2 x 2 small cards;
     support cards, feature pair and FAQ two a row */
  .res-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .res-card--feature {
    grid-column: 1 / -1;
  }
  .support-cards,
  .feature-pair,
  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Home client proof: Before RM ONE beside What clients gained (page 06A) */
  .client-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Platform 30-day pilot: two blocks a row, the fees block across both (page 23A) */
  .brief-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-9);
  }
  .brief-grid__item--wide {
    grid-column: 1 / -1;
  }

  /* About mission card: the label beside the statement, on its centre line */
  .mission {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  /* Value note: the summary beside its title */
  .value-note {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-8);
    align-items: baseline;
  }

  /* …except the one-line summary (platform overview), centred on its own,
     and the brand-tint closing lines: title and link side by side, centred */
  .value-note--muted {
    grid-template-columns: minmax(0, 1fr);
  }

  .value-note--brand {
    grid-template-columns: auto auto;
  }

  .value-note--brand:has(> :only-child) {
    grid-template-columns: auto;
  }

  /* Layer cards, cycle: two columns */
  .layer-cards,
  .cycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Support band: a slimmer band from md, as on the slide */
  .support-band {
    padding: var(--space-5) var(--space-7);
  }

  /* Portrait hero: people stand on the bottom edge at every width */
  /* doubled class: beats the md .page-hero padding further down this block */
  .page-hero.page-hero--portrait {
    padding-bottom: 0;
  }
  .page-hero--portrait .page-hero__inner {
    padding-bottom: var(--space-11);
  }

  /* .grid--rows: tiles side by side share row lines (subgrid), so marker,
     label, title, intro and list line up across the row even when a tile
     has no intro (product updates). The list always takes the last row.
     Browsers without subgrid keep the plain stack. */
  @supports (grid-template-rows: subgrid) {
    .grid--rows > .tile {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: var(--space-3);
      align-content: start;
    }
    .grid--rows > .tile > .ruled-list {
      grid-row: 5;
    }
  }

  /* Resource index: type | title + summary | action on one row */
  .resource-index__item {
    grid-template-columns: 11rem minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--space-7);
    padding: var(--space-6) 0;
  }
  .resource-index__link {
    justify-self: end;
  }

  /* Pricing table: back to a real table — the Midnight Blue head bar, one
     cell per column with hairline borders; the formula and price centred.
     Column widths follow the slide (22 / 48 / 30%). */
  .price-table {
    display: table;
    border-collapse: collapse;
  }
  .price-table thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .price-table tbody {
    display: table-row-group;
  }
  .price-table tbody tr {
    display: table-row;
    padding: 0;
  }
  .price-table th,
  .price-table td {
    padding: var(--space-2) var(--space-5);
    border: var(--border-width) solid var(--color-border);
    vertical-align: middle;
  }
  .price-table thead th {
    background: var(--color-slate-900);
    border-color: var(--color-slate-900);
    color: var(--color-white);
    font-size: 0.9rem; /* 9pt, as on slide 14 */
    font-weight: var(--font-weight-bold);
    text-align: center;
    text-transform: uppercase;
  }
  .price-table thead th:first-child {
    width: 22%;
  }
  .price-table thead th:nth-child(2) {
    width: 48%;
  }
  .price-table tbody td,
  .price-table tbody .price-table__value {
    text-align: center;
  }

  /* The estimator's tier: table rows don't paint a shadow, so the green
     edge moves to the range cell */
  .price-table tbody tr.is-highlighted {
    box-shadow: none;
  }
  .price-table tbody tr.is-highlighted > th {
    box-shadow: inset 4px 0 0 var(--color-brand);
  }

  /* Price estimator: the input beside the estimate, split by a rule */
  .calculator {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: var(--space-9);
    padding: var(--space-8) var(--space-9);
  }
  .calculator__output {
    align-self: center;
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--space-9);
    border-top: 0;
    border-left: var(--border-width) solid var(--color-border-on-dark);
  }

  /* Terms beside the button, as on the slide */
  .price-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-9);
  }

  :root {
    --gutter: var(--space-7);
    --logo-height: 24px;
    --logo-height-header: 31px;
    --section-padding: var(--space-11);
  }

  /* h1, h2, hero and closing titles are fluid (variables.css) — no size
     overrides here */

  .page-hero {
    padding: var(--space-12) 0 var(--space-11);
  }

  .site-header__inner {
    gap: var(--space-6);
  }

  /* Hub chapter cover cards: more room from tablet up */
  .chapter__opener-inner,
  .faq-layout__intro {
    padding: var(--space-8);
  }

  /* Hub pages: the hub name leads the section tabs */
  .chapter-nav__label {
    display: block;
  }
  .site-header__cta {
    padding: 0 var(--space-5);
  }

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

  /* Horizontal track: the segments turn from a left edge into a top edge and
     sit close together, so the row reads as one segmented bar */
  .steps--3,
  .steps--4,
  .steps--5,
  .steps--6 {
    column-gap: var(--track-gap);
    row-gap: var(--space-9);
  }
  .steps--3,
  .steps--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .steps--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .steps--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  :is(.steps--3, .steps--4, .steps--5, .steps--6) .steps__item {
    padding: var(--space-5) var(--space-5) 0 0;
    border-left: 0;
    border-top: var(--track-weight) solid var(--step-color);
  }

  /* Badges in a row: the grey line runs from badge to badge across the
     columns, as on website deck slide 4 */
  .steps--badges {
    column-gap: var(--space-4);
  }
  .steps--badges .steps__item {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 var(--space-3) 0 0;
    border-top: 0;
  }
  .steps--badges .steps__item:not(:last-child)::before {
    top: calc((var(--step-badge-size) - var(--step-badge-line)) / 2);
    left: calc(var(--step-badge-size) / 2);
    width: calc(100% + var(--space-4)); /* to the next badge, across the column gap */
    height: var(--step-badge-line);
  }
  .steps--badges .steps__number,
  .steps--badges .steps__item--action .steps__number {
    grid-row: auto;
    margin-bottom: var(--space-4);
  }
  .steps--badges .steps__title {
    align-self: start;
  }

  /* Five days in a row: the grey line runs from circle to circle across the
     columns, text centred under each circle, as on website deck slide 22 */
  .timeline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--space-4);
  }
  .timeline__item {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .timeline__item:not(:last-child)::before {
    top: calc((var(--day-dot-size) - var(--step-badge-line)) / 2);
    left: 50%;
    width: calc(100% + var(--space-4)); /* to the next circle, across the column gap */
    height: var(--step-badge-line);
  }
  .timeline__day {
    grid-row: auto;
    margin-bottom: var(--space-4);
  }
  .timeline__title {
    align-self: start;
  }

  /* Products: family name + decision beside its modules and benefit
     (website deck slide 11); update cards in a row (slide 13) */
  .product-card {
    grid-template-columns: minmax(0, 17fr) minmax(0, 19fr);
  }
  .update-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Schedule board: lane name beside its track; text under the track */
  .lane {
    grid-template-columns: 8rem minmax(0, 1fr);
    grid-template-areas:
      'label track'
      '. text';
    column-gap: var(--space-7);
    align-items: center;
  }

  .cta-band__panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--space-9);
  }
}

/* ---- lg: >= 1024px ------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Pricing pills (slide 14): one line with full round ends, the items
     split by thin green rules — from lg, where the examples fit on one line
     (below it they stack in a rounded box) */
  .price-band {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) 0;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
  }
  .price-band > * + *::before {
    content: '|';
    margin: 0 var(--space-5);
    font-weight: var(--font-weight-regular);
  }

  /* Product tour dialog: a centred panel, the chapters beside the video and
     as tall as it. The video width is capped by the window's width and
     height, so the whole panel fits short windows (e.g. 1366 x 657). */
  .tour-dialog {
    --tour-video-width: min(54rem, calc((100dvh - 20rem) * 16 / 9), calc(100vw - 30rem));

    width: fit-content;
    max-width: calc(100vw - 4rem);
    height: fit-content;
    max-height: calc(100dvh - 4rem);
    margin: auto;
    border-radius: var(--radius-lg);
  }
  .tour-dialog__layout {
    grid-template-columns: var(--tour-video-width) 19rem;
    grid-template-areas:
      'head head'
      'stage chapters'
      'foot foot';
  }
  .tour-dialog__head {
    padding: var(--space-6) var(--space-6) var(--space-5);
  }
  .tour-dialog__top {
    display: contents;
  }
  .tour-dialog__stage {
    padding: 0 var(--space-5) var(--space-5) var(--space-6);
  }
  /* Size containment: the row takes the video's height, the list scrolls in it */
  .tour-dialog__chapters {
    contain: size;
    overflow-y: auto;
    padding: 0 var(--space-4) var(--space-5) 0;
  }
  .tour-dialog__foot {
    padding: var(--space-5) var(--space-6);
  }

  /* Value chain: the four boxes in a row, arrows pointing right in the gaps */
  .value-chain {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .value-chain__arrow {
    top: 50%;
    right: calc(var(--space-8) / -2);
    bottom: auto;
    left: auto;
    transform: translate(50%, -50%);
  }


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

  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10);
  }
  .split--reverse .split__media {
    order: -1;
  }
  .split--wide-text {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  /* Platform hero (website deck slide 6): beside the photo, each deck line
     of the headline stays on one line */
  .page-hero__title--split .heading-line {
    white-space: nowrap;
  }
  /* ...and the photo is narrower there, so its caption stays stacked */
  .page-hero .media__caption--row {
    grid-template-columns: minmax(0, 1fr);
  }
  .split--wide-media {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  /* Slide 29: the photo runs from the top of the eyebrow to the foot of the
     buttons. The text column sets the height; the photo fills it (cropped
     by object-fit), so the image never stretches the row itself. */
  .closing {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-10);
    align-items: stretch;
  }
  .closing > .media .media__img {
    position: absolute;
    inset: 0;
  }

  /* Hub chapter opener: heading block left, "In this section" list right */
  .chapter__opener-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-9);
    align-items: start;
  }
  .chapter__opener-inner,
  .faq-layout__intro {
    padding: var(--space-9);
  }
  /* A card without a jump list: text left, its action on the right (like the
     CTA band), rather than an empty right half */
  .chapter__opener-inner:not(:has(.chapter__toc)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .chapter__opener-inner:not(:has(.chapter__toc)) .chapter__heading:has(.btn-group) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-9);
  }
  .chapter__opener-inner:not(:has(.chapter__toc)) .chapter__heading > :not(.btn-group) {
    grid-column: 1;
  }
  .chapter__opener-inner:not(:has(.chapter__toc)) .chapter__heading > .btn-group {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin-top: 0;
  }
  .chapter__toc {
    display: block;
  }

  /* Buyer FAQ: intro + prompt stay in view while the questions scroll */
  .faq-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-10);
    align-items: start;
  }
  .faq-layout__intro {
    position: sticky;
    top: calc(var(--header-height) + var(--chapter-nav-height) + var(--space-8));
  }

  .module-list,
  .layer-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Slide 9: every module bar the same height (0.65in), rows 0.33in apart */
  .module-list {
    row-gap: var(--space-8);
  }
  .module {
    min-height: 4.75rem;
  }

  /* Home closing (website deck slide 25): the five promises in one row */
  .proof-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* Resources: the executive-guides card beside the 2 x 2 small cards; the
     four support cards in a row (website deck slides 16 and 18) */
  .res-grid {
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  }
  .res-card--feature {
    grid-column: 1;
    grid-row: span 2;
  }
  .support-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Products: the four family cards two by two (website deck slide 11) */
  .product-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* RM ONE AI page: the metric labels at full size once the band is wide */
  .metric-band__label {
    font-size: var(--font-size-deck-16);
  }

  /* RM ONE AI page: five type cards in a row, each example agent under its
     card (website deck slide 20) */
  .type-cards,
  .agent-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--space-4);
  }

  /* Cycle: three steps a row, a short grey dash in the gap after each step
     name except the last of a row (website deck slide 7) */
  .cycle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cycle__item:not(:nth-child(3n)) .cycle__title::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(var(--cycle-gap) / -2);
    width: var(--space-5);
    height: 3px;
    background: var(--color-grey-200);
    transform: translate(50%, -50%);
  }
  .industry-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Schedule board: one row per lane — name, track, text */
  .lane {
    grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 20rem);
    grid-template-areas: 'label track text';
    column-gap: var(--space-8);
  }
  .industry-list--roster .industry {
    font-size: var(--font-size-xl);
  }
  /* Capitals run wider: one step down, the deck's 14pt (slide 14) */
  .industry-list--caps .industry {
    font-size: var(--font-size-deck-14);
  }

  /* Flow becomes a horizontal chain: nodes on one line, text below each */
  .flow {
    --flow-col-gap: var(--space-7);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--flow-col-gap);
  }
  .flow__item {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 0;
  }
  .flow__node {
    grid-row: auto;
    margin-bottom: var(--space-5);
  }
  .flow__label {
    align-self: auto;
  }
  /* Connector runs from this node to the next, with a small gap at each end */
  .flow__item:not(:last-child)::after {
    top: calc(var(--flow-node) / 2 - 1px);
    bottom: auto;
    left: calc(var(--flow-node) + var(--space-3));
    right: calc(var(--flow-col-gap) * -1 + var(--space-3));
    width: auto;
    height: 2px;
  }
  /* Arrowhead where the line meets the next node */
  .flow__item:not(:last-child)::before {
    content: '';
    position: absolute;
    top: calc(var(--flow-node) / 2 - 5px);
    right: calc(var(--flow-col-gap) * -1 + var(--space-3));
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--color-green-500);
    border-right: 2px solid var(--color-green-500);
    transform: rotate(45deg);
  }

  /* Landing screen (home page deck 10/13/26, slide 1): the Midnight Blue
     screen fills the window under the header, the benefit strip at its
     foot. The messaging, left-aligned in the left column, and the
     screenshot over its bar and caption on the right, in the slide's
     proportions (columns 4.5%–46% and 48.2%–95.3% of the width), drawn in
     from both sides on wide screens so the header logo sits centred over
     "We Build Profit." (--landing-side); the pair sits in the middle of the
     space above the strip, the text ending a little above the caption. */
  .landing {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
  }

  .landing__inner {
    grid-template-columns: minmax(0, 415fr) minmax(0, 471fr);
    align-content: center;
    align-items: end;
    column-gap: 2.2%;
    padding: var(--landing-pad-top) var(--landing-side) var(--landing-pad-bottom);
  }

  .landing__intro {
    margin-bottom: var(--landing-text-lift);
  }

  /* Each headline line stays whole, as on the slide */
  .landing__title .landing__line {
    white-space: nowrap;
  }

  /* the slide's spacing scales with the screen height once it is one
     screen: the full gap under the headline, a smaller one above the
     lead */
  .landing__tagline {
    margin-top: var(--landing-gap);
  }

  .landing__lead {
    margin-top: var(--landing-gap-sm);
  }

  .landing__media {
    max-width: var(--landing-media-max);
    margin-top: 0;
  }

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

  /* Book page: text beside the cover (3 : 2). At this ratio the cover's
     height matches the text block at desktop widths, as on the slide (label
     to button); centring splits any difference evenly above and below. */
  .book-intro__layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-10);
  }
  .book-intro__cover {
    max-width: none;
    align-self: center;
  }

  /* Pre-demo discovery (slides 27–34): the two questions side by side on a
     shared subgrid — title, four answers, error — so each answer card lines
     up with the one beside it however the titles wrap; the context fields
     two across; both contact rows on one four-column grid; results beside
     the score card (the slide's 2.89in card) */
  .discovery__questions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    row-gap: 0;
  }

  .discovery-question {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
  }

  .discovery-question__options {
    display: contents;
  }

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

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

  .discovery__next {
    min-width: 18.375rem; /* the slide's 2.55in button */
  }

  .discovery-result {
    grid-template-columns: minmax(0, 1fr) 20.75rem;
    grid-template-areas:
      'summary score'
      'categories score'
      'priorities score';
    gap: var(--space-8) var(--space-10);
  }

  .discovery-category {
    grid-template-columns: 9.5rem minmax(0, 1fr);
  }
}

/* ---- xl: >= 1200px — full desktop navigation ------------------------------ */
@media (min-width: 1200px) {
  /* Platform hero caption (website deck 10/8/26 page 07): the title beside
     "Complements Salesforce / HubSpot", as on the slide, once the photo is wide enough */
  .page-hero .media__caption--row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* Home closing proof row (slide 25): each promise on one line at the
     deck's 14pt, spread across the row */
  .proof-row {
    grid-template-columns: repeat(5, auto);
    justify-content: space-between;
    column-gap: var(--space-4);
  }

  /* Header inside the content column, so the logo and the button line up
     with the page below: logo left (its auto margin), then the menu, Login
     and Book a demo grouped on the right. No header gap here — the links'
     own padding spaces them, so About → Login matches the menu's rhythm. */
  .site-header__inner {
    gap: 0;
  }
  .site-nav {
    display: block;
    --nav-link-pad: var(--space-4);
  }
  .site-header__actions {
    gap: var(--space-4);
  }
  /* Login: a menu-style link, a step quieter than the menu itself */
  .site-header__login {
    display: inline-flex;
    --nav-link-pad: var(--space-4);
    color: var(--color-slate-700);
  }
  /* The slide's pill: 64% of the header's height, about 3.5 times as wide
     as tall */
  .site-header__cta {
    min-height: 2.875rem; /* 46px in the 72px header */
    padding: 0 var(--space-6);
  }

  /* Hub chapter title: full size once the heading column is wide enough */
  .chapter__title {
    font-size: var(--font-size-3xl);
  }

  .site-header__toggle,
  .mobile-nav,
  .nav-backdrop {
    display: none;
  }
}

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

  .btn.is-loading::after {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }

  /* Pages switch instantly — no crossfade (main.css §8) */
  @view-transition {
    navigation: none;
  }
}

/* ---- Print --------------------------------------------------------------- */
@media print {
  .site-header,
  .mobile-nav,
  .nav-backdrop,
  .cta-band,
  .site-footer {
    display: none !important;
  }
  .section--dark,
  .page-hero--dark,
  .chapter__opener-inner,
  .faq-layout__intro {
    background: #ffffff !important;
    color: #000000 !important;
  }
}