/* ============================================================
   scenes.css — per-scene style stubs.
   Structural scaffolding (min-height, scroll footprint) lives in
   base.css. This file is reserved for real per-scene styling,
   filled in scene-by-scene by later build packages (P2–P5).
   ============================================================ */

/* ------------------------------------------------------------
   P2 (CHAT-3) — scenes 0–3 copy layout.
   The full-viewport #stage canvas (fixed) draws each diagram, weighted
   into the RIGHT of the viewport. The narrative copy is a sticky column
   on the LEFT so the scene stays composed (copy + diagram together) for
   most of its scroll runway — "paused at any point it reads as a poster"
   (CONTENT-OUTLINE §0.1 rule 5). Copy is real DOM text revealed by the
   scene modules via core/text.js; the canvas never bakes narrative copy.
   ------------------------------------------------------------ */

/* s1/s2/s3 share the left sticky copy column. s0 (centred title) overrides. */
section[data-scene="s1"] .scene-copy,
section[data-scene="s2"] .scene-copy,
section[data-scene="s3"] .scene-copy {
  position: sticky;
  top: 22vh;
  max-width: 640px;
  padding-left: 88px;
  padding-right: 24px;
}

/* s0 Ignition — centred title stack; the heartbeat line/dot are on the canvas */
section[data-scene="s0"] {
  padding-top: 0;
}

section[data-scene="s0"] .scene-copy {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12vh 24px 0;
  max-width: min(1120px, 92vw);
  margin: 0 auto;
}

section[data-scene="s0"] h1 {
  margin-bottom: 28px;
}

section[data-scene="s0"] .sub {
  max-width: 42ch;
  margin: 0 auto;
  color: var(--text-2);
}

section[data-scene="s0"] .cue {
  margin-top: 68px;
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  max-width: none;
}

section[data-scene="s0"] .cue::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 10px auto 0;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg);
}

/* s1 Fragmentation — the dying-lead body reveals late (synced to the death).
   It is hidden by the scene module in JS (enter → opacity 0, then resolveIn on
   cue); left visible here so it stays crawlable/accessible with JS disabled. */

/* s3 The Ring — station names live in the DOM as an accessible/crawlable list,
   but the visible labels are drawn around the ring on the canvas, so the list
   is hidden visually (kept in the a11y tree + for SEO). */
.ring-stations {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:root {
  --narrative-copy-left: clamp(88px, 6.4vw, 128px);
}

.refrain {
  position: fixed;
  left: var(--narrative-copy-left);
  bottom: 96px;
  z-index: 2;
  width: max-content;
  max-width: min(52ch, calc(100vw - var(--narrative-copy-left) - 132px));
  margin: 0;
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--signal-soft);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.bridge-line {
  position: fixed;
  left: var(--narrative-copy-left);
  bottom: 142px;
  z-index: 2;
  width: min(58ch, calc(100vw - var(--narrative-copy-left) - 132px));
  margin: 0;
  font-family: var(--font-body), sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-2);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.bridge-line--tag {
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--signal-soft);
}

section[data-scene="s8"] > .kicker-climax {
  font-family: var(--font-body), sans-serif;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
  color: var(--signal-soft);
}

/* s2 Thesis */
[data-scene="s2"] {}

/* s3 The Ring */
[data-scene="s3"] {}

/* ------------------------------------------------------------
   P3 (CHAT-4) — s4 Revenue Engine (the deepest chapter).
   Three DOM states, one markup:
     · default (no JS / SEO / no-reduced-motion base) — natural readable flow
     · .s4-poster  — the assembled-still overview (reduced-motion + screenshot
                     end-state): every band's head + nodes, bodies hidden
     · .s4-motion  — the pinned ~420vh accordion, positions driven by s4.js as a
                     pure function of scroll progress p
   The narrative copy is real DOM text (byte-identical to CONTENT-OUTLINE);
   the thread spine is CSS (::before/::after) in the flow/poster states and is
   redrawn on the shared canvas (with the traveling pulse) in motion.
   ------------------------------------------------------------ */

