/* story.css — THE STORY BLOCKS (story-blocks.mjs; Ryan, 2026-10-12: Apple's sequence, the paperwork page
   first). Loaded only by a page told as a story — today the home page (pages/index.mjs extraHead) — after
   site.css. The Paperwork page's story waits on Ryan's screenshots (LOCAL branch wip/paperwork-story-2026-10-12).
   ⛔ Cached `immutable` like site.css, under the same ?V — deploy-marketing's version guard checks it.
   ⛔ Every frame has its shape from CSS (aspect-ratio or a height); a picture never sizes its box.
   ⛔ Below 48rem a desk screen is drawn CLOSER, not smaller: a 4:3 cut around its `focus` (--fx --fy --zp).
   ⛔ TWO SKINS, ONE SET OF RULES (Ryan, 2026-10-12). A feature page is the green hero over the cream page:
      light-grey cards and dark words, like Apple's light product pages, with one or two dark MOMENTS
      (`tone: 'dark'` → .st-dark; the photograph is always one). The home page (theme-cine) is dark
      throughout. A block names no colour of its own — only the --st-* tokens below. */

.st-section, .st-hero, .st-cinema, .st-subnav {
  --st-edge: max(1.25rem, calc((100% - 72rem) / 2 + 2rem));
  --st-head: var(--ink-heading);
  --st-text: #5F5D58;          /* a card's sentence, a caption */
  --st-dim: #8A867E;           /* the grey half of the big paragraph, a step not on screen (3.4:1, large text) */
  --st-card: #F0EEE9;
  --st-line: rgb(31 30 28 / .12);
  --st-accent: var(--brand);
  --st-amber: #9A5B00;         /* --cta is a fill; on a light card its words need this */
  --st-icon-bg: var(--brand-tint);
  --st-drop: rgb(31 30 28 / .3);
}
.st-dark, body.theme-cine :is(.st-section, .st-hero, .st-cinema, .st-subnav) {
  --st-head: #FAF9F6;
  --st-text: #8E8B84;
  --st-dim: #6B6862;
  --st-card: #161617;
  --st-line: rgb(255 255 255 / .12);
  --st-accent: #5EEAD4;
  --st-amber: var(--cta);
  --st-icon-bg: rgb(94 234 212 / .12);
  --st-drop: #000;
}
.st-dark { background: #000; color: #C9C6BE; color-scheme: dark; }
.st-dark .eyebrow { color: #8FCFC7; }
.st-dark .deck-arrow { background: rgb(255 255 255 / .08); color: rgb(250 249 246 / .8); }
.st-dark .deck-arrow:hover:not(:disabled) { background: rgb(255 255 255 / .16); color: var(--on-brand); }

.st-section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.st-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.st-head.is-center { margin-inline: auto; text-align: center; }
.st-head h2 { margin: 0.5rem 0 0; font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.04; letter-spacing: -0.025em; color: var(--st-head); }
.st-copy { margin: 1rem 0 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--st-text); }
/* a block's + and its link (story-blocks.mjs moreParts — site.css .chapter-more / .pill-cta, drawn for the dark) */
.st-head .chapter-actions, .st-split-words .chapter-actions { margin-top: 1.5rem; }
.st-head.is-center .chapter-actions { justify-content: center; }
body:not(.theme-cine) :is(.st-section, .st-hero):not(.st-dark) .pill-cta { background: var(--surface); border-color: var(--line); color: var(--ink-heading); }
body:not(.theme-cine) :is(.st-section, .st-hero):not(.st-dark) .pill-cta:hover { background: var(--brand-tint); border-color: rgb(15 118 110 / .35); }
body:not(.theme-cine) :is(.st-section, .st-hero):not(.st-dark) .chapter-more { background: var(--ink-heading); color: var(--page); }

/* the name of each picture's slot — shown only with ?slots in the address (story.js) */
.st-slot { display: none; }
html.show-slots .st-slot {
  display: block; position: absolute; left: 0.5rem; top: 0.5rem; z-index: 6; pointer-events: none;
  padding: 0.25rem 0.5rem; border-radius: 0.375rem; background: #F59E0B; color: #1F1E1C;
  font: 600 0.75rem/1.25 var(--font-body);
}

/* ── frames ───────────────────────────────────────────────────────────────────────────────────── */
.st-mac { position: relative; width: 100%; }
/* the base is wider than the lid (-5.5% a side): from 48rem the frame keeps that inside its own box, so a
   laptop that fills a column never pushes the page sideways (a phone's 1.25rem gutter already holds it) */
@media (min-width: 48rem) { .st-mac { padding-inline: 5%; } }
.st-mac-lid {
  position: relative; padding: clamp(0.35rem, 1.1vw, 0.8rem); border-radius: 1.1rem 1.1rem 0.4rem 0.4rem;
  background: #1A1A1C; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 40px 80px -36px var(--st-drop);
}
.st-mac-lid::before { content: ""; position: absolute; top: 0.3rem; left: 50%; width: 0.25rem; height: 0.25rem; margin-left: -0.125rem; border-radius: 50%; background: #2E2E31; }
.st-mac-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0.45rem; background: #0C0C0C; }
.st-mac-screen img, .st-tab-panel img, .st-scrolly-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0 0;  /* the app's menu, never cut */
}
.st-mac-base { position: relative; height: clamp(0.55rem, 1.2vw, 0.95rem); margin-inline: -5.5%; border-radius: 0 0 1rem 1rem / 0 0 0.7rem 0.7rem; background: linear-gradient(#45454A, #1D1D1F 70%); }
.st-mac-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 40%; transform: translateX(-50%); border-radius: 0 0 0.5rem 0.5rem; background: #141416; }

.st-window { position: relative; overflow: hidden; border-radius: 0.9rem; background: #0C0C0C; box-shadow: 0 0 0 1px var(--st-line), 0 30px 60px -30px var(--st-drop); }
.st-window img, .st-photo img, .st-phone-screen img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 0%); transform: scale(var(--zp, 1)); transform-origin: var(--fx, 50%) var(--fy, 0%);
}
.st-phone-screen img { object-position: 50% 0; transform: none; }

.st-phone { position: relative; container-type: inline-size; aspect-ratio: 900 / 1818; }
.st-phone-body { height: 100%; padding: 3.2cqw; border-radius: 14cqw; background: #1A1A1C; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 30px 60px -30px var(--st-drop); }
.st-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 11cqw; background: #000; }

.st-photo { position: absolute; inset: 0; }

/* ⛔ A LAPTOP HOLDS THE DESK CAPTURE AT NATURAL SCALE, ON A PHONE TOO (Ryan, 2026-10-12, from his phone: "it's a
   laptop and it's showing a mobile version which looks pretty dumb"). Until v=74 a phone drew the lid 4:3 and the
   screen zoomed around its `focus` — a desk list cut to a few huge rows reads as a phone app in a laptop. Now the
   lid keeps 16:10 and shows the whole screen at every width; the capture is a whole window shot 16:10
   (scripts/lib/marketing-screens-light.cjs WINDOWS), so the frame cuts none of it. `focus` still cuts a WINDOW
   (home.css .kp-screen) — a window is not a laptop. */
@media (max-width: 47.9375rem) {
  .st-mac-lid { border-radius: 0.8rem 0.8rem 0.3rem 0.3rem; }
}

/* a changing screen SLIDES over the one before it, never dims (2026-10-09): the one leaving holds still
   until the new one has arrived, then hides — so no strip of the empty screen shows between them */
.st-tab-panel, .st-scrolly-panel {
  position: absolute; inset: 0; visibility: hidden;
  transition: transform 0s linear 0.55s, visibility 0s linear 0.55s;
}
.st-tab-panel { transform: translateX(5%); }
.st-scrolly-panel { transform: translateY(7%); }
.st-tab-panel[data-open], .st-scrolly-panel[data-open] { z-index: 1; visibility: visible; transform: none; transition: transform 0.55s var(--ease), visibility 0s; }

/* ── 1 · the bar that stays: the site header's second tier (green on a feature page, black on the home) */
.st-subnav {
  position: sticky; top: 4.25rem; z-index: 40;
  background: rgb(19 78 74 / .9); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid rgb(250 249 246 / .12);
}
body.theme-cine .st-subnav { background: rgb(22 22 23 / .82); border-bottom-color: rgb(255 255 255 / .08); }
.st-subnav-in { display: flex; align-items: center; gap: 1.75rem; height: 3.25rem; }
.st-subnav-title { margin: 0 auto 0 0; font: 600 1.125rem/1 var(--font-display); color: var(--on-brand); }
.st-subnav-links { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; }
.st-subnav-links a { color: rgb(250 249 246 / .72); text-decoration: none; }
.st-subnav-links a:hover, .st-subnav-links a[aria-current="true"] { color: var(--on-brand); }
.st-subnav .st-subnav-cta { min-height: 2rem; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.8125rem; }
@media (max-width: 47.9375rem) { .st-subnav { display: none; } }
@media (max-width: 63.9375rem) { .st-subnav-links { display: none; } }
html:has(.st-subnav) { scroll-padding-top: 8.5rem; }

/* ── 2 · the hook: the feature pages' green hero (site.css .page-hero), the laptop's foot on the cream ── */
.page-hero.st-hero { padding-bottom: 0; overflow: hidden; }
.st-hero-stage { position: relative; isolation: isolate; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.st-hero-stage::before { content: ""; position: absolute; z-index: -1; left: -100vw; right: -100vw; bottom: 0; height: 28%; background: var(--page); }
.st-hero + .st-section { padding-top: clamp(3.5rem, 6vw, 5.5rem); }

/* ── 3 · get the highlights: wide cards on a desk, TALL on a phone ────────────────────────────── */
.st-hl-title { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; color: var(--st-head); }
.st-hl-scroll, .st-cards-scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--st-edge); scrollbar-width: none; }
.st-hl-scroll::-webkit-scrollbar, .st-cards-scroll::-webkit-scrollbar { display: none; }
.st-hl-scroll:focus-visible, .st-cards-scroll:focus-visible { outline: 2px solid var(--cta); outline-offset: -2px; }
.st-hl-track, .st-cards-track { display: flex; gap: 1.25rem; width: max-content; margin: 0; padding: 0.25rem var(--st-edge); list-style: none; }
.st-hl-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; scroll-snap-align: start;
  width: min(58rem, 82vw); aspect-ratio: 16 / 9; border-radius: 1.75rem; background: var(--st-card);
}
.st-hl-words { position: relative; z-index: 2; max-width: 32rem; margin: 0; padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.5rem, 2.8vw, 2.5rem) 0; font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.35; color: var(--st-text); }
.st-hl-words b, .st-card-words b { color: var(--st-head); font-weight: 600; }
.st-hl-visual { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: clamp(1rem, 2vw, 1.75rem); }
.st-hl-visual .st-phone { width: 30%; flex: none; }
.st-hl-visual .st-window { width: 80%; height: 130%; flex: none; }
.st-arrows { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
@media (max-width: 47.9375rem) {
  .st-hl-card { width: 84vw; aspect-ratio: 9 / 14; border-radius: 1.5rem; }
  .st-hl-visual .st-phone { width: 66%; }
  .st-hl-visual .st-window { width: 90%; height: 120%; }
}

/* ── 4 · one paragraph, its key words bright ──────────────────────────────────────────────────── */
.st-narrative .container { max-width: 62rem; }
.st-narrative-text { margin: 0; font: 600 clamp(1.625rem, 3.4vw, 2.75rem)/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--st-dim); }
.st-narrative-text b { color: var(--st-head); font-weight: 600; }

