/* ============================================================
   overview.css · the management deck for the readiness-review
   candidate-branch preview. A slide-style scroll-snap overview
   (full-viewport slides) on top of the same aero.css tokens as
   every other page.

   It does NOT reuse the dashboard chrome · no left rail, no card
   grid. It is a presentation surface: large display type, generous
   whitespace, one accent (cyan), gold reserved for the deliverable
   (the proof packet) and "now / attention", a faint blueprint grid on
   the hero + ask, restraint over effect. Tokens only (aero.css). No
   external fonts, no CDN.

   All styling lives here; the page carries zero inline style. Theme
   tokens flip dark/light via theme.js + aero.css, so the deck
   repaints with the rest of the preview.

   Overflow-safe: every grid track uses minmax(0,1fr), content columns
   set min-width:0, and the deck hides horizontal overflow. No text
   ever sits over a busy plate · copy lives in its own panel.
   ============================================================ */

/* the deck scrolls inside its own container, so the page body never
   scrolls · pinning overflow keeps the snap track in charge */
body.app-noshell { overflow: hidden; }

/* the deck is a linear overview surface, not a working dashboard. The
   gate.js status dock self-hides under the shell / on mobile; on the
   deck we pin it out of the slide content by hiding the fixed variant
   so it never floats over a slide. */
#ti-dock { display: none !important; }

/* ============================================================
   RETURN NAV (overview.js injects it). The deck is rail-less and the gate
   dock is hidden here, so these two fixed controls are the only way back into
   the workspace. Back sits top-left, Skip top-right, clear of the tour ribbon
   that sits top-center. z below the help overlay.
   ============================================================ */
.ovr-returnbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2147483300;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  pointer-events: none; /* the bar is a spacer; only the controls take clicks */
}
.ovr-return {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: 8px 15px;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ovr-return-back {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-accent);
}
.ovr-return-back:hover { background: var(--accent-pale); color: var(--accent-deep); border-color: var(--accent); }
.ovr-return-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ovr-return-skip {
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
}
.ovr-return-skip:hover { color: var(--text); border-color: var(--border-accent); }
.ovr-return-skip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ovr-return-glyph { font-size: 15px; line-height: 1; flex: 0 0 auto; }
.ovr-return-label { white-space: nowrap; }

/* the right group keeps skip + the Export control together, both clickable
   over the click-through return bar */
.ovr-return-group { display: inline-flex; align-items: center; gap: 8px; pointer-events: auto; }
.ovr-return-export { pointer-events: auto; }
/* the deck is full-bleed and rail-less, so its Export menu must sit above the
   fixed return bar and the deck content */
.ovr-return-export .ti-export-menu { z-index: 2147483320; }

@media (prefers-reduced-motion: reduce) { .ovr-return { transition: none; } }

/* the fixed return bar sits over the top 56px, so the deck's scope line drops
   below it (the bar carries the back + skip; the scope line stays readable) */
body.app-noshell > .scope-banner { margin-top: 56px; }

/* phone: the top-center tour ribbon owns the top band, so drop the whole return
   bar below it (different y-band) and shrink the back label to its arrow. This
   stops the ribbon from sitting over the Skip control at narrow widths. */
@media (max-width: 560px) {
  .ovr-returnbar { padding: 8px 10px; top: 56px; }
  .ovr-return { padding: 8px 12px; font-size: 12px; }
  .ovr-return-back .ovr-return-label { display: none; }
  .ovr-return-group { gap: 6px; }
  .ovr-return-export .ti-export-btn { padding: 8px 11px; font-size: 12px; }
  body.app-noshell > .scope-banner { margin-top: 110px; }
}

/* the scroll-snap track. one vertical column of full-height slides.
   Proximity (not mandatory) so a slide settles only when the reader lands near
   one, never yanked mid-scroll. scroll-padding keeps the snap point at the top
   edge so the heading is never clipped. */
.ovr-deck {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  scroll-padding-top: 0;
  -webkit-overflow-scrolling: touch;
}

