/* Unilytic product tour — the marketing ("Persuade") register from DESIGN.md:
   console-black stage, Bricolage headlines with one Instrument Serif accent,
   Hanken body, JetBrains Mono for numbers. Slides are authored on a fixed
   1920×1080 stage that tour.js scales to the viewport; portrait phones get a
   short landing screen instead (body.gated), and print lays every slide out
   at native size (body.print, set by ?print). */

@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --bg: hsl(230 24% 7%);
  --bg-2: hsl(230 22% 9%);
  --surface: hsl(230 20% 12%);
  --surface-2: hsl(230 20% 15%);
  --line: hsl(230 15% 21%);
  --line-2: hsl(230 15% 28%);
  --ink: hsl(220 25% 94%);
  --ink-2: hsl(220 16% 76%);
  --ink-3: hsl(220 12% 60%);
  --cobalt: hsl(221 90% 64%);
  --cobalt-deep: hsl(221 83% 53%);
  --cobalt-soft: hsl(221 95% 76%);
  --indigo: hsl(248 50% 28%);
  --gold: hsl(32 95% 62%);
  --teal: hsl(165 62% 52%);
  --green: hsl(152 65% 46%);
  --amber: hsl(38 92% 56%);
  --rose: hsl(350 80% 64%);
  --sky: hsl(198 88% 56%);
  --ease: cubic-bezier(.2, .7, .25, 1);
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ── Stage ─────────────────────────────────────────────────────────────── */
.deck { position: fixed; inset: 0; overflow: hidden; background:
  radial-gradient(1200px 700px at 12% -10%, hsl(221 83% 53% / .10), transparent 60%),
  radial-gradient(900px 600px at 105% 110%, hsl(248 60% 40% / .12), transparent 60%),
  var(--bg); }
.deck::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease);
  background: radial-gradient(62vw 64vh at 74% 44%, hsl(221 83% 53% / .26), transparent 66%), radial-gradient(46vw 46vh at 100% 100%, hsl(32 95% 62% / .09), transparent 62%); }
.deck.glow::before { opacity: 1; }
body:not(.print) .cover-glow { display: none; }
.stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 0 0; }
.slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateX(28px);
  transition: opacity .55s var(--ease), transform .7s var(--ease), visibility 0s linear .7s; }
.slide.is-past { transform: translateX(-28px); }
.slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease) .08s, transform .7s var(--ease) .08s, visibility 0s; }
.pad { position: absolute; inset: 0; padding: 92px 120px 118px; display: flex; flex-direction: column; }

/* Reveal choreography: [data-a] children rise in on a stagger (--i). */
[data-a] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 85ms + 160ms); }
[data-a="zoom"] { transform: translateY(14px) scale(.975); }
[data-a="left"] { transform: translateX(-26px); }
[data-a="right"] { transform: translateX(26px); }
.is-active [data-a] { opacity: 1; transform: none; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease); transition-delay: calc(var(--i, 0) * 110ms + 350ms); }
.is-active .draw { stroke-dashoffset: 0; }
.flowdash { stroke-dasharray: 6 10; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -32; } }