/* status word kept for a11y/SEO; the visible status is the .mark glyph */
.s4-node-status {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---- shared band / node / SMS styling (used by every state) ---- */
section[data-scene="s4"] .s4-stage { position: relative; padding: 4px 56px 0 72px; }
section[data-scene="s4"] .s4-head { max-width: 40ch; }
.s4-h2 { margin-bottom: 20px; }
.s4-intro { margin-bottom: 0; }

.s4-bands { position: relative; margin-top: 40px; padding-left: 40px; }
.s4-band { position: relative; }
.s4-band-head { display: flex; align-items: baseline; gap: 24px; }
.s4-band-kicker { flex: 0 0 168px; margin-bottom: 0; color: var(--text-3); white-space: nowrap; }
.s4-band-h3 { margin-bottom: 0; font-size: 20px; color: var(--text-2); }
.s4-band-detail { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: flex-start; }
.s4-band-body { margin-bottom: 0; max-width: 34ch; flex: 0 1 auto; }
.s4-nodes { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.s4-node { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body), sans-serif; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.s4-node .mark { flex: 0 0 auto; }
.s4-close { margin-top: 34px; color: var(--text-2); }

/* the DOM thread spine (flow + poster states) — rail + dots share the x=12 gutter
   (bands content sits at padding-left:40; the dot is nudged back into the gutter) */
.s4-bands::before { content: ""; position: absolute; left: 12px; top: 4px; bottom: 4px; width: 1.5px; background: var(--signal); opacity: .35; }
.s4-band::after { content: ""; position: absolute; left: -28px; top: 7px; width: 11px; height: 11px; border-radius: 50%; transform: translateX(-50%); box-sizing: border-box; background: var(--signal); border: 1.5px solid var(--signal); }
.s4-band[data-band="4"]::after { background: transparent; border: 1.5px dotted var(--status-coming); }
.s4-band + .s4-band { margin-top: 26px; }

/* SMS thread — quiet: hairline bubbles + mono timestamps, NO phone chrome */
.s4-sms { flex: 0 0 300px; display: flex; flex-direction: column; gap: 8px; }
.s4-sms-row { display: flex; align-items: flex-end; gap: 10px; }
.s4-sms-row--in { justify-content: flex-start; }
.s4-sms-row--ai { justify-content: flex-end; }
.s4-sms-ts { flex: 0 0 auto; font-family: var(--font-mono), monospace; font-size: 10px; letter-spacing: .08em; color: var(--text-3); padding-bottom: 5px; }
.s4-sms-bubble { font-family: var(--font-body), sans-serif; font-size: 13px; line-height: 1.42; padding: 8px 12px; border-radius: 12px; max-width: 224px; }
.s4-sms-bubble--in { border: 1px solid var(--line); color: var(--text-2); border-bottom-left-radius: 3px; }
.s4-sms-bubble--ai { border: 1px solid var(--signal-soft); background: rgba(0, 255, 102, .05); color: var(--text); border-bottom-right-radius: 3px; }
.s4-sms-latency { display: flex; align-items: center; gap: 8px; justify-content: center; font-family: var(--font-mono), monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal-soft); margin: 3px 0; }
.s4-sms-latency::before, .s4-sms-latency::after { content: ""; height: 1px; flex: 1 1 auto; max-width: 46px; background: var(--line); }
/* per-character typewriter units injected by s4.js (motion only) */
.s4-sms-bubble .ch { opacity: 1; }

/* ---- default flow: readable spacing for no-JS / SEO ---- */
section[data-scene="s4"] .s4-band-detail { padding-left: 32px; }

/* ============================================================
   .s4-poster — assembled-still overview (reduced-motion + screenshot end-state)
   All five bands: head + nodes inline on one row; bodies/SMS/intro hidden;
   big H2 restored; matches proof/proof-board.html s4 assembled still.
   ============================================================ */
section[data-scene="s4"].s4-poster .s4-intro,
section[data-scene="s4"].s4-poster .s4-band-body,
section[data-scene="s4"].s4-poster .s4-sms { display: none; }
/* fit the whole overview in one viewport: moderate H2 + one compact row per band */
section[data-scene="s4"].s4-poster .s4-h2 { font-size: clamp(28px, 1.4vw + 20px, 44px); line-height: 1.08; margin-bottom: 14px; }
section[data-scene="s4"].s4-poster .s4-bands { margin-top: 22px; }
section[data-scene="s4"].s4-poster .s4-band + .s4-band { margin-top: 14px; }
section[data-scene="s4"].s4-poster .s4-band-detail { margin-top: 0; padding-left: 0; display: inline-flex; flex-direction: row; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; }
section[data-scene="s4"].s4-poster .s4-nodes { flex-direction: row; flex-wrap: wrap; gap: 6px 24px; }
section[data-scene="s4"].s4-poster .s4-band-head { display: inline-flex; flex: 0 0 auto; }
section[data-scene="s4"].s4-poster .s4-band { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 30px; }
section[data-scene="s4"].s4-poster .s4-band-kicker { flex-basis: 176px; }
section[data-scene="s4"].s4-poster .s4-band-h3 { flex: 0 0 232px; font-size: 18px; }
section[data-scene="s4"].s4-poster .s4-close { margin-top: 22px; }

/* ============================================================
   .s4-motion — pinned accordion. s4.js owns transform/opacity per frame;
   CSS only sets the positioning model + hides the DOM spine (canvas draws it).
   ============================================================ */
section[data-scene="s4"].s4-motion .s4-stage { position: absolute; inset: 0; padding: 0; }
section[data-scene="s4"].s4-motion .s4-head { position: absolute; top: 60px; left: 128px; right: 48px; max-width: 44ch; margin: 0; will-change: opacity, transform; }
section[data-scene="s4"].s4-motion .s4-bands { position: absolute; inset: 0; margin: 0; padding: 0; }
section[data-scene="s4"].s4-motion .s4-bands::before { display: none; }
section[data-scene="s4"].s4-motion .s4-band { position: absolute; left: 128px; right: 48px; top: 0; margin: 0; will-change: transform, opacity; }
section[data-scene="s4"].s4-motion .s4-band + .s4-band { margin: 0; }
section[data-scene="s4"].s4-motion .s4-band::after { display: none; }
section[data-scene="s4"].s4-motion .s4-band-detail { padding-left: 0; will-change: opacity, transform; }
section[data-scene="s4"].s4-motion .s4-band--active .s4-band-kicker { color: var(--text-2); }
section[data-scene="s4"].s4-motion .s4-band--active .s4-band-h3 { color: var(--text); }
section[data-scene="s4"].s4-motion .s4-close { position: absolute; left: 128px; right: 48px; bottom: 52px; margin: 0; max-width: 60ch; will-change: opacity; }

@media (max-width: 900px) {
  section[data-scene="s4"].s4-motion .s4-head,
  section[data-scene="s4"].s4-motion .s4-band,
  section[data-scene="s4"].s4-motion .s4-close { left: 84px; right: 24px; }
  .s4-band-kicker { flex-basis: 132px; }
}

/* s5 The Proof — canvas carries the proof trace; DOM copy resolves only after
   the completed backward line holds still. */
section[data-scene="s5"] {
  overflow: hidden;
}

section[data-scene="s5"] > .kicker,
section[data-scene="s5"] > h2,
section[data-scene="s5"] > .promise {
  position: sticky;
  z-index: 2;
  margin-left: var(--narrative-copy-left);
  max-width: 680px;
  will-change: opacity, transform;
}

section[data-scene="s5"] > .kicker {
  top: 22vh;
  width: max-content;
}

section[data-scene="s5"] > h2 {
  top: calc(22vh + 34px);
}

section[data-scene="s5"] > .promise {
  top: 62vh;
  max-width: 38ch;
}

section[data-scene="s5"].s5-motion > .kicker,
section[data-scene="s5"].s5-motion > h2,
section[data-scene="s5"].s5-motion > .promise {
  position: fixed;
  left: var(--narrative-copy-left);
  margin-left: 0;
}

@media (max-width: 900px) {
  section[data-scene="s5"] > .kicker,
  section[data-scene="s5"] > h2,
  section[data-scene="s5"] > .promise {
    margin-left: 40px;
    margin-right: 24px;
    max-width: calc(100vw - 64px);
  }

  section[data-scene="s5"].s5-motion > .kicker,
  section[data-scene="s5"].s5-motion > h2,
  section[data-scene="s5"].s5-motion > .promise {
    left: 40px;
    margin-left: 0;
  }
}

/* s6-s9 — final chapter copy sits in the same fixed scene layer as the canvas. */
section[data-scene="s6"],
section[data-scene="s7"],
section[data-scene="s8"],
section[data-scene="s9"] {
  overflow: hidden;
}

section[data-scene="s9"] {
  margin-bottom: 0;
}

main::after {
  content: "";
  display: block;
  height: 100vh;
}

section[data-scene="s6"].scene-motion > .kicker,
section[data-scene="s6"].scene-motion > h2,
section[data-scene="s6"].scene-motion > .body,
section[data-scene="s6"].scene-motion > .status-line,
section[data-scene="s7"].scene-motion > .kicker,
section[data-scene="s7"].scene-motion > h2,
section[data-scene="s7"].scene-motion > .body,
section[data-scene="s7"].scene-motion > .availability,
section[data-scene="s8"].scene-motion > .kicker,
section[data-scene="s8"].scene-motion > h2,
section[data-scene="s8"].scene-motion > .body {
  position: fixed;
  left: var(--narrative-copy-left);
  z-index: 2;
  margin: 0;
  max-width: 620px;
  will-change: opacity, transform;
}

section[data-scene="s6"].scene-motion > .kicker,
section[data-scene="s7"].scene-motion > .kicker,
section[data-scene="s8"].scene-motion > .kicker {
  top: 21vh;
}

section[data-scene="s6"].scene-motion > h2,
section[data-scene="s7"].scene-motion > h2,
section[data-scene="s8"].scene-motion > h2 {
  top: calc(21vh + 42px);
}

section[data-scene="s6"].scene-motion > .body,
section[data-scene="s7"].scene-motion > .body,
section[data-scene="s8"].scene-motion > .body {
  top: 60vh;
  max-width: 38ch;
}

section[data-scene="s6"].scene-motion > h2 {
  color: var(--text);
}

section[data-scene="s6"].scene-motion > .body {
  top: 61vh;
}

section[data-scene="s6"].scene-motion > .status-line {
  top: 78vh;
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}

section[data-scene="s6"].scene-motion > .ops-domains {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

section[data-scene="s7"].scene-motion > .capabilities {
  position: fixed;
  left: auto;
  right: 88px;
  top: 66vh;
  z-index: 2;
  width: min(520px, 34vw);
  margin: 0;
  will-change: opacity, transform;
}

section[data-scene="s7"].scene-motion > .capabilities dt,
section[data-scene="s7"].scene-motion > .capabilities dd {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  will-change: opacity, transform;
}

section[data-scene="s7"].scene-motion > .capabilities dt {
  top: 0;
  font-family: var(--font-mono), monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal-soft);
}

section[data-scene="s7"].scene-motion > .capabilities dd {
  top: 30px;
  font-family: var(--font-body), sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
}

section[data-scene="s7"].scene-motion > .availability {
  top: 76vh;
  max-width: 48ch;
  padding-left: 18px;
  border-left: 1px dotted var(--status-coming);
  color: var(--text-2);
}

section[data-scene="s9"].scene-motion > h2 {
  position: fixed;
  top: 17vh;
  left: 0;
  right: 0;
  z-index: 2;
  width: min(760px, 86vw);
  margin: 0 auto;
  text-align: center;
  will-change: opacity, transform;
}

section[data-scene="s9"].scene-motion > .door {
  position: fixed;
  top: 42vh;
  z-index: 2;
  width: min(380px, 38vw);
  min-height: 238px;
  margin: 0;
  padding: 28px 28px 30px;
  border: 1px solid var(--line);
  background: rgba(5, 6, 7, .72);
  backdrop-filter: blur(8px);
  will-change: opacity, transform;
}

section[data-scene="s9"].scene-motion > .door-a {
  left: calc(50% - 420px);
  border-left: 2px solid var(--signal);
}

section[data-scene="s9"].scene-motion > .door-b {
  right: calc(50% - 420px);
  border-left: 2px dotted var(--status-coming);
}

section[data-scene="s9"].scene-motion .door h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

section[data-scene="s9"].scene-motion .door .body {
  min-height: 56px;
}

section[data-scene="s9"].scene-motion .cta {
  margin-top: 18px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-mono), monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--signal);
}