/* each slide fills the viewport and snaps to the top. No forced stop, so the
   reader can scroll past without each slide grabbing the scroll. */
.ovr-slide {
  min-height: 100vh;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6vh 9vw 9vh;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border-soft);
}

/* a calm alternating band so adjacent slides separate without lines */
.ovr-slide.alt { background: var(--bg-warm); }
.ovr-slide.tint { background: var(--surface-3); }

/* an inner measure so long copy never runs full-bleed */
.ovr-wrap { width: 100%; max-width: 1080px; margin: 0 auto; min-width: 0; }

/* the deck infographic holder (overview.js mounts a figure from the viz kit).
   A calm panel that sits between the headline and the slide body, constrained
   so it never runs full-bleed and never forces horizontal overflow. */
.ovr-viz {
  margin: 18px 0 22px;
  padding: 18px 20px;
  max-width: 640px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.ovr-viz:empty { display: none; }
@media (max-width: 560px) {
  .ovr-viz { padding: 14px 15px; margin: 14px 0 18px; }
}

/* ---- shared slide furniture ---- */

.ovr-kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
}
.ovr-kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}
.ovr-kicker .ovr-kicker-num {
  color: var(--text-dimmer);
  letter-spacing: 1.4px;
}

.ovr-h {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.04;
  color: var(--text);
  font-size: clamp(34px, 5.4vw, 66px);
  margin: 0 0 22px;
  max-width: 18ch;
}
.ovr-h.tight { max-width: 15ch; }

.ovr-lead {
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0 0 14px;
}
.ovr-lead strong { color: var(--text); font-weight: 600; }
.ovr-lead .accent { color: var(--accent-deep); font-weight: 600; }

.ovr-note {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dimmer);
  letter-spacing: 0.2px;
  max-width: 60ch;
  margin-top: 26px;
}

/* a hairline datum rule used inside slides */
.ovr-rule {
  height: 1px;
  border: 0;
  background: var(--border);
  margin: 30px 0;
  max-width: 1080px;
}
.ovr-rule.accent { background: var(--border-accent); }

/* ============================================================
   SLIDE 1 · HERO · blueprint plate, the one-line value
   ============================================================ */

.ovr-hero {
  background:
    radial-gradient(120% 90% at 14% 10%, var(--accent-pale), transparent 60%),
    linear-gradient(160deg, var(--surface-3), var(--bg));
}
.ovr-hero::before {
  /* the faint blueprint grid, hero only, behind nothing legibility-critical */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--accent-pale) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-pale) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.6;
  pointer-events: none;
}
.ovr-hero .ovr-wrap { position: relative; }

.ovr-brand {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ovr-brand .ovr-brand-mark {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--border-accent);
  border-radius: 5px;
  padding: 3px 7px;
  letter-spacing: 1px;
}

.ovr-hero-h {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  font-size: clamp(40px, 7vw, 84px);
  color: var(--text);
  margin: 0 0 26px;
  max-width: 16ch;
}

.ovr-hero-sub {
  font-size: clamp(18px, 2.1vw, 26px);
  line-height: 1.42;
  color: var(--text-dim);
  max-width: 50ch;
  margin: 0 0 36px;
}
.ovr-hero-sub strong { color: var(--text); font-weight: 600; }
.ovr-hero-sub .accent { color: var(--accent-deep); font-weight: 600; }

/* hero CTA row · the primary continues into the workspace, the gold
   one leads to the deliverable (the proof packet) */
.ovr-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }

.ovr-hero-meta {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.ovr-hero-meta .dot { color: var(--subtle); }
.ovr-hero-meta .chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-pale);
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  padding: 4px 11px;
}

/* a small "scroll" cue at the bottom of the hero */
.ovr-scroll-cue {
  position: absolute;
  left: 9vw;
  bottom: 5vh;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dimmer);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ovr-scroll-cue .ovr-cue-glyph { font-size: 13px; color: var(--accent); }

/* ============================================================
   SHARED LAYOUT BLOCKS for the body slides
   ============================================================ */

