:root {
  --bg:#06070b; --panel:#0c0e15; --panel2:#11141d;
  --ink:#eef1f6; --ink2:#aab2c5; --ink3:#7c869c;
  --teal:#34e1c8; --blue:#7aa2ff; --gold:#E8B923; --red:#f2585b;
  --grad:linear-gradient(135deg,#34e1c8,#7aa2ff);
  --line:rgba(255,255,255,.11); --line2:rgba(255,255,255,.06);
  --serif:'Instrument Serif','Times New Roman',serif;
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --max:1440px; --gutter:clamp(20px,3vw,40px); --measure:40rem;
  --teal-haze:rgba(52,225,200,.10);
  --blue-haze:rgba(122,162,255,.08);
  --gold-glow:rgba(232,185,35,.20);
  --teal-glow:rgba(52,225,200,.18);
  --blue-glow:rgba(122,162,255,.18);
  --clear:rgba(6,7,11,0);
  --shade:rgba(6,7,11,.78);
  --shade-soft:rgba(6,7,11,.28);
  --type-body:1.0625rem;
  --type-label:11px;
  --type-hero:clamp(6rem,12.5vw,12rem);
  --type-statement:clamp(2.6rem,4.1vw,4.4rem);
  --type-heading:clamp(3.25rem,5.3vw,5.6rem);
  --type-card:clamp(2rem,3vw,2.8rem);
  --weight-regular:400;
  --weight-medium:500;
  --tracking-display:-0.03em;
  --tracking-label:0.16em;
  --leading-display:0.95;
  --leading-body:1.72;
  /* The masthead includes the pill's border and padding around one label line. */
  --masthead-pad:1.65rem;
  --masthead-h:calc(var(--type-label) * 1.65 + var(--masthead-pad) * 2 + .6rem + 2px);
  /* The fixed trailing band is the height the last page gives back. */
  --footer-h:8rem;
  /* Compact page rhythm leaves the masthead offset clear at every snap. */
  --page-pad:clamp(.75rem,1.6vh,1.5rem);
  --page-gap:clamp(.65rem,1.4vh,1.25rem);
}

* { box-sizing:border-box; }
html, body { overflow-x:clip; max-width:100%; }
/* Reading progress replaces the scrollbar gutter, keeping the viewport width intact. */
html { scroll-behavior:smooth; scroll-snap-type:y mandatory; scroll-padding-top:var(--masthead-h); scrollbar-width:none; background:var(--bg); }
body {
  margin:0;
  background:radial-gradient(ellipse at 0% 0%,var(--teal-haze),var(--clear) 55%),radial-gradient(ellipse at 100% 8%,var(--blue-haze),var(--clear) 52%),var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--type-body);
  font-weight:var(--weight-regular);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}

::selection { color:var(--bg); background:var(--teal); }
a { color:var(--teal); text-decoration:none; }
:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
h1, h2, h3, p { margin:0; }
h1, h2, h3, .hero-statement {
  font-family:var(--serif);
  font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-display);
  line-height:var(--leading-display);
}
em { font-weight:inherit; }
h2 { max-width:10.4em; font-size:var(--type-heading); }
h2 em, .hero-statement em { color:var(--teal); }
h3 { font-size:var(--type-card); }
.page-width { width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.label { font-family:var(--mono); font-size:var(--type-label); font-weight:var(--weight-regular); letter-spacing:var(--tracking-label); line-height:1.65; text-transform:uppercase; color:var(--ink3); }
.prose { max-width:31rem; color:var(--ink2); }
/* Snap the document, leaving the fixed scene outside any scroll wrapper. */
.page { min-height:100svh; scroll-snap-align:start; scroll-snap-stop:always; display:flex; flex-direction:column; justify-content:center; padding-block:var(--page-pad) calc(var(--page-pad) + var(--masthead-h)); }
.page > * { flex-shrink:0; min-width:0; }
/* The masthead sits above the first page, so the final page gives that offset back
   and still fills one screen. The footer below it is the only scroll left after the
   last page's snap point, and a position with no snap point is what made the last
   line pop up and drop back, so the footer ends the document on a snap of its own. */
main > .page:last-child { min-height:calc(100svh - var(--masthead-h)); padding-bottom:var(--page-pad); }

.scene-backdrop, #convergence-scene, .scene-vignette { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; }
.scene-backdrop {
  z-index:0;
  background:radial-gradient(ellipse at 62% 39%,var(--gold-glow),var(--clear) 23%),radial-gradient(ellipse at 83% 31%,var(--teal-glow),var(--clear) 25%),radial-gradient(ellipse at 79% 67%,var(--blue-glow),var(--clear) 29%);
}
.scene-ready .scene-backdrop { opacity:.28; }
#convergence-scene { z-index:1; display:block; }
#convergence-scene[hidden] { display:none; }
/* The turn and offer pages carry their own figures, so the rig steps aside. */
#convergence-scene, .scene-backdrop { transition:opacity .55s ease,transform .55s ease; }
:root[data-active-page="turn"] #convergence-scene,
:root[data-active-page="posture"] #convergence-scene,
:root[data-active-page="offer"] #convergence-scene { opacity:.08; }
/* Sunny, 2026-09-20: the particle rig belongs to the hero only; every later page hides it. */
:root[data-active-page]:not([data-active-page="hero"]) #convergence-scene,
:root[data-active-page]:not([data-active-page="hero"]) .scene-backdrop { opacity:0 !important; visibility:hidden; transform:none; }
/* On the pages whose own content occupies the right of the screen, the faded rig was still
   readable behind the figures and the link columns, so it is parked below the fold there. */
:root[data-active-page="everything"] #convergence-scene,
:root[data-active-page="inside-the-sun"] #convergence-scene { opacity:.08; transform:translateY(68vh); }
:root[data-active-page="turn"] .scene-backdrop,
:root[data-active-page="posture"] .scene-backdrop { opacity:.4; }
.scene-vignette { z-index:2; background:linear-gradient(90deg,var(--shade),var(--clear) 61%),radial-gradient(ellipse at 64% 47%,var(--clear) 28%,var(--shade-soft) 74%,var(--shade)); }
.masthead, main, .footer { position:relative; z-index:3; }
.reading-progress { position:fixed; inset:0 0 auto; z-index:10; height:2px; }
.reading-progress span { display:block; height:100%; background:var(--grad); transform:scaleX(0); transform-origin:left; }
.skip-link { position:fixed; top:1rem; left:var(--gutter); z-index:20; padding:.7rem 1rem; background:var(--panel); transform:translateY(-200%); }
.skip-link:focus { transform:translateY(0); }
.visually-hidden { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); clip-path:inset(50%); overflow:hidden; white-space:nowrap; border:0; padding:0; margin:-1px; }

.masthead { display:flex; align-items:center; justify-content:space-between; gap:clamp(.5rem,1.5vw,1.5rem); padding-block:var(--masthead-pad); }
.present-controls { display:flex; align-items:center; gap:.75rem; margin-left:auto; white-space:nowrap; }
.present-toggle { padding:.3rem .8rem; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink2); cursor:pointer; }
.present-toggle:hover, .present-toggle[aria-pressed="true"] { border-color:var(--teal); color:var(--teal); }
.present-counter { color:var(--ink2); }
html.present-mode { overflow:hidden; scroll-snap-type:none; scroll-behavior:auto; }
body.present-mode { overflow:hidden; }
body.present-mode .page { display:none; }
body.present-mode .stay-block, body.present-mode .audience-switch { display:none; }
/* Long phone slides scroll inside the deck so their last invitation stays reachable. */
body.present-mode .page.is-present-slide { display:flex; height:calc(100vh - var(--masthead-h)); height:calc(100dvh - var(--masthead-h)); min-height:0; padding-block:var(--page-pad); overflow-y:auto; overflow-x:hidden; justify-content:safe center; overscroll-behavior-y:contain; padding-bottom:3.4rem; }
.wordmark { color:var(--ink); font-weight:var(--weight-medium); letter-spacing:.06em; }
/* The sun, matched to the homepage hero (Sunny, 2026-09-22): fixed in the far top
   left of the viewport, not on the text column, 54px, breathing glow. The masthead
   sits one layer up so the fixed sun is never painted under the pages. */
.masthead { z-index:4; }
.sun-logo { position:fixed; top:22px; left:40px; z-index:90; display:inline-flex; align-items:center; justify-content:center; padding:4px; line-height:0; }
.sun-logo-mark { position:relative; display:block; width:54px; height:54px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, oklch(0.86 0.17 72), oklch(0.72 0.18 58) 70%); background-size:130% 130%;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 0 26px 6px rgba(247,147,26,.35), inset 0 0 12px rgba(255,255,255,.25);
  animation:sunBreathe 4.5s ease-in-out infinite, sunGlow 4.5s ease-in-out infinite, sunShimmer 9s ease-in-out infinite; }
.sun-logo-mark::after { content:""; position:absolute; inset:-8px; border-radius:50%;
  border:1px dashed rgba(255,255,255,.22); animation:sunLogoSpin 40s linear infinite; }
.sun-logo:hover .sun-logo-mark { filter:brightness(1.12); animation-duration:2.2s, 2.2s, 4.5s; }
@keyframes sunLogoSpin { to { transform:rotate(360deg); } }
@keyframes sunBreathe { 0%,100% { transform:scale(1); filter:brightness(1); } 50% { transform:scale(1.07); filter:brightness(1.08); } }
@keyframes sunGlow {
  0%,100% { box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 0 26px 6px rgba(247,147,26,.35), inset 0 0 12px rgba(255,255,255,.25); }
  50% { box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 0 52px 16px rgba(247,147,26,.55), inset 0 0 12px rgba(255,255,255,.2); } }
@keyframes sunShimmer { 0%,100% { background-position:30% 30%; } 50% { background-position:42% 46%; } }
@media (prefers-reduced-motion: reduce) { .sun-logo-mark, .sun-logo-mark::after { animation:none; } }
.wordmark-dot { color:var(--teal); }
.masthead-note { margin-left:auto; margin-right:auto; }
.location { display:flex; align-items:center; gap:.7rem; }
.status-dot { width:5px; height:5px; border-radius:50%; background:var(--teal); box-shadow:0 0 12px var(--teal-glow); }
.hero { position:relative; }
.hero-copy { width:60%; }
h1 { font-size:var(--type-hero); white-space:nowrap; }
.hero-statement { margin-top:1.25rem; font-size:var(--type-statement); line-height:1.03; }
/* Two equal invitations, before the first scroll. */
/* The three fronts sit under the buttons as one quiet mono line, and wrap to two on a phone. */
/* Said "In front of" three times and let the separators orphan onto the next line at
   phone width, so a line could begin with a stray dot. One lead-in, three nouns, and
   the separator hangs off the END of an item: when the row wraps, the dot stays behind
   on the line it belongs to instead of leading the new one. */
.hero-fronts { margin-top:1.1rem; color:var(--ink3); display:flex; flex-wrap:wrap; align-items:baseline; gap:0 .35rem; }
.hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; max-width:36rem; margin-top:1.5rem; }
.hero-actions > a { margin-top:0; }
.audience-switch { display:inline-flex; margin-top:.85rem; margin-right:1.6rem; }
.audience-switch + .quiet-link { margin-left:.4rem; }
.audience-option { padding:.25rem .65rem; border:1px solid var(--line2); background:transparent; color:var(--ink3); cursor:pointer; transition:border-color .25s ease,color .25s ease; }
.audience-option:first-child { border-radius:999px 0 0 999px; }
.audience-option:last-child { margin-left:-1px; border-radius:0 999px 999px 0; }
.audience-option:hover { color:var(--ink2); }
.audience-option[aria-pressed="true"] { position:relative; border-color:var(--line); color:var(--teal); }
.audience-option:focus-visible { position:relative; outline:2px solid var(--teal); outline-offset:3px; }
.hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-top:clamp(2rem,5vh,4rem); }
.scroll-cue { display:inline-flex; align-items:center; gap:1rem; color:var(--ink2); }
.scroll-stem { display:block; width:1px; height:35px; background:var(--line); overflow:hidden; }
.scroll-stem::after { content:""; display:block; height:15px; background:var(--teal); animation:scroll-hint 2.6s ease-in-out infinite; }
.quiet-link { display:inline-block; align-self:flex-start; margin-top:var(--page-gap); color:var(--ink3); text-decoration:underline; text-underline-offset:.3em; transition:color .25s ease; }
.quiet-link:hover { color:var(--teal); }
.quiet-link:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
/* Light tiles leave the story, rather than the card, in the foreground. */
.tile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.65rem,1vw,1rem); margin-top:var(--page-gap); min-width:0; }
.posture-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:var(--page-gap); max-width:var(--measure); }
.posture-card h3 { margin:.5rem 0 0; font-size:clamp(1.6rem,2.2vw,2rem); line-height:1.1; }
.venture-card.posture-ask { border-color:var(--line2); box-shadow:none; }
.posture-ask .card-label, .posture-ask h3 { color:var(--ink3); }
.venture-card.posture-offer { border-color:color-mix(in oklch,var(--teal) 48%,transparent); box-shadow:0 0 40px var(--teal-haze); }
.posture-offer h3 { color:var(--ink); }
/* The overlap is the whole argument, so the diagram sits beside the posture. */
.turn-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(1rem,3vw,3rem); margin-top:var(--page-gap); }
.venn-figure { margin:0; min-width:0; }
.venn { display:block; width:100%; height:auto; max-height:clamp(190px,32vh,330px); margin-inline:auto; overflow:visible; }
.venn-set circle { fill-opacity:.15; stroke-width:2; mix-blend-mode:screen; }
.venn-email { fill:var(--teal); stroke:var(--teal); }
.venn-show { fill:var(--blue); stroke:var(--blue); }
.venn text { font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--tracking-label); fill:var(--ink); }
.venn-label { font-size:15px; letter-spacing:.12em; fill:var(--ink2); }
.venn-center { font-size:17px; fill:var(--gold); }
.venn-note { font-size:12px; fill:var(--ink3); letter-spacing:.08em; }
.venn-pill { fill:var(--shade); stroke:color-mix(in oklch,var(--gold) 55%,transparent); stroke-width:1.2; }
.venn-set circle, .venn-labels, .venn-meet { transform-box:fill-box; transform-origin:center; }
.reveal-enabled .venn-figure.is-visible .venn-email { animation:venn-close-left .85s cubic-bezier(.2,.65,.2,1) both; }
.reveal-enabled .venn-figure.is-visible .venn-show { animation:venn-close-right .85s cubic-bezier(.2,.65,.2,1) both; }
.reveal-enabled .venn-figure.is-visible .venn-labels { animation:venn-fade .6s ease both .45s; }
.reveal-enabled .venn-figure.is-visible .venn-meet { animation:venn-fade .6s ease both .85s; }
@keyframes venn-close-left { from { opacity:0; transform:translateX(-64px); } to { opacity:1; transform:none; } }
@keyframes venn-close-right { from { opacity:0; transform:translateX(64px); } to { opacity:1; transform:none; } }
@keyframes venn-fade { from { opacity:0; } to { opacity:1; } }
/* Beliefs are open serif paragraphs, with room between the two thoughts. */
.beliefs { max-width:76rem; margin-top:clamp(1.25rem,2.5vh,2rem); }
.belief em, .close-title em { color:var(--teal); }
/* The thinker: one icon at rest, three lines on hover, focus or tap. The long
   belief paragraphs and the method quote it replaced said the same thing in
   eight times the words, and the section was too busy to read. */
