/* ScaleTech — advertiser pitch deck.
 * Palette, type scale and card language are lifted from the marketing homepage
 * (public/home/home.css) so the deck reads as the same brand.
 *
 * This is a presentation, not a page: every slide is laid out on a fixed
 * 1280x720 stage which is then scaled to whatever window it is shown in. That
 * is why the sizes below are plain pixels with no vw/clamp anywhere — a vw unit
 * would measure the window instead of the stage and the layout would drift
 * between a laptop, a projector and the exported PDF. Design against 1280x720
 * and what you see is what every screen gets.
 *
 * Phones are the one exception: scaling a 1280px stage down to a 390px screen
 * makes it unreadable, so `.compact` drops the stage and lets each slide fill
 * the screen and scroll internally, still one slide at a time. */

:root {
  --ink: #090909;
  --ink-2: #111110;
  --paper: #f2f0eb;
  --orange: #ff5a00;
  --orange-2: #ff7a32;
  --muted: #77736c;
  --dark-muted: #9b9891;
  --line: #d8d4cc;
  --dark-line: #2c2b28;
  --good: #75cc8c;
  --shadow: 0 28px 90px #00000024;
  --pad: 60px;
  --pad-y: 52px;
  --bar: 52px;
  --controls: 56px;
  --stage-w: 1280px;
  --stage-h: 720px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: #060606;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
svg { flex: none; }

/* ------------------------------------------------------------ projector --- */
.deck {
  position: fixed;
  inset: var(--bar) 0 var(--controls);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.stage {
  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  flex: none;
  transform: scale(var(--scale, 1));
  transform-origin: center center;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 40px 120px #00000080;
}

/* ---------------------------------------------------------------- slide --- */
.slide {
  --bg: var(--paper);
  --fg: var(--ink);
  --dim: var(--muted);
  --hair: var(--line);
  --surface: #f8f6f1;
  --surface-2: #fff;
  --from: 34px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: var(--pad-y) var(--pad);
  background: var(--bg);
  color: var(--fg);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(var(--from), 0, 0);
  transition: opacity .42s cubic-bezier(.2, .8, .2, 1), transform .42s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .42s;
}
.slide.dark {
  --bg: var(--ink);
  --fg: #fff;
  --dim: var(--dark-muted);
  --hair: var(--dark-line);
  --surface: #141312;
  --surface-2: #1a1917;
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
  z-index: 2;
}
/* The outgoing slide leaves the way the incoming one arrived from. */
.slide.leaving { opacity: 0; visibility: visible; transform: translate3d(calc(var(--from) * -1), 0, 0); transition-delay: 0s; z-index: 1; }
.deck[data-dir="back"] .slide { --from: -34px; }

.slide-inner { width: 100%; margin: 0 auto; }
.cols {
  display: grid;
  grid-template-columns: minmax(340px, .92fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
.cols.wide-fig { grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); }
.cols.even { grid-template-columns: 1fr 1fr; }
.slide-no {
  display: none;
  position: absolute;
  right: var(--pad);
  bottom: 24px;
  color: var(--dim);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  opacity: .75;
}

/* ------------------------------------------------------------ typography --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--orange);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px #ff5a0026;
}
.slide h2 {
  margin-top: 20px;
  font-size: 44px;
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: .96;
}
.slide h3 { letter-spacing: -.03em; }
.lede {
  max-width: 620px;
  margin-top: 20px;
  color: var(--dim);
  font-size: 14px;
  line-height: 1.62;
}
.say {
  margin-top: 26px;
  padding: 15px 18px;
  border-left: 3px solid var(--orange);
  background: var(--surface);
  border-radius: 0 12px 12px 0;
  max-width: 620px;
}
.say b {
  display: block;
  margin-bottom: 7px;
  color: var(--orange);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.say p { font-size: 13px; line-height: 1.6; }
.close {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.close em { color: var(--orange); font-style: normal; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--hair);
  border-radius: 99px;
  color: var(--dim);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ lists --- */
.checks, .crosses, .plain { list-style: none; display: grid; gap: 11px; margin-top: 24px; }
.checks li, .crosses li, .plain li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--fg);
}
.checks li:before, .crosses li:before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  background-repeat: no-repeat;
  background-size: contain;
}
.checks li:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
}
.crosses li:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a09b93' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 6 12 12'/%3E%3Cpath d='M18 6 6 18'/%3E%3C/svg%3E");
}
.crosses li { color: var(--dim); font-weight: 600; }

