/* 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)}
/* The Status block reads with the FAQ above it: a short gap, no second divider. */
#faq {padding-bottom: clamp(32px, 5vw, 56px)}
#notify {border-top: 0; padding-top: 0}
.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; isolation: isolate; 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}
.frame.themes picture {display: block; width: 100%; height: 100%}
.frame.themes picture + picture {position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease)}
html[data-theme="cinema"] .frame.themes picture:nth-of-type(2), html[data-theme="editorial"] .frame.themes picture:nth-of-type(2), html[data-theme="editorial"] .frame.themes picture:nth-of-type(3) {opacity: 1}
.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 {--tvk: max(clamp(0, calc(var(--p, 0) / var(--lead)), 1), var(--e, 0)); opacity: var(--tvk)}
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 :is([data-scene="tv"], [data-scene="premium"]):not([data-fit="no"]) .beat:first-child {opacity: min(max(clamp(0, calc((var(--p, 0) - var(--s) - var(--rz)) / var(--rw)), 1), var(--e, 0)), clamp(0, calc((var(--s) + var(--per) - var(--rz) - var(--p, 0)) / var(--rw)), 1))}
html.scenes :is([data-scene="tv"], [data-scene="premium"]):not([data-fit="no"]) .beat:last-child {opacity: clamp(0, calc((var(--p, 0) - var(--s) - var(--rz)) / 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)}
/* Entry: site.js writes --e (0-1) per scene so its first content fades in while the hand-off fades out (no blank screen). */
html.scenes :is([data-scene="statement"], [data-scene="steps"]):not([data-fit="no"]) .line:first-child, html.scenes [data-scene="steps"]:not([data-fit="no"]) .steps-scene > li:first-child {opacity: max(clamp(0, calc(var(--p, 0) / .1), 1), var(--e, 0))}
/* 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 * var(--tvk))}
}
/* 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 (added once the scrub is below the running reveal) hands opacity to the scrub and drops the reveal transition, so the fade tracks the thumb and the reveal never jumps up. */
html.scenes [data-fade].is-out:where(.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}
}