.thinker { position:relative; max-width:76rem; margin-top:clamp(1rem,2.2vh,1.75rem); }
@media (hover:hover) { .thinker:hover .thinker-card { display:block; opacity:1; transform:translateY(0); visibility:visible; transition-delay:0s; } .thinker-toggle:hover { border-color:color-mix(in oklch,var(--teal) 45%,transparent); color:var(--ink); } }
@media (prefers-reduced-motion:no-preference) { .thinker-toggle[aria-expanded="false"] .thinker-icon { animation:thinker-pulse 4.5s ease-in-out infinite; } }
@keyframes thinker-pulse { 0%,82%,100% { box-shadow:0 0 0 0 var(--clear); } 88% { box-shadow:0 0 0 6px color-mix(in oklch,var(--teal) 14%,transparent); } }
@media (prefers-reduced-motion:reduce) { .thinker-card { transition:none; } }
@media (max-width:600px) { .thinker-card { position:static; width:100%; margin-top:.6rem; display:none; } .thinker-toggle[aria-expanded="true"] + .thinker-card, body.present-mode .thinker-card { display:block; } .thinker-hint { display:none; } }
/* The show stands on its own, and the invitation is free. */
.show-free { margin-top:var(--page-gap); padding:clamp(.75rem,1.5vh,1.25rem); border:1px solid var(--line); border-left:2px solid var(--teal); color:var(--ink2); }
.episode-card { display:flex; flex-direction:column; gap:.75rem; min-width:0; padding:.7rem; background:var(--panel); border:1px solid var(--line); border-radius:12px; color:var(--ink); scroll-snap-align:start; transition:border-color .35s ease,background .35s ease; }
.episode-card:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.episode-thumb { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:8px; background:var(--panel2); }
.episode-thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s cubic-bezier(.2,.65,.2,1); }
.episode-title { display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-family:var(--sans); font-size:.95rem; font-weight:var(--weight-medium); line-height:1.4; color:var(--ink); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .episode-card:hover { background:var(--panel2); border-color:color-mix(in oklch,var(--teal) 42%,transparent); }
  .episode-card:hover .episode-thumb img { transform:scale(1.045) translateY(-3px); }
}
@media (prefers-reduced-motion:reduce) {
  .episode-thumb img { transition:none; }
  .episode-card:hover .episode-thumb img { transform:none; }
}
@media (min-width:1100px) {
  /* Four previews across; the next four stay in the same scroll row. */
  .episode-row { grid-auto-columns:calc((100% - 3rem) / 4); }
  .trap-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

.venture-card { position:relative; min-width:0; padding:clamp(1rem,2vh,1.5rem); background:var(--panel); border:1px solid var(--line); border-radius:3px; transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease; }
.accent-teal { --card-accent:var(--teal); --card-glow:var(--teal-glow); }
.accent-blue { --card-accent:var(--blue); --card-glow:var(--blue-glow); }
.accent-gold { --card-accent:var(--gold); --card-glow:var(--gold-glow); }
.card-label { color:var(--card-accent,var(--ink3)); }
.tier-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:var(--page-gap); min-width:0; }
.tier-card { display:flex; flex-direction:column; padding:clamp(.75rem,1.3vh,1rem); }
.venture-card.tier-card h3 { margin-top:0; margin-bottom:clamp(.25rem,.6vh,.5rem); font-size:clamp(2rem,2.5vw,2.5rem); }
.tier-price { margin-top:clamp(.35rem,.7vh,.75rem); }
/* The price shares its card with the complete scope and both actions. */
.tier-total { font-family:var(--serif); font-size:clamp(2.25rem,2.8vw,3rem); font-weight:var(--weight-regular); letter-spacing:var(--tracking-display); line-height:1; }
.tier-caption { margin-top:.25rem; color:var(--ink2); }
/* Checkout follows the scope, with room to talk first. */
.tier-cta { margin-top:auto; padding-top:var(--page-gap); text-align:center; }
.tier-cta .primary-button { width:100%; margin-top:0; padding:.7rem 1.2rem; gap:1rem; }
.tier-talk { display:inline-block; margin-top:.25rem; color:var(--ink3); transition:color .25s ease; }
.tier-talk:hover { color:var(--teal); }
/* Three sizes, numbered. The rank reads before the name does. */
.tier-index { margin-bottom:.15rem; color:var(--ink3); letter-spacing:.24em; opacity:.75; }
/* A hairline of the card accent warms the top edge under the pointer. */
.tier-card::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; border-radius:3px 3px 0 0; background:linear-gradient(90deg,var(--clear),var(--card-accent,var(--teal)),var(--clear)); opacity:0; transition:opacity .35s ease; pointer-events:none; }
.tier-price { font-variant-numeric:tabular-nums lining-nums; }
/* The show rate sits under the list price, struck, so both numbers stay honest. */
.tier-show { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem; margin-top:.4rem; padding-top:.4rem; border-top:1px dashed var(--line); font-variant-numeric:tabular-nums lining-nums; }
.tier-show-label { color:var(--ink3); }
.tier-show-now { font-family:var(--serif); font-size:1.5rem; line-height:1; letter-spacing:var(--tracking-display); color:var(--card-accent,var(--teal)); }
.tier-show-term { color:var(--ink3); }
.tier-shownote { margin-top:.75rem; color:var(--ink3); font-size:.9rem; }
/* Sprint is the quiet rung: one legible line, no card and no button. */
.sprint-line { max-width:82rem; margin-top:.5rem; color:var(--ink2); font-size:.92rem; line-height:1.6; }
.sprint-sep { margin:0 .15rem; color:var(--ink3); }
/* The closing invitation shares a line, with the record directly below it. */
.offer-close { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:var(--page-gap) 1.5rem; margin-top:clamp(1.5rem,3.2vh,2.75rem); }
.close-title { font-size:clamp(2.25rem,3vw,3rem); line-height:1.05; }

.stay-block { padding-block:clamp(2rem,5vw,4rem); border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); }
.stay-block .label { color:var(--ink3); }
.stay-copy { margin-top:.25rem; color:var(--ink2); }
.stay-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.75rem; max-width:42rem; margin-top:var(--page-gap); }
.stay-email { min-width:0; padding:.9rem 1.1rem; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--ink); font:inherit; }
.stay-email::placeholder { color:var(--ink3); }
.stay-email:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-color:var(--teal); }
.stay-form .stay-submit { margin-top:0; cursor:pointer; font-family:var(--mono); font-size:var(--type-label); font-weight:var(--weight-medium); }

/* Compact actions retain a full text line and comfortable padded edges. */
.primary-button, .secondary-button { display:inline-flex; align-items:center; justify-content:space-between; gap:2rem; max-width:100%; padding:.9rem 1.5rem; margin-top:var(--page-gap); border:1px solid transparent; border-radius:999px; font-weight:var(--weight-medium); }
.primary-button { background:var(--grad); color:var(--bg); box-shadow:0 5px 35px var(--teal-glow); transition:transform .25s ease,box-shadow .25s ease; }
.primary-button:hover { transform:translateY(-3px); box-shadow:0 8px 45px var(--teal-glow); }
.secondary-button { border-color:var(--line); background:transparent; color:var(--ink); transition:border-color .25s ease,color .25s ease; }
.secondary-button:hover { border-color:var(--teal); color:var(--teal); }
.secondary-button:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }

/* The everything page: the same light tiles, but every one of them is a link. */
.masthead-everything { color:var(--ink3); white-space:nowrap; transition:color .25s ease; }

/* The index page: five columns of links, one column on a phone. */
.sun-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(.75rem,1.6vw,1.75rem); margin-top:var(--page-gap); min-width:0; }

/* Shots on goal: one week of the real calendar, Monday to Friday, 7am to 8pm, drawn the way a
   calendar draws itself. Hour lines, half-hour hairlines, a column per day, and every block
   sized to its own duration so back-to-back calls really do stack. Markup is generated by
   scripts/render-week-calendar.ts from present/data/week-shots.json. */
.cal { --hour-h:clamp(34px,4.3vh,48px); --cal-gutter-w:48px; margin-top:var(--page-gap); min-width:0; }
.cal-frame { border:1px solid var(--line); border-radius:10px; background:var(--panel); overflow:hidden; }
.cal-head { display:grid; grid-template-columns:var(--cal-gutter-w) repeat(5,minmax(0,1fr)); border-bottom:1px solid var(--line); background:var(--panel2); }
.cal-col-head { display:flex; align-items:baseline; justify-content:center; gap:.4rem; padding:.45rem .3rem; border-left:1px solid var(--line2); min-width:0; }
.cal-dow { color:var(--ink3); }
.cal-dom { font-family:var(--sans); font-size:1.05rem; font-weight:var(--weight-medium); line-height:1; color:var(--ink); }
.cal-body { display:grid; grid-template-columns:var(--cal-gutter-w) minmax(0,1fr); max-height:min(58vh,620px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.cal-times { position:relative; height:calc(13 * var(--hour-h)); }
.cal-time { position:absolute; top:calc(var(--t) * var(--hour-h) + 2px); right:8px; font-family:var(--mono); font-size:9px; line-height:1; color:var(--ink3); white-space:nowrap; }
/* Solid lines on the hour, hairlines on the half hour. The hour gradient is listed first so it
   paints over the half-hour one where the two land on the same pixel. */
.cal-grid { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); height:calc(13 * var(--hour-h));
  background-image:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px var(--hour-h)),
                   repeating-linear-gradient(to bottom,var(--line2) 0 1px,transparent 1px calc(var(--hour-h) / 2)); }
.cal-col { position:relative; border-left:1px solid var(--line2); min-width:0; }
.cal-ev { position:absolute; top:calc(var(--t) * var(--hour-h)); height:calc(var(--d) * var(--hour-h) - 2px);
  left:var(--l); width:var(--w); margin-left:1px; padding:1px 4px 1px 5px; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:flex-start; gap:1px; overflow:hidden;
  border-radius:3px; border-left:3px solid var(--kind,var(--line));
  background:color-mix(in oklch,var(--kind,var(--ink3)) 17%,#0d1017); transform-origin:top; }
.cal-ev-title { font-size:10px; line-height:1.15; font-weight:var(--weight-medium); color:color-mix(in oklch,var(--kind,var(--ink2)) 55%,var(--ink)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ev-time { font-family:var(--mono); font-size:8.5px; line-height:1.1; color:var(--ink3); white-space:nowrap; }
/* A slot under twenty-five minutes cannot hold two lines, so the name and the time share one. */
.cal-ev.is-tiny { flex-direction:row; align-items:center; gap:4px; padding-top:0; padding-bottom:0; }
.cal-ev.is-tiny .cal-ev-title { font-size:9px; flex:1 1 auto; min-width:0; }
.cal-ev.is-tiny .cal-ev-time { flex:0 0 auto; font-size:8px; }
.cal-tabs { display:none; gap:.35rem; margin-bottom:.5rem; overflow-x:auto; scrollbar-width:none; }
.cal-tab { flex:1 1 0; min-width:0; padding:.4rem .2rem; font-family:var(--mono); font-size:var(--type-label); text-transform:uppercase; letter-spacing:.1em; color:var(--ink3); background:var(--panel); border:1px solid var(--line); border-radius:6px; cursor:pointer; }
.cal-tab[aria-selected="true"] { color:var(--ink); border-color:color-mix(in oklch,var(--teal) 45%,transparent); background:var(--panel2); }
.cal-tab-n { color:var(--ink3); }
.kind-taping { --kind:var(--teal); }
.kind-pre-interview { --kind:var(--blue); }
.kind-client { --kind:var(--gold); }
.kind-other { --kind:var(--ink3); }
.week-legend { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:.75rem; color:var(--ink3); }
.week-key::before { content:""; display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:.55rem; background:var(--kind,var(--line)); vertical-align:middle; }
.week-key b { font-weight:var(--weight-medium); color:var(--ink2); }
/* The blocks draw in one day after the next once the calendar comes into view. */
.reveal-enabled .cal.is-visible .cal-ev { animation:block-in .45s ease both; animation-delay:calc(var(--day) * 90ms); }
@keyframes block-in { from { opacity:0; transform:scaleY(.2); } to { opacity:1; transform:none; } }
/* One day at a time on a phone. Without script the calendar still shows Monday rather than five
   columns too narrow to read. */
@media (max-width:760px) {
  .cal { --hour-h:46px; --cal-gutter-w:42px; }
  .cal-tabs { display:flex; }
  .cal-head { grid-template-columns:var(--cal-gutter-w) minmax(0,1fr); }
  .cal-grid { grid-template-columns:minmax(0,1fr); }
  .cal-col, .cal-col-head { display:none; }
  .cal-col[data-cal-day="0"], .cal-col-head[data-cal-day="0"] { display:block; }
  .cal-col-head[data-cal-day="0"] { display:flex; }
  .cal[data-cal-ready] .cal-col, .cal[data-cal-ready] .cal-col-head { display:none; }
  .cal[data-cal-ready] .cal-col.is-on { display:block; }
  .cal[data-cal-ready] .cal-col-head.is-on { display:flex; }
  .cal-body { max-height:min(62vh,540px); }
}

.footer { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; height:var(--footer-h); padding-top:1.8rem; padding-bottom:5rem; scroll-snap-align:end; }
.footer::before { content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter); height:1px; background:var(--line); }
.current-site-pill { position:fixed; right:var(--gutter); bottom:18px; z-index:15; padding:9px 15px; font-family:var(--mono); font-size:var(--type-label); text-transform:uppercase; letter-spacing:.12em; color:var(--ink2); background:var(--panel); border:1px solid color-mix(in oklch,var(--teal) 35%,transparent); border-radius:999px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:background .25s ease,border-color .25s ease,color .25s ease; }
.current-site-pill:hover { color:var(--teal); background:var(--panel2); border-color:var(--teal); }
.current-site-pill:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }

.reveal-enabled [data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .85s ease,transform .85s cubic-bezier(.2,.65,.2,1); transition-delay:var(--reveal-delay,0ms); }
.reveal-enabled [data-reveal].is-visible { opacity:1; transform:translateY(0); }
.reveal-enabled [data-reveal]:focus-visible { opacity:1; transform:none; transition:none; }
.reveal-enabled [data-reveal]:focus-within { opacity:1; transform:none; transition:none; }
.reveal-enabled .venture-card.is-visible { transition:opacity .85s ease,transform .35s ease,border-color .35s ease,box-shadow .35s ease; transition-delay:0ms; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .tier-card:hover, .reveal-enabled .tier-card.is-visible:hover { border-color:var(--card-accent); box-shadow:0 0 20px -12px var(--card-accent),inset 0 1px 0 var(--card-glow); }
  .tier-card:hover::before, .reveal-enabled .tier-card.is-visible:hover::before { opacity:1; }
}
@keyframes scroll-hint {
  0% { transform:translateY(-16px); }
  65%,100% { transform:translateY(36px); }
}

@media (max-width:900px) {
  .masthead-note { display:none; }
  .hero-copy { width:76%; }
  .scene-key { padding-right:0; gap:1rem; }
  .scene-vignette { background:linear-gradient(90deg,var(--shade-soft),var(--clear)),radial-gradient(ellipse at 70% 36%,var(--clear),var(--shade) 95%); }
}
@media (max-width:600px) {
  /* The mobile masthead keeps its existing reduced padding. */
  :root { --masthead-pad:1.2rem; --page-gap:clamp(.5rem,1.2vh,.75rem); --type-heading:clamp(2.6rem,10.8vw,3.25rem); }
  /* Phone prose keeps a full reading size with tighter leading. */
  .narrative { font-size:1rem; line-height:1.5; }
  /* Beliefs and full paid scope need longer pages at readable phone sizes. */
  html { scroll-snap-type:y proximity; }
  .turn, .engagement { min-height:auto; scroll-snap-stop:normal; }
  main > .page:last-child { min-height:auto; padding-bottom:var(--page-pad); }
  .location { letter-spacing:.09em; }
  .hero-copy { width:100%; }
  .hero .eyebrow { letter-spacing:.07em; margin-bottom:1rem; }
  h1 { font-size:clamp(5.5rem,23vw,8.4rem); }
  .hero-statement { margin-top:1.3rem; font-size:clamp(2.6rem,10.4vw,3.8rem); }
  .hero-actions { grid-template-columns:minmax(0,1fr); gap:.75rem; }
  .stay-form { grid-template-columns:minmax(0,1fr); }
  .stay-email, .stay-submit { width:100%; }
  .hero-bottom { align-items:flex-end; margin-top:2.5rem; gap:1rem; }
  .scroll-cue { gap:.7rem; letter-spacing:.07em; }
  .scene-key { flex-direction:column; gap:.2rem; }
  .scene-backdrop { background:radial-gradient(ellipse at 24% 51%,var(--gold-glow),var(--clear) 35%),radial-gradient(ellipse at 78% 42%,var(--teal-glow),var(--clear) 32%),radial-gradient(ellipse at 70% 67%,var(--blue-glow),var(--clear) 38%); }
  .scene-vignette { background:linear-gradient(0deg,var(--shade),var(--clear) 38%,var(--shade-soft) 65%,var(--shade)); }
  /* Cards travel sideways so every scope remains readable at phone width. */
  .tier-grid, .tile-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(20rem,82vw); overflow-x:auto; scroll-snap-type:x proximity; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; padding:.3rem .3rem .4rem; }
  /* The rail hides its scrollbar, so without a cue the last visible card reads as
     clipped rather than swipeable. A mask on the rail gives the cue with no extra
     DOM, because a mask applies to the element box and does not scroll with the
     content inside it. It is set only while there is actually more to scroll to. */
  .tier-grid[data-more="1"], .tile-grid[data-more="1"] {
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);
  }
  .tile-grid { grid-auto-columns:min(17rem,80vw); }
  .tier-grid::-webkit-scrollbar, .tile-grid::-webkit-scrollbar { width:0; height:0; display:none; }
  .tile, .tier-card { scroll-snap-align:start; }
  /* Three sizes stack on a phone: the whole ladder reads in one downward pass,
     so the offer needs no sideways swipe and no mask cue. */
  .tier-grid { grid-template-columns:minmax(0,1fr); grid-auto-flow:row; grid-auto-columns:auto; overflow-x:visible; padding:0; -webkit-mask-image:none; mask-image:none; }
  .tier-grid[data-more="1"] { -webkit-mask-image:none; mask-image:none; }
  .tier-card { scroll-snap-align:none; }
  .tier-show-now { font-size:1.35rem; }
  .sprint-line { font-size:.95rem; }
  .sprint-line a { display:inline; }
  /* The two index pages read as one column on a phone rather than as a sideways rail. */
  .feature-grid, .sun-grid { grid-template-columns:minmax(0,1fr); grid-auto-flow:row; grid-auto-columns:auto; overflow-x:visible; padding:0; }
  .link-note { display:none; }
  .everything, .sunlist { overflow-y:auto; }
  .turn h2, .machine h2 { font-size:var(--type-heading); }
  .turn-split { grid-template-columns:minmax(0,1fr); gap:.9rem; }
  /* Flatten the copy wrapper so the phone diagram separates the say-line from the posture cards. */
  .turn-copy { display:contents; }
  .turn-copy .posture-pair { order:1; }
  .venn { max-height:none; }
  .posture-pair { grid-template-columns:minmax(0,1fr); gap:.65rem; }
  .posture-card { padding:.85rem 1rem; }
  .front-line { grid-template-columns:minmax(0,1fr) auto; gap:.3rem .5rem; }
  .front-label { letter-spacing:.08em; }
  .front-body { grid-column:1 / -1; }
  .figure-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 1rem; }
  .split { grid-template-columns:minmax(0,1fr); gap:1rem; margin-top:1.5rem; }
  .offer-close { grid-template-columns:minmax(0,1fr); gap:.75rem; margin-top:1.75rem; }
}
/* Short phones keep both invitations clear of the current-site pill. */
@media (max-width:600px) and (max-height:700px) {
  .hero .eyebrow { margin-bottom:.75rem; }
  .hero-statement { margin-top:1rem; }
  .hero-description { margin-top:1rem; line-height:1.6; }
  .hero-actions { margin-top:1rem; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal-enabled [data-reveal] { opacity:1; transform:none; }
  .scroll-stem::after { transform:none; }
  .primary-button:hover, .text-link:hover span { transform:none; }
}
.motion-reduced { scroll-behavior:auto; }
.motion-reduced *, .motion-reduced *::before, .motion-reduced *::after { animation:none !important; transition:none !important; }
.motion-reduced [data-reveal] { opacity:1; transform:none; }
.motion-reduced .primary-button:hover, .motion-reduced .text-link:hover span { transform:none; }

@media print {
  .scene-backdrop, #convergence-scene, .scene-vignette, .reading-progress, .scroll-cue, .scene-key, .current-site-pill { display:none !important; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal-enabled [data-reveal] { opacity:1; transform:none; }
  .page { min-height:0; padding-block:2rem; }
  .venture-card { break-inside:avoid; }
}

/* The offer keeps only its numbers. The terms that used to sit in a bordered box
   are one muted mono line at the foot of the section. */
.offer-fineprint { display:block; max-width:82rem; margin-top:.9rem; color:var(--ink3); font-size:12px; line-height:1.7; text-transform:none; letter-spacing:.03em; }
/* The invitation is its own page: one line, one button, nothing else. */
.closing { align-items:center; text-align:center; }
.closing .close-title { max-width:26ch; font-size:clamp(3rem,7vw,6rem); line-height:1.02; }
.closing .primary-button { margin-top:clamp(1.25rem,3vh,2.25rem); }
/* The record strip moved off the offer and now closes the page in the footer. */
.footer { flex-wrap:wrap; height:auto; min-height:var(--footer-h); }
@media (max-width:600px) {
  .closing .close-title { font-size:clamp(2.6rem,12vw,3.4rem); }
}

/* One line icon per tile on the trap and hood pages, drawn in the page teal on the same soft
   halo the thinker card uses so the two rhyme. It fades in just behind its tile. */
.tile-icon { position:absolute; top:.85rem; right:.85rem; display:grid; place-items:center; width:2.1rem; height:2.1rem; margin-bottom:0; border-radius:50%; color:var(--teal); background:var(--teal-glow); border:1px solid color-mix(in oklch,var(--teal) 34%,transparent); }
@media (prefers-reduced-motion:reduce) {
  .reveal-enabled .tile[data-reveal] .tile-icon { opacity:1; transform:none; transition:none; }
}

/* The turn is now one page for the picture and one for the posture, so the Venn is the whole
   page and draws about twice the radius it had beside a column of copy. */
.venn-hero { width:100%; max-width:min(100%,1080px); margin-inline:auto; }
.venn-hero .venn { max-height:min(62vh,640px); max-width:100%; }
/* The ask and the offer sit centred and large on their own page. */
.posture-hero { max-width:min(100%,72rem); margin-inline:auto; }
.posture-hero .posture-card { text-align:center; padding:clamp(1.1rem,2.4vh,2rem) 1.25rem; }
.posture-hero .posture-card h3 { font-size:clamp(1.9rem,3.2vw,3rem); }
@media (max-width:760px) {
  .venn-hero .venn { max-height:none; }
  .posture-hero .posture-card h3 { font-size:clamp(1.6rem,7vw,2.1rem); }
}

/* ============================================================
   2026-09-20 / the twenty-two page build.
   Ten words a page, one visual, one animation. Every animated
   element is authored at its END state; the keyframes run it in
   from a start pose, and they only run under .is-playing with
   motion allowed, so reduced motion simply shows the end state.
   ============================================================ */

.page.slide { gap:clamp(1rem,3.2vh,2.6rem); }
.slide-line {
  max-width:16em;
  font-family:var(--serif);
  font-size:clamp(2.5rem,5.4vw,5.2rem);
  line-height:1.02;
  letter-spacing:var(--tracking-display);
}
.slide-line em { color:var(--teal); }
.stage { margin:0; width:100%; display:flex; align-items:center; justify-content:center; min-width:0; }
.art { display:block; width:100%; max-width:min(96%,900px); height:auto; max-height:min(52vh,460px); overflow:visible; }
.masthead-note { color:var(--ink3); letter-spacing:var(--tracking-label); }

/* The presenter strip is gone: the spoken line now sits on the slide itself,
   in scroll mode and in present mode, so the screen carries one line, not two. */
.presenter-strip { display:none !important; }

/* The spoken line: what Sunny reads out on every slide. Light grey, serif
   italic, quiet, directly under the headline. It is authored at its
   end state, so reduced motion and print show it with no animation at all.
   Excluded from the ten-words-a-page budget by scripts/present-words.ts. */
.spoken {
  margin-top:0;
  padding-top:clamp(.6rem,2vh,1.5rem);
  max-width:40em;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.05rem,1.35vw,1.25rem);
  line-height:1.45;
  letter-spacing:.005em;
  color:var(--ink3);
  opacity:1;
}
/* The pre-state is set only once script has confirmed motion is wanted, so a
   page with no script, or with motion turned down, always shows the line. */
