/* Loupe story page: paper, blueprint grid, marker notes, one framed canvas the scroll moves through. */
:root {
  color-scheme: light;
  --paper: #faf5ea; --paper-2: #efe6d3; --cream: #fffaf0; --ink: #1c1c1e; --ink-2: #56565c; --ink-3: #8e8c86;
  --blue: #2d4fd6; --blue-deep: #1e3aa6; --blue-ink: #14297a; --orange: #f2a93b; --rule: rgba(28, 28, 30, 0.16);
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --marker: "Instrument Serif", Georgia, serif;
  --gutter: 24px; --r: 6px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html, body {
  margin: 0; color: var(--ink); background: var(--paper);
  font: 400 17px/1.45 var(--body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* The dot grid sits on the root so it covers the whole viewport even while the page is still short (e.g. the dashboard loading). */
html { min-height: 100%; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(28, 28, 30, 0.14) 1px, transparent 1.2px); background-size: 18px 18px; will-change: transform; }
body { min-height: 100vh; min-height: 100svh; background: transparent; }
a { color: inherit; text-decoration: none; }
b { font-weight: 600; }

/* paper grain */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.045; will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* fixed chrome */
.readout { position: fixed; top: 64px; left: var(--gutter); z-index: 40; display: grid; gap: 2px; font: 400 10.5px/1.3 var(--mono); letter-spacing: 0.02em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.readout span:first-child { color: var(--ink); font-weight: 600; }
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 45; height: 54px; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  background: rgba(250, 245, 234, 0.96);
  border-bottom: 1px solid var(--rule);
}
.brand { display: inline-flex; align-items: baseline; gap: 10px; font: 800 19px/1 var(--display); letter-spacing: -0.03em; justify-self: start; }
.brand-sub { font: 400 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.brand .logo { width: 22px; height: 22px; color: var(--blue-deep); flex: none; align-self: center; }
.navlinks { display: flex; align-items: center; gap: 10px; font: 400 11.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.navlinks a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--orange); }
.navlinks .sep { color: var(--ink-3); }
.topbar .cta { justify-self: end; border-radius: 999px; padding: 8px 14px 8px 10px; border-color: var(--blue-deep); }
.cta { display: inline-flex; align-items: center; gap: 10px; background: var(--blue-deep); color: var(--cream); border: 1px solid var(--ink); border-radius: 999px; padding: 10px 16px 10px 12px; font: 600 12.5px/1 var(--mono); letter-spacing: 0.02em; transition: background 0.15s ease, transform 0.15s ease; }
.cta:hover { background: var(--blue); }
.cta .lensdot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--cream); box-shadow: inset 0 0 0 2px var(--blue-deep), inset 0 0 0 6px var(--orange); display: inline-block; position: relative; }
.cta .lensdot::after { content: ""; position: absolute; width: 2px; height: 6px; background: var(--cream); right: -4px; bottom: -5px; transform: rotate(-45deg); border-radius: 1px; }
.cta.big { padding: 14px 22px 14px 16px; font-size: 15px; }
.cta.big .lensdot { width: 18px; height: 18px; }
.btn-outline { display: inline-flex; align-items: center; gap: 10px; background: var(--cream); color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; box-shadow: 0 2px 0 var(--ink); padding: 10px 16px; font: 400 12.5px/1 var(--mono); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn-outline:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--ink); }
.btn-outline .arr { color: var(--blue-deep); }

/* marker notes */
.marker { font: italic 400 24px/1.1 var(--marker); color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.marker-left { grid-area: left; justify-self: start; align-self: start; border-bottom: 1.5px solid var(--orange); padding-bottom: 2px; }
.marker-right { grid-area: right; justify-self: end; align-self: end; text-align: left; }

/* masthead */
.masthead { position: relative; padding: 150px var(--gutter) 24px; max-width: 1280px; margin: 0 auto; }
.mast-inner { display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr); grid-template-areas: "left title right"; column-gap: 28px; align-items: center; text-align: center; }
.masthead h1 { grid-area: title; }
.masthead h1 { margin: 0; font: 700 clamp(56px, 8.6vw, 124px)/0.96 var(--display); letter-spacing: -0.045em; color: var(--ink); }
.mast-sub { margin: 40px auto 0; text-align: center; color: var(--ink-3); font: 400 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* the pinned story */
.pin { position: relative; }
.viewport { position: relative; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding: 72px var(--gutter) 40px; }
.frame { position: relative; margin: 0; min-height: 0; border: 1px solid var(--ink); border-radius: calc(var(--r) + 6px); background: var(--blue); overflow: hidden; box-shadow: 0 3px 0 var(--ink); }
.frame-caption { position: absolute; left: 12px; bottom: 10px; max-width: 70%; z-index: 5; font: 400 10.5px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream); opacity: 0.85; }
.canvas { position: absolute; inset: 0; }
.light { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(255, 250, 240, 0.22) 0%, rgba(255, 250, 240, 0.06) 45%, rgba(20, 41, 122, 0.45) 100%), radial-gradient(rgba(255, 250, 240, 0.16) 0.8px, transparent 1.1px); background-size: 100% 100%, 16px 16px; }
.scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
.canvas[data-beat="2"] .scene-map, .canvas[data-beat="3"] .scene-map, .canvas[data-beat="4"] .scene-map, .canvas[data-beat="5"] .scene-map { opacity: 1; }
.canvas[data-beat="3"] .scene-tiles, .canvas[data-beat="4"] .scene-tiles { opacity: 1; }