/* ── 5 · one big screen, tabs under it (site.js .mega-rail: aria-selected + data-open) ────────── */
.st-tabs { max-width: 66rem; margin-inline: auto; }
/* .mega-rail is borrowed for site.js's tab keys only — not its border and padding on the end */
/* ⛔ overflow-y: hidden — `overflow-x: auto` alone makes the other axis auto too, and the tabs' -1px margin over the
   row's own border is a 1px vertical overflow: on a phone the row scrolled up and down under a finger (Ryan,
   2026-10-12: "some tabs below the laptops scroll up and down on mobile, ensure they are all contained") */
.st-tab-row { display: flex; justify-content: center; gap: 0.25rem 2rem; width: fit-content; max-width: 100%; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; padding-inline: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-inline-end: 0; border-bottom: 1px solid var(--st-line); }
.st-tab-row::-webkit-scrollbar { display: none; }
.st-tab {
  flex: none; min-height: 2.75rem; margin-bottom: -1px; padding: 0.75rem 0; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--st-text); font: 500 1rem/1.2 var(--font-body); white-space: nowrap; cursor: pointer;
}
.st-tab:hover { color: var(--st-head); }
.st-tab[aria-selected="true"] { color: var(--st-head); border-bottom-color: var(--st-head); }
.st-tab:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
/* every caption in one grid cell — the line is always as tall as the longest, so a tab never moves the page */
.st-tab-caps { display: grid; max-width: 40rem; margin: 1.5rem auto 0; text-align: center; font-size: 1.0625rem; line-height: 1.5; color: var(--st-text); }
.st-tab-cap { grid-area: 1 / 1; margin: 0; visibility: hidden; }
.st-tab-cap:first-child { visibility: visible; }
.st-tab-cap b { color: var(--st-head); }
.st-tabs:has(.st-tab:nth-child(2)[aria-selected="true"]) .st-tab-cap:first-child,
.st-tabs:has(.st-tab:nth-child(3)[aria-selected="true"]) .st-tab-cap:first-child,
.st-tabs:has(.st-tab:nth-child(4)[aria-selected="true"]) .st-tab-cap:first-child,
.st-tabs:has(.st-tab:nth-child(5)[aria-selected="true"]) .st-tab-cap:first-child,
.st-tabs:has(.st-tab:nth-child(6)[aria-selected="true"]) .st-tab-cap:first-child,
.st-tabs:has(.st-tab:nth-child(7)[aria-selected="true"]) .st-tab-cap:first-child,
.st-tabs:has(.st-tab:nth-child(8)[aria-selected="true"]) .st-tab-cap:first-child { visibility: hidden; }
.st-tabs:has(.st-tab:nth-child(2)[aria-selected="true"]) .st-tab-cap:nth-child(2),
.st-tabs:has(.st-tab:nth-child(3)[aria-selected="true"]) .st-tab-cap:nth-child(3),
.st-tabs:has(.st-tab:nth-child(4)[aria-selected="true"]) .st-tab-cap:nth-child(4),
.st-tabs:has(.st-tab:nth-child(5)[aria-selected="true"]) .st-tab-cap:nth-child(5),
.st-tabs:has(.st-tab:nth-child(6)[aria-selected="true"]) .st-tab-cap:nth-child(6),
.st-tabs:has(.st-tab:nth-child(7)[aria-selected="true"]) .st-tab-cap:nth-child(7),
.st-tabs:has(.st-tab:nth-child(8)[aria-selected="true"]) .st-tab-cap:nth-child(8) { visibility: visible; }
@media (max-width: 47.9375rem) {
  .st-tab-row { justify-content: flex-start; gap: 1.5rem; padding-inline: 0.25rem; }
}

