/* polyxd.com home: one film, played by the scroll. Every scene reads --p (0 to 1) from home.js;
   without motion (reduced motion, a small screen, no script) --p falls back to each scene's
   still frame, set on its class below, and the scenes stack as ordinary sections. */

.home, .home main { overflow-x: clip; }
.scene, .hero { overflow-x: clip; }
.home .site-header { position: absolute; inset: 0 0 auto; z-index: 5; background: transparent; }
.link-btn { border: 0; background: none; padding: 10px 0; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; }
.chip { height: 40px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--ink); font: 500 14px/1 var(--font-body); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); }
.chip:hover { background: var(--surface); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: max(760px, 100svh); display: flex; align-items: center; overflow: hidden; padding: 120px 0 80px; }
.field { position: absolute; inset: 0; width: 100%; height: 100%; }
.field { background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1.3px, transparent 1.6px); background-size: 11px 11px; }
.field.field-live { background: none; }
/* The shader keeps the words clear by itself (home.js hands it every line of text, and the dots
   part around them). Without WebGL the static dot pattern needs this wash instead. */
.hero-wash { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, var(--ground) 0, transparent 110px),
  radial-gradient(ellipse 46% 62% at 22% 52%, var(--ground) 30%, color-mix(in srgb, var(--ground) 70%, transparent) 60%, transparent 85%); }
.field-live ~ .hero-wash { display: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 26px; max-width: 640px; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; }
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 9px; background: var(--signal); }
.hero-title { margin: 0; font-size: clamp(56px, 7.4vw, 112px); line-height: .95; text-wrap: balance; }
.hero-lead { margin: 0; max-width: 34ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: var(--ink); }
.ask { display: flex; align-items: center; gap: 12px; height: 64px; padding: 8px 8px 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); max-width: 580px; }
/* One focus state for the whole bar: its border deepens to a 2px ink line. The input inside
   draws nothing of its own, so no second ring appears inside the first. */
.ask { transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.ask-line { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; font: 500 18px var(--font-body); white-space: nowrap; overflow: hidden; }
.ask-caret { flex-shrink: 0; width: 2px; height: 22px; margin-left: 2px; border-radius: 1px; background: var(--signal); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chip.is-current:not([aria-pressed="true"]) { border-color: var(--ink); }
.ask .btn:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 600px; }

.hero-stage { position: relative; height: 740px; --ph: min(560px, 68svh); --pw: calc(var(--ph) * .4816); }
.hero-mark { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; transform-origin: 0 0; transition: transform 640ms var(--ease-standard); }
.hero-mark .pxb-mark { width: 100%; height: 100%; }
.asking .hero-mark { transform: translate(calc(-1 * min(260px, 50%) + 160px), -210px) scale(.18); }
.stage-status { position: absolute; left: calc(50% - min(260px, 50%) + 68px); top: 12px; margin: 0; padding: 6px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ground) 94%, transparent); font: 500 13px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.stage-status:empty { display: none; }
.answers { position: absolute; left: 50%; top: 72px; width: min(520px, 100%); height: var(--ph); transform: translateX(-50%); }
.answer[hidden], .ask-reset[hidden] { display: none; }
.answer { position: relative; margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; animation: rise 520ms var(--ease-standard) both; }
.answer.pending { visibility: hidden; animation: none; }
.answer .phone-wrap { padding-bottom: 0; }
.answer { --phone-h: var(--ph); }
.answer-screen { width: 100%; display: flex; justify-content: center; }
.answer-browser .browser { width: 100%; }
.answer figcaption { max-width: min(560px, 90vw); display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.answer-score { color: var(--muted); }
.answer figcaption a { font-weight: 600; color: var(--signal-text); }
.ask-reset { position: absolute; left: 50%; top: calc(72px + var(--ph) + 50px); transform: translateX(-50%); white-space: nowrap; }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; display: flex; align-items: center; gap: 8px; font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Scenes ---------- */
.scene { position: relative; border-top: 1px solid var(--rule); }
.stick { position: relative; padding: 96px 0; }
.motion .scene { height: calc(var(--len) * 100svh); }
.motion .stick { position: sticky; top: 0; height: 100svh; padding: 0; display: flex; align-items: center; overflow: hidden; }
.scene-inner { position: relative; width: 100%; display: flex; flex-direction: column; gap: clamp(28px, 4vh, 56px); }
.scene-title { margin: 0; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.04; text-wrap: balance; max-width: 22ch; }
.scene-title.center { text-align: center; margin-inline: auto; }
/* A phone you could hold: a metal slab with real edge thickness (stacked layers in 3D), side
   buttons, the Dynamic Island, a status bar, a home indicator and a little glass glare. home.js
   turns it with --ry/--rx as a scene arrives; it is face-on whenever the travelling screen is in it. */
.phone-wrap { position: relative; perspective: 1800px; display: flex; justify-content: center; padding-bottom: 28px; }
.phone-wrap::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; height: 26px; transform: translateX(-50%) translateX(calc(var(--ry, 0deg) / 1deg * 2px)); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ink) 28%, transparent), transparent); filter: blur(6px); }
/* Every measure is a share of the phone's height (--h), in a real phone's proportions, so a small
   phone looks like the same device, not a different one. Set --phone-h on an ancestor to size it. */