/* beat 1: an assistant chat window, typing as you scroll */
.scene-chat { align-items: center; justify-items: center; }
.chatwin { width: min(640px, 86%); background: var(--cream); border: 1px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink), 0 30px 60px -30px rgba(0, 0, 0, 0.5); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; min-height: 300px; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule); font: 600 13px/1 var(--display); }
.chat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); border: 1px solid var(--ink); }
.chat-meta { margin-left: auto; font: 400 10px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.chat-body { padding: 18px 16px 8px; display: grid; gap: 12px; align-content: start; }
.msg { max-width: 82%; padding: 11px 14px; border-radius: 14px; font: 400 15px/1.45 var(--body); min-height: 1.45em; }
.msg.user { justify-self: end; background: var(--blue-deep); color: var(--cream); border-bottom-right-radius: 4px; }
.msg.bot { justify-self: start; background: var(--paper-2); color: var(--ink); border-bottom-left-radius: 4px; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.canvas.bot-on .msg.bot { opacity: 1; transform: none; }
.caret { display: inline-block; width: 2px; height: 1em; vertical-align: -0.15em; margin-left: 2px; background: currentColor; animation: blink 0.9s steps(1) infinite; }
.caret[hidden] { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.typing { display: inline-flex; gap: 4px; align-items: center; height: 1.45em; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); animation: typing 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
.typing[hidden] { display: none; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }
.chat-compose { margin: 8px 12px 12px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 12px; display: flex; justify-content: space-between; align-items: center; font: 400 13px/1 var(--body); color: var(--ink-3); }
.compose-btn { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--cream); display: grid; place-items: center; font-size: 12px; }
.canvas[data-beat="1"] .scene-chat { opacity: 1; }
.canvas[data-beat="2"] .scene-chat { opacity: 0; transform: scale(0.06); transition: opacity 0.7s ease, transform 1.1s cubic-bezier(0.7, 0, 0.3, 1); }

/* beat 2: the world */
.scene-map { align-items: center; overflow: hidden; }
.map-wrap { width: 100%; transform-origin: var(--focus, 25% 40%); transform: scale(var(--zoom, 3.2)); }  /* no will-change: a 3.2x-zoomed GPU layer is ~9,000px wide at 2x and arrives in late tiles */
/* the drained world: a grey copy of the map drawn once and cross-faded in (opacity), never a per-frame filter */
.scene-map > .map-wrap { grid-area: 1 / 1; }
.map-wrap#story-map { opacity: calc((1 - 0.55 * var(--gray, 0)) * (1 - var(--gray, 0))); }
.map-wrap.map-gray { opacity: calc((1 - 0.55 * var(--gray, 0)) * var(--gray, 0)); will-change: opacity; }
.canvas[data-beat="1"] .map-gray, .canvas[data-beat="2"] .map-gray { visibility: hidden; }
.map-wrap.map-gray circle { fill: #a9a39a; transform: scale(1); transition: none; }
.map-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.map-wrap .land { fill: var(--paper-2); stroke: var(--cream); stroke-width: 0.6; }
.map-wrap circle { fill: var(--orange); stroke: var(--ink); stroke-width: 0.6; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.map-wrap circle.on { transform: scale(1); }

/* beat 3: the product owner's four blank tiles */
.scene-tiles { grid-template-columns: repeat(2, min(34vw, 320px)); gap: 14px; align-content: center; justify-content: center; padding: 0; transform-origin: center; }
.scene-tiles > .qtile { width: 100%; }
.canvas[data-beat="4"] .scene-tiles { transform: translate(-9%, -5%) scale(0.92); }
.qtile { position: relative; aspect-ratio: 1.45; background: var(--cream); border: 1px solid var(--ink); border-radius: var(--r); box-shadow: 0 3px 0 var(--ink); display: grid; align-content: center; justify-items: center; gap: 6px; padding: 10px; transform: translateY(14px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; }
.canvas[data-beat="3"] .qtile, .canvas[data-beat="4"] .qtile { transform: translateY(0); opacity: 1; }
.qtile[data-i="1"] { transition-delay: 0.08s; } .qtile[data-i="2"] { transition-delay: 0.16s; } .qtile[data-i="3"] { transition-delay: 0.24s; }
.qtile .qmark { font: 800 46px/1 var(--display); color: var(--ink); transition: opacity 0.3s ease, transform 0.3s ease; }
.qtile .qlabel { font: 600 clamp(14px, 1.3vw, 18px)/1.1 var(--display); letter-spacing: -0.01em; color: var(--ink-2); }
.qtile .qanswer { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; padding: 12px; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; font: 600 clamp(13px, 1.2vw, 17px)/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink-2); }
.qtile .qanswer b { display: block; font: 800 clamp(30px, 3.4vw, 48px)/1 var(--display); letter-spacing: -0.04em; color: var(--blue-deep); font-variant-numeric: tabular-nums; }
.qtile.answered .qmark, .qtile.answered .qlabel { opacity: 0; transform: scale(0.8); }
.qtile.answered .qanswer { opacity: 1; transform: translateY(0); }

/* beat 4: the loupe, drawn as an instrument */
.lens { position: absolute; width: min(38%, 340px); aspect-ratio: 1; left: 54%; top: 40%; opacity: 0; z-index: 4;
  transform: translate(calc((1 - var(--lens, 0)) * 70%), calc((1 - var(--lens, 0)) * 70%)) rotate(calc((1 - var(--lens, 0)) * -25deg)) scale(calc(0.8 + 0.2 * var(--lens, 0)));
  transition: opacity 0.3s ease; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35)); will-change: transform, opacity; }
.lens-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.canvas[data-beat="4"] .lens, .canvas[data-beat="5"] .lens { opacity: 1; }
.glass { position: absolute; left: 10%; top: 10%; width: 63.3%; height: 63.3%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.glass svg { display: block; width: 84%; height: auto; }
.glass path.area { fill: var(--blue); fill-opacity: 0.18; }
.glass path.line { fill: none; stroke: var(--blue-deep); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }

/* captions: one centered block above the frame, swapped per beat */
.captions { display: grid; align-items: end; justify-items: center; text-align: center; }
.caption { grid-area: 1 / 1; max-width: 880px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
.caption.is-active { opacity: 1; transform: none; pointer-events: auto; }
.kicker { margin: 0 0 6px; font: italic 400 24px/1.1 var(--marker); color: var(--ink-2); text-transform: none; display: inline-flex; align-items: center; gap: 10px; }
.kicker .num { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--orange); border-radius: 50%; font: 600 12px/1 var(--mono); color: var(--ink); font-style: normal; }
.kicker b { color: var(--blue-deep); }
.caption h2 { margin: 0 0 8px; font: 700 clamp(32px, 4.2vw, 58px)/0.98 var(--display); letter-spacing: -0.04em; }
.caption .body { margin: 0 auto; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.4; color: var(--ink-2); max-width: 640px; }
.caption .body b { color: var(--ink); }
.panel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; margin-top: 14px; }
.caption[data-beat="4"] .body { margin-bottom: 0; }
.scroll-cue { margin: 18px 0 0; text-align: center; font: 400 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* finale */
.finale { padding: 96px var(--gutter) 72px; }
.finale-inner { max-width: 1100px; margin: 0 auto; }
.finale-marker { margin: 0 0 18px; font-size: 26px; }
.ledger { list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid var(--ink); }
.ledger li { border-bottom: 1px solid var(--rule); }
.ledger a { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.15fr) 24px; gap: 18px; align-items: baseline; padding: 18px 4px; transition: background 0.15s ease; }
.ledger a:hover { background: rgba(255, 255, 255, 0.35); }
.ledger .n { font: 400 11px/1 var(--mono); color: var(--ink-3); letter-spacing: 0.08em; }
.ledger .q { font: 700 clamp(22px, 2.6vw, 34px)/1.05 var(--display); letter-spacing: -0.03em; }
.ledger .a { color: var(--ink-2); font-size: 15.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.ledger .a b { color: var(--blue-deep); }
.ledger .arr { color: var(--blue-deep); justify-self: end; font-size: 18px; }
.finale-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 40px; }
.fine { font: 400 11px/1.6 var(--mono); color: var(--ink-3); max-width: none; margin: 0 0 8px; text-wrap: pretty; }
.fine a { text-decoration: underline; text-underline-offset: 3px; }

/* small screens: frame on top, text below, within the pinned viewport */
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .navlinks, .readout, .brand-sub { display: none; }
  .topbar { grid-template-columns: 1fr auto; gap: 10px; height: 50px; }
  .topbar .cta { padding: 7px 11px 7px 8px; font-size: 11px; }
  .masthead { padding-top: 110px; }
  .mast-inner { padding: 36px 0 44px; }
  .marker { font-size: 20px; }
  .mast-inner { grid-template-columns: 1fr; grid-template-areas: "left" "title" "right"; row-gap: 14px; }
  .marker-left, .marker-right { justify-self: center; text-align: center; }
  .masthead h1 { font-size: clamp(42px, 13vw, 72px); }
  .viewport { padding: 70px var(--gutter) 36px; gap: 10px; }
  .caption h2 { font-size: clamp(28px, 8vw, 38px); margin-bottom: 6px; }
  .caption .body { font-size: 14px; }
  .kicker { font-size: 20px; }
  .panel-actions { margin-top: 10px; }
  .scene-tiles { padding: 0 10%; gap: 8px; }
  .qtile .qmark { font-size: 26px; }
  .lens { width: 46%; left: 52%; top: 42%; }
  .chatwin { width: 92%; min-height: 240px; }
  .msg { font-size: 13.5px; }
  .scene-tiles { grid-template-columns: repeat(2, 40vw); gap: 10px; }
  .ledger a { grid-template-columns: 34px minmax(0, 1fr) 20px; grid-template-areas: "n q arr" ". a arr"; row-gap: 6px; }
  .ledger .n { grid-area: n; } .ledger .q { grid-area: q; } .ledger .a { grid-area: a; } .ledger .arr { grid-area: arr; align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .scene, .map-wrap, .map-wrap circle, .qtile, .qtile *, .lens, .panel, .frame { transition: none !important; animation: none !important; }
}

/* built-from-the-data strip on the finale */
.built-strip { margin: 0 0 44px; }
.built-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.built-card { display: grid; gap: 8px; align-content: start; padding: 22px 22px 20px; background: var(--cream); border: 1px solid var(--ink); border-left: 6px solid var(--orange); border-radius: var(--r); box-shadow: 0 3px 0 var(--ink); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.built-card:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.built-k { font: 400 10.5px/1 var(--mono); letter-spacing: 0.1em; color: var(--ink-3); }
.built-card b { font: 700 clamp(20px, 2vw, 26px)/1.1 var(--display); letter-spacing: -0.03em; }
.built-card span:last-child { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.built-card em { font-style: normal; font-weight: 600; color: var(--blue-deep); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .built-cards { grid-template-columns: 1fr; } }


/* ===== masthead: plain statement under the headline ===== */
.plain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 36px; max-width: 1040px; margin: 56px auto 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.plain div { padding-top: 12px; border-top: 1.5px solid var(--ink); }
.plain b { display: block; margin-bottom: 6px; font: 400 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.plain div:first-child { border-top-color: var(--orange); }
@media (max-width: 860px) {
  .plain { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
}

/* ===== beat 1: the log line that becomes a person ===== */
.scene-log { align-items: center; justify-items: center; align-content: center; gap: 22px; padding: 0 6%; }
.logrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; font: 400 clamp(14px, 1.9vw, 24px)/1.5 var(--mono); color: var(--cream); background: rgba(20, 41, 122, 0.55); border: 1px solid rgba(255, 250, 240, 0.35); border-radius: var(--r); padding: 14px 22px; }
.lsep { color: rgba(255, 250, 240, 0.45); }
.lf { position: relative; transition: color 0.3s ease; }
.lf.lit { color: var(--orange); }
.logtags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ltag { font: 400 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream); border: 1px solid rgba(255, 250, 240, 0.5); border-radius: 999px; padding: 6px 10px; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.ltag.lit { opacity: 1; transform: none; border-color: var(--orange); }
.canvas[data-beat="1"] .scene-log { opacity: 1; }
.canvas[data-beat="1"].to-chat .scene-log { opacity: 0; transform: scale(1.06); }
.canvas[data-beat="1"].to-chat .scene-chat { opacity: 1; }
.canvas[data-beat="1"]:not(.to-chat) .scene-chat { opacity: 0; }
.canvas[data-beat="2"] .scene-log { opacity: 0; }



.readout-by { margin-top: 6px; color: var(--ink-3); }
.readout-by a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.readout-by a:hover { color: var(--ink); text-decoration-color: var(--orange); }

/* ===== the reveal: model gap vs the same people ===== */
.reveal { padding: 40px var(--gutter) 96px; }
.reveal-inner { max-width: 980px; margin: 0 auto; }
.reveal-kicker { display: block; text-align: center; margin: 0 0 10px; }
.reveal-title { text-align: center; margin: 0 auto 30px; max-width: 860px; font: 700 clamp(28px, 3.6vw, 46px)/1.06 var(--display); letter-spacing: -0.035em; transition: opacity 0.3s ease; }
.reveal-title .hl { color: var(--blue-deep); background: linear-gradient(transparent 62%, rgba(242,169,59,0.45) 62%); padding: 0 2px; font-variant-numeric: tabular-nums; }
.reveal-chart { background: var(--cream); border: 1px solid var(--ink); border-radius: calc(var(--r) + 6px); box-shadow: 0 3px 0 var(--ink); padding: 22px 26px 16px; }
.rv-legend { display: flex; gap: 20px; flex-wrap: wrap; font: 400 12px/1 var(--mono); color: var(--ink-2); margin-bottom: 18px; }
.rv-legend span { display: inline-flex; align-items: center; gap: 8px; }
.rv-legend b { color: var(--ink); font-weight: 600; }
.sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--ink); display: inline-block; }
.sw.a { background: var(--orange); } .sw.b { background: var(--blue-deep); }
.rv-groups { display: grid; gap: 22px; }
.rv-group h3 { margin: 0 0 8px; font: 700 18px/1 var(--display); letter-spacing: -0.02em; }
.rv-group .gap { margin-left: 10px; font: 600 12px/1 var(--mono); color: var(--ink-3); transition: color 0.4s ease; }
.rv-row { display: grid; grid-template-columns: 1fr 64px; align-items: center; gap: 12px; margin: 6px 0; }
.rv-track { height: 26px; background: var(--paper); border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); }
.rv-bar { height: 100%; width: 0; border-radius: 5px; transition: width 1.1s cubic-bezier(0.65, 0, 0.25, 1); }
.rv-bar.a { background: var(--orange); } .rv-bar.b { background: var(--blue-deep); }
.rv-val { font: 700 16px/1 var(--display); letter-spacing: -0.02em; text-align: right; font-variant-numeric: tabular-nums; }
.rv-axis { margin: 14px 0 0; font: 400 10.5px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.reveal-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 22px 0 0; }
.rv-toggle { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; background: var(--blue-deep); color: var(--cream); border: 1px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink); font: 600 14px/1 var(--mono); cursor: pointer; transition: transform 0.15s ease, background 0.2s ease; }
.rv-toggle:hover { background: var(--blue); }
.rv-toggle:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.rv-toggle .knob { width: 38px; height: 22px; border-radius: 999px; background: rgba(255,250,240,0.25); position: relative; }
.rv-toggle .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); border: 1px solid var(--ink); transition: left 0.3s ease; }
.rv-toggle[aria-pressed="true"] .knob::after { left: 19px; }
.rv-toggle:not([aria-pressed="true"]) { animation: nudge 2.4s ease-in-out 1.2s infinite; }
@keyframes nudge { 0%, 88%, 100% { transform: none; } 92% { transform: translateY(-3px); } 96% { transform: none; } }
.rv-caption { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 520px; }
.rv-punch { margin: 26px auto 0; text-align: center; max-width: 760px; font: 400 clamp(19px, 2vw, 24px)/1.35 var(--body); color: var(--ink-2); }
.rv-punch b { color: var(--ink); }
.rv-fine { margin: 18px auto 0; text-align: center; max-width: 760px; font: 400 11px/1.6 var(--mono); color: var(--ink-3); }
.rv-fine a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .reveal-chart { padding: 18px 16px 14px; } .rv-row { grid-template-columns: 1fr 52px; } .reveal-actions { justify-content: center; } .rv-caption { text-align: center; } }
@media (prefers-reduced-motion: reduce) { .rv-bar, .rv-toggle .knob::after { transition: none; } .rv-toggle { animation: none !important; } }

