/* Home: the photographed radio on the photographed cabinet. Scroll swings the two
   door panels open onto the product (a real console screen, lit from inside), then
   the page reads as plain sections. The film has its own section and styles
   (assets/film.css, film.mjs) and plays only when asked. Door panels sit at x 70–512 and 512–925 of the
   1024×430 scene, y 15–410. JS sets --doors (0..1). */
:root {
  --set-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.2' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0 0.02 0 0 0 1.1 -0.35'/%3E%3C/filter%3E%3Crect width='600' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  --set-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tape-home { background: var(--marketing-room); }
.tape-home .skip-link:focus { z-index: 80; }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes reel-turn { to { transform: rotate(1turn); } }
@keyframes reel-spin { to { --spin: 360deg; } }

/* ── Stage: radio, cabinet, and the plate on its plinth ── */
.stage { --plate-h: 168px; position: relative; height: 190vh; background: radial-gradient(ellipse 60% 55% at 50% 42%, color-mix(in srgb, var(--set-glow) calc(var(--doors, 0) * 9%), transparent), transparent 70%), var(--marketing-room); }
.stage-view { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cabinet { --cab-w: min(94vw, 1240px, calc((100svh - var(--stage-top) - var(--plate-h) - 28px) * 1024 / 430)); position: absolute; left: calc(50% - var(--cab-w) / 2); top: var(--stage-top); width: var(--cab-w); filter: drop-shadow(0 26px 36px var(--marketing-room)); }
.cabinet-inside { position: absolute; left: 6.84%; width: 83.5%; top: 3.49%; height: 91.86%; overflow: hidden; background: radial-gradient(ellipse 70% 80% at 50% 45%, color-mix(in srgb, var(--set-glow) calc(var(--doors, 0) * 16%), var(--set-walnut-deep)), var(--marketing-room)); box-shadow: inset 0 0 0 2px var(--marketing-room); }
.cabinet-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 90% 90% at 50% 40%, transparent 55%, color-mix(in srgb, var(--marketing-room) 85%, transparent)); box-shadow: inset 0 0 6cqw var(--marketing-room); }

/* The lit screen inside: a real console capture, pushing in as the doors open. */
.inside-shot { position: absolute; left: 8%; right: 8%; top: 7%; margin: 0; border-radius: .6cqw; background: var(--set-screen); box-shadow: 0 0 0 .25cqw color-mix(in srgb, var(--set-brass) 55%, transparent), 0 2cqw 5cqw var(--marketing-room), 0 0 calc(var(--doors, 0) * 7cqw) color-mix(in srgb, var(--set-glow) 30%, transparent);
  transform: translateY(calc((1 - var(--doors, 0)) * 3%)) scale(calc(.94 + var(--doors, 0) * .06)); transform-origin: 50% 0; }
.inside-shot img { display: block; width: 100%; height: auto; border-radius: inherit; filter: brightness(calc(.35 + var(--doors, 0) * .65)) saturate(calc(.6 + var(--doors, 0) * .4)); }
.inside-pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.inside-pins li { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: .8cqw; translate: -.55cqw -50%; opacity: 0; transform: translateY(.8cqw); transition: opacity 420ms var(--ease-decelerate), transform 420ms var(--ease-decelerate); transition-delay: calc(var(--i) * 140ms); }
.inside-pins li::before { content: ''; flex: none; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--marketing-accent); box-shadow: 0 0 0 .35cqw color-mix(in srgb, var(--marketing-accent) 30%, transparent), 0 0 1.4cqw var(--marketing-accent); }
.inside-pins li.left { flex-direction: row-reverse; translate: calc(-100% + .55cqw) -50%; }
.inside-pins span { padding: .6cqw 1cqw; border-radius: .4cqw; background: color-mix(in srgb, var(--marketing-room) 88%, transparent); color: var(--set-ivory); font: 600 1.25cqw/1 var(--font-ui); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 .6cqw 1.6cqw color-mix(in srgb, var(--marketing-room) 60%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--set-brass) 40%, transparent); }
.stage.is-open .inside-pins li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .stage.is-open .inside-pins li::before { animation: pin-pulse 2.4s calc(var(--i) * 300ms + 600ms) ease-out infinite; }
}
@keyframes pin-pulse { 0% { box-shadow: 0 0 0 .35cqw color-mix(in srgb, var(--marketing-accent) 30%, transparent), 0 0 1.4cqw var(--marketing-accent); } 70% { box-shadow: 0 0 0 1.6cqw color-mix(in srgb, var(--marketing-accent) 0%, transparent), 0 0 1.4cqw var(--marketing-accent); } }

/* The brass plate under the cabinet: what it is, and the way in. */
.hero-plate { position: absolute; left: 50%; top: calc(var(--stage-top) + var(--cab-w-now, min(94vw, 1240px, calc((100svh - var(--stage-top) - var(--plate-h) - 28px) * 1024 / 430))) * 430 / 1024 + 18px); z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl) var(--space-3xl); align-items: center; width: min(94vw, 1240px); padding: var(--space-xl) var(--space-3xl); transform: translateX(-50%); border-radius: var(--rounded-xs);
  background: var(--set-grain), linear-gradient(180deg, color-mix(in srgb, var(--set-walnut) 72%, var(--marketing-room)), var(--set-walnut-deep)); background-size: 600px 240px, auto; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--set-brass) 40%, transparent), inset 0 1px 0 color-mix(in srgb, var(--set-brass-light) 30%, transparent), 0 16px 30px var(--marketing-room); }
.hero-plate-title { display: none; }
/* The door carries the pitch (headline + engraved lines); the plate is only the controls, centred under the cabinet. Phones cannot read the carving, so the plate repeats it there. */
.hero-plate { grid-template-columns: auto; justify-content: center; }
.hero-plate-lead { display: none; max-width: 64ch; color: color-mix(in srgb, var(--set-ivory) 92%, var(--set-glow)); font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.hero-plate .actions { flex-wrap: nowrap; align-items: center; gap: var(--space-lg) var(--space-xl); margin: 0; }
/* Each control on the plate carries an engraved label under it, like the knobs on the radio. */
.plate-controls { align-items: flex-start; }
.plate-control { display: grid; justify-items: center; gap: var(--space-sm); }
.plate-control .film-link { min-height: 44px; }
.plate-label { color: var(--set-brass-light); font: 500 11px/1 var(--font-engrave); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 -1px 0 color-mix(in srgb, var(--marketing-room) 85%, transparent), 0 0 8px color-mix(in srgb, var(--set-glow) 30%, transparent); opacity: .9; }
.film-link { display: inline-flex; align-items: center; gap: .6em; white-space: nowrap; }
.film-link::before { content: '▶'; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--set-glow) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--set-brass-light) 55%, transparent); font-size: 11px; letter-spacing: 0; text-indent: 2px; }
.film-link-time { color: var(--marketing-muted); letter-spacing: .08em; }

