/* Virumo stylesheet: tokens, base, components. */
:root {
  --bg: #0E1013;
  --panel: #16181C;
  --panel-border: rgba(255,255,255,.06);
  --card: #191C22;
  --card-hi: #2A2D34;
  --row-hi: #22252B;
  --chip: #333026;
  --chip-border: rgba(224,192,96,.5);
  --accent: #E0C060;
  --ring: rgba(224,192,96,.85);
  --accent-glow: rgba(224,192,96,.15);
  --text-hero: #FFFFFF;
  --text: #ECEEF2;
  --text-2: #A9B0BC;
  --text-3: #9198A5;
  --faint: #808A99;
  --divider: rgba(255,255,255,.08);
  --ok: #7EE07E;
  --amber: #E0A055;
  --sans: -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  --display: Montserrat, "Montserrat Fallback", var(--sans);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1180px;
  --gutter: clamp(20px,5vw,48px);
  --section: clamp(72px,10vw,128px);
  --radius: 16px;
  --head-h: 68px;
  --stage-pad: 24px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
@view-transition {navigation: auto}
::view-transition-old(root), ::view-transition-new(root) {animation-duration: .3s}
/* Fonts: subsets + metric-matched fallback (zero CLS) */
@font-face {font-family: Montserrat; src: url("/assets/fonts/montserrat-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: optional}
@font-face {font-family: Montserrat; src: url("/assets/fonts/montserrat-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: optional}
/* Metric-matched fallback, measured from the font files on 05/09/2026 (avg advance Montserrat Bold 0.5263em vs Arial-metric 0.4753em): no reflow if the webfont is late. */
@font-face {font-family: "Montserrat Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Roboto"); ascent-override: 87.4%; descent-override: 22.7%; line-gap-override: 0%; size-adjust: 110.7%}
/* Base */
.nav ul, .trust, .stats ul, .cards, .steps, .ticks, .chips, .toc, .foot-nav ul {list-style: none; margin: 0; padding: 0}
*, *::before, *::after {box-sizing: border-box}
html {-webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px)}
@media (prefers-reduced-motion: no-preference) {html {scroll-behavior: smooth}}
body {margin: 0; background: var(--bg); transition: background-color .6s var(--ease), color .6s var(--ease); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased}
@media (min-width:760px) {body {font-size: 17px}}
h1, h2, h3 {font-family: var(--display); color: var(--text-hero); margin: 0 0 .5em; text-wrap: balance}
h1, h2 {font-weight: 700; letter-spacing: -.02em}
h1 {font-size: clamp(2.4rem,5vw,3.9rem); line-height: 1.06; max-width: 14ch}
h2 {font-size: clamp(1.75rem,3.2vw,2.6rem); line-height: 1.1}
h3 {font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.3}
p {margin: 0 0 1.1em}
p:last-child {margin-bottom: 0}
a {color: var(--text-hero); text-underline-offset: .22em; text-decoration-thickness: 1px}
a:hover {color: var(--accent)}
ul, ol {margin: 0 0 1.1em; padding-left: 1.2em}
li {margin: 0 0 .4em}
strong {color: var(--text-hero); font-weight: 600}
code {font-family: var(--mono); font-size: .92em; color: var(--text); background: var(--panel); border: 1px solid var(--panel-border); border-radius: 6px; padding: 2px 6px}
img, svg {max-width: 100%}
:focus-visible {outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 4px}
::selection {background: var(--accent); color: var(--bg)}
.svg-defs {position: absolute}
.wrap {width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter)}
.vh {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0}
.skip {position: absolute; left: 50%; top: 0; z-index: 100; transform: translate(-50%, -140%); background: var(--accent); color: var(--bg); font-weight: 600; padding: 12px 20px; border-radius: 0 0 12px 12px; text-decoration: none; transition: transform .15s ease-out}
.skip:focus {transform: translate(-50%, 0); color: var(--bg)}
/* Header */
.site-head {position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid transparent; transition: background-color .6s var(--ease), border-color .3s}
.site-head.scrolled {border-bottom-color: var(--divider)}
.nav .btn-small {padding: 10px 20px}
.nav-row {display: flex; align-items: center; gap: 24px; min-height: var(--head-h)}
.brand {display: inline-flex; align-items: center; margin-right: auto; color: var(--text-hero); text-decoration: none}
.brand:hover {color: var(--accent)}
.brand-lockup {display: block; height: 15px; width: auto; aspect-ratio: 7426 / 728; color: var(--accent)}
@media (min-width:760px) {.brand-lockup {height: 17px}}
.nav-row {flex-wrap: nowrap}
.nav ul {display: flex; align-items: center; gap: 28px}
.nav li {margin: 0}
.nav a {display: inline-block; white-space: nowrap; padding: 6px 0; color: var(--text-2); text-decoration: none; font-size: .95rem; font-weight: 500}
.nav a:hover {color: var(--text-hero)}
.nav .btn {color: var(--bg)}
.nav-toggle {display: none; width: 44px; height: 44px; padding: 0 11px; background: none; border: 1px solid var(--divider); border-radius: 10px; cursor: pointer}
.nav-toggle span {display: block; height: 2px; margin: 4px 0; background: var(--text); border-radius: 2px}
.nav-toggle:hover {border-color: var(--accent)}
@media (min-width:900px) and (max-width:1099px) {.nav ul {gap: 16px} .nav-row {gap: 16px} .nav a {font-size: .88rem} .nav .btn-small {padding: 9px 14px}}
@media (max-width:899px) {
  .nav-toggle {display: block}
  .nav {position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); border-block: 1px solid var(--divider)}
  .nav {display: none}
  .nav[data-open="true"] {display: block}
  /* No-JS fallback via the scripting media feature: decided by CSS at first paint, so no flash and no layout shift while the deferred script loads. */
  @media (scripting: none) {.nav {display: block; position: static; background: none; border: 0} .nav-toggle {display: none}}
  .nav ul {flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px}
  .nav li + li {border-top: 1px solid var(--divider)}
  .nav li:last-child {border-top: 0}
  .nav a {padding: 14px 0; font-size: 1.05rem}
  .nav .btn {margin-top: 16px; text-align: center}
}
/* Buttons */
.btn {display: inline-block; padding: 14px 24px; background: var(--accent); color: var(--bg); font: 600 1rem/1.2 var(--sans); border: 1px solid var(--accent); border-radius: 999px; text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s, border-color .15s}
.btn:hover {color: var(--bg); transform: translateY(-1px); filter: brightness(1.08)}
.btn-small {padding: 10px 20px; font-size: .9rem; white-space: nowrap}
.btn-secondary {background: transparent; color: var(--text); border-color: var(--divider)}
.btn-secondary:hover {color: var(--text-hero); border-color: var(--accent)}
.btn-row {display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0}
/* Sections */
.section {padding-block: var(--section); border-top: 1px solid var(--divider)}
.eyebrow {display: block; margin: 0 0 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent)}
.lead {font-size: 1.2rem; color: var(--text-2); max-width: 62ch}
.sec-head {max-width: 62ch; margin-bottom: 48px}
.note {font-size: .9rem; color: var(--text-3); max-width: 62ch}
/* Stats */
.stats {padding-block: clamp(40px,5vw,56px); border-block: 1px solid var(--divider)}
.stats ul {display: grid; gap: 32px; grid-template-columns: repeat(2,minmax(0,1fr))}
@media (min-width:860px) {.stats ul {grid-template-columns: repeat(4,minmax(0,1fr))}}
.stats li {margin: 0}
.stat-n {display: block; font-family: var(--display); font-weight: 700; font-size: clamp(2.1rem,4vw,3rem); line-height: 1; letter-spacing: -.03em; color: var(--text-hero)}
.stat-l {display: block; margin-top: 10px; font-size: .95rem; color: var(--text-2)}
/* Cards */
.cards {display: grid; gap: 20px; grid-template-columns: 1fr}
@media (min-width:700px) {.cards {grid-template-columns: repeat(2,minmax(0,1fr))}}
@media (min-width:1000px) {.cards--3 {grid-template-columns: repeat(3,minmax(0,1fr))}}
.card {margin: 0; padding: 28px; background: var(--card); border: 1px solid var(--panel-border); border-radius: var(--radius); transition: background .18s, border-color .18s}
.card:hover, .card:focus-within {background: var(--card-hi); border-color: var(--divider)}
.card h3 {margin-bottom: .5em}
.card p {margin-bottom: 0; font-size: .97rem; color: var(--text-2)}
.card-icon {display: block; width: 24px; height: 24px; margin-bottom: 18px; color: var(--text-2)}
.devices-line {max-width: 62ch; font-size: 1.1rem; line-height: 1.7; color: var(--text)}
/* Steps + panels */
.steps {display: grid; gap: 4px; counter-reset: step}
.steps > li {display: grid; gap: 8px 28px; counter-increment: step; margin: 0; padding: 28px 0; border-top: 1px solid var(--divider)}
@media (min-width:760px) {.steps > li {grid-template-columns: 88px minmax(0,1fr)}}
.steps > li::before {content: counter(step, decimal-leading-zero); font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: -.03em; color: var(--text-3)}
.steps .step-body {grid-column: -2 / -1}
.steps h3 {margin-bottom: .35em}
.steps p {color: var(--text-2); max-width: 62ch}
.panel {margin-top: 40px; padding: clamp(24px,4vw,36px); background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius)}
.panel h3 {margin-bottom: .5em}
.panel p {color: var(--text-2); max-width: 62ch}
/* Ticked lists */
.ticks {display: grid; gap: 18px}
.ticks li {display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 16px; align-items: start; margin: 0; max-width: 70ch; color: var(--text-2)}
.tick {width: 24px; height: 24px; margin-top: 2px; color: var(--ok)}
/* Roadmap chips */
.chips {display: flex; flex-wrap: wrap; gap: 14px}
.chips li {display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 20px; background: var(--chip); border: 1px solid var(--chip-border); border-radius: 999px; font-size: .97rem; color: var(--text)}
.badge {flex: none; padding: 3px 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--chip-border); border-radius: 999px}
/* FAQ */
.faq {max-width: 78ch}
.faq details {border-top: 1px solid var(--divider)}
.faq details:last-of-type {border-bottom: 1px solid var(--divider)}
.faq summary {position: relative; padding: 24px 44px 24px 0; font-family: var(--display); font-weight: 600; font-size: 1.12rem; line-height: 1.35; color: var(--text-hero); cursor: pointer; list-style: none}
.faq summary::-webkit-details-marker {display: none}
.faq summary::after {content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 1.5rem; line-height: 1; color: var(--accent)}
.faq details[open] summary::after {content: "–"}
.faq summary:hover {color: var(--accent)}
.faq .answer {margin: -6px 0 0; padding: 0 0 26px; max-width: 62ch; color: var(--text-2)}
/* Prose pages */
.page-head {padding-block: clamp(56px,8vw,96px) clamp(32px,5vw,56px)}
.page-head .lead {margin-top: 20px}
.prose h3 {margin-top: 40px}
.prose p, .prose li {color: var(--text-2)}
.prose > p, .prose ul, .prose ol {max-width: 62ch}
.prose ol.guide {padding-left: 1.3em}
.prose ol.guide li {margin-bottom: .6em}
.toc {display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .95rem}
.toc li {margin: 0}
/* Footer */
.site-foot {margin-top: var(--section); padding-block: clamp(56px,7vw,88px) 32px; border-top: 1px solid var(--divider)}
.foot-grid {display: grid; gap: 48px}
@media (min-width:860px) {.foot-grid {grid-template-columns: minmax(0,1fr) minmax(0,1.35fr)}}
.foot-brand .brand-lockup {margin-bottom: 22px}
.foot-tag {max-width: 34ch; color: var(--text-2)}
.foot-disclaimer {max-width: 42ch; font-size: 16px; color: var(--faint)}
.foot-nav {display: grid; gap: 32px; grid-template-columns: repeat(2,minmax(0,1fr))}
@media (min-width:600px) {.foot-nav {grid-template-columns: repeat(3,minmax(0,1fr))}}
.foot-h {margin: 0 0 16px; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3)}
.foot-nav li {margin-bottom: 10px}
.foot-nav a {font-size: .97rem; color: var(--text-2); text-decoration: none}
.foot-nav a:hover {color: var(--text-hero)}
.foot-credit {margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--divider)}
.foot-credit p {margin: 0; max-width: 78ch; font-size: .84rem; line-height: 1.6; color: var(--text-3)}
.foot-credit a {color: var(--text-3)}
.foot-credit a:hover {color: var(--accent)}
.foot-base {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 24px; font-size: .9rem; color: var(--text-3)}
.foot-base p {margin: 0}
.foot-base a {color: var(--text-3); text-decoration: none}
.foot-base a:hover {color: var(--accent)}
.foot-stamp {margin: 16px auto 0; font-family: var(--mono); font-size: .8rem; color: var(--text-3)}
/* Hero: CSS-only (F6). Keyframe "from" is opacity .001, so the element still counts as painted. Under reduced motion the word rise becomes an opacity-only fade (A2c), same delays. */
.hero {padding-block: clamp(72px,12vw,152px) clamp(56px,8vw,104px); border-top: 0}
.hero h1 {font-size: clamp(2.7rem,8.2vw,5rem); line-height: 1.05; letter-spacing: -.035em; max-width: 14ch; margin-bottom: .4em}
.hero h1 .w {display: inline-block; animation: rise .9s var(--ease) both}
.hero h1 .w:nth-child(1) {animation-delay: .05s} .hero h1 .w:nth-child(2) {animation-delay: .13s} .hero h1 .w:nth-child(3) {animation-delay: .21s} .hero h1 .w:nth-child(4) {animation-delay: .29s}
.hero h1 .w:nth-child(5) {animation-delay: .37s} .hero h1 .w:nth-child(6) {animation-delay: .45s} .hero h1 .w:nth-child(7) {animation-delay: .53s} .hero h1 .w:nth-child(8) {animation-delay: .61s}
.hero h1 .w:nth-child(9) {animation-delay: .69s} .hero h1 .w:nth-child(10) {animation-delay: .77s} .hero h1 .w:nth-child(11) {animation-delay: .85s} .hero h1 .w:nth-child(12) {animation-delay: .93s}
.hero-copy > :not(h1) {animation: rise .9s var(--ease) .6s both}
.hero .lead {max-width: 52ch}
@keyframes rise {from {opacity: .001; transform: translateY(24px)} to {opacity: 1; transform: none}}
@keyframes fade {from {opacity: .001} to {opacity: 1}}
@media (prefers-reduced-motion: reduce) {.hero h1 .w, .hero-copy > :not(h1) {animation-name: fade}}
.trust {display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: 30px; font-size: .9rem; color: var(--text-3)}
.trust li {display: flex; align-items: center; margin: 0}
.trust li:not(:last-child)::after {content: "·"; margin: 0 .75em; color: var(--faint)}
@media (max-width: 600px) {.trust {display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px} .trust li:not(:last-child)::after {content: none} .chips li {width: 100%; border-radius: 16px}}
.tier {display: inline-block; padding: 2px 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--divider); border-radius: 999px; vertical-align: middle}
.credit {margin-top: 28px; max-width: 78ch; font-size: .84rem; line-height: 1.6; color: var(--text-3)}
.credit a {color: var(--text-3)}
.credit a:hover {color: var(--accent)}

