/* Use-case hub: "Six ways the record breaks, one place it is kept". A paper question with a picker, a forest stage that
   plays every starting point in one scene, then back to paper for the record they share and the close.
   Without the motion script every part is static and complete: the stage stacks its chapters, the diagram draws its
   lines in CSS. The script adds .is-staged, .has-lines and inline transforms; nothing here depends on it. The head script
   sets html.hub-motion (and .hub-intro) only where the pinned experience will run, so the first paint already has the
   hero's height and the stage's rounded top. */
.use-cases-hub {
    --hub-forest: #0e3b2a;
    --hub-forest-ink: #143d2c;
    --hub-forest-deep: #082e22;
    --hub-forest-raised: #174a36;
    --hub-paper: #fbfaf7;
    --hub-paper-text: #f7f5f0;
    --hub-mist: #c3d2c8;
    --hub-muted: #7d9a8a;
    --hub-slate: #5c685c;
    --hub-rule: #d5dccf;
    --hub-rule-strong: #c4cdbd;
    --hub-gold: #b8862b;
    --hub-gold-dark: #8a6318;
    --hub-signal: #d9ae4e;
    --hub-ease: cubic-bezier(.16, 1, .3, 1);
    --hub-header-h: 81px;
    --hub-pin-h: calc(100svh - var(--hub-header-h));
}

/* Lenis owns wheel smoothing while the stage runs; the page's own smooth scrolling would fight it. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

.use-cases-hub .hub-shell,
.use-cases-hub .use-cases-breadcrumb.public-shell { width: min(100% - 96px, 1320px); margin-inline: auto; }
/* The hub's sections draw their own grounds; the film pages' tinted prose band does not apply here. */
.use-cases-hub .public-block--rich_text { background: transparent; }
.use-cases-hub :is(h1, h2, h3) { font-family: var(--font-display); }

/* The opening waits for the motion script, which reveals it; if the script is late it appears after 1.2s anyway, and
   the script then leaves it be rather than playing it again. */
.hub-intro .hub-hero__title,
.hub-intro .hub-pill { visibility: hidden; animation: hub-intro-fallback 0s linear 1.2s forwards; }
@keyframes hub-intro-fallback { to { visibility: visible; } }