/* ── Type ──────────────────────────────────────────────────────────────── */
.eyebrow { display: inline-flex; align-items: center; gap: 14px; font: 700 17px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cobalt); margin: 0 0 26px; }
.eyebrow .num { font: 500 15px/1 var(--mono); letter-spacing: .02em; color: var(--ink-3); padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; }
.h-cover { font: 700 104px/1 var(--display); letter-spacing: -.032em; margin: 0; }
.h1 { font: 700 80px/1.04 var(--display); letter-spacing: -.028em; margin: 0; max-width: 1400px; text-wrap: balance; }
.h2 { font: 650 60px/1.08 var(--display); letter-spacing: -.024em; margin: 0; text-wrap: balance; }
.h3 { font: 650 30px/1.2 var(--display); letter-spacing: -.02em; margin: 0; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--cobalt-soft); }
.gold { color: var(--gold); }
.lede { font: 400 27px/1.5 var(--sans); color: var(--ink-2); margin: 24px 0 0; max-width: 820px; text-wrap: pretty; }
.body { font: 400 21px/1.55 var(--sans); color: var(--ink-2); margin: 0; }
.small { font: 400 17px/1.5 var(--sans); color: var(--ink-3); margin: 0; }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }
b, strong { color: var(--ink); font-weight: 650; }
.note { position: relative; display: block; padding-left: 22px; font: 400 18px/1.5 var(--sans); color: var(--ink-3); margin-bottom: 0; }
.note::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.note b { color: var(--ink-2); }
.pain { font-size: 22px; color: var(--ink-2); }
.pain::before { top: .55em; }
.note.cobalt::before { background: var(--cobalt); }
.note.amber::before { background: var(--amber); }