@media (prefers-reduced-motion:no-preference) {
  .slide-motion .slide:not(.is-playing) .spoken { opacity:0; }
  .is-playing .spoken { animation:spoken-in .8s ease 2.2s both; }
}
@media (max-width:700px) { .spoken { font-size:1.05rem; padding-top:.85rem; } }
@keyframes spoken-in { from { opacity:0; transform:translateY(8px); } }

/* 2 / weighted debits, a drawn drain, then zero. There is no credit row in the markup. */
.stage-ledger { flex-direction:column; }
#ledger .stage { --bloom-at:2.5s; }
#ledger.is-playing .stage { animation:stage-breathe 7s ease-in-out 3.1s infinite both; }
#ledger .ledger-book { position:relative; }
#ledger .ledger-book::after { content:''; position:absolute; inset:.5rem -.5rem 2.5rem auto; width:12px; border-right:1px solid var(--red); border-bottom:1px solid var(--red); border-radius:0 0 8px 0; pointer-events:none; }
#ledger.is-playing .ledger-book::after { animation:ledger-trace .8s cubic-bezier(.2,.85,.3,1.15) 1.2s both; }
@keyframes ledger-trace { from { clip-path:inset(0 0 100%); } to { clip-path:inset(0); } }
.ledger-book { width:min(680px,96%); display:flex; flex-direction:column; gap:clamp(.4rem,1.5vh,.9rem); }
.led-row { display:flex; align-items:baseline; gap:clamp(.6rem,1.6vw,1.1rem); padding:clamp(.35rem,1.1vh,.7rem) 0; border-bottom:1px solid var(--line2); }
.led-sign { position:relative; flex:0 0 auto; display:inline-block; width:1.1em; height:1em; font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem); line-height:1; }
.led-plus, .led-minus { position:absolute; left:0; top:0; line-height:1; }
.led-plus { color:var(--teal); opacity:0; }
.led-minus { color:var(--red); opacity:1; }
.led-what { font-family:var(--serif); font-size:clamp(1.4rem,2.6vw,2.2rem); line-height:1.15; color:var(--red); }
.led-balance { display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.1rem); margin-top:clamp(.3rem,1.2vh,.8rem); }
.led-balance-label { flex:0 0 auto; color:var(--ink3); }
.led-balance-track { flex:1 1 auto; height:6px; border-radius:3px; background:var(--panel2); overflow:hidden; }
.led-balance-fill { display:block; height:100%; border-radius:3px; background:var(--gold); transform:scaleX(0); transform-origin:left; }
.led-balance-zero { flex:0 0 auto; font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem); line-height:1; color:var(--ink3); opacity:1; }
.is-playing .led-row { animation:led-land .65s cubic-bezier(.2,.85,.3,1.15) both; animation-delay:calc(var(--n,0) * 360ms + 180ms); }
.is-playing .led-what { animation:led-flip .5s cubic-bezier(.2,.85,.3,1.15) both; animation-delay:calc(var(--n,0) * 360ms + 700ms); }
.is-playing .led-plus { animation:led-credit .22s cubic-bezier(.2,.85,.3,1.15) both; animation-delay:calc(var(--n,0) * 360ms + 700ms); }
.is-playing .led-minus { animation:led-debit .34s cubic-bezier(.34,1.3,.5,1) both; animation-delay:calc(var(--n,0) * 360ms + 700ms); }
.is-playing .led-balance-fill { animation:led-drain 1.2s cubic-bezier(.4,0,.2,1) 1.6s both; }
.is-playing .led-balance-zero { animation:led-land .55s cubic-bezier(.2,.85,.3,1.15) 2.4s both; }
@keyframes led-land { 0% { opacity:0; transform:translateY(-22px); } 62% { opacity:1; transform:translateY(3px); } 100% { opacity:1; transform:none; } }
@keyframes led-flip { from { color:var(--teal); } to { color:var(--red); } }
@keyframes led-credit { 0% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(-7px) scale(.78); } }
@keyframes led-debit { 0% { opacity:0; transform:translateY(9px) scale(.66); } 62% { opacity:1; transform:scale(1.16); } 100% { opacity:1; transform:none; } }
@keyframes led-drain { from { transform:scaleX(1); } to { transform:scaleX(0); } }

/* 3 / every inbox, the same email */
.inbox-stack { display:flex; flex-direction:column; gap:7px; width:min(560px,92%); filter:blur(1.1px) saturate(0); opacity:1; }
.inbox-row { display:block; height:16px; border-radius:3px; background:linear-gradient(90deg,var(--panel2) 0 22%,rgba(255,255,255,.09) 22% 78%,var(--panel2) 78%); }
.is-playing .inbox-stack { animation:stack-blur 2.3s cubic-bezier(.2,.85,.3,1.15) both; }
.is-playing .inbox-row { animation:row-in .46s cubic-bezier(.2,.85,.3,1.15) both; animation-delay:calc(var(--n,0) * 90ms); }
#sameness.is-playing .stage { animation:stage-drift 7s ease-in-out 2.4s infinite both; }
#sameness .stage { --bloom-at:1.6s; }
.inbox-row.is-odd { transform:none; }
.is-playing .inbox-row.is-odd { animation:row-in .46s cubic-bezier(.2,.85,.3,1.15) both, break-out 2.1s cubic-bezier(.34,1.2,.5,1) both; animation-delay:calc(var(--n,0) * 90ms), 1.1s; }
@keyframes break-out { 0% { transform:none; filter:none; } 26% { transform:translateX(34px) scaleX(1.04); filter:brightness(2.2); } 58% { transform:translateX(34px); filter:brightness(2.2); } 82% { transform:translateX(-5px); filter:brightness(1.2); } 100% { transform:none; filter:none; } }
.inbox-row:nth-child(1){--n:0}.inbox-row:nth-child(2){--n:1}.inbox-row:nth-child(3){--n:2}
.inbox-row:nth-child(4){--n:3}.inbox-row:nth-child(5){--n:4}.inbox-row:nth-child(6){--n:5}
.inbox-row:nth-child(7){--n:6}.inbox-row:nth-child(8){--n:7}.inbox-row:nth-child(9){--n:8}
.inbox-row:nth-child(10){--n:9}.inbox-row:nth-child(11){--n:10}.inbox-row:nth-child(12){--n:11}

/* 4 / Jeffrey the associate */
.art-jeffrey .jf-filter { opacity:1; }
.art-jeffrey .jf-person { opacity:1; }
.is-playing .art-jeffrey .jf-filter { animation:filter-hit .45s cubic-bezier(.2,.85,.3,1.15) both; animation-delay:calc(var(--n,0) * 416ms + 520ms); }
.art-jeffrey .jf-filter:nth-child(1){--n:0}.art-jeffrey .jf-filter:nth-child(2){--n:1}
.art-jeffrey .jf-filter:nth-child(3){--n:2}.art-jeffrey .jf-filter:nth-child(4){--n:3}
#jeffrey .stage { --bloom-at:1.77s; }
#jeffrey.is-playing .jf-filters { animation:teal-glow 6s ease-in-out 3.3s infinite both; }

/* 5 / five things, five flames */
.stage-trap { min-width:0; }
.flame-row { display:flex; gap:clamp(.8rem,4vw,3rem); align-items:flex-end; }
.flame-icon { display:block; width:clamp(42px,7vw,78px); height:auto; }
.flame { opacity:0; }
.flame-glyph { stroke:var(--teal); }
.flame-cell:nth-child(1) .flame,.flame-cell:nth-child(1) .flame-glyph{--n:0}
.flame-cell:nth-child(2) .flame,.flame-cell:nth-child(2) .flame-glyph{--n:1}
.flame-cell:nth-child(3) .flame,.flame-cell:nth-child(3) .flame-glyph{--n:2}
.flame-cell:nth-child(4) .flame,.flame-cell:nth-child(4) .flame-glyph{--n:3}
.flame-cell:nth-child(5) .flame,.flame-cell:nth-child(5) .flame-glyph{--n:4}

/* 6 / stop asking, start giving */
.swap-line { max-width:none; }
.swap-out { display:inline-block; color:var(--ink3); }
#swap .swap-in { display:inline-block; color:var(--gold); font-style:italic; }
.is-playing .swap-out { animation:slide-out-left .7s cubic-bezier(.2,.85,.3,1.15) .6s both; }
.is-playing .swap-in { animation:slide-in-right .7s cubic-bezier(.2,.85,.3,1.15) .8s both; }
.art-swap .swap-arc { stroke-dasharray:160; stroke-dashoffset:0; }
.is-playing .art-swap .swap-arc { animation:swap-draw .8s cubic-bezier(.2,.85,.3,1.15) .3s both; }
.is-playing .art-swap .swap-hand-give { animation:hand-give 1.15s cubic-bezier(.34,1.3,.5,1) .35s both; transform-origin:510px 90px; }
#swap.is-playing .swap-hand-take { animation:hand-take 1.15s cubic-bezier(.34,1.3,.5,1) .25s both; transform-origin:190px 115px; }
#swap .swap-hand-give path { transform-box:fill-box; transform-origin:center; }
#swap.is-playing .swap-hand-give path { animation:hand-rock 6.5s ease-in-out 1.8s infinite both; }
#swap .stage { --bloom-at:1.3s; }
#swap .stage-bloom { background:radial-gradient(circle at 75% 50%,var(--gold-glow),transparent 62%); }
@keyframes swap-draw { from { stroke-dashoffset:160; } to { stroke-dashoffset:0; } }
@keyframes hand-give { 0% { opacity:0; transform:translate(-320px,30px) rotate(-12deg); } 62% { opacity:1; transform:translate(14px,-5px) rotate(3deg); } 100% { opacity:1; transform:none; } }
@keyframes hand-take { 0% { opacity:0; transform:translate(320px,-30px) rotate(12deg); } 62% { opacity:1; transform:translate(-12px,5px) rotate(-3deg); } 100% { opacity:1; transform:none; } }
@keyframes hand-rock { 0%,100% { opacity:1; transform:none; } 50% { opacity:1; transform:rotate(1.2deg); } }

