/* cueslides.com. Brand from brand/README.md: Ink, Paper, Coral; Instrument Serif Italic and Inter Tight.
   Coral only marks what is being said: an underline, a full stop, the word being spoken. */
:root {
  --ink: #07070A;
  --paper: #F3F1EC;
  --quiet: rgba(243, 241, 236, .62);
  --faint: rgba(243, 241, 236, .38);
  --line: rgba(243, 241, 236, .1);
  --line-2: rgba(243, 241, 236, .2);
  --coral: #FF6B3D;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --out: cubic-bezier(.16, 1, .3, 1);
  --io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Set on the demo frame every frame while scrolling or tilting. Registered as non-inherited so changing them doesn't
   make the browser restyle every element inside the deck. */
@property --p { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --tx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ty { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 1rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--coral); color: var(--ink); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stop { color: var(--coral); }

/* Fine film grain and a soft vignette. No glow. */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(243, 241, 236, .045), transparent 60%); }
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .045;
  background-image: 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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .foot { position: relative; z-index: 1; }
/* The moving background (assets/bg.js): a slow field of coral and violet light. It fades in once it's drawing. */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 2s ease; }
#bg.on { opacity: 1; }

/* ---------- Header ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: clamp(1.25rem, 3vw, 2rem) var(--gutter);
  transition: transform .6s var(--out), padding .5s var(--out), background-color .5s, box-shadow .5s; }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s; background: rgba(7, 7, 10, .62); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 -1px 0 var(--line); }
.top.scrolled { padding-top: .9rem; padding-bottom: .9rem; }
.top.scrolled::before { opacity: 1; }
.top.tuck { transform: translateY(-100%); }
.brand { display: block; width: 4.6rem; transition: width .5s var(--out); }
.scrolled .brand { width: 3.9rem; }
.brand svg { display: block; width: 100%; height: auto; }
.top-r { position: relative; display: flex; align-items: center; justify-content: flex-end; }
/* Once you've scrolled past the sign-up, a quiet link takes you back to it. */
.top-cta { position: relative; font-size: .875rem; color: var(--paper); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .4s, transform .5s var(--out); }
.top-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.2rem; height: 1px; background: var(--coral); transform: scaleX(.25); transform-origin: left; transition: transform .5s var(--out); }
.top-cta:hover::after { transform: scaleX(1); }
.past .top-cta { opacity: 1; transform: none; pointer-events: auto; }
.joined .top-cta { display: none; }

/* ---------- Hero: one screen, one action ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 7rem var(--gutter) 4rem;
}
.hero-in { display: flex; flex-direction: column; align-items: center; width: 100%; will-change: transform, opacity; }
.head { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(3.4rem, 10.5vw, 9.5rem); line-height: .94; letter-spacing: -.025em; }
.head .ln { display: block; }
.head .w { display: inline-block; position: relative; }
.head .u::after {
  content: ""; position: absolute; left: .02em; right: .05em; bottom: -.04em; height: .068em; border-radius: .04em;
  background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--out) 1s;
}
/* Two quiet credits along the bottom of the hero, like the corners of a title card. */
.hero-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(1.25rem, 3vh, 2rem); display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem; color: var(--faint); }
.hero-foot a { transition: color .2s; }
.hero-foot a:hover { color: var(--paper); }
.hero-foot a span { display: inline-block; margin-left: .3rem; animation: nudge 2.4s var(--io) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(3px); } }
@media (max-height: 560px) { .hero-foot { display: none; } }
.sub { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 31rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--quiet); }

/* Words rise into place once the intro hands over. Without JS everything simply shows. */
/* Not quite 0: browsers only count text as shown once it has some opacity, and Google measures page speed by when the
   headline shows. At .01 it's invisible (and under the intro anyway), but counts as painted from the first frame. */
.js .head .w { opacity: .01; transform: translateY(.35em); filter: blur(8px); }
.js .rise { opacity: .01; transform: translateY(14px); }
.ready .head .w { opacity: 1; transform: none; filter: none; transition: opacity .9s var(--out), transform 1.1s var(--out), filter .9s var(--out); transition-delay: calc(var(--i) * 70ms); }
.ready .head .u::after { transform: scaleX(1); }
.ready .rise { opacity: 1; transform: none; transition: opacity .9s var(--out), transform 1.1s var(--out); transition-delay: var(--d, 0s); }

