/* ============================================================
   deck.css — the web sales deck.

   ONE IDEA RUNS THE WHOLE FILE: .frame is a hard 16:9 box with
   container-type:size, and every measurement inside it is written in cqw
   (1cqw = 1% of the frame's width). The deck is laid out once against a
   notional 1920x1080 canvas and the browser rescales it bodily. That is why
   there are no breakpoints below — a slide cannot reflow differently on
   Chandler's laptop than on a prospect's phone, it only gets smaller. Add a
   px value inside .frame and you break that guarantee; use cqw.

   Tokens come from assets/tokens.css and are never redefined here (the site
   build fails on redefinition and the deck holds the same line). Motion uses
   the house curve and the two house durations, and stays inside BRAND-KIT §8:
   no count-ups, no preloader, no char-by-char reveals.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;
  corner-shape:var(--corner,squircle)}

html,body{height:100%}
body{
  background:var(--black);
  color:var(--ink);
  font-family:var(--body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
ol,ul{list-style:none}
.ico{width:1em;height:1em;fill:none;stroke:currentColor}
.ico--flip{transform:rotate(180deg)}

/* ============================== stage ============================== */

.stage{position:fixed;inset:0;display:grid;place-items:center;background:var(--black)}

.frame{
  position:relative;
  width:min(100vw, calc(100vh * 16 / 9));
  height:min(100vh, calc(100vw * 9 / 16));
  container-type:size;
  container-name:frame;
  overflow:hidden;
  background:var(--stage);
  isolation:isolate;
}

/* one slide visible at a time; the rest stay in the DOM so the overview can
   read their titles and so a jump never has to build anything */
.slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:5.4cqw 6.2cqw;
  opacity:0;visibility:hidden;
  transform:translateY(1.1cqw);
  transition:opacity var(--dur-enter) var(--ease),
             transform var(--dur-enter) var(--ease-out),
             visibility 0s linear var(--dur-enter);
}
.slide.is-live{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* deep-linking straight to slide 12 should not cross-fade from the title card
   the markup ships live; the first render happens with motion switched off */
body.is-booting .slide{transition:none}

/* the mark, riding the frame */
.bug{position:absolute;left:2.6cqw;bottom:2.4cqw;width:3.4cqw;height:auto;z-index:4;
  opacity:.95;transition:opacity var(--dur-state) var(--ease)}
.frame[data-bug="off"] .bug{opacity:0}

/* ========================= type primitives ========================= */

/* the deck's core move, straight from Chandler's original: a white line that
   asks, a yellow line that answers */
.stmt{
  font-family:var(--display);font-weight:700;
  font-size:3.9cqw;line-height:1.06;letter-spacing:-.028em;
  display:flex;flex-direction:column;
}
.stmt--sm{font-size:3.1cqw}
.stmt .y{color:var(--yellow)}
/* text-decoration, not border-bottom: at 3.9cqw the inline content box runs far
   below the baseline, so a border sits in the NEXT line and reads as an
   underline on the wrong words. text-underline-offset is baseline-relative. */
.stmt em{font-style:normal;text-decoration:underline;
  text-decoration-thickness:.15cqw;text-underline-offset:.22cqw}
.stmt--run{display:block;max-width:44cqw}
.stmt--solo{margin-top:.2cqw}

.slide--stmt{justify-content:center;padding-bottom:9cqw}
.slide--mid .stmt{max-width:52cqw}

.stmt__foot{margin-top:3.6cqw;font-size:1.45cqw;line-height:1.55;color:var(--ink-3);max-width:38cqw}
.stmt__foot .ink{color:var(--ink-2)}

.slide__foot{margin-top:auto;padding-top:2.4cqw;font-size:1.35cqw;line-height:1.5;color:var(--ink-2);max-width:72cqw}
.slide__foot .y{color:var(--yellow);font-weight:600}
.slide__foot em{font-style:normal;border-bottom:.14cqw solid var(--ink-3);padding-bottom:.06cqw}

.step__no{font-family:var(--display);font-weight:700;font-size:3.1cqw;line-height:1;color:var(--ink)}

.chip{display:inline-block;font-size:1.05cqw;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue-tint);
  border:.1cqw solid rgba(70,166,255,.42);border-radius:.6cqw;
  padding:.42cqw .85cqw;background:rgba(29,136,254,.1)}