section[data-scene="s9"].scene-motion > footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 44px;
  z-index: 2;
  width: min(720px, 88vw);
  margin: 0 auto;
  text-align: center;
  color: var(--text-3);
  will-change: opacity, transform;
}

section[data-scene="s9"].scene-motion footer p {
  max-width: none;
  margin-bottom: 10px;
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

section[data-scene="s9"].scene-motion footer nav a {
  margin: 0 10px;
  color: var(--text-2);
}

@media (prefers-reduced-motion: reduce) {
  section.scene-motion:not(.reduced-active) > .kicker,
  section.scene-motion:not(.reduced-active) > h2,
  section.scene-motion:not(.reduced-active) > .body,
  section.scene-motion:not(.reduced-active) > .status-line,
  section.scene-motion:not(.reduced-active) > .refrain,
  section.scene-motion:not(.reduced-active) > .bridge-line,
  section.scene-motion:not(.reduced-active) > .availability,
  section.scene-motion:not(.reduced-active) > .capabilities,
  section.scene-motion:not(.reduced-active) > .door,
  section.scene-motion:not(.reduced-active) > footer {
    opacity: 0 !important;
    pointer-events: none;
  }
}

@media (max-width: 900px) {
  section[data-scene="s6"].scene-motion > .kicker,
  section[data-scene="s6"].scene-motion > h2,
  section[data-scene="s6"].scene-motion > .body,
  section[data-scene="s6"].scene-motion > .status-line,
  section[data-scene="s7"].scene-motion > .kicker,
  section[data-scene="s7"].scene-motion > h2,
  section[data-scene="s7"].scene-motion > .body,
  section[data-scene="s7"].scene-motion > .availability,
  section[data-scene="s7"].scene-motion > .capabilities,
  section[data-scene="s8"].scene-motion > .kicker,
  section[data-scene="s8"].scene-motion > h2,
  section[data-scene="s8"].scene-motion > .body {
    left: 40px;
    max-width: calc(100vw - 80px);
    width: auto;
  }

  section[data-scene="s7"].scene-motion > .capabilities {
    right: auto;
    top: 66vh;
  }

  section[data-scene="s9"].scene-motion > h2 {
    top: 12vh;
  }

  section[data-scene="s9"].scene-motion > .door {
    left: 40px;
    right: 40px;
    width: auto;
    min-height: 0;
  }

  section[data-scene="s9"].scene-motion > .door-a { top: 32vh; }
  section[data-scene="s9"].scene-motion > .door-b { top: 58vh; }
  section[data-scene="s9"].scene-motion > footer { display: none; }

  .refrain {
    left: 40px;
    right: 84px;
    bottom: 82px;
    width: auto;
    max-width: none;
  }

  .bridge-line {
    left: 40px;
    right: 84px;
    bottom: 134px;
    width: auto;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  section[data-scene="s1"] .scene-copy,
  section[data-scene="s2"] .scene-copy,
  section[data-scene="s3"] .scene-copy {
    top: 57vh;
    max-width: none;
    padding-left: 24px;
    padding-right: 42px;
  }

  section[data-scene="s0"] .scene-copy {
    padding-inline: 22px;
  }

  section[data-scene="s0"] .cue {
    margin-top: 42px;
  }

  section[data-scene="s4"] .s4-stage {
    padding: 0 24px;
  }

  section[data-scene="s4"].s4-motion .s4-head,
  section[data-scene="s4"].s4-motion .s4-band,
  section[data-scene="s4"].s4-motion .s4-close {
    left: 28px;
    right: 38px;
  }

  section[data-scene="s4"].s4-motion .s4-head {
    top: 54px;
    max-width: none;
  }

  section[data-scene="s4"].s4-motion .s4-close {
    bottom: 68px;
  }

  section[data-scene="s4"].s4-motion .s4-band-head,
  section[data-scene="s4"].s4-poster .s4-band-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .s4-band-kicker,
  section[data-scene="s4"].s4-poster .s4-band-kicker {
    flex: 0 1 auto;
    flex-basis: auto;
    white-space: normal;
    font-size: 10px;
  }

  .s4-band-h3,
  section[data-scene="s4"].s4-poster .s4-band-h3 {
    flex: 0 1 auto;
    font-size: 17px;
  }

  section[data-scene="s4"].s4-motion .s4-band-detail,
  section[data-scene="s4"].s4-poster .s4-band-detail {
    gap: 10px 18px;
  }

  .s4-band-body {
    max-width: 100%;
    font-size: 15px;
  }

  .s4-nodes,
  section[data-scene="s4"].s4-poster .s4-nodes {
    gap: 7px 14px;
  }

  .s4-node {
    white-space: normal;
    font-size: 12px;
  }

  .s4-sms {
    display: none;
  }

  section[data-scene="s5"] > .kicker,
  section[data-scene="s5"] > h2,
  section[data-scene="s5"] > .promise {
    margin-left: 24px;
    margin-right: 42px;
    max-width: min(28ch, calc(100vw - 130px));
  }

  section[data-scene="s5"].s5-motion > .kicker,
  section[data-scene="s5"].s5-motion > h2,
  section[data-scene="s5"].s5-motion > .promise {
    left: 24px;
  }

  section[data-scene="s6"].scene-motion > .kicker,
  section[data-scene="s6"].scene-motion > h2,
  section[data-scene="s6"].scene-motion > .body,
  section[data-scene="s6"].scene-motion > .status-line,
  section[data-scene="s7"].scene-motion > .kicker,
  section[data-scene="s7"].scene-motion > h2,
  section[data-scene="s7"].scene-motion > .body,
  section[data-scene="s7"].scene-motion > .availability,
  section[data-scene="s7"].scene-motion > .capabilities,
  section[data-scene="s8"].scene-motion > .kicker,
  section[data-scene="s8"].scene-motion > h2,
  section[data-scene="s8"].scene-motion > .body {
    left: 24px;
    right: 42px;
    max-width: none;
  }

  section[data-scene="s6"].scene-motion > .body,
  section[data-scene="s7"].scene-motion > .body,
  section[data-scene="s8"].scene-motion > .body {
    top: 57vh;
  }

  section[data-scene="s6"].scene-motion > .body {
    top: 60vh;
  }

  section[data-scene="s6"].scene-motion > .status-line {
    top: 38vh;
  }

  section[data-scene="s6"].scene-motion > h2,
  section[data-scene="s7"].scene-motion > h2,
  section[data-scene="s8"].scene-motion > h2 {
    right: auto;
    max-width: min(13ch, calc(100vw - 128px));
    overflow-wrap: normal;
  }

  section[data-scene="s6"].scene-motion > .body,
  section[data-scene="s7"].scene-motion > .body,
  section[data-scene="s8"].scene-motion > .body {
    right: auto;
    max-width: min(25ch, calc(100vw - 92px));
  }

  section[data-scene="s7"].scene-motion > .capabilities {
    top: 72vh;
    right: 42px;
  }

  section[data-scene="s7"].scene-motion > .body {
    top: 56vh;
    max-width: calc(100vw - 96px);
    font-size: 14px;
    line-height: 1.45;
  }

  section[data-scene="s7"].scene-motion > .availability {
    right: auto;
    top: 73vh;
    max-width: calc(100vw - 96px);
    font-size: 12px;
    line-height: 1.35;
  }

  section[data-scene="s9"].scene-motion > h2 {
    top: 10vh;
  }

  section[data-scene="s9"].scene-motion > .door {
    left: 24px;
    right: 24px;
    padding: 20px 22px 22px;
  }

  section[data-scene="s9"].scene-motion > .door-a {
    top: 30vh;
  }

  section[data-scene="s9"].scene-motion > .door-b {
    top: 58vh;
  }

  section[data-scene="s9"].scene-motion .cta {
    min-height: 44px;
    padding-block: 10px 8px;
  }

  .refrain {
    left: 24px;
    right: 70px;
    bottom: 72px;
    font-size: 9.5px;
    line-height: 1.35;
    letter-spacing: .12em;
  }

  .bridge-line {
    left: 24px;
    right: 70px;
    bottom: 118px;
    font-size: 12.5px;
    line-height: 1.38;
  }

  .bridge-line--tag {
    font-size: 9.5px;
    line-height: 1.35;
    letter-spacing: .12em;
  }
}