/* Rundplan homepage — the hero scene and the channels section (homepage only).
   The hero and "Manage once. Publish across channels." are ONE stage: scene.js
   draws a WebGL scene behind both, in a canvas window that follows the
   viewport. The dusk of the hero turns into the white page below the hero; the
   six channel cards fly, on scroll, from the arch over the dome into the tiles.
   Without JavaScript: the baked still picture (hero-still.svg, made by the
   build from scene.js) and each tile's own card. Origin and design notes:
   docs/local/mocks/hero-anim/ (v5). */

.stage {
  /* the scene's own tokens (the page's --text / --ink stay as they are) */
  --sc-hi: #eef4fa;
  --sc-tx: #a9bacb;
  --sc-ice-1: #cfeaff;
  --sc-ice-2: #8fcdfb;
  --sc-ice-3: #5aa9e6;
  --sc-ember: #ffad5e;
  --sc-ember-hi: #ffd9a3;
  --sc-paper: #ffffff;
  --sc-rule: #e2e8f0;
  --font-display: "Segoe UI Variable Display", "SF Pro Display", -apple-system, BlinkMacSystemFont, var(--font);
  --edge: max(var(--gutter), calc((100% - var(--frame)) / 2));   /* the header's frame (styles.css) */
  --copy-w: clamp(330px, 34vw, 500px);
  position: relative; isolation: isolate; overflow: hidden;
  /* the ground without WebGL: dusk with a light where the words sit, dawn blue, then the white page */
  background:
    radial-gradient(50vw 42svh at 16% 34svh, rgba(35, 68, 104, .95), rgba(35, 68, 104, 0) 72%),
    linear-gradient(180deg, var(--hero-blue) 0, #0c1e37 calc(100svh + 4svh), #577fa6 calc(100svh + 26svh), #c6d7e7 calc(100svh + 40svh), #fff calc(100svh + 52svh), #fff 100%);
}
/* the sticky header sits above the stage in flow: pull the stage up under it */
@supports (animation-timeline: scroll()) {
  .stage { margin-top: calc(-1 * var(--header-h)); }
}
/* The copy sits in the hero's flow, centred in the space BELOW the header (the header lies over the
   hero's top): it starts at the header + 24 px at the highest, and a copy taller than the window makes
   the hero taller instead of creeping under the header. Top and bottom room differ by 32 px, so on a
   tall window the copy sits where it did when it was centred on the whole hero (3 % low). */
.stage .hero {
  position: relative; z-index: 20;
  display: flex; flex-direction: column;
  min-height: 100svh;
  padding: calc(var(--header-h) + 24px) 0 clamp(32px, 8svh, 64px);
}
#gl { position: absolute; left: 0; top: 0; width: 100%; display: block; z-index: 0; will-change: transform; }
#fallback { position: absolute; left: 0; top: 0; width: 100%; display: none; z-index: 0; overflow: visible; }
.stage.no-gl #gl { display: none; }
.stage.no-gl #fallback { display: block; }
/* no JavaScript: the baked still in the scene's place, no live overlays */
/* (the same box scene.js fits the live scene into: under the header, in the first screen, the right edge
   moving in to the frame on wide screens) */
.hero-still {
  display: none; position: absolute; z-index: 1;
  left: calc(var(--edge) + var(--copy-w) + 24px); right: max(24px, min(var(--edge), calc(24px + max(0px, (100% - 1440px) / 2))));
  top: calc(var(--header-h) + clamp(16px, 3svh, 44px)); bottom: max(32px, calc(100% - 100svh + 32px));
  background: url(hero-still.svg) center / contain no-repeat;
}
html:not(.js) .hero-still { display: block; }
html:not(.js) #gl, html:not(.js) .ov { display: none; }
.sc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the copy */
.stage .copy {
  position: relative; z-index: 20;
  margin: auto 0 auto var(--edge); width: var(--copy-w);
}
/* the headline's size: by the width, and no more than 7.4 % of the window's height (from ~800 px
   down it steps back; 2.1rem at the least) */
.stage .copy h1 {
  margin: 0; color: var(--sc-hi);
  font-family: var(--font-display); font-weight: 600;
  font-size: min(clamp(2.4rem, 1.05rem + 2.9vw, 3.75rem), max(2.1rem, 7.4svh));
  line-height: 1.02; letter-spacing: -0.032em;
  text-wrap: balance; hyphens: manual;
}
/* four separate statements: a quiet list, each opened by a small ring like the dome's nodes */
.points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; max-width: 31em; }
.points li {
  position: relative; padding-left: 24px;
  font-size: clamp(1rem, .93rem + .25vw, 1.12rem); line-height: 1.5; color: #c3d0dd; text-wrap: pretty;
}
.points li::before {
  content: ""; position: absolute; left: 3px; top: calc(.75em - 4.5px);
  width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--sc-ice-2); opacity: .85;
}
.stage .hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Reduced motion: "Play animations" — a small ghost pill (the hero's second-button language, a
   little dusk behind it so it reads over the scene) at the bottom right of the first screen, on
   the still picture it starts, off the copy column. Shown only under .motion-reduce (set in
   <head> before first paint); its label follows .motion-on. hero.js drives it. */
