/* /solutions use-case reel (Nov 1, Phase 1b). Markup: views/v2/solutions/uc-reel.ejs (+ uc-extra.ejs). Behaviour: uc-reel.js.
   Brand locked: ink, gold (small areas), lavender (segments, chips), mist (stage), slate (secondary text), white. Cabinet Grotesk + Manrope.
   4px scale; 24px outer card, 12px stage inside it (24 = 12 + 12 padding, concentric). Shadows from the fixed scale. */
.slu { --ink:#110A33; --violet:#341D99; --gold:#FFC61E; --gold-3:#FFE8A5; --lav:#DDD6FF; --mist:#F6F4FF; --cream:#FFF4D2; --slate:#5B6478; --line:#E6E8EF;
  --ease: cubic-bezier(.16,1,.3,1); --disp: "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif;
  --sh-sm: 0 2px 8px rgba(17,10,51,.08); --sh-md: 0 12px 32px -12px rgba(17,10,51,.22);
  display: grid; gap: 16px; min-width: 0; padding: 12px; border-radius: 24px; background: #fff; box-shadow: var(--sh-md), 0 0 0 1px var(--line);
  font-family: Manrope, Arial, sans-serif; color: var(--ink); }
/* the slot that held the old dashed placeholder box */
.slv-reel { min-width: 0; }
@media (max-width: 899px) { .slv-reel { width: 100%; max-width: 640px; margin: 0 auto; } }
.slu .sr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- stage ---------- */
.slu__stage { container-type: inline-size; position: relative; display: grid; place-items: center; min-width: 0; padding: 44px 12px 16px; border-radius: 12px; background: var(--mist); overflow: hidden; }
.slu__segs { position: absolute; top: 18px; left: 16px; right: 56px; display: flex; gap: 4px; }
.slu__segs i { flex: 1; height: 3px; border-radius: 2px; background: var(--lav); overflow: hidden; }
.slu__segs b { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.slu__segs i.is-done b { transform: scaleX(1); }
.slu:not(.is-js) .slu__segs i.is-on b, .slu.is-still .slu__segs i.is-on b { transform: scaleX(1); }
.slu__scenes { display: grid; width: 100%; justify-items: center; }
.slu__scene { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; }
.slu__scene[hidden] { display: none; }
.slu.is-js .slu__scene { transition: opacity .24s var(--ease), filter .24s var(--ease); }
.slu.is-js .slu__scene:not(.is-on) { opacity: 0; filter: blur(4px); pointer-events: none; }
/* the 400 x 324 scene scales with its stage (same steps as the /start stage) */
.slu__stage .ux { zoom: 1; }
@container (min-width: 500px) { .slu__stage .ux { zoom: 1.12; } }
@container (min-width: 600px) { .slu__stage .ux { zoom: 1.25; } }
@container (max-width: 399px) { .slu__stage .ux { zoom: .9; } }
@container (max-width: 359px) { .slu__stage .ux { zoom: .82; } }
@container (max-width: 327px) { .slu__stage .ux { zoom: .75; } }
@container (max-width: 299px) { .slu__stage .ux { zoom: .69; } }
@container (max-width: 275px) { .slu__stage .ux { zoom: .63; } }

/* pause / play (WCAG 2.2.2), 32px disc with a 44px hit area */
.slu__pz { position: absolute; right: 8px; top: 4px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: var(--ink); box-shadow: var(--sh-sm), 0 0 0 1px var(--line); cursor: pointer; transition: transform .16s var(--ease); }
.slu__pz::after { content: ""; position: absolute; inset: -6px; }
.slu__pz[hidden] { display: none; }
.slu__pz:active { transform: scale(.96); }
.slu__pz:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.slu__pz svg { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.slu__pz .i-play { display: none; fill: currentColor; stroke-width: 1.6; }
.slu__pz[aria-pressed="true"] .i-play { display: block; }
.slu__pz[aria-pressed="true"] .i-pause { display: none; }

/* ---------- caption: the playing use case, the products behind it, the deep link ---------- */
.slu__caps { display: grid; padding: 0 8px; }
.slu__cap { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 16px; }
.slu__cap[hidden] { display: none; }
.slu.is-js .slu__cap { transition: opacity .2s var(--ease); }
.slu.is-js .slu__cap:not(.is-on) { opacity: 0; pointer-events: none; }
.slu__cap h3 { margin: 0; font: 700 20px/26px var(--disp); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.slu__go { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: 800 14px/1 Manrope, Arial, sans-serif; color: var(--ink); text-decoration: none; white-space: nowrap; border-radius: 8px; }
.slu__go svg { transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .slu__go:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--gold); } .slu__go:hover svg { transform: translateX(3px); } }
.slu__go:focus-visible, .slu__by a:focus-visible, .slu__t:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.slu__by { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.slu__by a { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font: 600 13px/18px Manrope, Arial, sans-serif; color: var(--slate); text-decoration: none; border-radius: 6px; }
.slu__by img { flex: none; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) { .slu__by a:hover { color: var(--ink); } }

/* ---------- every use case for the role (Amar's list), each a jump to its scene ---------- */
.slu__all { margin: 0; padding: 12px 8px 4px; border-top: 1px solid var(--line); font: 600 14px/28px Manrope, Arial, sans-serif; color: var(--slate); text-wrap: balance; }
.slu__k { color: var(--ink); font-weight: 800; }
.slu__t { color: var(--slate); text-decoration: none; border-radius: 4px; white-space: nowrap; transition: color .15s ease; }
.slu__t[aria-current="true"] { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .slu__t:hover { color: var(--ink); } }
.slu__dot { color: #B8BCC8; }

@media (max-width: 599px) {
  .slu { gap: 12px; padding: 8px; border-radius: 20px; }
  .slu__stage { padding: 40px 4px 12px; }
  .slu__segs { top: 18px; left: 12px; right: 52px; }
  .slu__pz { right: 6px; }
  .slu__cap { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .slu__cap h3 { font-size: 18px; line-height: 24px; }
  .slu__go { grid-column: 1; grid-row: auto; }
  .slu__all { font-size: 13px; line-height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .slu.is-js .slu__scene, .slu.is-js .slu__cap, .slu__go svg { transition: none; }
}

/* ---------- the two pre-sales scenes drawn for the reel (views/v2/solutions/uc-extra.ejs) ---------- */
.ux--rfp .ux-wb { gap: 12px; }
.ux-q { display: grid; gap: 6px; padding: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.ux-qq { margin: 0; font-size: 12px; line-height: 16px; font-weight: 800; color: var(--ink); }
.ux-qa { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; line-height: 16px; }
.ux-qa img { flex: none; border-radius: 50%; }
.ux-qe { display: grid; gap: 6px; }
.ux-qe .ux-bar { flex: none; width: 96px; }
.ux--rfp .ux-qf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: auto 0 0; }
.ux-qf__s { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--slate); }
.ux-qf__s svg { color: var(--ink); }
.ux-pdeck { grid-template-columns: .9fr 1.2fr 1.05fr; gap: 6px; flex: 1; min-height: 0; }
.ux-pdeck .ux-av { position: static; }
.ux-sl { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 8px; border-radius: 10px; background: var(--mist); box-shadow: inset 0 0 0 1px rgba(17,10,51,.05); }
.ux-sl__t { margin: 0 0 4px; font: 700 12px/16px var(--disp); color: var(--ink); white-space: nowrap; }
.ux-pdeck .ux-sl { gap: 8px; }
.ux-sl .ux-trait { gap: 6px; }
.ux-sl .ux-trait > span:first-child { width: 40px; font-size: 10px; }
.ux-sl .ux-bar { min-width: 20px; }
.ux-sl__p { gap: 4px; font-size: 10px; line-height: 14px; }
.ux-sl__p b { flex: none; font-size: 10px; }
.ux-sl__p span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--slate); font-weight: 600; }
.ux-sl__l { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 10px; line-height: 14px; font-weight: 700; }
.ux-sl__l li { display: flex; align-items: center; gap: 6px; }
.ux-sl__l i { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; font: 800 9px/1 Manrope, Arial, sans-serif; font-style: normal; box-shadow: inset 0 0 0 1px var(--line); }
.ux-shared { padding: 10px 12px; }

/* ---------- solo mode: one product scene, no segment bar, caption or list (Product and AI blocks, views/v2/solutions/pai-scene.ejs) ---------- */
.slu--solo { padding: 0; border-radius: 0; background: none; box-shadow: none; gap: 0; }
.slu--solo .slu__stage { padding: 0 0 44px; background: none; border-radius: 0; overflow: visible; }
.slu--solo .slu__pz { top: auto; bottom: 0; right: 0; }
.pax-app { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--ink); color: #fff; }
.ux-wh .m img { border-radius: 3px; }
.pax-tool { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 9.5px/14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--slate); }
.pax-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 8px; }
.pax-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.pax-card .pax-tool { margin-top: auto; }
.pax-disc { flex: none; display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 800 11px/1 Manrope, Arial, sans-serif; font-style: normal; }
.pax-kv { display: grid; gap: 2px; margin: 0; font-size: 11px; line-height: 15px; }
.pax-kv span { color: var(--slate); font-weight: 700; }
.pax-card .ux-trait > span:first-child { width: 66px; }
.pax-nums { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.pax-nums li { display: grid; gap: 2px; padding: 6px 4px; border-radius: 8px; background: var(--mist); text-align: center; }
.pax-nums b { font: 700 16px/18px var(--disp); }
.pax-nums span { font-size: 9px; line-height: 12px; font-weight: 700; color: var(--slate); }
.pax-sig { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line); font-size: 12px; }
.pax-sig .ux-ic { background: var(--gold); }
.pax-sig > span { display: grid; min-width: 0; }
.pax-bill { grid-column: 1 / -1; align-self: end; display: grid; gap: 6px; }
.pax-bill p { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 11px; line-height: 15px; }
.pax-bill span { color: var(--slate); font-weight: 700; }
.pax-bill .ux-bar { flex: none; width: 100%; }
.pax-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.pax-p { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 6px; row-gap: 6px; padding: 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.pax-p small { grid-column: 1 / -1; font-size: 10.5px; line-height: 14px; font-weight: 700; color: var(--ink); }
.pax-link { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.pax-how { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pax-how li { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 700; }
.pax-how i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--lav); color: var(--ink); }
.pax-msg { display: flex; align-items: flex-start; gap: 8px; margin: auto 0 0; padding: 10px; border-radius: 12px; background: var(--mist); font-size: 12px; line-height: 17px; font-weight: 600; }
.pax-msg img { flex: none; border-radius: 50%; background: #fff; }
.pax-any { gap: 8px; }
.pax-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 104px; align-items: center; gap: 10px; flex: 1; padding: 8px 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.pax-row img { border-radius: 50%; }
.pax-row__t { display: grid; min-width: 0; gap: 1px; }
.pax-row__t b { font: 700 14px/18px var(--disp); }
.pax-row__t > span { font-size: 11px; line-height: 15px; color: var(--slate); font-weight: 600; }
.pax-row__v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; justify-content: flex-end; }
.pax-row__v .ux-bar { flex: none; width: 56px; }
.pax-line { font-size: 11px; line-height: 15px; font-weight: 700; text-align: right; }

/* ---------- Nov 2 (AK): spawn faster, less text in the animation ----------
   The use-case list moved out of the card into the role's text column (.slv-ucl, Amar's words as page copy). Inside the reel each
   step lands in about half the /start time, so the scene fills fast and never sits half empty. */
@media (prefers-reduced-motion: no-preference) {
  .slu .uc-anim [data-at] { transition-duration: .2s, .26s, .42s, .5s; transition-delay: calc(var(--k, 0) * 40ms); }
  .slu .uc-anim .ux-bar > i[data-at] { transition-duration: .48s; transition-delay: calc(var(--k, 0) * 40ms + 40ms); }
}
.slu { gap: 12px; }
.slu__caps { padding: 0 8px 4px; }
.slu__cap h3 { font-size: 18px; line-height: 24px; }
.slu__by { gap: 2px 14px; }
/* the list as page copy in the text column */
.slv-ucl { margin: 0 0 28px; padding: 0; border: 0; max-width: 34em; font: 600 15px/28px Manrope, Arial, sans-serif; color: var(--slate, #5B6478); text-wrap: pretty; }
.slv-ucl .slu__k { color: #110A33; font-weight: 800; }
.slv-ucl .slu__t { color: #5B6478; text-decoration: none; border-radius: 4px; white-space: nowrap; transition: color .15s ease; }
.slv-ucl .slu__t[aria-current="true"] { color: #110A33; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: #FFC61E; }
@media (hover: hover) and (pointer: fine) { .slv-ucl .slu__t:hover { color: #110A33; } }
.slv-ucl .slu__t:focus-visible { outline: 3px solid #341D99; outline-offset: 2px; }
.slv-ucl .slu__dot { color: #B8BCC8; }
@media (max-width: 599px) { .slv-ucl { font-size: 14px; line-height: 26px; margin-bottom: 24px; } }

/* Nov 2 (AK: no big empty gaps, nothing cut off): the Product and AI windows take their content's height (no hole above the billing
   row), the role line wraps instead of truncating, and the small pause disc sits centred under the card */
.pax .ux { height: auto; }
.pax .ux-w { position: relative; height: auto !important; }
.pax .pax-cols { grid-template-rows: auto; align-content: start; }
.pax .pax-bill { align-self: start; margin-top: 4px; }
.pax .ux-tx span { white-space: normal; overflow: visible; text-overflow: clip; }
.slu--solo .slu__stage { padding-bottom: 40px; }
.slu--solo .slu__pz { width: 28px; height: 28px; right: auto; left: 50%; bottom: 0; margin-left: -14px; box-shadow: 0 0 0 1px var(--line); }
.slu--solo .slu__pz:active { transform: scale(.96); }

/* Nov 2 final review (backup: 04-build/backups/nov02-final/review2): Product and AI pair card cut "Amanda Hughes" to "Amanda H...";
   names wrap instead of truncating, like the role line above. */
.pax .ux-tx b { white-space: normal; overflow: visible; text-overflow: clip; }

/* Nov 2 late (AK): the BDR "Multi-threading" scene (views/v2/solutions/uc-extra.ejs 'threads'): one account, a wire to each of
   five buyers, each with its own email angle. Rows sit on a 52px pitch so the wires in the SVG (viewBox 400 x 288) meet each row. */
.thr { position: relative; flex: 1; min-height: 0; }
.thr .ux-wires { inset: 0; }
.thr__acct { position: absolute; left: 16px; top: 90px; display: grid; justify-items: center; gap: 8px; width: 116px; padding: 14px 8px; border-radius: 14px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); font: 700 15px/18px var(--disp); }
.thr__logo { width: 44px; height: 44px; border-radius: 12px; }
.thr__ppl { position: absolute; left: 170px; right: 12px; top: 14px; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.thr__ppl li { gap: 8px; height: 40px; padding: 0 8px; border-radius: 12px; background: #fff; box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line); }
.thr__ppl b { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; }
.thr__m { flex: none; gap: 4px; }
.thr__done { position: absolute; left: 16px; top: 206px; width: 116px; justify-content: center; padding: 5px 6px; font-size: 10.5px; white-space: nowrap; }

/* Nov 2 late (AK: every use-case animation about its topic, read at a glance, NOT text-heavy; nothing cut off, no empty holes).
   The reels replay the /start scenes (views/v2/start/uc-assets.ejs); these trims apply inside the /solutions reels only (.slu), so the
   /start pages keep their own copy. Words cut here are secondary lines the caption under the stage already says. */
/* Account planning (AE + AM): the plan steps lose their sub-lines; the header loses "Updated today" */
.slu .ux--account-plan .ux-steps .ux-tx > span, .slu .ux--account-plan .ux-wh .m { display: none; }
.slu .ux--account-plan .ux-steps { gap: 16px; margin-top: 4px; }
/* Pre-meeting prep: the brief's "Humantic AI · today 10:00" line goes; the brief title says it */
.slu .ux--prep-mail .ux-mail > .ux-r:first-child .ux-tx > span { display: none; }
/* Multi-threading (AE): each stakeholder card is a name, a role and a style bar; the goal lines and footer note go, the cards fill the frame */
.slu .ux--stakeholders .ux-okr, .slu .ux--stakeholders .ux-foot { display: none; }
.slu .ux--stakeholders .ux-grid2 { flex: 1; grid-auto-rows: 1fr; }
.slu .ux--stakeholders .ux-card { justify-content: space-around; }
.slu .ux--stakeholders .ux-trait { flex-wrap: wrap; row-gap: 6px; }
.slu .ux--stakeholders .ux-trait > span:first-child { width: 100%; }
/* Methodology: the pain funnel and the two-person brief carry it; the "upfront contract" line goes */
.slu .ux--methodology .ux-okr { display: none; }
.slu .ux--methodology .ux-wb:has(.ux-rap) { justify-content: center; gap: 12px; }
/* Event intelligence (AM): the search line stays on one line */
.slu .ux--event .ux-search { border-radius: 14px; white-space: normal; }
.slu .ux--event .ux-search > span { min-width: 0; white-space: normal; line-height: 14px; text-wrap: balance; }
/* Renewal risk: the Signals card sat past the frame's bottom edge ("Save plan started" was cut); it moves up and tightens */
.slu .ux--renewal .ux-w + .ux-w { top: 146px !important; }
.slu .ux--renewal .ux-w + .ux-w .ux-wb { gap: 8px; padding-block: 10px; }
/* ABM campaigns: the pain card showed a Microsoft logo beside a JPMorgan Chase line (confusing); names stay on one line */
.slu .ux--abm-campaign .ux-signal > .ux-co { display: none; }
.slu .ux--abm-campaign .ux-mini-mail .ux-r { align-items: center; min-height: 32px; }
.slu .ux--abm-campaign .ux-mini-mail .ux-r b { min-width: 0; font-size: 12px; line-height: 15px; }
.slu .ux--abm-campaign .ux-src { top: 280px !important; }
/* Engagement tracking: the 4 accounts filled only the top half of the window; they now spread over it */
.slu .ux--engagement .ux-eng { flex: 1; grid-auto-rows: 1fr; }
.slu .ux--engagement .ux-eng li { padding-block: 0; }
/* Handoff to sales: the Teams message sat at the top of an empty window; it now sits in the middle */
.slu .ux--abm-handoff .ux-wb { justify-content: center; }
/* RFP response: no hole between the second question and the footer */
.ux--rfp .ux-wb { justify-content: space-evenly; }
.ux--rfp .ux-qf { margin: 0; }
/* Tier-1 account planning / Account research: "Services growth" was cut to "Services g..." */
.slu .ux--tier-one .ux-w:first-child .ux-trait > span:first-child { width: 92px; }
/* People research: each buyer card's style word sat cut beside its bar ("Results fir..."); it now sits above the bar, and the cards and
   talking points spread over the window instead of leaving its lower third empty */
.slu .ux--exec-brief .ux-card .ux-trait { flex-direction: column; align-items: stretch; gap: 4px; }
.slu .ux--exec-brief .ux-card .ux-trait > span:first-child { width: auto; }
.slu .ux--exec-brief .ux-wb { justify-content: space-evenly; }
.slu .ux--exec-brief .ux-card .ux-trait > .ux-bar { flex: none; width: 100%; }
/* Nov 2 late: the label sits on its own line, so the use cases balance under it (no lone "Persona segmentation" at 768) */
.slv-ucl .slu__k { display: block; }
/* Nov 2 late (Amar via coordinator: no boxy frames around visuals, graphics against the background): the reel loses its white card
   and mist stage box; the scene's own windows sit straight on the role panel, the segment bar and caption stay. */
.slv-reel .slu { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.slv-reel .slu__stage { background: none; padding-inline: 0; }
.slv-reel .slu__caps { padding-inline: 0; }

/* AK Nov 5 (second round): a scene that is a screenshot tour (views/partials/hx-tour.ejs) fills the stage; the reel's pause holds it, so the
   tour's own pause is not repeated here */
.slu__scene--tour { place-items: stretch; }
.slu__scene--tour .hxt { width: 100%; }
.slu .hxt__bar .hxt__pause { display: none !important; }