/* ---------- Waitlist form ---------- */
.join { margin-top: clamp(2rem, 4vw, 2.75rem); width: 100%; max-width: 27rem; }
.join-row {
  display: flex; gap: .25rem; padding: .3125rem; border-radius: 999px;
  background: rgba(243, 241, 236, .045); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .3s, background-color .3s;
}
.join-row:focus-within { box-shadow: inset 0 0 0 1px rgba(243, 241, 236, .45); background: rgba(243, 241, 236, .06); }
.join input[type=email] { flex: 1; min-width: 0; background: none; border: 0; outline: 0; padding: 0 .75rem 0 1.125rem; font-size: 1rem; }
.join input::placeholder { color: var(--faint); }
.join .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 2.875rem; padding: 0 1.25rem; border: 0; border-radius: 999px;
  background: var(--paper); color: var(--ink); font-weight: 500; font-size: .9375rem; white-space: nowrap; cursor: pointer;
  transition: transform .3s var(--out), background-color .2s, opacity .2s;
}
.btn:hover { background: #fff; }
.roll { display: inline-block; position: relative; overflow: hidden; vertical-align: top; line-height: 1.3; }
.roll > span { display: block; transition: transform .55s var(--out); }
.roll > span + span { position: absolute; inset: 100% 0 auto; }
.btn:hover .roll > span { transform: translateY(-100%); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn.ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); height: 2.625rem; }
.btn.ghost:hover { background: rgba(243, 241, 236, .06); }
.note { margin-top: .875rem; font-size: .8125rem; color: var(--faint); min-height: 1.3em; }
.note.err { color: #FF9C7A; }
@media (max-width: 440px) {
  .join-row { flex-direction: column; border-radius: 1.5rem; padding: .375rem; }
  .join input[type=email] { height: 2.875rem; text-align: center; padding: 0 .75rem; }
}

/* After signing up: the form gives way to your place in line. */
.done { display: none; flex-direction: column; align-items: center; margin-top: clamp(2rem, 4vw, 2.75rem); }
.joined .join { display: none; }
.joined .done { display: flex; animation: in .9s var(--out) both; }
.done-n { font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; }
.done-t { margin: .875rem 0 1.375rem; max-width: 24rem; color: var(--quiet); font-size: .9375rem; }
@keyframes in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Showcase ---------- */
.show { position: relative; width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter) clamp(5rem, 10vw, 8rem); perspective: 1600px; }
.frame { position: relative; z-index: 1; transform-origin: 50% 100%; transform: rotateX(calc((1 - var(--p, 1)) * 14deg + var(--tx, 0deg))) rotateY(var(--ty, 0deg)) scale(calc(.9 + var(--p, 1) * .1)); opacity: calc(.25 + var(--p, 1) * .75); will-change: transform; border-radius: clamp(.75rem, 1.4vw, 1.25rem); padding: clamp(.35rem, .7vw, .55rem); background: rgba(243, 241, 236, .04); box-shadow: inset 0 0 0 1px var(--line), 0 50px 120px -40px rgba(0, 0, 0, .95); }
.screen { position: relative; aspect-ratio: 16 / 9; border-radius: clamp(.45rem, 1vw, .8rem); overflow: hidden; background: #F4F1EA; container-type: inline-size; }
.voice { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); min-height: 1.75rem; }
.mic { position: relative; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--quiet); flex: none; }
.mic .lv { position: absolute; inset: -1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--paper); opacity: 0; transform: scale(var(--lv, 1)); transition: opacity .2s, transform .12s; }
.mic.live .lv { opacity: .5; }
.mic svg { width: .875rem; height: .875rem; }
.said { font-size: clamp(.9375rem, 1.4vw, 1.0625rem); color: var(--faint); min-height: 1.5em; }
.said span { transition: color .25s; position: relative; }
.said span.s { color: var(--paper); }
.said span.k.s { color: var(--paper); }
.said span.k.s::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.2em; height: 2px; border-radius: 2px; background: var(--coral); }
.said .cmd { color: var(--faint); font-style: italic; margin-left: .4em; opacity: 0; transition: opacity .3s; }
.said .cmd.s { opacity: 1; }
.cap { margin-top: .75rem; text-align: center; font-size: .75rem; color: var(--quiet); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--out), transform 1.3s var(--out); transition-delay: var(--d, 0s); }
.reveal.in, html:not(.js) .reveal { opacity: 1; transform: none; }

/* The demo deck, in the house style of our pitch decks: colour-blocked slides, Bricolage Grotesque against Instrument Serif
   italic, mono kickers, and a different cut into every slide. Sized in cqw so it scales with its screen. */
