/* Homepage V-Cinematic (owner brief 2026-10-19; docs/MOTION_SPEC.md). Loaded after pp.css on "/": pp.css gives the
   primitives (type tokens, buttons, queue, sheets, CSV grid, tiles, step UIs, FAQ), this file gives the stage, the light,
   the grain, the depth layers, the glass devices and every scene's END state (served: no JS = this). The START and MID
   keyframes of each scene live under html[data-k="start"] / html[data-k="mid"] (stills renderer; step 3 interpolates
   between the same values with GSAP). html.cn-desk = the desktop scene layouts (≥ 1024, set by motion.js and the
   renderer); html.cn-pins = sticky frames inside tall pin boxes (motion.js, never under reduced motion). */
.cine { --cn-max: 1200px; --cn-side: 24px; --cn-accent: #8b5cf6; --cn-accent-2: #a78bfa; --cn-violet: #5b21b6; --cn-deep: #4c1d95;
  --cn-h1: clamp(44px, 6vw, 96px); --cn-h2: clamp(32px, 4vw, 64px); --cn-lede: 19px; --cn-gap: clamp(48px, 8vw, 120px);
  --cn-glass: linear-gradient(115deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.03) 100%), linear-gradient(160deg, rgba(48,42,72,.78) 0%, rgba(24,22,36,.86) 42%, rgba(14,13,22,.92) 100%); --cn-glass-line: rgba(255,255,255,.14); --cn-r: 24px; --cn-ease: cubic-bezier(.16, 1, .3, 1); }
@media (max-width: 640px) { .cine { --cn-side: 16px; --cn-r: 20px; } }

/* ── stage, grain, light ── */
.cine main { background: linear-gradient(180deg, #000 0%, #000 70%, #0a0a0f 100%); }
/* the grain is its own file (it was 12 KB of the render-blocking stylesheet): it arrives after first paint */
.cine .cn-grain { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: .028; background: url(/revenue/assets/media/grain.ca436346e6.png) repeat; background-size: 96px 96px; }
@media (max-width: 640px) { .cine .cn-grain { opacity: .022; } }
@media (prefers-reduced-transparency: reduce) { .cine .cn-grain { display: none; } }
.cine main > section.cn-scene, .cine main > section.cn-scene:first-child { padding: 0; margin: 0; border: 0; background: transparent; position: relative; overflow: clip; }
.cine .cn-frame { position: relative; display: grid; align-items: center; overflow: clip; perspective: 1600px; isolation: isolate; padding-block: clamp(36px, 5.5vw, 76px); box-sizing: border-box; }
html[data-k] .cine .cn-frame { min-height: 100vh; padding-block: 0; }
.cine .cn-s1 .cn-frame { padding-top: 56px; padding-bottom: 24px; }
@media (max-width: 1023px) { .cine .cn-frame { perspective: 1200px; } }
.cine .cn-wrap { width: 100%; max-width: calc(var(--cn-max) + 2 * var(--cn-side)); margin: 0 auto; padding: 0 var(--cn-side); position: relative; z-index: 1; box-sizing: border-box; }
.cine .cn-light { position: absolute; left: 50%; top: 50%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(139,92,246,.95) 0%, rgba(124,77,240,.72) 18%, rgba(91,33,182,.48) 38%, rgba(76,29,149,.24) 60%, rgba(76,29,149,.08) 80%, rgba(76,29,149,0) 100%);
  opacity: var(--lo, .7); transform: translate(var(--lx, 0px), var(--ly, 0px)) scale(var(--ls, 1)); will-change: transform, opacity; }
@media (max-width: 1023px) { .cine .cn-light { width: 760px; height: 760px; margin: -380px 0 0 -380px; } }

/* ── type ── */
.cine .cn-h1 { margin: 0; font: 600 var(--cn-h1)/1.0 var(--pp-font); letter-spacing: -0.035em; color: #fff; text-wrap: balance; max-width: none; }
.cine .cn-h2 { margin: 0; font: 600 var(--cn-h2)/1.04 var(--pp-font); letter-spacing: -0.03em; color: #fff; text-wrap: balance; max-width: 16ch; }
.cine .cn-lede { margin: 20px 0 0; font: 400 var(--cn-lede)/1.5 var(--pp-font); color: var(--pp-grey); max-width: 34em; }
.cine .cn-lede b { color: #fff; font-weight: 500; }
.cine .cn-lede a, .cine .cn-cap a, .cine .cn-micro a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cn-accent); }
.cine .cn-cap { margin: 24px 0 0; color: var(--pp-grey); font-size: 14px; line-height: 22px; }
.cine .cn-cap b, .cine .cn-micro b { color: var(--pp-grey-2); font-weight: 500; font-family: var(--cite); font-size: 13px; }
.cine .cn-micro { margin: 24px auto 0; text-align: center; color: var(--pp-grey); font-size: 14px; line-height: 22px; }
.cine .cn-num { font: 600 clamp(72px, 14.4vw, 208px)/1 var(--pp-font); letter-spacing: -0.045em; color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .cine .cn-num { font-size: clamp(44px, 14vw, 64px); white-space: nowrap; } }
.cine .cn-head { display: grid; justify-items: center; text-align: center; max-width: 820px; margin: 0 auto 36px; }
.cine .cn-head .cn-lede { margin-inline: auto; }
.cine .cn-w { display: inline-block; will-change: auto; }
.cine .cn-copy { position: relative; }
.cine .cn-copy .cn-h2 { max-width: 14ch; }

/* ── glass: solid glass everywhere (measured 2026-10-19: 33 blurred surfaces = 118 dropped frames); real blur only on the nav and the hero device ── */
.cine .pp-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cn-glass); border: 1px solid var(--cn-glass-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(167,139,250,.28), 0 0 0 1px rgba(139,92,246,.10), 0 18px 36px -24px rgba(0,0,0,.85); }
/* faux glass: the reflection is the first layer of the fill (an overlay element per card doubled the raster work) */
.cine .cn-blur.pp-glass { -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); background: rgba(255,255,255,.055); }
.cine .cn-device { border-radius: var(--cn-r); border: 1px solid var(--cn-glass-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(167,139,250,.35), 0 0 0 1px rgba(139,92,246,.22), 0 70px 140px -50px rgba(0,0,0,.95), 0 40px 120px -40px rgba(139,92,246,.55); }
.cine .cn-device::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, transparent 32%, transparent 68%, rgba(255,255,255,.05) 100%); }
.cine .cn-device .pp-screen, .cine .cn-device .pp-bar { position: relative; z-index: 1; }

/* ── depth layers (parallax speeds .85 / 1 / 1.15, applied by GSAP; here they only name the layers) ── */
.cine .cn-fg, .cine .cn-prod, .cine .cn-bg { position: relative; }