.readout { transition: opacity 0.3s ease; }
.readout.is-hidden { opacity: 0; pointer-events: none; }

.rv-try { display: inline-block; margin-left: 6px; color: var(--blue-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--orange); }

/* ===== how it works: the second half of the same pin, seen through the loupe ===== */
.how-canvas { z-index: 4; background: var(--blue); visibility: hidden; clip-path: circle(0px at 50% 50%); will-change: clip-path, opacity; }
/* the dive: the lens grows around the widening window (scale and fade set from the scroll) */
.canvas.diving .lens { transition: none; transform-origin: 41.67% 41.67%; transform: scale(var(--dive-k, 1)); opacity: var(--dive-o, 1); }
.hscene { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 6%; opacity: 0; transform: translateY(18px) scale(0.98); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; }
.how-canvas[data-step="1"] .hs-read, .how-canvas[data-step="2"] .hs-label, .how-canvas[data-step="3"] .hs-act { opacity: 1; transform: none; }

/* 1 read: files fall into the browser tray, rows stream out */
.hs-read { align-content: center; gap: 18px; }
.files { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.file { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--cream); border: 1px solid var(--ink); border-radius: var(--r); box-shadow: 0 3px 0 var(--ink); font: 600 clamp(12px, 1.2vw, 15px)/1 var(--mono);
  transform: translateY(calc((1 - var(--drop, 0)) * -60px - var(--i) * 14px * (1 - var(--drop, 0)))) rotate(calc((1 - var(--drop, 0)) * (var(--i) - 1) * 6deg)); opacity: calc(0.2 + 0.8 * var(--drop, 0)); transition: transform 0.35s ease-out, opacity 0.35s ease; }