/* two-column split: copy left, figure/list right */
.ovr-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.ovr-split.copy-narrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.ovr-split > div { min-width: 0; }

/* a stat / contrast pair for the problem slide */
.ovr-contrast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.ovr-contrast .ovr-c-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.ovr-c-card .ovr-c-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin-bottom: 9px;
}
.ovr-c-card .ovr-c-head {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 7px;
}
.ovr-c-card .ovr-c-body { font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.ovr-c-card.is-now { border-left: 3px solid var(--gold); }
.ovr-c-card.is-now .ovr-c-label { color: var(--gold-deep); }
.ovr-c-card.is-locked { border-left: 3px solid var(--accent); }
.ovr-c-card.is-locked .ovr-c-label { color: var(--accent); }

/* ---- the "what it is" three-step strip ---- */
.ovr-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
}
.ovr-flow .ovr-step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.ovr-flow .ovr-step .ovr-step-n {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.ovr-flow .ovr-step .ovr-step-h {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 7px;
}
.ovr-flow .ovr-step .ovr-step-b { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
/* a faint connector arrow between steps (decorative) */
.ovr-flow .ovr-step:not(:last-child)::after {
  content: "›";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--subtle);
  font-size: 22px;
  line-height: 1;
  z-index: 1;
}

/* ============================================================
   SLIDE 4 · THE SURFACES · 2x2 of the four working surfaces
   ============================================================ */
.ovr-surfaces {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 34px;
}
.ovr-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  min-width: 0;
}
.ovr-surface:hover { border-color: var(--border-accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.ovr-surface .ovr-s-top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.ovr-surface .ovr-s-glyph {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-pale);
  border: 1px solid var(--border-accent);
  color: var(--accent-deep);
  font-size: 16px;
}
.ovr-surface .ovr-s-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.ovr-surface .ovr-s-body { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin-bottom: 12px; }
.ovr-surface .ovr-s-keeps {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--text-dimmer);
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
}
.ovr-surface .ovr-s-keeps strong { color: var(--ok); font-weight: 600; }

/* ============================================================
   SLIDE 5 · THE BOUNDARY, STATED PRECISELY · the glossary
   ============================================================ */
.ovr-frame-line {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent-deep);
  margin: 18px 0 28px;
}
.ovr-frame-line .muted { color: var(--text-dim); font-weight: 400; }

.ovr-gloss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 30px;
}
.ovr-gl {
  display: grid;
  grid-template-columns: minmax(150px, 0.6fr) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}
.ovr-gl .ovr-gl-term {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--accent-deep);
  line-height: 1.45;
}
.ovr-gl .ovr-gl-def {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dim);
}
.ovr-gl .ovr-gl-def strong { color: var(--text); font-weight: 600; }

/* the glossary is the deck's densest slide (six terms + the frame
   line). Top-align it and tighten its vertical rhythm so the whole
   slide fits one viewport without clipping the title on shorter
   laptops. The other dense slides top-align for the same reason; the
   centered slides are never seen side by side under scroll-snap. */
#s-problem, #s-what, #s-surfaces, #s-boundary, #s-roi, #s-posture { justify-content: flex-start; }
#s-boundary .ovr-h { margin-bottom: 14px; }
#s-boundary .ovr-frame-line { margin: 10px 0 16px; }
#s-boundary .ovr-gloss { gap: 4px 30px; }
#s-boundary .ovr-gl { padding: 9px 0; }
#s-boundary .ovr-gl-def { font-size: 13.5px; line-height: 1.46; }
#s-boundary .ovr-rule { margin: 16px 0; }
#s-boundary .ovr-note { margin-top: 14px; }

/* ============================================================
   SLIDE 6 · THE POSTURE · boundary rows
   ============================================================ */