/* Shared actions: a forest pill and a quiet text link, each with a brand icon that nudges where it points. */
.use-cases-hub .hub-button { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 12px 12px 12px 24px; border-radius: 999px; background: var(--hub-forest-ink); color: #fff; font: 600 14px/1.2 var(--font-body); text-decoration: none; transition: background-color .3s var(--hub-ease); }
.use-cases-hub .hub-button b { display: grid; place-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--hub-paper-text); color: var(--hub-forest-ink); font-size: 12px; }
.use-cases-hub .hub-button:hover { background: #28543c; color: #fff; }
.use-cases-hub .hub-text-link { display: inline-flex; align-items: center; gap: 10px; padding-block: 4px; border-bottom: 1px solid #bfc8b9; color: var(--hub-forest-ink); font: 600 14px/1.3 var(--font-body); text-decoration: none; transition: color .25s, border-color .25s; }
.use-cases-hub .hub-text-link b { font-size: 13px; }
.use-cases-hub .hub-text-link:hover { border-color: var(--hub-gold-dark); color: var(--hub-gold-dark); }
.use-cases-hub :is(.hub-button, .hub-text-link, .hub-pill, .hub-case__link) .marketing-icon { transition: transform .35s var(--hub-ease); }
.use-cases-hub :is(.hub-button, .hub-text-link, .hub-case__link):is(:hover, :focus-visible) .marketing-icon--arrow-right { transform: translateX(3px); }
.use-cases-hub :is(.hub-button, .hub-text-link):is(:hover, :focus-visible) .marketing-icon--arrow-up-right { transform: translate(2px, -2px); }
.use-cases-hub :is(.hub-text-link, .hub-pill):is(:hover, :focus-visible) .marketing-icon--arrow-down { transform: translateY(2px); }
.use-cases-hub :is(.hub-button, .hub-text-link, .hub-pill):focus-visible { outline: 2px solid var(--hub-gold-dark); outline-offset: 4px; }

/* 1. The question and the picker. */
/* The hero fills the first screen, leaving the stage's rounded top in view, with the question and the picker centred in
   it as one group. The stylesheet sets that height before first paint; the script only refines it. */
.hub-hero { position: relative; display: flex; flex-direction: column; background: var(--hub-paper); }
html.hub-motion .hub-hero { min-height: calc(100svh - 185px); }
.hub-hero__inner { display: flex; flex: 1; flex-direction: column; justify-content: center; padding-block: 36px 64px; transform-origin: 50% 0; }
.hub-hero__top { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: end; gap: 72px; }
.hub-hero__title { max-width: 13ch; margin: 0; color: var(--hub-forest-ink); font-size: clamp(46px, 5.5vw, 96px); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.hub-title-line-mask { margin-block: -.1em; padding-block: .1em; }
.hub-hero__aside { padding-bottom: 6px; }
.hub-hero__summary { max-width: 44ch; margin: 0 0 28px; color: var(--hub-slate); font-size: 17px; line-height: 1.75; }
.hub-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hub-hero__assurances { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; color: #5f6a5c; font-size: 12px; line-height: 1.6; }
.hub-hero__assurances li { display: inline-flex; align-items: center; gap: 8px; }
.hub-hero__assurances b { color: var(--hub-forest-ink); font-size: 14px; }
.hub-hero__proof { margin-top: 48px; }

/* The picker's question is asked in the display face, as the legend of its options rather than a label above a heading. */
.hub-picker { margin-top: clamp(52px, 8vh, 112px); }
.hub-picker__legend { margin: 0 0 20px; color: var(--hub-forest-ink); font: 600 clamp(20px, 1.6vw, 24px)/1.25 var(--font-display); letter-spacing: -.02em; }
.hub-picker__list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hub-pill { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 16px; padding: 13px 13px 13px 24px; border: 1px solid var(--hub-rule-strong); border-radius: 999px; color: var(--hub-forest-ink); font: 600 clamp(16px, 1.32vw, 20px)/1.25 var(--font-display); letter-spacing: -.02em; text-decoration: none; transition: color .45s var(--hub-ease), border-color .45s var(--hub-ease), opacity .45s var(--hub-ease); }
/* The forest tint grows from where the pointer came in (the script sets --pill-x/--pill-y; the centre otherwise). */
.hub-pill::before { content: ""; position: absolute; z-index: -1; top: var(--pill-y, 50%); left: var(--pill-x, 50%); width: 240%; aspect-ratio: 1; border-radius: 50%; background: var(--hub-forest-ink); transform: translate(-50%, -50%) scale(0); transition: transform .65s var(--hub-ease); }
/* Scoped so it outranks the sitewide inline-flex icon wrapper in landing-precision.css; the arrow sits in the middle of its circle. */
.use-cases-hub .hub-pill b { display: grid; flex: none; place-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #eaeee3; color: var(--hub-forest-ink); font-size: 14px; transition: background-color .45s var(--hub-ease), color .45s var(--hub-ease); }
.hub-pill:is(:hover, :focus-visible) { border-color: var(--hub-forest-ink); color: var(--hub-paper-text); }
.hub-pill:is(:hover, :focus-visible)::before { transform: translate(-50%, -50%) scale(1); }
.use-cases-hub .hub-pill:is(:hover, :focus-visible) b { background: var(--hub-paper-text); color: var(--hub-forest-ink); }
/* While one option's close-up is showing, the others step back so the close-up can sit over them. */
.hub-picker.is-previewing .hub-pill:not(.is-previewed) { opacity: .4; }

/* The close-up that follows a fine pointer over the picker: the case's recorded result in a paper frame, cropped by the
   script to where the result sits so its words are legible. */
.hub-float { position: fixed; z-index: 60; top: 0; left: 0; width: clamp(300px, 26vw, 420px); pointer-events: none; opacity: 0; visibility: hidden; }
.hub-float__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border: 6px solid var(--hub-paper); border-radius: 14px; background: #eef1e8; box-shadow: 0 0 0 1px var(--hub-rule-strong), 0 18px 32px -24px rgba(8, 46, 34, .35); }
.use-cases-hub .hub-float__image { position: absolute; top: 0; left: 0; display: block; width: 100%; max-width: none; height: auto; border-radius: 0; opacity: 0; transform-origin: 0 0; }

/* A forest veil for long jumps between chapters, so a jump never strobes through the ones in between. */
.hub-curtain { position: fixed; z-index: 15; inset: 0; background: var(--hub-forest); opacity: 0; visibility: hidden; pointer-events: none; }

/* 2–3. The stage: a forest scene that the paper question cuts into. */
.hub-stage { position: relative; background: var(--hub-forest); color: var(--hub-paper-text); }
html.hub-motion .hub-stage { clip-path: inset(0 clamp(16px, 3.5vw, 64px) 0 clamp(16px, 3.5vw, 64px) round 28px 28px 0 0); }
.hub-stage__intro { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: end; gap: 72px; padding-block: 128px 88px; }
.hub-stage__intro h2 { max-width: 17ch; margin: 0; color: var(--hub-paper-text); font-size: clamp(36px, 4.2vw, 64px); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.hub-stage__intro p { max-width: 40ch; margin: 0 0 6px; color: var(--hub-mist); font-size: 17px; line-height: 1.7; }
.hub-stage__pin { padding-bottom: 120px; background: var(--hub-forest); }
.hub-stage__grid { display: grid; grid-template-columns: 208px minmax(0, 1fr); column-gap: 48px; align-items: start; }
.hub-stage__index { position: sticky; top: calc(var(--hub-header-h) + 40px); }

.hub-counter { display: none; align-items: center; gap: 8px; height: 32px; margin: 0 0 24px; padding: 0 14px; border: 1px solid rgba(195, 210, 200, .32); border-radius: 999px; color: var(--hub-paper-text); font: 500 13px/1 var(--font-mono); letter-spacing: .04em; }
.hub-counter__digits { display: inline-flex; }
.hub-counter__digit { display: inline-block; height: 1.3em; overflow: clip; line-height: 1.3em; }
.hub-counter__reel { display: flex; flex-direction: column; }
.hub-counter__reel > span { height: 1.3em; }
.hub-counter__total { color: var(--hub-mist); }

.hub-rail ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hub-rail__item { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 10px 0; color: var(--hub-mist); font: 500 14px/1.35 var(--font-body); text-decoration: none; transition: color .35s var(--hub-ease), background-color .35s var(--hub-ease), border-color .35s var(--hub-ease); }
.hub-rail__node { box-sizing: border-box; width: 10px; height: 10px; border: 1.5px solid rgba(195, 210, 200, .55); border-radius: 50%; transition: background-color .35s var(--hub-ease), border-color .35s var(--hub-ease), transform .35s var(--hub-ease); }
.hub-rail__rule { display: none; grid-column: 2; height: 1px; overflow: clip; background: rgba(195, 210, 200, .2); }
.hub-rail__rule b { display: block; height: 100%; background: var(--hub-signal); transform: scaleX(0); transform-origin: 0 50%; }
.hub-rail__item:hover { color: var(--hub-paper-text); }
.hub-rail__item[aria-current] { color: var(--hub-paper-text); }
/* The brand's lifecycle notation: a filled gold node for the case in view, an open gold ring for the ones read. */
.hub-rail__item[aria-current] .hub-rail__node { border-color: var(--hub-signal); background: var(--hub-signal); transform: scale(1.2); }
.hub-rail__item.is-complete .hub-rail__node { border-color: var(--hub-signal); }
.use-cases-hub .hub-rail__item:focus-visible { outline: 2px solid var(--hub-signal); outline-offset: 4px; border-radius: 4px; }

.hub-stage__cases { display: grid; gap: 112px; margin: 0; padding: 0; list-style: none; }
.hub-case { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: center; gap: 56px; }
.use-cases-hub .hub-case { scroll-margin-top: calc(var(--hub-header-h) + 40px); }
.hub-case__problem { max-width: 16ch; margin: 0; color: var(--hub-paper-text); font-size: clamp(28px, 2.85vw, 46px); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.hub-case__problem:focus { outline: none; }
/* A chapter reached from the picker or the index by keyboard takes focus on its heading; it shows where focus landed. */
.use-cases-hub .hub-case__problem:focus-visible { outline: 2px solid var(--hub-signal); outline-offset: 10px; border-radius: 4px; }
.hub-word-mask { margin: -.12em -.06em; padding: .12em .06em; }
.hub-mask { overflow: clip; }
.hub-case__outcome { max-width: 40ch; margin: 22px 0 0; color: var(--hub-mist); font-size: 17px; line-height: 1.7; }
.hub-mask--link { margin: 22px -8px -8px; padding: 8px; }
.hub-case__link { display: inline-flex; align-items: center; gap: 14px; padding: 10px 10px 10px 22px; border: 1px solid rgba(195, 210, 200, .42); border-radius: 999px; color: var(--hub-paper-text); font: 600 14px/1.25 var(--font-body); text-decoration: none; transition: border-color .3s var(--hub-ease), background-color .3s var(--hub-ease); }
.use-cases-hub .hub-case__link b { display: grid; flex: none; place-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--hub-paper-text); color: var(--hub-forest); font-size: 13px; }
.hub-case__link:hover { border-color: var(--hub-signal); color: var(--hub-paper-text); }
.use-cases-hub .hub-case__link:focus-visible { outline: 2px solid var(--hub-signal); outline-offset: 4px; }

/* Every frame is the same size, with or without a recording, so a frame that rises over another always covers it. */
.hub-case__frame { position: relative; margin: 0; padding: 8px; border-radius: 12px; background: var(--hub-paper); transform-origin: 50% 50%; }
.hub-case--mark .hub-case__frame { padding-bottom: 40px; }
.hub-case__screen { position: relative; overflow: hidden; aspect-ratio: 1520 / 1280; border-radius: 6px; background: #e9edde; }
.hub-case__media { position: absolute; inset: 0; }
.hub-case__poster, .hub-case__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hub-case__video { opacity: 0; transition: opacity .4s ease; }
.hub-case__video.is-ready { opacity: 1; }
.hub-case__mark { position: absolute; inset: 0; display: grid; place-items: center; background: #eef1e8; }
.hub-case__mark img { width: 72px; height: 72px; }
.hub-case__frame figcaption { box-sizing: border-box; height: 32px; overflow: hidden; padding: 11px 6px 3px; color: var(--hub-slate); font-size: 12px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.use-cases-hub .hub-case__toggle { bottom: 52px; left: 20px; z-index: 1; }
.hub-case__shade { position: absolute; inset: 0; border-radius: 12px; background: var(--hub-forest-deep); opacity: 0; pointer-events: none; }
.hub-stage__note { grid-column: 2; margin: 56px 0 0; color: var(--hub-mist); font-size: 12px; line-height: 1.6; text-align: right; }

/* The pinned scene: every chapter shares one place, and the script moves between them. The frame takes the height the
   pin leaves once the grid's padding, its caption and the note are counted, up to the width of its column. */
.hub-stage.is-staged .hub-stage__pin { box-sizing: border-box; height: var(--hub-pin-h); padding: 0; overflow: clip; }
.hub-stage.is-staged .hub-stage__grid { box-sizing: border-box; height: 100%; grid-template-columns: clamp(160px, 13vw, 232px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: clamp(32px, 3vw, 60px); align-items: center; padding-block: 36px 26px; }
.hub-stage.is-staged .hub-stage__index { position: static; grid-row: 1 / span 2; align-self: center; }
.hub-stage.is-staged .hub-counter { display: inline-flex; }
.hub-stage.is-staged .hub-rail__item { padding-block: 11px 12px; }
.hub-stage.is-staged .hub-rail__rule { display: block; }
.hub-stage.is-staged .hub-stage__cases { grid-template-areas: "stack"; gap: 0; align-self: center; }
.hub-stage.is-staged .hub-case { grid-area: stack; grid-template-columns: minmax(240px, .58fr) minmax(0, 1.42fr); gap: clamp(32px, 3.4vw, 60px); }
.hub-stage.is-staged .hub-case:not(.is-active) .hub-case__copy { pointer-events: none; }
.hub-stage.is-staged .hub-case__problem { max-width: 15ch; font-size: clamp(28px, 2.55vw, 44px); }
.hub-stage.is-staged .hub-case__outcome { font-size: 16px; }
.hub-stage.is-staged .hub-case__frame { justify-self: end; width: min(100%, calc((var(--hub-pin-h) - 143px) * 1.1875 + 16px)); }
.hub-stage.is-staged .hub-case__toggle { display: none; }
.hub-stage.is-staged .hub-stage__note { margin: 14px 0 0; }

/* 4. One record underneath. */
.hub-record { position: relative; display: grid; align-content: center; background: var(--hub-paper); }
.hub-record__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; gap: 80px; padding-block: 112px; }
.hub-record h2 { max-width: 16ch; margin: 0; color: var(--hub-forest-ink); font-size: clamp(32px, 3.3vw, 52px); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.hub-record__body { max-width: 46ch; margin-top: 26px; color: var(--hub-slate); font-size: 16px; line-height: 1.8; }

/* The pages that feed the record are labels on its lines, not options: no pill, just the name and its gold node. */
.hub-diagram { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(64px, 8vw, 140px) minmax(210px, .82fr); align-items: center; margin: 0; }
.hub-diagram--record-only { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.hub-diagram__sources { position: relative; z-index: 1; display: grid; justify-items: end; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hub-diagram__sources li { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 8px 0; color: var(--hub-forest-ink); font: 500 14px/1.35 var(--font-body); text-align: right; }
.hub-diagram__sources li i { box-sizing: border-box; flex: none; width: 11px; height: 11px; border: 1.5px solid var(--hub-gold); border-radius: 50%; background: var(--hub-paper); }
/* Without the script each case reaches the record on a straight rule; the script replaces them with drawn curves. */
.hub-diagram__sources li::after { content: ""; position: absolute; top: 50%; left: 100%; width: clamp(64px, 8vw, 140px); height: 1px; background: var(--hub-gold); }
.hub-diagram.has-lines .hub-diagram__sources li::after { display: none; }
.hub-diagram__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hub-diagram__track, .hub-diagram__flow { fill: none; stroke-linecap: round; stroke-width: 1.5; }
.hub-diagram__track { stroke: var(--hub-rule); }
.hub-diagram__flow { stroke: var(--hub-gold); }
.hub-diagram__record { position: relative; grid-column: 3; display: grid; gap: 8px; padding: 22px 18px 18px; border-radius: 16px; background: var(--hub-forest); color: var(--hub-paper-text); }
.hub-diagram--record-only .hub-diagram__record { grid-column: 1; width: min(100%, 320px); }
.hub-diagram__mark { display: block; width: 44px; height: 44px; margin: 0 0 10px 2px; }
.hub-diagram__port { position: absolute; top: 50%; left: -7px; box-sizing: border-box; width: 14px; height: 14px; margin-top: -7px; border: 3px solid var(--hub-paper); border-radius: 50%; background: var(--hub-gold); }
.hub-diagram--record-only .hub-diagram__port { display: none; }
.hub-diagram__layers { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* Each layer has a slot in the record; with motion the layer rises into it as the lines arrive, so the record is
   never an empty box. */
.hub-diagram__layers li { overflow: clip; border: 1px dashed rgba(195, 210, 200, .3); border-radius: 8px; }
.hub-diagram__layers span { display: block; margin: -1px; padding: 13px 16px; border-radius: 8px; background: var(--hub-forest-raised); color: var(--hub-paper-text); font: 500 14px/1.3 var(--font-body); }

/* 5. The close: the statement on the left, the actions on the right, where the gold thread from the record lands. */
.hub-close { position: relative; background: var(--hub-paper); }
.hub-close__thread { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hub-close__thread path { fill: none; stroke: var(--hub-gold); stroke-linecap: round; stroke-width: 1.5; }
.hub-close__thread circle { fill: var(--hub-gold); stroke: var(--hub-paper); stroke-width: 3; }
.hub-close__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: end; gap: 48px 72px; padding-block: 112px 168px; }
.use-cases-hub .hub-close__title { max-width: 15ch; margin: 0; color: var(--hub-forest-ink); font-size: clamp(40px, 5.2vw, 84px); font-weight: 600; line-height: 1.03; letter-spacing: -.04em; text-wrap: balance; }
.hub-close__body { max-width: 50ch; margin: 30px 0 0; color: var(--hub-slate); font-size: 17px; line-height: 1.75; }
.hub-close__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 22px; padding-bottom: 8px; }
.use-cases-hub .hub-button--large { min-height: 60px; padding: 14px 14px 14px 30px; font-size: 16px; }
.use-cases-hub .hub-button--large b { width: 32px; height: 32px; font-size: 14px; }
.hub-button__label { display: inline-flex; align-items: center; gap: 16px; }

/* Wide screens give the stage and its frame more room. */
@media (min-width: 1680px) {
    .use-cases-hub .hub-shell,
    .use-cases-hub .use-cases-breadcrumb.public-shell { width: min(100% - 160px, 1440px); }
    .use-cases-hub .hub-stage .hub-shell { width: min(100% - 160px, 1600px); }
    .hub-stage__grid { grid-template-columns: 232px minmax(0, 1fr); column-gap: 64px; }
    .hub-pill { font-size: 21px; }
    .hub-case { grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); gap: 64px; }
    .hub-hero__summary, .hub-stage__intro p { font-size: 18px; }
}

@media (max-width: 1100px) and (min-width: 901px) {
    .hub-stage__grid { grid-template-columns: 184px minmax(0, 1fr); column-gap: 40px; }
    .hub-case { gap: 40px; }
    .hub-diagram { grid-template-columns: minmax(0, 1fr) 56px minmax(190px, .9fr); }
    .hub-record__grid { gap: 56px; }
}

/* 7. Phones and portrait tablets: no pins and no scrubbed video. The picker becomes a row of chips, each case a panel,
   and the chapter index rides along the top of the stage so any case is one tap away. */
@media (max-width: 900px) {
    .use-cases-hub .hub-shell,
    .use-cases-hub .use-cases-breadcrumb.public-shell { width: calc(100% - 40px); }
    .hub-hero__inner { padding-block: 24px 48px; }
    .hub-hero__top { grid-template-columns: 1fr; gap: 26px; }
    .hub-hero__title { max-width: 14ch; font-size: clamp(38px, 10.5vw, 60px); line-height: 1.04; }
    .hub-hero__summary { font-size: 16px; }
    .hub-picker { margin: 44px -20px 0; }
    .hub-picker__legend { margin-bottom: 12px; padding-inline: 20px; font-size: 19px; }
    .hub-picker__list { flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 8px 20px 10px; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
    .hub-picker__list::-webkit-scrollbar { display: none; }
    .hub-picker__list li { flex: none; scroll-snap-align: start; }
    .hub-pill { width: max-content; max-width: 76vw; gap: 12px; padding: 11px 11px 11px 18px; font-size: 15px; }
    .use-cases-hub .hub-pill b { width: 26px; height: 26px; font-size: 12px; }
    .hub-float { display: none; }

    .hub-stage__intro { grid-template-columns: 1fr; gap: 18px; padding-block: 72px 36px; }
    .hub-stage__intro h2 { font-size: clamp(32px, 8.4vw, 44px); }
    .hub-stage__intro p { font-size: 16px; }
    .hub-stage__pin { padding-bottom: 80px; }
    .hub-stage__grid { grid-template-columns: minmax(0, 1fr); }
    .hub-stage__index { top: var(--hub-header-h); z-index: 4; align-self: start; min-width: 0; margin: 0 -20px 36px; padding: 10px 0; background: var(--hub-forest); box-shadow: 0 1px 0 rgba(195, 210, 200, .16); }
    .hub-rail ol { display: flex; gap: 8px; overflow-x: auto; padding: 4px 20px; scroll-padding-inline: 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
    .hub-rail ol::-webkit-scrollbar { display: none; }
    .hub-rail li { flex: none; }
    .hub-rail__item { display: inline-flex; gap: 8px; padding: 8px 14px; border: 1px solid rgba(195, 210, 200, .34); border-radius: 999px; font-size: 13px; white-space: nowrap; }
    .hub-rail__item[aria-current] { border-color: var(--hub-paper-text); background: var(--hub-paper-text); color: var(--hub-forest-ink); }
    .hub-rail__item[aria-current] .hub-rail__node { border-color: var(--hub-gold); background: var(--hub-gold); transform: none; }
    .hub-stage__cases { gap: 72px; }
    .hub-case { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .use-cases-hub .hub-case { scroll-margin-top: calc(var(--hub-header-h) + 76px); }
    .hub-case__copy { display: contents; }
    .hub-case__problem { order: 1; max-width: 18ch; font-size: clamp(26px, 7.2vw, 34px); }
    .hub-case__copy > .hub-mask:not(.hub-mask--link) { order: 2; }
    .hub-case__outcome { margin-top: 16px; font-size: 16px; }
    .hub-case__frame { order: 3; margin-top: 26px; }
    .hub-mask--link { order: 4; margin-top: 18px; justify-self: start; }
    .hub-stage__note { grid-column: 1; margin-top: 48px; text-align: left; }

    /* The diagram as one gold spine: every page on it, running down into the record. */
    .hub-record__grid { grid-template-columns: 1fr; gap: 44px; padding-block: 80px; }
    .hub-diagram { grid-template-columns: 1fr; justify-items: stretch; }
    .hub-diagram__sources { justify-items: start; gap: 4px; padding-left: 26px; }
    .hub-diagram__sources::before { content: ""; position: absolute; top: 20px; bottom: -36px; left: 5px; width: 1.5px; background: var(--hub-gold); }
    .hub-diagram__sources li { padding: 7px 0; text-align: left; }
    .hub-diagram__sources li i { position: absolute; top: 50%; left: -26px; margin-top: -5.5px; }
    .hub-diagram__sources li::after, .hub-diagram__lines { display: none; }
    .hub-diagram__record { grid-column: 1; margin-top: 36px; }
    .hub-diagram__port { top: -7px; left: -1px; margin: 0; }

    .hub-close__thread { display: none; }
    .hub-close__inner { grid-template-columns: 1fr; gap: 40px; padding-block: 96px 104px; }
    .use-cases-hub .hub-close__title { font-size: clamp(36px, 9.6vw, 52px); }
    .hub-close__body { font-size: 16px; }
    .hub-close__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px 28px; padding-bottom: 0; }
}

@media (max-width: 560px) {
    .hub-hero__actions { gap: 18px 24px; }
    .hub-stage__cases { gap: 64px; }
    .hub-case__frame { padding: 6px; }
    .hub-case--mark .hub-case__frame { padding-bottom: 38px; }
    .use-cases-hub .hub-case__toggle { bottom: 48px; left: 16px; }
}

/* Reduced motion: the stacked page, complete and still. */
@media (prefers-reduced-motion: reduce) {
    .hub-pill::before, .hub-pill, .hub-pill b, .hub-rail__item, .hub-rail__node, .hub-case__video,
    .use-cases-hub :is(.hub-button, .hub-text-link, .hub-pill, .hub-case__link) .marketing-icon { transition: none; }
    .use-cases-hub :is(.hub-button, .hub-text-link, .hub-pill, .hub-case__link) .marketing-icon { transform: none !important; }
}

/* Forced colours drop the forest and paper grounds, so frames and the record keep a visible edge. */
@media (forced-colors: active) {
    .hub-case__frame, .hub-diagram__record, .hub-pill, .hub-case__link { outline: 1px solid CanvasText; outline-offset: -1px; }
}