.stage-hint { position: absolute; left: 50%; bottom: 14px; z-index: 4; transform: translateX(-50%); color: var(--set-brass-light); font: 500 12px/1 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; opacity: calc(.8 - var(--doors, 0) * 3); pointer-events: none; }
.stage-hint span::after { content: ''; display: block; width: 1px; height: 18px; margin: 6px auto 0; background: linear-gradient(var(--set-brass-light), transparent); }
@media (prefers-reduced-motion: no-preference) { .stage-hint span::after { animation: hint 1.8s ease-in-out infinite; } }
@keyframes hint { 50% { transform: translateY(6px); opacity: .4; } }

/* ── Static stage: no JS or reduced motion ─────────────── */
.stage.is-static, html:not(.js) .stage { height: auto; padding: calc(var(--stage-top) + 8px) 0 var(--space-page); }
.stage.is-static .stage-view, html:not(.js) .stage-view { position: relative; height: auto; overflow: visible; display: grid; justify-items: center; gap: var(--space-2xl); padding-inline: var(--space-2xl); }
.stage.is-static .cabinet, html:not(.js) .cabinet { position: relative; left: auto; top: auto; --cab-w: min(100%, 1100px); }
.stage.is-static .hero-plate, html:not(.js) .hero-plate { position: relative; left: auto; top: auto; transform: none; width: min(100%, 1100px); }
.stage.is-static .stage-hint, html:not(.js) .stage-hint, html:not(.js) .film-poster, html:not(.js) .film-link { display: none; }
/* Static: the closed, engraved cabinet (the h1 is carved on the left door), then the plate. */
.stage.is-static .door, html:not(.js) .door { transform: none; }
html:not(.js) .inside-shot, html:not(.js) .inside-pins, .stage.is-static .inside-shot, .stage.is-static .inside-pins { transform: none; filter: none; }
html:not(.js) .inside-pins li { opacity: 1; transform: none; }

/* ── How it works: steps on the left, the matching screen held on the right ── */
.flow { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); }
.flow-copy h2 { margin-bottom: var(--space-page); }
.flow-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.flow-step { display: grid; align-content: center; min-height: 56vh; padding-block: var(--space-3xl); opacity: .38; transition: opacity 400ms var(--ease-standard); }
.flow-step:first-child { min-height: 48vh; align-content: start; }
.flow-step.is-active, html:not(.js) .flow-step { opacity: 1; }
/* Without the script there is no sticky frame to switch: each step carries its own screen. */
html:not(.js) .flow { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
html:not(.js) .flow-stage { display: none; }
html:not(.js) .flow-step, html:not(.js) .flow-step:first-child { min-height: 0; }
html:not(.js) .flow-figure { display: block; margin-top: var(--space-2xl); }
.flow-step h3 { display: flex; align-items: center; gap: var(--space-xl); font-size: clamp(24px, 2.4vw, 32px); }
.flow-step p { max-width: 46ch; margin-top: var(--space-xl); color: var(--marketing-muted); font-size: 18px; line-height: 1.6; }
.flow-n { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--set-brass-light), var(--set-brass-deep)); color: var(--set-ink); font: 700 18px/1 var(--font-display); box-shadow: 0 0 0 3px color-mix(in srgb, var(--set-brass) 25%, transparent); transition: box-shadow 400ms; }
.flow-step.is-active .flow-n { box-shadow: 0 0 0 3px color-mix(in srgb, var(--marketing-accent) 45%, transparent), 0 0 22px color-mix(in srgb, var(--set-glow) 45%, transparent); }
.flow-figure { display: none; }
.flow-stage { position: relative; }
.flow-frame { position: sticky; top: max(130px, calc(50vh - 18vw)); display: grid; }
.flow-frame picture { display: contents; }
.flow-frame img { grid-area: 1 / 1; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; object-position: top; border-radius: 4px; background: var(--bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--set-brass) 55%, transparent); opacity: 0; transform: scale(.98) translateY(8px); transition: opacity 500ms var(--ease-standard), transform 600ms var(--ease-decelerate); }
.flow-frame[data-active='record'] [data-show='record'], .flow-frame[data-active='group'] [data-show='group'], .flow-frame[data-active='fix'] [data-show='fix'] { opacity: 1; transform: none; }

/* ── Platforms: what each SDK sends ─────────────────── */
.band-head .lead { margin-top: var(--space-xl); }
.kit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-2xl); }
.kit-card { display: grid; align-content: start; gap: var(--space-xl); min-width: 0; padding: var(--space-3xl); border-radius: 6px; background: var(--set-grain), linear-gradient(180deg, color-mix(in srgb, var(--set-walnut) 80%, var(--marketing-room)), var(--set-walnut-deep)); background-size: 600px 240px, auto; box-shadow: 0 16px 34px var(--marketing-room), inset 0 0 0 1px color-mix(in srgb, var(--set-brass) 35%, transparent); }
.kit-web { box-shadow: 0 16px 34px var(--marketing-room), inset 0 0 0 1px color-mix(in srgb, var(--set-brass) 45%, transparent), inset 0 5px 0 var(--marketing-accent); }
.kit-card header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-xl); }
.kit-card h3 { font-size: 28px; }
.kit-card header p { color: var(--set-brass-light); font: 500 13px/1.2 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.kit-code { margin: 0; padding: var(--space-lg) var(--space-xl); overflow-x: auto; border-radius: 4px; background: var(--marketing-room); color: var(--set-ivory); font: 500 13px/1.6 var(--font-mono); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--set-brass) 22%, transparent); }
.kit-list { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.kit-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-md); color: color-mix(in srgb, var(--set-ivory) 88%, transparent); line-height: 1.45; }
.kit-list li::before { content: '✓'; color: var(--set-glow); font: 700 14px/1.45 var(--font-ui); }
.kit-list li.no { color: var(--marketing-muted); }
.kit-list li.no::before { content: '–'; color: var(--marketing-muted); }
.kit-ios { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-xl) var(--space-3xl); padding-block: var(--space-2xl); }
.kit-ios .kit-list { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-3xl); }
.kit-ios .kit-list li { white-space: nowrap; }
.kit-ios .text-link { margin: 0; white-space: nowrap; }
.kit-code .c-dim { color: var(--marketing-muted); }