/* every open question in the source deck is shown, never quietly resolved */
.tk{display:inline-block;margin-left:.7cqw;font-size:1.05cqw;font-weight:600;
  letter-spacing:.02em;color:var(--red-tint);
  border:.1cqw dashed rgba(214,120,101,.55);border-radius:.55cqw;
  padding:.28cqw .7cqw;vertical-align:middle}

/* ============================= 1 · title ============================= */

.slide--title{padding:0;justify-content:center}
.title__art{position:absolute;inset:0;z-index:0}
.title__art img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
/* scrim law (BRAND-KIT §6): directional, so the right of the frame keeps full
   value and only the type side is carried down to black */
.title__art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#000 0%,#000 34%,rgba(0,0,0,.82) 48%,rgba(0,0,0,.15) 78%,transparent 100%)}
.title__body{position:relative;z-index:1;padding:0 6.2cqw;max-width:62cqw}
.title__logo{width:26cqw;height:auto}
.title__url{margin-top:1.5cqw;font-family:var(--display);font-weight:700;
  font-size:2.5cqw;line-height:1;color:var(--yellow)}
.title__tag{margin-top:1.5cqw;font-size:1.5cqw;line-height:1.5;color:var(--ink-2);max-width:33cqw}

/* ====================== full-bleed chapter breaks ====================== */