/* ══ 1 · hero ══ */
.cine .cn-hero { text-align: center; display: grid; justify-items: center; padding-block: 12px 16px; }
.cine .cn-hero-copy { display: grid; justify-items: center; max-width: 980px; transform-origin: 50% 100%; }
.cine .cn-hero .cn-h1 { max-width: 20ch; }
.cine .cn-hero .cn-lede { max-width: 32em; margin: 16px auto 0; }
.cine .cn-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 0; }
.cine .cn-stage { width: min(1180px, 100%); margin: 32px auto 0; perspective: 1600px; }
.cine .cn-lid { transform-origin: 50% 100%; transform: rotateX(0) scale(1); will-change: transform; }
.cine .cn-dash { border-radius: 24px; }
.cine .cn-light-hero { --lx: 0px; --ly: 32%; --lo: .7; --ls: 1; }
.cine .cn-s1 .cn-micro { opacity: 1; margin-top: 14px; }
.cine .cn-dash .pp-screen { padding: 18px 20px; gap: 10px; } .cine .cn-dash .pp-row { padding: 9px 16px; } .cine .cn-dash .pp-tot { padding: 11px 14px; } .cine .cn-dash .pp-bar { height: 40px; }
html[data-k="start"] .cine .cn-lid { transform: rotateX(25deg) scale(.85); }
html[data-k="start"] .cine .cn-light-hero { --ly: 42%; --lo: .7; --ls: .95; }
html[data-k="start"] .cine .cn-s1 .cn-micro { opacity: 0; }
html[data-k="mid"] .cine .cn-lid { transform: rotateX(12deg) scale(.95); }
html[data-k="mid"] .cine .cn-hero-copy { transform: scale(.96) translateY(-24px); opacity: .6; }
html[data-k="mid"] .cine .cn-light-hero { --ly: 28%; --lo: .85; --ls: 1; }
html[data-k="mid"] .cine .cn-s1 .cn-micro { opacity: 0; }
html[data-k="end"] .cine .cn-lid { transform: rotateX(0) scale(1.05); }
html[data-k="end"] .cine .cn-hero-copy { transform: scale(.92) translateY(-48px); opacity: 0; }
html[data-k="end"] .cine .cn-light-hero { --ly: 20%; --lo: 1; --ls: 1.1; }
@media (max-width: 640px) { .cine .cn-stage { margin-top: 28px; } .cine .cn-btns .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; } .cine .cn-btns { gap: 10px; margin-top: 22px; width: 100%; } .cine .cn-hero .cn-lede { margin-top: 12px; } .cine .cn-s1 .pp-tot { padding: 10px 12px; } .cine .cn-s1 .pp-tot-v { font-size: 20px; line-height: 26px; } .cine .cn-s1 .pp-cov { display: none; } .cine .cn-hero .cn-lede { font-size: 16px; line-height: 24px; }
  html[data-k="start"] .cine .cn-lid { transform: rotateX(18deg) scale(.92); } html[data-k="end"] .cine .cn-lid { transform: none; } }

/* ══ 2 + 3 · six places, the trace: the arc ══ */
.cine .cn-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: center; }
.cine .cn-stagewrap { display: grid; grid-template-rows: auto auto; row-gap: 28px; align-content: center; }
.cine .cn-stagewrap .cn-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: 32px; }
.cine .cn-stagewrap .cn-copy .cn-h2 { max-width: 14ch; grid-row: 1 / 3; }
.cine .cn-stagewrap .cn-cap { grid-column: 2; margin: 8px 0 0; }
.cine .cn-field-wrap { position: relative; }
.cine .cn-field { position: relative; width: 100%; max-width: 1200px; height: 330px; margin: 0 auto; perspective: 1600px; transform-style: preserve-3d; }
.cine .cn-sheet-pos { position: absolute; left: 50%; top: 50%; width: 300px; margin: -138px 0 0 -150px; z-index: calc(var(--i) + 1); transform: translate(var(--x), var(--y)) translateZ(var(--z)) rotateY(var(--r)); opacity: 1; will-change: transform, opacity; transform-origin: 50% 50%; }
.cine .cn-sheet-pos:nth-child(1) { --x: -480px; --y: 20px; --r: 32deg; --z: -120px; }
.cine .cn-sheet-pos:nth-child(2) { --x: -288px; --y: 6px; --r: 20deg; --z: -50px; }
.cine .cn-sheet-pos:nth-child(3) { --x: -96px; --y: 0px; --r: 7deg; --z: 0px; }
.cine .cn-sheet-pos:nth-child(4) { --x: 96px; --y: 0px; --r: -7deg; --z: 0px; }
.cine .cn-sheet-pos:nth-child(5) { --x: 288px; --y: 6px; --r: -20deg; --z: -50px; }
.cine .cn-sheet-pos:nth-child(6) { --x: 480px; --y: 20px; --r: -32deg; --z: -120px; }
.cine .cn-sheet { padding: 16px; border-radius: 16px; }
.cine .cn-sheet .pp-sh li { height: auto; min-height: 36px; }
/* the arc at rest (QA 2026-10-20, 1440): the sheets overlap by design, so each is OPAQUE (the faux glass let the sheet behind
   print through) and they stack in a flat context by z-index, centre on top — in a shared 3D context the two centre sheets
   (±7°) intersected and each printed over the other's title and rows */