.ovr-posture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.ovr-p-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.ovr-p-card .ovr-p-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 9px;
}
.ovr-p-card .ovr-p-body { font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.ovr-p-card .ovr-p-body strong { color: var(--text); font-weight: 600; }

.ovr-posture-foot {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: var(--text-dimmer);
}
.ovr-posture-foot span::before { content: "[ok] "; color: var(--ok); }

/* ============================================================
   SLIDE 7 · ROI · the illustrative value model (editable inputs)
   ============================================================ */
.ovr-roi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 26px;
}
.ovr-roi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.ovr-roi-head {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text);
  margin-bottom: 6px;
}
.ovr-roi-sub { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin: 0 0 14px; }
.ovr-roi-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.ovr-roi-field { display: flex; flex-direction: column; gap: 5px; position: relative; min-width: 0; }
.ovr-roi-field span {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-dimmer);
}
.ovr-roi-field input {
  font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 9px; width: 100%; box-sizing: border-box;
  -moz-appearance: textfield;
}
.ovr-roi-field.pct input { padding-right: 22px; }
.ovr-roi-field input::-webkit-outer-spin-button,
.ovr-roi-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ovr-roi-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale); }
.ovr-roi-field i {
  position: absolute; right: 10px; bottom: 9px; font-style: normal;
  font-family: var(--mono); font-size: 12px; color: var(--text-dimmer); pointer-events: none;
}

/* percent inputs as sliders: the value rides at the right of the label, the
   track + thumb use the one cyan accent. Open count and dollar fields stay
   number inputs above. */
.ovr-roi-field.slider span {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.ovr-roi-out {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0; text-transform: none; color: var(--accent-deep);
}
.ovr-roi-field.slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; margin: 0; padding: 0;
  background: transparent; cursor: pointer;
}
.ovr-roi-field.slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.ovr-roi-field.slider input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.ovr-roi-field.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  margin-top: -7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-bright); border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
}
.ovr-roi-field.slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-bright); border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
}
.ovr-roi-field.slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.ovr-roi-field.slider input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* paired field: a friendly control (slider or band dropdown) above the exact
   number input. The label readout rides at the right of the label, the same way
   the percent sliders show their value. Reuses the slider track + thumb. */
.ovr-roi-field.paired span {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.ovr-roi-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  align-items: center; gap: 10px; min-width: 0;
}
.ovr-roi-pair input[type="number"] { min-width: 0; }
.ovr-roi-field.paired input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; margin: 0; padding: 0;
  background: transparent; cursor: pointer; min-width: 0;
}
.ovr-roi-field.paired input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.ovr-roi-field.paired input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.ovr-roi-field.paired input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  margin-top: -7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-bright); border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
}
.ovr-roi-field.paired input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-bright); border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
}
.ovr-roi-field.paired input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.ovr-roi-field.paired input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.ovr-roi-select {
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 9px; width: 100%; box-sizing: border-box; min-width: 0;
  cursor: pointer; margin-bottom: 8px;
}
.ovr-roi-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale); }
.ovr-roi-sub-out {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.3px; color: var(--text-dim);
}
.ovr-roi-sub-out strong { color: var(--accent-deep); font-size: 15px; font-weight: 700; }
.ovr-roi-total {
  margin-top: 16px; display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 15px 22px; border-radius: var(--radius);
  background: var(--accent-pale); border: 1px solid var(--border-accent);
}
.ovr-roi-total-k {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent-deep);
}
.ovr-roi-total-v {
  font-family: var(--display); font-size: clamp(28px, 4vw, 44px); font-weight: 600;
  letter-spacing: 0; color: var(--accent-deep); line-height: 1;
}
/* tighten the ROI slide's rhythm so the editable model + total + note
   fit one viewport on a short laptop (it carries the most content) */
#s-roi .ovr-lead { margin-bottom: 10px; }
#s-roi .ovr-roi { margin-top: 18px; }
#s-roi .ovr-roi-total { margin-top: 12px; }
#s-roi .ovr-note { margin-top: 14px; }

/* ============================================================
   SLIDE 8 · THE BUILDER · the central flow, animated path preview
   ============================================================ */