.phone { --h: var(--phone-h, min(660px, 70svh)); position: relative; height: var(--h); aspect-ratio: .4816; padding: calc(var(--h) * .017); border-radius: calc(var(--h) * .083); box-sizing: border-box; transform-style: preserve-3d; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform 120ms linear;
  background: linear-gradient(135deg, #5C5A55 0%, #2B2A28 18%, #151514 50%, #2B2A28 82%, #4A4844 100%);
  box-shadow: inset 0 0 0 calc(var(--h) * .0015) rgba(255,255,255,.18), inset 0 0 0 calc(var(--h) * .004) #0B0B0A, inset 0 0 0 calc(var(--h) * .006) #1F1E1C; }
.phone-depth { position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d; pointer-events: none; }
.phone-depth b { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #3E3C38, #1A1918 30%, #1A1918 70%, #3E3C38); }
.phone-depth b:nth-child(1) { transform: translateZ(calc(var(--h) * -.0023)); } .phone-depth b:nth-child(2) { transform: translateZ(calc(var(--h) * -.0045)); }
.phone-depth b:nth-child(3) { transform: translateZ(calc(var(--h) * -.0068)); } .phone-depth b:nth-child(4) { transform: translateZ(calc(var(--h) * -.0091)); }
.phone-depth b:nth-child(5) { transform: translateZ(calc(var(--h) * -.0114)); } .phone-depth b:nth-child(6) { transform: translateZ(calc(var(--h) * -.0136)); }
.phone-depth b:nth-child(7) { transform: translateZ(calc(var(--h) * -.0159)); } .phone-depth b:nth-child(8) { transform: translateZ(calc(var(--h) * -.0182)); background: #111110; }
.phone-btn { position: absolute; width: calc(var(--h) * .0055); border-radius: calc(var(--h) * .003); background: linear-gradient(90deg, #4A4844, #1E1D1B); transform: translateZ(calc(var(--h) * -.009)); }
.phone-btn-power { right: calc(var(--h) * -.004); top: 26%; height: 11%; }
.phone-btn-vol1 { left: calc(var(--h) * -.004); top: 21%; height: 7%; }
.phone-btn-vol2 { left: calc(var(--h) * -.004); top: 30%; height: 7%; }
.phone-screen { position: relative; height: 100%; border-radius: calc(var(--h) * .066); overflow: hidden; background: #000; display: flex; flex-direction: column; transform: translateZ(.5px); }
.phone-status { position: relative; flex: 0 0 calc(var(--h) * .068); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--h) * .044) 0 calc(var(--h) * .052); background: var(--pxd-color-surface, var(--surface)); color: var(--ink); font: 600 calc(var(--h) * .0225)/1 var(--font-body); }
.phone-island { position: absolute; left: 50%; top: calc(var(--h) * .016); width: 33%; height: calc(var(--h) * .043); transform: translateX(-50%); border-radius: 999px; background: #000; }
.phone-icons { fill: currentColor; width: calc(var(--h) * .082); height: auto; }
.phone-view { --k: .72; position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--surface); }
/* The screen inside, laid out at a real phone's width and scaled to the display. */
.phone-view > .fit { position: absolute; left: 0; top: 0; width: 390px; height: calc(100% / var(--k)); transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden; }
.phone-home { position: absolute; left: 50%; bottom: calc(var(--h) * .011); width: 35%; height: calc(var(--h) * .0075); transform: translateX(-50%); border-radius: 99px; background: color-mix(in srgb, var(--ink) 80%, transparent); z-index: 7; }
.phone-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 7; background: linear-gradient(calc(115deg + var(--ry, 0deg) * 2), rgba(255,255,255,0) 30%, rgba(255,255,255,.14) 44%, rgba(255,255,255,0) 58%); mix-blend-mode: screen; }
.phone-view .pxd-frame, .browser-view .pxd-frame { height: 100%; overflow: auto; scrollbar-width: none; }
.fit-wide { width: 1024px; }
/* The desktop window: a plain frame with a hairline, the page's own bar, and room for a table. */
.browser { position: relative; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(20,20,19,.14), 0 24px 48px -24px rgba(20,20,19,.35); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #ECE9E2; border-bottom: 1px solid rgba(20,20,19,.1); }
.browser-bar i { width: 9px; height: 9px; border-radius: 9px; background: rgba(20,20,19,.2); }
.browser-url { flex: 1; margin: 0 24px 0 16px; height: 18px; border-radius: 9px; background: rgba(255,255,255,.8); font: 500 10px/18px var(--font-mono); color: var(--muted); text-align: center; }
.browser-view { --k: .5; position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.browser-view > .fit { position: absolute; left: 0; top: 0; height: calc(100% / var(--k)); transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden; }
.wipe-stack { position: absolute; inset: 0; }
.scene-check .phone-status, .phone-dark .phone-status, .phone-dark .phone-view { background: #161616; color: #F4F4F4; }
.scene-check .phone-view { background: #161616; }

/* The travelling phone: one device, fixed to the viewport, moved by home.js between the scenes'
   phones ([data-slot]) and turned in 3D on the way. It only exists while motion is on; the scenes'
   own phones are the still frames. */
.traveller { display: none; }
.motion .traveller.on { display: block; position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.traveller .phone-wrap { padding-bottom: 0; }
.traveller .phone-wrap::after { bottom: -28px; }
.traveller { --phone-h: 660px; }
.traveller .phone-view { background: var(--pxd-color-surface, #fff); }
.tv-app { position: absolute; inset: 0; opacity: var(--tv-app, 1); }
.tv-screen { position: absolute; inset: 0; clip-path: inset(0 0 calc((1 - var(--tv-c, 0)) * 100%) 0); opacity: var(--tv-o, 1); }
.tv-layer { --s: clamp(0, (var(--tv-u, 0) - var(--i) + .6) / .6, 1); position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--s)) * 100%) 0 0); }
.tv-layer .pxd-frame, .tv-dark .pxd-frame { height: 100%; }
.tv-dark { position: absolute; inset: 0; opacity: var(--tv-dark, 0); }
.tv-edge { --s: clamp(0, (var(--tv-u, 0) - var(--i) + .6) / .6, 1); position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 100% - 7px); width: 14px; background-image: radial-gradient(var(--signal) 3px, transparent 3.4px); background-size: 14px 14px; opacity: clamp(0, min(var(--s), 1 - var(--s)) * 14, 1); }
.tv-scan { position: absolute; left: 0; right: 0; height: 150px; top: calc(var(--tv-scan, 0) * 100% - 150px); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--signal) 20%, transparent) 94%, var(--signal)); opacity: var(--tv-scan-o, 0); }
.traveller .phone-status { transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); }
.traveller.is-dark .phone-status, .traveller.is-dark .phone-view { background: #161616; color: #F4F4F4; }
.tv-rest { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0C0C0C; opacity: var(--tv-f, 0); }
.tv-dust { position: absolute; left: 11px; top: 56px; width: 296px; height: 592px; pointer-events: none; }
.tv-dust i { position: absolute; width: 7px; height: 7px; border-radius: 9px; background: var(--signal); opacity: var(--tv-do, 0); transform: translate(calc(var(--tv-q, 0) * var(--tv-q, 0) * var(--dx) * 1px), calc(var(--tv-q, 0) * var(--dy) * 1px)); }
.tv-dust i.ink { background: var(--ink); }
/* While it travels, the scenes' own phones step aside; their places stay, as the path. */
.motion.travelling .slot-wrap { visibility: hidden; }
.pxd-frame { background: var(--pxd-color-surface, #fff); }

/* 05 · The gap */
.scene-gap { --p: 1; --a: clamp(0, (var(--p) - .04) / .18, 1); --b: clamp(0, (var(--p) - .28) / .18, 1); --c: clamp(0, (var(--p) - .48) / .44, 1); }
.gap-line2 { display: block; color: var(--signal-text); opacity: var(--b); }
.scene-gap .scene-title { max-width: 26ch; font-size: clamp(34px, 3.6vw, 54px); }
.gap-phone { --phone-h: min(600px, 60svh); }
.chat { height: min(560px, 56svh); }
.gap-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: start; }
.gap-phone, .gap-chat { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.gap-app { position: absolute; inset: 0; padding: 16px; box-sizing: border-box; background: var(--surface); }
.traveller .gap-app { --a: var(--tv-ga, 0); --b: var(--tv-gb, 0); }
.gap-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; opacity: calc(1 - var(--b) * .6); filter: grayscale(var(--b)); }
.gap-tiles span { height: 78px; padding: 12px; border-radius: 18px; background: var(--ground); font-size: 13px; font-weight: 600; box-sizing: border-box; }
.gap-stamp { position: absolute; left: 50%; top: 42%; width: 200px; height: 58px; margin-left: -100px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--signal-text); border-radius: var(--radius-pill); background: var(--surface); color: var(--signal-text); letter-spacing: .08em; text-transform: uppercase; font-size: 13px; opacity: var(--b); transform: scale(calc(1.15 - var(--b) * .15)); }
.gap-ask { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 14px 16px; border-radius: 20px; background: var(--ink); color: var(--ground); font-size: 15px; opacity: var(--a); transform: translateY(calc((1 - var(--a)) * 40px)); }
.chat { position: relative; padding: 28px; border-radius: 36px; border: 1px solid var(--rule); background: var(--surface); display: flex; flex-direction: column; gap: 16px; overflow: hidden; box-sizing: border-box; }
.chat::after { content: ""; position: absolute; inset: auto 0 0; height: 90px; background: linear-gradient(transparent, var(--surface)); }
.bubble { align-self: flex-end; padding: 12px 18px; border-radius: 20px; background: var(--ink); color: var(--ground); }
.gap-reply { padding: 20px 22px; border-radius: 22px; background: var(--ground); font-size: 17px; line-height: 1.65; clip-path: inset(0 0 calc((1 - var(--c)) * 100%) 0); }
.gap-chat { opacity: clamp(0, (var(--p) - .4) / .1, 1); }

/* 06 · The turn */
.scene-turn { --p: .96; --a: clamp(0, var(--p) / .22, 1); --b: clamp(0, (var(--p) - .24) / .22, 1); --c: clamp(0, (var(--p) - .5) / .36, 1); --d: clamp(0, (var(--p) - .88) / .1, 1); }
.turn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 360px); gap: 24px; align-items: center; justify-content: center; }
.turn-left { position: relative; height: 330px; max-width: 520px; width: 100%; justify-self: end; }
.turn-para { position: absolute; inset: 30px 0 auto; padding: 22px 24px; border-radius: 24px; background: color-mix(in srgb, var(--ink) 7%, var(--ground)); font-size: 17px; line-height: 1.65; opacity: calc(1 - var(--a)); filter: blur(calc(var(--a) * 8px)); }
.turn-dots { position: absolute; inset: 30px 0 60px; border-radius: 24px; background-image: radial-gradient(var(--signal) 2.6px, transparent 3px); background-size: 14px 14px; opacity: calc(var(--a) - var(--b)); transform: scale(calc(1 - var(--b) * .12)); }
.turn-json { position: absolute; inset: 0; margin: 0; padding: 26px; border-radius: 28px; background: #141413; color: #D9D5CC; font-size: 14px; line-height: 1.85; overflow: hidden; opacity: var(--b); clip-path: inset(0 0 calc((1 - var(--b)) * 100%) 0); }
.turn-line { height: 2px; background: var(--rule); }
.turn-line i { display: block; height: 100%; background: var(--signal); transform: scaleX(var(--c)); transform-origin: 0 50%; }
.turn-right { position: relative; display: flex; justify-content: center; }
.turn-halo { position: absolute; left: 50%; top: -14px; width: calc(min(660px, 70svh) * .4816 + 28px); height: calc(min(660px, 70svh) + 28px); transform: translateX(-50%); border-radius: 66px; background-image: radial-gradient(var(--signal) 1.8px, transparent 2.2px); background-size: 10px 10px; opacity: var(--d); }
.turn-screen { position: absolute; inset: 0; clip-path: inset(0 0 calc((1 - var(--c)) * 100%) 0); }
.turn-screen .pxd-frame, .turn-line { position: relative; }
.turn-check { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(calc((1 - var(--d)) * 10px)); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: var(--d); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.turn-rail { list-style: none; margin: 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--rule); position: relative; font-weight: 600; font-size: 15px; }
.turn-rail::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--signal); transform: scaleX(var(--p)); transform-origin: 0 50%; }
.turn-rail li { --s: clamp(0, (var(--p) - var(--at)) * 12, 1); color: color-mix(in srgb, var(--ink) calc(40% + var(--s) * 60%), var(--ground)); display: flex; align-items: center; gap: 8px; }
.turn-rail li::before { content: ""; width: 8px; height: 8px; border-radius: 9px; background: color-mix(in srgb, var(--signal) calc(var(--s) * 100%), var(--rule)); }