.file i { font-style: normal; color: var(--blue-deep); }
.tray { position: relative; width: min(620px, 92%); padding: 22px 20px 18px; border: 2px dashed var(--cream); border-radius: calc(var(--r) + 8px); background: rgba(20, 41, 122, 0.35); display: grid; gap: 12px; justify-items: center; }
.tray-label { font: 700 clamp(18px, 2vw, 26px)/1 var(--display); letter-spacing: -0.02em; color: var(--cream); }
.tray-lock { font: 400 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.stream { width: 100%; display: grid; gap: 6px; }
.stream i { display: block; height: 10px; border-radius: 3px; background: rgba(255, 250, 240, 0.85); transform-origin: left; transform: scaleX(calc(var(--flow, 0) * (0.55 + 0.45 * var(--w, 1)))); transition: transform 0.4s ease; }
.stream i:nth-child(1) { --w: 0.9; } .stream i:nth-child(2) { --w: 0.6; } .stream i:nth-child(3) { --w: 1; } .stream i:nth-child(4) { --w: 0.75; } .stream i:nth-child(5) { --w: 0.5; } .stream i:nth-child(6) { --w: 0.85; }

/* 2 label: one conversation gets its intent, its friction flag and its owner */
.convo { position: relative; width: min(600px, 94%); background: var(--cream); border: 1px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink), 0 30px 60px -30px rgba(0, 0, 0, 0.5); padding: 14px 16px 16px; display: grid; gap: 10px; }
.convo-head { display: flex; align-items: center; gap: 10px; }
.convo-meta { margin-left: auto; font: 400 10px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.intent-chip { font: 600 12px/1 var(--mono); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--ink); background: var(--blue-deep); color: var(--cream); transform: scale(var(--k-intent, 0)); transform-origin: left center; transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.cm { max-width: 84%; padding: 10px 13px; border-radius: 13px; font: 400 clamp(13px, 1.25vw, 15px)/1.4 var(--body); position: relative; }
.cm.user { justify-self: end; background: var(--blue-deep); color: var(--cream); border-bottom-right-radius: 4px; }
.cm.bot { justify-self: start; background: var(--paper-2); border-bottom-left-radius: 4px; }
.resp { display: block; margin-bottom: 4px; font: 600 10px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); transition: color 0.3s ease; }
.cm.corr { transition: background 0.3s ease, box-shadow 0.3s ease; }
.how-canvas.k-flag .cm.corr { background: var(--orange); color: var(--ink); box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.35); }
.flag { position: absolute; right: 8px; top: -11px; font: 600 10px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--ink); color: var(--cream); opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; }
.how-canvas.k-flag .flag { opacity: 1; transform: none; }
.how-canvas.k-charge .resp { color: #c4422b; }
.charge { justify-self: start; font: 400 12px/1.3 var(--mono); color: var(--ink-2); padding: 6px 10px; border-left: 3px solid var(--orange); opacity: 0; transform: translateX(-8px); transition: opacity 0.3s ease, transform 0.3s ease; }
.charge b { color: var(--ink); }
.how-canvas.k-charge .charge { opacity: 1; transform: none; }

/* 3 separate: the gap collapses when the person is held fixed */
.sep-card { position: relative; width: min(620px, 94%); background: var(--cream); border: 1px solid var(--ink); border-radius: calc(var(--r) + 6px); box-shadow: 0 4px 0 var(--ink); padding: 18px 20px 16px; display: grid; gap: 10px; }
.sep-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font: 400 12px/1 var(--mono); color: var(--ink-2); }
.sep-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sep-what { margin-left: auto; color: var(--ink-3); }
.sep-row { display: grid; grid-template-columns: 1fr 64px; gap: 12px; align-items: center; }
.sep-track { height: 30px; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.sep-bar { height: 100%; border-radius: 5px; transition: width 0.7s cubic-bezier(0.65, 0, 0.25, 1); }
.sep-bar.a { background: var(--orange); } .sep-bar.b { background: var(--blue-deep); }
.sep-row b { font: 700 18px/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.sep-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 400 12px/1.3 var(--mono); color: var(--ink-2); }
.sep-gapv { font-weight: 600; color: var(--orange); transition: color 0.3s ease; }
.k-same .sep-gapv { color: var(--blue-deep); }
.stamp { position: absolute; right: 18px; top: -16px; font: 700 13px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-deep); background: var(--cream); border: 2px solid var(--blue-deep); border-radius: 6px; padding: 7px 10px; transform: rotate(-6deg) scale(1.6); opacity: 0; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3), opacity 0.2s ease; }
.k-same .stamp { transform: rotate(-6deg) scale(1); opacity: 1; }

/* 4 act: three artifacts fan out */
.hs-act { grid-template-columns: repeat(3, minmax(0, 220px)); gap: 16px; justify-content: center; align-content: center; }
.artifact { display: grid; gap: 6px; align-content: start; min-height: 180px; padding: 16px; background: var(--cream); border: 1px solid var(--ink); border-radius: var(--r); box-shadow: 0 4px 0 var(--ink);
  transform: translateY(calc((1 - var(--fan, 0)) * 40px)) rotate(calc((var(--i) - 1) * var(--fan, 0) * 3deg)); opacity: calc(var(--fan, 0)); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.3s ease; }