/* 7 / the ask and the offer */
.posture-hero { max-width:min(62rem,100%); width:100%; margin-inline:auto; }
.posture-card { transform-origin:center; }
.posture-ask { transform:scale(.93); opacity:1; filter:brightness(.8); }
.posture-offer { transform:scale(1.04); }

/* 8 / the turn: three circles, cold email, the show, money */
.venn-hero .venn { max-height:min(64vh,680px); }
@media (max-width:700px) { .venn-hero .venn { max-height:none; width:100%; } }
.venn-three .venn-set circle { transform-box:view-box; transform-origin:320px 290px; }
.venn-money { fill:var(--gold); stroke:var(--gold); }
.is-playing .venn-email { animation:bloom .9s cubic-bezier(.2,.85,.3,1) both; }
.is-playing .venn-show { animation:bloom .9s cubic-bezier(.2,.85,.3,1) .12s both; }
.is-playing .venn-money { animation:bloom .9s cubic-bezier(.2,.85,.3,1) .26s both; }
.is-playing .venn-labels { animation:fade-in .5s ease .7s both; }
.is-playing .venn-meet { animation:fade-in .45s ease .95s both; }

/* 9 / the channel does not change */
.art-channel .ch-cone { opacity:.14; }
.art-channel .ch-envelope { stroke:var(--gold); }
.is-playing .art-channel .ch-cone { animation:cone-in 1s ease .5s both; }
.is-playing .art-channel .ch-envelope { animation:envelope-light 1.2s ease both; }
.art-channel .ch-flap { transform-box:fill-box; transform-origin:bottom; }
.is-playing .art-channel .ch-flap { animation:flap-open .8s cubic-bezier(.2,.8,.3,1) .3s both; }

/* 10 / one motion */
.art-motion .mo-arrow, .art-motion .mo-fused, .art-motion .mo-head { stroke-dasharray:420; stroke-dashoffset:0; }
.is-playing .art-motion .mo-a { animation:draw-line .8s ease both; }
.is-playing .art-motion .mo-b { animation:draw-line .8s ease both; }
.is-playing .art-motion .mo-fused { animation:draw-line .55s ease .8s both; }
.is-playing .art-motion .mo-head { animation:fade-in .3s ease 1.3s both; }
.is-playing .art-motion .mo-cal { animation:fade-up .5s ease 1.4s both; }

/* 11 / the chicken and the egg */
.art-loop .lp-spin { transform-box:view-box; transform-origin:308px 140px; opacity:.3; }
.art-loop .lp-show { opacity:1; transform-box:view-box; transform-origin:308px 140px; }
.art-loop .lp-open { stroke-dasharray:400; stroke-dashoffset:0; }
.is-playing .art-loop .lp-spin { animation:loop-spin 1.5s cubic-bezier(.4,0,.5,1) both; }
.is-playing .art-loop .lp-show { animation:drop-in .55s cubic-bezier(.2,.9,.3,1) 1.1s both; }
.is-playing .art-loop .lp-open { animation:draw-line .7s ease 1.6s both; }

/* 13 and 14 / one hundred attempts */
.stage-dots { min-width:0; }
.dot-field { display:grid; grid-template-columns:repeat(20,minmax(0,1fr)); gap:clamp(5px,.9vw,11px); width:min(860px,96%); }
.dot { display:block; aspect-ratio:1; border-radius:50%; background:var(--ink3); opacity:.45; }
.dot.is-six { background:var(--teal); opacity:1; }
.dot.is-deal { background:var(--gold); }
.dot.is-dim { opacity:.22; }
.is-playing .dot { animation:dot-fall .45s cubic-bezier(.2,.8,.3,1) both; animation-delay:calc(var(--i,0) * 11ms); }
.dot-field-faces { grid-template-columns:repeat(20,minmax(0,1fr)); }
.dot.is-face { position:relative; border-radius:4px; background:none; overflow:visible; z-index:2; }
.dot-thumb { position:absolute; left:50%; top:50%; width:clamp(56px,7.4vw,96px); height:auto; aspect-ratio:16/9; object-fit:cover; transform:translate(-50%,-50%); border-radius:4px; border:1px solid var(--line); box-shadow:0 8px 28px rgba(0,0,0,.55); }
.is-playing .dot-field-faces .is-face .dot-thumb { animation:swell .6s cubic-bezier(.2,.85,.3,1) both; animation-delay:calc(1s + var(--r,0) * 120ms); }

/* 15 / delivery, not copy */
.mailbox-strip { display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); gap:clamp(5px,1vw,12px); width:min(820px,96%); }
.mbox { display:block; aspect-ratio:1; border-radius:3px; background:var(--teal); opacity:.85; }
.mbox.is-dark { background:var(--panel2); border:1px solid var(--line); opacity:1; }
.is-playing .mbox:not(.is-dark) { animation:warm-up .5s ease both; animation-delay:calc(var(--i,0) * 26ms); }

/* 16 / the ring */
.art-ring { max-height:min(48vh,420px); }
.art-ring .rg-spin { transform-box:view-box; transform-origin:260px 200px; }
.art-ring .rg-node { opacity:1; }
.is-playing .art-ring .rg-spin { animation:ring-turn 2.4s cubic-bezier(.3,0,.3,1) both; }
.is-playing .art-ring .rg-node { animation:node-pulse .7s ease both; animation-delay:calc(var(--i,0) * 200ms + 300ms); }
.is-playing .art-ring .rg-inbox { animation:drop-in .5s ease 1.6s both; }

/* 17 / one inbox */
.art-funnel .fn-line, .art-funnel .fn-teal { stroke-dasharray:700; stroke-dashoffset:0; }
.is-playing .art-funnel .fn-line { animation:draw-line .9s ease both; animation-delay:calc(var(--i,0) * 110ms); }
.is-playing .art-funnel .fn-teal { animation:draw-line .8s ease 1.1s both; }
.is-playing .art-funnel .fn-inbox { animation:fade-in .5s ease 1.8s both; }

/* 18 / one real week */
#shots .cal-col { clip-path:inset(0 0 0 0); }
.is-playing #shots .cal-col { animation:wipe-down .5s ease both; animation-delay:calc(var(--day,0) * 280ms); }
#shots .cal-ev-title { opacity:0; transition:opacity .2s ease; }
#shots .cal-ev:hover .cal-ev-title, #shots .cal-ev:focus-within .cal-ev-title { opacity:1; }
/* The calendar body scrolls, so a popup above the block would be clipped.
   The frame fills the block instead, with the title riding on top of it. */
#shots .cal-ev.kind-taping[style*="--thumb"]:hover::after {
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--thumb) center/cover no-repeat; opacity:.42; pointer-events:none;
}
#shots .cal-ev:hover { z-index:5; }

/* 19 / nine before ten */
.stage-morning { flex-direction:column; gap:clamp(.6rem,2vh,1.4rem); }
.morning-count { font-family:var(--serif); font-size:clamp(2.4rem,6vw,4.6rem); line-height:1; color:var(--teal); font-variant-numeric:tabular-nums; }
.morning-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.5rem,1.4vw,1rem); width:min(620px,94%); }
.mblock { display:flex; align-items:center; justify-content:center; height:clamp(46px,7.5vh,72px); border-radius:4px; background:var(--panel); border:1px solid color-mix(in oklch,var(--teal) 42%,transparent); box-shadow:0 0 24px var(--teal-haze); }
.mblock-time { font-family:var(--mono); font-size:var(--type-label); letter-spacing:var(--tracking-label); color:var(--ink2); }
.is-playing .mblock { animation:block-in .4s cubic-bezier(.2,.85,.3,1) both; animation-delay:calc(var(--i,0) * 170ms); }

/* 20 / the offer */
#offer .tier-card { opacity:1; transform:none; }
.is-playing #offer .tier-card { animation:fade-up .6s cubic-bezier(.2,.8,.3,1) both; }
.is-playing #offer .tier-card:nth-child(2) { animation-delay:.14s; }
.is-playing #offer .tier-card:nth-child(3) { animation-delay:.28s; }
#offer .tier-show { position:relative; }
#offer .tier-show::after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--gold); transform:scaleX(1); transform-origin:left; }
.is-playing #offer .tier-show::after { animation:draw-underline .7s ease .6s both; }
.offer-fineprint { max-width:64rem; color:var(--ink3); font-size:.86rem; line-height:1.6; }
.offer-fineprint a { color:var(--ink3); text-decoration:underline; text-underline-offset:3px; }
.offer-fineprint a:hover { color:var(--teal); }
.fineprint-more { color:var(--ink3); }

/* 21 / you keep the keys */
.art-keys .ky-key { transform:translate(320px,110px) rotate(0deg); }
.is-playing .art-keys .ky-key { animation:key-hand 1.5s cubic-bezier(.4,0,.2,1) both; }
.is-playing .art-keys .ky-hand-right { animation:fade-in .6s ease 1.1s both; }

/* 22 / come on the show */
#close { align-items:flex-start; }
.close-button { align-self:flex-start; }
:root[data-active-page="close"] #convergence-scene { opacity:.1 !important; visibility:visible; }
:root[data-active-page="close"] .scene-backdrop { opacity:.14 !important; visibility:visible; }