/* 07 · The wipe: the same document in each pack, revealed left to right */
.scene-wipe { --p: 0; --u: calc(var(--p) * (var(--n) - .6)); }
.wipe-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 56px; align-items: center; }
.wipe-copy { display: flex; flex-direction: column; gap: 22px; }
.wipe-names { position: relative; height: 1.1em; font: 400 clamp(48px, 5.6vw, 92px)/1 var(--font-display); letter-spacing: -.015em; overflow: hidden; }
/* One name at a time: the old one leaves upwards before the next rises into its place. */
.wipe-name { --s: clamp(0, (var(--u) - var(--i) + .42) / .16, 1); --e: clamp(0, (var(--u) - var(--j) + .58) / .16, 1); position: absolute; left: 0; top: .05em; display: flex; align-items: center; gap: .25em; white-space: nowrap; opacity: calc(var(--s) - var(--e)); transform: translateY(calc((1 - var(--s)) * 1em - var(--e) * 1em)); }
.wipe-name .ds-logo { --ds-logo: .7em; }
.wipe-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.wipe-tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: var(--radius-pill); border: 1px solid transparent; background: transparent; color: var(--muted); font: 600 14px var(--font-body); cursor: pointer; }
.wipe-tab:hover { color: var(--ink); }
.wipe-tab[aria-pressed="true"] { background: var(--surface); border-color: var(--rule); color: var(--ink); }
.wipe-more { margin: 0; color: var(--muted); }
.wipe-more a { color: var(--signal-text); }
.wipe-phone { justify-self: center; }
.wipe-layer { --s: clamp(0, (var(--u) - var(--i) + .6) / .6, 1); position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--s)) * 100%) 0 0); }
.wipe-layer .pxd-frame { height: 100%; }
.wipe-edge { --s: clamp(0, (var(--u) - var(--i) + .6) / .6, 1); position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 100% - 7px); width: 14px; background-image: radial-gradient(var(--signal) 3px, transparent 3.4px); background-size: 14px 14px; opacity: clamp(0, min(var(--s), 1 - var(--s)) * 14, 1); }