/* ── Layout ────────────────────────────────────────────────────────────── */
.head { flex: none; }
.fill { flex: 1; min-height: 0; display: flex; }
.row { display: flex; gap: 32px; }
.col { display: flex; flex-direction: column; }
.split { display: grid; grid-template-columns: 600px 1fr; gap: 80px; align-items: center; flex: 1; min-height: 0; }
.split.r { grid-template-columns: 1fr 560px; }
.split.even { grid-template-columns: 1fr 1fr; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mt-s { margin-top: 18px !important; } .mt-m { margin-top: 36px !important; } .mt-l { margin-top: 56px !important; } .mt-auto { margin-top: auto !important; }
.center { align-items: center; justify-content: center; text-align: center; }

/* ── Cards / chips ─────────────────────────────────────────────────────── */
.card { background: linear-gradient(180deg, hsl(230 20% 13%), hsl(230 20% 11%)); border: 1px solid var(--line); border-radius: 18px; padding: 28px 30px; }
.card .h3 + .body { margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font: 600 15px/1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.chip.cobalt { border-color: hsl(221 90% 64% / .4); background: hsl(221 90% 64% / .12); color: var(--cobalt-soft); }
.chip.gold { border-color: hsl(32 95% 62% / .35); background: hsl(32 95% 62% / .1); color: hsl(32 95% 70%); }
.chip.green { border-color: hsl(152 65% 46% / .35); background: hsl(152 65% 46% / .1); color: hsl(152 60% 62%); }
.chip.rose { border-color: hsl(350 80% 64% / .35); background: hsl(350 80% 64% / .1); color: hsl(350 85% 74%); }
.chip.amber { border-color: hsl(38 92% 56% / .35); background: hsl(38 92% 56% / .1); color: hsl(38 95% 66%); }
.chip.mono { font-family: var(--mono); font-weight: 500; }
.icon { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: hsl(221 90% 64% / .12); border: 1px solid hsl(221 90% 64% / .25); color: var(--cobalt-soft); }
.icon svg { width: 26px; height: 26px; }
.icon.gold { background: hsl(32 95% 62% / .1); border-color: hsl(32 95% 62% / .28); color: var(--gold); }
.icon.green { background: hsl(152 65% 46% / .1); border-color: hsl(152 65% 46% / .28); color: hsl(152 60% 60%); }
.icon.rose { background: hsl(350 80% 64% / .1); border-color: hsl(350 80% 64% / .28); color: var(--rose); }
.icon.amber { background: hsl(38 92% 56% / .1); border-color: hsl(38 92% 56% / .28); color: var(--amber); }

/* ── Screenshot frames ─────────────────────────────────────────────────── */
.frame { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: hsl(230 22% 9%); border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -30px hsl(221 83% 53% / .38), 0 18px 40px -14px rgba(0,0,0,.6); }
.frame .bar { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; background: hsl(230 20% 13%); border-bottom: 1px solid var(--line); }
.frame .bar i { width: 12px; height: 12px; border-radius: 50%; background: hsl(230 12% 30%); }
.frame .bar span { margin-left: 16px; padding: 5px 14px; border-radius: 8px; background: hsl(230 22% 9%); font: 400 14px/1 var(--mono); color: var(--ink-3); }
.frame img { width: 100%; height: auto; }
.frame.fit { width: fit-content; margin-inline: auto; }
.frame.fit img { width: auto; height: var(--h, 640px); }
.frame.flat { box-shadow: 0 24px 60px -30px rgba(0,0,0,.7); }
.frame.plain .bar { display: none; }
.shot { position: relative; }
.zoomable { cursor: zoom-in; }
.cap { margin-top: 14px; font: 400 15px/1.4 var(--sans); color: var(--ink-3); }

.phone { position: relative; width: 330px; flex: none; padding: 11px; border-radius: 50px; background: linear-gradient(160deg, hsl(230 14% 22%), hsl(230 18% 10%)); border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -30px hsl(221 83% 53% / .4), 0 20px 40px -18px rgba(0,0,0,.7); }
/* Status-bar strip in the app header's colour keeps the content clear of the rounded corners. */
.phone img { border-radius: 40px; width: 100%; padding-top: 30px; background: hsl(227 20% 13%); }

/* Numbered hotspots over a screenshot, keyed to a list beside it. */
.pin { position: absolute; left: var(--x); top: var(--y); width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cobalt-deep); color: #fff; font: 700 19px/1 var(--sans); box-shadow: 0 0 0 6px hsl(221 83% 53% / .28), 0 8px 18px rgba(0,0,0,.5); z-index: 3; }
.is-active .pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid hsl(221 90% 64% / .7); animation: ping 2.4s var(--ease) infinite; animation-delay: calc(var(--i, 0) * 200ms + 1s); }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
.keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.keys li { display: grid; grid-template-columns: 42px 1fr; gap: 20px; align-items: start; }
.keys .k { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: hsl(221 83% 53% / .16); border: 1px solid hsl(221 90% 64% / .45); color: var(--cobalt-soft); font: 700 18px/1 var(--sans); }
.keys h4 { margin: 4px 0 6px; font: 650 23px/1.25 var(--sans); color: var(--ink); }
.keys p { margin: 0; font: 400 18.5px/1.5 var(--sans); color: var(--ink-3); }

/* ── Cover ─────────────────────────────────────────────────────────────── */
.cover-glow { position: absolute; inset: 0; background:
  radial-gradient(900px 620px at 78% 42%, hsl(221 83% 53% / .28), transparent 65%),
  radial-gradient(700px 500px at 96% 96%, hsl(32 95% 62% / .10), transparent 60%); pointer-events: none; }
.brand { display: flex; align-items: center; gap: 18px; font: 700 34px/1 var(--display); letter-spacing: -.02em; }
.brand img { width: 58px; height: 58px; }
.stack { position: absolute; right: 64px; top: 170px; width: 1000px; height: 780px; }
.stack .frame { position: absolute; }
.stack .back { right: 0; top: 0; width: 860px; }
.stack .front { left: 100px; top: 400px; width: 640px; }
.on-cover .chrome.top .tag { opacity: 0; pointer-events: none; }
.chrome.top .tag { transition: opacity .3s var(--ease); }
.trust { display: flex; gap: 30px; font: 500 18px/1 var(--sans); color: var(--ink-3); }
.trust span { display: inline-flex; align-items: center; gap: 10px; }
.trust span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px hsl(152 65% 46% / .18); }