.slide--full{padding:0;justify-content:flex-end}
.full__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.slide--full::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(15deg,#000 0%,rgba(0,0,0,.72) 26%,rgba(0,0,0,.05) 52%,transparent 68%)}
.full__cap{position:relative;z-index:2;padding:0 6.2cqw 6cqw 6.2cqw}
.full__line{margin-top:1.2cqw;font-family:var(--display);font-weight:700;
  font-size:2.6cqw;line-height:1.12;letter-spacing:-.02em;max-width:52cqw}

/* ============================ 8 · aligned ============================ */

.bigrow{margin-top:4cqw;display:flex;flex-direction:column;gap:1.5cqw}
.bigrow li{display:flex;align-items:baseline;gap:1.6cqw;
  font-size:2.2cqw;line-height:1.25;color:var(--ink)}
.bigrow__n{font-family:var(--display);font-weight:700;font-size:1.5cqw;
  color:var(--ink-3);min-width:3cqw}

/* ============================= 10 · model ============================= */

.model{margin-top:3.4cqw;display:grid;grid-template-columns:1fr 1fr;gap:5cqw;align-items:center}
.model__cards{display:flex;flex-direction:column;gap:1.8cqw}
.mcard{border:.11cqw solid var(--line);border-radius:1.1cqw;padding:1.8cqw 2cqw;background:var(--surface-1)}
.mcard--old{border-color:rgba(200,75,50,.55)}
.mcard--new{border-color:rgba(29,136,254,.6);background:linear-gradient(180deg,var(--surface-2),rgba(22,104,196,.16))}
.mcard__t{font-family:var(--display);font-weight:700;font-size:1.8cqw;line-height:1}
.mcard__b{margin-top:.85cqw;font-size:1.3cqw;line-height:1.5;color:var(--ink-2)}

.loop{position:relative}
.loop__svg{width:100%;height:auto}
.loop__stations{position:absolute;inset:0}
.loop__st{position:absolute;font-size:1.3cqw;font-weight:600;color:var(--ink);white-space:nowrap}
.loop__st--tl{left:2%;top:6%}
.loop__st--tr{right:2%;top:6%}
.loop__st--bl{left:2%;bottom:6%}
.loop__st--br{right:2%;bottom:6%}

/* ============================ 12 · roadmap ============================ */

/* takes the leftover height and centres its rows in it, so the block sits on
   the slide's optical centre rather than hugging the headline with a void
   underneath. Same move as .plates and .chan. */
.road{flex:1;min-height:0;justify-content:center;
  margin-top:3.6cqw;display:flex;flex-direction:column}
.road__s{display:grid;grid-template-columns:2.6cqw 3.4cqw 15cqw 1fr;align-items:center;
  gap:1.4cqw;padding:1.5cqw 0;border-top:.09cqw solid var(--line-soft)}
.road__s:last-child{border-bottom:.09cqw solid var(--line-soft)}
.road__dot{width:1.15cqw;height:1.15cqw;border-radius:50%;--corner:round}
.road__dot--red{background:var(--red-lit);box-shadow:0 0 1.6cqw rgba(255,96,64,.5)}
.road__dot--yellow{background:var(--yellow-lit);box-shadow:0 0 1.6cqw rgba(255,214,72,.45)}
.road__dot--blue{background:var(--blue-lit);box-shadow:0 0 1.6cqw rgba(70,166,255,.5)}
.road__dot--white{background:var(--white);box-shadow:0 0 1.6cqw rgba(255,255,255,.4)}
.road__n{font-family:var(--display);font-weight:700;font-size:1.4cqw;color:var(--ink-3)}
.road__k{font-family:var(--display);font-weight:700;font-size:2cqw;line-height:1}
.road__v{font-size:1.3cqw;color:var(--ink-2)}

/* ===================== numbered index rows (§7 detail) ===================== */

.idx{flex:1;min-height:0;justify-content:center;
  margin-top:3.2cqw;display:flex;flex-direction:column}
.idx li{display:grid;grid-template-columns:3.4cqw 20cqw 1fr;align-items:baseline;gap:1.4cqw;
  padding:1.35cqw 0;border-top:.09cqw solid var(--line-soft)}
.idx li:last-child{border-bottom:.09cqw solid var(--line-soft)}
.idx--tight li{grid-template-columns:3.4cqw 1fr;padding:1.15cqw 0}
.idx__n{font-family:var(--display);font-weight:700;font-size:1.4cqw;color:var(--ink-3)}
.idx__k{font-family:var(--display);font-weight:700;font-size:1.95cqw;line-height:1.1}
.idx__v{font-size:1.3cqw;line-height:1.45;color:var(--ink-2)}

/* ============================= 14 · plates ============================= */

/* the grid takes the leftover height and centres its single row in it, so the
   plates sit on the slide's optical centre instead of hugging the headline */
.plates{flex:1;min-height:0;align-content:center;
  margin-top:3.2cqw;display:grid;grid-template-columns:repeat(5,1fr);gap:1.5cqw}
/* framed plate, DESIGN-SYSTEM §4 — a real frame with a real inset, never a
   bare image dropped on the stage */
.plate{border:.09cqw solid var(--line);border-radius:.9cqw;overflow:hidden;background:var(--surface-1)}
.plate img{width:100%;aspect-ratio:16/9;object-fit:cover}
.plate__cap{padding:.85cqw 1cqw 1cqw;font-size:1.05cqw;line-height:1.35;color:var(--ink-2)}

/* ============================ 15 · channels ============================ */

.chan{flex:1;min-height:0;align-content:center;
  margin-top:3.2cqw;display:grid;grid-template-columns:1fr 1fr;gap:5cqw;max-width:78cqw}
.chan__h{display:flex;align-items:center;gap:.9cqw;font-size:1.35cqw;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  padding-bottom:1.2cqw;border-bottom:.09cqw solid var(--line)}
.chan__dot{width:.95cqw;height:.95cqw;border-radius:50%;--corner:round}
.chan__dot--blue{background:var(--blue-lit);box-shadow:0 0 1.4cqw rgba(70,166,255,.5)}
.chan__dot--red{background:var(--red-lit);box-shadow:0 0 1.4cqw rgba(255,96,64,.5)}
.chan__list{margin-top:1.5cqw;display:grid;grid-template-columns:1fr 1fr;gap:1.05cqw 1.6cqw}
.chan__list li{font-size:1.7cqw;color:var(--ink-2)}

/* =========================== 16 · attribution =========================== */

.chain{margin-top:3.4cqw;display:flex;flex-direction:column}
.chain__s{position:relative;display:grid;grid-template-columns:3.4cqw 1fr;align-items:center;
  gap:1.4cqw;padding:1.15cqw 0;border-top:.09cqw solid var(--line-soft)}
.chain__s:last-child{border-bottom:.09cqw solid var(--line-soft)}
.chain__n{font-family:var(--display);font-weight:700;font-size:1.3cqw;color:var(--ink-3)}
.chain__k{font-size:1.75cqw;color:var(--ink-2)}
/* the two moments that matter get the light; the rest are the path */
.chain__s--lit .chain__k,.chain__s--end .chain__k{color:var(--ink);font-weight:600}
.chain__s--lit .chain__n{color:var(--blue-lit)}
.chain__s--end .chain__n{color:var(--yellow-lit)}

/* ============================ 19 · logo wall ============================ */

.wall{margin-top:2.8cqw;display:grid;grid-template-columns:repeat(9,1fr);
  gap:1.5cqw 2cqw;align-items:center;
  border:.09cqw solid var(--line-soft);border-radius:1.1cqw;
  padding:2cqw 2.2cqw;background:var(--surface-1)}
.wall img{width:100%;height:auto;opacity:.9}

.awards{margin-top:auto;padding-top:2cqw;display:flex;gap:2cqw;align-items:center}
.awards__k{font-size:1.05cqw;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);max-width:7cqw;line-height:1.35}
.awards img{height:6.4cqw;width:auto;opacity:.95}