@keyframes draw-line { from { stroke-dashoffset:820; } to { stroke-dashoffset:0; } }
@keyframes draw-underline { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes fade-in { from { opacity:0; } }
@keyframes fade-up { from { opacity:0; transform:translateY(16px); } }
@keyframes row-in { 0% { opacity:0; transform:translateX(-24px); } 62% { opacity:1; transform:translateX(2px); } 100% { opacity:1; transform:none; } }
@keyframes stack-blur { 0%,65% { filter:blur(0) saturate(1); opacity:1; } 100% { filter:blur(1.1px) saturate(0); opacity:1; } }
@keyframes filter-hit { 0%,100% { opacity:1; stroke:var(--line); filter:none; } 40% { opacity:1; stroke:var(--teal); filter:drop-shadow(0 0 7px var(--teal)); } }
@keyframes teal-glow { 0%,100% { filter:drop-shadow(0 0 1px var(--teal)); } 50% { filter:drop-shadow(0 0 6px var(--teal)); } }
@keyframes snuff { 0% { opacity:1; transform:translateY(0); } 20% { opacity:.72; transform:scale(.95,1.12) rotate(-3deg); } 38% { opacity:1; transform:scale(1.08,.9) rotate(2deg); } 56% { opacity:.8; transform:scale(.94,1.06); } 70% { opacity:1; transform:scale(1.04,.96); } 100% { opacity:0; transform:translateY(-6px) scaleY(.4); } }
@keyframes glyph-light { from { stroke:var(--ink3); } to { stroke:var(--teal); } }
@keyframes slide-out-left { 0% { opacity:1; color:var(--ink); transform:none; } 62% { transform:translateX(-10px); } 100% { opacity:1; color:var(--ink3); transform:none; } }
@keyframes slide-in-right { 0% { opacity:0; color:var(--ink3); transform:translateX(34px); text-shadow:none; } 100% { opacity:1; color:var(--gold); transform:none; text-shadow:0 0 22px var(--gold-glow); } }
@keyframes venn-left { from { transform:translateX(-120px); opacity:0; } }
@keyframes venn-right { from { transform:translateX(120px); opacity:0; } }
@keyframes cone-in { from { opacity:0; } }
@keyframes envelope-light { from { stroke:var(--ink3); } }
@keyframes flap-open { from { transform:rotateX(0deg); } to { transform:rotateX(0deg); } }
@keyframes loop-spin { from { transform:rotate(0deg); opacity:1; } to { transform:rotate(300deg); opacity:.3; } }
@keyframes drop-in { from { opacity:0; transform:scale(.4); } }
@keyframes bloom { from { opacity:0; transform:scale(.25); } }
@keyframes dot-fall { from { opacity:0; transform:translateY(-22px); } }
@keyframes swell { from { opacity:0; transform:translate(-50%,-50%) scale(.2); } }
@keyframes warm-up { from { background:var(--panel2); opacity:.35; } }
@keyframes ring-turn { from { transform:rotate(-40deg); } }
@keyframes node-pulse { 0% { opacity:.25; } 50% { opacity:1; } 100% { opacity:1; } }
@keyframes wipe-down { from { clip-path:inset(0 0 100% 0); } }
@keyframes block-in { from { opacity:0; transform:translateY(12px) scale(.9); } }
@keyframes key-hand {
  0% { transform:translate(170px,110px) rotate(0deg); opacity:0; }
  20% { opacity:1; }
  85% { transform:translate(320px,110px) rotate(0deg); }
  100% { transform:translate(320px,110px) rotate(14deg); }
}

@media (prefers-reduced-motion:reduce) {
  .is-playing * { animation:none !important; }
}

@media (max-width:700px) {
  .slide-line { font-size:clamp(2rem,8.4vw,2.9rem); max-width:none; }
  .art { max-height:34vh; }
  .dot-field, .dot-field-faces { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .mailbox-strip { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .flame-row { gap:.45rem; }
  .posture-pair { grid-template-columns:1fr; }
  .morning-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #offer .tier-grid { grid-template-columns:1fr; }
}

/* ============================================================
   2026-09-20 evening / the second pass on motion.
   One idea a slide, dramatised, settled inside three seconds.
   Every element below is authored at its END state; the keyframes
   run it in from a start pose. The reduced-motion and print block
   at the foot of this file restates those end states explicitly,
   so nothing depends on a keyframe to become visible.
   ============================================================ */

/* 1 / the hero: the ask hangs, the offer lands with weight. */
.hero { overflow:clip; }
.hero-copy, .hero-bottom, .hero .spoken { position:relative; z-index:1; }
.hero-asking { color:var(--ink2); }
.is-playing .hero-asking { animation:ask-hang 1.1s ease both; }
.is-playing .hero-offering { animation:offer-land .85s cubic-bezier(.2,.9,.3,1) .95s both; }
@keyframes ask-hang { 0% { opacity:0; transform:translateY(10px); } 100% { opacity:1; transform:none; } }
@keyframes offer-land { 0% { opacity:0; transform:translateY(-28px) scale(1.07); } 100% { opacity:1; transform:none; } }

/* 4 / the envelope recoils at each filter, then settles at the existing endpoint. */
.art-jeffrey .jf-envelope { transform:translate(486px,166px) rotate(-26deg); opacity:.18; }
.art-jeffrey .jf-name { font-family:var(--mono); font-size:13px; letter-spacing:var(--tracking-label); text-transform:uppercase; fill:var(--ink3); opacity:1; }
.is-playing .art-jeffrey .jf-envelope { animation:envelope-run 2.6s cubic-bezier(.2,.85,.3,1.15) both; }
.is-playing .art-jeffrey .jf-person { animation:led-land .55s cubic-bezier(.34,1.3,.5,1) 2.45s both; }
.is-playing .art-jeffrey .jf-name { animation:fade-in .5s cubic-bezier(.2,.85,.3,1.15) 2.75s both; }
@keyframes envelope-run {
  0% { transform:translate(-40px,110px) rotate(0deg); opacity:1; }
  20% { transform:translate(155px,102px) rotate(7deg); }
  27% { transform:translate(148px,110px) rotate(-6deg); }
  36% { transform:translate(245px,104px) rotate(5deg); }
  43% { transform:translate(237px,110px) rotate(-5deg); }
  52% { transform:translate(335px,106px) rotate(6deg); }
  59% { transform:translate(327px,112px) rotate(-5deg); }
  68% { transform:translate(425px,110px) rotate(5deg); }
  75%,82% { transform:translate(416px,114px) rotate(-8deg); }
  88% { transform:translate(482px,124px) rotate(-12deg); opacity:.42; }
  94% { transform:translate(489px,170px) rotate(-29deg); }
  100% { transform:translate(486px,166px) rotate(-26deg); opacity:.18; }
}

/* 5 / the trap: five candles go out one after another, the sixth stays lit. */
.flame { transform-box:fill-box; transform-origin:bottom; }
.is-playing .flame { animation:snuff .55s cubic-bezier(.2,.85,.3,1.15) both; animation-delay:calc(var(--n,0) * 380ms); }
.is-playing .flame-glyph { animation:glyph-light .5s cubic-bezier(.2,.85,.3,1.15) both; animation-delay:calc(var(--n,0) * 380ms + 200ms); }
.flame-cell.is-lit .flame { opacity:1; }
.flame-cell.is-lit .flame-glyph { stroke:var(--gold); }
.is-playing .flame-cell.is-lit .flame { animation:flame-hold .9s cubic-bezier(.34,1.3,.5,1) 2.1s both; }
.is-playing .flame-cell.is-lit .flame-glyph { animation:glyph-gold .5s cubic-bezier(.2,.85,.3,1.15) 2.3s both; }
#trap .stage { --bloom-at:2.1s; }
#trap .stage-bloom { inset:-35% -8% -35% 65%; background:radial-gradient(circle,var(--gold-glow),transparent 62%); }
#trap .is-lit { position:relative; isolation:isolate; }
#trap .is-lit::before { content:''; position:absolute; inset:-15% -40% 20%; z-index:-1; pointer-events:none; background:radial-gradient(circle,var(--gold-glow),transparent 62%); opacity:.34; }
#trap.is-playing .is-lit::before { animation:glow-swell 6s ease-in-out 3.1s infinite both; }
#trap .is-lit .flame path { transform-box:fill-box; transform-origin:bottom; }
#trap.is-playing .is-lit .flame path { animation:flame-idle 4.8s ease-in-out 3.1s infinite both; }
@keyframes flame-idle { 0%,100% { opacity:1; transform:none; } 23%,71% { opacity:1; transform:scale(.99,1.018) rotate(.8deg); } 46%,86% { opacity:1; transform:scale(1.012,.985) rotate(-.7deg); } }
@keyframes flame-hold { 0% { opacity:.2; transform:scaleY(.6); } 62% { opacity:1; transform:scaleY(1.07); } 100% { opacity:1; transform:none; } }
@keyframes glyph-gold { from { stroke:var(--ink3); } to { stroke:var(--gold); } }

/* 6 / the swapped line keeps a quiet breath after the hands have landed. */
.swap-line { transform-origin:left center; }
.swap-in { text-shadow:0 0 22px var(--gold-glow); }
.is-playing .swap-line { animation:line-breathe 6.5s ease-in-out 1.8s infinite both; }
@keyframes line-breathe { 0%,100% { opacity:1; transform:none; } 50% { opacity:1; transform:scale(1.012); } }

/* 7 / the posture pair: the ask and the offer physically trade places. */
.is-playing .posture-ask { animation:posture-cross-left 1.25s cubic-bezier(.34,1.3,.5,1) .2s both; }
.is-playing .posture-offer { animation:posture-cross-right 1.25s cubic-bezier(.34,1.3,.5,1) .2s both, posture-float 7s ease-in-out 1.65s infinite both; }
#posture .posture-hero { --bloom-at:1.4s; }
#posture .posture-offer { overflow:hidden; }
#posture .posture-offer::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(110deg,transparent 20%,var(--teal-haze),transparent 80%); }
#posture.is-playing .posture-offer::after { animation:sheen-pass 1.2s cubic-bezier(.3,0,.3,1) 1.35s both; }
/* Individual translate composes with the card's existing scale and cross transform. */
@keyframes posture-float { 0%,100% { translate:0 0; box-shadow:0 0 40px var(--teal-haze); } 50% { translate:0 -1.5px; box-shadow:0 5px 48px var(--teal-haze); } }
@keyframes posture-cross-left { 0% { transform:translateX(calc(100% + 1rem)); opacity:1; filter:brightness(1); } 50% { transform:translateX(calc(50% + .5rem)) translateY(24px) rotate(5deg) scale(.95); } 78% { transform:translate(-8px,4px) rotate(-2deg) scale(.91); } 100% { transform:scale(.93); opacity:1; filter:brightness(.8); } }
@keyframes posture-cross-right { 0% { transform:translateX(calc(-100% - 1rem)); opacity:1; } 50% { transform:translateX(calc(-50% - .5rem)) translateY(-26px) rotate(-4deg) scale(1.06); } 78% { transform:translate(8px,-4px) rotate(1.5deg) scale(1.07); } 100% { transform:scale(1.04); opacity:1; } }

/* 8 / the turn: the three circles close in, then one pulse through the middle. */
.venn-pulse { transform-box:view-box; transform-origin:320px 290px; opacity:0; }
.is-playing .venn-pulse { animation:venn-ring 1.1s ease 1.25s both; }
@keyframes venn-ring { 0% { opacity:0; transform:scale(.45); } 34% { opacity:.8; } 100% { opacity:0; transform:scale(1.28); } }
.is-playing .venn-meet { animation:fade-in .45s ease .95s both, meet-glow 1.4s ease 1.2s both; }
@keyframes meet-glow { 0%,100% { filter:none; } 50% { filter:drop-shadow(0 0 16px var(--gold-glow)); } }

/* 9 / the channel: the same envelope, the hand inside it turns into a handshake. */
.ch-glyph { transform-box:fill-box; transform-origin:center; }
.ch-ask { opacity:0; }
.ch-give { opacity:1; }
.is-playing .ch-ask { animation:glyph-out .55s ease .95s both; }
.is-playing .ch-give { animation:glyph-in .6s cubic-bezier(.2,.85,.3,1) 1.3s both; }
@keyframes glyph-out { 0% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(7px) scale(.88); } }
@keyframes glyph-in { 0% { opacity:0; transform:translateY(-9px) scale(.84); } 100% { opacity:1; transform:none; } }
.art-channel .ch-flap { backface-visibility:visible; transform-style:flat; transform:none; }
.is-playing .art-channel .ch-flap { animation:flap-open .8s cubic-bezier(.2,.8,.3,1) .25s both; }
@keyframes flap-open { from { transform:rotateX(-148deg); } to { transform:none; } }

/* 10 / one motion: two lanes fuse, and one pulse runs the fused line home. */
.mo-pulse { opacity:0; }
.is-playing .art-motion .mo-pulse { animation:mo-travel 1s cubic-bezier(.4,0,.6,1) 1.3s both; }
@keyframes mo-travel {
  0% { opacity:0; transform:translateX(0); }
  16% { opacity:1; }
  82% { opacity:1; transform:translateX(178px); }
  100% { opacity:0; transform:translateX(196px); }
}

/* 11 / the loop: it spins, the show drops in, the loop opens into a line. */
.is-playing .art-loop .lp-show { animation:drop-in .55s cubic-bezier(.2,.9,.3,1) 1.05s both, node-glow 1.1s ease 1.55s both; }
@keyframes node-glow { 0%,100% { filter:none; } 45% { filter:drop-shadow(0 0 18px var(--gold-glow)); } }

/* 12 / volume: the number counts up deliberately while the field lands. */
.stage-dots { flex-direction:column; gap:clamp(.5rem,1.8vh,1.2rem); }
.dot-readout { font-family:var(--serif); font-size:clamp(2rem,4.4vw,3.4rem); line-height:1; color:var(--teal); font-variant-numeric:tabular-nums; }

/* 13 / which six: the six bloom, and the rest of the field falls back. */
.is-playing .dot-field-faces .is-dim {
  animation:dot-fall .45s cubic-bezier(.2,.8,.3,1) both, dim-down .7s ease both;
  animation-delay:calc(var(--i,0) * 11ms), 1.5s;
}
@keyframes dim-down { from { opacity:.45; } to { opacity:.22; } }

/* 15 / delivery: most of the fleet warms up, and the ones that are blocked
   bounce off and go dark. The copy was never the problem. */
.mbox { transform:none; }
.is-playing .mbox:not(.is-dark) { animation:warm-up .5s ease both; animation-delay:calc(var(--i,0) * 22ms); }
.is-playing .mbox.is-dark { animation:bounce-off .75s cubic-bezier(.3,0,.4,1) both; animation-delay:calc(var(--i,0) * 22ms + 460ms); }
@keyframes bounce-off {
  0% { transform:none; background:var(--teal); }
  26% { transform:translateY(-11px) scale(1.14); background:var(--red); }
  58% { transform:translateY(3px); background:var(--red); }
  100% { transform:none; background:var(--panel2); }
}

/* 16 / under the hood: the machine assembles, spoke by spoke, then turns. */
.rg-spoke { stroke-dasharray:170; stroke-dashoffset:0; }
.is-playing .rg-spoke { animation:draw-spoke .5s ease both; animation-delay:calc(var(--i,0) * 130ms + 180ms); }
@keyframes draw-spoke { from { stroke-dashoffset:170; } }
.art-ring .rg-node { transform-box:fill-box; transform-origin:center; }
.is-playing .art-ring .rg-node { animation:node-assemble .6s cubic-bezier(.2,.85,.3,1) both; animation-delay:calc(var(--i,0) * 130ms + 120ms); }
@keyframes node-assemble { from { opacity:0; transform:scale(.2); } }
.is-playing .art-ring .rg-spin { animation:ring-turn 2.1s cubic-bezier(.3,0,.3,1) both; }
.is-playing .art-ring .rg-inbox { animation:drop-in .5s ease 1.5s both; }

/* 17 / the funnel: six lines land, a seventh arrives late from below, and the
   inbox rings once when it does. */
.fn-pulse { transform-box:view-box; transform-origin:540px 151px; opacity:0; }
.is-playing .art-funnel .fn-pulse { animation:fn-ring 1s ease 1.85s both; }
@keyframes fn-ring { 0% { opacity:0; transform:scale(.88); } 32% { opacity:.85; } 100% { opacity:0; transform:scale(1.2); } }

/* 18 / the week: the calendar fills a day at a time, then the tapings light. */
#shots .cal-ev { box-shadow:none; }
.is-playing #shots .cal-ev.kind-taping { animation:taping-light .6s ease both; animation-delay:calc(var(--day,0) * 280ms + 620ms); }
@keyframes taping-light {
  0% { box-shadow:none; }
  45% { box-shadow:0 0 0 1px var(--teal),0 0 18px var(--teal-haze); }
  100% { box-shadow:none; }
}

/* 19 / the morning: the hand sweeps to ten and nine dots appear along it. */
.morning-head { display:flex; align-items:center; justify-content:center; gap:clamp(.8rem,2.4vw,1.6rem); }
.morning-clock { flex:0 0 auto; width:clamp(64px,8vw,106px); height:auto; }
.mc-hand { transform-box:view-box; transform-origin:60px 60px; transform:none; }
.is-playing .mc-hand { animation:clock-sweep 1.8s cubic-bezier(.35,0,.25,1) both; }
@keyframes clock-sweep { from { transform:rotate(-300deg); } to { transform:none; } }
.mc-ticks circle { transform-box:fill-box; transform-origin:center; opacity:1; }
.is-playing .mc-ticks circle { animation:tick-in .4s cubic-bezier(.2,.85,.3,1) both; animation-delay:calc(var(--i,0) * 175ms + 160ms); }
@keyframes tick-in { from { opacity:0; transform:scale(.2); } }

/* 20 / the offer: three columns rise, and the middle one settles taller.
   Nothing here touches a price or the fine print. */
#offer .tier-card { --lift:0px; transform:translateY(var(--lift)); }
.is-playing #offer .tier-card { animation:column-rise .85s cubic-bezier(.2,.85,.3,1) both; }
.is-playing #offer .tier-card:nth-child(2) { animation-delay:.16s; }
.is-playing #offer .tier-card:nth-child(3) { animation-delay:.32s; }
@keyframes column-rise {
  0% { opacity:0; transform:translateY(calc(var(--lift) + 58px)) scaleY(.9); transform-origin:bottom; }
  100% { opacity:1; transform:translateY(var(--lift)); }
}

/* 21 / the keys: the key turns, and the door lights up behind it. */
.art-keys .ky-key { transform:translate(320px,110px) rotate(80deg); }
.art-keys .ky-door { opacity:1; }
.is-playing .art-keys .ky-key { animation:key-hand 1.6s cubic-bezier(.4,0,.2,1) both; }
.is-playing .art-keys .ky-door { animation:door-light .9s ease 1.2s both; }
@keyframes key-hand {
  0% { transform:translate(150px,110px) rotate(0deg); opacity:0; }
  18% { opacity:1; }
  62% { transform:translate(320px,110px) rotate(0deg); opacity:1; }
  100% { transform:translate(320px,110px) rotate(80deg); opacity:1; }
}
@keyframes door-light {
  0% { opacity:.15; filter:none; }
  58% { opacity:1; filter:drop-shadow(0 0 18px var(--gold-glow)); }
  100% { opacity:1; filter:none; }
}

/* 22 / the show: everything settles, then the invitation arrives and holds. */
.is-playing #close .close-button { animation:fade-up .7s ease .15s both; }
.is-playing #close .close-title { animation:title-arrive 1s cubic-bezier(.2,.85,.3,1) 1s both; }
@keyframes title-arrive { from { opacity:0; transform:translateY(20px) scale(.96); } }

/* Shared motion primitives keep figure parallax separate from each slide's beats. */
:root { --mx:0; --my:0; }
.page.slide { position:relative; }
.slide-line .w { display:inline-block; }
.slide-motion .slide[data-anim]:not(#hero) .slide-line .w { opacity:0; }
.is-playing .slide-line .w {
  animation:word-arrive .66s cubic-bezier(.2,.85,.3,1.14) both;
  animation-delay:calc(var(--w,0) * 52ms + 90ms);
}
@keyframes word-arrive {
  0% { opacity:0; transform:translate3d(0,.52em,0) scale(.96); filter:blur(7px); }
  58% { opacity:1; }
  100% { opacity:1; transform:none; filter:blur(0); }
}
@media (hover:hover) {
  .slide[data-anim]:not(#hero) .stage,
  #turn .venn-figure,
  #posture .posture-hero,
  #shots .cal,
  #offer .tier-grid {
    transform:translate3d(calc(var(--mx) * 7px), calc(var(--my) * 6px), 0)
              rotateX(calc(var(--my) * -1.1deg)) rotateY(calc(var(--mx) * 1.3deg));
    transition:transform .4s cubic-bezier(.2,.7,.2,1);
    transform-style:preserve-3d;
  }
}
@keyframes stage-breathe {
  0%,100% { transform:translate3d(calc(var(--mx) * 4px), calc(var(--my) * 3px), 0) scale(1); }
  50% { transform:translate3d(calc(var(--mx) * 4px), calc(var(--my) * 3px - 5px), 0) scale(1.014); }
}
@keyframes stage-drift {
  0%,100% { transform:translate3d(calc(var(--mx) * 4px), calc(var(--my) * 3px), 0) rotate(0deg); }
  50% { transform:translate3d(calc(var(--mx) * 4px + 4px), calc(var(--my) * 3px - 3px), 0) rotate(.7deg); }
}
@keyframes glow-swell { 0%,100% { opacity:.34; transform:scale(.97); } 50% { opacity:.72; transform:scale(1.05); } }
@keyframes bloom-pass { 0% { opacity:0; transform:scale(.7); } 38% { opacity:.85; } 100% { opacity:0; transform:scale(1.35); } }
@keyframes sheen-pass { 0% { opacity:0; transform:translateX(-120%); } 22% { opacity:.55; } 100% { opacity:0; transform:translateX(130%); } }
@keyframes vignette-pulse { 0% { opacity:0; } 34% { opacity:1; } 100% { opacity:0; } }
.slide[data-anim]:not(#hero) .stage, #turn .venn-figure, #posture .posture-hero { position:relative; }
.stage-bloom {
  position:absolute; inset:-12%; pointer-events:none; z-index:0; opacity:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--teal-haze), transparent 62%);
}
.stage-bloom.is-gold { background:radial-gradient(circle at 50% 50%, var(--gold-glow), transparent 62%); }
.is-playing .stage-bloom { animation:bloom-pass 1.5s cubic-bezier(.3,0,.3,1) var(--bloom-at, 1.2s) both; }
.slide[data-anim]:not(#hero)::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0;
  background:radial-gradient(ellipse at 50% 50%, transparent 46%, rgba(0,0,0,.42) 100%);
}
.slide[data-anim]:not(#hero).is-playing::after { animation:vignette-pulse 2.6s ease .1s both; }

/* ===== Act two choreography: the turn, the motion, volume =====
   Each slide keeps its original beat and gains weight, a settle, a light pass
   and a quiet loop. Idle animations carry fill-mode none so they stay inert
   until their delay elapses and never fight the entrance they follow. */

/* 8 / the turn: three circles collide, the overlap lights and keeps glowing. */
#turn .venn-figure { --bloom-at:1.15s; }
#turn .stage-bloom { background:radial-gradient(circle at 50% 46%,var(--gold-glow),transparent 60%); }
#turn.is-playing .venn-email { animation:venn-collide-l 1.05s cubic-bezier(.34,1.25,.5,1) 0s 1 normal both, circle-float 8s ease-in-out 2.4s infinite normal none; }
#turn.is-playing .venn-show { animation:venn-collide-r 1.05s cubic-bezier(.34,1.25,.5,1) .1s 1 normal both, circle-float 8.6s ease-in-out 2.8s infinite normal none; }
#turn.is-playing .venn-money { animation:venn-collide-up 1.05s cubic-bezier(.34,1.25,.5,1) .22s 1 normal both, circle-float 9.2s ease-in-out 3.1s infinite normal none; }
#turn.is-playing .venn-labels { animation:fade-in .5s cubic-bezier(.2,.85,.3,1.12) .82s both; }
#turn.is-playing .venn-meet { animation:meet-land .6s cubic-bezier(.34,1.3,.5,1) 1.05s both, meet-glow 1.4s ease 1.3s both; }
#turn.is-playing .venn-pill { animation:pill-breathe 7.4s ease-in-out 3s infinite normal none; }
#turn.is-playing .venn-pulse { animation:venn-ring 2.4s cubic-bezier(.3,0,.3,1) 1.25s both; }
@keyframes venn-collide-l { 0% { opacity:0; transform:translateX(-132px) scale(.9); } 62% { opacity:1; transform:translateX(15px) scale(1.035); } 100% { opacity:1; transform:none; } }
@keyframes venn-collide-r { 0% { opacity:0; transform:translateX(132px) scale(.9); } 62% { opacity:1; transform:translateX(-15px) scale(1.035); } 100% { opacity:1; transform:none; } }
@keyframes venn-collide-up { 0% { opacity:0; transform:translateY(126px) scale(.9); } 62% { opacity:1; transform:translateY(-14px) scale(1.035); } 100% { opacity:1; transform:none; } }
@keyframes circle-float { 0%,100% { transform:none; } 50% { transform:scale(1.014); } }
@keyframes meet-land { 0% { opacity:0; transform:translateY(14px) scale(.9); } 62% { opacity:1; transform:scale(1.045); } 100% { opacity:1; transform:none; } }
@keyframes pill-breathe { 0%,100% { filter:none; } 50% { filter:drop-shadow(0 0 13px var(--gold-glow)); } }
@keyframes venn-ring { 0% { opacity:0; transform:scale(.45); } 14% { opacity:.8; } 40% { opacity:0; transform:scale(1.28); } 52% { opacity:0; transform:scale(.55); } 64% { opacity:.5; } 100% { opacity:0; transform:scale(1.42); } }

/* 9 / the channel: the envelope lands, the hinge opens, the posture swaps. */
#channel .stage { --bloom-at:1.42s; }
.art-channel .ch-envelope { transform-box:fill-box; transform-origin:center; }
.art-channel .ch-cone { transform-box:view-box; transform-origin:320px 250px; }
#channel.is-playing .ch-envelope { animation:envelope-light 1.2s ease both, ch-arrive .95s cubic-bezier(.34,1.3,.5,1) 0s 1 normal both, ch-rock 7.2s ease-in-out 2.6s infinite normal none; }
#channel.is-playing .ch-cone { animation:cone-in 1s ease .5s both, cone-widen 1.1s cubic-bezier(.34,1.25,.5,1) 1.25s 1 normal both, cone-breathe 6.6s ease-in-out 2.9s infinite normal none; }
@keyframes ch-arrive { 0% { opacity:0; transform:translateY(46px) scale(.88); } 62% { opacity:1; transform:translateY(-7px) scale(1.025); } 100% { opacity:1; transform:none; } }
@keyframes ch-rock { 0%,100% { transform:none; } 34% { transform:rotate(1.1deg); } 72% { transform:rotate(-.9deg); } }
@keyframes cone-widen { 0% { transform:scaleX(.55); } 62% { transform:scaleX(1.06); } 100% { transform:none; } }
@keyframes cone-breathe { 0%,100% { opacity:.14; } 50% { opacity:.24; } }
@keyframes flap-open { 0% { transform:rotateX(-148deg); } 68% { transform:rotateX(13deg); } 100% { transform:none; } }
@keyframes glyph-in { 0% { opacity:0; transform:translateY(-22px) scale(.7); } 62% { opacity:1; transform:translateY(3px) scale(1.09); } 100% { opacity:1; transform:none; } }

/* 10 / one motion: two arrows draw, fuse into one, and the pulse never stops. */
#onemotion .stage { --bloom-at:1.2s; }
#onemotion .stage-bloom { background:radial-gradient(circle at 52% 50%,var(--gold-glow),transparent 62%); }
.art-motion .mo-head, .art-motion .mo-cal { transform-box:fill-box; transform-origin:center; }
#onemotion.is-playing .art-motion .mo-a { animation:draw-line .9s cubic-bezier(.2,.85,.3,1.05) both; }
#onemotion.is-playing .art-motion .mo-b { animation:draw-line .9s cubic-bezier(.2,.85,.3,1.05) both; }
#onemotion.is-playing .art-motion .mo-fused { animation:draw-line .55s cubic-bezier(.2,.85,.3,1.05) .85s both, fuse-flash 1.1s ease 1.05s both; }
#onemotion.is-playing .art-motion .mo-head { animation:fade-in .3s ease 1.3s both, head-pop .55s cubic-bezier(.34,1.35,.5,1) 1.3s both; }
#onemotion.is-playing .art-motion .mo-cal { animation:fade-up .5s cubic-bezier(.2,.85,.3,1.12) 1.45s both, cal-breathe 7s ease-in-out 2.8s infinite normal none; }
#onemotion.is-playing .art-motion .mo-pulse { animation:mo-travel 1s cubic-bezier(.4,0,.6,1) 1.3s both, mo-cycle 6.4s cubic-bezier(.4,0,.6,1) 2.6s infinite normal none; }
@keyframes mo-cycle {
  0% { opacity:0; transform:translateX(0); }
  4% { opacity:1; }
  20% { opacity:1; transform:translateX(178px); }
  25% { opacity:0; transform:translateX(196px); }
  100% { opacity:0; transform:translateX(196px); }
}
@keyframes fuse-flash { 0%,100% { filter:none; } 42% { filter:drop-shadow(0 0 12px var(--gold-glow)); } }
@keyframes head-pop { 0% { transform:scale(.4); } 62% { transform:scale(1.22); } 100% { transform:none; } }
@keyframes cal-breathe { 0%,100% { transform:none; } 50% { transform:translateY(-2.5px) scale(1.012); } }

/* 11 / the loop: the ring never stops turning, because that is the point. */
#loop .stage { --bloom-at:1.5s; }
#loop .stage-bloom { background:radial-gradient(circle at 48% 50%,var(--gold-glow),transparent 62%); }
#loop.is-playing .art-loop .lp-spin { animation:loop-spin 1.5s cubic-bezier(.4,0,.5,1) 0s 1 normal both, lp-turn 62s linear 1.5s infinite normal none; }
#loop.is-playing .art-loop .lp-show { animation:drop-in .6s cubic-bezier(.34,1.3,.5,1) 1.05s both, node-glow 1.1s ease 1.55s both, lp-pulse 7.2s ease-in-out 3s infinite normal none; }
#loop.is-playing .art-loop .lp-open { animation:draw-line .75s cubic-bezier(.2,.85,.3,1.05) 1.6s both; }
@keyframes lp-turn { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes lp-pulse { 0%,100% { filter:drop-shadow(0 0 2px var(--gold-glow)); } 50% { filter:drop-shadow(0 0 15px var(--gold-glow)); } }

/* 13 / volume: a hundred dots sweep in and the field keeps shimmering. */
#volume .stage { --bloom-at:1.5s; }
#volume.is-playing .dot { animation:dot-drop .52s cubic-bezier(.34,1.3,.5,1) 0s 1 normal both, dot-shimmer 6.4s ease-in-out 0s infinite normal none; animation-delay:calc(var(--i,0) * 13ms), calc(1.9s + var(--i,0) * 19ms); }
#volume.is-playing .dot-readout { animation:readout-rise .7s cubic-bezier(.34,1.3,.5,1) .1s both, readout-glow 7s ease-in-out 2.6s infinite normal none; }
@keyframes dot-drop { 0% { opacity:0; transform:translateY(-16px) scale(.35); } 62% { transform:scale(1.28); } 100% { transform:none; } }
@keyframes dot-shimmer { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.6); } }
@keyframes readout-rise { 0% { opacity:0; transform:translateY(16px) scale(.92); } 62% { opacity:1; transform:scale(1.04); } 100% { opacity:1; transform:none; } }
@keyframes readout-glow { 0%,100% { text-shadow:none; } 50% { text-shadow:0 0 18px var(--teal-haze); } }

/* 14 / which six: the field dims and the six light one at a time. */
#whichsix .stage { --bloom-at:1.95s; }
#whichsix.is-playing .dot { animation:dot-drop .5s cubic-bezier(.34,1.3,.5,1) both; animation-delay:calc(var(--i,0) * 9ms); }
#whichsix.is-playing .dot-field-faces .is-dim { animation:dot-drop .5s cubic-bezier(.34,1.3,.5,1) 0s 1 normal both, dim-down .7s ease 0s 1 normal forwards; animation-delay:calc(var(--i,0) * 9ms), calc(1.05s + var(--i,0) * 6ms); }
#whichsix.is-playing .is-six { animation:six-pop .6s cubic-bezier(.34,1.4,.5,1) 0s 1 normal forwards, six-glow 7s ease-in-out 0s infinite normal none; animation-delay:calc(1.05s + var(--r,0) * 175ms), calc(3.4s + var(--r,0) * 420ms); }
#whichsix.is-playing .dot-field-faces .is-face .dot-thumb { animation:swell .65s cubic-bezier(.34,1.35,.5,1) both; animation-delay:calc(1.15s + var(--r,0) * 175ms); }
@keyframes six-pop { 0% { opacity:1; transform:scale(1); filter:brightness(1); } 55% { transform:scale(1.5); filter:brightness(1.9); } 100% { opacity:1; transform:none; filter:brightness(1); } }
@keyframes six-glow { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.45); } }