/* ── 6 · the photograph across the page (always a dark moment) ────────────────────────────────── */
.st-cinema { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(36rem, 52vw, 52rem); overflow: hidden; }
.st-cinema-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.st-cinema-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #000 0, rgb(0 0 0 / .72) 30%, rgb(0 0 0 / .15) 65%, rgb(0 0 0 / .25) 100%); }
.st-cinema-words { padding-block: clamp(3rem, 6vw, 5rem); }
.st-cinema-words h2 { max-width: 17ch; margin: 0.5rem 0 0; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; color: #FFF; }
.st-facts { display: grid; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font: 600 clamp(1.25rem, 2.2vw, 1.75rem)/1.25 var(--font-display); color: rgb(255 255 255 / .92); }
@media (max-width: 47.9375rem) { .st-cinema { min-height: 38rem; } }

/* ── 7 · the laptop that stays, its screen swapping (story.js adds .is-live and --st-top) ───────── */
/* as it rests: each step its words and its own picture, close together */
.st-scrolly .st-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.st-scrolly-stage { display: none; }
.st-steps { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin: 0; padding: 0; list-style: none; }
.st-step { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.st-step-n { margin: 0; font: 600 0.875rem/1 var(--font-body); letter-spacing: 0.08em; color: var(--st-accent); transition: color 0.3s var(--ease); }
.st-step h3 { margin: 0.625rem 0 0.5rem; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; color: var(--st-head); transition: color 0.3s var(--ease); }
.st-step-words > p:last-child { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--st-text); transition: color 0.3s var(--ease); }
.st-scrolly .st-mac-screen img, .st-scrolly-panel img { object-position: var(--fx, 50%) var(--fy, 0%); transform: scale(var(--zp, 1)); transform-origin: var(--fx, 50%) var(--fy, 0%); }
@media (max-width: 47.9375rem) {
  .st-step { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}
/* pinned: the stage holds still under the bars; ~36vh of scroll per step picks the one on screen */
.st-scrolly.is-live .st-scrolly-track { height: calc(100vh - var(--st-top, 7.5rem) + var(--n) * 36vh); }
.st-scrolly.is-live .st-scrolly-pin { position: sticky; top: var(--st-top, 7.5rem); display: grid; align-items: center; height: calc(100vh - var(--st-top, 7.5rem)); }
/* the picture is the star: the stage runs wider than the page's words (82rem, not 72) */
.st-scrolly.is-live .st-scrolly-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: clamp(2.5rem, 4vw, 4rem); align-items: center; width: 100%; max-width: 82rem; }
.st-scrolly.is-live .st-scrolly-stage { display: block; }
.st-scrolly.is-live .st-scrolly-stage .st-mac { width: min(100%, calc((100vh - var(--st-top, 7.5rem) - 6.5rem) * 1.6)); margin-inline: auto; }
.st-scrolly.is-live .st-step-pic { display: none; }
.st-scrolly.is-live .st-steps { gap: 0; }
.st-scrolly.is-live .st-step { display: block; padding: 1.125rem 0 1.125rem 1.5rem; border-left: 2px solid var(--st-line); transition: border-color 0.3s var(--ease); }
.st-scrolly.is-live .st-step.is-on { border-left-color: var(--st-accent); }
.st-scrolly.is-live .st-step h3 { font-size: clamp(1.25rem, 1.8vw, 1.625rem); }
.st-scrolly.is-live .st-step:not(.is-on) :is(.st-step-n, h3, .st-step-words > p:last-child) { color: var(--st-dim); }

/* ── 8 · words one side, the picture the other ────────────────────────────────────────────────── */
.st-split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.st-split.side-left .st-split-fig { order: -1; }
.st-split-fig { margin: 0; min-width: 0; }
.st-split-cap { max-width: 34rem; margin: clamp(2.5rem, 4vw, 3.5rem) auto 0; text-align: center; font-size: 0.9375rem; line-height: 1.5; color: var(--st-text); }
.st-split-cap b { color: var(--st-head); font-weight: 600; }
.st-split-words .st-head { margin-bottom: 0; }
.st-points { display: grid; gap: 0.625rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.st-points li { display: flex; gap: 0.625rem; }
.st-points .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--st-accent); }
.st-split-media { display: flex; justify-content: center; align-items: flex-start; }
.st-split-media .st-phone { width: 44%; flex: none; }
.st-split-media.is-2 .st-phone:first-child { z-index: 1; margin-right: -9%; transform: translateY(9%); }
.st-split-media.is-2 .st-phone:last-child { z-index: 2; }
.st-split-media.is-1 .st-phone { width: 52%; }
@media (max-width: 47.9375rem) {
  .st-split-grid { grid-template-columns: minmax(0, 1fr); }
  .st-split.side-left .st-split-fig { order: 0; }
  .st-split-media .st-phone { width: 48%; }
}