/* Theme re-skin (Fable B7): the declared exception to opacity/transform-only. Palettes from the app's Tokens.kt, each contrast-checked in _qa/motion-check.js. */
html[data-theme="cinema"] {--bg: #0A0A0C; --panel: #17181C; --card: #16171B; --accent: #A8C4E6; --ring: rgba(168,196,230,.85); --text: #F2F4F7; --text-2: #B0B6C0; --text-3: #969CA6; --faint: #858B95}
html[data-theme="editorial"] {--bg: #101014; --panel: #1A1720; --card: #1D1924; --accent: #E8956B; --ring: rgba(232,149,107,.85); --text: #F2EFF4; --text-2: #B8B0C0; --text-3: #A098AB; --faint: #8E8799}

/* Touch ticks: five points, two columns from 860px */
.ticks--plain li {grid-template-columns: minmax(0,1fr)}
@media (min-width: 860px) {.ticks--cols {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 56px} .ticks--cols li {max-width: none}}
/* Setup grid */
.card .tier {margin-left: 6px}
.card--wide {grid-column: 1 / -1}
.card--wide figure {margin: 18px 0 0; max-width: 720px}
.card--wide picture, .card--wide img {display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--panel-border)}
/* Compare table */
.table-wrap {margin-top: 8px}
.compare {width: 100%; border-collapse: collapse; font-size: .97rem}
.compare caption {text-align: left; padding-bottom: 14px; color: var(--text-3); font-size: .9rem}
.compare th, .compare td {padding: 14px 12px 14px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--divider)}
.compare thead th {font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); border-top: 0}
.compare tbody th {font-weight: 600; color: var(--text-hero); width: 34%}
.compare td {color: var(--text-2)}
.compare td:last-child {color: var(--text)}
@media (max-width: 600px) {.compare {font-size: .88rem} .compare th, .compare td {padding-right: 8px}}
.may {margin-top: 32px; max-width: 62ch}
.may li {color: var(--text-2)}