/* 15 / delivery: the strip lights in a ripple, the dead boxes fall out of it. */
#delivery .stage { --bloom-at:1.1s; }
#delivery.is-playing .mbox:not(.is-dark) { animation:warm-up .48s cubic-bezier(.34,1.3,.5,1) 0s 1 normal both, box-wave 6.2s ease-in-out 0s infinite normal none; animation-delay:calc(var(--i,0) * 18ms), calc(2.2s + var(--i,0) * 27ms); }
#delivery.is-playing .mbox.is-dark { animation:bounce-off .8s cubic-bezier(.34,1.2,.5,1) both; animation-delay:calc(var(--i,0) * 18ms + 520ms); }
@keyframes box-wave { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.5); } }

/* ===== Act three choreography: the machine, the week, the offer =====
   Same contract as act two: keep the original beat, add weight, a settle,
   a light pass and a loop that never quite stops. */

/* 16 / the ring: spokes draw, nodes assemble, and a current keeps running the loop. */
#hood .stage { --bloom-at:1.75s; }
#hood .stage-bloom { background:radial-gradient(circle at 50% 50%,var(--gold-glow),transparent 58%); }
.art-ring .rg-track { transform-box:view-box; transform-origin:260px 200px; }
#hood.is-playing .art-ring .rg-spoke { animation:draw-spoke .55s cubic-bezier(.2,.85,.3,1.05) both; animation-delay:calc(var(--i,0) * 135ms + 180ms); }
#hood.is-playing .art-ring .rg-node { animation:node-assemble .68s cubic-bezier(.34,1.35,.5,1) 0s 1 normal both, node-current 7.2s ease-in-out 0s infinite normal none; animation-delay:calc(var(--i,0) * 135ms + 140ms), calc(3.2s + var(--i,0) * 340ms); }
#hood.is-playing .art-ring .rg-inbox { animation:drop-in .6s cubic-bezier(.34,1.35,.5,1) 1.6s both, inbox-glow 7.6s ease-in-out 3.4s infinite normal none; }
#hood.is-playing .art-ring .rg-track { animation:track-breathe 8s ease-in-out 3s infinite normal none; }
@keyframes node-current { 0%,100% { filter:none; } 50% { filter:drop-shadow(0 0 10px var(--teal-haze)); } }
@keyframes inbox-glow { 0%,100% { filter:drop-shadow(0 0 2px var(--gold-glow)); } 50% { filter:drop-shadow(0 0 16px var(--gold-glow)); } }
@keyframes track-breathe { 0%,100% { transform:none; opacity:1; } 50% { transform:scale(1.014); opacity:.72; } }

/* 17 / the funnel: six greys converge, the teal one arrives, the inbox keeps answering. */
#funnel .stage { --bloom-at:1.85s; }
#funnel .stage-bloom { inset:-14% -6% -14% 52%; background:radial-gradient(circle at 60% 50%,var(--gold-glow),transparent 62%); }
.art-funnel .fn-inbox { transform-box:fill-box; transform-origin:center; }
#funnel.is-playing .art-funnel .fn-line { animation:draw-line .95s cubic-bezier(.2,.85,.3,1.05) both; animation-delay:calc(var(--i,0) * 120ms); }
#funnel.is-playing .art-funnel .fn-teal { animation:draw-line .85s cubic-bezier(.2,.85,.3,1.05) 1.1s 1 normal both, teal-breathe 7.4s ease-in-out 3.2s infinite normal none; }
#funnel.is-playing .art-funnel .fn-inbox { animation:inbox-land .6s cubic-bezier(.34,1.35,.5,1) 1.8s both, inbox-glow 7.6s ease-in-out 3.6s infinite normal none; }
#funnel.is-playing .art-funnel .fn-pulse { animation:fn-ring 1s ease 1.85s 1 normal both, fn-echo 6.4s cubic-bezier(.3,0,.3,1) 3.4s infinite normal none; }
@keyframes inbox-land { 0% { opacity:0; transform:scale(.6); } 62% { opacity:1; transform:scale(1.1); } 100% { opacity:1; transform:none; } }
@keyframes teal-breathe { 0%,100% { opacity:1; } 50% { opacity:.62; } }
@keyframes fn-echo { 0% { opacity:0; transform:scale(.88); } 8% { opacity:.7; } 26% { opacity:0; transform:scale(1.2); } 100% { opacity:0; transform:scale(1.2); } }

/* 18 / the week: the days fill one at a time, then the tapings light. */
#shots.is-playing .cal-col { animation:wipe-down .58s cubic-bezier(.2,.85,.3,1.05) both; animation-delay:calc(var(--day,0) * 280ms); }
#shots.is-playing .cal-ev { animation:ev-land .5s cubic-bezier(.34,1.3,.5,1) both; animation-delay:calc(var(--day,0) * 280ms + 110ms); }
#shots.is-playing .cal-ev.kind-taping { animation:ev-land .5s cubic-bezier(.34,1.3,.5,1) 0s 1 normal both, taping-light .75s ease 0s 1 normal both, taping-hold 7.4s ease-in-out 0s infinite normal none; animation-delay:calc(var(--day,0) * 280ms + 110ms), calc(var(--day,0) * 280ms + 680ms), calc(3.4s + var(--day,0) * 220ms); }
#shots.is-playing .cal-tab { animation:tab-rise .5s cubic-bezier(.34,1.3,.5,1) both; }
@keyframes ev-land { 0% { opacity:0; transform:translateY(-7px) scaleY(.66); } 62% { opacity:1; transform:scaleY(1.06); } 100% { opacity:1; transform:none; } }
@keyframes taping-light { 0% { box-shadow:none; } 45% { box-shadow:0 0 0 1px var(--teal),0 0 24px var(--teal-haze); } 100% { box-shadow:none; } }
@keyframes taping-hold { 0%,100% { box-shadow:none; } 50% { box-shadow:0 0 0 1px color-mix(in oklch,var(--teal) 42%,transparent),0 0 14px var(--teal-haze); } }
@keyframes tab-rise { 0% { opacity:0; transform:translateY(9px); } 62% { opacity:1; transform:translateY(-2px); } 100% { opacity:1; transform:none; } }