/* ── Agents: the transcript types itself once ───────── */
.agent-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.agent-points { display: grid; gap: var(--space-xl); margin: var(--space-3xl) 0 0; }
.agent-points div { padding-left: var(--space-xl); border-left: 2px solid color-mix(in srgb, var(--marketing-accent) 70%, transparent); }
.agent-points dt { color: var(--set-ivory); font-weight: 600; font-size: 18px; }
.agent-points dd { margin: var(--space-xs) 0 0; color: var(--marketing-muted); }
.term-card { margin: 0; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--marketing-room) 94%, var(--set-walnut)); box-shadow: 0 30px 60px var(--marketing-room), inset 0 0 0 1px color-mix(in srgb, var(--set-brass) 30%, transparent); }
.term-card-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid color-mix(in srgb, var(--set-brass) 18%, transparent); color: var(--marketing-muted); font: 500 12px/1 var(--font-mono); }
.term-card-bar i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--set-brass) 40%, transparent); }
.term-card-bar span { margin-left: 8px; }
.term-card pre { margin: 0; padding: var(--space-2xl) var(--space-2xl) var(--space-xl); overflow-x: auto; font: 500 13px/1.75 var(--font-mono); }
.term-card code { white-space: normal; }
.term-card code > span { display: block; white-space: pre; }
.t-cmd { color: var(--marketing-muted); }
.t-call { color: var(--set-ivory); }
.t-call::first-letter { color: var(--marketing-accent); }
.t-out { color: color-mix(in srgb, var(--set-glow) 80%, var(--set-ivory)); }
.term-card figcaption { padding: 0 var(--space-2xl) var(--space-xl); color: var(--marketing-muted); font-size: 13px; }
.term-card.is-waiting code > span { opacity: 0; }
.term-card.is-typing code > span { animation: term-line 360ms var(--ease-decelerate) both; animation-delay: calc(var(--i) * 380ms); }
.term-card.is-typing code > span.t-call { animation-name: term-type; animation-duration: 520ms; animation-timing-function: steps(24, end); }
@keyframes term-line { from { opacity: 0; transform: translateY(4px); } }
@keyframes term-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ── Bands (the rest of the one page) ───────────────── */
.band { position: relative; padding-block: clamp(64px, 9vw, 120px); background: radial-gradient(ellipse 70% 60% at 20% 0%, color-mix(in srgb, var(--set-glow) 7%, transparent), transparent 70%), var(--marketing-bg); }
.band-dark { background: var(--set-grain), linear-gradient(180deg, var(--set-walnut-deep), var(--marketing-room)); background-size: 600px 240px, auto; }
.band + .band { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--set-brass) 22%, transparent); }
.band h2 { max-width: 20ch; font-size: clamp(34px, 4.4vw, 56px); }
.agent-split h2, .flow h2 { font-size: clamp(32px, 3.4vw, 46px); }
.band .lead { max-width: 60ch; margin-top: var(--space-2xl); color: var(--marketing-muted); font-size: 18px; line-height: 1.6; }
.tape-home .eyebrow, .band .eyebrow { margin-bottom: var(--space-xl); color: var(--set-brass-light); font: 500 14px/1.2 var(--font-engrave); letter-spacing: .14em; }
.band-head { margin-bottom: var(--space-page); }
.band-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.band-split.flip .band-copy { order: 2; }
.band .text-link { margin-top: var(--space-3xl); }

.still { margin: 0; padding: 10px; border-radius: 6px; background: var(--set-grain), linear-gradient(180deg, var(--set-walnut-light), var(--set-walnut-deep)); background-size: 600px 240px, auto; box-shadow: 0 24px 50px var(--marketing-room), inset 0 1px 0 color-mix(in srgb, var(--set-brass-light) 30%, transparent); }
.still picture, .still img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--set-brass) 55%, transparent); }
.still figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-xl); padding: var(--space-lg) var(--space-sm) 0; color: var(--set-brass-light); font: 500 13px/1.3 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.still.wide { margin-top: var(--space-page); }
.still .shot-open { color: var(--set-ivory); text-decoration-color: var(--marketing-accent); }

.tape-list { display: grid; gap: var(--space-xl); margin: var(--space-3xl) 0 0; padding: 0; list-style: none; }
.tape-list li { display: grid; grid-template-columns: 22px 130px minmax(0, 1fr); gap: var(--space-xl); align-items: baseline; padding-top: var(--space-xl); border-top: 1px solid color-mix(in srgb, var(--set-brass) 22%, transparent); }
.tape-list li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; align-self: center; background: radial-gradient(circle, var(--set-ivory) 0 22%, var(--set-brass-deep) 23% 30%, var(--set-brass) 31%); }
.tape-list strong { color: var(--set-ivory); font: 500 16px/1.2 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.tape-list span { color: var(--marketing-muted); }

.call-sheet { display: grid; gap: var(--space-lg); margin: var(--space-3xl) 0 0; padding: 0; list-style: none; counter-reset: call; }
.call-sheet li { display: grid; grid-template-columns: 34px auto minmax(0, 1fr); gap: var(--space-xl); align-items: center; padding: var(--space-lg) var(--space-xl); border-radius: 4px; background: color-mix(in srgb, var(--marketing-room) 55%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--set-brass) 22%, transparent); counter-increment: call; }
.call-sheet li::before { content: '0' counter(call); color: var(--marketing-accent); font: 500 16px/1 var(--font-engrave); letter-spacing: .1em; }
.call-sheet code { color: var(--set-ivory); font-size: 13px; }
.call-sheet span { color: var(--marketing-muted); font-size: 14px; }

.labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl); }
.label-card { position: relative; padding: var(--space-3xl) var(--space-3xl) var(--space-3xl); border-radius: 4px; background: linear-gradient(180deg, var(--set-ivory), color-mix(in srgb, var(--set-ivory) 80%, var(--set-ivory-shade))); color: var(--set-ink); box-shadow: 0 10px 24px color-mix(in srgb, var(--marketing-room) 70%, transparent), inset 0 5px 0 var(--marketing-accent), inset 0 7px 0 var(--set-brass); }
.label-card::after { content: ''; position: absolute; inset: 0; border-radius: 4px; background: var(--set-noise); opacity: .12; mix-blend-mode: multiply; pointer-events: none; }
.label-card small { display: block; margin-top: var(--space-md); color: var(--tertiary); font: 500 13px/1 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.label-card h3 { margin-top: var(--space-lg); color: var(--set-ink); font-size: 24px; }
.label-card p { margin-top: var(--space-lg); color: color-mix(in srgb, var(--set-ink) 80%, transparent); font-size: 16px; }

.moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3xl); margin: 0 0 var(--space-lg); padding: 0; list-style: none; }
.moves li { padding-top: var(--space-2xl); border-top: 2px solid color-mix(in srgb, var(--set-brass) 45%, transparent); }
.moves small { color: var(--set-brass-light); font: 500 48px/1 var(--font-engrave); letter-spacing: .06em; }
.moves h3 { margin-top: var(--space-lg); }
.moves p { margin-top: var(--space-lg); color: var(--marketing-muted); }

.boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3xl); max-width: 1180px; margin-bottom: var(--space-lg); }
.tape-box { display: grid; gap: var(--space-xl); align-content: start; padding: var(--space-page) var(--space-3xl) var(--space-3xl); border-radius: 4px; background: var(--set-grain), linear-gradient(180deg, var(--set-walnut), var(--set-walnut-deep)); background-size: 600px 240px, auto; box-shadow: 0 16px 34px var(--marketing-room), inset 0 0 0 1px color-mix(in srgb, var(--set-brass) 40%, transparent); }
.tape-box small { color: var(--set-brass-light); font: 500 16px/1 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.tape-box .price { font-size: 48px; letter-spacing: -.04em; }
.tape-box .price span:not(.price-n) { color: var(--marketing-muted); font: 500 14px/1 var(--font-ui); letter-spacing: 0; }
.tape-box .price .price-n { font-variant-numeric: tabular-nums; }
.tape-box p { color: var(--marketing-muted); }
.tape-box .button { justify-self: start; }
.tape-box.pro { box-shadow: 0 16px 34px var(--marketing-room), inset 0 0 0 1px var(--marketing-accent), inset 0 6px 0 var(--marketing-accent); }

.final { text-align: center; }
.final h2, .final .lead { margin-inline: auto; }
.final .actions { justify-content: center; margin-top: var(--space-3xl); }

@media (max-width: 900px) {
  .band-split, .flow, .agent-split, .kit { grid-template-columns: minmax(0, 1fr); }
  .kit-ios { grid-template-columns: minmax(0, 1fr); }
  .kit-ios .kit-list { display: grid; gap: var(--space-md); }
  .kit-ios .kit-list li { white-space: normal; }
  .band-split.flip .band-copy { order: 0; }
  .labels, .moves, .boxes { grid-template-columns: minmax(0, 1fr); }
  .flow-stage { display: none; }
  .flow-step, .flow-step:first-child { min-height: 0; opacity: 1; padding-block: var(--space-2xl); }
  .flow-figure { display: block; margin-top: var(--space-2xl); }
  .flow-figure img { max-height: 64vh; object-fit: cover; object-position: top; }
  .still { width: fit-content; max-width: 100%; justify-self: center; }
  .still picture, .still img { width: auto; max-width: 100%; margin-inline: auto; }
}

@media (max-width: 820px) {
  .stage { --plate-h: 0px; height: 150vh; }
  .cabinet { --cab-w: 94vw; }
  .hero-plate { top: calc(var(--stage-top) + 94vw * 430 / 1024 + var(--space-2xl)); grid-template-columns: minmax(0, 1fr); width: calc(100vw - 2 * var(--space-2xl)); padding: var(--space-2xl); }
  /* On phones the carved door headline is too small to read, so the plate repeats it at reading size (the h1 stays on the door). */
  .hero-plate-title { display: block; color: var(--set-ivory); font: 700 24px/1.15 var(--font-display); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
  .hero-plate { justify-content: stretch; }
  .hero-plate-lead { display: block; font-size: 16px; }
  .hero-plate .actions { flex-wrap: wrap; }
  .plate-control:last-child { grid-auto-flow: column; align-items: center; gap: var(--space-lg); }
  .inside-pins { display: none; }
  .stage.is-static .hero-plate { width: 100%; }
}
/* Linked label cards (Who it's for) and a row of text links under a band. */
a.label-card { display: block; text-decoration: none; transition: transform var(--motion-base), box-shadow var(--motion-base); }
a.label-card:hover, a.label-card:focus-visible { transform: translateY(-2px); }
.band-links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-3xl); }
@media (prefers-reduced-motion: reduce) { a.label-card { transition: none; } a.label-card:hover, a.label-card:focus-visible { transform: none; } }

/* ══ Showpiece motion (home). Everything below runs only with motion allowed:
   html.station-live is set in <head> before first paint when the visitor has
   not asked for reduced motion. Transform and opacity only, except the brief
   filter flash of the powering screen. ══════════════════════════════════ */
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* Opening: the radio warms up, the cabinet comes out of the dark, the
   headline burns into the door line by line, the plate rises last. */
html.station-live .tape-home .radio-set .rs-body { animation: set-power 1400ms var(--ease-out-expo) backwards; }
html.station-live .tape-home .rs-stations a { animation: station-lamp 900ms var(--ease-out-expo) both; }
html.station-live .tape-home .rs-stations a:nth-child(1) { animation-delay: 350ms; }
html.station-live .tape-home .rs-stations a:nth-child(2) { animation-delay: 420ms; }
html.station-live .tape-home .rs-stations a:nth-child(3) { animation-delay: 490ms; }
html.station-live .tape-home .rs-stations a:nth-child(4) { animation-delay: 560ms; }
html.station-live .tape-home .rs-stations a:nth-child(5) { animation-delay: 630ms; }
html.station-live .tape-home .rs-stations a:nth-child(6) { animation-delay: 700ms; }
html.station-live .tape-home .cabinet { animation: cabinet-in 1500ms 120ms var(--ease-out-expo) backwards; }
html.station-live .tape-home .door-eyebrow { animation: fade-up 900ms 500ms var(--ease-out-expo) both; }
html.station-live .tape-home .door-title span { animation: burn-in 1100ms var(--ease-out-expo) both; }
html.station-live .tape-home .door-title span:nth-child(1) { animation-delay: 650ms; }
html.station-live .tape-home .door-title span:nth-child(2) { animation-delay: 780ms; }
html.station-live .tape-home .door-title span:nth-child(3) { animation-delay: 910ms; }
html.station-live .tape-home .door-title span:nth-child(4) { animation-delay: 1040ms; }
html.station-live .tape-home .door-rule { animation: rule-draw 900ms 1250ms var(--ease-out-expo) both; transform-origin: 0 50%; }
html.station-live .tape-home .door-motto { animation: fade-up 900ms 1400ms var(--ease-out-expo) both; }
html.station-live .tape-home .hero-plate { animation: plate-rise 1100ms 1100ms var(--ease-out-expo) both; }
html.station-live .tape-home .hero-plate .actions > * { animation: pop-in 800ms var(--ease-spring) both; }
html.station-live .tape-home .hero-plate .actions > :nth-child(1) { animation-delay: 1450ms; }
html.station-live .tape-home .hero-plate .actions > :nth-child(2) { animation-delay: 1540ms; }
html.station-live .tape-home .hero-plate .actions > :nth-child(3) { animation-delay: 1630ms; }
html.station-live .tape-home .stage-hint { animation: fade-up 900ms 2200ms ease both; }
@keyframes set-power { 0% { opacity: 0; filter: brightness(.2) drop-shadow(0 14px 22px var(--marketing-room)); } 25% { opacity: 1; filter: brightness(1.25) drop-shadow(0 14px 22px var(--marketing-room)); } 35% { filter: brightness(.55) drop-shadow(0 14px 22px var(--marketing-room)); } 55% { filter: brightness(1.1) drop-shadow(0 14px 22px var(--marketing-room)); } 100% { opacity: 1; filter: brightness(1) drop-shadow(0 14px 22px var(--marketing-room)); } }
@keyframes station-lamp { from { opacity: 0; text-shadow: none; } 60% { opacity: 1; text-shadow: 0 0 6px var(--set-glow), 0 0 22px var(--set-glow); } }
@keyframes cabinet-in { from { translate: 0 24px; scale: .985; filter: brightness(.12) blur(3px) drop-shadow(0 26px 36px var(--marketing-room)); } 55% { filter: brightness(1.05) blur(0) drop-shadow(0 26px 36px var(--marketing-room)); } to { translate: none; scale: none; filter: brightness(1) blur(0) drop-shadow(0 26px 36px var(--marketing-room)); } }
@keyframes burn-in { from { clip-path: inset(0 100% 0 0); opacity: .2; } 70% { opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes rule-draw { from { scale: 0 1; } }
@keyframes fade-up { from { opacity: 0; translate: 0 12px; } }
@keyframes plate-rise { from { opacity: 0; translate: -50% 40px; } to { opacity: 1; translate: -50% 0; } }
@keyframes pop-in { from { opacity: 0; scale: .8; translate: 0 10px; } }
/* The plate centres itself with transform; the rise uses translate on top of it. */
html.station-live .tape-home .hero-plate { transform: none; translate: -50% 0; }

/* Dust in the lamp light. */
.motes { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: .9; }
html:not(.station-live) .motes { display: none; }

/* A slow lamp reflection passes over the closed doors. */
html.station-live .tape-home .cabinet::after { content: ''; position: absolute; left: 6.84%; top: 3.49%; width: 83.5%; height: 91.86%; z-index: 4; pointer-events: none; background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--set-glow) 22%, transparent) 48%, color-mix(in srgb, var(--set-ivory) 14%, transparent) 50%, transparent 60%); background-size: 260% 100%; mix-blend-mode: soft-light; opacity: calc(1 - var(--doors, 0) * 1.6); animation: door-sheen 9s 2.4s ease-in-out infinite; }
@keyframes door-sheen { 0% { background-position: 120% 0; } 45%, 100% { background-position: -40% 0; } }