/* ============================= 20 · numbers ============================= */

.bands{margin-top:3cqw;display:grid;grid-template-columns:1fr 1fr;gap:4.5cqw}
.band__h{display:flex;align-items:center;gap:.9cqw;font-family:var(--display);font-weight:700;
  font-size:1.75cqw;padding-bottom:1.1cqw;border-bottom:.09cqw solid var(--line)}
.band__dot{width:.95cqw;height:.95cqw;border-radius:50%;--corner:round}
.band__dot--red{background:var(--red-lit);box-shadow:0 0 1.4cqw rgba(255,96,64,.5)}
.band__dot--blue{background:var(--blue-lit);box-shadow:0 0 1.4cqw rgba(70,166,255,.5)}
.band__what{margin-left:auto;font-family:var(--body);font-weight:400;
  font-size:1.15cqw;color:var(--ink-3)}
.band__list li{display:grid;grid-template-columns:9.5cqw 1fr;column-gap:1.4cqw;
  padding:1.15cqw 0;border-bottom:.09cqw solid var(--line-soft)}
.fig{grid-row:span 2;align-self:center;font-family:var(--display);font-weight:700;
  font-size:2.4cqw;line-height:1;letter-spacing:-.02em}
.fig__l{font-size:1.25cqw;line-height:1.35;color:var(--ink-2)}
.fig__s{margin-top:.3cqw;font-size:.95cqw;line-height:1.35;color:var(--ink-3)}

/* ============================= 21 · quotes ============================= */

/* A hard 2x2 that FILLS the leftover height rather than stacking to whatever
   height the copy wants. The MediQuant quote is the longest approved one in
   TESTIMONIALS.md and used to span both columns, which forced a third row and
   pushed Docusign off the bottom of the frame. Equal cells, no spanning: the
   long quote just runs deeper inside its own cell. */
.quotes{flex:1;min-height:0;margin-top:2.4cqw;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1.5cqw}
.q{border:.09cqw solid var(--line-soft);border-radius:1.1cqw;padding:1.6cqw;
  background:var(--surface-1);display:flex;flex-direction:column;min-height:0}