/* ── 9 · cards of different widths — TALL, so a screenshot in one can be read (Ryan: 26rem → 34.5rem) ── */
.st-cards .st-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.st-card {
  position: relative; display: flex; flex-direction: column; gap: 1.25rem; overflow: hidden; scroll-snap-align: start;
  height: 34.5rem; padding: 2rem; border-radius: 1.5rem; background: var(--st-card);
}
.st-card.is-narrow { width: 21rem; }
.st-card.is-wide { width: 40rem; }
.st-card.is-words { justify-content: space-between; }
.st-card-words { order: -1; max-width: 26rem; margin: 0; font-size: 1.125rem; line-height: 1.4; color: var(--st-text); }
.st-card-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--st-icon-bg); color: var(--st-accent); }
.st-card-icon .icon { width: 1.375rem; height: 1.375rem; }
.st-card-visual { flex: 1; min-height: 0; display: flex; justify-content: center; margin-bottom: -2.25rem; }
.st-card-visual .st-phone { width: 40%; flex: none; }
.st-card.is-narrow .st-card-visual .st-phone { width: 80%; }
.st-card-visual .st-window { width: 88%; height: 120%; flex: none; }
.st-card.is-narrow .st-card-visual .st-window { width: 100%; }
@media (max-width: 47.9375rem) {
  .st-card { height: 32rem; padding: 1.5rem; }
  .st-card.is-narrow { width: 72vw; }
  .st-card.is-wide { width: 86vw; }
  .st-card-visual .st-phone { width: 60%; }
  .st-card.is-narrow .st-card-visual .st-phone { width: 72%; }
}