.cine .cn-field { transform-style: flat; }
.cine .cn-sheet.pp-glass { background: linear-gradient(180deg, #1b1b23 0%, #131319 100%); }
.cine .cn-sheet-pos:nth-child(1), .cine .cn-sheet-pos:nth-child(6) { z-index: 1; }
.cine .cn-sheet-pos:nth-child(2), .cine .cn-sheet-pos:nth-child(5) { z-index: 2; }
.cine .cn-sheet-pos:nth-child(3) { z-index: 3; } .cine .cn-sheet-pos:nth-child(4) { z-index: 4; }
/* right of centre the sheet to the left covers each sheet's left edge: the title row reads from the right there */
.cine .cn-sheet-pos:nth-child(n+5) .pp-sh-t { flex-direction: row-reverse; } .cine .cn-sheet-pos:nth-child(n+5) .pp-sh-f { text-align: right; }
.cine .cn-files { list-style: none; margin: 12px 0 0; padding: 0; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; font: 400 12px/16px var(--cite); color: var(--pp-grey); opacity: .6; }
.cine .cn-swap { position: relative; display: grid; gap: 6px; }
.cine .cn-swap-l { margin: 0; }
html.cn-pins .cine .cn-swap, html[data-k] .cine .cn-swap { display: block; min-height: 64px; }
html.cn-pins .cine .cn-swap-l, html[data-k] .cine .cn-swap-l { position: absolute; left: 0; right: 0; top: 0; }
html[data-k] .cine .cn-swap-l { opacity: 0; transform: translateY(-18px); } html[data-k] .cine .cn-swap-l:last-child { opacity: 1; transform: none; }
.cine .cn-light-places { --lx: -10%; --ly: 0px; --lo: .8; }
html[data-k="start"] .cine .cn-s2 .cn-sheet-pos { transform: translate(calc(var(--x) * .4), calc(var(--y) + 80px)) translateZ(-600px) rotateY(var(--r)); opacity: 0; }
html[data-k="start"] .cine .cn-s2 .cn-swap-l { opacity: 0; transform: translateY(18px); } html[data-k="start"] .cine .cn-s2 .cn-swap-l:first-child { opacity: 1; transform: none; }
html[data-k="start"] .cine .cn-s2 .cn-files { opacity: 0; }
html[data-k="start"] .cine .cn-light-places { --lx: 20%; --lo: .35; }
html[data-k="mid"] .cine .cn-s2 .cn-sheet-pos:nth-child(4) { transform: translate(calc(var(--x) * .7), calc(var(--y) + 30px)) translateZ(-200px) rotateY(var(--r)); opacity: .6; }
html[data-k="mid"] .cine .cn-s2 .cn-sheet-pos:nth-child(n+5) { transform: translate(calc(var(--x) * .4), calc(var(--y) + 80px)) translateZ(-600px) rotateY(var(--r)); opacity: 0; }
html[data-k="mid"] .cine .cn-s2 .cn-swap-l { opacity: 0; } html[data-k="mid"] .cine .cn-s2 .cn-swap-l:nth-child(2) { opacity: 1; transform: none; }
html[data-k="mid"] .cine .cn-s2 .cn-files { opacity: .4; }
html[data-k="mid"] .cine .cn-light-places { --lx: 0px; --lo: .6; }
/* the trace */
.cine .cn-trace-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; overflow: visible; }
.cine .cn-trace-glow { fill: none; stroke: rgba(139,92,246,.45); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; }   /* the glow is a wide soft stroke under the line: a drop-shadow filter re-rendered the whole overlay every frame */
.cine .cn-trace-solid, .cine .cn-trace-broken { fill: none; stroke: #c4b5fd; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cine .cn-trace-solid { stroke-dasharray: 1000; stroke-dashoffset: var(--off, 0); }
.cine .cn-trace-broken { stroke-dasharray: 6 10; stroke-width: 2; opacity: var(--bo, .9); }
.cine .cn-pulse { fill: #fff; transform-box: fill-box; transform-origin: center; }
.cine .cn-pulse-ring { fill: none; stroke: var(--cn-accent-2); stroke-width: 1.5; opacity: .35; }
.cine .cn-s3 .pp-sh li.is-ghost { opacity: var(--go, 1); }
.cine .cn-card { position: relative; width: 440px; margin: -12px auto 0; padding: 22px 28px; z-index: 12; transform-origin: 50% 0; border-color: rgba(167,139,250,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 80px rgba(139,92,246,.12), 0 0 0 1px rgba(139,92,246,.15), 0 0 120px -20px rgba(139,92,246,.7), 0 40px 100px -40px rgba(0,0,0,.9); }
.cine .cn-card .pp-fd-amt { font-size: 44px; } .cine .cn-s3 .cn-stagewrap { row-gap: 20px; } .cine .cn-s3 .cn-field { height: 300px; }
.cine .cn-stack-m { display: none; }
.cine .cn-light-trace { --lx: 10%; --ly: 10%; --lo: .95; --ls: 1.1; }
html[data-k="start"] .cine .cn-s3 .cn-trace-solid, html[data-k="mid"] .cine .cn-s3 .cn-trace-solid { --off: 1000; }
html[data-k="mid"] .cine .cn-s3 .cn-trace-solid { --off: var(--mid-off, 430); }
html[data-k="start"] .cine .cn-s3 .cn-trace-broken, html[data-k="mid"] .cine .cn-s3 .cn-trace-broken { --bo: 0; }
html[data-k="start"] .cine .cn-s3 .cn-pulse, html[data-k="start"] .cine .cn-s3 .cn-pulse-ring { opacity: 0; }
html[data-k="start"] .cine .cn-s3 .pp-sh li.is-ghost, html[data-k="mid"] .cine .cn-s3 .pp-sh li.is-ghost { --go: .25; }
html[data-k="start"] .cine .cn-card, html[data-k="mid"] .cine .cn-card { transform: rotateX(-90deg) translateY(-40px); opacity: 0; }
html[data-k="start"] .cine .cn-s3 .cn-swap-l, html[data-k="mid"] .cine .cn-s3 .cn-swap-l { opacity: 0; } html[data-k="start"] .cine .cn-s3 .cn-swap-l:first-child, html[data-k="mid"] .cine .cn-s3 .cn-swap-l:first-child { opacity: 1; transform: none; }
html[data-k="start"] .cine .cn-light-trace { --lx: -22%; --ly: 0px; --lo: .5; --ls: 1; }
html[data-k="mid"] .cine .cn-light-trace { --lx: -8%; --ly: 0px; --lo: .7; --ls: 1; }
@media (max-width: 1023px) {
  .cine .cn-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cine .cn-stagewrap .cn-copy { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .cine .cn-stagewrap .cn-copy .cn-h2 { grid-row: auto; } .cine .cn-stagewrap .cn-cap { grid-column: auto; }
  .cine .cn-copy { text-align: center; display: grid; justify-items: center; } .cine .cn-copy .cn-h2 { max-width: 16ch; }
  .cine .cn-swap { width: 100%; } html.cn-pins .cine .cn-swap, html[data-k] .cine .cn-swap { min-height: 84px; }
  /* the deck: six cards stacked, the last on top; the fanned end state shows six file tabs */
  .cine .cn-field { width: 326px; height: 330px; perspective: 1200px; }
  .cine .cn-sheet-pos { width: 326px; margin: -138px 0 0 -163px; --x: 0px; --r: 0deg; --z: 0px; --y: calc((5 - var(--i)) * -22px); transform: translate(0, var(--y)) scale(calc(1 - (5 - var(--i)) * .02)); }
  .cine .cn-field { max-width: 326px; }
  html[data-k="start"] .cine .cn-s2 .cn-sheet-pos { transform: translate(0, calc(var(--y) + 60px)) translateZ(-400px); opacity: 0; }
  html[data-k="mid"] .cine .cn-s2 .cn-sheet-pos:nth-child(4) { transform: translate(0, calc(var(--y) + 30px)) translateZ(-160px); opacity: .6; }
  html[data-k="mid"] .cine .cn-s2 .cn-sheet-pos:nth-child(n+5) { transform: translate(0, calc(var(--y) + 60px)) translateZ(-400px); opacity: 0; }
  .cine .cn-files { display: none; }
  .cine .cn-s3 .cn-field, .cine .cn-trace-svg { display: none; }
  .cine .cn-stack-m { display: grid; gap: 10px; list-style: none; margin: 0 auto; padding: 0 0 0 28px; width: 326px; position: relative; counter-reset: none; }
  .cine .cn-stack-m::before { content: ''; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; background: var(--cn-accent-2); box-shadow: 0 0 10px rgba(139,92,246,.9); transform-origin: top; transform: scaleY(var(--draw, 1)); }
  .cine .cn-stack-m li { position: relative; display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--cn-glass); border: 1px solid var(--cn-glass-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); font: 400 13px/18px var(--pp-font); color: var(--pp-grey); }
  .cine .cn-stack-m li::before { content: ''; position: absolute; left: -24px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: #c4b5fd; box-shadow: 0 0 12px rgba(167,139,250,.9); }
  .cine .cn-stack-m li.is-ghost { border: 1px dashed rgba(167,139,250,.6); color: var(--cn-accent-2); } .cine .cn-stack-m li.is-ghost::before { background: transparent; border: 1.5px solid var(--cn-accent-2); box-shadow: none; }
  .cine .cn-stack-f { color: #fff; font-weight: 500; font-family: var(--ui-sans); font-size: 12px; }
  html[data-k="start"] .cine .cn-stack-m { --draw: 0; } html[data-k="start"] .cine .cn-stack-m li { opacity: .3; }
  html[data-k="mid"] .cine .cn-stack-m { --draw: .5; } html[data-k="mid"] .cine .cn-stack-m li:nth-child(n+3) { opacity: .3; }
  .cine .cn-card { width: min(440px, 100%); margin: 20px auto 0; padding: 20px; } }

/* ══ 4 · the zoom ══ */
.cine .cn-zoom-wrap { display: grid; justify-items: center; text-align: center; row-gap: 28px; }
.cine .cn-zoom-h { max-width: 18ch; }
.cine .cn-zoom { width: min(1160px, 100%); transform-origin: 91.7% 74.5%; transform: scale(var(--zs, 1)); will-change: transform; }
.cine .cn-zoom .pp-zoom { padding: 20px; max-width: none; }
.cine .cn-zoom .cn-row:not(.is-hit) { filter: blur(var(--rb, 0px)); opacity: var(--ro, 1); }
.cine .cn-zoom .pp-cell-hl { opacity: var(--ho, 1); }
.cine .cn-zoom-end { display: grid; justify-items: center; } .cine .cn-zoom-end .cn-num { display: none; } .cine .cn-zoom-end .cn-cap { margin-top: 12px; }
.cine .cn-zoom-cap { margin-top: 0; }
.cine .cn-light-zoom { --lo: .95; --ls: 1.15; }
html[data-k="start"] .cine .cn-zoom { --ho: 0; } html[data-k="start"] .cine .cn-zoom-end { opacity: 0; } html[data-k="start"] .cine .cn-light-zoom { --lo: .45; --ls: 1; }
html[data-k="mid"] .cine .cn-zoom { --zs: 1.9; --rb: 4px; --ro: .55; --ho: .6; } html[data-k="mid"] .cine .cn-zoom-end { opacity: 0; } html[data-k="mid"] .cine .cn-zoom-h { opacity: 0; } html[data-k="mid"] .cine .cn-light-zoom { --lo: .7; --ls: 1.05; }
html[data-k="end"] .cine .cn-zoom { --zs: 3.2; --rb: 10px; --ro: .25; }
html[data-k="end"] .cine .cn-zoom-end { position: absolute; left: 0; right: 0; top: 34%; transform: translateY(-50%); z-index: 3; row-gap: 18px; }
html[data-k="end"] .cine .cn-zoom-end .cn-num { display: block; text-shadow: 0 0 60px rgba(139,92,246,.6); } html[data-k="end"] .cine .cn-zoom-end .cn-zoom-cap { color: #fff; }
html[data-k="end"] .cine .cn-zoom-h { opacity: 0; }
@media (max-width: 760px) { .cine .cn-zoom { transform-origin: 83% 74%; } html[data-k="end"] .cine .cn-zoom { --zs: 2.6; } html[data-k="end"] .cine .cn-zoom-end { top: 30%; } html[data-k="end"] .cine .cn-zoom-end .cn-num { font-size: clamp(56px, 19vw, 80px); } }

/* ══ 5 · floor by floor ══ */
.cine .cn-floors-wrap { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; } .cine .cn-floors-wrap .cn-copy .cn-lede { margin-top: 12px; }
.cine .cn-bld { perspective: 1600px; display: grid; justify-items: center; }
.cine .cn-iso { width: 100%; max-width: 560px; height: auto; max-height: 72vh; overflow: visible; transform: rotateY(var(--ry, 0deg)); will-change: transform; }
.cine .cn-face { fill: rgba(139,92,246,.06); stroke: var(--cn-accent-2); stroke-width: 1.25; stroke-linejoin: round; }
.cine .cn-top { fill: rgba(139,92,246,.16); }
.cine .cn-pane { fill: none; stroke: rgba(167,139,250,.75); stroke-width: .9; }
.cine .cn-pane-lit { fill: rgba(167,139,250,.55); }
.cine .cn-lit { opacity: var(--fl, 1); }
.cine .cn-ground { fill: none; stroke: var(--cn-accent); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(139,92,246,.9)); }
html[data-k] .cine .cn-floor { transform-box: view-box; transform: scaleY(var(--fy, 1)); opacity: var(--fo, 1); }
.cine .cn-flabs { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 8px; }
.cine .cn-flab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "n v" "s t"; column-gap: 16px; padding: 8px 0 0; border-top: 1px solid rgba(255,255,255,.08); transform: translateX(var(--lx2, 0px)); opacity: var(--lo2, 1); }
.cine .cn-flab-n { grid-area: n; font: 500 15px/20px var(--pp-font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cine .cn-flab-v { grid-area: v; font: 600 18px/22px var(--pp-font); color: #fff; letter-spacing: -0.01em; text-align: right; }
.cine .cn-flab-s { font: 400 13px/18px var(--pp-font); color: var(--pp-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .cine .cn-flab-s:nth-child(2) { grid-area: s; } .cine .cn-flab-r { grid-area: t; text-align: right; }
.cine .cn-light-floors { --lx: -18%; --ly: -28%; --lo: .85; }
html[data-k="start"] .cine .cn-iso { --ry: -12deg; } html[data-k="mid"] .cine .cn-iso { --ry: 0deg; } html[data-k="end"] .cine .cn-iso { --ry: 12deg; }
html[data-k="start"] .cine .cn-floor { --fy: 0; --fo: 0; --fl: 0; } html[data-k="start"] .cine .cn-floor[style*="--i:0"] { --fy: .5; --fo: .8; }
html[data-k="start"] .cine .cn-flab { --lx2: 28px; --lo2: 0; } html[data-k="start"] .cine .cn-light-floors { --ly: 28%; --lo: .4; }
html[data-k="mid"] .cine .cn-floor[style*="--i:3"] { --fy: .5; --fo: .8; --fl: 0; } html[data-k="mid"] .cine .cn-floor[style*="--i:4"] { --fy: 0; --fo: 0; --fl: 0; }
html[data-k="mid"] .cine .cn-flab[style*="--i:3"], html[data-k="mid"] .cine .cn-flab[style*="--i:4"] { --lx2: 28px; --lo2: 0; } html[data-k="mid"] .cine .cn-light-floors { --ly: 0px; --lo: .65; }
@media (max-width: 1023px) { .cine .cn-floors-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; } .cine .cn-iso { max-width: 326px; max-height: 46vh; } .cine .cn-flabs { width: 100%; max-width: 420px; gap: 4px; margin-top: 10px; } .cine .cn-flab { padding-top: 6px; grid-template-areas: "n v"; grid-template-columns: minmax(0, 1fr) auto; } .cine .cn-flab-s { display: none; } .cine .cn-floors-wrap .cn-copy .cn-lede { display: none; } .cine .cn-floors-wrap .cn-copy .cn-cap { margin-top: 12px; }
  html[data-k="start"] .cine .cn-iso { --ry: -8deg; } html[data-k="end"] .cine .cn-iso { --ry: 8deg; } }

/* ══ 6 · bento ══ */
.cine .cn-bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; perspective: 1600px; }
.cine .cn-tile { padding: 22px 24px; grid-column: span 2; display: grid; align-content: start; gap: 6px; transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--tr, 0deg)) scale(var(--ts, 1)); opacity: var(--to, 1); will-change: transform, opacity; text-align: left; }
.cine .cn-tile:nth-child(1), .cine .cn-tile:nth-child(2) { grid-column: span 3; }
.cine .cn-tile:nth-child(1) { --dx: -240px; --dy: 90px; --dr: -9deg; } .cine .cn-tile:nth-child(2) { --dx: 260px; --dy: 70px; --dr: 7deg; } .cine .cn-tile:nth-child(3) { --dx: -300px; --dy: -60px; --dr: 5deg; } .cine .cn-tile:nth-child(4) { --dx: 40px; --dy: -110px; --dr: -6deg; } .cine .cn-tile:nth-child(5) { --dx: 300px; --dy: -80px; --dr: 8deg; }   /* scattered within the screen: tiles assemble in view, never from below the fold */
.cine .cn-mv { position: relative; margin: 12px 0 2px; height: 48px; opacity: var(--mo, 1); }
.cine .cn-mv-bars { display: flex; align-items: flex-end; gap: 8px; width: 160px; } .cine .cn-mv-bars i { flex: 1; height: 100%; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--cn-accent-2), var(--cn-accent)); transform-origin: bottom; transform: scaleY(var(--h)); opacity: .9; }
.cine .cn-mv-math { display: flex; align-items: center; gap: 12px; font: 500 18px/24px var(--pp-font); color: #fff; } .cine .cn-mv-math b { font-weight: 600; color: var(--cn-accent-2); font-size: 22px; } .cine .cn-mv-math .cn-eq { display: none; }
.cine .cn-mv-ret { display: grid; grid-template-columns: 1fr 1fr; align-items: end; font: 400 12px/16px var(--pp-font); color: var(--pp-grey); } .cine .cn-ret-track { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); margin-bottom: 10px; position: relative; } .cine .cn-ret-mark { position: absolute; left: calc(var(--rp, 100%) - 7px); top: 15px; width: 14px; height: 14px; border-radius: 50%; background: var(--cn-accent-2); box-shadow: 0 0 14px rgba(167,139,250,.9); } .cine .cn-mv-ret span:last-child { text-align: right; color: var(--cn-accent-2); }
.cine .cn-mv-ring { width: 56px; height: 56px; } .cine .cn-ring-bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 5; } .cine .cn-ring { fill: none; stroke: var(--cn-accent-2); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--rd, 39); } .cine .cn-mv-ring text { fill: #fff; font: 600 13px var(--pp-font); }
.cine .cn-mv-conf { width: 180px; } .cine .cn-cf { position: absolute; top: 4px; width: 120px; height: 40px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); display: grid; place-items: center; font: 500 13px/18px var(--pp-font); color: #fff; } .cine .cn-cf.b { left: var(--cfo, 48px); border-color: rgba(167,139,250,.5); color: var(--cn-accent-2); background: rgba(139,92,246,.12); }
.cine .cn-light-bento { --lo: .75; }
html[data-k="start"] .cine .cn-tile { --tx: var(--dx); --ty: var(--dy); --tr: var(--dr); --ts: .86; --to: .6; --mo: 0; } html[data-k="start"] .cine .cn-light-bento { --lx: -30%; --ly: 12%; --lo: .4; }
html[data-k="mid"] .cine .cn-tile:nth-child(n+4) { --tx: calc(var(--dx) * .5); --ty: calc(var(--dy) * .5); --tr: calc(var(--dr) * .5); --ts: .93; --to: .8; --mo: 0; } html[data-k="mid"] .cine .cn-light-bento { --lo: .6; }
html[data-k="start"] .cine .cn-mv-ring, html[data-k="mid"] .cine .cn-tile:nth-child(n+4) .cn-mv-ring { --rd: 100; } html[data-k="start"] .cine .cn-mv-bars i { transform: scaleY(0); } html[data-k="start"] .cine .cn-cf.b { --cfo: 0px; } html[data-k="start"] .cine .cn-ret-mark { --rp: 0%; }
@media (max-width: 900px) { .cine .cn-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cine .cn-tile, .cine .cn-tile:nth-child(1), .cine .cn-tile:nth-child(2) { grid-column: span 1; } .cine .cn-tile:last-child { grid-column: span 2; } .cine .cn-tile { --dx: calc(var(--dx) * .4); } }
@media (max-width: 560px) { .cine .cn-s6 .cn-frame { min-height: 0; padding-block: 32px; } .cine .cn-bento { grid-template-columns: minmax(0, 1fr); gap: 12px; } .cine .cn-tile:last-child { grid-column: span 1; } .cine .cn-tile { padding: 20px; } .cine .cn-mv { height: 44px; margin: 8px 0 0; } .cine .cn-tile .pp-tile-v { font-size: 34px; } .cine .cn-tile .pp-tile-t { font-size: 16px; line-height: 23px; } }

/* ══ 7 · how it works: the horizontal track (desktop) / a stack (phones, no JS) ══ */
.cine .cn-how-wrap { position: relative; }
.cine .cn-how-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 40px; }
.cine .cn-counter { display: none; position: relative; min-width: 220px; height: 28px; text-align: right; } html.cn-desk .cine .cn-counter { display: block; }
.cine .cn-ct { position: absolute; right: 0; top: 0; font: 500 15px/28px var(--pp-font); color: var(--pp-grey-2); white-space: nowrap; opacity: 0; } .cine .cn-ct b { color: var(--cn-accent-2); font-weight: 500; margin-right: 8px; } .cine .cn-ct:last-child { opacity: 1; }
.cine .cn-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.cine .cn-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; transform: scale(var(--ps, 1)); opacity: var(--po, 1); transform-origin: 50% 50%; }
.cine .cn-panel-ui { padding: 20px; }
.cine .cn-panel .pp-step-n { display: block; margin-bottom: 10px; }
.cine .cn-light-how { --lx: 20%; --lo: .7; }
html.cn-desk .cine .cn-track { display: flex; width: max-content; gap: 48px; padding-left: calc(50% - 460px); transform: translateX(var(--tx, -1936px)); will-change: transform; }
html.cn-desk .cine .cn-panel { width: 920px; grid-template-columns: 280px minmax(0, 1fr); align-items: center; gap: 36px; }
html.cn-desk .cine .cn-panel-ui { padding: 26px; } html.cn-desk .cine .cn-panel .pp-up li { height: 44px; font-size: 15px; } html.cn-desk .cine .cn-panel .pp-rev-v { font-size: 48px; } html.cn-desk .cine .cn-panel .pp-rev-k, html.cn-desk .cine .cn-panel .pp-draft-s { font-size: 16px; } html.cn-desk .cine .cn-panel .pp-draft-b, html.cn-desk .cine .cn-panel .pp-rev-s { font-size: 15px; line-height: 22px; }
html.cn-desk .cine .cn-panel:not(:nth-child(3)) { --ps: .92; --po: .5; }
html.cn-desk .cine .cn-panel .pp-h3 { font-size: 30px; line-height: 36px; }
html[data-k="start"] .cine .cn-track { --tx: 0px; } html[data-k="mid"] .cine .cn-track { --tx: -968px; }
html.cn-desk[data-k="start"] .cine .cn-panel:not(:nth-child(1)) { --ps: .92; --po: .5; } html.cn-desk[data-k="start"] .cine .cn-panel:nth-child(1) { --ps: 1; --po: 1; }
html.cn-desk[data-k="mid"] .cine .cn-panel:not(:nth-child(2)) { --ps: .92; --po: .5; } html.cn-desk[data-k="mid"] .cine .cn-panel:nth-child(2) { --ps: 1; --po: 1; }
html[data-k="start"] .cine .cn-ct { opacity: 0; } html[data-k="start"] .cine .cn-ct:first-child { opacity: 1; } html[data-k="mid"] .cine .cn-ct { opacity: 0; } html[data-k="mid"] .cine .cn-ct:nth-child(2) { opacity: 1; }
html[data-k="start"] .cine .cn-light-how { --lx: -24%; } html[data-k="mid"] .cine .cn-light-how { --lx: 0px; }
@media (max-width: 1023px) { .cine .cn-how-head { flex-direction: column; align-items: center; text-align: center; } .cine .cn-counter { display: none; }
  html[data-k="start"] .cine .cn-panel:not(:nth-child(1)), html[data-k="mid"] .cine .cn-panel:nth-child(3) { --ps: .92; --po: .5; } }

/* ══ 8 · trust: the exploded view ══ */
.cine .cn-trust-wrap { grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; }
.cine .cn-stack-wrap { position: relative; height: 540px; perspective: 1600px; }
.cine .cn-stack { position: absolute; left: 50%; top: 50%; width: 620px; height: 132px; margin: -66px 0 0 -310px; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateZ(var(--rz, 0deg)); will-change: transform; }
.cine .cn-slab { position: absolute; inset: 0; border-radius: 18px; display: grid; place-items: center; transform: translateZ(calc(var(--i) * var(--sep, 2px))); backface-visibility: hidden; }
.cine .cn-slab-t { font: 500 22px/28px var(--pp-font); color: #fff; letter-spacing: -0.01em; opacity: var(--st, 0); position: relative; z-index: 1; }
.cine .cn-slab-face { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 24px; text-align: center; font: 500 17px/24px var(--pp-font); color: #fff; opacity: var(--fr, 1); z-index: 1; }
/* the four titles exist while the slabs are apart (motion, stills); settled, the merged slab's face names all four */
.cine .cn-slab-t { display: none; } html.cn-pins .cine .cn-slab-t, html[data-k] .cine .cn-slab-t { display: block; }
.cine .cn-leaders { list-style: none; margin: 0; padding: 0; position: absolute; left: calc(50% + 300px); top: 50%; width: 220px; opacity: var(--le, 0); }
.cine .cn-leaders li { position: absolute; left: 0; top: calc((1.5 - var(--i)) * 78px - 12px); display: flex; align-items: center; gap: 10px; font: 500 15px/24px var(--pp-font); color: var(--pp-grey-2); white-space: nowrap; } .cine .cn-leaders i { display: block; width: 48px; height: 1px; background: rgba(167,139,250,.7); }
.cine .cn-controls { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; } .cine .cn-controls .pp-h3 { font-size: 18px; line-height: 24px; } .cine .cn-controls .pp-body { font-size: 16px; line-height: 24px; margin-top: 4px; }
.cine .cn-trust-end { margin-top: 24px; font-size: 16px; line-height: 25px; }
.cine .cn-light-trust { --lo: .85; --ly: 6%; }
html[data-k="start"] .cine .cn-stack { --rx: 58deg; --rz: -32deg; --sep: 110px; } html[data-k="start"] .cine .cn-slab { --st: 1; } html[data-k="start"] .cine .cn-slab[style*="--i:3"] { --fr: 0; } html[data-k="start"] .cine .cn-leaders { --le: 1; } html[data-k="start"] .cine .cn-trust-end { opacity: 0; } html[data-k="start"] .cine .cn-light-trust { --ly: -22%; --lo: .5; }
html[data-k="mid"] .cine .cn-stack { --rx: 40deg; --rz: -18deg; --sep: 50px; } html[data-k="mid"] .cine .cn-slab { --st: .45; } html[data-k="mid"] .cine .cn-slab[style*="--i:3"] { --st: 1; } html[data-k="mid"] .cine .cn-slab[style*="--i:3"] { --fr: 0; } html[data-k="mid"] .cine .cn-leaders { --le: .6; } html[data-k="mid"] .cine .cn-trust-end { opacity: 0; } html[data-k="mid"] .cine .cn-light-trust { --ly: 0px; --lo: .7; }
@media (max-width: 1023px) { .cine .cn-trust-wrap { grid-template-columns: minmax(0, 1fr); } .cine .cn-stack-wrap { height: 340px; perspective: 1200px; } .cine .cn-stack { width: 300px; height: 92px; margin: -46px 0 0 -150px; } .cine .cn-slab-t { font-size: 16px; } .cine .cn-slab-face { font-size: 13px; line-height: 18px; padding: 0 12px; } .cine .cn-leaders { display: none; }
  html[data-k="start"] .cine .cn-stack { --rx: 52deg; --rz: -26deg; --sep: 70px; } html[data-k="mid"] .cine .cn-stack { --rx: 34deg; --rz: -14deg; --sep: 34px; } .cine .cn-controls { text-align: left; } }

/* ══ 9 · pricing ══ */
.cine .cn-prices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; perspective: 1600px; }
.cine .cn-price { padding: 32px; display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; transform: translateY(var(--py, 0px)) rotateX(var(--prx, 0deg)); opacity: var(--pop, 1); transform-origin: 50% 100%; text-align: left; overflow: visible; }
.cine .cn-price.is-hot { border-color: rgba(167,139,250,.45); }
.cine .cn-ring-light { position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--a, 40deg), var(--cn-accent) 0 18%, transparent 30% 70%, var(--cn-accent-2) 82%, var(--cn-accent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: var(--rlo, 1); }
.cine .cn-price-foot { display: grid; justify-items: center; text-align: center; margin-top: 32px; } .cine .cn-price-foot .pp-promise { margin-top: 0; }
.cine .cn-light-pricing { --lx: -30%; --ly: 10%; --lo: .8; }
html[data-k="start"] .cine .cn-price { --py: 80px; --prx: 8deg; --pop: 0; --rlo: 0; } html[data-k="start"] .cine .cn-price-foot { opacity: 0; } html[data-k="start"] .cine .cn-light-pricing { --lx: 0px; --ly: 40%; --lo: .45; }
html[data-k="mid"] .cine .cn-price:nth-child(2) { --py: 40px; --prx: 4deg; --pop: .5; } html[data-k="mid"] .cine .cn-price:nth-child(3) { --py: 80px; --prx: 8deg; --pop: 0; } html[data-k="mid"] .cine .cn-price-foot { opacity: 0; } html[data-k="mid"] .cine .cn-light-pricing { --lx: -10%; --ly: 20%; --lo: .6; }
@media (max-width: 900px) { .cine .cn-prices { grid-template-columns: minmax(0, 1fr); } .cine .cn-price { padding: 24px; } }

/* ══ 10 · close ══ */
.cine .cn-close-wrap { display: grid; justify-items: center; text-align: center; }
.cine .cn-close-h { max-width: 18ch; font-size: clamp(38px, 6.4vw, 96px); }
.cine .cn-close .cn-btns { margin-top: 40px; }
.cine .cn-close-cap { margin-top: 18px; max-width: 60ch; } .cine .cn-fit { margin-top: 10px; color: rgba(255,255,255,.62); }
.cine .cn-light-close { width: 1600px; height: 1600px; margin: -800px 0 0 -800px; --ly: 38%; --lo: 1; --ls: 1.3; }
html[data-k="start"] .cine .cn-light-close { --ly: 78%; --lo: .3; --ls: 1; } html[data-k="start"] .cine .cn-s10 .cn-btns, html[data-k="start"] .cine .cn-close-cap { opacity: 0; transform: translateY(24px); }
html[data-k="mid"] .cine .cn-light-close { --ly: 58%; --lo: .7; --ls: 1.1; } html[data-k="mid"] .cine .cn-close-cap { opacity: 0; }
@media (max-width: 1023px) { .cine .cn-light-close { width: 1000px; height: 1000px; margin: -500px 0 0 -500px; } }

/* headline choreography keyframes (spec §0): start = every word in flight; mid = the second half landing */
html[data-k="start"] .cine .cn-scene .cn-w { opacity: 0; transform: translateY(40px); filter: blur(12px); }
html[data-k="mid"] .cine .cn-s1 .cn-w, html[data-k="mid"] .cine .cn-s10 .cn-w { opacity: 1; transform: none; filter: none; }
html[data-k="start"] .cine .cn-s1 .cn-w { opacity: 1; transform: none; filter: none; }   /* the hero headline is visible at 0 % of the scroll (its on-load entrance is a time sequence, spec §1) */
html[data-k="mid"] .cine .cn-scene:not(.cn-s1):not(.cn-s10) .cn-w-late { opacity: .5; transform: translateY(20px); filter: blur(6px); }
@media (max-width: 640px) { html[data-k="start"] .cine .cn-scene:not(.cn-s1) .cn-w { transform: translateY(30px); filter: blur(10px); } }

/* FAQ in flow */
.cine .cn-faq { padding-block: clamp(36px, 5.5vw, 76px); }
.cine .cn-faq .cn-head { margin-bottom: 36px; }
.cine .cn-faq .cn-cap { text-align: center; margin: 24px auto 0; }

/* pins (step 3): sticky frames in tall boxes, only under html.cn-pins (motion.js; never under reduced motion, never without JS) */
html.cn-pins .cine .cn-scene > .cn-pin > .cn-frame { position: sticky; top: 0; height: 100vh; min-height: 0; padding-block: 64px 0; }
html.cn-pins .cine .cn-s1 > .cn-pin > .cn-frame { padding-top: 24px; }   /* the global bar scrolls away above the pin */
/* pin box = 100vh + the scene's travel; its timeline spans the whole travel (owner 2026-10-19) */
html.cn-desk .cine .cn-s1 > .cn-pin { height: 250vh; } html.cn-desk .cine .cn-s5 > .cn-pin { height: 350vh; }
html.cn-desk .cine .cn-s2 > .cn-pin, html.cn-desk .cine .cn-s3 > .cn-pin, html.cn-desk .cine .cn-s8 > .cn-pin { height: 300vh; }
html.cn-desk .cine .cn-s4 > .cn-pin { height: 250vh; } html.cn-desk .cine .cn-s6 > .cn-pin { height: 260vh; } html.cn-desk .cine .cn-s7 > .cn-pin { height: 320vh; }
html.cn-desk .cine .cn-s9 > .cn-pin, html.cn-desk .cine .cn-s10 > .cn-pin { height: 240vh; }

/* phones, the trace: the headline, the four records and the card in one viewport */
html.cn-touch .cine .cn-s3 .cn-stagewrap { row-gap: 14px; } html.cn-touch .cine .cn-s3 .cn-swap { display: none; } html.cn-touch .cine .cn-stack-m { gap: 6px; } html.cn-touch .cine .cn-stack-m li { padding: 8px 12px; }
html.cn-touch .cine .cn-s3 .cn-card { margin-top: 12px; padding: 16px 18px; } html.cn-touch .cine .cn-s3 .cn-card .pp-fd-amt { font-size: 36px; } html.cn-touch .cine .cn-s3 .cn-card .pp-fd-t { margin-top: 8px; font-size: 15px; line-height: 21px; }
html.cn-touch .cine .cn-s5 .cn-iso { max-height: 40vh; }
/* the zoom's end overlay sits over the pushed-in cell only while pinned */
html.cn-pins .cine .cn-zoom-end { position: absolute; left: 0; right: 0; top: 34%; transform: translateY(-50%); z-index: 3; row-gap: 18px; }
html.cn-pins .cine .cn-zoom-end .cn-num { display: block; text-shadow: 0 0 60px rgba(139,92,246,.6); } html.cn-pins .cine .cn-zoom-end .cn-zoom-cap { color: #fff; }
html.cn-touch .cine .cn-zoom-end .cn-num { display: block; font-size: clamp(44px, 14vw, 64px); white-space: nowrap; position: relative; z-index: 3; }   /* one line at every phone width: a wrap during the count-up shifted the page */   /* phones: in flow under the zoom */
/* the hero, first paint: the light blooms up, the words rise out of blur (from a faint visible start, so the headline paints at once:
   the 600 ms rule and LCP), the dashboard rises tilted; desktop rests at 25°, phones at 18°, and the scroll finishes the gesture */
@media (prefers-reduced-motion: no-preference) {
  .cine .cn-light-hero { animation: cn-bloom .48s var(--cn-ease) backwards; }
  .cine .cn-s1 .cn-w { animation: cn-word .27s var(--cn-ease) backwards; animation-delay: calc(var(--i) * 35ms); }
  .cine .cn-s1 .cn-lede, .cine .cn-s1 .cn-btns { animation: cn-up .3s var(--cn-ease) .06s backwards; }
  .cine .cn-lid { animation: cn-lid .33s var(--cn-ease) .12s backwards; }
  /* the whole entrance settles by 480 ms after first paint: the 600 ms rule for the headline and CTAs, and a reader without
     JS (these are CSS, they run anyway) sees the finished hero by the time the page has loaded */
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) and (min-height: 820px) and (hover: hover) and (pointer: fine) { html:not([data-k]) .cine .cn-lid { transform: rotateX(30deg) scale(.8); } }
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) { html:not([data-k]) .cine .cn-lid { transform: rotateX(18deg) scale(.92); } }
@keyframes cn-bloom { from { opacity: 0; transform: translate(0, 60%) scale(.7); } }
@keyframes cn-word { from { opacity: .25; transform: translateY(40px); filter: blur(12px); } }
@keyframes cn-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes cn-lid { from { opacity: 0; transform: translateY(120px) rotateX(30deg) scale(.86); } }
/* count-ups (owner decision 2026-10-19): the final value is in the HTML; screen readers read the hidden copy */
.cine .cn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cine .cn-count-v { font-variant-numeric: tabular-nums; }
/* the assessment card's light: a rotating conic border while in view */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 40deg; }
@media (hover: hover) and (pointer: fine) { .cine .cn-price.is-on .cn-ring-light { animation: cn-spin 7s linear infinite; } }   /* phones: a still ring (the turning gradient repainted every frame) */
@keyframes cn-spin { to { --a: 400deg; } }
.cine .cn-magnet { will-change: transform; }
@media (prefers-reduced-motion: reduce) { html.cn-pins .cine .cn-scene > .cn-pin { height: auto; } html.cn-pins .cine .cn-scene > .cn-pin > .cn-frame { position: relative; height: auto; } .cine .cn-price .cn-ring-light { animation: none; } }

html.cn-desk .cine .cn-s6 .cn-head { margin-bottom: 24px; } html.cn-desk .cine .cn-s6 .cn-mv { height: 40px; margin: 8px 0 0; } html.cn-desk .cine .cn-s6 .pp-tile-t { font-size: 15px; line-height: 22px; margin-top: 6px; } html.cn-desk .cine .cn-s6 .pp-tile-v { font-size: 38px; }
html.cn-touch .cine .cn-s2 .cn-stagewrap .cn-cap { display: none; }


/* phones and tablets: the headline leads its drawing (floors, trust), so a scene never opens on a picture without its words */
@media (max-width: 1023px) { .cine .cn-floors-wrap .cn-copy, .cine .cn-trust-wrap .cn-copy { order: -1; } .cine .cn-trust-wrap .cn-stack-wrap { height: 124px; } html.cn-touch .cine .cn-trust-wrap .cn-stack-wrap, html[data-k] .cine .cn-trust-wrap .cn-stack-wrap { height: 300px; } }   /* settled: the one slab; with motion: room for the exploded stack */

/* the hero frame has its pinned geometry from first paint wherever motion.js will pin it (the same media conditions as
   cnDesk / cnTouch): switching pins on at boot then only makes it sticky, and nothing on screen moves (CLS) */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) and (min-height: 820px) and (hover: hover) and (pointer: fine) {
  html:not([data-k]) .cine .cn-s1 > .cn-pin > .cn-frame { height: 100vh; padding: 24px 0 0; } }