/* L2 pages: install download block, press kit, release notes */
.hash {display: block; margin: .3em 0 1em; overflow-wrap: anywhere}
.card figure {margin: 0}
.card figcaption {margin-top: 10px; font-size: .84rem; color: var(--text-3)}
.card img {display: block; max-width: 100%; height: auto}

/* Reveal (F1-F4, A2d): hidden ONLY under html.js. Opacity-only 0.4s under reduce; fade-up 0.6s under full motion. Initial state lives in CSS. html[data-motion] is set by js-flag.js. */
html.js [data-reveal] {opacity: 0; transition: opacity .4s var(--ease)}
html.js [data-reveal].is-in {opacity: 1}
html.js[data-motion="full"] [data-reveal] {transform: translateY(40px); transition: opacity .6s var(--ease), transform .6s var(--ease)}
html.js[data-motion="full"] [data-reveal].is-in {transform: none}
html.js:not(.ready) [data-reveal] {animation: reveal-fallback .01s 3s forwards}
@keyframes reveal-fallback {to {opacity: 1; transform: none}}

/* Scenes (Motion v2): the page is the STACKED layout by default (no JS, unsupported browser, narrow or short viewport, forced colours,
   data-fit="no", print): every beat and frame visible, interleaved in reading order. The pinned system exists only under html.scenes
   (added by site.js after a feature test) inside @supports and a screen media query. The scene runway is data-period / data-lead on the
   section (vh); site.js passes them to CSS as --period, --lead-vh, --n, --lead. Progress --p (0..1) is written by site.js only. */