/* 19 / the morning: the hand sweeps, nine blocks land, the clock keeps ticking. */
#morning .stage { --bloom-at:1.85s; }
#morning.is-playing .mc-hand { animation:clock-sweep 1.9s cubic-bezier(.34,1.18,.4,1) 0s 1 normal both, hand-tick 7s ease-in-out 2.6s infinite normal none; }
#morning.is-playing .mc-ticks circle { animation:tick-in .46s cubic-bezier(.34,1.4,.5,1) both; animation-delay:calc(var(--i,0) * 175ms + 180ms); }
#morning.is-playing .mblock { animation:mblock-land .58s cubic-bezier(.34,1.32,.5,1) 0s 1 normal both, mblock-wave 6.8s ease-in-out 0s infinite normal none; animation-delay:calc(var(--i,0) * 170ms), calc(2.6s + var(--i,0) * 190ms); }
@keyframes hand-tick { 0%,100% { transform:none; } 46% { transform:rotate(1.6deg); } }
@keyframes mblock-land { 0% { opacity:0; transform:translateY(16px) scale(.9); } 62% { opacity:1; transform:translateY(-3px) scale(1.02); } 100% { opacity:1; transform:none; } }
@keyframes mblock-wave { 0%,100% { box-shadow:0 0 24px var(--teal-haze); } 50% { box-shadow:0 0 38px var(--teal-haze); } }

/* 20 / the offer: three columns rise and each catches one pass of light. */
#offer.is-playing .tier-card:nth-child(2) { animation-delay:.17s, 3s; }
#offer.is-playing .tier-card:nth-child(3) { animation-delay:.34s, 3.2s; }
#offer .tier-card::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; background:linear-gradient(112deg,transparent 36%,var(--card-glow,rgba(255,255,255,.16)) 50%,transparent 64%); background-size:280% 100%; background-position:130% 0; }
#offer.is-playing .tier-card::after { animation:card-sheen 1.15s cubic-bezier(.3,0,.3,1) .5s both; }
#offer.is-playing .tier-card:nth-child(2)::after { animation-delay:.67s; }
#offer.is-playing .tier-card:nth-child(3)::after { animation-delay:.84s; }
#offer.is-playing .tier-card { animation:column-rise .9s cubic-bezier(.34,1.28,.5,1) 0s 1 normal both, card-breathe 7.2s ease-in-out 0s infinite normal none; animation-delay:0s, 2.8s; }
@keyframes card-sheen { 0% { opacity:0; background-position:130% 0; } 24% { opacity:1; } 100% { opacity:0; background-position:-50% 0; } }
@keyframes card-breathe { 0%,100% { box-shadow:none; } 50% { box-shadow:0 0 26px -14px var(--card-accent,var(--teal)); } }

/* 21 / the keys: the hands arrive, the key turns, the door lights and stays warm. */
#keys .stage { --bloom-at:1.35s; }
#keys .stage-bloom { inset:-18% 26% -18% 26%; background:radial-gradient(circle at 50% 50%,var(--gold-glow),transparent 60%); }
#keys.is-playing .art-keys .ky-hand-left { animation:hand-arrive-l .85s cubic-bezier(.34,1.3,.5,1) .1s both; }
#keys.is-playing .art-keys .ky-hand-right { animation:hand-arrive-r .85s cubic-bezier(.34,1.3,.5,1) .22s both; }
#keys.is-playing .art-keys .ky-key { animation:key-hand 1.7s cubic-bezier(.34,1.16,.42,1) both; }
#keys.is-playing .art-keys .ky-door { animation:door-light 1s ease 1.25s 1 normal both, door-warm 7.4s ease-in-out 2.6s infinite normal none; }
@keyframes hand-arrive-l { 0% { opacity:0; transform:translateX(-56px); } 62% { opacity:1; transform:translateX(6px); } 100% { opacity:1; transform:none; } }
@keyframes hand-arrive-r { 0% { opacity:0; transform:translateX(56px); } 62% { opacity:1; transform:translateX(-6px); } 100% { opacity:1; transform:none; } }
@keyframes door-warm { 0%,100% { filter:none; } 50% { filter:drop-shadow(0 0 14px var(--gold-glow)); } }

/* 22 / the show: the mark draws itself and then never stops turning. */
#close .stage { --bloom-at:1.5s; }
.art-mark .mk-ring, .art-mark .mk-ring2, .art-mark .mk-dot { transform-box:view-box; transform-origin:160px 160px; }
#close.is-playing .mk-ring { animation:mark-draw 1.2s cubic-bezier(.2,.85,.3,1.05) .25s both, mark-turn 74s linear 1.45s infinite normal none; }
#close.is-playing .mk-ring2 { animation:mark-draw2 .95s cubic-bezier(.2,.85,.3,1.05) .7s both, mark-turn-back 56s linear 1.65s infinite normal none; }
#close.is-playing .mk-dot { animation:dot-arrive .6s cubic-bezier(.34,1.4,.5,1) 1.5s 1 normal both, dot-beat 6.6s ease-in-out 2.4s infinite normal none; }
#close.is-playing .close-button { animation:fade-up .75s cubic-bezier(.34,1.26,.5,1) .18s both; }
#close.is-playing .close-title { animation:title-arrive .9s cubic-bezier(.34,1.26,.5,1) .05s both; }
@keyframes mark-turn { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes mark-turn-back { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } }
@keyframes dot-arrive { 0% { opacity:0; transform:scale(.2); } 62% { opacity:1; transform:scale(1.5); } 100% { opacity:1; transform:none; } }
@keyframes dot-beat { 0%,100% { transform:scale(1); filter:drop-shadow(0 0 2px var(--teal-haze)); } 50% { transform:scale(1.14); filter:drop-shadow(0 0 14px var(--teal-haze)); } }


/* 5 / the ridge draws, the near hill takes the gold dot, the far peak lights teal. */
#maxima .stage { --bloom-at:1.75s; }
#maxima.is-playing .maxima .ridge { stroke-dasharray:1400; stroke-dashoffset:1400; animation:ridge-draw 1.7s cubic-bezier(.3,0,.2,1) .2s forwards; }
#maxima.is-playing .maxima .you { animation:peak-land .55s cubic-bezier(.34,1.45,.5,1) .75s 1 normal both, you-glow 7.4s ease-in-out 3s infinite normal none; }
#maxima.is-playing .maxima .lab.g { animation:fade-in .5s cubic-bezier(.2,.85,.3,1.12) 1s both; }
#maxima.is-playing .maxima .dash { animation:dash-travel 1s cubic-bezier(.3,0,.3,1) 1.25s both; }
#maxima.is-playing .maxima .peak { animation:peak-land .6s cubic-bezier(.34,1.45,.5,1) 1.75s 1 normal both, peak-glow 7s ease-in-out 3.6s infinite normal none; }
#maxima.is-playing .maxima .lab.t, #maxima.is-playing .maxima .sub { animation:fade-in .5s cubic-bezier(.2,.85,.3,1.12) 2s both; }
#maxima.is-playing .maxima .ground { animation:ground-breathe 8s ease-in-out 3.2s infinite normal none; }
@keyframes peak-land { 0% { opacity:0; transform:translateY(-20px) scale(.3); } 58% { opacity:1; transform:translateY(2px) scale(1.5); } 100% { opacity:1; transform:none; } }
@keyframes dash-travel { 0% { opacity:0; stroke-dashoffset:60; } 24% { opacity:.7; } 100% { opacity:.7; stroke-dashoffset:0; } }
@keyframes you-glow { 0%,100% { filter:drop-shadow(0 0 1px var(--gold-glow)); } 50% { filter:drop-shadow(0 0 11px var(--gold-glow)); } }
@keyframes peak-glow { 0%,100% { filter:drop-shadow(0 0 2px var(--teal-haze)); } 50% { filter:drop-shadow(0 0 16px var(--teal-haze)); } }
@keyframes ground-breathe { 0%,100% { opacity:1; } 50% { opacity:.6; } }

/* The end states, restated. Under reduced motion and in print nothing animates,
   so every pose a keyframe would have produced is written out here. This is the
   rule that the Sep 18 blank flip broke; animation:none alone is not enough. */
@media print, (prefers-reduced-motion:reduce) {
  .is-playing *, .is-playing *::before, .is-playing *::after { animation:none !important; }
  .slide-line .w { opacity:1 !important; transform:none !important; filter:none !important; }
  .stage-bloom { opacity:0 !important; }
  .slide[data-anim]::after { opacity:0 !important; }
  .slide[data-anim] .stage, #turn .venn-figure, #posture .posture-hero, #shots .cal, #offer .tier-grid {
    transform:none !important;
  }
  .spoken { opacity:1 !important; transform:none !important; }
  .hero-asking, .hero-offering { opacity:1; transform:none; }
  .led-row { opacity:1; transform:none; }
  .led-plus { opacity:0; }
  .led-minus { opacity:1; }
  .led-what { color:var(--red); }
  .led-balance-fill { transform:scaleX(0); }
  .led-balance-zero { opacity:1; }
  .inbox-stack { filter:blur(1.1px) saturate(0); opacity:1; }
  .inbox-row { opacity:1; transform:none; filter:none; }
  .art-jeffrey .jf-envelope { transform:translate(486px,166px) rotate(-26deg); opacity:.18; }
  .art-jeffrey .jf-filter, .art-jeffrey .jf-person, .art-jeffrey .jf-name { opacity:1; transform:none; }
  .flame { opacity:0; transform:none; }
  .flame-cell.is-lit .flame { opacity:1; transform:none; }
  .flame-glyph { stroke:var(--teal); }
  .flame-cell.is-lit .flame-glyph { stroke:var(--gold); }
  .swap-out { opacity:1; transform:none; color:var(--ink3); }
  .swap-hand-take, .art-swap .swap-hand-give { opacity:1; transform:none; }
  #posture .posture-offer::after { opacity:0; }
  #trap .is-lit::before { opacity:.34; transform:none; }
  #ledger .ledger-book::after { clip-path:inset(0); }
  .swap-in { opacity:1; transform:none; }
  .swap-line { transform:none; }
  .art-swap .swap-arc { stroke-dashoffset:0; }
  .art-swap .swap-hand-give { opacity:1; transform:none; }
  .posture-ask { transform:scale(.93); opacity:1; filter:brightness(.8); }
  .posture-offer { transform:scale(1.04); opacity:1; }
  .venn-set circle { opacity:1; transform:none; }
  .venn-labels, .venn-meet { opacity:1; transform:none; filter:none; }
  .venn-pulse { opacity:0; }
  .art-channel .ch-cone { opacity:.14; }
  .art-channel .ch-envelope { stroke:var(--gold); opacity:1; }
  .art-channel .ch-flap { transform:none; backface-visibility:visible; transform-style:flat; }
  .ch-ask { opacity:0; }
  .ch-give { opacity:1; transform:none; }
  .art-motion .mo-arrow, .art-motion .mo-fused, .art-motion .mo-head { stroke-dashoffset:0; opacity:1; }
  .art-motion .mo-cal { opacity:1; transform:none; }
  .mo-pulse { opacity:0; }
  .art-loop .lp-spin { transform:none; opacity:.3; }
  .art-loop .lp-show { opacity:1; transform:none; filter:none; }
  .art-loop .lp-open { stroke-dashoffset:0; }
  .art-ledger .ledger-drain { stroke-dashoffset:0; }
  .dot { opacity:.45; transform:none; }
  .dot.is-six { opacity:1; }
  .dot.is-dim { opacity:.22; }
  .dot-thumb { opacity:1; transform:translate(-50%,-50%); }
  .mbox { transform:none; }
  .mbox:not(.is-dark) { background:var(--teal); opacity:.85; }
  .mbox.is-dark { background:var(--panel2); opacity:1; }
  .rg-spoke { stroke-dashoffset:0; }
  .art-ring .rg-spin { transform:none; }
  .art-ring .rg-node, .art-ring .rg-inbox { opacity:1; transform:none; }
  .art-funnel .fn-line, .art-funnel .fn-teal { stroke-dashoffset:0; }
  .art-funnel .fn-inbox { opacity:1; transform:none; }
  .fn-pulse { opacity:0; }
  #shots .cal-col { clip-path:none; }
  #shots .cal-ev { opacity:1; transform:none; box-shadow:none; }
  #shots .cal-ev-title { opacity:1; }
  .mc-hand { transform:none; }
  .mc-ticks circle { opacity:1; transform:none; }
  .mblock { opacity:1; transform:none; }
  #offer .tier-card { opacity:1; transform:translateY(var(--lift)); }
  #offer .tier-show::after { transform:scaleX(1); }
  .art-keys .ky-key { transform:translate(320px,110px) rotate(80deg); opacity:1; }
  .art-keys .ky-hand-left, .art-keys .ky-hand-right { opacity:1; transform:none; }
  .art-keys .ky-door { opacity:1; filter:none; }
  .maxima .you, .maxima .peak { opacity:1; transform:none; filter:none; }
  .maxima .ridge { stroke-dashoffset:0 !important; }
  .maxima .dash { opacity:.7; stroke-dashoffset:0; }
  .mk-ring, .mk-ring2 { stroke-dashoffset:0; }
  .mk-dot { opacity:1; }
  .maxima .ground { opacity:1; }
  .maxima .lab, .maxima .sub { opacity:1; }
  .venn-pill, .art-ring .rg-node, .art-ring .rg-inbox, .art-funnel .fn-inbox, .mk-dot { filter:none; }
  .art-ring .rg-track { transform:none; opacity:1; }
  .art-funnel .fn-teal { opacity:1; }
  .mk-ring, .mk-ring2, .mk-dot { transform:none; }
  .dot, .dot.is-six, .mbox, .art-motion .mo-cal { filter:none; }
  .art-motion .mo-cal, .art-motion .mo-head { transform:none; }
  .dot-readout { opacity:1; transform:none; text-shadow:none; }
  #shots .cal-tab { opacity:1; transform:none; }
  #shots .cal-ev.kind-taping { box-shadow:none; }
  #offer .tier-card::after { opacity:0; }
  #offer .tier-card { box-shadow:none; }
  #morning .mblock { box-shadow:0 0 24px var(--teal-haze); }
  #close .close-title, #close .close-button { opacity:1; transform:none; }
}

/* The week page carries the calendar, its key and the spoken line, so the
   calendar body gives back the height the line needs. */
#shots .cal-body { max-height:min(50vh,500px); }
@media (max-width:760px) { #shots .cal-body { max-height:min(46vh,420px); } }
@media (max-width:700px) { .spoken { padding-right:5.5rem; } }

/* Every slide pairs one centred text block with one centred visual. */
@media (min-width:901px) {
  .page.slide { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); column-gap:clamp(2.5rem,5vw,5rem); align-items:center; align-content:center; justify-content:normal; }
  .slide-text { grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:clamp(.8rem,2.2vh,1.6rem); min-width:0; text-align:left; }
  .slide-visual { grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:center; min-width:0; max-height:100%; }
  body.present-mode .page.slide.is-present-slide { display:grid; justify-content:normal; align-content:center; }
  .slide-line { max-width:none; }
  .hero-copy { width:100%; }
  .closing .slide-text { text-align:left; align-items:flex-start; }
  .closing .close-title { max-width:18ch; }
  #close { align-items:center; }
  .slide-visual .art { max-width:100%; max-height:min(56vh,500px); }
  .slide-visual .venn { max-height:min(56vh,520px); max-width:100%; }
  .slide-visual .venn-hero, .slide-visual .posture-hero { max-width:100%; }
  .slide-visual .ledger-book, .slide-visual .inbox-stack, .slide-visual .dot-field, .slide-visual .mailbox-strip, .slide-visual .morning-grid { width:100%; }
  .slide-visual .posture-hero .posture-card { padding:clamp(.8rem,1.8vh,1.3rem) 1rem; }
  .slide-visual .posture-hero .posture-card h3 { font-size:clamp(1.3rem,1.9vw,2rem); }
  /* Three tiers stacked in half a page only fit if the cards themselves give
     back the height. Nothing here touches a price, a term or a link. */
  .slide-visual .tier-grid { grid-template-columns:minmax(0,1fr); gap:.55rem; }
  .slide-visual .tier-card { --lift:0px; padding:.5rem .8rem; }
  .slide-visual .tier-card h3 { margin-bottom:.1rem; font-size:clamp(1.1rem,1.4vw,1.45rem); }
  .slide-visual .tier-price { margin-top:.2rem; }
  .slide-visual .tier-total { font-size:clamp(1.25rem,1.5vw,1.6rem); }
  .slide-visual .tier-show { margin-top:.25rem; padding-top:.25rem; }
  .slide-visual .tier-show-now { font-size:1.05rem; }
  .slide-visual .tier-cta { padding-top:.35rem; }
  .slide-visual .tier-cta .primary-button { padding:.4rem .9rem; }
  .slide-visual .cal { --hour-h:clamp(24px,3.1vh,34px); --cal-gutter-w:34px; }
  #shots .slide-visual .cal-body { max-height:min(56vh,520px); }
  .hero-scene-slot { width:100%; height:min(62vh,560px); }
  .slide-visual .art-mark { width:min(100%,320px); max-height:min(44vh,320px); }
}