.q__t{font-size:1.16cqw;line-height:1.5;color:var(--ink-2)}
.q__by{margin-top:auto;padding-top:1.2cqw;display:flex;align-items:center;gap:1cqw}
.q__by img{width:3.1cqw;height:3.1cqw;border-radius:50%;--corner:round;object-fit:cover}
.q__by span{display:flex;flex-direction:column;font-size:1.05cqw;color:var(--ink-3);line-height:1.35}
.q__by b{font-family:var(--display);font-weight:700;font-size:1.3cqw;color:var(--ink)}

/* ============================ 22 · variables ============================ */

.vars{margin-top:2.6cqw;display:grid;grid-template-columns:1fr 1.05fr;gap:4.5cqw;align-items:start}
.calc{border:.09cqw solid var(--line);border-radius:1.2cqw;padding:2cqw 2.2cqw;background:var(--surface-1)}
.calc__eye{font-size:1.05cqw;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.calc__row{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  column-gap:1.4cqw;margin-top:1.9cqw}
.calc__k{font-size:1.1cqw;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.calc__v{font-family:var(--display);font-weight:700;font-size:2.3cqw;line-height:1;text-align:right}
.calc__v i{font-style:normal;font-family:var(--body);font-weight:600;
  font-size:.95cqw;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-left:.4cqw}
.calc__ends{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:.5cqw}
.calc__ends i{font-style:normal;font-size:.9cqw;color:var(--ink-3);letter-spacing:.04em}
.calc__total{margin-top:2.2cqw;padding-top:1.5cqw;border-top:.09cqw dashed var(--line);
  display:flex;justify-content:space-between;align-items:baseline}
.calc__total span{font-size:1.1cqw;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.calc__total b{font-family:var(--display);font-weight:700;font-size:2.5cqw;line-height:1;color:var(--yellow)}
.calc__note{margin-top:1.1cqw;font-size:1.05cqw;line-height:1.45;color:var(--ink-2);min-height:3cqw}

/* range input, restyled to the token set */
.calc input[type=range]{grid-column:1/-1;-webkit-appearance:none;appearance:none;
  width:100%;height:.5cqw;margin-top:1.1cqw;border-radius:1cqw;--corner:round;
  background:var(--gray);cursor:pointer}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--blue-lit);border:0;
  box-shadow:0 0 1.6cqw rgba(70,166,255,.55);transition:transform var(--dur-state) var(--ease)}
.calc input[type=range]::-moz-range-thumb{width:1.5cqw;height:1.5cqw;border-radius:50%;
  background:var(--blue-lit);border:0;box-shadow:0 0 1.6cqw rgba(70,166,255,.55)}
.calc input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.calc input[type=range]:focus-visible{outline:.2cqw solid var(--blue-lit);outline-offset:.3cqw}

/* ============================== 23 · tiers ============================== */

.tiers{margin-top:2.8cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.tier{border:.09cqw solid var(--line);border-radius:1.1cqw;padding:1.9cqw;
  background:var(--surface-1);display:flex;flex-direction:column}
.tier--lead{border-color:rgba(225,200,50,.5);background:linear-gradient(180deg,var(--surface-2),rgba(225,200,50,.07))}
.tier__n{font-family:var(--display);font-weight:700;font-size:1.9cqw;line-height:1}
.tier__p{margin-top:.7cqw;font-family:var(--display);font-weight:700;font-size:2.5cqw;
  line-height:1;color:var(--yellow)}
.tier__l{margin-top:1.5cqw;display:flex;flex-direction:column;gap:.62cqw}
.tier__l li{font-size:1.2cqw;line-height:1.35;color:var(--ink-2);padding-left:1.1cqw;position:relative}
.tier__l li::before{content:"";position:absolute;left:0;top:.55cqw;
  width:.38cqw;height:.38cqw;border-radius:50%;--corner:round;background:var(--ink-3)}
.tier__f{margin-top:auto;padding-top:1.4cqw;font-size:.98cqw;line-height:1.4;color:var(--ink-3);font-style:italic}

/* ============================== 24 · tracks ============================== */

.tracks{margin-top:2.8cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.track{border:.09cqw solid var(--line);border-radius:1.1cqw;padding:1.9cqw;
  background:var(--surface-1);display:flex;flex-direction:column}
.track__n{font-family:var(--display);font-weight:700;font-size:1.85cqw;line-height:1}
.track__l{margin-top:1.4cqw;margin-bottom:1.9cqw;display:flex;flex-direction:column;gap:.6cqw}
.track__l li{font-size:1.2cqw;color:var(--ink-2)}
/* margin-top:auto pins every CTA to the bottom of its card, so the three line
   up across cards whose lists are different lengths (Media-centric has twice
   the rows of Engage). A second margin-top would quietly beat the auto. */
.track__cta{margin-top:auto;align-self:flex-start;
  display:inline-block;padding:.85cqw 1.6cqw;border-radius:.8cqw;
  background:var(--yellow);color:#000;font-weight:700;font-size:1.15cqw;
  text-decoration:none;transition:filter var(--dur-state) var(--ease)}
.track__cta:hover{filter:brightness(1.08)}
/* a dead link must look dead — it is waiting on Chandler, not broken */
.track__cta[data-tk-link]{background:transparent;color:var(--ink-3);
  border:.1cqw dashed var(--line);cursor:not-allowed}

/* ================================ 25 · end ================================ */

.slide--end{justify-content:center;align-items:center;text-align:center}
.end__t{font-family:var(--display);font-weight:700;font-size:5.4cqw;line-height:1;letter-spacing:-.03em}
.end__u{margin-top:1.6cqw;font-family:var(--display);font-weight:700;font-size:2.8cqw;
  line-height:1;color:var(--yellow)}

/* ================================ chrome ================================
   Pinned to the viewport so it sits in the letterbox margin, never on the
   slide. Auto-hides; any pointer movement brings it back. */

.chrome{position:fixed;top:0;left:0;right:0;z-index:20;pointer-events:none;
  opacity:0;transition:opacity var(--dur-state) var(--ease)}
body.is-awake .chrome{opacity:1}

/* the position line — same device as the site's scroll bar (site.css
   .nav__progress), which DESIGN-SYSTEM §6 names as the reference for
   gradient-as-an-edge. Always visible, even when the rest of the chrome sleeps. */
.progress{position:absolute;top:0;left:0;right:0;height:2px;opacity:1}
.chrome{opacity:1}
.chrome .chapters{opacity:0;transition:opacity var(--dur-state) var(--ease)}
body.is-awake .chrome .chapters{opacity:1;pointer-events:auto}
.progress__fill{height:100%;width:0;
  background-image:linear-gradient(90deg,var(--red),var(--yellow) 50%,var(--blue));
  background-size:100vw 100%;background-repeat:no-repeat;
  box-shadow:0 0 12px 1px rgba(255,255,255,.4);
  transition:width 260ms var(--ease)}

.chapters{display:flex;justify-content:center;gap:4px;padding:14px 16px 0}
.chap{position:relative;padding:7px 14px;border-radius:999px;--corner:round;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:rgba(10,10,10,.72);
  border:1px solid transparent;backdrop-filter:blur(8px);
  transition:color var(--dur-state) var(--ease),border-color var(--dur-state) var(--ease)}
.chap:hover{color:var(--ink)}
.chap.is-on{color:var(--ink);border-color:var(--line)}
.chap.is-on::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1.5px;
  border-radius:2px;background:linear-gradient(90deg,var(--red),var(--yellow) 50%,var(--blue))}

/* ================================= HUD ================================= */

.hud{position:fixed;right:18px;bottom:16px;z-index:20;display:flex;align-items:center;gap:2px;
  opacity:0;transition:opacity var(--dur-state) var(--ease)}
body.is-awake .hud{opacity:1}
.hud__b,.hud__c{height:34px;display:grid;place-items:center;border-radius:999px;--corner:round;
  background:rgba(10,10,10,.72);border:1px solid var(--line-soft);backdrop-filter:blur(8px);
  color:var(--ink-3);transition:color var(--dur-state) var(--ease),border-color var(--dur-state) var(--ease)}
.hud__b{width:34px;font-size:15px}
.hud__c{padding:0 13px;font-size:12px;font-weight:600;letter-spacing:.08em;gap:3px;display:flex}
.hud__c i{font-style:normal;color:var(--gray)}
.hud__b:hover,.hud__c:hover{color:var(--ink);border-color:var(--line)}
.hud__b:disabled{opacity:.32;cursor:default}
.hud__b:disabled:hover{color:var(--ink-3);border-color:var(--line-soft)}

/* =============================== overview ===============================
   Names, not thumbnails: at this size a typographic slide renders as a grey
   smear, and the thing Chandler is actually hunting for mid-call is the
   slide's name. */

.ov{position:fixed;inset:0;z-index:40;background:var(--scrim);backdrop-filter:blur(14px);
  display:flex;flex-direction:column;padding:28px clamp(20px,4vw,56px) 20px;
  animation:ovIn 200ms var(--ease-out)}
.ov[hidden]{display:none}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
.ov__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.ov__h{font-family:var(--display);font-weight:700;font-size:22px}
.ov__x{width:36px;height:36px;display:grid;place-items:center;border-radius:999px;--corner:round;
  border:1px solid var(--line-soft);color:var(--ink-3);font-size:16px}
.ov__x:hover{color:var(--ink);border-color:var(--line)}

.ov__grid{flex:1;overflow-y:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;align-content:start}
.ov__ch{grid-column:1/-1;margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
  padding-bottom:7px;border-bottom:1px solid var(--line-soft)}
.ov__ch:first-child{margin-top:0}
.ov__i{display:flex;align-items:baseline;gap:10px;text-align:left;padding:11px 13px;
  border-radius:10px;border:1px solid var(--line-soft);background:var(--surface-1);
  color:var(--ink-2);font-size:13.5px;line-height:1.35;
  transition:border-color var(--dur-state) var(--ease),color var(--dur-state) var(--ease),
             background var(--dur-state) var(--ease)}
.ov__i:hover{color:var(--ink);border-color:var(--line);background:var(--surface-2)}
.ov__i b{font-family:var(--display);font-weight:700;font-size:12px;color:var(--ink-3);min-width:20px}
.ov__i.is-on{color:var(--ink);border-color:var(--yellow);background:rgba(225,200,50,.08)}
.ov__i.is-on b{color:var(--yellow)}
.ov__keys{margin-top:16px;font-size:11.5px;letter-spacing:.05em;color:var(--ink-3);text-align:center}
.ov__keys b{display:inline-block;min-width:19px;padding:2px 5px;margin:0 1px;border-radius:4px;
  border:1px solid var(--line-soft);color:var(--ink-2);font-weight:600;font-size:10.5px;text-align:center}

/* ============================ portrait phones ============================
   A 16:9 frame inside a portrait phone is a postage stamp. Say so once,
   rather than shipping a deck nobody can read. */
.rotate{display:none}
@media (orientation:portrait) and (max-width:820px){
  .rotate{display:block;position:fixed;left:0;right:0;bottom:calc(50% - 40vw);
    z-index:30;text-align:center;font-size:13px;letter-spacing:.04em;color:var(--ink-3);
    padding:0 24px}
  .hud{bottom:calc(50% - 40vw - 52px)}
}

/* ============================== a11y / motion ============================== */

:where(button,a,input):focus-visible{outline:2px solid var(--blue-lit);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .slide{transition:opacity 1ms linear,visibility 0s linear 1ms;transform:none}
  .slide.is-live{transform:none}
  .progress__fill{transition:none}
  .ov{animation:none}
}

@media print{
  body{overflow:visible}
  .chrome,.hud,.ov,.rotate{display:none}
  .stage{position:static}
  .frame{width:100%;height:auto;aspect-ratio:16/9;page-break-after:always}
  .slide{position:relative;opacity:1;visibility:visible;transform:none;page-break-after:always}
}