.scene {position: relative; background: var(--bg); padding: 56px var(--gutter); display: flex; flex-direction: column; gap: 24px; align-items: center; transition: background-color .6s var(--ease)}
.scene > *, .scene .beat, .scene .frame {width: min(100%, 880px)}
.pin, .stage, .tv, .beats {display: contents}
.scene-h {order: 0}
.frame {margin: 0; position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; box-shadow: 0 0 0 6px #1b1e24; overflow: hidden}
.frame picture, .frame > svg {display: block; width: 100%; height: 100%}
.frame img {display: block; width: 100%; height: 100%; object-fit: contain}
.frame figcaption {position: absolute; left: 12px; bottom: 8px; z-index: 3; padding: 2px 10px; font-size: .75rem; color: var(--text-2); background: rgba(14,16,19,.85); border-radius: 999px}
.frame:nth-child(1) {order: 2} .beat:nth-child(1) {order: 1}
.frame:nth-child(2) {order: 4} .beat:nth-child(2) {order: 3}
.frame:nth-child(3) {order: 6} .beat:nth-child(3) {order: 5}
.frame:nth-child(4) {order: 8} .beat:nth-child(4) {order: 7}
.frame:nth-child(5) {order: 10} .beat:nth-child(5) {order: 9}
.frame:nth-child(6) {order: 12} .beat:nth-child(6) {order: 11}
.frame:nth-child(7) {order: 14} .beat:nth-child(7) {order: 13}
.frame:nth-child(8) {order: 16} .beat:nth-child(8) {order: 15}
.rail {display: none}
.beat {margin-bottom: 8px}
.beat .eyebrow {margin-bottom: 8px}
.beat h3 {font-size: 1.5rem; margin: 0 0 .35em}
.beat p {margin: 0 0 .5em; color: var(--text)}
.beat .eyebrow {color: var(--accent)}
.chips-line {margin-top: .6em}
.chip-l {font-size: .8rem; color: var(--text-2)}
.ring {position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none}
.ring rect {fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke}
.schem .m-bg {fill: var(--bg)} .schem .m-pan {fill: var(--panel)} .schem .m-card {fill: var(--card)} .schem .m-acc {fill: var(--accent)} .schem .m-txt {fill: var(--text-hero)} .schem .m-dim {fill: var(--text-2)}
.schem svg * {transition: fill .6s var(--ease)}
.scene-eyebrow {margin: 0 0 16px; font: 600 .85rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); text-align: center}
.scene-statement .beat {text-align: center; width: 100%}
.scene-statement .line {margin: 0 auto .35em; max-width: 14ch; font: 700 clamp(2rem,7vw,5rem)/1.05 var(--display); letter-spacing: -.02em; color: var(--text-hero)}
.scene-statement .line:nth-child(2) {--i: 1} .scene-statement .line:nth-child(3) {--i: 2}
.scene-credit {margin-top: 8px}
.scene-credit .credit {margin-top: 0}
.scene-premium .beat h3 {font-size: clamp(1.8rem,4vw,3rem); letter-spacing: -.02em}
.scene-premium .beat p:not(.eyebrow) {font-size: 1.15rem}
.skip-scene:focus {position: fixed; z-index: 100; top: 8px; left: 8px; width: auto; height: auto; margin: 0; padding: 10px 16px; clip-path: none; overflow: visible; background: var(--accent); color: var(--bg); border-radius: 8px; font-weight: 600; text-decoration: none}