/* ── Question → answer cards (slide 2) ─────────────────────────────── */
.qgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card.qa { padding: 0; overflow: hidden; display: flex; flex-direction: column; text-align: left; cursor: pointer; font: inherit; color: inherit;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.card.qa:hover, .card.qa:focus-visible { border-color: hsl(221 90% 64% / .6); transform: translateY(-3px); box-shadow: 0 22px 44px -22px hsl(221 83% 53% / .5); outline: none; }
.card.qa.money:hover, .card.qa.money:focus-visible { border-color: hsl(32 95% 62% / .55); box-shadow: 0 22px 44px -22px hsl(32 95% 62% / .35); }
.qshot { position: relative; height: 190px; overflow: hidden; background: hsl(230 22% 9%); border-bottom: 1px solid var(--line); }
.qshot img { position: absolute; left: var(--x); top: var(--y); width: var(--w); max-width: none; height: auto; }
.qshot::after { content: ""; position: absolute; inset: auto 0 0; height: 56px; background: linear-gradient(transparent, hsl(230 20% 12%)); }
.qbody { display: flex; flex-direction: column; gap: 8px; padding: 18px 26px 24px; }
.qa .n { font: 500 15px/1 var(--mono); color: var(--ink-3); }
.qa .qt { font: 650 31px/1.12 var(--display); letter-spacing: -.02em; color: var(--ink); }
.qa .ans { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 600 17px/1.3 var(--sans); color: var(--cobalt-soft); }
.qa.money .ans { color: hsl(32 95% 70%); }
.qa .ans svg { transition: transform .2s var(--ease); }
.qa:hover .ans svg { transform: translateX(3px); }

/* ── Questions grid ────────────────────────────────────────────────────── */
.q { position: relative; padding: 34px 34px 30px; display: flex; flex-direction: column; gap: 14px; min-height: 250px; }
.q .n { font: 500 17px/1 var(--mono); color: var(--ink-3); }
.q .qt { font: 650 36px/1.12 var(--display); letter-spacing: -.02em; color: var(--ink); }
.q .ans { margin-top: auto; display: flex; align-items: center; gap: 10px; font: 600 17px/1.3 var(--sans); color: var(--cobalt-soft); }
.q .ans::before { content: "→"; color: var(--ink-3); }
.q.money .ans { color: hsl(32 95% 70%); }

/* ── Diagrams ──────────────────────────────────────────────────────────── */
svg text { font-family: var(--sans); }
.node rect { fill: hsl(230 20% 13%); stroke: var(--line-2); stroke-width: 1.5; }
.node.hl rect { fill: hsl(221 60% 18%); stroke: hsl(221 90% 64% / .7); }
.node.gold rect { fill: hsl(32 50% 14%); stroke: hsl(32 95% 62% / .55); }
.node .t { fill: var(--ink); font-weight: 650; font-size: 22px; }
.node .s { fill: var(--ink-3); font-size: 16px; }
.node .m { fill: var(--ink-2); font-family: var(--mono); font-size: 15px; }
.wire { fill: none; stroke: hsl(221 90% 64% / .55); stroke-width: 2.2; }
.wire.gold { stroke: hsl(32 95% 62% / .6); }
.wire.dim { stroke: hsl(230 15% 34%); }

.pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.pipe .step { position: relative; padding: 30px 26px 28px; margin-right: 22px; }
.pipe .step:last-child { margin-right: 0; }
.pipe .step::after { content: ""; position: absolute; right: -22px; top: 50%; width: 22px; height: 2px; background: hsl(221 90% 64% / .5); }
.pipe .step:last-child::after { display: none; }
.pipe .sn { font: 500 15px/1 var(--mono); color: var(--cobalt); letter-spacing: .04em; }
.pipe h4 { margin: 14px 0 10px; font: 650 25px/1.2 var(--display); letter-spacing: -.015em; }
.pipe p { margin: 0; font: 400 17.5px/1.5 var(--sans); color: var(--ink-3); }
.formula { display: inline-block; margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: hsl(230 22% 9%); border: 1px solid var(--line); font: 400 15px/1.45 var(--mono); color: var(--ink-2); }

/* Days-of-cover scale */
.scale { position: relative; height: 96px; border-radius: 14px; display: grid; grid-template-columns: 7% 21% 42% 30%; overflow: hidden; border: 1px solid var(--line-2); }
.scale > div { display: flex; align-items: flex-end; padding: 14px 18px; font: 650 19px/1.2 var(--sans); }
.scale .z0 { background: hsl(350 80% 55% / .28); color: hsl(350 90% 80%); }
.scale .z1 { background: hsl(38 92% 50% / .22); color: hsl(38 95% 72%); }
.scale .z2 { background: hsl(152 65% 40% / .18); color: hsl(152 60% 70%); }
.scale .z3 { background: hsl(221 83% 53% / .2); color: var(--cobalt-soft); }
.ticks { position: relative; height: 40px; margin-top: 10px; font: 400 15px/1 var(--mono); color: var(--ink-3); }
.ticks span { position: absolute; transform: translateX(-50%); top: 8px; }

/* Status lifecycle */
.life { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.life .arrow { color: var(--ink-3); font: 400 24px/1 var(--sans); }

/* Timeline */
.tl { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 29px; height: 2px; background: linear-gradient(90deg, hsl(221 90% 64% / .7), hsl(32 95% 62% / .6)); }
.tl .t { position: relative; }
.tl .dot { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid hsl(221 90% 64% / .7); color: var(--cobalt-soft); font: 600 16px/1 var(--mono); position: relative; z-index: 1; }
.tl .when { margin-top: 22px; font: 600 15px/1.2 var(--mono); color: var(--cobalt); letter-spacing: .03em; text-transform: uppercase; }
.tl h4 { margin: 12px 0 10px; font: 650 30px/1.2 var(--display); letter-spacing: -.015em; }
.tl p { margin: 0; font: 400 19.5px/1.5 var(--sans); color: var(--ink-3); }
.tl .dot { width: 64px; height: 64px; }

/* Plans */
.plan { position: relative; display: flex; flex-direction: column; padding: 36px 36px 32px; }
.plan.hl { border-color: hsl(221 90% 64% / .55); background: linear-gradient(180deg, hsl(221 50% 16%), hsl(230 20% 11%)); box-shadow: 0 30px 70px -30px hsl(221 83% 53% / .45); }
.plan.premium { border-color: hsl(38 75% 45% / .5); background: linear-gradient(160deg, hsl(25 22% 13%) 0%, hsl(230 22% 12%) 60%, hsl(25 18% 11%) 100%);
  box-shadow: 0 0 0 1px hsl(38 85% 50% / .15), 0 30px 70px -30px hsl(38 85% 50% / .3); }
.plan.premium .pn { color: hsl(38 85% 62%); }
.plan.premium li::before { color: hsl(38 85% 55%); }
.plan.hl .pn { color: var(--cobalt-soft); }
.plan .badge { position: absolute; top: -15px; left: 36px; padding: 7px 14px; border-radius: 999px; background: var(--cobalt-deep); color: #fff; font: 700 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.plan .pn { font: 700 44px/1 var(--display); letter-spacing: -.025em; }
.plan .pt { margin: 12px 0 22px; font: 400 18px/1.45 var(--sans); color: var(--ink-3); min-height: 52px; }
.plan ul { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 13px; }
.plan li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font: 400 18px/1.4 var(--sans); color: var(--ink-2); }
.plan li::before { content: "✓"; color: var(--green); font-weight: 700; }

/* Emails */
.mail { overflow: hidden; border-radius: 14px; border: 1px solid var(--line-2); background: #f4f4f5; }
.mail img { width: 100%; height: 232px; object-fit: cover; object-position: top; }
.mail-cap { margin-top: 14px; }
.mail-cap h4 { margin: 0 0 5px; font: 650 21px/1.25 var(--sans); }
.mail-cap p { margin: 0; font: 400 16.5px/1.45 var(--sans); color: var(--ink-3); }

/* CTA */
.cta { display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 30px; border-radius: 12px; font: 650 22px/1 var(--sans); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.cta.primary { background: var(--cobalt-deep); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 34px hsl(221 83% 53% / .35); }
.cta.ghost { border: 1px solid var(--line-2); color: var(--ink); background: hsl(230 20% 12% / .6); }
.cta:hover { transform: translateY(-2px); }
.url { font: 500 22px/1 var(--mono); color: var(--ink-2); }

/* ── Chrome (outside the scaled stage) ─────────────────────────────────── */
.chrome { position: fixed; z-index: 20; display: flex; align-items: center; gap: 10px; transition: opacity .3s; }
.chrome.top { top: 16px; left: 20px; right: 20px; justify-content: space-between; pointer-events: none; }
.chrome.top > * { pointer-events: auto; }
.chrome.bottom { bottom: 16px; left: 50%; transform: translateX(-50%); padding: 6px; border-radius: 16px; background: hsl(230 22% 10% / .82); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.idle .chrome { opacity: 0; }
.idle .chrome:hover, .idle .chrome:focus-within { opacity: 1; }
.cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 40px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; text-decoration: none; font: 600 14px/1 var(--sans); }
.cbtn:hover { background: var(--surface-2); color: var(--ink); }
.cbtn:focus-visible, .cta:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.cbtn svg { width: 19px; height: 19px; }
.cbtn:disabled { opacity: .35; cursor: default; background: transparent; }
.counter { font: 500 14px/1 var(--mono); color: var(--ink-3); padding: 0 10px; min-width: 76px; text-align: center; }
.sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
.tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 12px; background: hsl(230 22% 10% / .7); border: 1px solid var(--line); backdrop-filter: blur(10px); font: 600 14px/1 var(--sans); color: var(--ink-2); text-decoration: none; }
.tag img { width: 24px; height: 24px; }
.tag .ch { color: var(--ink-3); font-weight: 500; }
.demo-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--cobalt-deep); color: #fff; text-decoration: none; font: 650 14px/1 var(--sans); box-shadow: 0 8px 24px hsl(221 83% 53% / .35); }
.progress { position: fixed; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--cobalt-deep), var(--teal)); z-index: 30; transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s var(--ease); }

