/* Only the approved opening animates. Other sections keep the static gate. */
.opening-live { position: relative; overflow: visible !important; }
.opening-live .stage { position: sticky; margin-bottom: 0; overflow: clip; isolation: isolate; }
.opening-scene { position: relative; width: 100%; transform-origin: 0 0; }
.opening-live .screen { width: 100%; aspect-ratio: auto; background: transparent; isolation: auto; }
.opening-backdrop { position: absolute; inset: 0; background: var(--ink); border-radius: var(--radius-panel); z-index: 0; }
.opening-live .screen > .film, .opening-live .screen-copy { transform-origin: 0 0; }
.opening-live .clips .clip[data-slot] { transform-origin: 0 0; }
.opening-live .stage-caption { display: none; }
.opening-live .opening-problems { position: absolute; left: 64%; top: 1rem; width: 35%; padding: 0; display: block; transform-origin: 0 0; z-index: 5; }
.opening-live .opening-problems .h2 { font-size: clamp(1.75rem, 2.5vw, 2.65rem); margin-bottom: 1.5rem; }
.opening-live .problem-list article { padding-block: .9rem; }
.opening-live .problem-list article:first-child { padding-top: 0; }
.opening-live .problem-list h3 { font-size: clamp(1.2rem, 1.55vw, 1.6rem); }
.opening-live .problem-list p { font-size: clamp(.9rem, 1.05vw, 1rem); }
.opening-live .opening-exit { inset: 17% 0 auto; pointer-events: none; }
.opening-live .opening-exit .motion-attribution { font-size: .85rem; line-height: 1.5; color: var(--ink-2); margin-top: 1.5rem; }
.opening-exit-detail > p:first-child { font-size: clamp(1.3rem, 2.3vw, 2.4rem); line-height: 1.15; margin-top: 1rem; }
.opening-controls { display: flex; justify-content: flex-end; gap: 1rem; padding: .6rem 0; }
.opening-controls button { color: var(--ink); background: var(--cream); border: 1px solid var(--rule-strong); border-radius: var(--radius-ui); font: .78rem var(--sans); padding: .7rem .8rem; min-height: 44px; cursor: pointer; }
.opening-controls button:hover { border-color: var(--ink); }
.opening-controls button[aria-pressed="true"] { color: var(--cream); background: var(--ink); }
.opening-live .opening-controls { position: absolute; bottom: 0; right: 0; z-index: 10; }
html.no-motion .opening-media-enabled .clip-play,
html.no-motion .opening-media-enabled .film-ctl { display: block; }
.opening-media-enabled .clip-play:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; }
.opening-media-enabled .clip:not(.is-playing) .clip-play .glyph { opacity: .85; }
.opening-media-enabled .clip.is-playing .clip-play:focus-visible .glyph { opacity: 1; }
.opening-media-enabled .film.is-playing > video,
.opening-media-enabled .clip.is-playing .clip-inner > video { opacity: 1; }
.opening-media-enabled .ov-progress::after { display: none; }
.opening-playhead { position: absolute; inset: 0; background: white; transform-origin: left; transform: scaleX(0); }
.ov--shorts .opening-playhead { background: var(--shorts); }
.opening-media-error .clip-play .glyph { opacity: 1; }
.opening-motion-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (hover: hover) and (pointer: fine) {
  .opening-media-enabled .clip:hover .clip-play .glyph { opacity: 1; }
}
@media (max-width: 860px) {
  .opening-live .screen { min-height: 0; padding: 0; }
  .opening-live .clips .clip[data-slot] { transform: translate3d(0,0,0); }
  /* Live poses are drawn from the screen's origin; the static phone layout's in-flow clip row (opening.css) must not move that origin. */
  .opening.opening-live .clips { position: absolute; inset: 0; height: auto; margin: 0; order: 0; }
  .opening-live .opening-problems { left: 0; width: 100%; padding: 0; }
  .opening-live .opening-problems .h2 { font-size: 1.85rem; max-width: 23ch; }
  .opening-live .problem-list h3 { font-size: 1.3rem; }
  .opening-live .problem-list p { font-size: .95rem; }
  .opening-live .opening-exit { top: 20%; }
  .opening-live .opening-controls { bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-media-enabled *, .opening-media-enabled *::before, .opening-media-enabled *::after { animation: none !important; transition: none !important; }
}
/* Original V4 budget typography, now shared by the total and its two halves. */
.opening-live .opening-exit .exit-budget,.split-half{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 118;font-size:clamp(2.8rem,5.2vw,5.6rem);line-height:.95;letter-spacing:-.04em;font-feature-settings:"tnum"}
.budget-split{position:absolute;top:0;left:0;width:100%;display:grid;grid-template-columns:1fr 1fr;opacity:0;text-align:center}
.split-half{display:block;padding:0 12px}
.split-half small{display:block;font-family:var(--sans);font-variation-settings:normal;font-size:clamp(.8rem,1.3vw,1.1rem);font-weight:400;letter-spacing:0;line-height:1.3;margin-top:16px}
.split-rule{position:absolute;left:50%;top:-12px;width:1px;height:125px;background:var(--rule-strong);transform-origin:top}
.opening-live .opening-exit-detail{padding-top:70px}
@media(max-width:600px){.split-half{font-size:clamp(2rem,8vw,3rem)}.split-rule{height:92px}.opening-live .opening-exit-detail{padding-top:65px}}
/* The split owns the real result lists; the normal section is the fallback. */
.opening-live .split-half .experiment-results{font-family:var(--sans);font-variation-settings:normal;letter-spacing:normal;margin:28px 8% 0;text-align:left;line-height:1.3}
.opening-live .split-half .experiment-results dd{font-size:clamp(2rem,3.5vw,4rem)}
.opening-live .split-right .experiment-results dd{color:var(--magenta)}
.split-breakdown-notes{position:absolute;left:0;width:100%;text-align:left;pointer-events:auto}
.split-breakdown-notes .experiment-notes{border-top:1px solid var(--rule);padding:24px 4% 0;gap:36px}
.opening-live .split-rule{height:100%}
@media(max-width:600px){.opening-live .split-half{padding:0 6px}.opening-live .split-half .experiment-results{grid-template-columns:1fr;margin:24px 6px 0;gap:18px}.opening-live .split-half .experiment-results dd{font-size:1.85rem}.opening-live .split-half .experiment-results dt{font-size:.78rem}.split-breakdown-notes .experiment-notes{gap:15px;padding:18px 6px 0}.split-breakdown-notes .experiment-takeaway{font-size:.95rem}.split-breakdown-notes .experiment-notes>div{font-size:.76rem}}
.opening-live .split-half .experiment-results dt{font-weight:400}
/* One readable comparison surface: results and source notes share a reveal. */
.split-comparison {
  position: absolute;
  inset: 0 clamp(0px, 2vw, 28px) auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-object);
  overflow: hidden;
  opacity: 0;
}
.split-comparison .budget-split { position: relative; padding: clamp(24px, 3vw, 42px) 0 28px; }
.split-comparison .split-half { padding-inline: clamp(16px, 3vw, 42px); }
.opening-live .split-comparison .split-half .experiment-results { margin: 26px 0 0; padding-top: 22px; gap: 20px; }
.opening-live .split-comparison .split-rule { top: 28px; bottom: 28px; height: auto; }
.split-comparison .split-breakdown-notes { position: relative; }
.split-comparison .experiment-notes { margin: 0; padding: 24px clamp(20px, 3vw, 42px); gap: 32px; background: var(--cream); }
.split-comparison .experiment-takeaway { font-size: 1rem; line-height: 1.45; max-width: 36ch; }
.split-comparison .experiment-notes > div { font-size: .8rem; line-height: 1.5; }
.split-comparison .experiment-notes > div p { margin-bottom: 8px; }
.split-comparison .experiment-notes a { display: inline-block; padding-block: 3px; }
@media (max-width: 600px) {
  .split-comparison { inset-inline: 0; border-radius: 16px; }
  .split-comparison .budget-split { padding: 24px 0 22px; }
  .split-comparison .split-half { padding-inline: 16px; }
  .split-comparison .split-half small { margin-top: 10px; }
  .opening-live .split-comparison .split-half .experiment-results { margin-top: 20px; padding-top: 18px; gap: 18px; }
  .split-comparison .experiment-notes { padding: 18px 20px; gap: 14px; }
  .split-comparison .experiment-takeaway { font-size: .9rem; max-width: none; }
  .split-comparison .experiment-notes > div { font-size: .75rem; }
}
.opening-controls[hidden] { display: none; }
/* 2026-10-01 (Levi): the phone opening. The clip row holds on screen while the five cards deal out of a
 * stack, then lets go. opening-motion.js sizes the track once from the small viewport height. */