/* 08 · Checked, at night */
.scene-check { --p: 1; --d: clamp(0, (var(--p) - .82) / .12, 1); background: var(--ground); color: var(--ink); border-top: 0; }
.check-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr) minmax(0, 420px); gap: 48px; align-items: center; }
.check-phone { position: relative; }
.check-phone { --phone-h: min(600px, 64svh); }
.scene-check .pxb-mark[data-state] .pxb-pupil { opacity: calc(1 - var(--d)); }
.scene-check .pxb-mark .pxb-tick { stroke-dashoffset: calc(1 - var(--d)); }
.check-scan { position: absolute; left: 0; right: 0; height: 150px; top: calc(clamp(0, var(--p) / .8, 1) * 100% - 150px); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--signal) 20%, transparent) 94%, var(--signal)); opacity: calc(1 - var(--d)); pointer-events: none; }
.check-labels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; font: 400 15px var(--font-mono); }
.check-labels li { --s: clamp(0, (var(--p) - var(--at)) * 14, 1); display: flex; align-items: center; gap: 12px; opacity: var(--s); transform: translateX(calc((1 - var(--s)) * -14px)); }
.check-labels li::before { content: ""; width: 40px; height: 1px; background: var(--muted); }
.check-labels .check-agent { color: var(--signal); }
.check-labels .check-mark-row { --s: 1; opacity: 1; transform: none; margin-bottom: 8px; }
.check-labels .check-mark-row::before { display: none; }
.check-labels .check-agent::before { background: var(--signal); }
.check-stats { margin: 0; display: flex; flex-direction: column; }
.check-stats div { --s: clamp(0, (var(--p) - var(--at)) * 10, 1); display: flex; flex-direction: column-reverse; gap: 6px; padding: 24px 0; border-top: 1px solid var(--rule); opacity: calc(.25 + var(--s) * .75); }
.check-stats div:last-child { border-bottom: 1px solid var(--rule); }
.check-stats dt { color: var(--muted); font-size: 15px; }
.check-stats dd { margin: 0; font: 400 clamp(56px, 6vw, 92px)/1 var(--font-display); letter-spacing: -.015em; }
.check-stats div:first-child dd { color: var(--signal); }
.check-stats small { font-size: .45em; color: var(--muted); }