/* Opening: light bursts through the seam, rays turn behind the screen. */
.cabinet-inside::before { content: ''; position: absolute; left: 50%; top: -10%; bottom: -10%; z-index: 1; width: 40%; translate: -50% 0; background: radial-gradient(ellipse 50% 60% at 50% 45%, color-mix(in srgb, var(--set-ivory) 80%, transparent), color-mix(in srgb, var(--set-glow) 50%, transparent) 30%, transparent 70%); opacity: calc(var(--doors, 0) * (1 - var(--doors, 0)) * 3.6); scale: calc(.4 + var(--doors, 0) * 2) 1; mix-blend-mode: screen; pointer-events: none; }
.cabinet-inside::after { content: ''; position: absolute; left: 50%; top: 40%; z-index: 0; width: 160%; aspect-ratio: 1; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--set-glow) 20%, transparent) 0deg 5deg, transparent 5deg 16deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 60%); mask: radial-gradient(circle, #000 0, transparent 60%); opacity: calc(var(--doors, 0) * .55); pointer-events: none; }
html.station-live .cabinet-inside::after { animation: rays-turn 60s linear infinite; }
@keyframes rays-turn { to { rotate: 1turn; } }

/* The screen inside powers on like a picture tube when the doors open. */
.stage.is-open .inside-shot { animation: tube-on 900ms var(--ease-out-expo) both; }
@keyframes tube-on { 0% { scale: 1 .02; filter: brightness(4) saturate(0); } 35% { scale: 1 1; filter: brightness(1.8) saturate(.4); } 100% { scale: 1 1; filter: none; } }
.inside-shot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--marketing-room) 18%, transparent) 0 1px, transparent 1px 3px); opacity: .18; pointer-events: none; }
html.station-live .inside-shot::after { animation: scan 8s linear infinite; }
@keyframes scan { to { background-position: 0 120px; } }
.inside-pins li { scale: .7; transition: opacity 420ms var(--ease-decelerate), transform 420ms var(--ease-decelerate), scale 700ms var(--ease-spring); transition-delay: calc(400ms + var(--i) * 160ms); }
.stage.is-open .inside-pins li { scale: 1; }

/* Works with: an engraved strip that drifts; hover holds it still. */
.works-with { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3xl); padding: var(--space-2xl) max(var(--space-2xl), calc((100vw - 1180px) / 2)); background: var(--set-grain), linear-gradient(180deg, var(--set-walnut-deep), var(--marketing-room)); background-size: 600px 240px, auto; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--set-brass) 30%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--set-brass) 20%, transparent); overflow: hidden; }
.works-with-title { color: var(--set-brass-light); font: 600 12px/1 var(--font-engrave); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.works-with-viewport { min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.works-with-track { display: flex; width: max-content; }
.works-with-list { display: flex; gap: var(--space-3xl); margin: 0; padding: 0 var(--space-3xl) 0 0; list-style: none; }
.works-with-list li { display: flex; align-items: center; gap: var(--space-3xl); color: color-mix(in srgb, var(--set-ivory) 82%, transparent); font: 600 18px/1 var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.works-with-list li::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--set-glow); box-shadow: 0 0 10px var(--set-glow); opacity: .7; }
html.station-live .works-with-track { animation: drift 48s linear infinite; }
.works-with:hover .works-with-track { animation-play-state: paused; }
@keyframes drift { to { translate: -50% 0; } }
html:not(.station-live) .works-with-track { width: auto; flex-wrap: wrap; }
html:not(.station-live) .works-with-viewport { -webkit-mask: none; mask: none; }
html:not(.station-live) .works-with-list[aria-hidden] { display: none; }
html:not(.station-live) .works-with-list { flex-wrap: wrap; gap: var(--space-lg) var(--space-2xl); }

/* Numbers. */
.stats { position: relative; padding-block: clamp(48px, 7vw, 88px); background: radial-gradient(ellipse 60% 120% at 50% 0%, color-mix(in srgb, var(--set-glow) 10%, transparent), transparent 70%), var(--marketing-room); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--set-brass) 22%, transparent); }
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3xl); }
@media (max-width: 1180px) { .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { padding: var(--space-2xl) 0 0; border-top: 1px solid color-mix(in srgb, var(--set-brass) 30%, transparent); }
.stat-n { color: var(--set-ivory); font: 700 72px/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-shadow: 0 0 36px color-mix(in srgb, var(--set-glow) 45%, transparent); }
.stat-n small { margin-left: .06em; color: var(--set-brass-light); font-size: 32px; letter-spacing: 0; }
.stat-l { max-width: 26ch; margin-top: var(--space-lg); color: var(--marketing-muted); }

/* Transcript caret. */
.t-caret { display: inline-block; width: .6em; height: 1.1em; margin-left: .3em; vertical-align: -.2em; background: var(--set-glow); box-shadow: 0 0 8px var(--set-glow); }
html.station-live .t-caret { animation: caret 1s steps(2, start) infinite; }
@keyframes caret { to { visibility: hidden; } }

/* Pro: a lit edge travels round the card. */
.tape-box.pro { position: relative; }
.tape-box.pro::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--angle), transparent 0 60%, var(--set-glow) 75%, var(--marketing-accent) 82%, transparent 92%); -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 exclude, linear-gradient(#000 0 0); pointer-events: none; }
html.station-live .tape-box.pro::after { animation: edge-run 5s linear infinite; }
@keyframes edge-run { to { --angle: 1turn; } }

/* Final call: the button sits in a breathing pool of light. */
.final .actions { position: relative; isolation: isolate; }
.final .actions::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(640px, 90vw); aspect-ratio: 3 / 1; translate: -50% -50%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--marketing-accent) 30%, transparent), transparent 70%); filter: blur(20px); }
html.station-live .final .actions::before { animation: breathe 4.5s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; scale: 1.12; } }