/* ══ Site-wide system (owner 2026-10-19, "Apple × Linear"): bands alternate #000 / #111114, purple the only accent, two-tone
   headings, statement lines that turn from grey to white as they are read, 28 px cards, shelves for card collections ══ */
.cine main { background: #000; }
.cine main > section:nth-of-type(odd) { background: #000; } .cine main > section:nth-of-type(even) { background: #111114; }
.cine .cn-h1 { font-weight: 600; letter-spacing: -0.03em; }
.cine .cn-h2 { font-weight: 600; letter-spacing: -0.03em; max-width: 20ch; }
.cine .cn-copy .cn-h2, .cine .cn-stagewrap .cn-copy .cn-h2 { max-width: 16ch; }
.cine .tt-b { color: #86868b; }   /* the second tone: 6.3:1 on #000, 5.7:1 on #111114 (AA) */
.cine .sys-say { color: #fff; } .cine .sys-say-2 { margin: 24px 0 0; font: 600 clamp(24px, 2.4vw, 34px)/1.15 var(--pp-font); letter-spacing: -0.02em; max-width: 22ch; }
.cine .cn-tile, .cine .cn-price, .cine .cn-card, .cine .cn-panel-ui, .cine .pp-faq-list, .cine .cn-dash, .cine .cn-zoom .pp-zoom { border-radius: 28px; }
.cine .pp-body, .cine .cn-lede { font-size: 19px; line-height: 1.5; }
@media (max-width: 640px) { .cine .pp-body, .cine .cn-lede { font-size: 18px; } }
/* shelves: a card collection that scrolls sideways (phones swipe); the bento is one on phones */
@media (max-width: 560px) {
  .cine .cn-bento.sys-shelf { display: flex; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--cn-side)); padding: 4px var(--cn-side) 12px; scrollbar-width: none; }
  .cine .cn-bento.sys-shelf::-webkit-scrollbar { display: none; }
  .cine .cn-bento.sys-shelf > .cn-tile, .cine .cn-bento.sys-shelf > .cn-tile:last-child { flex: 0 0 84%; scroll-snap-align: start; grid-column: auto; }
}
/* desktop: pinned scenes keep the floating pill's band (74–126 px) clear */
html.cn-desk .cine .cn-scene:not(.cn-s1) > .cn-pin > .cn-frame { padding-top: 84px; }   /* the docked pill's band: 12 + 52 + 20 */
html.cn-desk .cine .cn-s6 .cn-head .cn-lede { display: none; } html.cn-desk .cine .cn-s6 .cn-head { margin-bottom: 20px; }
/* phones: the building scene in one screen */
/* phones: the CO log keeps four columns (row, CO #, Description, CO Amount); with five, Description got ~28 px and broke one
   letter per line (QA 2026-10-20, 390) */
@media (max-width: 760px) { .cine .pp-csv-r { grid-template-columns: 34px 58px minmax(0, 1fr) 96px; } .cine .pp-csv-r .pp-cell:nth-child(8) { display: none; } }
html.cn-touch .cine .cn-s5 .cn-iso { max-height: 30vh; } html.cn-touch .cine .cn-s5 .cn-cap { display: none; } html.cn-touch .cine .cn-s5 .sys-say-2 { margin-top: 14px; font-size: 22px; }

/* display numbers: General Sans, tabular (owner 2026-10-19: no monospace for figures) */
.cine .num, .cine .pp-tot-v, .cine .pp-row-a, .cine .pp-fd-amt, .cine .pp-tile-v, .cine .pp-price-v, .cine .cn-num, .cine .cn-flab-v, .cine .pp-rev-v, .cine .cn-mv-math, .cine .pp-sh li span:last-child, .cine .pp-cell.num { font-family: var(--pp-font); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: -0.01em; }
/* no truncation anywhere: labels wrap (two lines at most by length), nothing ends in an ellipsis */
.cine .pp-row-t, .cine .pp-tot-k, .cine .pp-crumb, .cine .pp-sh-f, .cine .pp-sh li span, .cine .cn-flab-n, .cine .cn-flab-s, .cine .pp-cell, .cine .pp-up li span:first-child, .cine .cn-stack-f { white-space: normal; text-overflow: clip; overflow: visible; overflow-wrap: anywhere; }
.cine .pp-sh li { height: auto; min-height: 36px; padding-block: 6px; line-height: 16px; } .cine .pp-sh-t { height: auto; align-items: flex-start; }
.cine .pp-cell { height: auto; min-height: 40px; padding-block: 8px; line-height: 16px; }
.cine .pp-draft-b { display: block; -webkit-line-clamp: unset; overflow: visible; }
.cine .cn-flab-n { white-space: normal; }
html.cn-desk .cine .cn-s5 .cn-flabs { gap: 2px; margin-top: 12px; } html.cn-desk .cine .cn-s5 .sys-say-2 { margin-top: 16px; } html.cn-desk .cine .cn-s5 .cn-cap { margin-top: 12px; }
@media (max-height: 880px) { html.cn-desk .cine .cn-s5 .cn-copy .cn-lede { display: none; } }