/* ── 10 · the closing grid ────────────────────────────────────────────────────────────────────── */
.st-bento-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.st-tile { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.375rem; min-height: 13rem; padding: 1.75rem; border-radius: 1.5rem; background: var(--st-card); }
.st-tile.is-w2 { grid-column: span 2; }
.st-tile.is-h2 { grid-row: span 2; }
.st-tile-icon { margin-bottom: auto; color: var(--st-text); }
.st-tile-icon .icon { width: 1.75rem; height: 1.75rem; }
.st-tile-big { margin: 0; font: 700 clamp(2rem, 3.4vw, 3.25rem)/1 var(--font-display); letter-spacing: -0.03em; color: var(--st-head); }
.st-tile.tone-teal .st-tile-big { color: var(--st-accent); }
.st-tile.tone-amber .st-tile-big { color: var(--st-amber); }
.st-tile-text { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--st-text); }
/* ⛔ ONE COLUMN ON A PHONE (Ryan, 2026-10-12, the trust grid's CAD tile: "a tall cell with its words at the foot and an
   empty top"). Two columns put a one-cell tile beside a wordier one and stretched it to that neighbour's height —
   the words sat at the foot of a mostly empty box. One column: no tile has a neighbour to stretch to, and every
   tile is as tall as its own words. */