/* Overview — one row per chapter, live thumbnails of every slide */
.overview { position: fixed; inset: 0; z-index: 40; overflow: auto; background: hsl(230 24% 5% / .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s .25s; }
.overview.open { opacity: 1; visibility: visible; transition: opacity .25s var(--ease); }
.ov-panel { max-width: 1680px; margin: 0 auto; padding: 28px clamp(20px, 3.5vw, 56px) 36px; }
.ov-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 6px 0 18px; margin-bottom: 4px;
  background: linear-gradient(hsl(230 24% 5% / .96) 70%, transparent); }
.ov-head h2 { margin: 0; font: 700 30px/1.1 var(--display); letter-spacing: -.02em; }
.ov-head .sub { margin: 8px 0 0; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.ov-head kbd { font: 500 11px/1 var(--mono); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); }
.ov-close { gap: 8px; padding: 0 14px; border: 1px solid var(--line-2); }
.ov-close span { font-size: 14px; }
.ov-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; align-items: start; padding: 18px 0 12px; border-top: 1px solid var(--line); }
.ov-row:first-child { border-top: 0; }
.ov-ch { position: sticky; top: 90px; padding-top: 4px; }
.ov-ch .nm { font: 700 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); }
.ov-ch .rg { margin-top: 6px; font: 500 12.5px/1 var(--mono); color: var(--ink-3); }
.ov-ch.money .nm { color: var(--gold); }
.ov-items { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.ov-item { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-self: start; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 12px; outline: none;
  opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); transition-delay: calc(var(--k, 0) * 14ms); }