.motion-toggle {
  position: absolute; z-index: 21; right: var(--edge); bottom: clamp(16px, 4svh, 40px);
  display: none; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px 0 13px; border-radius: 999px;
  font: inherit; font-size: .92rem; font-weight: 600; color: var(--sc-hi);
  background: rgba(8, 20, 36, .55); border: 1.5px solid rgba(255, 255, 255, .55);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
  cursor: pointer; white-space: nowrap;
}
.motion-reduce .motion-toggle { display: inline-flex; }
.motion-toggle:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .8); }
.motion-toggle svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.motion-toggle .mt-pause, .motion-on .motion-toggle .mt-play { display: none; }
.motion-on .motion-toggle .mt-pause { display: block; }

/* ── Scene overlays: crisp HTML/SVG placed from 3D each frame ──────────── */
.ov { position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.ovl { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ovl path { fill: none; stroke: rgba(178, 218, 250, .34); stroke-width: 1; }
.ovl circle { fill: var(--sc-ice-1); }
.ov > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.lvl { text-align: right; white-space: nowrap; line-height: 1.25; opacity: var(--o, .62); }
.lvl b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: -.005em; color: var(--sc-hi); }
.lvl span { display: block; font-size: 12.5px; color: var(--sc-tx); }

.ov .tag {
  white-space: nowrap; padding: 8px 12px 8px 11px; border-radius: 12px;
  background: rgba(8, 20, 36, .82); border: 1px solid rgba(255, 196, 140, .26);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
  opacity: 0;
}
.ov .tag b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--sc-hi); letter-spacing: -.005em; }
.ov .tag .st { display: flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 12.5px; color: var(--sc-ember-hi); }
.ov .tag .st i { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-ember); box-shadow: 0 0 10px var(--sc-ember); flex: none; }
.ov .tag .st em { font-style: normal; }

/* channel cards: one family of small objects, each in its own shape. --day (0 night … 1 day) is
   set per card from where it is on the page: the dusk skin over the dome, the paper skin below. */