@media (max-width: 47.9375rem) {
  .st-bento-grid { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .st-tile { min-height: 9rem; padding: 1.25rem; }
  .st-tile.is-w2, .st-tile.is-h2 { grid-column: auto; grid-row: auto; }
}

/* ── motion: the reveals are a desk's with a mouse (site.css round 22 / v=66 — never a touch screen) ── */
@keyframes stSettle { from { transform: scale(1.1); } to { transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 48rem) and (hover: hover) and (pointer: fine) {
    .st-head, .st-hl-title, .st-narrative-text, .st-split-words, .st-cinema-words h2, .st-tab-caps {
      animation: revealRise linear both; animation-timeline: view(block); animation-range: cover 3% cover 26%;
    }
    .st-tabs .st-mac, .st-split-media, .st-bento-grid {
      animation: revealZoom linear both; animation-timeline: view(block); animation-range: cover 3% cover 30%;
    }
    .st-facts li { animation: revealRise linear both; animation-timeline: view(block); }
    .st-facts li:nth-child(1) { animation-range: cover 18% cover 34%; }
    .st-facts li:nth-child(2) { animation-range: cover 26% cover 42%; }
    .st-facts li:nth-child(3) { animation-range: cover 34% cover 50%; }
    .st-facts li:nth-child(4) { animation-range: cover 42% cover 58%; }
    .st-cinema-media img { animation: stSettle linear both; animation-timeline: view(block); animation-range: cover 0% cover 55%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .st-tab-panel, .st-tab-panel[data-open], .st-scrolly-panel, .st-scrolly-panel[data-open] { transition: none; }
}