.ovr-builder {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  margin-top: 30px;
}
.ovr-builder > div { min-width: 0; }
/* the path preview: a left-to-right run of nodes with a boundary
   midline, the gold one is the deliverable (the proof packet) */
.ovr-path {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.ovr-node {
  flex: 1 1 0;
  min-width: 92px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 11px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ovr-node .ovr-node-k {
  font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-dimmer);
}
.ovr-node .ovr-node-b { font-size: 12.5px; line-height: 1.35; color: var(--text); }
.ovr-node.is-source { border-left: 3px solid var(--accent); }
.ovr-node.is-boundary { border-left: 3px solid var(--subtle); background: var(--bg-warm); }
.ovr-node.is-signal { border-left: 3px solid var(--accent); }
.ovr-node.is-approval { border-left: 3px solid var(--accent-deep); }
.ovr-node.is-result { border-left: 3px solid var(--gold); background: var(--gold-pale); }
.ovr-node.is-result .ovr-node-k { color: var(--gold-deep); }
/* the travelling token (the absorbed "play the path" beat) */
.ovr-token {
  position: absolute; top: 50%; left: 8px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-pale);
  transform: translateY(-50%);
  animation: ovr-travel 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ovr-travel {
  0%   { left: 8px; background: var(--accent); }
  82%  { left: calc(100% - 20px); background: var(--accent); }
  100% { left: calc(100% - 20px); background: var(--gold); box-shadow: 0 0 0 4px var(--gold-pale); }
}
.ovr-builder-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ovr-builder-points li {
  position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--text-dim);
}
.ovr-builder-points li::before {
  content: "›"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 600;
}
.ovr-builder-points li strong { color: var(--text); font-weight: 600; }
.ovr-builder-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ============================================================
   SLIDE 9 · THE PROOF PACKET PREVIEW · the deliverable
   ============================================================ */
.ovr-packet {
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  max-width: 760px;
}
.ovr-packet .ovr-packet-k {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px;
}
.ovr-packet .ovr-packet-rows { display: grid; gap: 11px; margin-bottom: 18px; }
.ovr-packet .ovr-packet-row {
  display: grid; grid-template-columns: minmax(130px, 0.5fr) minmax(0, 1fr);
  gap: 14px; align-items: baseline; padding-bottom: 11px;
  border-bottom: 1px solid var(--border-soft);
}
.ovr-packet .ovr-packet-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ovr-packet .ovr-packet-lab {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-dimmer);
}
.ovr-packet .ovr-packet-val { font-size: 14px; line-height: 1.5; color: var(--text); min-width: 0; }
.ovr-packet .ovr-packet-val .pill {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.6px;
  border-radius: 999px; padding: 3px 9px; border: 1px solid var(--gold-soft);
  color: var(--gold-deep); background: var(--gold-pale);
}
.ovr-packet-cta { margin-top: 4px; }

/* ============================================================
   SLIDE 10 · THE ASK
   ============================================================ */
.ovr-ask {
  background:
    radial-gradient(120% 100% at 86% 12%, var(--accent-pale), transparent 58%),
    linear-gradient(200deg, var(--surface-3), var(--bg));
}
.ovr-ask::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--accent-pale) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-pale) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.5;
  pointer-events: none;
}
.ovr-ask .ovr-wrap { position: relative; }
.ovr-ask-h {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  font-size: clamp(36px, 6vw, 72px);
  color: var(--text);
  margin: 0 0 22px;
  max-width: 16ch;
}
.ovr-ask-lead {
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.45;
  color: var(--text-dim);
  max-width: 52ch;
  margin: 0 0 30px;
}
.ovr-ask-lead strong { color: var(--text); font-weight: 600; }

.ovr-ask-points {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 11px;
  max-width: 54ch;
}
.ovr-ask-points li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dim);
}
.ovr-ask-points li::before {
  content: "->";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--accent);
  font-weight: 600;
}
.ovr-ask-points li strong { color: var(--text); font-weight: 600; }

.ovr-ask-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }

.ovr-ask-foot {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--text-dimmer);
  border-top: 1px solid var(--border-accent);
  padding-top: 18px;
  max-width: 60ch;
  line-height: 1.6;
}

/* ============================================================
   RIGHT-EDGE DOT NAV (built by overview.js; degrades gracefully ·
   if the JS does not run, the deck still scrolls.)
   ============================================================ */
.ovr-dots {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}
.ovr-dot {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--text-dimmer);
  -webkit-tap-highlight-color: transparent;
}
.ovr-dot .ovr-dot-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dimmer);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease;
  white-space: nowrap;
  pointer-events: none;
}
.ovr-dot .ovr-dot-mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--subtle);
  border: 1px solid var(--subtle);
  flex-shrink: 0;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.ovr-dot:hover .ovr-dot-label,
.ovr-dot:focus-visible .ovr-dot-label { opacity: 1; transform: translateX(0); color: var(--text-dim); }
.ovr-dot:hover .ovr-dot-mark { border-color: var(--accent); }
.ovr-dot:focus-visible { outline: none; }
.ovr-dot:focus-visible .ovr-dot-mark { box-shadow: 0 0 0 3px var(--accent-pale); border-color: var(--accent); }
.ovr-dot.is-active .ovr-dot-mark {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}
.ovr-dot.is-active .ovr-dot-label { opacity: 1; transform: translateX(0); color: var(--accent-deep); }

/* a slim top progress bar the JS drives (width set via a CSS var) */
.ovr-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: var(--ovr-progress, 0%);
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  z-index: 1300;
  transition: width 0.12s linear;
}

/* ============================================================
   WATCH / LISTEN media slide (s-watch) · the overview reel.
   Cards mirror .ovr-surface; players fill their card; an honest
   dashed note holds the space until the file lands (overview.js).
   ============================================================ */
.ovr-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: 4px;
}
.ovr-media-card {
  background: var(--surface);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(14px, 2vw, 22px);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ovr-media-kicker {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 600;
}
.ovr-video, .ovr-audio { width: 100%; min-width: 0; }
.ovr-video video {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  background: #0e1116;
  aspect-ratio: 16 / 9;
}
.ovr-audio audio { width: 100%; display: block; }
.ovr-media-card .ovr-audio { margin-top: auto; }
.ovr-media-note {
  color: var(--text-dimmer);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* ============================================================
   RESPONSIVE · collapse every two-up to one column, hide the dot
   nav, keep zero horizontal overflow at 375px.
   ============================================================ */
@media (max-width: 920px) {
  .ovr-split,
  .ovr-split.copy-narrow { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ovr-flow { grid-template-columns: minmax(0, 1fr); }
  .ovr-flow .ovr-step:not(:last-child)::after { content: none; }
  .ovr-surfaces,
  .ovr-posture,
  .ovr-contrast,
  .ovr-roi,
  .ovr-builder,
  .ovr-media,
  .ovr-gloss { grid-template-columns: minmax(0, 1fr); }
  .ovr-gl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ovr-slide { padding: 7vh 7vw 8vh; }
  .ovr-dots { display: none; }
}

@media (max-width: 560px) {
  .ovr-slide { padding: 6vh 6vw 7vh; }
  .ovr-scroll-cue { left: 6vw; }
  .ovr-roi-inputs { grid-template-columns: minmax(0, 1fr); }
  .ovr-packet .ovr-packet-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* honor reduced motion: drop smooth scroll, the progress transition,
   and the travelling token (it lands on its final, gold state) */
@media (prefers-reduced-motion: reduce) {
  .ovr-deck { scroll-behavior: auto; scroll-snap-type: none; }
  .ovr-progress { transition: none; }
  .ovr-dot .ovr-dot-label,
  .ovr-dot .ovr-dot-mark { transition: none; }
  .ovr-surface { transition: none; }
  .ovr-surface:hover { transform: none; }
  .ovr-token {
    animation: none;
    left: calc(100% - 20px);
    background: var(--gold);
    box-shadow: 0 0 0 4px var(--gold-pale);
  }
}