@supports (opacity: clamp(0, 1, 1)) and (aspect-ratio: 1) {
@media screen and (min-width: 360px) and (min-height: 560px) and (forced-colors: none) {
html.scenes [data-scene]:not([data-fit="no"]) {
  --copy-h: 12rem;
  --per: calc((1 - var(--lead)) / var(--n));
  --rz: calc(var(--per) * .03);
  --rw: calc(var(--per) * .06);
  display: block; padding: 0; background: var(--bg);
  height: calc(100vh - var(--head-h) + (var(--n) * var(--period) + var(--lead-vh)) * 1vh);
  height: calc(100svh - var(--head-h) + (var(--n) * var(--period) + var(--lead-vh)) * 1vh);
}
html.scenes [data-scene]:not([data-fit="no"]) > *, html.scenes [data-scene]:not([data-fit="no"]) .beat, html.scenes [data-scene]:not([data-fit="no"]) .frame {width: auto}
/* B7b: an anchor lands at the first fully readable position: the centre of beat 1's hold (cycling), or just after the last line has built (cumulative; --hold is set by site.js) */
html.scenes [data-scene]:not([data-fit="no"]) {scroll-margin-top: calc(-16px - (var(--lead-vh) + var(--period) * .5) * 1vh)}
html.scenes :is([data-scene="statement"], [data-scene="steps"]):not([data-fit="no"]) {scroll-margin-top: calc(-16px - var(--period) * var(--hold, .5) * 1vh)}
/* M1: an anchor jump (#story, the hero CTA) lands at the end of the lead-in, so beat 01 and the TV are fully visible on arrival */
html.scenes [data-scene="tv"]:not([data-fit="no"]) {scroll-margin-top: calc(-16px - (var(--lead-vh) + 15) * 1vh)}
html.scenes [data-scene]:not([data-fit="no"]) .scene-h {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap}
html.scenes [data-scene]:not([data-fit="no"]) .pin {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: var(--stage-pad) var(--gutter);
  position: sticky; top: var(--head-h); background: var(--bg); transition: background-color .6s var(--ease); width: 100%;
  height: calc(100vh - var(--head-h)); height: calc(100svh - var(--head-h))}
html.scenes [data-scene]:not([data-fit="no"]) .stage {display: flex; justify-content: center; width: 100%; max-width: 1084px}
html.scenes [data-scene]:not([data-fit="no"]) .tv {display: grid; position: relative; background: #000; overflow: hidden; contain: paint; aspect-ratio: 16 / 9; border-radius: 4px; box-shadow: 0 0 0 8px #1b1e24;
  width: min(100%, calc((100vh - var(--head-h) - 2 * var(--stage-pad) - var(--copy-h) - 28px) * 16 / 9));
  width: min(100%, calc((100svh - var(--head-h) - 2 * var(--stage-pad) - var(--copy-h) - 28px) * 16 / 9))}
html.scenes [data-scene]:not([data-fit="no"]) .frame {grid-area: 1 / 1; border-radius: 0; box-shadow: none; aspect-ratio: auto; order: 0; --s: calc(var(--lead) + var(--i, 0) * var(--per));
  opacity: clamp(0, calc((var(--p, 0) - var(--s) + var(--rw) / 2) / var(--rw)), 1)}
html.scenes [data-scene]:not([data-fit="no"]) .frame:first-child {opacity: 1}
html.scenes [data-scene="tv"]:not([data-fit="no"]) .tv {opacity: clamp(0, calc(var(--p, 0) / var(--lead)), 1)}
html.scenes [data-scene]:not([data-fit="no"]) .frame figcaption {left: 12px; bottom: 10px}
html.scenes [data-scene]:not([data-fit="no"]) .beats {display: grid; width: 100%; max-width: 72ch; text-align: center}
html.scenes [data-scene]:not([data-fit="no"]) .beat {grid-area: 1 / 1; order: 0; margin: 0; pointer-events: none; padding: 0; --s: calc(var(--lead) + var(--i, 0) * var(--per));
  opacity: min(clamp(0, calc((var(--p, 0) - var(--s) - var(--rz)) / var(--rw)), 1), clamp(0, calc((var(--s) + var(--per) - var(--rz) - var(--p, 0)) / var(--rw)), 1))}
html.scenes [data-scene]:not([data-fit="no"]) .beat p:last-child {margin-bottom: 0}
html.scenes [data-scene]:not([data-fit="no"]) .ring {opacity: min(clamp(0, calc((var(--p, 0) - var(--s) - var(--per) * .125) / var(--rw)), 1), clamp(0, calc((var(--s) + var(--per) - var(--rz) - var(--p, 0)) / var(--rw)), 1))}
/* Statement scene (AM3): ONE cumulative beat. Lines reveal at 0-10%, 20-30%, 40-50% of the runway and stay. */
html.scenes [data-scene="statement"]:not([data-fit="no"]) .beats {max-width: none}
html.scenes :is([data-scene="statement"], [data-scene="steps"]):not([data-fit="no"]) .beat {opacity: 1}
html.scenes [data-scene="statement"]:not([data-fit="no"]) .line, html.scenes [data-scene="steps"]:not([data-fit="no"]) .steps-scene > li {opacity: clamp(0, calc((var(--p, 0) - var(--i, 0) * .2) / .1), 1)}
/* C2: a built cumulative stack can be selected and copied; there is nothing clickable in it. The cycling beats keep pointer-events: none. */
html.scenes :is([data-scene="statement"], [data-scene="steps"]):not([data-fit="no"]) .beat {pointer-events: auto; user-select: text}
html.scenes [data-scene="steps"]:not([data-fit="no"]) .beats {max-width: 880px; text-align: left}
html.scenes [data-scene="steps"]:not([data-fit="no"]) .steps-scene h3 {font: 700 clamp(1.5rem,3.6vw,2.6rem)/1.1 var(--display); letter-spacing: -.02em}
html.scenes [data-scene="steps"]:not([data-fit="no"]) .steps-scene > li {padding: 22px 0}
}
@media screen and (min-width: 360px) and (max-width: 699px) and (min-height: 560px) and (forced-colors: none) {
  html.scenes [data-scene]:not([data-fit="no"]) {--copy-h: 19rem}
}
@media screen and (min-width: 900px) and (min-height: 560px) and (forced-colors: none) {
html.scenes [data-scene="tv"]:not([data-fit="no"]) .rail {display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; position: absolute; right: 28px; top: 50%; transform: translateY(-50%)}
html.scenes [data-scene="tv"]:not([data-fit="no"]) .rail li {width: 10px; height: 10px; margin: 0; border-radius: 50%; border: 1px solid var(--faint); position: relative; --s: calc(var(--lead) + var(--i, 0) * var(--per))}
html.scenes [data-scene="tv"]:not([data-fit="no"]) .rail li::after {content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--accent);
  opacity: min(clamp(0, calc((var(--p, 0) - var(--s)) * 400), 1), clamp(0, calc((var(--s) + var(--per) - var(--p, 0)) * 400), 1))}
}
/* Movement (A2, B6): full motion only. Hero hand-off settle (scale .92 to 1) and the guide-beat zoom. will-change only while .zooming. */
@media screen and (min-width: 360px) and (min-height: 560px) and (forced-colors: none) {
html[data-motion="full"].scenes [data-scene="tv"]:not([data-fit="no"]) .tv {scale: calc(.92 + .08 * clamp(0, calc(var(--p, 0) / var(--lead)), 1))}
}
/* Zoom: 2.4% only. The capture's text runs edge to edge (the CHANNEL label starts 1.1% from the left, the last grid cell ends 1.8% from the right), so a bigger zoom clips UI text; origin 30% 50% keeps every glyph inside. */
@media screen and (min-width: 900px) and (min-height: 560px) and (forced-colors: none) {
html[data-motion="full"].scenes [data-scene="tv"]:not([data-fit="no"]) .frame[data-zoom] img {transform-origin: 30% 50%;
  transform: scale(calc(1 + .024 * clamp(0, calc((var(--p, 0) - var(--s)) / (var(--per) * .5)), 1)))}
html[data-motion="full"].scenes [data-scene="tv"]:not([data-fit="no"]).zooming .frame[data-zoom] img {will-change: transform}
}
/* Hand-off (D1, A4): the hero on /, the page-head on every other showcase page, stays in normal flow and fades on its own exit;
   :focus-within restores opacity so a focused link is never invisible. */
@media screen and (forced-colors: none) {
html.scenes [data-handoff] > .wrap {opacity: clamp(0, calc((.7 - var(--hp, 0)) / .4), 1)}
html.scenes [data-handoff] > .wrap:focus-within {opacity: 1}
/* B1-B3: fade-out of a showcase section as its bottom edge travels the last 20vh above the header. site.js writes --out; is-out drops the reveal transition so the fade tracks the thumb. */
html.scenes [data-fade].is-in {opacity: calc(1 - var(--out, 0))}
html.scenes [data-fade].is-out[data-reveal] {transition: none}
html.scenes [data-fade]:focus-within {opacity: 1}
}
}

/* Reduced motion (A2, A3): NO blanket animation:none. Colour and opacity may still transition (the fades the owner asked to keep);
   transform never transitions. The cross-document view transition keeps its default crossfade (.3s, opacity only). Zoom, scale and rise are dropped above. */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {transition-property: opacity, color, background-color, border-color, fill}
html[data-motion="reduce"] .btn:hover {transform: none}
@media print {
  html.js [data-reveal], html.scenes [data-fade].is-in {opacity: 1; transform: none}
}