/* 09 · Gone when it’s done */
.scene-gone { --p: .86; --f: clamp(0, (var(--p) - .12) / .18, 1); --o: calc(clamp(0, (var(--p) - .08) / .12, 1) * (1 - clamp(0, (var(--p) - .5) / .45, 1))); --q: clamp(0, (var(--p) - .22) / .7, 1); --h1: clamp(0, (var(--p) - .5) / .15, 1); --h2: clamp(0, (var(--p) - .66) / .15, 1); }
.gone-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: center; min-height: 640px; }
.gone-phone { position: relative; }
.rest-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0C0C0C; opacity: var(--f); }
.rest-screen .pxb-mark { opacity: .9; }
.gone-screen { position: absolute; inset: 0; opacity: calc(1 - var(--f)); }
.gone-title { position: relative; margin: 0; font-size: clamp(44px, 5.6vw, 88px); line-height: 1.05; }
.gone-1, .gone-2 { display: block; }
.gone-1 { opacity: var(--h1); transform: translateY(calc((1 - var(--h1)) * 16px)); }
.gone-2 { color: var(--muted); opacity: var(--h2); transform: translateY(calc((1 - var(--h2)) * 16px)); }

/* 10 · The platform */
.platform-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 72px; align-items: center; }
.tools { list-style: none; margin: 32px 0 0; padding: 0; }
.tools button { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid var(--rule); background: none; text-align: left; font: 600 19px var(--font-body); color: var(--muted); cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), font-size var(--duration-base) var(--ease-standard); }
.tools button .ico-svg { color: var(--muted); transition: color var(--duration-fast) var(--ease-standard); }
.tools button[aria-pressed="true"] .ico-svg { color: var(--signal-text); width: 26px; height: 26px; }
.tools button[aria-pressed="true"] { color: var(--ink); font-size: 26px; }
.panel { min-height: min(600px, 70svh); max-height: 86svh; overflow: hidden; padding: 36px; border-radius: 40px; border: 1px solid var(--rule); background: var(--surface); box-sizing: border-box; display: flex; }
.tool-panel { display: flex; flex-direction: column; gap: 18px; width: 100%; animation: rise 420ms var(--ease-standard) both; }
.tool-panel[hidden] { display: none; }
.panel-title { margin: 0; font: 400 30px/1.15 var(--font-display); letter-spacing: -.015em; }
.panel-link { margin-top: auto; font-weight: 600; color: var(--signal-text); }
.term { margin: 0; padding: 24px; border-radius: 24px; background: #141413; color: #F3F1EC; font-size: 14px; line-height: 1.9; white-space: pre-wrap; }
.term em { font-style: normal; color: #FF6E40; }
.term .dim { color: #8A857B; }
.roles-table { display: flex; flex-direction: column; gap: 8px; }
.roles-table div { display: grid; grid-template-columns: 1.4fr 40px .6fr; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 18px; background: var(--ground); }
.roles-table i { width: 22px; height: 22px; border-radius: 7px; }
.roles-table span { font-weight: 600; text-align: right; }
.roles-table .fail { background: color-mix(in srgb, var(--signal) 10%, var(--surface)); }
.roles-table .fail span { color: var(--signal-text); }
.roles-table .fail span::after { content: " fails"; }
.formats { margin: 0; color: var(--muted); font-size: 13px; }
.shell-sketch { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--rule); border-radius: 24px; min-height: 260px; }
.shell-sketch > div { flex: 1; display: flex; gap: 12px; }
.shell-bar { height: 52px; border-radius: 14px; background: var(--ink); }
.shell-nav { width: 110px; border-radius: 14px; background: var(--ground); }
.shell-slot { flex: 1; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--signal); border-radius: 14px; color: var(--signal-text); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-style: normal; }
.shell-foot { height: 40px; border-radius: 12px; background: var(--ground); }
.wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.wall-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--rule); font-size: 13px; font-weight: 600; line-height: 1.2; }
.panel .wall-tile .ds-logo { --ds-logo: 26px !important; }
.wall-more { margin: 0; color: var(--muted); font-size: 14px; }
.wall-templates .wall-tile { background: var(--ground); }
.renderers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.renderers li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px; border-radius: 22px; border: 1px solid var(--rule); }
.renderers li svg { grid-row: span 2; }
.renderers b { font: 400 22px/1.15 var(--font-display); }
.renderers li > span { font-size: 12px; color: var(--muted); }
/* Icon chips, checklists and a small editor: the platform panels show rather than list. */
.chips-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-row li { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--rule); background: var(--ground); font-size: 13px; font-weight: 500; }
.chips-row.formats li { color: var(--ink); }
.cmd { margin: 0; font-size: 14px; }
.cmd .dim { color: var(--muted); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--ground); font-weight: 500; animation: rise 420ms var(--ease-standard) both; }
.checks li:nth-child(2) { animation-delay: 80ms; } .checks li:nth-child(3) { animation-delay: 160ms; } .checks li:nth-child(4) { animation-delay: 240ms; } .checks li:nth-child(5) { animation-delay: 320ms; }
.checks li > .ico-svg { color: var(--muted); }
.checks b { display: flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 99px; background: color-mix(in srgb, #1F9D55 14%, transparent); color: #1A8A4A; font: 500 12px var(--font-mono); }
[data-theme="dark"] .checks b, .checks b:where(:root[data-theme="dark"] *) { color: #6FD39A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .checks b { color: #6FD39A; } }
.editor-sketch { flex: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: 220px; border-radius: 22px; overflow: hidden; border: 1px solid var(--rule); }
.es-code { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #141413; }
.es-tab { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 400 12px var(--font-mono); color: #C9C4B9; }
.es-code i { display: block; width: var(--w); height: 8px; margin-left: calc(var(--in, 0) * 16px); border-radius: 4px; background: #3A3833; }
.es-code i:nth-of-type(3) { background: #FF6E40; opacity: .7; }
.es-previews { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--ground); }
.es-previews > span { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--rule); font-size: 13px; font-weight: 500; }
.es-previews .es-more { justify-content: center; border-style: dashed; color: var(--muted); background: none; }
.path-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px; background: var(--ground); border: 1px solid var(--rule); color: var(--ink); }
.licence { margin: 0; padding: 20px; border-radius: 22px; background: var(--ink); color: var(--ground); }

/* 11 · Who it’s for: a row that slides sideways as you scroll down */
.scene-roles { --p: 0; background: color-mix(in srgb, var(--ink) 5%, var(--ground)); }
.roles-track { display: flex; gap: 24px; padding-inline: var(--gutter); transform: translateX(calc(var(--p) * var(--travel, 0px) * -1)); }
.static .roles-track, :root:not(.motion) .roles-track { flex-wrap: wrap; transform: none; }
.role { flex: 0 0 min(420px, 80vw); display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 36px; background: var(--ground); text-decoration: none; color: var(--ink); box-sizing: border-box; }
.role h3 { margin: 6px 0 0; font: 400 30px var(--font-display); }
.role p { margin: 0; font-size: 17px; }
.role:hover h3 { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.role-art { height: 190px; border-radius: 24px; background: var(--surface); display: flex; align-items: center; justify-content: center; gap: 20px; }
.role-art b { color: var(--signal); font-size: 28px; font-weight: 400; }
.art-designers .one { width: 68px; height: 94px; border: 2px solid var(--ink); border-radius: 12px; }
.art-designers .many { display: grid; grid-template-columns: repeat(4, 22px); gap: 6px; }
.art-designers .many i { height: 30px; border-radius: 5px; background: var(--signal); }
.art-ds .swatches { display: flex; flex-direction: column; gap: 6px; }
.art-ds .swatches i { width: 56px; height: 18px; border-radius: 5px; background: #2F5BEA; }
.art-ds .swatches i:nth-child(2) { background: #151A24; } .art-ds .swatches i:nth-child(3) { background: #8A93A6; } .art-ds .swatches i:nth-child(4) { background: #E8ECF3; }
.art-ds .grid87 { width: 150px; height: 100px; background-image: radial-gradient(var(--ink) 3px, transparent 3.4px); background-size: 12.5px 12.5px; }
.art-eng { background: #141413; }
.art-eng .mono { font-size: 52px; color: #F3F1EC; }
.mini { width: 88px; height: 126px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; }
.mini i { height: 16px; border-radius: 5px; background: #ECE9E2; }
.mini i.go { margin-top: auto; border-radius: 99px; background: var(--signal); }
.art-product .lines { display: flex; flex-direction: column; gap: 7px; width: 120px; }
.art-product .lines i { height: 8px; border-radius: 4px; background: var(--rule); }

/* 12 · Demos */
.demos-home { border-top: 1px solid var(--rule); }
.demos-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.demo-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
/* Every device takes its size from its column, so a phone keeps a phone's proportions at any
   width: a phone column's width sets the phone's height, and the window's stage matches it. */
.demo-tile { display: flex; flex-direction: column; gap: 14px; min-width: 0; text-decoration: none; color: var(--ink); container-type: inline-size; }
.demo-shot { --ph: min(420px, calc((100cqw - 36px) / .4816)); display: flex; justify-content: center; align-items: flex-start; height: calc(var(--ph) + 56px); padding-top: 20px; border-radius: 32px; background: color-mix(in srgb, var(--ink) 4%, var(--ground)); overflow: hidden; box-sizing: border-box; }
.demo-shot { --phone-h: var(--ph); }
.demo-browser { --ph: min(420px, calc((100cqw / 2 - 36px) / .4816)); align-items: center; padding: 0 clamp(12px, 3cqw, 28px); }
.demo-browser .browser { width: 100%; }
.demo-meta { display: flex; flex-direction: column; gap: 6px; }
.demo-meta b { font-size: 19px; }
.demo-meta .ds-name { color: var(--muted); font-size: 15px; }
.demo-tile:hover b { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* The invitation */
.cta-home { padding: clamp(80px, 12vh, 140px) 0; border-top: 1px solid var(--rule); text-align: center; }
.cta-home .wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cta-home h2 { margin: 0; max-width: 16ch; font-size: clamp(48px, 6vw, 88px); line-height: 1; text-wrap: balance; }
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
.paths { list-style: none; margin: 24px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: left; }
.paths a { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 28px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); text-decoration: none; box-sizing: border-box; transition: border-color var(--duration-fast) var(--ease-standard); }
.paths a:hover { border-color: var(--border); }
.paths code { font: 400 13px var(--font-mono); color: var(--signal-text); }
.paths b { font: 400 24px/1.15 var(--font-display); letter-spacing: -.015em; }
.paths span { color: var(--muted); font-size: 15px; }
.hero-ctas { display: flex; align-items: center; gap: 20px; margin: 0; }
.hero-link { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 899px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .paths { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Small screens: every scene stacks and shows its still ---------- */
@media (max-width: 899px) {
  .home .site-header { position: relative; }
  .hero { padding-top: 24px; min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ask { max-width: 100%; }
  .ask .btn { padding-inline: 16px; }
  .hero-stage { height: 560px; }
  .gap-grid, .turn-grid, .wipe-grid, .check-grid, .platform-grid { grid-template-columns: minmax(0, 1fr); }
  .turn-line, .turn-check { display: none; }
  .gone-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .turn-right { position: relative; display: flex; justify-content: center; }
  .turn-left { justify-self: stretch; }
  .check-phone { max-width: 320px; margin: 40px auto 0; }
  /* A row you swipe, each device at a size you can read, rather than a grid that shrinks them. */
  .demo-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(46%, 240px); gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .demo-tile { scroll-snap-align: start; }
  .demo-tile:has(.demo-browser) { grid-column: span 2; }
  .demo-browser { --ph: min(420px, calc(((100cqw - 14px) / 2 - 36px) / .4816)); }
  .demos-head { flex-direction: column; align-items: flex-start; }
  .roles-track { overflow-x: auto; scroll-snap-type: x mandatory; flex-wrap: nowrap !important; }
  .role { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .turn-rail { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ---------- Landing pages: the same hero, then short blocks ---------- */
.page-hero { min-height: max(680px, 88svh); }
.page-title { font-size: clamp(48px, 6vw, 92px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 0; }
.page-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; }
.art-phone { position: relative; }
.art-phone { --phone-h: min(560px, 64svh); }
.art-halo { position: absolute; inset: -14px -14px 14px; border-radius: 66px; background-image: radial-gradient(var(--signal) 1.8px, transparent 2.2px); background-size: 10px 10px; }
.art-wall { display: grid; grid-template-columns: repeat(4, 88px); gap: 16px; }
.art-wall span { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 26px; background: var(--surface); border: 1px solid var(--rule); animation: rise 600ms var(--ease-standard) both; animation-delay: calc(var(--i) * 50ms); }
.art-term { width: min(460px, 100%); font-size: 15px; }
.art-mark .pxb-mark { width: min(280px, 60vw); height: auto; }
.block-points, .block-term, .block-wall, .block-specimens, .block-note { border-top: 1px solid var(--rule); }
.block-title { margin: 0 0 40px; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.05; max-width: 20ch; text-wrap: balance; }
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.points li { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 28px; background: var(--surface); border: 1px solid var(--rule); }
.point-n { color: var(--signal-text); font-size: 13px; }
.points h3 { margin: 0; font: 400 26px/1.15 var(--font-display); }
.points p { margin: 0; color: var(--muted); }
.block-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.block-split .block-title { margin-bottom: 16px; }
.block-lead { margin: 0 0 20px; max-width: 46ch; color: var(--muted); font-size: 18px; }
.block-wall .wall { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.block-wall .wall + .wall { margin-top: 12px; }
.block-wall .wall-tile { padding: 16px; font-size: 15px; background: var(--surface); }
.block-wall .wall-templates .wall-tile { background: var(--ground); }
.specimens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; }
.specimen { display: flex; flex-direction: column; gap: 12px; }
.specimen-link { display: flex; justify-content: space-between; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); font-size: 15px; }
.specimen-ask { font-family: var(--font-mono); font-size: 14px; }
.specimen-ask::before { content: "“"; } .specimen-ask::after { content: "”"; }
.specimen-pack { color: var(--muted); }
.specimen-frame { height: 440px; overflow: hidden; border-radius: 24px; border: 1px solid var(--rule); position: relative; }
.specimen-frame::after { content: ""; position: absolute; inset: auto 0 0; height: 60px; background: linear-gradient(transparent, var(--pxd-color-surface, #fff)); }
.block-note p { margin: 0; max-width: 60ch; font-size: 18px; color: var(--muted); }
.block-note a { color: var(--signal-text); }
@media (max-width: 899px) {
  .page-art { min-height: 0; }
  .block-split { grid-template-columns: minmax(0, 1fr); }
  .specimens { grid-template-columns: minmax(0, 1fr); }
  .art-wall { grid-template-columns: repeat(4, 64px); gap: 10px; }
  .art-wall span { width: 64px; height: 64px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) { .ask-caret { animation: none; } }

/* ---------- The logo band: every pack by its own logo, drifting slowly ---------- */
.logo-band { padding: 40px 0 44px; border-top: 1px solid var(--rule); overflow: hidden; }
.logo-band { display: flex; flex-direction: column; gap: 22px; }
.logo-lane { display: flex; flex-direction: column; gap: 12px; }
.logo-lane-label { margin: 0; padding-inline: var(--gutter); }
.logo-track { min-width: 0; overflow: hidden; }
.lane-templates .logo-marquee { animation-direction: reverse; animation-duration: 64s; }
.lane-templates .lb-pill { background: var(--ground); }
/* The pill is the frame; the logo sits in it without a second border. */
.logo-marquee .ds-logo { border: 0; }
.logo-marquee { display: flex; width: max-content; animation: marquee 70s linear infinite; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-marquee:hover, .logo-marquee:focus-within, .logo-marquee.paused { animation-play-state: paused; }
.logo-marquee ul { display: flex; gap: 12px; margin: 0; padding: 0 6px; list-style: none; }
.logo-marquee li { display: flex; }
.lb-pill { display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: var(--radius-pill); border: 1px solid var(--rule); background: var(--surface); white-space: nowrap; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-standard); }
.lb-pill:hover, .lb-pill:focus-visible { border-color: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { animation: none; width: auto; flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .logo-marquee ul { flex-wrap: wrap; justify-content: center; }
  .logo-marquee ul[aria-hidden] { display: none; }
}

/* ---------- Every kind of screen: two rows of devices the scroll slides past each other ---------- */
.scene-show { --p: .35; --dh: min(250px, 25svh); }
.scene-show .scene-title { font-size: clamp(34px, 3.8vw, 56px); }
.show-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.show-lead { margin: 0; max-width: 42ch; color: var(--muted); font-size: 17px; }
.show-lead a { color: var(--signal-text); font-weight: 600; }
.show-rows { display: flex; flex-direction: column; gap: 26px; }
.show-row { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: 28px; align-items: flex-end; width: max-content; }
.show-row-0 { transform: translateX(calc(var(--p) * var(--t0, 600px) * -1)); }
.show-row-1 { transform: translateX(calc((var(--p) - 1) * var(--t1, 600px))); }
.show-item { margin: 0; flex: none; display: flex; flex-direction: column; gap: 10px; }
.show-item .phone-wrap { padding-bottom: 0; }
.show-item .phone-wrap::after { display: none; }
.show-phone { --phone-h: var(--dh); }
.show-browser .browser { width: calc(var(--dh) * 1.45); }
.show-cap { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); max-width: calc(var(--dh) * 1.45); }
.show-phone .show-cap { max-width: calc(var(--dh) * .9); flex-direction: column; align-items: flex-start; gap: 4px; }
.show-ask { font: 400 12px var(--font-mono); color: var(--ink); }
.show-ask::before { content: "“"; } .show-ask::after { content: "”"; }
.show-cap .ds-name { font-size: 12px; }
.tablet { position: relative; height: var(--dh); aspect-ratio: 4 / 3; padding: calc(var(--dh) * .045); border-radius: calc(var(--dh) * .08); box-sizing: border-box; background: linear-gradient(135deg, #4A4844, #1C1B19 40%, #141413 60%, #3A3834); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 24px 40px -24px rgba(20,20,19,.5); }
.tablet-view { --k: .3; position: relative; height: 100%; border-radius: calc(var(--dh) * .035); overflow: hidden; background: #fff; }
.tablet-view > .fit { position: absolute; left: 0; top: 0; width: 1024px; height: calc(100% / var(--k)); transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden; }
.tablet-view .pxd-frame { height: 100%; overflow: auto; scrollbar-width: none; }
:root:not(.motion) .show-row { transform: none; }
:root:not(.motion) .show-rows { overflow-x: auto; }

/* ---------- What's inside a pack: the card a ticker pill opens ---------- */
.pk-pop { position: fixed; left: 0; top: 0; z-index: 30; width: 320px; pointer-events: none; animation: rise 240ms var(--ease-standard) both; }
.pk-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule), 0 24px 48px -20px rgba(20,20,19,.35); color: var(--ink); }
.pk-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pk-head b { display: block; font-size: 16px; }
.pk-head span { font-size: 12.5px; color: var(--muted); }
.pk-kind { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--rule); font: 500 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.pk-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--pxd-color-surface-default, #fff); color: var(--pxd-color-text-default, #141413); }
.pk-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pk-swatches i { height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(20,20,19,.12); }
.pk-type { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.pk-aa { font-size: 30px; line-height: 1; }
.pk-example { --k: .67; position: relative; height: 200px; overflow: hidden; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(20,20,19,.1); }
.pk-example > .fit { position: absolute; left: 0; top: 0; width: 390px; height: calc(100% / var(--k)); transform: scale(var(--k)); transform-origin: 0 0; overflow: hidden; }
.pk-example .pxd-frame { height: 100%; overflow: hidden; }
.pk-foot { margin: 0; font-size: 13px; font-weight: 600; color: var(--signal-text); }

/* ---------- Phones: tighter rhythm, and nothing sized for a desk ---------- */
@media (max-width: 899px) {
  .stick { padding: 64px 0; }
  .hero { padding-bottom: 32px; }
  .hero-stage { --ph: min(460px, 62svh); height: calc(var(--ph) + 170px); }
  .hero-mark { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  .asking .hero-mark { transform: translate(calc(-1 * min(260px, 50%) + 100px), calc(100px - (var(--ph) + 170px) / 2)) scale(.26); }
  .stage-status { left: calc(50% - min(260px, 50%) + 64px); top: 10px; }
  .turn-left { height: 320px; }
  .turn-json { font-size: 12px; white-space: pre-wrap; word-break: break-word; }
  .chat { height: 420px; }
  .pk-pop { width: min(320px, calc(100vw - 24px)); }
}