/* ----------------------------------------------------------------- panels --- */
.panel {
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.slide.dark .panel { box-shadow: 0 35px 100px #0006; }
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
.panel-head span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.panel-head span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px #ff5a001f;
}
.panel-head small { color: var(--dim); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }

/* ------------------------------------------------------------------ tiles --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tile {
  padding: 18px;
  border: 1px solid var(--hair);
  border-radius: 15px;
  background: var(--surface);
}
.tile strong { display: block; font-size: 31px; letter-spacing: -.05em; }
.tile span { display: block; margin-top: 7px; color: var(--dim); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.tile.accent { background: var(--orange); border-color: var(--orange); color: #fff; }
.tile.accent span { color: #ffd9c4; }

/* ------------------------------------------------------------------ steps --- */
.steps { display: grid; gap: 10px; }
.step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 15px;
  align-items: start;
  padding: 15px 17px;
  border: 1px solid var(--hair);
  border-radius: 15px;
  background: var(--surface);
  position: relative;
}
.step > b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
}
.slide.dark .step > b { background: var(--orange); }
.step.hot > b { background: var(--orange); color: #fff; }
.step h4 { font-size: 14px; letter-spacing: -.02em; }
.step p { margin-top: 6px; color: var(--dim); font-size: 11.5px; line-height: 1.5; }
.step .chips { margin-top: 9px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span {
  padding: 6px 9px;
  border: 1px solid var(--hair);
  border-radius: 7px;
  color: var(--dim);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chips span.on { border-color: var(--orange); color: var(--orange); }

/* --------------------------------------------------------------- compare --- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare-card {
  padding: 22px;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: var(--surface);
}
.compare-card.win { border-color: var(--orange); background: var(--surface-2); box-shadow: var(--shadow); }
.compare-card h4 { font-size: 15px; }
.compare-card > small {
  display: block;
  margin-bottom: 12px;
  color: var(--dim);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.compare-card ul { list-style: none; margin-top: 14px; display: grid; gap: 9px; }
.compare-card li { color: var(--dim); font-size: 11.5px; line-height: 1.45; display: flex; gap: 9px; }
.compare-card li:before { content: "—"; color: var(--hair); }
.compare-card.win li:before { content: "✓"; color: var(--orange); font-weight: 900; }
.risk-meter { margin-top: 18px; height: 6px; border-radius: 99px; background: var(--hair); overflow: hidden; }
.risk-meter i { display: block; height: 100%; border-radius: 99px; background: #b9b4ab; }
.compare-card.win .risk-meter i { background: var(--orange); }
.risk-label { margin-top: 8px; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

/* ------------------------------------------------------------------ money --- */
.money-bar { display: flex; height: 62px; border-radius: 14px; overflow: hidden; border: 1px solid var(--hair); }
.money-bar div { display: grid; align-content: center; padding: 0 16px; }
.money-bar b { font-size: 20px; letter-spacing: -.04em; }
.money-bar small { margin-top: 4px; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.money-bar .pay { background: var(--ink-2); color: #fff; flex: 0 0 27%; }
.money-bar .keep { background: var(--orange); color: #fff; flex: 1; }
.money-scale { display: flex; justify-content: space-between; margin-top: 10px; color: var(--dim); font-size: 9px; letter-spacing: .08em; }

.calc { width: 100%; border-collapse: collapse; font-size: 12px; }
.calc th, .calc td { padding: 12px 10px; text-align: right; border-bottom: 1px solid var(--hair); }
.calc th:first-child, .calc td:first-child { text-align: left; }
.calc thead th { color: var(--dim); font-size: 8px; letter-spacing: .11em; text-transform: uppercase; font-weight: 850; }
.calc tbody td:first-child { font-weight: 800; }
.calc tbody tr:last-child td { border-bottom: 0; }
.calc .out { color: var(--orange); font-weight: 850; }

/* ----------------------------------------------------------------- ledger --- */
.ledger { border: 1px solid var(--hair); border-radius: 13px; overflow: hidden; }
.ledger > div {
  display: grid;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 15px;
  border-bottom: 1px solid var(--hair);
  font-size: 10.5px;
}
.ledger > div:last-child { border-bottom: 0; }
.ledger .lhead {
  background: var(--surface);
  color: var(--dim);
  min-height: 36px;
  font-size: 7.5px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.ledger b { font-weight: 800; }
.ledger span { color: var(--dim); }
.ledger em {
  justify-self: start;
  padding: 5px 9px;
  border-radius: 99px;
  font-style: normal;
  font-size: 8px;
  font-weight: 800;
  background: #59ad6f1f;
  color: #4e9c66;
}
.slide.dark .ledger em { color: var(--good); }
.ledger em.hold { background: #ff5a001f; color: var(--orange); }
.ledger em.stop { background: #c0392b1f; color: #c0503f; }
.ledger strong { justify-self: end; color: var(--orange); }

/* ----------------------------------------------------------------- funnel --- */
/* Label, track and count are three columns: putting the label inside the bar
   meant the fill edge cut straight through the words on the narrow rows. */
.funnel { display: grid; gap: 11px; }
.funnel-row { display: grid; grid-template-columns: 190px 1fr 46px; gap: 16px; align-items: center; }
.funnel-row > b { font-size: 12px; line-height: 1.3; }
.funnel-row > b small {
  display: block;
  margin-top: 5px;
  color: var(--dim);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.funnel-track {
  height: 32px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--hair);
  overflow: hidden;
}
.funnel-track i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(90deg, #b7430c, var(--orange));
}
.funnel-row > span { font-size: 15px; font-weight: 850; letter-spacing: -.03em; text-align: right; }
.funnel-row.last > span { color: var(--orange); }
.funnel-row.last .funnel-track { border-color: var(--orange); }

/* ------------------------------------------------------------------ gates --- */
.gate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.gate {
  padding: 17px;
  border: 1px solid var(--hair);
  border-radius: 15px;
  background: var(--surface);
  position: relative;
}
.gate span { color: var(--dim); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.gate i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 16px 0 13px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  color: var(--orange);
}
.gate h4 { font-size: 13px; }
.gate p { margin-top: 8px; color: var(--dim); font-size: 11px; line-height: 1.5; }
.gate.now { border-color: var(--orange); }
.gate.now i { background: var(--orange); border-color: var(--orange); color: #fff; }

/* -------------------------------------------------------------- signals --- */
.signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 8px; }
.signal {
  padding: 13px 14px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--surface);
}
.signal b { display: block; font-size: 11.5px; }
.signal small { display: block; margin-top: 6px; color: var(--dim); font-size: 10px; line-height: 1.45; }
.signal-head {
  margin: 0 0 10px;
  color: var(--dim);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.quarantine {
  margin-top: 14px;
  padding: 15px 17px;
  border: 1px dashed var(--orange);
  border-radius: 13px;
  background: #ff5a000d;
}
.quarantine b { font-size: 11.5px; color: var(--orange); letter-spacing: .04em; text-transform: uppercase; }
.quarantine p { margin-top: 7px; font-size: 11.5px; line-height: 1.5; color: var(--dim); }

/* -------------------------------------------------------------- documents --- */
.docs { display: grid; gap: 7px; }
.doc {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 15px;
  border: 1px solid var(--hair);
  border-radius: 11px;
  background: var(--surface);
  font-size: 11.5px;
}
.doc i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-style: normal;
}
.doc small { color: var(--dim); font-size: 9px; letter-spacing: .08em; }
.lockbar {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  border-radius: 13px;
  background: var(--ink);
  color: #fff;
}
.lockbar svg { color: var(--orange); }
.lockbar b { font-size: 11.5px; }
.lockbar small { display: block; margin-top: 5px; color: var(--dark-muted); font-size: 10px; }

/* ------------------------------------------------------------------- maps --- */
.map-rows { display: grid; gap: 8px; }
.map-row {
  display: grid;
  grid-template-columns: 1fr 26px 1.15fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--hair);
  border-radius: 13px;
  background: var(--surface);
}
.map-row b { font-size: 12px; }
.map-row > svg { color: var(--orange); }
.map-row p { color: var(--dim); font-size: 11.5px; line-height: 1.45; }

/* ---------------------------------------------------------------- models --- */
.models { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.model {
  padding: 18px;
  border: 1px solid var(--hair);
  border-radius: 15px;
  background: var(--surface);
}
.model span { color: var(--orange); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.model h4 { margin-top: 12px; font-size: 15px; }
.model p { margin-top: 8px; color: var(--dim); font-size: 11px; line-height: 1.5; }
.model .pill {
  display: inline-block;
  margin-top: 13px;
  padding: 7px 10px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}
.slide.dark .model .pill { background: var(--orange); }

/* ------------------------------------------------------------------- flow --- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; padding: 26px 0 8px; }
.flow:before { content: ""; position: absolute; top: 42px; left: 10%; right: 10%; height: 1px; background: var(--hair); }
.flow-step { text-align: center; position: relative; z-index: 2; }
.flow-step span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  font-size: 9px;
  font-weight: 850;
}
.flow-step:first-child span, .flow-step:last-child span { background: var(--orange); border-color: var(--orange); color: #fff; }
.flow-step b { display: block; margin-top: 11px; font-size: 9px; letter-spacing: .1em; }
.flow-step small { display: block; margin-top: 5px; color: var(--dim); font-size: 9.5px; line-height: 1.4; }

/* ------------------------------------------------------------- dashboard --- */
.dash { display: grid; gap: 10px; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dash-kpis div { padding: 14px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.dash-kpis strong { display: block; font-size: 22px; letter-spacing: -.04em; }
.dash-kpis span { display: block; margin-top: 5px; color: var(--dim); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.spark { display: flex; align-items: flex-end; gap: 5px; height: 84px; margin-top: 4px; }
.spark i { flex: 1; min-width: 0; border-radius: 3px 3px 0 0; background: var(--hair); }
.spark i.hi { background: var(--orange); }

/* ------------------------------------------------------------------ cover --- */
.cover { padding: 0; }
.cover .cover-media { position: absolute; inset: 0; }
.cover .cover-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.cover .cover-media:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #090909 0%, #090909f2 34%, #090909a6 58%, #09090926 82%),
              linear-gradient(0deg, #090909 4%, #0000 46%);
}
.cover .slide-inner { position: relative; z-index: 2; padding: var(--pad-y) var(--pad); }
.cover h1 {
  margin-top: 24px;
  font-size: 68px;
  font-weight: 850;
  letter-spacing: -.07em;
  line-height: .9;
  max-width: 15ch;
}
.cover h1 em { color: var(--orange); font-style: normal; }
.cover .lede { max-width: 640px; margin-top: 24px; font-size: 16px; }
.cover-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}
.cover-rail span { color: var(--dim); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.cover-rail i { display: inline-block; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: var(--orange); vertical-align: middle; }

/* The closing slide carries a headline, a proof list and two buttons, so it
   runs tighter than the opener to stay inside the stage. */
.cta-slide h1 { margin-top: 20px; font-size: 52px; max-width: 18ch; }
.cta-slide .lede { margin-top: 18px; font-size: 14px; }
.cta-slide .checks { margin-top: 20px; gap: 9px; }
.cta-slide .cta-actions { margin-top: 26px; }

/* -------------------------------------------------------------------- cta --- */
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 13px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.button-primary:hover { background: var(--orange-2); }
.button-ghost { border-color: var(--hair); color: var(--fg); background: transparent; }
.button-ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ----------------------------------------------------------------- chrome --- */
.deck-bar {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: #0b0b0b;
  border-bottom: 1px solid #ffffff14;
  color: #fff;
  transition: opacity .3s, transform .3s;
}
.logo { display: flex; align-items: center; }
.logo img { display: block; width: auto; height: 38px; }
.bar-title {
  padding-left: 18px;
  border-left: 1px solid #ffffff24;
  color: #a5a19a;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bar-spacer { flex: 1; }
.bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 13px;
  white-space: nowrap;
  border: 1px solid #ffffff24;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s;
}
.bar-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.bar-btn.cta { background: var(--orange); border-color: var(--orange); }
.bar-btn.cta:hover { background: #fff; color: var(--ink); }

/* ------------------------------------------------------------- controls --- */
.controls {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--controls);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  background: #0b0b0b;
  border-top: 1px solid #ffffff14;
  color: #fff;
  transition: opacity .3s, transform .3s;
}
.controls .slide-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #7f7b75;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.counter { color: #a5a19a; font-size: 11px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.counter b { color: #fff; }
.pager { display: flex; gap: 8px; }
.pager button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid #ffffff26;
  background: #141312;
  color: #fff;
  transition: background .2s, border-color .2s, opacity .2s;
}
.pager button:hover { background: var(--orange); border-color: var(--orange); }
.pager button[disabled] { opacity: .28; pointer-events: none; }

/* The rail doubles as the progress bar: filled dots are slides you have been
   through, so a glance says both "where am I" and "how much is left". */
.rail { display: flex; align-items: center; gap: 5px; }
.rail button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff26;
  transition: background .2s, transform .2s, width .2s;
}
.rail button:hover { transform: scale(1.4); }
.rail button.seen { background: #ffffff5c; }
.rail button.on { background: var(--orange); width: 22px; border-radius: 99px; transform: none; }

/* ------------------------------------------------------------ fullscreen --- */
/* In fullscreen the chrome fades but keeps its space, so the stage never
   resizes under the presenter mid-sentence. */
body.fs .deck-bar, body.fs .controls { opacity: 0; pointer-events: none; }
body.fs.ui .deck-bar, body.fs.ui .controls { opacity: 1; pointer-events: auto; }
body.fs .stage { box-shadow: none; border-radius: 0; }

/* --------------------------------------------------------------- compact --- */
/* Phone: no scaled stage — each slide fills the screen and scrolls internally,
   still one slide at a time, advanced by swiping. */
@media (width <= 820px) {
  :root { --pad: 22px; --pad-y: 26px; --bar: 48px; --controls: 52px; }
  .deck { inset: var(--bar) 0 var(--controls); }
  .stage {
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
    box-shadow: none;
  }
  .slide { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 40px; }
  .slide-inner { display: block; }
  .cols, .cols.wide-fig, .cols.even { grid-template-columns: 1fr; gap: 24px; }
  .slide h2 { font-size: 30px; }
  .cover h1 { font-size: 34px; max-width: none; }
  .cta-slide h1 { font-size: 30px; }
  .cover .lede, .lede { font-size: 13px; }
  .compare, .dash-kpis, .map-row { grid-template-columns: 1fr; }
  .map-row > svg { rotate: 90deg; }
  .flow { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .flow:before { display: none; }
  .money-bar { height: auto; flex-direction: column; }
  .money-bar div { padding: 14px 16px; }
  .money-bar .pay { flex: none; }
  .calc { font-size: 10.5px; }
  .calc th, .calc td { padding: 9px 5px; }
  .bar-title, #print-btn, #fs-btn { display: none; }
  .controls .slide-title { display: none; }
  .rail { display: none; }
  .cover .cover-media img { object-position: 72% center; }
}
@media (prefers-reduced-motion: reduce) {
  .slide { transition: opacity .01s; transform: none !important; }
}

/* ---------------------------------------------------------------- print --- */
/* Printing turns the projector back into a document: every slide laid out at
   its true 1280x720, one per landscape page. */
@page { size: 1280px 720px; margin: 0; }
@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  .deck-bar, .controls { display: none !important; }
  .deck { position: static; inset: auto; display: block; overflow: visible; }
  .stage {
    width: 1280px;
    height: auto;
    transform: none !important;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .slide {
    position: relative;
    inset: auto;
    display: flex;
    width: 1280px;
    /* A hair under the page box: at an exact 720px the document ends flush on
       the last page boundary and Chrome emits a blank 26th page. */
    height: 714px;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Breaking *before* each slide but the first gives exactly one page per
     slide; break-after on every slide leaves a blank page at the end. */
  .slide + .slide { break-before: page; page-break-before: always; }
  .slide-no { display: block; }
  .panel, .compare-card.win { box-shadow: none; }
}