.dk { --d-ink: #0D0D11; --d-paper: #F3F0E8; --d-coral: #FF5A36; --d-violet: #6B5CFF; --d-lime: #D4FF3A;
  --e: cubic-bezier(.75, 0, .2, 1); --o: cubic-bezier(.16, .9, .24, 1);
  --disp: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  background: var(--d-ink); font-family: var(--disp); color: #fff; }
.dk .v { position: absolute; inset: 0; padding: 6cqw 6.5cqw 8cqw; display: grid; align-content: center; visibility: hidden; overflow: hidden; }
.dk .v.on { visibility: visible; z-index: 2; will-change: transform; animation: var(--enter, eFade) .95s var(--e) both, settle 4.5s var(--o) both; }
/* The slide after this one waits, fully drawn, underneath it, so the cut doesn't have to draw it from scratch. */
.dk .v.next { visibility: visible; z-index: 0; will-change: transform; }
.dk .v.was { visibility: visible; z-index: 1; will-change: transform; animation: eOut .95s var(--e) both; }
/* Slides that aren't on screen hold their looping animations still. */
.dk .v:not(.on):not(.was), .dk .v:not(.on):not(.was) * { animation-play-state: paused !important; }
/* The shade sits between the outgoing slide and the incoming one, and dims the outgoing slide as the cut happens. */
.dk-shade { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; }
.dk-shade.go { animation: shade .95s var(--e) both; }
.dk-shade.go2 { animation: shade2 .95s var(--e) both; }
.dk-shade.go.held { animation: shadeHeld 1.05s var(--e) both; }
.dk-shade.go2.held { animation: shadeHeld2 1.05s var(--e) both; }
@keyframes shade { from { opacity: 0; } to { opacity: .5; } }
@keyframes shade2 { from { opacity: 0; } to { opacity: .5; } }
@keyframes shadeHeld { from { opacity: 0; } to { opacity: .3; } }
@keyframes shadeHeld2 { from { opacity: 0; } to { opacity: .3; } }
/* Growing out of an element: the new slide opens from that element's exact box, and the old slide holds still beneath it. */
.dk .v.on.grow { animation: eGrow 1.05s var(--e) both; }
.dk .v.was.held { animation: none; }
@keyframes eGrow { from { clip-path: inset(var(--gt) var(--gr) var(--gb) var(--gl)); } to { clip-path: inset(0); } }
/* A slow camera settle on every slide, like a dolly coming to rest. */
@keyframes settle { from { transform: scale(1.045); } to { transform: none; } }
.v-dark { background: var(--d-ink); color: #fff; }
.v-light { background: var(--d-paper); color: var(--d-ink); }
.v-coral { background: var(--d-coral); color: var(--d-ink); }
.v-violet { background: var(--d-violet); color: #fff; }
.v-c { place-items: center; text-align: center; }
@keyframes eFade { from { opacity: 0; } }
@keyframes eUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes eCircle { from { clip-path: circle(0% at 50% 55%); } to { clip-path: circle(80% at 50% 55%); } }
@keyframes eDiag { from { clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); } to { clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%); } }
@keyframes eIris { from { clip-path: circle(0% at 100% 100%); } to { clip-path: circle(150% at 100% 100%); } }
@keyframes eLeft { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes eZoom { from { clip-path: inset(18% 22% round 3cqw); opacity: 0; } to { clip-path: inset(0 round 0); opacity: 1; } }
@keyframes eOut { to { transform: scale(.92); } }

/* Reveals: everything in a slide waits for .live, then comes in on its own delay. */
.dk .r { opacity: 0; }
.dk .live .r { animation: rUp .8s var(--o) var(--d, 0s) both; }
.dk .live .r.fade { animation-name: rFade; }
.dk .live .r.left { animation-name: rLeft; }
.dk .live .r.right { animation-name: rRight; }
@keyframes rUp { from { opacity: 0; transform: translateY(2.2cqw); } to { opacity: 1; transform: none; } }
@keyframes rFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rLeft { from { opacity: 0; transform: translateX(-4cqw); } to { opacity: 1; transform: none; } }
@keyframes rRight { from { opacity: 0; transform: translateX(4cqw); } to { opacity: 1; transform: none; } }
.dk .ln { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .08em .02em .14em; margin: -.08em -.02em -.14em; }
.dk .ln > span { display: inline-block; transform: translateY(115%); }
.dk .live .ln > span { animation: lnUp .9s var(--o) var(--d) both; }
.dk .live .rot .ln > span { animation-name: lnRot; }
.dk .live .skew .ln > span { animation-name: lnSkew; }
.dk .blur .ln { overflow: visible; }
.dk .blur .ln > span { transform: none; opacity: 0; }
.dk .live .blur .ln > span { animation-name: lnBlur; animation-duration: 1.1s; }
@keyframes lnUp { from { transform: translateY(115%); } to { transform: none; } }
@keyframes lnRot { from { transform: translateY(115%) rotate(14deg); } to { transform: none; } }
@keyframes lnSkew { from { transform: translateY(115%) skewY(12deg); } to { transform: none; } }
@keyframes lnBlur { from { opacity: 0; filter: blur(1cqw); transform: scale(1.5); } to { opacity: 1; filter: none; transform: none; } }
@keyframes lnGhost { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: none; } }

.dk .k { display: inline-flex; align-items: center; gap: .8cqw; font: 500 max(1.05cqw, 7px)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 2cqw; }
.dk .k::before { content: ""; width: .75cqw; height: .75cqw; background: currentColor; border-radius: .15cqw; }
.dk h3 { font-family: var(--disp); font-style: normal; font-size: 6.4cqw; line-height: .98; letter-spacing: -.04em; font-weight: 700; }
.dk em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

.dk-bar { position: absolute; top: 0; left: 0; right: 0; height: .3cqw; z-index: 6; background: rgba(255, 255, 255, .08); }
.dk-bar i { position: absolute; inset: 0; background: var(--d-coral); transform-origin: left; transform: scaleX(0); transition: transform .8s var(--e); }
.dk-hud { position: absolute; left: 6.5cqw; right: 6.5cqw; bottom: 3cqw; z-index: 6; display: flex; justify-content: space-between; align-items: center; font: 500 max(1.05cqw, 7px) var(--mono); letter-spacing: .1em; color: #fff; transition: color .5s; }
.dk[data-tone="light"] .dk-hud { color: var(--d-ink); }
.dk-brand { font: 700 1.5cqw var(--disp); letter-spacing: -.02em; }
.dk-brand i { color: var(--d-coral); font-style: normal; }

/* 1 · title: one warm light from above, one light leak across the frame, a running timecode, letters that flip up into place. */
.spot { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 75% at 62% -10%, rgba(255, 236, 220, .16), transparent 70%); animation: breathe 6s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: .55; transform: translateX(-4cqw); } }
.leak { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 200, 170, .14) 46%, rgba(255, 240, 225, .3) 50%, rgba(255, 200, 170, .14) 54%, transparent 62%) 120% 0 / 250% 100% no-repeat; }
.dk .live .leak { animation: leak 1.6s var(--e) .95s both; }
@keyframes leak { from { opacity: 1; background-position: 120% 0; } to { opacity: 1; background-position: -30% 0; } }
.vf { position: absolute; inset: 2.6cqw; pointer-events: none; }
.vf i { position: absolute; width: 2.2cqw; height: 2.2cqw; border: 1.5px solid rgba(255, 255, 255, .33); }
.vf i:nth-child(1) { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; } .vf i:nth-child(2) { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; }
.vf i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; } .vf i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; }
.rec { position: absolute; top: 5.2cqw; right: 6.5cqw; display: flex; align-items: center; gap: .8cqw; font: 500 max(1.05cqw, 7px)/1 var(--mono); letter-spacing: .14em; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
.rec i { width: .8cqw; height: .8cqw; border-radius: 50%; background: #FF3B30; animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.tag { position: relative; justify-self: start; display: inline-flex; gap: .8cqw; align-items: center; font: 500 1.05cqw/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, .2); border-radius: 99px; padding: .8cqw 1.2cqw; }
.tag i { width: .7cqw; height: .7cqw; border-radius: 50%; background: var(--d-coral); }
.dk .mark { position: relative; font-size: 17cqw; font-weight: 800; letter-spacing: -.065em; line-height: .86; margin: .12em 0 .1em -.04em; }
.dk .mark b { position: relative; color: var(--d-coral); }
.dk .mark b .ln > span { color: var(--d-coral); }
.dk .flip .ln { overflow: visible; perspective: 30cqw; }
.dk .flip .ln > span { transform-origin: 50% 100%; }
.dk .live .flip .ln > span { animation-name: lnFlip; animation-duration: 1s; }
@keyframes lnFlip { from { opacity: 0; transform: translateY(30%) rotateX(-100deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
/* On "Cue": the full stop pops and sends out a ring. */
.dk .live .mark.hit b .ln > span { animation: dotPop .7s var(--o) both; }
@keyframes dotPop { 0% { opacity: 1; transform: none; } 35% { opacity: 1; transform: translateY(-.18em) scale(1.35); } 100% { opacity: 1; transform: none; } }
.dk .mark b::after { content: ""; position: absolute; left: -.01em; bottom: .24em; width: .2em; height: .2em; border-radius: 50%; box-shadow: 0 0 0 .02em var(--d-coral); opacity: 0; }
.dk .mark.hit b::after { animation: ring 1s var(--o) .1s both; }
@keyframes ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(5); } }
.lede { position: relative; font-family: var(--serif); font-size: 3cqw; line-height: 1.1; color: rgba(255, 255, 255, .82); }
.lede em { color: var(--d-coral); }

/* 2 · problem: three identical template slides bob on the spot, then freeze solid on "frozen". */
.g2 { display: grid; grid-template-columns: 1fr 1.05fr; gap: 5cqw; align-items: center; }
.g2 > * { min-width: 0; }
.stack { position: relative; aspect-ratio: 16 / 10; }
.tsl { position: absolute; inset: 0; border-radius: 1.2cqw; background: #fff; padding: 6% 7%; overflow: hidden; font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 1.2cqw 2cqw -1.2cqw rgba(13, 13, 17, .35), 0 0 0 1px rgba(13, 13, 17, .06); animation: bob 2.2s ease-in-out infinite alternate; }
.tsl:nth-child(1) { translate: -11% 9%; rotate: -8deg; scale: .84; animation-delay: -.7s; }
.tsl:nth-child(2) { translate: 10% -7%; rotate: 6deg; scale: .86; animation-delay: -1.5s; }
.tsl:nth-child(3) { scale: .9; }
@keyframes bob { from { transform: translateY(2.5%) rotate(-1.2deg); } to { transform: translateY(-3%) rotate(1.2deg); } }
.tsl-top { display: flex; align-items: center; gap: .6cqw; font-size: max(.95cqw, 6px); color: #8a93a6; }
.tsl-top i { width: 1.3cqw; height: 1.3cqw; border-radius: .25cqw; background: #4a78d0; }
.tsl b { display: block; width: 42%; height: 2.2cqw; margin: 2.6cqw 0 1.4cqw; border-radius: .3cqw; background: #1f2a44; }
.tsl span { display: block; width: 40%; height: .7cqw; margin-top: 1cqw; border-radius: 1cqw; background: #c9cfdb; }
.tsl span:nth-of-type(2) { width: 33%; } .tsl span:nth-of-type(3) { width: 37%; }
.tsl-img { position: absolute; right: 7%; top: 27%; width: 38%; height: 50%; border-radius: .7cqw; background: linear-gradient(160deg, #c9d6ee, #8fa8d8 60%, #6f8cc8); }
.tsl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(160, 205, 245, .55), rgba(235, 247, 255, .2) 55%, rgba(150, 195, 240, .45)); opacity: 0; transition: opacity .35s; }
.frost { position: absolute; inset: -14%; z-index: 4; pointer-events: none; opacity: 0; transform: scale(.7); transition: opacity .5s, transform .9s var(--o);
  background: radial-gradient(closest-side, transparent 55%, rgba(200, 228, 252, .55) 80%, rgba(225, 242, 255, .85) 100%); }
.crack { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; overflow: visible; pointer-events: none; }
.crack path { fill: none; stroke: #fff; stroke-width: .7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.g2.hit .tsl { animation-play-state: paused; filter: grayscale(1) contrast(.9) brightness(1.03); transition: filter .3s; }
.g2.hit .tsl::after { opacity: 1; }
.g2.hit .frost { opacity: 1; transform: none; }
.g2.hit .crack path { animation: crack .32s ease-out both; }
.g2.hit .crack path:nth-child(2) { animation-delay: .04s; } .g2.hit .crack path:nth-child(3) { animation-delay: .07s; }
.g2.hit .crack path:nth-child(4) { animation-delay: .05s; } .g2.hit .crack path:nth-child(5) { animation-delay: .18s; } .g2.hit .crack path:nth-child(6) { animation-delay: .22s; }
@keyframes crack { to { stroke-dashoffset: 0; } }
.ice .ln > span { transition: color .4s; }
.g2.hit .ice .ln > span { color: #3D8FD6; }
.dk .live .g2.hit .ice .ln > span { animation: shiver .5s linear both; }
@keyframes shiver { 0%, 100% { opacity: 1; transform: none; } 20% { opacity: 1; transform: translateX(-.04em); } 40% { opacity: 1; transform: translateX(.04em); } 60% { opacity: 1; transform: translateX(-.025em); } 80% { opacity: 1; transform: translateX(.02em); } }
.stamp { position: absolute; z-index: 6; right: -1cqw; bottom: -3.4cqw; font: 600 1.15cqw/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--d-coral); border: 1.5px solid var(--d-coral); padding: .6cqw .8cqw; border-radius: .5cqw; background: var(--d-paper); opacity: 0; transform: rotate(-5deg) scale(2.4); }
.g2.hit .stamp { animation: slam .45s cubic-bezier(.5, 0, .75, 0) .25s both; }
@keyframes slam { 0% { opacity: 0; transform: rotate(-14deg) scale(2.4); } 70% { opacity: 1; transform: rotate(-5deg) scale(.94); } 100% { opacity: 1; transform: rotate(-5deg); } }

/* 3 · motion: ripples, a spinning badge, and a word that leaves a motion trail when it whips on "move". */
.v-motion { overflow: hidden; }
.ripples { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ripples i { grid-area: 1 / 1; width: 26cqw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(13, 13, 17, .25); opacity: 0; animation: ripple 4.8s linear infinite; }
.ripples i:nth-child(2) { animation-delay: 1.2s; } .ripples i:nth-child(3) { animation-delay: 2.4s; } .ripples i:nth-child(4) { animation-delay: 3.6s; }
@keyframes ripple { 0% { transform: scale(.25); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(3.6); opacity: 0; } }
.ow { position: relative; }
.ring { position: absolute; z-index: 2; right: -14%; top: -12%; width: 13cqw; aspect-ratio: 1; animation: spin 16s linear infinite; }
.ring text { font: 600 15.5px var(--mono); letter-spacing: .14em; fill: var(--d-ink); }
@keyframes spin { to { rotate: 360deg; } }
.dk .big { font-family: var(--serif); font-style: italic; font-size: 19cqw; line-height: .82; letter-spacing: -.035em; margin: .02em 0 .14em; }
.dk .foot { font: 500 max(1.05cqw, 7px) var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.dk .ghost { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.dk .live .trail .ln > span { animation-delay: calc(var(--d) + var(--lag, 0s)); }
.dk .live .ghost .ln > span { animation-name: lnGhost; }
.dk .ow.hit .trail { animation: whip 1.1s var(--o) var(--lag, 0s) both; }
@keyframes whip { 0% { transform: none; } 28% { transform: translateX(-6cqw) skewX(16deg); } 60% { transform: translateX(2.6cqw) skewX(-7deg); } 100% { transform: none; } }

/* 4 · describe, then design: a prompt types itself, and a deck fans out of it. */
.v-gen { align-content: center; }
.v-gen h3 { font-size: 5.4cqw; max-width: 20ch; }
.prompt { display: flex; align-items: center; gap: 1.2cqw; margin-top: 3.4cqw; height: 6cqw; padding: 0 .6cqw 0 1.8cqw; border-radius: 99px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font: 500 1.7cqw/1 var(--sans); color: #fff; }
.prompt.hit { box-shadow: inset 0 0 0 1px rgba(255, 90, 54, .7), 0 0 0 .5cqw rgba(255, 90, 54, .12); transition: box-shadow .4s; }
.pi { color: var(--d-coral); font-size: 1.5cqw; }
.ptx { white-space: nowrap; overflow: hidden; min-width: 0; }
.ptx:empty::before { content: "Describe your talk…"; color: rgba(255, 255, 255, .35); }
.caret { flex: none; width: 2px; height: 2.4cqw; margin-left: -.9cqw; background: var(--d-coral); animation: blink 1s steps(2, jump-none) infinite; }
.go { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .7cqw; height: 4.2cqw; padding: 0 1.8cqw; border-radius: 99px; background: #fff; color: var(--d-ink); font: 600 1.45cqw/1 var(--disp); transition: background-color .3s; }
.go i { font-style: normal; }
.go.hit { background: var(--d-coral); animation: press .45s var(--o); }
@keyframes press { 30% { transform: scale(.9); } }
.gen { display: flex; justify-content: center; margin-top: 3.4cqw; padding-bottom: 1.5cqw; perspective: 60cqw; }
/* The generated deck lands as a fanned hand of slides. */
.gen .th { flex: none; width: 18.6cqw; margin: 0 -.7cqw; }
.gen .th:nth-child(1) { rotate: -9deg; translate: 0 2.2cqw; z-index: 1; }
.gen .th:nth-child(2) { rotate: -4.5deg; translate: 0 .6cqw; z-index: 2; }
.gen .th:nth-child(3) { z-index: 3; }
.gen .th:nth-child(4) { rotate: 4.5deg; translate: 0 .6cqw; z-index: 2; }
.gen .th:nth-child(5) { rotate: 9deg; translate: 0 2.2cqw; z-index: 1; }
.th { position: relative; aspect-ratio: 16 / 9; border-radius: 1cqw; overflow: hidden; padding: 1.3cqw 1.5cqw; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  opacity: 0; transform: translateY(-9cqw) scale(.3) rotateX(60deg); box-shadow: 0 1cqw 1.6cqw -1cqw rgba(0, 0, 0, .7); }
.gen.hit .th { animation: thIn .9s var(--o) calc(.12s + var(--i) * .09s) both, thFloat 2.6s ease-in-out calc(1.3s + var(--i) * .2s) infinite alternate; }
@keyframes thIn { 0% { opacity: 0; transform: translateY(-9cqw) scale(.3) rotateX(60deg); } 50% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes thFloat { from { opacity: 1; transform: none; } to { opacity: 1; transform: translateY(-.7cqw); } }
.th b { font-weight: 800; font-size: 3.4cqw; letter-spacing: -.05em; line-height: .9; }
.th em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.th-k { font: 500 max(.72cqw, 5px)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.th-coral { background: var(--d-coral); color: var(--d-ink); }
.th-ink { background: #1D1D25; color: #fff; }
.th-bars { display: flex; align-items: flex-end; gap: .45cqw; width: 100%; height: 58%; }
.th-bars i { flex: 1; height: var(--h); border-radius: .2cqw; background: var(--d-lime); }
.th-bars i:last-child { background: var(--d-coral); }
.th-paper { background: var(--d-paper); color: var(--d-ink); }
.th-paper > em { font-size: 2cqw; line-height: 1.05; }
.th-violet { background: var(--d-violet); color: #fff; }
.th-violet b em { color: var(--d-lime); }
.th-lime { background: var(--d-lime); color: var(--d-ink); }
.th-lime b { font-size: 2.6cqw; }
.th-dot { align-self: flex-end; width: 3cqw; aspect-ratio: 1; border-radius: 50%; background: var(--d-ink); }

/* 5 · what it makes: three tiles, each landing the moment it's named. */
.v-bento { align-content: center; }
.bento { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1.4cqw; height: 33cqw; }
.tile { border-radius: 1.8cqw; background: var(--d-ink); color: #fff; position: relative; overflow: hidden; display: grid; place-items: center; clip-path: inset(100% 0 0 0); }
.tile.hit { animation: rClip .9s var(--o) both; }
@keyframes rClip { from { clip-path: inset(100% 0 0 0); transform: translateY(4cqw) scale(.94); } 65% { transform: translateY(-.5cqw) scale(1.01); } to { clip-path: inset(0); transform: none; } }
.tile .lb { position: absolute; left: 1.4cqw; bottom: 1.3cqw; font: 500 max(.95cqw, 6.5px) var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.t-type { background: var(--d-coral); color: var(--d-ink); }
.kin { position: relative; width: 100%; height: 60%; }
.kin span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 7cqw; font-weight: 800; letter-spacing: -.05em; opacity: 0; }
.t-type.hit .kin span { animation: kin 2.4s var(--o) infinite; }
.kin span:nth-child(2) { animation-delay: .8s !important; color: #fff; }
.kin span:nth-child(3) { animation-delay: 1.6s !important; font-family: var(--serif); font-style: italic; font-weight: 400; }
@keyframes kin { 0% { opacity: 0; transform: translateY(45%) scale(.7) rotate(-6deg); } 10%, 30% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; transform: translateY(-35%) scale(1.2) rotate(4deg); } }
.t-chart { place-items: start; }
.cnum { position: absolute; left: 1.5cqw; top: 1.3cqw; font-weight: 800; font-size: 4.2cqw; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.chart { position: absolute; left: 0; bottom: 0; width: 100%; height: 66%; clip-path: inset(0 100% 0 0); }
.chart .line { fill: none; stroke: var(--d-lime); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.t-chart.hit .chart { animation: wipeR 1.5s var(--e) .15s both; }
@keyframes wipeR { to { clip-path: inset(0 0 0 0); } }
.t-cut { background: var(--d-violet); }
.cuts { position: relative; width: 70%; aspect-ratio: 16 / 9; border-radius: .8cqw; overflow: hidden; background: var(--d-paper); box-shadow: 0 1cqw 1.6cqw -1cqw rgba(0, 0, 0, .35); }
.cuts i { position: absolute; inset: 0; animation: cut 3s var(--e) infinite; }
.cuts i:nth-child(1) { background: var(--d-coral); animation-name: cutA; }
.cuts i:nth-child(2) { background: var(--d-ink); animation-name: cutB; }
.cuts i:nth-child(3) { background: var(--d-lime); animation-name: cutC; }
@keyframes cutA { 0% { clip-path: inset(0 0 0 100%); } 12%, 100% { clip-path: inset(0); } }
@keyframes cutB { 0%, 33% { clip-path: inset(50% 50% 50% 50%); } 45%, 100% { clip-path: inset(0); } }
@keyframes cutC { 0%, 66% { clip-path: inset(50% 0 50% 0); } 78%, 100% { clip-path: inset(0); } }

/* 6 · voice: the narrator's own sentence, lit word by word as it's spoken, over a live waveform of the voice. */
.v-voice { align-content: center; }
.v-voice .k::before { display: none; }
.k .live { width: .8cqw; height: .8cqw; border-radius: 50%; background: var(--d-lime); animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(212, 255, 58, .7); } 70%, 100% { box-shadow: 0 0 0 1.1cqw rgba(212, 255, 58, 0); } }
.cap-big { position: relative; z-index: 1; font-size: 5.6cqw; font-weight: 700; line-height: 1.04; letter-spacing: -.04em; max-width: 15.5em; min-height: 2.1em; margin-bottom: 9cqw; }
.cap-big span { display: inline-block; color: rgba(255, 255, 255, .26); transition: color .2s; }
.cap-big span.s { color: #fff; animation: wpop .4s var(--o); }
.cap-big span.kw { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; padding-right: .06em; }
.cap-big span.kw.s { color: var(--d-lime); }
@keyframes wpop { from { transform: translateY(.14em) scale(.96); } }
.wave { position: absolute; left: 6.5cqw; bottom: 8cqw; width: calc(100% - 13cqw); height: 9cqw; }

/* 7 · brand kit: a cursor clicks through three brand kits, and the slide re-dresses in each. */
.v-lime { background: var(--d-lime); color: var(--d-ink); }
@keyframes eSplit { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0); } }
.v-kit { --bg: #0D0D11; --fg: #fff; --ac: #FF5A36; --ff: var(--disp); --fw: 800; --fs: normal; }
.v-kit[data-k="1"] { --bg: #F3F0E8; --fg: #15151C; --ac: #6B5CFF; --ff: var(--serif); --fw: 400; --fs: italic; }
.v-kit[data-k="2"] { --bg: #15151C; --fg: #D4FF3A; --ac: #D4FF3A; --ff: var(--mono); --fw: 500; --fs: normal; }
.pv { aspect-ratio: 16 / 9; border-radius: 1.6cqw; overflow: hidden; position: relative; background: var(--bg); color: var(--fg); transition: background .6s var(--e), color .6s; box-shadow: 0 1.6cqw 2.6cqw -1.6cqw rgba(0, 0, 0, .45); }
.pv-tag { position: absolute; left: 6%; top: 9%; font: 600 .9cqw var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ac); border: 1.5px solid var(--ac); padding: .5cqw .7cqw; border-radius: 99px; transition: color .6s, border-color .6s; }
.pv-t { position: absolute; left: 6%; top: 27%; font-family: var(--ff); font-weight: var(--fw); font-style: var(--fs); font-size: 4.4cqw; line-height: .94; letter-spacing: -.03em; }
.pv-t.bump { animation: bump .6s var(--o); }
@keyframes bump { from { opacity: 0; transform: translateY(2cqw); } }
.pv-sh { position: absolute; right: 8%; top: 11%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--ac); transition: background .6s, border-radius .6s var(--e), rotate .6s var(--e); }
.v-kit[data-k="1"] .pv-sh { border-radius: 50% 50% 8% 50%; rotate: 45deg; } .v-kit[data-k="2"] .pv-sh { border-radius: 14%; rotate: 90deg; }
.pv-bars { position: absolute; right: 8%; bottom: 10%; width: 30%; height: 30%; display: flex; align-items: flex-end; gap: 7%; }
.pv-bars i { flex: 1; height: 100%; background: var(--fg); border-radius: .3cqw .3cqw 0 0; transform-origin: bottom; transition: background-color .6s, transform .6s var(--e); }
.pv-bars i:nth-child(1) { transform: scaleY(.35); } .pv-bars i:nth-child(2) { transform: scaleY(.55); } .pv-bars i:nth-child(3) { transform: scaleY(.72); } .pv-bars i:nth-child(4) { background: var(--ac); }
.v-kit[data-k="1"] .pv-bars i:nth-child(1) { transform: scaleY(.6); } .v-kit[data-k="1"] .pv-bars i:nth-child(2) { transform: scaleY(.4); } .v-kit[data-k="1"] .pv-bars i:nth-child(3) { transform: scaleY(.85); }
.v-kit[data-k="2"] .pv-bars i:nth-child(1) { transform: scaleY(.2); } .v-kit[data-k="2"] .pv-bars i:nth-child(2) { transform: scaleY(.75); } .v-kit[data-k="2"] .pv-bars i:nth-child(3) { transform: scaleY(.5); }
.pv-cap { position: absolute; left: 6%; bottom: 9%; font: var(--fs) var(--fw) 1.25cqw/1 var(--ff); padding: .65em .95em; background: var(--fg); color: var(--bg); border-radius: .7cqw; transition: color .6s, background-color .6s; }
.pv-cap b { color: var(--ac); transition: color .6s; }
.v-kit[data-k="2"] .pv-cap b { color: var(--bg); }
.kits { position: relative; display: flex; gap: .8cqw; margin-top: 1.4cqw; }
.kit { position: relative; display: flex; align-items: center; gap: .7cqw; padding: .7cqw 1.1cqw .7cqw .8cqw; border-radius: 99px; border: 1px solid rgba(13, 13, 17, .25); font-size: 1.1cqw; font-weight: 600; transition: color .3s, background-color .3s, border-color .3s; }
.kit i { display: flex; } .kit i b { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; margin-right: -.3cqw; box-shadow: 0 0 0 2px var(--d-lime); }
.kit.on { background: var(--d-ink); color: #fff; border-color: var(--d-ink); }
.kit::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--d-ink); opacity: 0; }
.kit.ping::after { animation: ping .6s var(--o) both; }
@keyframes ping { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
.cur { position: absolute; left: 0; top: 0; z-index: 3; width: 2.3cqw; height: 2.3cqw; margin: -.3cqw 0 0 -.4cqw; opacity: 0; pointer-events: none;
  transform: translate(var(--cx, 30cqw), var(--cy, 8cqw)); transition: transform .38s cubic-bezier(.5, 0, .2, 1), opacity .25s; filter: drop-shadow(0 .3cqw .4cqw rgba(0, 0, 0, .3)); }
.cur.on { opacity: 1; }
.cur.click { animation: click .25s; }
@keyframes click { 50% { scale: .78; } }

/* 8 · end: the whole deck streams past on a tilted wall behind the last line. */
.wall { position: absolute; inset: -30% -25%; perspective: 90cqw; pointer-events: none; opacity: .55; }
.wall-in { position: absolute; inset: 0; display: grid; gap: 1.8cqw; align-content: center; transform: rotateX(32deg) rotateZ(-12deg); }
.wall .row { display: flex; gap: 1.8cqw; width: max-content; animation: mq 46s linear infinite; will-change: transform; }
.wall .row:nth-child(2) { animation-direction: reverse; animation-duration: 40s; }
.wall .row:nth-child(even) { margin-left: -12cqw; }
.wall .th { flex: none; width: 21cqw; opacity: 1; transform: none; animation: none; box-shadow: none; }
.v-end::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 70% at 50% 50%, rgba(13, 13, 17, .92) 30%, rgba(13, 13, 17, .45) 100%); }
.band { position: absolute; z-index: 2; left: -20%; width: 140%; padding: 1.1cqw 0; overflow: hidden; white-space: nowrap; }
.band.a { top: 13%; background: var(--d-coral); color: var(--d-ink); rotate: -5deg; }
.band.b { bottom: 17%; background: var(--d-lime); color: var(--d-ink); rotate: 4deg; }
.mq { display: inline-flex; will-change: transform; animation: mq 26s linear infinite; font-size: 2.9cqw; font-weight: 800; letter-spacing: -.03em; }
.band.b .mq { animation-direction: reverse; font-family: var(--serif); font-style: italic; font-weight: 400; }
@keyframes mq { to { transform: translateX(-50%); } }
.endc { position: relative; z-index: 3; display: grid; justify-items: center; }
.v-end h3 { font-size: 10cqw; letter-spacing: -.055em; line-height: .9; }
.v-end h3 em { color: var(--d-coral); }
.dk .v-end.live h3.hit em .ln > span { animation: punch .9s var(--o) both; }
@keyframes punch { 0% { opacity: 1; transform: none; filter: none; } 30% { opacity: 1; transform: scale(1.22) rotate(-5deg); filter: none; } 100% { opacity: 1; transform: none; filter: none; } }
.pill { display: inline-flex; align-items: center; gap: 1cqw; margin-top: 2.6cqw; padding: 1.2cqw 1.9cqw; border-radius: 99px; background: #fff; color: var(--d-ink); font-weight: 700; font-size: 1.5cqw; }
.pill i { width: .7cqw; height: .7cqw; border-radius: 50%; background: var(--d-coral); animation: blink 1.2s steps(2, jump-none) infinite; }

/* Sound on, shown only when the browser won't let the narration start by itself. */
.snd { position: relative; z-index: 1; display: flex; align-items: center; gap: .5rem; margin: .9rem auto 0; height: 2.25rem; padding: 0 .95rem 0 .8rem; border-radius: 999px; border: 0; background: rgba(243, 241, 236, .07); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--paper); font-size: .8125rem; cursor: pointer; transition: background-color .2s; }
.snd:hover { background: rgba(243, 241, 236, .12); }
.snd svg { width: 1rem; height: 1rem; }
.snd[hidden] { display: none; }
.snd.off .w { opacity: .25; }

/* ---------- Comparison: two decks on one clock ---------- */
.cmp-sec { max-width: 80rem; margin: 0 auto; padding: 0 var(--gutter) clamp(4rem, 9vw, 7rem); }
.vs-h { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.75rem); line-height: 1.02; letter-spacing: -.02em; text-align: center; margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.vs-h em { color: var(--quiet); }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 2vw, 1.5rem); }
.cmp-side figcaption { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .75rem; font-size: .9375rem; }
.cmp-side figcaption b { font-weight: 500; }
.cmp-side figcaption span { color: var(--faint); font-size: .8125rem; }
.cmp-screen { position: relative; aspect-ratio: 16 / 9; border-radius: clamp(.5rem, 1vw, .8rem); overflow: hidden; container-type: inline-size; box-shadow: 0 0 0 1px var(--line), 0 40px 90px -40px rgba(0, 0, 0, .9); }
@media (max-width: 760px) { .cmp { grid-template-columns: 1fr; } }

/* The typical deck: a template, a title, bullets, a stock image, and a plain fade. */
.ta { background: #fff; font-family: Arial, Helvetica, sans-serif; color: #1f2a44; }
.ta .t { position: absolute; inset: 0; padding: 6cqw 7cqw; background: #fff; opacity: 0; transition: opacity .4s ease; }
.ta .t.on { opacity: 1; z-index: 1; }
.ta-top { display: flex; align-items: center; gap: 1.2cqw; font-size: 1.9cqw; color: #8a93a6; }
.ta-top i { width: 2.6cqw; height: 2.6cqw; border-radius: .4cqw; background: #4a78d0; }
.ta h4 { font-size: 6cqw; font-weight: 700; margin: 6cqw 0 2.6cqw; letter-spacing: -.01em; }
.ta p { font-size: 2.6cqw; color: #6b7487; }
.ta ul { width: 50cqw; padding-left: 3.4cqw; font-size: 2.6cqw; line-height: 1.75; color: #4b5568; }
.t1 h4 { margin-top: 12cqw; }
.ta-img { position: absolute; right: 7cqw; top: 15cqw; width: 34cqw; height: 26cqw; border-radius: 1.4cqw; background: linear-gradient(160deg, #c9d6ee, #8fa8d8 60%, #6f8cc8); }
.ta-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(170deg, transparent 40%, rgba(255, 255, 255, .35) 41%); border-radius: 0 0 1.4cqw 1.4cqw; }
.ta-chart { position: absolute; right: 7cqw; bottom: 9cqw; width: 30cqw; height: 24cqw; display: flex; align-items: flex-end; gap: 2cqw; border-bottom: 2px solid #d5dae3; }
.ta-chart i { flex: 1; height: var(--h); background: #4a78d0; }

/* The same three slides in Cue. */
.tb .v { padding: 6cqw 7cqw 7cqw; }
.tb .k { font-size: 1.6cqw; margin-bottom: 2.6cqw; }
.tb .mark { font-size: 15cqw; }
.tb .big { font-size: 21cqw; }
.tb .foot { font-size: 1.7cqw; }
.g2-n { grid-template-columns: 1fr 1fr; align-items: end; }
.num { font-weight: 800; font-size: 15cqw; line-height: .85; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.num b { color: var(--d-coral); font-weight: 800; }
.bars { display: flex; align-items: flex-end; gap: 1.6cqw; height: 30cqw; }
.bars i { flex: 1; height: var(--h); border-radius: .8cqw .8cqw .2cqw .2cqw; background: var(--d-ink); transform-origin: bottom; transform: scaleY(0); }
.bars i.hi { background: var(--d-coral); }
.dk .live .bars i { animation: barUp .9s var(--o) var(--d) both; }
@keyframes barUp { from { transform: scaleY(0); } to { transform: none; } }

/* ---------- Statement, filled in by scrolling ---------- */
.say { max-width: 64rem; margin: 0 auto; padding: clamp(3rem, 8vw, 7rem) var(--gutter) clamp(6rem, 12vw, 10rem); }
.say p { font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 4.6vw, 4rem); line-height: 1.08; letter-spacing: -.02em; text-align: center; text-wrap: balance; }
.js .say .sw { opacity: calc(.16 + var(--o, 0) * .84); transition: opacity .15s linear; }
.say .u { position: relative; display: inline-block; }
.say .u::after { content: ""; position: absolute; left: .02em; right: .04em; bottom: .02em; height: .06em; border-radius: .04em; background: var(--coral); transform: scaleX(var(--o, 0)); transform-origin: left; }
html:not(.js) .say .u::after { transform: none; }

/* ---------- Three points, set like an index: number, title, line ---------- */
.points { max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter) clamp(6rem, 12vw, 10rem); }
.pt { display: grid; grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1fr); align-items: baseline; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-top: 1px solid var(--line-2); }
.pt:last-child { border-bottom: 1px solid var(--line-2); }
.pt > i { font-style: normal; font-size: .8125rem; color: var(--faint); font-variant-numeric: tabular-nums; transition: color .3s; }
.pt b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.02em; transition: transform .6s var(--out); }
.pt span { color: var(--quiet); font-size: 1rem; line-height: 1.55; max-width: 24rem; }
.pt:hover > i { color: var(--coral); }
.pt:hover b { transform: translateX(.4rem); }
@media (max-width: 760px) { .pt { grid-template-columns: 2.5rem 1fr; } .pt span { grid-column: 2; } }

/* ---------- Questions, set like the index above: question, answer ---------- */
.faq { max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter) clamp(6rem, 12vw, 10rem); }
.faq-h { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1; letter-spacing: -.02em; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem clamp(1.5rem, 4vw, 4rem); padding: clamp(1.25rem, 2.5vw, 1.75rem) 0; border-top: 1px solid var(--line-2); }
.qa:last-child { border-bottom: 1px solid var(--line-2); }
.qa h3 { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 500; line-height: 1.35; }
.qa p { color: var(--quiet); font-size: 1rem; line-height: 1.6; max-width: 34rem; }
.qa a { color: inherit; text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: .2em; }
@media (max-width: 760px) { .qa { grid-template-columns: 1fr; gap: .5rem; } }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--quiet); }

/* ---------- Closing sign-up: the last title card ---------- */
.cta { padding: 0 var(--gutter) clamp(6rem, 12vw, 9rem); }
.cta-in { max-width: 72rem; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta-k { font-size: .8125rem; color: var(--faint); margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.cta-h { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(3rem, 9.5vw, 8.5rem); line-height: .92; letter-spacing: -.03em; }
.cta-t { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 27rem; color: var(--quiet); font-size: clamp(1rem, 1.4vw, 1.125rem); text-wrap: balance; }
.cta .join, .cta .done { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* ---------- Footer ---------- */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding: 1.75rem var(--gutter) 2.25rem; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--faint); }

/* ---------- Intro (Sheen) ---------- */
.intro { position: fixed; inset: 0; z-index: 100; cursor: pointer; }
.intro-bg { position: absolute; inset: 0; background: #060608; }
.intro-beam { position: absolute; top: -30%; bottom: -30%; width: 34%; left: 0; transform: translateX(-40vw) translateX(-50%) rotate(14deg); background: linear-gradient(90deg, transparent, rgba(255, 244, 232, .05) 40%, rgba(255, 244, 232, .09) 50%, rgba(255, 244, 232, .05) 60%, transparent); opacity: 0; filter: blur(8px); pointer-events: none; }
.intro svg.logo-x { position: absolute; left: 0; top: 0; height: auto; overflow: visible; transform-origin: 0 0; will-change: transform; }
.intro .skip { position: absolute; right: var(--gutter); bottom: 1.75rem; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); background: none; border: 0; cursor: pointer; opacity: 0; transition: opacity .6s .8s; }
.intro.ready .skip { opacity: 1; }
.intro-out .intro .skip { opacity: 0; transition-delay: 0s; }
.intro-on .brand { visibility: hidden; }
.intro-on body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .frame { transform: none; opacity: 1; }
  .js .say .sw { opacity: 1; }
  .tile { clip-path: none !important; }
  .th { opacity: 1 !important; transform: none !important; }
  .chart { clip-path: none !important; }
  .dk .r, .dk .ln > span, .dk .blur .ln > span, .bars i { opacity: 1 !important; transform: none !important; filter: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}