.overview.open .ov-item { opacity: 1; transform: none; }
.ov-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--line-2);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.ov-thumb .mini { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; transform: scale(var(--s, .1)); pointer-events: none;
  background: radial-gradient(1200px 700px at 12% -10%, hsl(221 83% 53% / .10), transparent 60%), var(--bg); }
.ov-thumb .mini .slide { opacity: 1; visibility: visible; transform: none; transition: none; }
.ov-thumb .mini [data-a] { opacity: 1; transform: none; transition: none; }
.ov-thumb .mini .draw { stroke-dashoffset: 0; transition: none; }
.ov-thumb .mini .pin::after, .ov-thumb .mini .flowdash { animation: none; }
.ov-cap { display: flex; gap: 8px; align-items: baseline; margin-top: 9px; padding: 0 2px; min-height: 2.6em; }
.ov-cap .n { flex: none; font: 500 12px/1.3 var(--mono); color: var(--ink-3); }
.ov-cap .tt { font: 600 14.5px/1.3 var(--sans); color: var(--ink-2); transition: color .2s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ov-item:hover .ov-thumb, .ov-item:focus-visible .ov-thumb { border-color: hsl(221 90% 64% / .7); transform: translateY(-2px); box-shadow: 0 14px 30px -14px hsl(221 83% 53% / .55); }
.ov-item:hover .tt, .ov-item:focus-visible .tt { color: var(--ink); }
.ov-item:focus-visible .ov-thumb { box-shadow: 0 0 0 2px var(--cobalt), 0 14px 30px -14px hsl(221 83% 53% / .55); }
.ov-item.current .ov-thumb { border-color: var(--cobalt); box-shadow: 0 0 0 2px hsl(221 90% 64% / .45); }
.ov-item.current .tt { color: var(--ink); }
.ov-item .here { position: absolute; top: 7px; left: 7px; z-index: 1; padding: 4px 8px; border-radius: 999px; background: var(--cobalt-deep); color: #fff;
  font: 700 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; display: none; }
.ov-item.current .here { display: block; }
@media (max-width: 1100px) { .ov-items { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ov-row { grid-template-columns: 1fr; gap: 12px; }
  .ov-ch { position: static; }
  .ov-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ov-head .kb-hint { display: none; }
  .ov-close span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ov-item { opacity: 1; transform: none; transition: none; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 3vh 3vw; background: hsl(230 24% 4% / .92); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; cursor: zoom-out; }
.lightbox.open { opacity: 1; visibility: visible; transition: opacity .2s; }
.lightbox img { max-width: 94vw; max-height: 90vh; width: auto; height: auto; border-radius: 12px; border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox .lb-cap { position: fixed; bottom: 18px; left: 0; right: 0; text-align: center; color: var(--ink-3); font-size: 14px; }

.hint { position: fixed; left: 50%; top: 28px; transform: translateX(-50%); z-index: 25; padding: 10px 16px; border-radius: 12px; background: hsl(230 22% 12% / .92); border: 1px solid var(--line); color: var(--ink-2); font: 500 14px/1.3 var(--sans); opacity: 0; transition: opacity .4s; pointer-events: none; white-space: nowrap; }
.hint.show { opacity: 1; }
.hint kbd { font: 500 12px/1 var(--mono); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .slide, [data-a], .draw { transition: none !important; }
  [data-a] { opacity: 1; transform: none; }
  .draw { stroke-dashoffset: 0; }
  .flowdash, .is-active .pin::after { animation: none !important; }
}


/* ── Print / PDF: every slide at native size, in its final state ───────── */
@page { size: 1920px 1080px; margin: 0; }
body.print { overflow: visible; background: var(--bg); }
body.print .deck { position: static; overflow: visible; }
body.print .stage { position: static; transform: none !important; width: 1920px; height: auto; }
body.print .slide { position: relative; width: 1920px; height: 1080px; opacity: 1; visibility: visible; transform: none; transition: none; break-after: page; page-break-after: always; overflow: hidden; background:
  radial-gradient(1200px 700px at 12% -10%, hsl(221 83% 53% / .10), transparent 60%), var(--bg); }
body.print .slide:last-child { break-after: auto; page-break-after: auto; }
body.print [data-a] { opacity: 1; transform: none; transition: none; }
body.print .draw { stroke-dashoffset: 0; transition: none; }
body.print .chrome, body.print .progress, body.print .hint, body.print .pin::after { display: none !important; }
body.print .flowdash { animation: none; }

/* Reconciliation view switcher (slide "Five views") */
.views { display: grid; grid-template-columns: 500px 1fr; gap: 48px; align-items: start; }
.vlist { display: flex; flex-direction: column; gap: 10px; }
.vbtn { position: relative; text-align: left; padding: 15px 22px 15px 24px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .25s var(--ease), background .25s var(--ease); overflow: hidden; }
.vbtn h4 { margin: 0; font: 650 22px/1.25 var(--sans); color: var(--ink-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vbtn h4 .c { font: 500 15px/1 var(--mono); color: var(--ink-3); }
.vbtn .d { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s var(--ease), opacity .3s; }
.vbtn .d > p { overflow: hidden; margin: 0; padding-top: 8px; font: 400 17.5px/1.5 var(--sans); color: var(--ink-3); }
.vbtn.on { border-color: hsl(32 95% 62% / .5); background: linear-gradient(180deg, hsl(32 40% 14%), hsl(230 20% 12%)); }
.vbtn.on h4 { color: var(--ink); }
.vbtn.on .d { grid-template-rows: 1fr; opacity: 1; }
.vbtn .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
.vbtn.on .bar { animation: vfill var(--dur, 5s) linear forwards; }
.views.paused .vbtn.on .bar { animation: none; transform: scaleX(0); }
@keyframes vfill { to { transform: scaleX(1); } }
.vstage { position: relative; }
.vstage img { transition: opacity .35s var(--ease); }
body.print .vbtn .d { grid-template-rows: 1fr; opacity: 1; }
body.print .vbtn .bar { display: none; }

/* Landscape phones: the stage fills the height, so keep the controls small. */
@media (max-height: 520px) {
  .chrome.top { top: 8px; left: 10px; right: 10px; }
  .chrome.top .tag, .hint { display: none; }
  .demo-pill { margin-left: auto; height: 30px; padding: 0 12px; font-size: 12px; }
  .chrome.bottom { bottom: 6px; padding: 3px; border-radius: 12px; }
  .cbtn { height: 30px; min-width: 30px; padding: 0 8px; }
  .cbtn svg { width: 16px; height: 16px; }
  .counter { font-size: 12px; min-width: 56px; }
}

/* ── Portrait phones: a 16:9 deck is unreadable there, so offer the PDF, the
   live demo and a rotate prompt instead. Landscape phones get the deck. ───── */
.gate { display: none; }
body.gated { overflow: auto; }
body.gated .deck, body.gated .chrome, body.gated .progress, body.gated .hint, body.gated .overview, body.gated .lightbox { display: none; }
body.gated .gate { position: relative; isolation: isolate; min-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 28px;
  padding: max(40px, env(safe-area-inset-top)) 22px max(36px, env(safe-area-inset-bottom)); overflow: hidden; }
.gate::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90vw 50vh at 80% 18%, hsl(221 83% 53% / .28), transparent 70%), radial-gradient(70vw 40vh at 0% 100%, hsl(32 95% 62% / .08), transparent 70%); }
.gate .brand { gap: 12px; font-size: 20px; }
.gate .brand img { width: 34px; height: 34px; }
.gate h1 { margin: 0; font: 700 40px/1.04 var(--display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.gate .lede { margin: 14px 0 0; font-size: 17px; }
.gate .frame { border-radius: 12px; }
.gate .frame img { display: block; width: 100%; }
.gate .rotate { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line-2); font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
.gate .rotate svg { flex: none; width: 30px; height: 30px; color: var(--cobalt-soft); }
.gate .acts { display: grid; gap: 12px; }
.gate .cta { width: 100%; height: 54px; justify-content: center; font-size: 17px; font-family: var(--sans); cursor: pointer; }
.gate .cta small { font: 400 13px/1 var(--mono); opacity: .75; }
.gate .foot { margin: 0; font: 400 13.5px/1.5 var(--sans); color: var(--ink-3); text-align: center; }