.art-k { font: 400 10.5px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.artifact b { font: 800 clamp(28px, 3vw, 40px)/1 var(--display); letter-spacing: -0.04em; color: var(--blue-deep); }
.artifact > span:not(.art-k):not(.badge):not(.ticket-tag) { font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.artifact .badge { justify-self: start; font: 600 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--blue-deep); color: var(--cream); border: 1px solid var(--ink); }
.artifact code { justify-self: start; margin-top: 4px; font: 400 11px/1 var(--mono); background: var(--paper-2); padding: 5px 7px; border-radius: 4px; }
.ticket-tag { justify-self: start; margin-top: 4px; font: 600 11px/1 var(--mono); color: var(--ink); border-bottom: 2px solid var(--orange); }
.art-file { border-left: 6px solid var(--orange); }

@media (max-width: 900px) {
  .hs-act { grid-template-columns: 1fr; gap: 8px; width: 100%; padding: 0 8%; }
  .artifact { min-height: 0; padding: 10px 12px; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; }
  .artifact .art-k, .artifact > span:not(.art-k), .artifact code, .artifact .badge { grid-column: 1 / -1; }
  .artifact b { font-size: 24px; } .artifact code, .ticket-tag { display: none; }
  .artifact > span:not(.art-k):not(.badge):not(.ticket-tag) { font-size: 12px; }
  .convo { padding: 10px 12px 12px; gap: 7px; } .cm { font-size: 12.5px; padding: 8px 10px; }
  .file { padding: 7px 10px; font-size: 11px; } .tray { padding: 14px 12px; } .stream i { height: 7px; }
  .sep-card { padding: 14px 14px 12px; } .sep-track { height: 22px; } .sep-what { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hscene, .file, .stream i, .intent-chip, .flag, .charge, .sep-bar, .stamp, .artifact { transition: none !important; } }
.stamp { top: -40px; right: 6px; }
@media (min-width: 1200px) { .hs-read > *, .hs-label > * { zoom: 1.25; } .hs-act { zoom: 1.2; } }
@media (min-width: 1200px) and (max-height: 820px) { .hs-read > *, .hs-label > * { zoom: 1.1; } .hs-act { zoom: 1.05; } }
/* during the dive the first scene is a miniature inside the glass, growing with the opening (after the step rules so it wins) */
.how-canvas.diving[data-step] .hs-read { transition: opacity 0.45s ease; transform: translate(var(--vx, 0), var(--vy, 0)) scale(var(--vs, 1)); }

/* ===== the finding: a dashboard's model gap collapses for the same people (beats 5-6) ===== */
.scene-wow { z-index: 3; padding: 0 5%; }
.canvas[data-beat="5"] .scene-wow { opacity: 1; }
.canvas[data-beat="5"]:not(.diving) .lens { opacity: var(--lens, 1); }
.wow-card { position: relative; width: min(860px, 100%); background: var(--cream); border: 1px solid var(--ink); border-radius: calc(var(--r) + 8px); box-shadow: 0 5px 0 var(--ink), 0 40px 80px -40px rgba(0, 0, 0, 0.55); padding: 22px 26px 20px; display: grid; gap: 14px; transform: translateY(16px) scale(0.97); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.canvas[data-beat="5"] .wow-card { transform: none; }
.wow-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.wow-bars { display: grid; gap: 12px; }
.wow-card .sep-row { grid-template-columns: 1fr 76px; }
.wow-card .sep-track { height: 44px; }
.wow-card .sep-bar { transition: none; }
.wow-card .sep-row b { font-size: 24px; }
.wow-card .sep-mode { font: 400 12.5px/1.3 var(--mono); color: var(--ink-2); }
.wow-gap { display: grid; justify-items: center; min-width: 190px; padding: 6px 0 6px 26px; border-left: 1px dashed var(--rule); }
.wow-k, .wow-u { font: 400 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.wow-gap b { font: 800 clamp(64px, 7.5vw, 112px)/1 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--blue-deep) calc(var(--settle, 0) * 100%), #e4572e); }
.scene-wow .stamp { top: -22px; right: 22px; font-size: 15px; padding: 9px 13px; }
.hl-o { background: linear-gradient(transparent 58%, rgba(242, 169, 59, 0.55) 58%); padding: 0 2px; }
@media (max-width: 900px) {
  .wow-card { padding: 14px 14px 12px; gap: 10px; }
  .wow-body { grid-template-columns: 1fr; gap: 6px; }
  .wow-gap { border-left: 0; border-top: 1px dashed var(--rule); padding: 8px 0 0; grid-auto-flow: column; align-items: baseline; gap: 8px; justify-content: start; }
  .wow-gap b { font-size: 44px; }
  .wow-card .sep-track { height: 26px; } .wow-card .sep-row b { font-size: 17px; } .wow-card .sep-row { grid-template-columns: 1fr 58px; }
  .scene-wow .stamp { top: -18px; right: 10px; font-size: 12px; }
}

/* a nudge to keep going */
.scroll-more { position: absolute; left: 50%; bottom: 12px; z-index: 6; margin: 0; font: 400 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); opacity: 0; transform: translate(-50%, 6px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; }
.scroll-more.show { opacity: 1; transform: translate(-50%, 0); }
.scroll-more span { display: inline-block; animation: cue 1.4s ease-in-out infinite; }
@media (max-width: 900px) { .scroll-more { bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .scroll-more { display: none; } }

/* ===== full screen: the frame opens from a card to the viewport; captions sit on the blue ===== */
.topbar { transition: transform 0.35s ease; }
body.in-story .topbar { transform: translateY(-100%); }
#story .viewport { display: block; padding: 0; }
#story .frame { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; clip-path: inset(var(--fy, 0px) var(--fx, 0px) var(--fb, 0px) var(--fx, 0px) round var(--fr, 0px)); }
#story .captions { position: absolute; top: 0; left: 0; right: 0; z-index: 8; padding: clamp(28px, 7vh, 72px) var(--gutter) 0; align-items: start; opacity: var(--cap-o, 1); pointer-events: none; }
#story .caption.is-active { pointer-events: auto; }
#story .caption h2 { color: var(--cream); }
#story .caption .body { color: rgba(255, 250, 240, 0.8); }
#story .caption .body b { color: var(--cream); }
#story .kicker { color: rgba(255, 250, 240, 0.86); }
#story .kicker .num { color: var(--cream); border-color: var(--orange); }
#story .kicker b { color: var(--orange); }
#story .hl-o { background: linear-gradient(transparent 58%, rgba(242, 169, 59, 0.7) 58%); }
#story .caption .cta { background: var(--cream); color: var(--ink); }
#story .caption .cta .lensdot { border-color: var(--ink); }
#story .caption .btn-outline { background: transparent; color: var(--cream); border-color: var(--cream); box-shadow: none; }
#story .scene, #story .hscene { top: var(--cap-h, 34vh); }
#story .scroll-more { color: rgba(255, 250, 240, 0.85); bottom: 14px; }
#story .frame-caption { bottom: 14px; }
#story .lens { top: calc(var(--cap-h, 34vh) + (100% - var(--cap-h, 34vh)) * 0.36); }
@media (max-width: 900px) { #story .lens { top: calc(var(--cap-h, 34vh) + (100% - var(--cap-h, 34vh)) * 0.4); } }
#story .caption { max-width: min(1120px, 94vw); }
.canvas[data-beat="3"] #story-map, .canvas[data-beat="4"] #story-map, .canvas[data-beat="5"] #story-map { will-change: opacity; }  /* zoom is done (1x), so the layer is frame-sized */
.canvas.rushing .lens { filter: none; }
.canvas.lens-gone .lens { visibility: hidden; }
#story .hs-read .file, #story .hs-read .stream i { will-change: transform; }  /* the drop and the row stream run on the GPU */
/* the loupe's return before the dive: it fades and grows in place over the result instead of travelling in */
.canvas.lens-return:not(.diving) .lens { transform-origin: 41.67% 41.67%; transform: scale(calc(0.6 + 0.4 * var(--lens-in, 1))); opacity: var(--lens-in, 1); transition: none; }
/* captions hand off in sequence, never overlapping: the outgoing one clears quickly, then the new one arrives */
#story .caption { transition: opacity 0.18s ease, transform 0.18s ease; }
#story .caption.is-active { transition: opacity 0.38s ease 0.2s, transform 0.38s ease 0.2s; }
/* the world fits the room under the caption: as wide as the frame allows, never taller than the space (map is 960x500) */
#story .scene-map > .map-wrap { width: min(100%, calc((100svh - var(--cap-h, 34vh) - 48px) * 1.92)); justify-self: center; }
/* the scroll hint sits bottom-right so it can never run into the figure caption bottom-left, at any window size */
#story .scroll-more { left: auto; right: 16px; transform: translateY(6px); }
#story .scroll-more.show { transform: none; }
#story .frame-caption { max-width: min(62%, 720px); }
@media (max-width: 900px) { #story .frame-caption { max-width: 46%; } #story .scroll-more { right: 12px; font-size: 10px; } }
/* a way out for readers who would rather not watch: top-right, only while the story holds the screen */
#story .skip-story { position: absolute; top: 14px; right: 18px; z-index: 9; font: 400 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 250, 240, 0.82); padding: 8px 10px; border: 1px solid rgba(255, 250, 240, 0.35); border-radius: 999px; transition: opacity 0.3s ease, background 0.15s ease; }
#story .skip-story:hover, #story .skip-story:focus-visible { background: rgba(255, 250, 240, 0.12); color: var(--cream); outline: none; }
body:not(.in-story) #story .skip-story { opacity: 0; pointer-events: none; }
@media (max-width: 900px) { #story .skip-story { top: 10px; right: 10px; padding: 6px 8px; font-size: 10px; } }
@media (max-width: 900px) { .canvas[data-beat="4"] .scene-tiles { transform: none; } }  /* phones: the loupe rests below the tiles, no room needed beside them */
/* phones: the scenes start just under the caption and use the width, instead of floating small in the leftover space */
@media (max-width: 900px) {
  #story .scene, #story .hscene { padding-bottom: 7vh; }  /* centred in the room between the caption and the figure note */
  #story .scene-tiles { grid-template-columns: repeat(2, 43vw); gap: 10px; }
  #story .qtile { aspect-ratio: 1.12; }
  #story .qtile .qmark { font-size: 34px; }
  #story .qtile .qlabel { font-size: 15px; }
  #story .qtile .qanswer { font-size: 13.5px; }
  #story .qtile .qanswer b { font-size: 30px; }
  #story .scene-map > .map-wrap { width: 150%; }
  #story .chatwin { width: 94%; }
  #story .wow-card { width: 100%; }
}

/* ===== scene 1: the result card arrives with depth ===== */
.wow-card { transform: perspective(1400px) rotateX(16deg) translateY(48px) scale(0.94); opacity: 0; transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease; box-shadow: 0 5px 0 var(--ink), 0 60px 120px -40px rgba(4, 10, 50, 0.85); }
#stage.arrived .wow-card { transform: none; opacity: 1; }
/* ===== scene 2: "But" — the card steps back, the people who used both stream in ===== */
#stage.arrived.k-but .wow-card { transform: scale(0.86) translateY(6%); opacity: 0.1; }
.scene-but { z-index: 5; display: grid; place-items: center; align-content: center; gap: 18px; opacity: 1 !important; pointer-events: none; }
.but-word { font: 800 clamp(120px, 24vw, 340px)/0.8 var(--display); letter-spacing: -0.06em; color: var(--cream); opacity: 0; transform: scale(1.25); filter: blur(14px); transition: opacity 0.45s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease; }
.canvas.k-but .but-word { opacity: 1; transform: none; filter: blur(0); }
.people { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; width: min(760px, 92%); }
.people i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); opacity: 0; transform: translateY(14px) scale(0.4); transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.canvas.k-but .people i { opacity: 0.95; transform: none; transition-delay: calc(0.35s + var(--d, 0ms)); }
.people-k { font: 400 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 250, 240, 0.85); opacity: 0; transition: opacity 0.5s ease; }
.people-k b { color: var(--orange); }
.canvas.k-but .people-k { opacity: 1; transition-delay: 0.9s; }
@media (max-width: 900px) { .people { gap: 3px; } .people i { width: 5px; height: 5px; } }

/* ===== hero: the original masthead, alive ===== */
.masthead { position: relative; overflow: hidden; }
.mast-content { position: relative; }
.masthead h1 .w { display: inline-block; opacity: 0; transform: translateY(0.35em); filter: blur(8px); animation: word-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(0.2s + var(--i) * 90ms); }
@keyframes word-in { to { opacity: 1; transform: none; filter: blur(0); } }
.masthead .marker, .masthead .plain > div { opacity: 0; animation: fade-up 0.8s ease forwards; }
.masthead .marker-left { animation-delay: 0.9s; } .masthead .marker-right { animation-delay: 1.15s; }
.masthead .plain > div:nth-child(1) { animation-delay: 1.4s; } .masthead .plain > div:nth-child(2) { animation-delay: 1.55s; } .masthead .plain > div:nth-child(3) { animation-delay: 1.7s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* the orange underline under "for teams shipping" draws itself */
.masthead .marker-left { border-bottom-color: transparent; background: linear-gradient(var(--orange), var(--orange)) left bottom / 0% 1.5px no-repeat; animation: fade-up 0.8s ease 0.9s forwards, underline 0.7s ease 1.5s forwards; }
@keyframes underline { to { background-size: 100% 1.5px; } }
/* the loupe */
.mag { position: absolute; left: 0; top: 0; z-index: 3; width: clamp(130px, 13vw, 190px); aspect-ratio: 1; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; will-change: transform; }
.mag.on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .mag { display: none; } }
@keyframes fade-in { to { opacity: 1; } }
.mag-view { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--paper); border: 5px solid var(--ink);
  box-shadow: 0 18px 34px -10px rgba(28, 28, 30, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.mag-view > .mast-content { position: absolute; margin: 0; will-change: transform; }
.mag-view > .mast-content .w, .mag-view > .mast-content .marker, .mag-view > .mast-content .plain > div { animation-delay: 0s !important; }
.mag-view::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 38%), radial-gradient(circle, transparent 62%, rgba(28, 28, 30, 0.12) 100%); }
.mag::before { content: ""; position: absolute; width: 16%; height: 46%; left: 86%; top: 80%; background: var(--ink); border-radius: 8px; transform: rotate(-45deg); transform-origin: top left; }
@media (prefers-reduced-motion: reduce) { .masthead h1 .w, .masthead .marker, .masthead .plain > div, .mag { animation: none !important; opacity: 1 !important; transform: none; filter: none !important; } }

/* ===== the film: a framed piece in the page, not a pinned scroll ===== */
#story { padding: 8px var(--gutter) 24px; }
#story .viewport { height: min(86vh, 860px); height: min(86svh, 860px); max-width: 1400px; margin: 0 auto; }
#story .frame { clip-path: inset(0 round 18px); border-radius: 18px; box-shadow: 0 4px 0 var(--ink), 0 40px 80px -40px rgba(10, 20, 70, 0.6); }
#story .captions { opacity: 1; }
.film-controls { position: absolute; right: 14px; bottom: 12px; z-index: 9; display: flex; align-items: center; gap: 10px; }
.film-btn { font: 400 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); background: rgba(10, 20, 70, 0.35); border: 1px solid rgba(255, 250, 240, 0.45); border-radius: 999px; padding: 7px 11px; cursor: pointer; }
.film-btn:hover, .film-btn:focus-visible { background: rgba(255, 250, 240, 0.16); outline: none; }
.segs { display: flex; gap: 4px; }
.seg { width: 28px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.seg i { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--cream) calc(var(--fill, 0) * 100%), rgba(255, 250, 240, 0.3) 0); }
.seg:hover i { height: 5px; }
.seg:focus-visible { outline: 2px solid var(--orange); border-radius: 3px; }
#story .frame-caption { max-width: 46%; }
@media (max-width: 900px) {
  #story { padding: 0 10px 16px; }
  #story .viewport { height: 88svh; }
  .film-controls { right: 8px; bottom: 8px; gap: 6px; }
  .seg { width: 18px; }
  #story .frame-caption { display: none; }
}
/* film headings rise in word by word as each scene arrives */
#story .caption h2 .w { display: inline-block; opacity: 0; transform: translateY(0.35em); filter: blur(6px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease; }
#story .caption.is-active h2 .w { opacity: 1; transform: none; filter: blur(0); transition-delay: calc(0.18s + var(--i) * 45ms); }
@media (prefers-reduced-motion: reduce) { #story .caption h2 .w { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } }

/* ===== film motion ===== */
/* scene 1: the bars grow in as the card arrives (the ratio counts up in script) */
.wow-card .sep-bar { transform-origin: left center; }
#stage:not(.arrived) .wow-card .sep-bar { transform: scaleX(0); }
#stage.arrived .wow-card .sep-bar { transform: none; transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s; }
/* scene 2: the people fly in from all over the frame; scene 3: they converge into the card and vanish */
.people i { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.3); transition: opacity 0.3s ease, transform 0.75s cubic-bezier(0.16, 0.9, 0.25, 1.05); }
.canvas.k-but .people i { opacity: 0.95; transform: none; transition-delay: calc(0.12s + var(--d, 0ms)); }
.canvas.k-after-but .people i { opacity: 0; transform: translate(0, 120px) scale(0); transition: opacity 0.4s ease calc(var(--d, 0ms) * 0.5), transform 0.6s cubic-bezier(0.6, 0, 0.8, 0.4) calc(var(--d, 0ms) * 0.5); }
.canvas.k-after-but .scene-but { pointer-events: none; }
/* scene 3: the stamp lands with a shockwave and a jolt */
.wow-card::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 3px solid var(--cream); opacity: 0; pointer-events: none; }
.canvas.k-same .wow-card::after { animation: shock 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s; }
@keyframes shock { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.18, 1.5); } }
.canvas.k-same .scene-wow { animation: jolt 0.45s ease 0.12s; }
@keyframes jolt { 0%, 100% { transform: none; } 25% { transform: translate(-6px, 3px) rotate(-0.4deg); } 55% { transform: translate(5px, -2px) rotate(0.3deg); } 80% { transform: translate(-2px, 1px); } }
/* scenes 4-6: each one whips in from the right and out to the left, with a moment of motion blur */
#story .hscene { transform: translateX(9%) scale(0.98); filter: blur(10px); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.45s ease; }
#story .how-canvas[data-step="1"] .hs-read, #story .how-canvas[data-step="2"] .hs-label, #story .how-canvas[data-step="3"] .hs-act { transform: none; filter: none; }
#story .how-canvas[data-step="2"] .hs-read, #story .how-canvas[data-step="3"] .hs-read, #story .how-canvas[data-step="3"] .hs-label { transform: translateX(-9%) scale(0.98); }
@media (prefers-reduced-motion: reduce) { .people i, #story .hscene, .wow-card .sep-bar { transition: none !important; filter: none !important; } .canvas.k-same .wow-card::after, .canvas.k-same .scene-wow { animation: none !important; } }
/* during the dive the first scene is the miniature inside the glass (wins over the whip-in above) */
#story .how-canvas.diving[data-step] .hs-read { transform: translate(var(--vx, 0), var(--vy, 0)) scale(var(--vs, 1)); filter: none; }

/* ===== the film: one continuous motion graphic ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.film-stage { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 95% at 50% 38%, #3a5ff0 0%, #1e3aa6 46%, #0d1a62 100%); }
.film-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255, 250, 240, 0.12) 0.8px, transparent 1.1px); background-size: 18px 18px; }
.cam { position: absolute; inset: 0; }
.film-stage .p { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; }
.film-stage .ring { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid var(--orange); }
.kt { position: absolute; left: 50%; translate: -50% 0; width: min(92%, 1040px); text-align: center; font: 800 clamp(28px, 4.1vw, 58px)/1.04 var(--display); letter-spacing: -0.04em; color: var(--cream); visibility: hidden; }
.kt.top { top: 8%; } .kt.low { top: 61%; }
.kt .w { display: inline-block; }
.kt em { font-style: normal; color: var(--orange); }
.kt .dim { color: rgba(255, 250, 240, 0.58); }
.kt .count { color: var(--orange); font-variant-numeric: tabular-nums; }
.crowd-lab, .cluster-lab, .legend { position: absolute; translate: -50% 0; white-space: nowrap; font: 400 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 250, 240, 0.88); }
.cluster-lab b { color: var(--orange); font-weight: 600; }
.legend { display: flex; gap: 18px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; }
.legend .lt { background: #8fb0ff; } .legend .hv { background: #fffaf0; }
.fbar { position: absolute; }
.fbar .fill { position: absolute; inset: 0; transform-origin: 50% 100%; border-radius: 10px 10px 3px 3px; box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.6); }
.fbar.a .fill { background: linear-gradient(180deg, #ffc46b, #f2a93b); }
.fbar.b .fill { background: linear-gradient(180deg, #ffffff, #e6dcc8); }
.fbar .val { position: absolute; left: 50%; top: calc(100% + 12px); translate: -50% 0; font: 800 clamp(20px, 2.2vw, 30px)/1 var(--display); color: var(--cream); font-variant-numeric: tabular-nums; }
.fbar .bl { position: absolute; left: 50%; top: calc(100% + 46px); translate: -50% 0; white-space: nowrap; font: 400 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 250, 240, 0.75); }
.ratio { position: absolute; translate: -50% -50%; display: grid; justify-items: center; }
.ratio-n { font: 800 clamp(70px, 9.5vw, 150px)/0.9 var(--display); letter-spacing: -0.05em; color: var(--orange); font-variant-numeric: tabular-nums; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); }
.ratio-k { font: 400 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 250, 240, 0.7); margin-top: 8px; }
.stamp2 { position: absolute; translate: -50% -50%; font: 700 clamp(13px, 1.3vw, 17px)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-deep); background: var(--cream); border: 3px solid var(--blue-deep); border-radius: 8px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.shock { position: absolute; translate: -50% -50%; border: 3px solid var(--cream); border-radius: 28px; }
.but { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 800 clamp(140px, 26vw, 400px)/0.8 var(--display); letter-spacing: -0.06em; color: var(--cream); text-shadow: 0 20px 80px rgba(0, 0, 0, 0.35); }
.flens { position: absolute; left: 0; top: 0; z-index: 4; width: clamp(130px, 14vw, 190px); aspect-ratio: 1; translate: -50% -50%; }
.flens-glass { position: absolute; inset: 0; border-radius: 50%; border: 6px solid #1c1c1e; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.08) 42%, rgba(120, 160, 255, 0.25) 100%); box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.55); }
.flens-handle { position: absolute; width: 16%; height: 46%; left: 84%; top: 80%; background: #1c1c1e; border-radius: 8px; transform: rotate(-45deg); transform-origin: top left; }
.logs { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 26px; padding-top: 6%; }
.logs .files { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.logs .arts { display: grid; grid-template-columns: repeat(3, minmax(0, 230px)); gap: 16px; justify-content: center; position: absolute; top: 50%; left: 50%; translate: -50% -38%; width: min(760px, 94%); }
.endcard { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; align-content: center; gap: 10px; padding: 0 6%; text-align: center; color: var(--cream); visibility: hidden; }
.end-brand { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 700 22px/1 var(--display); }
.end-brand .logo { width: 26px; height: 26px; }
.end-title { margin: 0; font: 800 clamp(36px, 5.4vw, 76px)/1 var(--display); letter-spacing: -0.045em; }
.end-sum { margin: 0 0 8px; font-size: clamp(15px, 1.4vw, 19px); color: rgba(255, 250, 240, 0.82); }
.end-sum b { color: var(--orange); }
.endcard .cta { background: var(--cream); color: var(--ink); }
.endcard .cta .lensdot { border-color: var(--ink); }
.endcard .btn-outline { background: transparent; color: var(--cream); border-color: rgba(255, 250, 240, 0.6); box-shadow: none; }
.film-tag { position: absolute; left: 14px; bottom: 14px; z-index: 7; margin: 0; max-width: 46%; font: 400 10px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 250, 240, 0.65); }
@media (max-width: 900px) {
  .kt { font-size: clamp(24px, 7.2vw, 36px); } .kt.top { top: 6%; }
  .film-stage .p { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
  .crowd-lab, .cluster-lab, .legend { font-size: 10px; } .legend { gap: 10px; }
  .logs .arts { grid-template-columns: 1fr; width: 80%; gap: 8px; translate: -50% -30%; }
  .logs .artifact { min-height: 0; padding: 10px 12px; }
  .logs .files { flex-direction: column; align-items: center; gap: 8px; }
  .film-tag { display: none; }
}

/* ===== immersion ===== */
/* full screen, edge to edge */
#story { padding: 0; }
#story .viewport { height: 100vh; height: 100svh; max-width: none; margin: 0; }
#story .frame { clip-path: none; overflow: hidden; transform: scale(var(--fs, 1)); transform-origin: 50% 50%; border-radius: calc(var(--fr, 0px) / var(--fs, 1)); box-shadow: none; will-change: transform; }
/* depth layers and breathing dots */
.film-stage .layer { position: absolute; inset: 0; }
.film-stage .p { width: 0; height: 0; margin: 0; }
.film-stage .p .core { position: absolute; width: calc(9px * var(--ds, 1)); height: calc(9px * var(--ds, 1)); margin: calc(-4.5px * var(--ds, 1)) 0 0 calc(-4.5px * var(--ds, 1)); border-radius: 50%; opacity: var(--do, 1);
  animation: var(--anim, breathe) var(--fd, 3s) ease-in-out var(--fo, 0s) infinite alternate; }
@keyframes breathe { from { transform: translate(0, 0); } to { transform: translate(var(--fx, 0), var(--fy, 0)); } }
@media (max-width: 900px) { .film-stage .p .core { width: calc(7px * var(--ds, 1)); height: calc(7px * var(--ds, 1)); margin: calc(-3.5px * var(--ds, 1)) 0 0 calc(-3.5px * var(--ds, 1)); } }
@media (hover: none) {
  .film-stage .layer.l1 { animation: sway 9s ease-in-out infinite alternate; }
  .film-stage .layer.l2 { animation: sway 7s ease-in-out infinite alternate-reverse; }
  @keyframes sway { from { transform: translate(-6px, -3px); } to { transform: translate(6px, 3px); } }
}
/* slow light moving across the background, and a vignette that draws the eye in */
.film-stage .glow { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(120, 160, 255, 0.35), rgba(120, 160, 255, 0) 60%); }
.film-stage .g1 { left: -20vmax; top: -30vmax; animation: drift1 16s ease-in-out infinite alternate; }
.film-stage .g2 { right: -25vmax; bottom: -35vmax; background: radial-gradient(circle, rgba(242, 169, 59, 0.16), rgba(242, 169, 59, 0) 60%); animation: drift2 19s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(30vmax, 20vmax); } }
@keyframes drift2 { to { transform: translate(-25vmax, -15vmax); } }
.film-stage .vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(5, 10, 40, 0.55) 100%); }
.film-stage .flash { position: absolute; inset: -20%; background: #fffaf0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .film-stage .p .core, .film-stage .glow, .film-stage .layer { animation: none !important; } }
/* no visible scroll bar; the page still scrolls */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.film-stage .hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.legend .ill { opacity: 0.6; text-transform: none; letter-spacing: 0; font-style: italic; }
/* the outputs fill the screen: bigger cards, numbers and text */
.logs .arts { grid-template-columns: repeat(3, minmax(0, 340px)); gap: 24px; width: min(1120px, 92%); translate: -50% -40%; }
.logs .artifact { min-height: 250px; padding: 24px 24px 22px; gap: 10px; border-radius: 12px; box-shadow: 0 6px 0 var(--ink), 0 40px 80px -30px rgba(0, 0, 0, 0.55); }
.logs .artifact .art-k { font-size: 13px; }
.logs .artifact b { font-size: clamp(44px, 4.6vw, 68px); }
.logs .artifact > span:not(.art-k):not(.badge):not(.ticket-tag) { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.4; }
.logs .artifact .badge { font-size: 12px; padding: 5px 10px; }
.logs .artifact .ticket-tag { font-size: 13px; }
.logs .files { gap: 16px; }
.logs .file { font-size: clamp(14px, 1.4vw, 19px); padding: 13px 18px; }
@media (max-width: 900px) {
  .logs .arts { grid-template-columns: 1fr; width: 88%; gap: 12px; translate: -50% -34%; }
  .logs .artifact { min-height: 0; padding: 14px 16px; }
  .logs .artifact b { font-size: 34px; }
  .logs .artifact > span:not(.art-k):not(.badge):not(.ticket-tag) { font-size: 14px; }
  .logs .file { font-size: 13px; padding: 10px 14px; }
}
/* the cards scale with the screen, not to fixed pixel caps */
@media (min-width: 901px) {
  .logs .arts { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(1560px, 88vw); gap: clamp(18px, 1.8vw, 32px); translate: -50% -42%; }
  .logs .artifact { min-height: clamp(250px, 40vh, 480px); padding: clamp(22px, 2vw, 40px); gap: clamp(10px, 1vh, 16px); }
  .logs .artifact .art-k { font-size: clamp(12px, 0.95vw, 17px); }
  .logs .artifact b { font-size: clamp(48px, 5.6vw, 110px); }
  .logs .artifact > span:not(.art-k):not(.badge):not(.ticket-tag) { font-size: clamp(16px, 1.4vw, 24px); }
  .logs .artifact .badge { font-size: clamp(11px, 0.9vw, 15px); padding: 6px 12px; }
  .logs .artifact .ticket-tag { font-size: clamp(12px, 1vw, 17px); }
  .logs .file { font-size: clamp(15px, 1.5vw, 24px); padding: clamp(12px, 1.2vw, 20px) clamp(16px, 1.6vw, 28px); }
}
@media (max-width: 900px) {
  .logs .artifact b { font-size: 40px; }
  .logs .artifact > span:not(.art-k):not(.badge):not(.ticket-tag) { font-size: 15px; }
  .logs .artifact { padding: 16px 18px; }
}
.film-stage .sample-note { position: absolute; left: 50%; bottom: 9%; translate: -50% 0; margin: 0; white-space: nowrap; font: 400 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 250, 240, 0.75); visibility: hidden; }
@media (max-width: 900px) { .film-stage .sample-note { bottom: 7%; font-size: 9.5px; white-space: normal; width: 86%; text-align: center; } }
/* the problem, in one line, right under the headline */
.mast-lede { margin: 30px auto 0; max-width: 760px; text-align: center; font: 400 clamp(18px, 1.6vw, 23px)/1.45 var(--body); color: var(--ink-2); opacity: 0; animation: fade-up 0.8s ease 1.1s forwards; text-wrap: balance; }
.mast-lede b { color: var(--ink); font-weight: 600; }
.mag-view .mast-lede { animation-delay: 0s; }
@media (max-width: 900px) { .mast-lede { margin-top: 20px; font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .mast-lede { animation: none; opacity: 1; } }
/* magnifier handles: anchored where a 45-degree line from the centre meets the rim (cos 45 x 50% = 35.4%), starting just
   inside the rim so ring and handle read as one piece, with a short collar where they join */
.mag::before { width: 13%; height: 50%; left: calc(50% + 33% - 6.5%); top: calc(50% + 33%); border-radius: 0 0 9px 9px / 0 0 9px 9px; transform: rotate(-45deg); transform-origin: 50% 0; }
.mag::after { content: ""; position: absolute; width: 19%; height: 9%; left: calc(50% + 36.5% - 9.5%); top: calc(50% + 36.5%); background: var(--ink); border-radius: 3px; transform: rotate(-45deg); transform-origin: 50% 0; }
.flens-handle { width: 13%; height: 50%; left: calc(50% + 33% - 6.5%); top: calc(50% + 33%); border-radius: 0 0 9px 9px; transform: rotate(-45deg); transform-origin: 50% 0; }
.flens::after { content: ""; position: absolute; width: 19%; height: 9%; left: calc(50% + 36.5% - 9.5%); top: calc(50% + 36.5%); background: #1c1c1e; border-radius: 3px; transform: rotate(-45deg); transform-origin: 50% 0; }

/* the film's opening chat */
.chat-intro { position: absolute; left: 50%; top: 56%; width: min(580px, 88%); background: var(--cream); color: var(--ink); border: 1px solid var(--ink); border-radius: 18px; padding: 14px 16px 18px; box-shadow: 0 6px 0 var(--ink), 0 50px 100px -40px rgba(0, 0, 0, 0.6); display: grid; gap: 12px; visibility: hidden; }
.ci-head { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.ci-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.ci-msg { position: relative; margin: 0; max-width: 82%; padding: 11px 14px; border-radius: 14px; font: 400 clamp(15px, 1.35vw, 18px)/1.4 var(--body); }
.ci-msg.user { justify-self: end; background: var(--blue-deep); color: var(--cream); border-bottom-right-radius: 4px; }
.ci-msg.bot { justify-self: start; background: var(--paper-2); border-bottom-left-radius: 4px; display: grid; }
.ci-msg.bot > :not(.ci-avatar) { grid-area: 1 / 1; }
.ci-typing { display: inline-flex; gap: 4px; align-items: center; height: 1.4em; }
.ci-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); animation: typing 1s infinite ease-in-out; }
.ci-typing i:nth-child(2) { animation-delay: 0.15s; } .ci-typing i:nth-child(3) { animation-delay: 0.3s; }
.ci-flag { position: absolute; right: 10px; top: -12px; font: 600 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--ink); color: var(--cream); }
@media (max-width: 900px) { .chat-intro { top: 54%; padding: 12px 12px 14px; } .ci-msg { font-size: 14px; max-width: 88%; } }
@media (min-width: 901px) { .chat-intro { width: min(720px, 60vw); padding: 18px 22px 24px; gap: 16px; border-radius: 22px; } .ci-msg { font-size: clamp(17px, 1.5vw, 22px); padding: 14px 18px; } .ci-head { font-size: 13px; } .ci-flag { font-size: 12px; top: -14px; } }
/* the reply renders like a real assistant: no bubble, a small avatar, a thinking pulse, then streamed words */
.ci-msg.bot { background: none; padding-left: 30px; position: relative; max-width: 88%; }
.ci-avatar { position: absolute; left: 4px; top: 0.55em; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffc46b, #f2a93b 60%, #d98a1c); }
.ci-msg.bot .ci-typing, .ci-msg.bot .ci-text { grid-area: 1 / 1; }
.chat-intro { transform-origin: 50% 50%; }
.ci-msg.bot { padding: 10px 14px 10px 40px; }
.ci-avatar { left: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; }
.chat-intro .ci-msg.bot { padding: 10px 14px 10px 42px !important; }
.chat-intro .ci-avatar { position: absolute; left: 14px; top: 50%; translate: 0 -50%; }
/* the film's resting card, from the first paint (film.js keeps these in step with the scroll) */
#story .frame { --fs: 0.93; --fr: 28px; }
@media (max-width: 699px) { #story .frame { --fs: 0.94; } }