.ch {
  --hit: 0; --fresh: 1; --day: 0; --lab: 1;
  --n: calc(100% - var(--day) * 100%);
  --c-bg1: color-mix(in srgb, #11253d var(--n), #ffffff);
  --c-bg2: color-mix(in srgb, #081424 var(--n), #f7f9fc);
  --c-hi: color-mix(in srgb, #eef4fa var(--n), #0f2742);
  --c-tx: color-mix(in srgb, #a9bacb var(--n), #4b5f77);
  --c-lo: color-mix(in srgb, #73879c var(--n), #7d90a5);
  --c-line: color-mix(in srgb, rgba(178, 218, 250, .16) var(--n), rgba(15, 39, 66, .12));
  --c-well: color-mix(in srgb, rgba(178, 218, 250, .08) var(--n), rgba(15, 39, 66, .05));
  font-family: var(--font); letter-spacing: 0;
}
.ch-name { position: absolute; left: 0; right: 0; bottom: calc(100% + 7px); text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--c-hi); white-space: nowrap; opacity: calc((.66 + var(--hit) * .34) * var(--lab)); }
.ch-body {
  position: relative; overflow: hidden; width: var(--w); height: var(--h);
  border-radius: 11px; background: linear-gradient(180deg, var(--c-bg1), var(--c-bg2));
  border: 1px solid var(--c-line);
  box-shadow: 0 14px 34px rgba(4, 12, 24, calc(.42 - var(--day) * .32)), 0 0 calc(var(--hit) * 34px) rgba(255, 170, 90, calc(var(--hit) * .38));
  font-size: 9px; line-height: 1.3; color: var(--c-tx);
}
.ch-body::after { /* the warm edge the record leaves; idle cards sit a little back in the dusk */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: rgba(4, 11, 23, calc((1 - var(--hit)) * .24 * (1 - var(--day))));
  box-shadow: inset 0 0 0 1px rgba(232, 140, 60, calc(var(--hit) * .8));
}
.cv-poster::after { background: rgba(26, 22, 48, calc((1 - var(--hit)) * .38 * (1 - var(--day) * .8))); }
.ch b, .ch strong { font-weight: 700; }
.ch p, .ch pre { margin: 0; }

/* website: a browser window around a site: header with logo and nav, a banner with the newest
   event, then the events as cards. On publish the banner changes and the new card slides in. */
.cv-web .bar { display: flex; align-items: center; gap: 3px; height: 15px; padding: 0 7px; border-bottom: 1px solid var(--c-line); }
.cv-web .bar i { width: 4px; height: 4px; border-radius: 50%; background: var(--c-line); }
.cv-web .bar span { margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--c-well); font-size: 7.5px; color: var(--c-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cv-web .site { padding: 0 7px; }
.cv-web .snav { display: flex; align-items: center; gap: 4px; height: 15px; }
.cv-web .snav .logo { width: 7px; height: 7px; border-radius: 50%; border: 1.6px solid var(--sc-ice-3); border-right-color: transparent; flex: none; }
.cv-web .snav em { font-style: normal; font-size: 6px; font-weight: 700; color: var(--c-hi); margin-right: auto; white-space: nowrap; }
.cv-web .snav s { width: 11px; height: 2px; border-radius: 2px; background: var(--c-lo); opacity: .7; text-decoration: none; }
.cv-web .banner { position: relative; height: 31px; border-radius: 4px; overflow: hidden; padding: 4px 6px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; }
.cv-web .banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 12, 24, .45), rgba(4, 12, 24, 0) 75%); }
.cv-web .banner > * { position: relative; z-index: 1; opacity: var(--fresh); }
.cv-web .banner .bk { font-size: 4.8px; font-weight: 700; letter-spacing: .06em; opacity: calc(var(--fresh) * .85); }
.cv-web .banner strong { font-size: 8.5px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-web .banner small { font-size: 5.2px; opacity: calc(var(--fresh) * .9); }
.cv-web .evs { margin-top: 5px; overflow: hidden; height: 38px; }
.cv-web .track { display: flex; gap: 4px; transform: translateX(calc((var(--fresh) - 1) * 50px)); }
.cv-web .ev { position: relative; flex: none; width: 46px; }
.cv-web .ev i { display: block; height: 22px; border-radius: 3px; }
.cv-web .ev b { position: absolute; left: 2px; top: 2px; padding: 0 2px; border-radius: 2px; background: rgba(255, 255, 255, .92); color: #0f2742; font-size: 4.4px; line-height: 6px; white-space: nowrap; }
.cv-web .ev span { margin-top: 2px; font-size: 5.6px; font-weight: 600; line-height: 1.2; color: var(--c-hi); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cv-web .ev:nth-child(1) b { box-shadow: 0 0 0 1px rgba(255, 173, 94, calc(var(--hit) * .9)); }

/* calendar feed */
.cv-cal { display: flex; gap: 12px; padding: 14px 13px 0; }
.cv-cal .day { flex: none; width: 46px; height: 56px; border-radius: 8px; overflow: hidden; text-align: center; background: var(--c-well); border: 1px solid var(--c-line); }
.cv-cal .day .m { display: block; padding: 2px 0; font-size: 7px; font-weight: 700; letter-spacing: .06em; color: #071528; background: color-mix(in srgb, #8fcdfb calc(100% - var(--hit) * 100%), #ffad5e); }
.cv-cal .day .d { display: block; margin-top: 3px; font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.1; color: var(--c-hi); }
.cv-cal .day .w { display: block; font-size: 7px; color: var(--c-lo); }
.cv-cal .ev { min-width: 0; padding-top: 2px; opacity: var(--fresh); }
.cv-cal .ev b { display: block; font-size: 11.5px; font-weight: 600; color: var(--c-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-cal .ev span { display: block; margin-top: 2px; font-size: 8.8px; color: var(--c-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-cal .feed { position: absolute; left: 13px; right: 13px; bottom: 12px; display: flex; align-items: center; gap: 5px; font-size: 8px; color: var(--c-lo); white-space: nowrap; }
.cv-cal .feed i { width: 9px; height: 9px; flex: none; border-radius: 50%; border: 1.4px solid var(--sc-ice-3); border-right-color: transparent; transform: rotate(-45deg); }

/* app */
.cv-app { border-radius: 15px; background: linear-gradient(180deg, #0f2238, #08131f); }
.cv-app .scr { position: absolute; inset: 4px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, #0b1a2c var(--n), #eef3f8); }
.cv-app .isl { position: absolute; top: 5px; left: 50%; width: 20px; height: 5px; margin-left: -10px; border-radius: 4px; background: #02060c; }
.cv-app .noti { position: absolute; left: 5px; right: 5px; top: 15px; padding: 5px 6px; border-radius: 8px; background: rgba(230, 240, 250, .95); color: #0b1a2c; transform: translateY(calc((var(--fresh) - 1) * 46px)); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.cv-app .noti b { display: block; font-size: 7.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-app .noti span { display: block; font-size: 6.5px; color: #3c5269; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-app .noti small { display: flex; align-items: center; gap: 3px; margin-bottom: 2px; font-size: 5.5px; color: #5b7088; }
.cv-app .noti small i { width: 6px; height: 6px; border-radius: 2px; background: #0b2a48; }
.cv-app .li { position: absolute; left: 6px; right: 6px; height: 13px; border-radius: 4px; background: var(--c-well); }

/* poster */
.cv-poster { border-radius: 4px; border-color: rgba(255, 220, 190, .2); background: linear-gradient(160deg, #ff8a4c 0%, #e8436c 48%, #6d2fb5 100%); color: #fff; }
.cv-poster::before { content: ""; position: absolute; right: -30px; top: -26px; width: 92px; height: 92px; border-radius: 50%; border: 10px solid rgba(255, 255, 255, .14); }
.cv-poster .k { position: absolute; left: 8px; top: 9px; font-size: 6px; font-weight: 700; letter-spacing: .1em; opacity: .85; }
.cv-poster .t { position: absolute; left: 8px; right: 6px; top: 26px; font-family: var(--font-display); font-weight: 800; font-size: 15px; line-height: .95; letter-spacing: -.02em; opacity: var(--fresh); }
.cv-poster .d { position: absolute; left: 8px; right: 6px; bottom: 22px; font-size: 7px; font-weight: 700; letter-spacing: .03em; }
.cv-poster .v { position: absolute; left: 8px; right: 22px; bottom: 11px; font-size: 6px; letter-spacing: .05em; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-poster .logo { position: absolute; right: 7px; bottom: 9px; width: 12px; height: 12px; color: #fff; opacity: .9; }

/* e-mail: an opened message: inbox bar with the envelope, sender with avatar, subject, the button */
.cv-mail { padding: 0 9px; }
.cv-mail .mh { display: flex; align-items: center; gap: 4px; height: 15px; margin: 0 -9px; padding: 0 9px; border-bottom: 1px solid var(--c-line); font-size: 7px; font-weight: 600; color: var(--c-lo); }
.cv-mail .mh svg { width: 10px; height: 8px; color: var(--sc-ice-3); }
.cv-mail .mh em { margin-left: auto; font-style: normal; font-weight: 400; }
.cv-mail .from { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.cv-mail .av { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--sc-ice-3); color: #071528; font-size: 5.5px; font-weight: 800; line-height: 14px; text-align: center; }
.cv-mail .from strong { display: block; font-size: 7px; color: var(--c-hi); line-height: 1.1; }
.cv-mail .from span { display: block; font-size: 6px; color: var(--c-lo); line-height: 1.2; }
.cv-mail .sj { margin-top: 6px; font-size: 9.5px; font-weight: 700; color: var(--c-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: var(--fresh); }
.cv-mail .mt { margin-top: 1px; font-size: 7px; color: var(--c-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-mail .ln { height: 3px; width: 70%; margin-top: 5px; border-radius: 3px; background: var(--c-well); }
.cv-mail .cta { position: absolute; left: 9px; bottom: 8px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, #8fcdfb calc(100% - var(--hit) * 100%), #ffad5e); color: #071528; font-size: 6.5px; font-weight: 700; }

/* API: a code card stays a code card, night or day */
.cv-api { padding: 10px 11px; background: linear-gradient(180deg, #0f2036, #0a1626); color: #a9bacb; border-color: rgba(178, 218, 250, .18); font-family: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace; }
.cv-api .hd { font-size: 8px; color: #73879c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-api .hd em { font-style: normal; color: #8fcdfb; font-weight: 700; }
.cv-api pre { margin: 8px 0 0; font: inherit; font-size: 8.6px; line-height: 1.55; white-space: pre; color: #c9d6e3; opacity: var(--fresh); overflow: hidden; }
.cv-api pre span { color: #ffd9a3; }
.cv-api pre i { font-style: normal; color: #9fe0b7; }

/* ── The channels section: words first, then six tiles (3 × 2) ─────────────
   It sits ABOVE the flying cards (z 15 > .ov 10) with no ground of its own,
   only feathered sheets of paper under its words: a card or a ray that
   crosses a heading or a caption slides under it, never over the text. */
.channels { position: relative; z-index: 15; padding: calc(100svh * .44) 0 clamp(72px, 9vw, 112px); }
.channels .inner { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.channels .intro, .ch-tile .ch-tt { position: relative; isolation: isolate; }
.channels .intro::before, .ch-tile .ch-tt::before {
  content: ""; position: absolute; z-index: -1; inset: -26px -34px; background: var(--sc-paper);
  -webkit-mask: linear-gradient(180deg, transparent, #000 22px, #000 calc(100% - 22px), transparent), linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(180deg, transparent, #000 22px, #000 calc(100% - 22px), transparent), linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
  mask-composite: intersect;
}
.ch-tile .ch-tt::before { inset: -10px -18px -14px; }
/* the intro is only as wide as its text, so the cards can route round its right side */
.channels .intro { width: fit-content; max-width: min(100%, 44rem); }
.channels h2 {
  color: var(--ink); font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.1rem, 1.3rem + 2.3vw, 3.3rem); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance;
}
.channels .lead { margin: 18px 0 0; max-width: 36em; font-size: 1.12rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.ch-tiles { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 40px; }
.ch-slot { position: relative; height: 232px; border-bottom: 1px solid var(--sc-rule); }
.ch-tile h3 { margin: 18px 0 0; font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; color: var(--ink); }
.ch-tile p { margin: 6px 0 0; max-width: 30em; font-size: 1rem; line-height: 1.55; color: var(--muted); }
/* each tile's own card: shown without JavaScript and in the still view (reduced motion);
   --hl is the landed height (px, unitless) the script also uses */
.ch-tile { --hl: 186; }
.ch-tile .clone { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--k, calc(var(--hl) / var(--hn)))); display: none; }
html:not(.js) .ch-tile .clone, .stage.is-still .ch-tile .clone { display: block; }

/* ── Mid widths ───────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .stage .copy h1 { font-size: min(clamp(2.2rem, .85rem + 3vw, 3.1rem), max(2rem, 7.4svh)); }
  .points { margin-top: 22px; gap: 8px; }
  .stage .hero-actions { margin-top: 26px; }
  .lvl span { display: none; }
  .ch-tiles { gap: 40px 26px; margin-top: 52px; }
  .ch-slot { height: 176px; }
  .ch-tile { --hl: 141; }
  .ch-tile p { font-size: .94rem; }
}
/* ── Short windows (desktop, tablet): after the headline, the four lines and the gaps step down ── */
@media (min-width: 700px) and (max-height: 760px) {
  .points { margin-top: 20px; gap: 7px; }
  .points li { font-size: 1rem; line-height: 1.45; }
  .points li::before { top: calc(.725em - 4.5px); }
  .stage .hero-actions { margin-top: 24px; }
}
@media (min-width: 700px) and (max-height: 600px) {
  .points { margin-top: 16px; gap: 5px; }
  .points li { font-size: .94rem; line-height: 1.4; }
  .points li::before { top: calc(.7em - 4.5px); }
  .stage .hero-actions { margin-top: 20px; }
  .stage .hero-actions .pill { min-height: 44px; }
}
/* the scene is small there: the level names keep their room, as at mid widths */
@media (min-width: 700px) and (max-height: 540px) { .lvl span { display: none; } }
/* ── Phones: the copy on top, the scene under it ──────────────────────── */
@media (max-width: 699px) {
  .stage .hero { height: auto; min-height: 100svh; display: flex; flex-direction: column; padding: 0; }
  /* phones: tight enough that the arch and the top of the dome stay above the fold */
  .stage .copy { position: relative; left: auto; top: auto; width: auto; transform: none; margin: 0; padding: 72px var(--gutter) 0; }
  .stage .copy h1 { font-size: clamp(1.95rem, .9rem + 4.8vw, 2.5rem); line-height: 1.04; }
  .points { margin-top: 14px; gap: 4px; }
  .points li { font-size: .92rem; line-height: 1.38; padding-left: 20px; }
  .points li::before { left: 2px; width: 8px; height: 8px; top: calc(.69em - 4px); }
  .stage .hero-actions { margin-top: 16px; gap: 8px; }
  .stage .hero-actions .pill { flex: 1 1 auto; min-height: 44px; padding: 0 16px; }
  .scene-spacer { min-height: 380px; }
  .scene-spacer { flex: 1 0 auto; min-height: 400px; }
  .hero-still { left: 0; right: 0; top: auto; bottom: 0; height: 400px; }
  /* phones: the hero is taller than the window, so the corner would sit below the fold — the
     button joins the flow instead, right under the copy, over the top of the scene */
  .motion-toggle { position: relative; right: auto; bottom: auto; align-self: flex-end; margin: 14px var(--gutter) 0; min-height: 44px; }
  .lvl b { font-size: 12px; white-space: normal; max-width: 86px; line-height: 1.15; }
  .ov .tag { padding: 5px 8px; border-radius: 9px; }
  .ov .tag b { font-size: 11.5px; }
  .ov .tag .st { font-size: 10.5px; gap: 5px; }
  .ov .tag .st i { width: 6px; height: 6px; }
  .ch-name { font-size: 11px; bottom: calc(100% + 4px); }
  /* words first, then the tiles: the cards slide under the heading's paper sheet */
  .channels { padding-top: calc(100svh * .2); }
  .channels .lead { font-size: 1rem; }
  .ch-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; gap: 34px 16px; }
  .ch-slot { height: 150px; }
  .ch-tile { --hl: 104; }
  .ch-tile h3 { font-size: 1rem; margin-top: 12px; }
  .ch-tile p { font-size: .9rem; }
}
@media (min-width: 700px) { .scene-spacer { display: none; } }