/* Band edges draw in from the centre when the band arrives. */
.band::after { content: ''; position: absolute; left: 50%; top: 0; width: min(1180px, 92%); height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, var(--set-glow), transparent); opacity: .7; pointer-events: none; }
html.motion .band::after { scale: 0 1; transition: scale 1600ms var(--ease-out-expo); }
html.motion .band.is-lit::after { scale: 1 1; }


@media (max-width: 900px) {
  .stats-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .stat-n { font-size: 56px; }
  .works-with { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .works-with-track { width: auto; flex-wrap: wrap; }
  .works-with-viewport { -webkit-mask: none; mask: none; }
  .works-with-list[aria-hidden] { display: none; }
  .works-with-list { flex-wrap: wrap; }
  .cabinet-inside::before, .cabinet-inside::after { display: none; }
}

/* The station for the section on screen glows as the needle passes it. */
.tape-home .rs-stations a.is-lit { color: var(--set-ivory); opacity: 1; text-shadow: 0 0 4px var(--set-glow), 0 0 14px var(--set-glow); transition: color 400ms, text-shadow 400ms; }

/* How it works: a lit ring moves to the part of the screen each step describes,
   and a brass rail fills as you read down the steps. */
.flow-frame { position: sticky; }
.flow-focus { position: absolute; z-index: 3; left: 15.5%; top: 33%; width: 59%; height: 60%; border-radius: 8px; box-shadow: 0 0 0 2px var(--marketing-accent), 0 0 0 6px color-mix(in srgb, var(--marketing-accent) 25%, transparent), 0 0 40px color-mix(in srgb, var(--set-glow) 45%, transparent); pointer-events: none; transition: left 900ms var(--ease-out-expo), top 900ms var(--ease-out-expo), width 900ms var(--ease-out-expo), height 900ms var(--ease-out-expo); }
.flow-frame[data-active='group'] .flow-focus { left: 15%; top: 18%; width: 84%; height: 17%; }
.flow-frame[data-active='fix'] .flow-focus { left: 15%; top: 29%; width: 60%; height: 17.5%; }
.flow-focus-label { position: absolute; left: 0; bottom: calc(100% + 10px); padding: 6px 10px; border-radius: 4px; background: var(--marketing-accent); color: var(--marketing-accent-ink); font: 600 13px/1 var(--font-ui); white-space: nowrap; opacity: 0; translate: 0 6px; transition: opacity 300ms, translate 500ms var(--ease-spring); }
.flow-frame[data-active='record'] [data-for='record'], .flow-frame[data-active='group'] [data-for='group'], .flow-frame[data-active='fix'] [data-for='fix'] { opacity: 1; translate: none; transition-delay: 350ms; }
html.station-live .flow-focus::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 2px var(--set-glow); animation: focus-ping 2.4s var(--ease-out-expo) infinite; }
@keyframes focus-ping { from { opacity: .8; scale: 1; } to { opacity: 0; scale: 1.06 1.25; } }
.flow-steps { position: relative; padding-left: 0; }
.flow-steps::before, .flow-steps::after { content: ''; position: absolute; left: 21px; top: 60px; bottom: 60px; width: 2px; border-radius: 0; }
.flow-steps::before { background: color-mix(in srgb, var(--set-brass) 22%, transparent); }
.flow-steps::after { background: linear-gradient(180deg, var(--set-glow), var(--marketing-accent)); box-shadow: 0 0 12px var(--set-glow); transform-origin: 50% 0; scale: 1 var(--flow-p, 0); }
.flow-step h3 { position: relative; z-index: 1; }
@media (max-width: 900px) { .flow-steps::before, .flow-steps::after { display: none; } }
@media (min-width: 901px) { .flow-step p { margin-left: 64px; } }

/* ══ Round 3: blend, visualise, delight ═════════════════════════════════ */

/* The plate is no longer a box: the words sit in the lamp light under the
   cabinet, on a brass edge that fades out at both ends. */
.hero-plate { background: none; box-shadow: none; border-radius: 0; padding: var(--space-2xl) var(--space-3xl) var(--space-xl); }
.hero-plate::before { content: ''; position: absolute; left: 4%; right: 4%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--set-brass) 70%, transparent) 20%, color-mix(in srgb, var(--set-glow) 80%, transparent) 50%, color-mix(in srgb, var(--set-brass) 70%, transparent) 80%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--set-glow) 35%, transparent); }
.hero-plate::after { content: ''; position: absolute; inset: -30% 6% -60%; z-index: -1; background: radial-gradient(ellipse 60% 55% at 50% 30%, color-mix(in srgb, var(--set-glow) 9%, transparent), transparent 70%); pointer-events: none; }
.hero-plate-lead { color: color-mix(in srgb, var(--set-ivory) 94%, var(--set-glow)); text-shadow: 0 1px 12px color-mix(in srgb, var(--marketing-room) 90%, transparent); }
html.station-live .hero-plate::before { animation: edge-draw 1400ms 1000ms var(--ease-out-expo) backwards; transform-origin: 50% 50%; }
@keyframes edge-draw { from { scale: 0 1; opacity: 0; } }
@media (max-width: 820px) {
  .hero-plate { padding: var(--space-2xl) var(--space-lg) var(--space-xl); }
  .hero-plate::before { left: 0; right: 0; }
}

/* Visualisations over the How-it-works screen: each step explains itself. */
.viz { position: absolute; z-index: 4; right: -4%; bottom: 6%; width: min(360px, 62%); padding: var(--space-xl) var(--space-2xl); border-radius: 8px; background: color-mix(in srgb, var(--marketing-room) 88%, transparent); box-shadow: 0 24px 60px color-mix(in srgb, var(--marketing-room) 90%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--set-brass) 40%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--set-ivory); opacity: 0; translate: 0 16px; scale: .97; pointer-events: none; transition: opacity 500ms var(--ease-out-expo), translate 700ms var(--ease-out-expo), scale 700ms var(--ease-out-expo); }
.flow-frame[data-active='record'] .viz-record, .flow-frame[data-active='group'] .viz-group, .flow-frame[data-active='fix'] .viz-fix { opacity: 1; translate: none; scale: none; transition-delay: 250ms; }
.viz-title { margin-bottom: var(--space-lg); color: var(--set-brass-light); font: 600 12px/1 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }

/* Step 1: the last seconds light up in order while a playhead runs. */
.viz-record { overflow: hidden; }
.viz-track { position: relative; display: grid; gap: var(--space-md); margin: 0; padding: 0 0 0 var(--space-xl); list-style: none; }
.viz-track::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: color-mix(in srgb, var(--set-brass) 30%, transparent); }
.viz-track li { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--space-md); align-items: baseline; font-size: 14px; opacity: .35; }
.viz-track li::before { content: ''; position: absolute; left: calc(-1 * var(--space-xl) + 1px); top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--set-brass); }
.viz-track b { color: var(--set-brass-light); font: 600 12px/1.4 var(--font-engrave); letter-spacing: .1em; text-transform: uppercase; }
.viz-track span { font-family: var(--font-mono); font-size: 13px; }
.viz-track li.is-bad span { color: var(--marketing-accent-hover); }
.viz-track li.is-bad::before { background: var(--marketing-accent); box-shadow: 0 0 10px var(--marketing-accent); }
.flow-frame[data-active='record'] .viz-track li { animation: ev-lit 4.8s var(--ease-out-expo) infinite; animation-delay: calc(var(--t) * 700ms + 400ms); }
@keyframes ev-lit { 0% { opacity: .35; } 8%, 70% { opacity: 1; } 90%, 100% { opacity: .35; } }
.viz-head { position: absolute; left: var(--space-2xl); right: var(--space-2xl); bottom: var(--space-md); height: 2px; background: linear-gradient(90deg, var(--set-glow), var(--marketing-accent)); box-shadow: 0 0 10px var(--set-glow); transform-origin: 0 50%; scale: 0 1; }
.flow-frame[data-active='record'] .viz-head { animation: playhead 4.8s linear infinite 400ms; }
@keyframes playhead { from { scale: 0 1; } 70% { scale: 1 1; } 100% { scale: 1 1; opacity: 0; } }