/* Stacked slides keep their natural height and put the words first. */
@media (max-width:900px) {
  .slide-text, .slide-visual { display:flex; flex-direction:column; align-items:stretch; justify-content:center; width:100%; min-width:0; gap:clamp(.7rem,1.8vh,1.2rem); }
  .hero-scene-slot { display:none; }
}

/* The text arrives first, then the visual follows with the same easing. */
@keyframes slide-block-in { from { opacity:0; transform:translateY(18px); } }
.slide-motion .slide:not(.is-playing) .slide-text, .slide-motion .slide:not(.is-playing) .slide-visual { opacity:0; }
.slide-motion .slide.is-playing .slide-text { animation:slide-block-in .75s cubic-bezier(.2,.65,.2,1) both; }
.slide-motion .slide.is-playing .slide-visual { animation:slide-block-in .75s cubic-bezier(.2,.65,.2,1) .18s both; }

/* The closing mark draws two quiet rings before its centre lights. */
.mk-ring { stroke-dasharray:760; stroke-dashoffset:0; }
.mk-ring2 { stroke-dasharray:470; stroke-dashoffset:0; }
.mk-dot { opacity:1; }
.is-playing .mk-ring { animation:mark-draw 1.1s cubic-bezier(.2,.65,.2,1) .25s both; }
.is-playing .mk-ring2 { animation:mark-draw2 .9s cubic-bezier(.2,.65,.2,1) .7s both; }
.is-playing .mk-dot { animation:fade-in .6s ease 1.5s both; }
@keyframes mark-draw { from { stroke-dashoffset:760; } }
@keyframes mark-draw2 { from { stroke-dashoffset:470; } }

/* Print and reduced motion show every new element at its settled pose. */
@media print, (prefers-reduced-motion:reduce) {
  .slide-text, .slide-visual { opacity:1 !important; transform:none !important; }
  .mk-ring, .mk-ring2 { stroke-dashoffset:0; opacity:1; }
  .mk-dot { opacity:1; }
}

/* 5 / labels under the flames, so each icon reads at a glance */
.flame-cell { display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.flame-label { font-size:clamp(.6rem,.9vw,.78rem); line-height:1.15; color:var(--ink3); letter-spacing:.02em; text-align:center; white-space:nowrap; opacity:.85; }
.is-playing .flame-label { animation:glyph-light .5s ease both; animation-delay:calc(var(--n,0) * 420ms + 200ms); }
.flame-cell:nth-child(1) .flame-label{--n:0}.flame-cell:nth-child(2) .flame-label{--n:1}.flame-cell:nth-child(3) .flame-label{--n:2}.flame-cell:nth-child(4) .flame-label{--n:3}.flame-cell:nth-child(5) .flame-label{--n:4}.flame-cell:nth-child(6) .flame-label{--n:5}
@media (max-width:700px) { .flame-label { white-space:normal; max-width:5.5em; } }

/* which six: lit cards instead of guest faces, so no one on the grid is a named person */
.dot-card { display:grid; place-items:center; background:linear-gradient(160deg,color-mix(in oklch,var(--teal) 22%,#0c1418),#0a1013); border-color:color-mix(in oklch,var(--teal) 45%,transparent); color:var(--teal); box-shadow:0 8px 28px rgba(0,0,0,.55), 0 0 22px var(--teal-haze); }
.dot-card svg { width:38%; height:auto; }

/* 5b / the local maximum, ported from the deck */
.maxima-kicker { color:var(--ink3); }
.maxima-quote { font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.1vw,1.9rem); line-height:1.25; color:var(--ink); margin:0; max-width:var(--measure); }
.maxima-cite { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin:0; }
.maxima-cite a { color:var(--teal); text-decoration:none; border-bottom:1px solid currentColor; }
.stage-maxima { width:100%; }
.maxima { width:100%; height:auto; display:block; overflow:visible; }
.maxima .ridge { fill:none; stroke:var(--ink2); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.maxima .ground { stroke:var(--line); stroke-width:1; }
.maxima .you { fill:var(--gold); stroke:var(--bg,#06070b); stroke-width:3; }
.maxima .peak { fill:var(--teal); stroke:var(--bg,#06070b); stroke-width:3; }
.maxima .lab { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; fill:var(--ink2); }
.maxima .lab.g { fill:var(--gold); } .maxima .lab.t { fill:var(--teal); }
.maxima .sub { font-family:var(--sans,inherit); font-size:13px; fill:var(--ink2); }
.maxima .dash { stroke:var(--ink2); stroke-width:1.5; stroke-dasharray:4 6; fill:none; opacity:.7; }
.is-playing .maxima .ridge { stroke-dasharray:1400; stroke-dashoffset:1400; animation:ridge-draw 1.6s cubic-bezier(.4,0,.2,1) .2s forwards; }
.is-playing .maxima .you { animation:tick-in .4s cubic-bezier(.2,.85,.3,1) .7s both; transform-box:fill-box; transform-origin:center; }
.is-playing .maxima .peak, .is-playing .maxima .lab.t { animation:tick-in .5s cubic-bezier(.2,.85,.3,1) 1.7s both; transform-box:fill-box; transform-origin:center; }
.is-playing .maxima .dash { animation:fade-in .6s ease 1.9s both; }
@keyframes ridge-draw { to { stroke-dashoffset:0; } }

/* 18 / the week, redrawn: the whole week on one screen, no scroll box, no names or times.
   Each block is only a bar of colour, so the shape of the week reads and nothing else does. */
#shots .cal { --hour-h:clamp(24px,4.4vh,44px); --cal-gutter-w:44px; }
#shots .cal-frame { border-radius:14px; border-color:color-mix(in oklch,var(--teal) 18%,var(--line)); box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02) inset; background:linear-gradient(180deg,color-mix(in oklch,var(--panel) 92%,var(--teal)),var(--panel)); }
#shots .cal-head { background:transparent; border-bottom-color:var(--line2); }
#shots .cal-col-head { padding:.7rem .3rem; }
#shots .cal-dom { font-size:1.2rem; }
#shots .cal-body { max-height:none; overflow:visible; scrollbar-width:none; }
#shots .cal-time { font-size:8.5px; opacity:.8; }
#shots .cal-ev { border-radius:4px; border-left-width:0; padding:0; margin-left:2px; width:calc(var(--w) - 4px); background:color-mix(in oklch,var(--kind,var(--ink3)) 34%,#0d1017); box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--kind,var(--ink3)) 30%,transparent); }
#shots .cal-ev.kind-taping { background:color-mix(in oklch,var(--teal) 46%,#0d1017); }
#shots .cal-ev-title, #shots .cal-ev-time { display:none; }
#shots .cal-ev:hover::after { display:none; }
@media (max-width:760px) { #shots .cal { --hour-h:40px; } }

/* Partner mode: scoped to #partner so the rules are dead weight in normal mode. */

/* Belt and braces: .venture-card is an author rule, so do not rely on the UA
   sheet to hide the tier card and the who line. */
#partner [hidden] {
  display: none;
}

/* Vertical rhythm: the global h1,h2,h3,p margin reset would otherwise stack
   the generic copy flush against itself and the headline. */
#partner #partner-who {
  margin-top: clamp(.5rem, calc(var(--page-pad, 1rem) * .25), 1rem);
  color: var(--ink2);
}

#partner #partner-title {
  margin-top: clamp(.75rem, calc(var(--page-gap, 1rem) * .5), 1.5rem);
}

#partner #partner-body {
  margin-top: clamp(1rem, var(--page-gap, 1rem), 2rem);
}

#partner #partner-body .prose + .prose {
  margin-top: clamp(.75rem, calc(var(--page-gap, 1rem) * .5), 1.25rem);
}

#partner #partner-body blockquote {
  margin: 0 0 var(--page-gap, 1rem) 0;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--teal);
  max-width: var(--measure);
}

#partner #partner-body blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}

#partner .partner-quote-attr {
  margin-top: calc(var(--page-gap, 1rem) * .5);
}

#partner #partner-tier {
  padding: 1rem 1.25rem;
  color: var(--ink);
  max-width: 31rem;
}

#partner .slide-visual > p {
  margin-top: var(--page-gap, 1rem);
}

/* The desktop .slide-visual is a row flex container at styles.css line 1338,
   so the partner column opts out explicitly. */
#partner .slide-visual {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--page-gap, 1rem);
}

#partner .slide-visual > #partner-tier,
#partner .slide-visual > .btn {
  max-width: var(--measure);
}

/* New animated elements carry their own end state; the existing reduce block
   only covers .slide-line .w and .spoken. */
#partner #partner-body blockquote,
#partner #partner-tier {
  animation: partner-rise .6s ease-out both;
}

@keyframes partner-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #partner #partner-body blockquote,
  #partner #partner-tier {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 390px phone: quotes stay readable and nothing overflows horizontally. */
@media (max-width: 700px) {
  #partner #partner-body blockquote {
    padding-left: .75rem;
  }

  #partner #partner-body blockquote p {
    font-size: 1.05rem;
    overflow-wrap: break-word;
  }

  #partner #partner-tier {
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

/* intro slide: tiny three-circle jump to the cold email, show and money slide */
.venn-jump { position:absolute; top:37px; right:var(--gutter); z-index:20; display:inline-flex; padding:6px; line-height:0; border-radius:50%; opacity:.72; transition:opacity .2s ease, transform .2s ease; }
.venn-jump:hover, .venn-jump:focus-visible { opacity:1; transform:scale(1.08); }
.venn-jump circle { fill:none; stroke-width:1.4; }
.venn-jump circle:nth-child(1) { stroke:var(--teal); }
.venn-jump circle:nth-child(2) { stroke:var(--blue); }
.venn-jump circle:nth-child(3) { stroke:var(--gold); }

/* Hero three circles: cold email, the show, money. Lives in the hero's right column so the
   whole idea is on the first page. Links to the full #turn page. */
.hero-venn { display:none; }
@media (min-width:901px) {
  #hero .hero-scene-slot { display:none; }
  .hero-venn { display:block; width:100%; max-width:min(580px,58vh); margin-inline:auto; line-height:0; border-radius:50%; outline-offset:8px; }
  .hv { display:block; width:100%; height:auto; overflow:visible; }
  .hv-orbit { fill:none; stroke:rgba(236,240,248,.12); stroke-width:1; stroke-dasharray:2 9; }
  .hv-c > circle:first-child { stroke-width:1.6; stroke-opacity:.8; mix-blend-mode:screen; }
  .hv-dot { filter:drop-shadow(0 0 6px currentColor); }
  .hv-ico { fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.9; }
  .hv text { font-family:var(--mono); text-transform:uppercase; }
  .hv-lab text { font-size:14px; letter-spacing:.16em; fill:var(--ink2); }
  .hv-pill { fill:var(--shade); stroke:color-mix(in oklch,var(--gold) 60%,transparent); stroke-width:1.2; }
  .hv-center { font-size:15px; letter-spacing:.14em; fill:var(--gold); }
  .hv-note { font-size:11.5px; letter-spacing:.08em; fill:var(--ink); opacity:.82; paint-order:stroke; stroke:rgba(6,7,11,.9); stroke-width:5px; stroke-linejoin:round; }
  .hv-lab text { paint-order:stroke; stroke:rgba(6,7,11,.6); stroke-width:4px; stroke-linejoin:round; }
  .hv-pulse { fill:none; stroke:var(--gold); stroke-width:1.4; }
  .hv-c, .hv-spin, .hv-pulse, .hv-core, .hv-orbit { transform-box:view-box; }
  .hv-orbit { transform-origin:280px 220px; }
  .hv-pulse, .hv-core { transform-origin:280px 220px; }
  .hero-venn:hover .hv-pill, .hero-venn:focus-visible .hv-pill { stroke:var(--gold); }
}
@media (min-width:901px) and (prefers-reduced-motion:no-preference) {
  html #hero.slide.hero .hero-venn .hv-email.hv-c { animation:hv-in-l 1.1s cubic-bezier(.2,.7,.2,1) .35s both, hv-drift-a 9s ease-in-out 1.5s infinite; }
  html #hero.slide.hero .hero-venn .hv-show.hv-c { animation:hv-in-r 1.1s cubic-bezier(.2,.7,.2,1) .5s both, hv-drift-b 10s ease-in-out 1.6s infinite; }
  html #hero.slide.hero .hero-venn .hv-spin.hv-spin { animation:hv-rot 14s linear infinite; }
  html #hero.slide.hero .hero-venn .hv-spin-2.hv-spin { animation-duration:17s; animation-direction:reverse; }
  html #hero.slide.hero .hero-venn .hv-orbit.hv-orbit { animation:hv-rot 90s linear infinite; }
  html #hero.slide.hero .hero-venn .hv-labels.hv-labels { animation:hv-fade .8s ease 1.3s both; }
  html #hero.slide.hero .hero-venn .hv-meet.hv-meet { animation:hv-fade .8s ease 1.6s both; }
  html #hero.slide.hero .hero-venn .hv-core.hv-core { animation:hv-breathe 4.8s ease-in-out 1.6s infinite both; }
  html #hero.slide.hero .hero-venn .hv-pulse.hv-pulse { animation:hv-ring 3.6s ease-out 1.9s infinite both; }
}
@keyframes hv-in-l { from { opacity:0; transform:translate(-70px,-10px); } to { opacity:1; transform:none; } }
@keyframes hv-in-r { from { opacity:0; transform:translate(70px,-10px); } to { opacity:1; transform:none; } }
@keyframes hv-in-d { from { opacity:0; transform:translateY(70px); } to { opacity:1; transform:none; } }
@keyframes hv-drift-a { 0%,100% { transform:none; } 50% { transform:translate(-5px,-4px); } }
@keyframes hv-drift-b { 0%,100% { transform:none; } 50% { transform:translate(5px,-4px); } }
@keyframes hv-drift-c { 0%,100% { transform:none; } 50% { transform:translateY(5px); } }
@keyframes hv-rot { to { transform:rotate(360deg); } }
@keyframes hv-fade { from { opacity:0; } to { opacity:1; } }
@keyframes hv-breathe { 0%,100% { opacity:.55; transform:scale(.92); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes hv-ring { 0% { opacity:0; transform:scale(.6); } 25% { opacity:.7; } 100% { opacity:0; transform:scale(1.9); } }

/* Slide dock: fast jumping between slides. Faded until you reach for it. */
.slide-dock { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; background:color-mix(in oklch, var(--bg) 70%, transparent); border:1px solid color-mix(in oklch, var(--line, #2a2f3a) 80%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:.45; transition:opacity .25s ease; }
.slide-dock:hover, .slide-dock:focus-within { opacity:1; }
.sd-gap { width:8px; }
.sd-dot { position:relative; display:block; width:9px; height:9px; border-radius:999px; background:color-mix(in oklch, var(--ink, #eef0f6) 35%, transparent); transition:background .2s ease, transform .2s ease, width .2s ease; outline-offset:4px; }
.sd-dot:hover, .sd-dot:focus-visible { background:var(--blue); transform:scale(1.35); }
.sd-dot.is-active { width:22px; background:var(--teal); }
.sd-dot.is-active:hover { background:var(--blue); transform:none; }
.sd-tip { position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%); white-space:nowrap; font:500 11px/1.2 var(--mono, ui-monospace, monospace); letter-spacing:.06em; color:var(--ink, #eef0f6); background:color-mix(in oklch, var(--bg) 92%, transparent); border:1px solid color-mix(in oklch, var(--blue) 55%, transparent); padding:6px 9px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .15s ease; }
.sd-dot:hover .sd-tip, .sd-dot:focus-visible .sd-tip { opacity:1; }
@media (max-width:760px) { .slide-dock { display:none; } }
@media print { .slide-dock { display:none; } }

/* The pricing cards no longer lift on hover: the lift moved a card out from under the
   cursor at its bottom edge, which made it flicker. The glow and border still respond. */
:root.mx #offer :is(.tier-card,.venture-card):hover { translate:none; }
#offer .tier-card:hover, .reveal-enabled #offer .tier-card.is-visible:hover { --lift:0px; }