.svh-probe { position: fixed; top: 0; left: 0; width: 0; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }
.opening.opening-phone .deal-track { position: relative; order: 2; flex: none; margin-top: 1.5rem; }
.opening.opening-phone .deal-track > .clips { position: sticky; inset: auto; width: 100%; margin: 0; order: 0; }
.opening.opening-phone .clips .clip[data-slot] { transform-origin: 50% 50%; will-change: transform; }
/* The $10,000 splits in two once, as it comes on screen. Phone only; the arms below carry the same figures as text. */
/* Scrubbed by renderSplit() in opening-motion.js: --cut opens the bar, --out lifts the total away, --in-a and
   --in-b raise each half out of its own bar segment. Transform and opacity only. */
.phone-split { --cut: 0; --out: 0; --in-a: 0; --in-b: 0; margin: 0 0 2rem; text-align: center; }
.phone-split[hidden] { display: none; }
.phone-split-figures { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
.phone-split-total, .phone-split-half { grid-row: 1; margin: 0; font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 118; line-height: .95; letter-spacing: -.04em; font-feature-settings: "tnum"; }
.phone-split-total { grid-column: 1 / -1; align-self: center; font-size: clamp(3rem, 17vw, 4.6rem); opacity: calc(1 - var(--out)); transform: translate3d(0, calc(var(--out) * -0.9rem), 0) scale(calc(1 - var(--out) * .06)); }
.phone-split-half { font-size: clamp(2rem, 9.5vw, 2.8rem); }
.phone-split-half:nth-child(2) { grid-column: 1; opacity: var(--in-a); transform: translate3d(0, calc((1 - var(--in-a)) * 1.1rem), 0); }
.phone-split-half:nth-child(3) { grid-column: 2; opacity: var(--in-b); transform: translate3d(0, calc((1 - var(--in-b)) * 1.1rem), 0); }
.phone-split-half small { display: block; margin-top: .5rem; font-family: var(--sans); font-variation-settings: normal; font-size: .85rem; font-weight: 400; letter-spacing: 0; line-height: 1.3; color: var(--ink-2); }
.phone-split-bar { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1rem; height: 6px; }
.phone-split-bar i { position: relative; background: var(--ink); border-radius: 3px; }
.phone-split-bar i:last-child::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: var(--cut); }
.phone-split-bar i:first-child { border-radius: 3px 0 0 3px; transform: translate3d(calc(var(--cut) * -5px), 0, 0); opacity: calc(1 - var(--cut) * .75); }
.phone-split-bar i:last-child { border-radius: 0 3px 3px 0; transform: translate3d(calc(var(--cut) * 5px), 0, 0); }
.phone-split-bar i:last-child::after { background: var(--grad); }