/* Step 2: reports fall in and the count climbs. */
.viz-drops { position: relative; height: 64px; }
.viz-drops span { position: absolute; left: calc(var(--d) * 17%); top: 0; padding: 4px 8px; border-radius: 4px; background: color-mix(in srgb, var(--set-ivory) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--set-ivory) 25%, transparent); font: 600 11px/1 var(--font-ui); opacity: 0; }
.flow-frame[data-active='group'] .viz-drops span { animation: drop-in 4s var(--ease-out-expo) infinite; animation-delay: calc(var(--d) * 280ms); }
@keyframes drop-in { 0% { opacity: 0; translate: 0 -12px; } 12% { opacity: 1; translate: 0 0; } 40% { opacity: 1; translate: calc(50% - var(--d) * 12%) 52px; scale: .6; } 48%, 100% { opacity: 0; translate: calc(50% - var(--d) * 12%) 56px; scale: .4; } }
.viz-issue { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: 6px; background: color-mix(in srgb, var(--set-ivory) 10%, transparent); box-shadow: inset 0 0 0 1px var(--marketing-accent); }
.viz-issue-name { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.viz-issue-n { color: var(--set-glow); font: 700 18px/1 var(--font-display); text-shadow: 0 0 12px var(--set-glow); }
.flow-frame[data-active='group'] .viz-issue-n { animation: n-pop 4s var(--ease-spring) infinite 1.4s; }
@keyframes n-pop { 0%, 20% { scale: 1; } 28% { scale: 1.35; } 40%, 100% { scale: 1; } }

/* Step 3: the handoff lights stage by stage while a pulse travels. */
.viz-fix { overflow: hidden; }
.viz-pipe { position: relative; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.viz-pipe::before { content: ''; position: absolute; left: 10%; right: 10%; top: 9px; height: 2px; background: color-mix(in srgb, var(--set-brass) 35%, transparent); }
.viz-pipe li { position: relative; display: grid; justify-items: center; gap: var(--space-md); width: 33%; font-size: 13px; text-align: center; opacity: .45; }
.viz-pipe i { width: 20px; height: 20px; border-radius: 50%; background: var(--set-walnut-deep); box-shadow: inset 0 0 0 2px var(--set-brass); }
.flow-frame[data-active='fix'] .viz-pipe li { animation: stage-lit 4.5s var(--ease-out-expo) infinite; animation-delay: calc(var(--s) * 900ms + 300ms); }
.flow-frame[data-active='fix'] .viz-pipe i { animation: stage-dot 4.5s var(--ease-out-expo) infinite; animation-delay: calc(var(--s) * 900ms + 300ms); }
@keyframes stage-lit { 0% { opacity: .45; } 10%, 75% { opacity: 1; } 95%, 100% { opacity: .45; } }
@keyframes stage-dot { 0% { background: var(--set-walnut-deep); box-shadow: inset 0 0 0 2px var(--set-brass); } 10%, 75% { background: var(--success); box-shadow: inset 0 0 0 2px var(--success), 0 0 14px var(--success); } 95%, 100% { background: var(--set-walnut-deep); box-shadow: inset 0 0 0 2px var(--set-brass); } }
.viz-pulse { position: absolute; left: calc(var(--space-2xl) + 10%); top: calc(var(--space-xl) + 12px + 1.4em); width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--set-glow); box-shadow: 0 0 14px var(--set-glow); opacity: 0; }
.flow-frame[data-active='fix'] .viz-pulse { animation: pulse-run 4.5s var(--ease-standard) infinite 300ms; }
@keyframes pulse-run { 0% { opacity: 0; translate: 0 0; } 5% { opacity: 1; } 45% { opacity: 1; translate: 520% 0; } 50% { opacity: 0; } 100% { opacity: 0; } }

/* Platforms: sources flow into one inbox, and on to your agent. */
.flow-map { margin: 0 0 var(--space-3xl); }
.flow-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.fm-path { fill: none; stroke: url(#fm-line); stroke-width: 2; stroke-dasharray: 6 8; }
html.station-live .fm-path { animation: dash-run 1.4s linear infinite; }
@keyframes dash-run { to { stroke-dashoffset: -28; } }
.fm-stop-a { stop-color: var(--set-brass); stop-opacity: .5; }
.fm-stop-b { stop-color: var(--set-glow); stop-opacity: .9; }
.fm-dot-core { stop-color: var(--set-ivory); }
.fm-dot-edge { stop-color: var(--set-glow); stop-opacity: 0; }
.fm-node rect { fill: color-mix(in srgb, var(--set-walnut) 70%, var(--marketing-room)); stroke: color-mix(in srgb, var(--set-brass) 55%, transparent); stroke-width: 1; }
.fm-node text { fill: var(--set-ivory); font: 600 16px var(--font-display); text-anchor: middle; }
.fm-node .fm-sub { fill: var(--set-brass-light); font: 600 12px var(--font-engrave); letter-spacing: .1em; text-transform: uppercase; }
.fm-hub rect { stroke: var(--marketing-accent); stroke-width: 2; }
.fm-agent rect { stroke: var(--set-glow); }
html.station-live .fm-hub rect { animation: hub-glow 3.2s ease-in-out infinite; }
@keyframes hub-glow { 50% { filter: drop-shadow(0 0 12px var(--marketing-accent)); } }
.flow-map:not(.is-live) .fm-dots { display: none; }

/* The HOME knob turns as you tune through the page. */
.tape-home .rs-home .rs-knob { rotate: calc(var(--tune, 0) * -280deg); transition: transform var(--motion-slow) var(--ease-standard), filter var(--motion-base), rotate 500ms var(--ease-out-expo); }

/* Section headings: each word warms as it rises into place. */
html.motion .band h2.rv-words.is-in .w > span { animation: word-warm 1600ms var(--ease-out-expo) backwards; animation-delay: calc(var(--wi, 0) * 55ms + 250ms); }
@keyframes word-warm { from { text-shadow: 0 0 18px var(--set-glow), 0 0 42px color-mix(in srgb, var(--set-glow) 60%, transparent); color: var(--set-ivory); } }

@media (max-width: 900px) { .viz { display: none; } .flow-map { margin-bottom: var(--space-2xl); } }
@media (prefers-reduced-motion: reduce) {
  .viz { transition: none; }
  .viz *, .viz-head, .viz-pulse { animation: none !important; }
  .viz-track li, .viz-pipe li { opacity: 1; }
  .viz-drops { display: none; }
  .fm-path { animation: none; }
  .tape-home .rs-home .rs-knob { rotate: none; }
}
/* On phones the diagram's labels would be too small to read; the cards below say the same. */
@media (max-width: 640px) { .flow-map { display: none; } }

/* Is it safe: the facts, and a switch that shows what BugTape receives in each privacy setting.
   Pure CSS (:has on the radio group); no script needed. */
.safe-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-page); align-items: center; }
.safe-facts { display: grid; gap: var(--space-lg); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.safe-facts li { position: relative; padding-left: var(--space-2xl); color: var(--marketing-muted); }
.safe-facts li::before { content: ''; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; background: var(--set-brass); transform: rotate(45deg); }
.safe-facts b { color: var(--marketing-text); }
.safe-demo { margin: 0; padding: var(--space-2xl); border: 1px solid color-mix(in srgb, var(--set-brass) 40%, var(--marketing-border)); border-radius: var(--rounded-sm); background: var(--set-grain, none), linear-gradient(180deg, color-mix(in srgb, var(--set-walnut) 55%, var(--marketing-room)), var(--set-walnut-deep)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--set-brass-light) 25%, transparent), 0 24px 60px var(--marketing-room); }
.safe-modes { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0 0 var(--space-xl); padding: 0; border: 0; }
.safe-modes legend { margin-bottom: var(--space-md); color: var(--set-brass-light); font: 500 11px/1 var(--font-engrave); letter-spacing: .16em; text-transform: uppercase; }
.safe-modes label { position: relative; cursor: pointer; }
.safe-modes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.safe-modes span { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 16px; border: 1px solid var(--marketing-border); border-radius: var(--rounded-sm); color: var(--marketing-muted); font: 600 13px/1 var(--font-ui); letter-spacing: .04em; transition: color var(--motion-fast), border-color var(--motion-fast), background-color var(--motion-fast); }
.safe-modes input:checked + span { border-color: var(--marketing-accent); background: color-mix(in srgb, var(--marketing-accent) 16%, transparent); color: var(--marketing-text); box-shadow: 0 0 16px color-mix(in srgb, var(--set-glow) 25%, transparent); }
.safe-modes input:focus-visible + span { outline: 2px solid var(--marketing-accent); outline-offset: 2px; }
.safe-screen { padding: var(--space-xl); border-radius: var(--rounded-xs); background: var(--marketing-bg); box-shadow: inset 0 0 0 1px var(--marketing-border); }
.safe-cap { margin: 0 0 var(--space-lg); color: var(--marketing-muted); font: 500 11px/1 var(--font-engrave); letter-spacing: .16em; text-transform: uppercase; }
.safe-replay { display: grid; gap: var(--space-md); margin: 0; }
.safe-replay > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; padding-bottom: var(--space-md); border-bottom: 1px solid var(--marketing-border); }
.safe-replay dt { color: var(--marketing-muted); font-size: 13px; }
.safe-replay dt small { display: block; margin-top: 2px; color: color-mix(in srgb, var(--marketing-muted) 70%, transparent); font: 12px/1.3 var(--font-mono); }
.safe-replay dd { margin: 0; color: var(--marketing-text); font: 14px/1.4 var(--font-mono); }
.safe-replay .is-masked { color: var(--marketing-muted); letter-spacing: .08em; }
.safe-replay .is-left-out { color: var(--marketing-muted); font-family: var(--font-ui); font-style: italic; }
.safe-none { display: none; margin: 0; color: var(--marketing-muted); font-style: italic; }
.safe-error { display: flex; gap: var(--space-md); margin: var(--space-lg) 0 0; color: var(--marketing-text); font: 13px/1.5 var(--font-mono); }
.safe-error span { color: var(--marketing-danger); font: 600 11px/1.9 var(--font-engrave); letter-spacing: .12em; text-transform: uppercase; }
.safe-demo figcaption { margin-top: var(--space-lg); color: var(--marketing-muted); font-size: 13px; }
.m-strict, .m-sealed, .m-note-strict, .m-note-sealed, .m-note-errors { display: none; }
.safe-demo:has(input[value="sealed"]:checked) .m-plain, .safe-demo:has(input[value="sealed"]:checked) .m-note-standard { display: none; }
.safe-demo:has(input[value="sealed"]:checked) .m-sealed { display: inline; color: var(--marketing-accent); }
.safe-demo:has(input[value="sealed"]:checked) .m-note-sealed { display: inline; }
.m-sealed small { color: var(--marketing-muted); font: 12px/1 var(--font-ui); }
.safe-demo:has(input[value="strict"]:checked) .m-plain, .safe-demo:has(input[value="strict"]:checked) .m-note-standard { display: none; }
.safe-demo:has(input[value="strict"]:checked) .m-strict { display: inline; color: var(--marketing-muted); }
.safe-demo:has(input[value="strict"]:checked) .m-note-strict { display: inline; }
.safe-demo:has(input[value="errors"]:checked) .safe-replay > div, .safe-demo:has(input[value="errors"]:checked) .m-note-standard { display: none; }
.safe-demo:has(input[value="errors"]:checked) .safe-none, .safe-demo:has(input[value="errors"]:checked) .m-note-errors { display: block; }
html.motion .safe-demo .safe-replay dd { animation: safe-swap 420ms var(--ease-out-expo); }
@keyframes safe-swap { from { opacity: .2; filter: blur(3px); } }
@media (max-width: 900px) { .safe-split { grid-template-columns: minmax(0, 1fr); } }