/* ── journey-styles.css ── §15 Design System tokens + Phase 1 layout ── */

:root {
  /* CSS var read by stage-animations.js wipeBg() — matches the journey
     background so the transition wipe rect (slide 6→7, etc.) is invisible. */
  --wipe-bg: #F9FAFB;

  /* Colors (JOBJACK palette, §15.3) */
  --jj-green: #59B367;
  --jj-green-dark: #006C51;
  --jj-red: #E53935;
  --jj-red-dark: #8B0000;
  --text-primary: #111111;
  --text-body: #374151;
  --text-muted: #6b7280;
  --surface-base: #FFFFFF;
  --surface-warm: #F9FAFB;
  --surface-card: #FFFFFF;
  --border-subtle: #E5E7EB;
  --banner-warning-bg: #FEF3C7;
  --banner-warning-text: #92400E;

  /* Radius (§15.5) */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Shadow (§15.6) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-button: 0 2px 6px rgba(0,108,81,0.18);

  /* Transitions (§15.7) */
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-snap: 120ms var(--ease-snap);
  --t-card: 280ms var(--ease-snap);
  --t-spring: 320ms var(--ease-spring);
}

/* Reduced-motion override (§15.7, §9) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-snap: 0ms linear;
    --t-card: 0ms linear;
    --t-spring: 0ms linear;
  }
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

/* ── Base ── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-warm);
  color: var(--text-body);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

/* ── Sub-1280px interstitial (§15.13) ── */
.journey-page { display: block; }
.journey-interstitial { display: none; }

@media (max-width: 1279.9px) {
  .journey-page { display: none; }
  .journey-interstitial {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
  }
  .journey-interstitial__card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 56px 48px;
    max-width: 480px;
    text-align: left;
  }
  .journey-interstitial__brand {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--jj-green-dark);
    margin: 0 0 16px;
  }
  .journey-interstitial__h1 {
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
    line-height: 1.2;
  }
  .journey-interstitial__body {
    font-size: 16px;
    color: var(--text-body);
    margin: 0 0 32px;
  }
  .journey-interstitial__btn {
    background: transparent;
    color: var(--jj-green-dark);
    border: 1.5px solid var(--jj-green-dark);
    border-radius: var(--radius-lg);
    padding: 12px 24px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--t-snap);
  }
  .journey-interstitial__btn:hover { background: var(--jj-green-dark); color: #fff; }
}

/* ── Private-mode banner (§15.10) ── */
.banner-private {
  background: var(--banner-warning-bg);
  color: var(--banner-warning-text);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 24px;
  text-align: center;
}

/* ── Header (title row + clickable section progress bar) ── */
.journey-header {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 80px 8px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Title row uses the same 5-column grid as the main nav below. This lets
   the preliminary-report callout (in its own grid cell) anchor exactly
   over the Round 2 → Round 3 boundary without bloating the row's height. */
.journey-header__title-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 8px;  /* matches .journey-progress gap so columns line up exactly */
}
.journey-header__title { grid-column: 1 / 3; }
.journey-header__title-row .journey-callouts { grid-column: 3 / 5; justify-self: center; }
.journey-header__right { grid-column: 5 / 6; justify-self: end; }

.journey-header__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.4px;
  margin: 0;
  line-height: 1.2;
}

.journey-header__brand {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--jj-green-dark);
}

.journey-header__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Dev-only "Clear all" button — wipes localStorage and reloads. Subtle by
   design so it doesn't compete with real UI; visible enough that testers
   can find it instantly. */
.journey-header__clear {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #6b7280;
  background: transparent;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.journey-header__clear:hover {
  color: #b91c1c;
  border-color: #fca5a5;
  background: #fef2f2;
}

.journey-header__clear:focus-visible {
  outline: 2px solid #b91c1c;
  outline-offset: 2px;
}

/* Progress bar — 5 clickable segments
   (Welcome / Round 1 — The story / Round 2 — Framework /
    Round 3 — Reality / Summary & Sense Check) */
.journey-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

/* Preliminary-report callout container — sits inside the title row in its
   own grid cell positioned over the Round 2 → Round 3 boundary of the nav
   below. The chip itself does the heavy visual lifting; this is just a
   wrapper that pins to the right column position. */
.journey-callouts {
  display: inline-flex;
  align-items: center;
}
.journey-callouts:empty { display: none; }

/* Secondary topic-chip nav — sits under .journey-progress in the header.
   Shown only on Round 2 + Round 3. 5 chips, one per topic, with the
   current topic highlighted. Visited topics are clickable to back-jump;
   future topics are disabled. */
.journey-progress-secondary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.journey-progress-secondary[hidden] { display: none; }

.journey-progress-secondary__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  min-width: 0;  /* allow text truncation */
}

.journey-progress-secondary__num {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.journey-progress-secondary__name {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* Visited (already seen, clickable) — JOBJACK green text + number. */
.journey-progress-secondary__chip--visited {
  border-color: rgba(0, 108, 81, 0.25);
  color: var(--jj-green-dark);
}

.journey-progress-secondary__chip--visited .journey-progress-secondary__num {
  background: rgba(0, 108, 81, 0.12);
  color: var(--jj-green-dark);
}

.journey-progress-secondary__chip--visited:hover {
  background: rgba(0, 108, 81, 0.06);
  border-color: var(--jj-green-dark);
}

/* Current — solid green pill so user knows where they are. */
.journey-progress-secondary__chip--current {
  background: var(--jj-green-dark);
  color: #fff;
  border-color: var(--jj-green-dark);
  cursor: default;
}

.journey-progress-secondary__chip--current .journey-progress-secondary__num {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* Future — dimmed, not clickable. */
.journey-progress-secondary__chip--future {
  cursor: not-allowed;
  opacity: 0.55;
}

.journey-progress-secondary__chip[disabled] { pointer-events: none; }

.journey-progress__seg {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  border-bottom: 3px solid var(--border-subtle);
  padding: 10px 4px 12px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-snap), color var(--t-snap), opacity var(--t-snap);
}

.journey-progress__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-warm);
  border: 1.5px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: var(--t-snap);
}

.journey-progress__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;  /* allow ellipsis to engage on .journey-progress__label */
}

.journey-progress__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.journey-progress__time {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  opacity: 0.7;
  white-space: nowrap;
}

.journey-progress__seg--current .journey-progress__time {
  color: var(--jj-green-dark);
  opacity: 1;
}

.journey-progress__seg:hover .journey-progress__num {
  border-color: var(--jj-green-dark);
  color: var(--jj-green-dark);
}

.journey-progress__seg--current {
  border-bottom-color: var(--jj-green-dark);
}
.journey-progress__seg--current .journey-progress__num {
  background: var(--jj-green-dark);
  border-color: var(--jj-green-dark);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(0,108,81,0.12);
}
.journey-progress__seg--current .journey-progress__label {
  color: var(--text-primary);
  font-weight: 700;
}

.journey-progress__seg--complete {
  border-bottom-color: var(--jj-green);
}
.journey-progress__seg--complete .journey-progress__num {
  background: var(--jj-green);
  border-color: var(--jj-green);
  color: #fff;
}
.journey-progress__seg--complete .journey-progress__num::after {
  content: '✓';
  font-size: 13px;
}
.journey-progress__seg--complete .journey-progress__num span,
.journey-progress__seg--complete > .journey-progress__num {
  /* Hide the original number; the ::after check replaces it */
}
.journey-progress__seg--complete .journey-progress__num {
  font-size: 0;  /* hides the "1/2/3/4"; check shows via ::after */
}
.journey-progress__seg--complete .journey-progress__num::after {
  font-size: 13px;
}
.journey-progress__seg--complete .journey-progress__label {
  color: var(--text-body);
}

/* ── Preliminary-report reward callout ──
   Lives in the title-row, in a grid cell aligned with the Round 2 → Round 3
   boundary of the nav below. Locked (muted, lock icon, no-op) before
   Round 2 completes; unlocked (lime pill with star + gentle pulse,
   clickable to download) after. */
.journey-progress__callout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px dashed var(--border-subtle);
  border-radius: 999px;
  padding: 5px 12px 6px;
  font-family: inherit;
  cursor: default;
  transition: var(--t-snap);
}

.journey-progress__callout-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.journey-progress__callout-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.journey-progress__callout-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.journey-progress__callout-sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.8;
}

/* Locked: dimmed, lock icon, no hover */
.journey-progress__callout--locked {
  opacity: 0.55;
}
.journey-progress__callout--locked .journey-progress__callout-icon {
  font-size: 11px;
  filter: grayscale(1);
}

/* Unlocked: lime accent, star, hover lift, clickable */
.journey-progress__callout--unlocked {
  background: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%);
  border-style: solid;
  border-color: #65A30D;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(101, 163, 13, 0.18);
}
.journey-progress__callout--unlocked .journey-progress__callout-icon {
  color: #65A30D;
}
.journey-progress__callout--unlocked .journey-progress__callout-label {
  color: #1a2e05;
}
.journey-progress__callout--unlocked .journey-progress__callout-sub {
  color: #3F6212;
  opacity: 1;
}
.journey-progress__callout--unlocked:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(101, 163, 13, 0.25);
}
.journey-progress__callout--unlocked:active {
  transform: translateY(0);
}

/* Subtle pulse on unlocked chip to draw the eye to the reward */
@keyframes journey-callout-pulse {
  0%, 100% { box-shadow: 0 1px 3px rgba(101, 163, 13, 0.18); }
  50%      { box-shadow: 0 1px 3px rgba(101, 163, 13, 0.18), 0 0 0 4px rgba(190, 242, 100, 0.35); }
}
.journey-progress__callout--unlocked {
  animation: journey-callout-pulse 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .journey-progress__callout--unlocked { animation: none; }
}

.journey-progress__seg--future {
  cursor: pointer;
  opacity: 0.65;
}
.journey-progress__seg--future:hover {
  opacity: 1;
}

/* ── Two-pane layout (§15.1) ── */
.journey-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 80px 80px;
  display: grid;
  grid-template-columns: 56% 44%;
  gap: 56px;
  align-items: start;
}

.journey-visual-pane {
  position: relative;
  min-height: 480px;
}

.journey-visual-pane svg.diagram {
  width: 100%;
  height: auto;
  display: block;
}

.journey-card-pane {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Left-pane explainer (visible during Pass 0; replaced by the SVG in Pass 1+) */
.journey-explainer { padding: 0; }
.journey-explainer[hidden] { display: none; }

.explainer-welcome {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.explainer-welcome__brand {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--jj-green-dark);
  margin: 0;
}

.explainer-welcome__h {
  font-size: 38px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.7px;
  line-height: 1.1;
  margin: 0 0 8px;
}

.explainer-welcome__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.explainer-welcome__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--jj-green) 0%, var(--jj-green-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,108,81,0.22);
  border: 2px solid #fff;
}

.explainer-welcome__initials {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

.explainer-welcome__bynamerole {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.explainer-welcome__body {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.6;
  margin: 4px 0;
}

.explainer-welcome__use {
  margin: 4px 0 8px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.explainer-welcome__use li {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.6;
}

.explainer-welcome__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 12px 0 4px;
}

.explainer-welcome__what {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-muted);
  margin: 4px 0 4px;
}

.explainer-welcome__perks {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.explainer-welcome__perks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.5;
}
.explainer-welcome__check {
  color: var(--jj-green-dark);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.explainer-welcome__close {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 6px;
}

/* Step explainers (industry, store-count) */
.explainer-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.explainer-step__lead {
  font-size: 14px;
  font-weight: 600;
  color: var(--jj-green-dark);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.explainer-step__h {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin: 0 0 6px;
}
.explainer-step__body {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
}
.explainer-step__pill {
  background: rgba(0,108,81,0.06);
  border-left: 3px solid var(--jj-green-dark);
  padding: 10px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Question card ── */
.question-card {
  position: relative;  /* anchor for absolute children like .slide__fit-toggle */
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 32px;
  width: 100%;
  max-width: 480px;
  /* Slide-in via transform only. Opacity stays 1 so the card is visible even
     if the CSS animation timeline is throttled (e.g., headless preview). */
  animation: card-slide-in var(--t-card) ease-out;
  animation-fill-mode: forwards;
}

@keyframes card-slide-in {
  from { transform: translateX(40px); }
  to   { transform: translateX(0); }
}

.question-card__narrator {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 16px;
  min-height: 56px;
  line-height: 1.5;
}

.question-card__h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 24px 0 8px;
  line-height: 1.3;
}

.question-card__hint {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.question-card__actions {
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ── Slider input ── */
.slider-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--jj-green-dark);
}

.slider-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--jj-green-dark);
  min-width: 70px;
  text-align: right;
}

.slider-track-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* ── Segmented buttons (4-option scale, yes/no, etc.) ── */
.segmented {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.segmented__btn {
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-body);
  text-align: left;
  cursor: pointer;
  transition: var(--t-snap);
}

.segmented__btn:hover {
  border-color: var(--jj-green-dark);
  color: var(--jj-green-dark);
}

.segmented__btn--selected {
  background: var(--jj-green-dark);
  color: #fff;
  border-color: var(--jj-green-dark);
}

/* ── Pain bar selector (§15.8) — "Is this a problem? 1-5" ── */
.pain-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pain-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0 14px 0 0;
  height: 48px;
  overflow: hidden;
  cursor: pointer;
  transition: var(--t-snap);
}

.pain-bar__score {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  margin-left: 5px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-body);
  flex-shrink: 0;
  transition: var(--t-snap);
}

.pain-bar__fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--jj-green);
  transition: width 200ms var(--ease-snap);
  pointer-events: none;
}

.pain-bar__label {
  position: relative;
  z-index: 2;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-body);
  letter-spacing: 0.2px;
  pointer-events: none;
}

.pain-bar:hover .pain-bar__fill { width: 100%; }
.pain-bar:hover .pain-bar__label { color: var(--jj-green-dark); }
.pain-bar:hover .pain-bar__score { background: #fff; border-color: var(--jj-green-dark); color: var(--jj-green-dark); }

.pain-bar--selected .pain-bar__fill { width: 100%; }
.pain-bar--selected .pain-bar__label { color: var(--jj-green-dark); }
.pain-bar--selected .pain-bar__score {
  background: var(--jj-green-dark);
  border-color: var(--jj-green-dark);
  color: #fff;
}

/* "I'm not sure" link below sliders (allowNotSure) */
.not-sure-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  background: transparent;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--t-snap);
}

.not-sure-link__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border-subtle);
  font-size: 12px;
  font-weight: 700;
  color: transparent;
  transition: var(--t-snap);
}

.not-sure-link:hover {
  border-color: var(--jj-green-dark);
  color: var(--jj-green-dark);
}
.not-sure-link:hover .not-sure-link__check {
  border-color: var(--jj-green-dark);
}

.not-sure-link--selected {
  background: rgba(0,108,81,0.08);
  border-color: var(--jj-green-dark);
  border-style: solid;
  color: var(--jj-green-dark);
  font-weight: 600;
}

.not-sure-link--selected .not-sure-link__check {
  background: var(--jj-green-dark);
  border-color: var(--jj-green-dark);
  color: #fff;
}

.slider--from-default {
  /* visual cue when user opted in to "I'm not sure" */
  opacity: 0.7;
  filter: saturate(0.6);
}

/* ── Primary button (§15.8) ── */
.btn-primary {
  background: var(--jj-green-dark);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  padding: 12px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: var(--t-snap);
}

.btn-primary:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,108,81,0.22); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-button);
}

/* ── Intro card (Pass 0 first screen) ── */
.intro-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.intro-card__brand {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--jj-green-dark);
  margin: 0;
}

.intro-card__h1 {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.5px;
}

.intro-card__body {
  font-size: 16px;
  color: var(--text-body);
  margin: 0 0 16px;
  line-height: 1.55;
}

.intro-card__cta { align-self: flex-start; }

/* ── About-stores form ── */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
}

.form-select,
.form-input {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  outline: none;
  transition: var(--t-snap);
}

.form-select:focus,
.form-input:focus {
  border-color: var(--jj-green-dark);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,108,81,0.10);
}

/* ── Multi-select (checkbox-like) ── */
.multi-select {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.multi-select__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-body);
  text-align: left;
  cursor: pointer;
  transition: var(--t-snap);
}

.multi-select__btn:hover {
  border-color: var(--jj-green-dark);
  color: var(--jj-green-dark);
}

.multi-select__check {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-subtle);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  transition: var(--t-snap);
}

.multi-select__btn--selected {
  background: rgba(0,108,81,0.06);
  border-color: var(--jj-green-dark);
  color: var(--jj-green-dark);
}

.multi-select__btn--selected .multi-select__check {
  background: var(--jj-green-dark);
  border-color: var(--jj-green-dark);
}

.multi-select__btn--selected .multi-select__check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.multi-select__label { line-height: 1.4; }

/* "Other (specify)" inline input that appears when the Other option is ticked */
.multi-select__other-input {
  display: block;
  margin-top: 6px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: #fff;
  outline: none;
  transition: var(--t-snap);
  width: 100%;
}

.multi-select__other-input:focus {
  border-color: var(--jj-green-dark);
  box-shadow: 0 0 0 3px rgba(0,108,81,0.10);
}

.multi-select__other-input[hidden] { display: none; }

/* Composite text sub-question (e.g. "Which ATS do you use?" follow-up). */
.composite__text-row {
  margin-top: 4px;
}

.composite__text-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: #fff;
  outline: none;
  transition: var(--t-snap);
}

.composite__text-input:focus {
  border-color: var(--jj-green-dark);
  box-shadow: 0 0 0 3px rgba(0,108,81,0.10);
}

.composite__text-input::placeholder {
  color: #9ca3af;
}

/* Hidden composite sub-questions (showWhen unsatisfied) */
.composite__sub[hidden] { display: none; }

/* ── Reprioritise list (drag-to-reorder) ── */
.reprio-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reprio-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: grab;
  user-select: none;
  transition: var(--t-snap);
}

.reprio-row:hover {
  border-color: var(--jj-green-dark);
  background: #fff;
}

.reprio-row--dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.reprio-row__handle {
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 4px 5px;
  border-radius: 6px;
  background: var(--surface-warm);
  flex-shrink: 0;
  transition: var(--t-snap);
}

/* On row hover the grip lights up green so it reads as "grab me to drag". */
.reprio-row:hover .reprio-row__handle {
  background: #ecfccb;
  color: var(--jj-green-dark);
}
.reprio-row--dragging .reprio-row__handle {
  background: #ecfccb;
  color: var(--jj-green-dark);
}

.reprio-row__pos {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--jj-green-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reprio-row__title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.reprio-row__rating {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.reprio-rating--huge     { background: #fee2e2; color: var(--jj-red-dark); }
.reprio-rating--big      { background: #fed7aa; color: #9a3412; }
.reprio-rating--moderate { background: #fef3c7; color: #92400e; }
.reprio-rating--small    { background: #ecfccb; color: #3f6212; }
.reprio-rating--none     { background: #e5e7eb; color: var(--text-muted); }
.reprio-rating--null     { background: #e5e7eb; color: var(--text-muted); }

/* Wider card pane for reprioritise (it has a list, not a single input) */
.question-card:has(.reprio-list) {
  max-width: 560px;
}

/* ── Sentiment (5-point financial-impact scale) ── */
.sentiment {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.sentiment__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--t-snap);
}

.sentiment__btn:hover {
  border-color: var(--jj-green-dark);
  background: #fff;
}

.sentiment__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-body);
  flex-shrink: 0;
  transition: var(--t-snap);
}

.sentiment__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-body);
}

.sentiment__btn--selected {
  background: rgba(0,108,81,0.06);
  border-color: var(--jj-green-dark);
}

.sentiment__btn--selected .sentiment__num {
  background: var(--jj-green-dark);
  border-color: var(--jj-green-dark);
  color: #fff;
}

.sentiment__btn--selected .sentiment__label {
  color: var(--jj-green-dark);
  font-weight: 600;
}

/* ── NumberOrEstimate (split toggle: I have a number / I don't know) ── */
.num-est {
  margin-bottom: 16px;
}

.num-est__toggle {
  display: flex;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 18px;
}

.num-est__toggle-btn {
  flex: 1;
  background: #fff;
  border: none;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-body);
  cursor: pointer;
  transition: var(--t-snap);
}

.num-est__toggle-btn + .num-est__toggle-btn {
  border-left: 1px solid var(--border-subtle);
}

.num-est__toggle-btn:hover {
  background: var(--surface-warm);
}

.num-est__toggle-btn--selected {
  background: var(--jj-green-dark);
  color: #fff;
}

.num-est__toggle-btn--selected:hover {
  background: var(--jj-green-dark);
}

.num-est__estimate {
  background: var(--surface-warm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
  text-align: left;
}

.num-est__estimate-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.num-est__estimate-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--jj-green-dark);
  letter-spacing: -0.5px;
}

.num-est__estimate-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}

.num-est__estimate-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ── Benchmark anchor (Pass 2, HUGE topics only when sourced) ── */
.benchmark-anchor {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(0,108,81,0.04);
  border-left: 3px solid var(--jj-green-dark);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  color: var(--text-body);
}

.benchmark-anchor__label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  color: var(--jj-green-dark);
}

.benchmark-anchor__val {
  font-weight: 700;
  color: var(--text-primary);
  margin-left: 4px;
}

.benchmark-anchor__source {
  color: var(--text-muted);
  font-size: 11px;
  margin-left: 4px;
}

/* ── Summary card (Pass 3) ── */
.summary__one-liner {
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 500;
}

.summary__estimate {
  background: var(--surface-warm);
  border-left: 4px solid var(--jj-green-dark);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 18px;
  margin: 16px 0;
}

.summary__estimate-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.summary__estimate-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--jj-green-dark);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

/* Drill-down toggle (collapsed → expanded) */
.drill-toggle {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--jj-green-dark);
  text-align: left;
  cursor: pointer;
  transition: var(--t-snap);
}

.drill-toggle:hover {
  background: rgba(0,108,81,0.04);
  border-color: var(--jj-green-dark);
}

.drill-toggle__chev {
  display: inline-block;
  margin-right: 8px;
  transition: transform var(--t-snap);
}

.drill-toggle--open .drill-toggle__chev {
  transform: rotate(90deg);
}

.drill-panel {
  margin-top: 12px;
  padding: 16px;
  background: var(--surface-warm);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.drill-panel[hidden] { display: none; }

.drill-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drill-input__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.drill-input__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
}

.drill-input__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--jj-green-dark);
}

.drill-input__unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
}

.drill-input__slider {
  width: 100%;
  accent-color: var(--jj-green-dark);
}

.drill-panel__empty {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

/* ── Finale list (placeholder) ── */
.finale-list {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.finale-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface-warm);
  border-radius: var(--radius-sm);
}

.finale-row__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.finale-row__value {
  font-size: 16px;
  font-weight: 700;
  color: var(--jj-green-dark);
}

.finale-row--muted .finale-row__title,
.finale-row--muted .finale-row__value {
  color: var(--text-muted);
}

.btn-secondary {
  background: transparent;
  color: var(--jj-green-dark);
  border: 1.5px solid var(--jj-green-dark);
  border-radius: var(--radius-lg);
  padding: 10px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--t-snap);
}

.btn-secondary:hover {
  background: var(--jj-green-dark);
  color: #fff;
}

/* Finale cinema (Phase 5 cinematic reveal — loss vs. saving) */
.finale-cinema {
  background: linear-gradient(180deg, rgba(0,108,81,0.04) 0%, rgba(255,255,255,0) 100%);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  margin: 16px 0;
}

.finale-cinema__pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.finale-cinema__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.finale-cinema__value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.finale-cinema__value--loss   { color: var(--jj-red-dark); }
.finale-cinema__value--saving { color: var(--jj-green-dark); }

.finale-cinema__divider {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

/* ────────────────────────────────────────────────────────────────────────────
   §9 Alive Patterns (Phase 5)
   ──────────────────────────────────────────────────────────────────────────── */

/* Typewriter narrator — caret pulse while revealing */
.typewriter--active::after {
  content: '▋';
  display: inline-block;
  margin-left: 2px;
  color: var(--jj-green-dark);
  animation: typewriter-caret 700ms ease-in-out infinite;
}

@keyframes typewriter-caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Spring physics on btn-primary — pronounced press + bounce on release */
.btn-primary {
  transition: transform var(--t-snap), box-shadow var(--t-snap), background var(--t-snap);
}

.btn-primary:hover  { transform: scale(1.03); box-shadow: 0 6px 16px rgba(0,108,81,0.24); }
.btn-primary:active { transform: scale(0.95); transition: transform 80ms ease-out; }

@keyframes btn-spring {
  0%   { transform: scale(0.95); }
  40%  { transform: scale(1.04); }
  70%  { transform: scale(0.99); }
  100% { transform: scale(1.00); }
}

.btn-primary--springing { animation: btn-spring 360ms var(--ease-spring); }

/* Drill-down spring expansion (replaces the bare hidden/display toggle) */
.drill-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 360ms var(--ease-spring), opacity 200ms ease-out, padding 200ms ease-out, margin-top 200ms ease-out;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

.drill-panel:not([hidden]) {
  max-height: 800px;
  opacity: 1;
  padding-top: 16px;
  padding-bottom: 16px;
  margin-top: 12px;
}

.drill-panel[hidden] { display: block; }  /* override display:none so the transition can run */

.drill-toggle__chev {
  transition: transform var(--t-spring);
}

/* Breathing green SVG bar (alive pattern §9) — green rects scale 1.0↔1.02 over 4s.
   Selector targets only stage-1 / stage-2 green elements via fill colour, since
   drawStage builds elements dynamically. Red elements explicitly do NOT breathe. */
@keyframes breathe-green {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}

svg.diagram rect[fill="#59B367"],
svg.diagram path[fill="#59B367"] {
  transform-origin: center;
  transform-box: fill-box;
  animation: breathe-green 4s ease-in-out infinite;
}

svg.diagram rect[fill="#E53935"],
svg.diagram path[fill="#E53935"] {
  /* No animation — red stays still. Per PLAN.md §9: "life vs. absence-of-life" */
  animation: none;
}

/* Pass-end celebration: huge multi-ring firework from screen centre.
   Particles use per-element CSS vars (--angle, --spread, --size, --color,
   --delay, --dur) so each ring can animate with its own palette and scale
   off a single keyframe. */
.celebration-burst {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 9999;
}

/* Bright center flash that pulses outward briefly. */
.celebration-flash {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(167,243,208,0.6) 35%, rgba(89,179,103,0) 70%);
  filter: blur(2px);
  animation: celebration-flash 600ms ease-out forwards;
}

@keyframes celebration-flash {
  0%   { width: 0;     height: 0;     opacity: 0.9; }
  40%  { width: 220px; height: 220px; opacity: 0.55; }
  100% { width: 360px; height: 360px; opacity: 0;   }
}

.celebration-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 9px);
  height: var(--size, 9px);
  background: var(--color, var(--jj-green));
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 12px var(--color, rgba(89,179,103,0.7)),
              0 0 4px var(--color, rgba(89,179,103,0.9));
  animation: particle-fly var(--dur, 1000ms) cubic-bezier(0.18, 0.7, 0.3, 1.0) forwards;
  animation-delay: var(--delay, 0ms);
  will-change: transform, opacity;
}

@keyframes particle-fly {
  0%   { transform: rotate(var(--angle)) translateY(0)                      scale(0.4); opacity: 0; }
  10%  { transform: rotate(var(--angle)) translateY(calc(-1 * var(--spread, 200px) * 0.3)) scale(1.1); opacity: 1; }
  70%  { transform: rotate(var(--angle)) translateY(calc(-1 * var(--spread, 200px)))      scale(0.95); opacity: 0.95; }
  100% { transform: rotate(var(--angle)) translateY(calc(-1 * var(--spread, 200px) * 1.15)) scale(0.4); opacity: 0; }
}

/* Reduced-motion override (per PLAN.md §15.7): kills all alive animations */
@media (prefers-reduced-motion: reduce) {
  .typewriter--active::after { display: none; }
  svg.diagram rect[fill="#59B367"],
  svg.diagram path[fill="#59B367"] { animation: none; }
  .celebration-burst { display: none; }
  .btn-primary--springing { animation: none; }
  .drill-panel { transition: none; }
}

/* ── Slide card (Pass 1 education) ── */
.slide__counter {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--jj-green-dark);
  margin: 0 0 12px;
}

/* "Stay in your store-level / site-level hat" callout — shown at the start
   of each round (round1-intro / round2-intro / round3-intro) to keep the
   user grounded in a per-store mindset rather than head-office aggregates.
   Sits between the narrator and the Next/Back row. */
.slide__hat-reminder {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 6px;
  padding: 10px 14px;
  background: rgba(0, 108, 81, 0.07);
  border-left: 3px solid var(--jj-green-dark);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: #1f2937;
}

.slide__hat-reminder-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.2;
}

.slide__hat-reminder-text {
  flex: 1;
}

.slide__hat-reminder-text strong {
  color: var(--jj-green-dark);
}

/* MisFIT/FIT toggle — top-right corner of the # of Hires slide. The slide's
   .question-card pane is position: relative (set in card-pane CSS), so we
   absolute-position this segmented inside it. Two-button pill that swaps
   the active half on click. */
.slide__fit-toggle {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  z-index: 2;
}

.slide__fit-toggle-btn {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.slide__fit-toggle-btn:hover {
  color: #111827;
}

.slide__fit-toggle-btn--active {
  background: #fff;
  color: var(--jj-green-dark);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,108,81,0.15);
}

.slide__heading {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin: 0 0 4px;
}

.slide__subheading {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin: 0 0 16px;
}

.slide__narrator {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.65;
  margin: 0 0 8px;
}

/* Subheading on standard cards (rating / sentiment / etc.) when the heading
   plays a "topic context" role rather than the question itself. */
.question-card__subheading {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin: -6px 0 14px;
}

/* Bulleted list rendered after a slide / standard narrator (e.g., overview slide).
   Pulls up tight against the narrator above so the lead-in feels like part of
   the same block, not a separate paragraph + list. */
.question-card__bullets {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.question-card__narrator + .question-card__bullets {
  margin-top: 0;
}

/* Pull the narrator's bottom margin tight when bullets follow directly */
.question-card__narrator:has(+ .question-card__bullets) {
  margin-bottom: 4px;
}

.question-card__bullets li {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.55;
}

.question-card__bullets strong { color: var(--text-primary); }

/* Inline emphasis used in narratorHtml — e.g., "How big of a [pain] is this?" */
.emphasis-pain {
  color: var(--jj-red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight: 700;
}

/* ── Welcome card (right pane on the welcome step) ── */
.welcome-card__lead {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-muted);
  font-weight: 600;
  margin: 0 0 8px;
}

.welcome-card__big {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin: 0 0 18px;
}

/* ── "Welcome back" restore banner ──
   Sits at the very top of the Welcome card when the email lookup finds a
   prior session for this user. Lime accent so it reads as a reward (their
   data is safe!) rather than a warning. Two CTAs: Continue / Start fresh. */
.welcome-restore {
  background: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%);
  border: 1.5px solid #BEF264;
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.welcome-restore[hidden] { display: none; }
.welcome-restore__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.welcome-restore__wave {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.welcome-restore__copy { display: flex; flex-direction: column; gap: 2px; }
.welcome-restore__lead {
  font-size: 15px;
  font-weight: 700;
  color: #1a2e05;
  margin: 0;
}
.welcome-restore__sub {
  font-size: 12.5px;
  color: #3F6212;
  margin: 0;
  line-height: 1.4;
}
.welcome-restore__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.welcome-restore__actions .btn-primary,
.welcome-restore__actions .btn-secondary {
  flex: 1 1 auto;
  font-size: 13px;
  padding: 8px 14px;
}

/* Progressive 4-field welcome stack */
.welcome-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 8px;
}

.welcome-field {
  display: none;       /* hidden until unlocked */
  flex-direction: column;
  gap: 8px;
}

.welcome-field--unlocked {
  display: flex;
  animation: welcome-field-reveal 380ms var(--ease-spring);
  animation-fill-mode: forwards;
}

@keyframes welcome-field-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.welcome-field__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}

.welcome-field__input {
  font-size: 16px !important;
  padding: 12px 14px !important;
}

.welcome-field__error {
  font-size: 12px;
  font-weight: 500;
  color: var(--jj-red-dark);
  margin: 0;
  padding-left: 2px;
  animation: welcome-field-reveal 220ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .welcome-field--unlocked { animation: none; }
  .welcome-field__error { animation: none; }
}

/* ── Industry picker (grid of category cards) ── */
.industry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 16px;
}

.industry-card {
  background: var(--surface-warm);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--t-snap), background var(--t-snap), box-shadow var(--t-snap);
}

.industry-card:hover {
  border-color: var(--jj-green-dark);
  background: #fff;
}

.industry-card__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 14px 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.industry-card__icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.industry-card__label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.industry-card__chev {
  font-size: 14px;
  color: var(--text-muted);
  transition: transform var(--t-spring);
}

.industry-card--open .industry-card__chev {
  transform: rotate(90deg);
}

.industry-card--open {
  background: #fff;
  border-color: var(--jj-green-dark);
  box-shadow: 0 4px 12px rgba(0,108,81,0.10);
  grid-column: span 2;  /* Open category takes full width to fit subs nicely */
}

.industry-card--selected:not(.industry-card--open) {
  background: rgba(0,108,81,0.06);
  border-color: var(--jj-green-dark);
  box-shadow: 0 0 0 1px var(--jj-green-dark) inset;
}

.industry-card__subs {
  display: none;
  padding: 4px 14px 14px 50px;
  flex-direction: column;
  gap: 6px;
}

.industry-card--open .industry-card__subs {
  display: flex;
}

.industry-sub {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
  text-align: left;
  cursor: pointer;
  transition: var(--t-snap);
}

.industry-sub:hover {
  border-color: var(--jj-green-dark);
  background: var(--surface-warm);
}

.industry-sub--selected {
  background: var(--jj-green-dark);
  color: #fff;
  border-color: var(--jj-green-dark);
}

/* "Other (specify)" input wrapper. Two placements:
     • Top-level Other card → block sits below the head, full-width with the
       same horizontal padding (no 50px icon offset — the input takes the
       full width of the expanded card so it feels intentional).
     • Sub-level Other (Retail → Other / Hospitality → Other) → block sits
       inline beneath the selected sub button inside the subs list, which
       already has 50px left padding, so this nested block uses 0 padding
       and a small top margin to fit. */
.industry-card__other-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 18px 16px 18px;
  width: 100%;
  box-sizing: border-box;
}

.industry-card__other-block--sub {
  padding: 6px 0 2px 0;
  margin-top: 2px;
}

.industry-card__other-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.industry-card__other-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  border: 1.5px solid var(--jj-green-dark);
  border-radius: var(--radius-sm);
  background: #fff;
  outline: none;
  transition: box-shadow var(--t-snap);
}

.industry-card__other-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.industry-card__other-input:focus {
  border-color: var(--jj-green-dark);
  box-shadow: 0 0 0 3px rgba(0,108,81,0.18);
}

/* ── Back button (paired with btn-primary in question-card__actions) ── */
.btn-back {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 10px 14px 10px 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--t-snap);
  margin-right: auto;  /* push to the left, leaving Next on the right */
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-back:hover {
  color: var(--jj-green-dark);
}

.btn-back__chev {
  font-size: 18px;
  line-height: 1;
  transition: transform var(--t-snap);
}

.btn-back:hover .btn-back__chev {
  transform: translateX(-2px);
}

/* ── Composite card (multiple sub-questions in one card) ── */
.composite {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 8px 0 16px;
}

.composite__sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border-subtle);
}

.composite__sub:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.composite__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.composite__hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 4px;
}

.segmented--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}

.segmented--inline .segmented__btn {
  flex: 1 1 auto;
  text-align: center;
  padding: 8px 12px;
  font-size: 13px;
}

/* Composite slider tightening */
.composite__sub .slider-row {
  margin-top: 4px;
  margin-bottom: 0;
}

/* ── Topic pill (always visible in Round 2/3 cards) ── */
.topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--jj-green-dark);
  background: rgba(0,108,81,0.08);
  border-radius: var(--radius-lg);
  padding: 6px 12px;
  margin: 0 0 12px;
  align-self: flex-start;
}

.topic-pill__divider {
  color: var(--text-muted);
  letter-spacing: 0;
  font-weight: 400;
}

.topic-pill__counter { opacity: 0.85; }

/* ── Topic intro splash (brief beat between topics in Round 2/3) ── */
.topic-intro-splash {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 280px;
  padding: 40px 24px;
  animation: topic-intro-reveal 600ms var(--ease-spring);
  animation-fill-mode: both;
}

.topic-intro-splash__counter {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--jj-green-dark);
  margin: 0 0 12px;
}

.topic-intro-splash__name {
  font-size: 38px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.7px;
  line-height: 1.1;
  margin: 0;
}

@keyframes topic-intro-reveal {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .topic-intro-splash { animation: none; }
}

/* ── Hidden index.html scaffolds (rendered for stage-animations.js compat) ── */
.journey-scaffolds {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ────────────────────────────────────────────────────────────────────────────
   Report (Phase 5 — print stylesheet → "Save as PDF")
   ──────────────────────────────────────────────────────────────────────────── */

#print-report { display: none; }  /* hidden on screen; only @media print shows it */

@media print {
  /* Page setup: A4 portrait with comfortable margins */
  @page { size: A4 portrait; margin: 18mm 16mm; }

  /* Hide the journey UI when printing */
  .journey-page,
  .journey-interstitial,
  .banner-private { display: none !important; }

  body { background: #fff !important; color: #111 !important; font-size: 11pt; }

  /* Force browsers to actually print backgrounds and colors — without this,
     Chrome/Safari strip the green tints, CTA card, and stat chips, leaving
     the report flat-grey. Pair with the user-side "Background graphics"
     toggle which most users now leave on. */
  #print-report,
  #print-report * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #print-report { display: block; }

  .report-page {
    page-break-after: always;
    page-break-inside: avoid;
    min-height: 100vh;
  }
  .report-page:last-child { page-break-after: auto; }

  /* ─── Cover (page 1) — bold full-panel dark-green hero with lime accents.
     The hero flexes to fill the whole printable page. Decorative organic
     blobs sit top-right / bottom-left like the 2026 Hiring Guide cover. ─── */
  .report-page--cover {
    padding: 0;
    display: flex;
  }

  .report-hero {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(155deg, #07684F 0%, #064E3B 55%, #053A2C 100%);
    color: #ffffff;
    border-radius: 4mm;
    padding: 16mm 15mm;
  }

  /* Decorative blobs — lime + light-green radial washes, low opacity. */
  .report-hero__shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(40mm 40mm at 88% 6%, rgba(190,242,100,0.28), rgba(190,242,100,0) 70%),
      radial-gradient(55mm 55mm at 104% 18%, rgba(134,239,172,0.20), rgba(134,239,172,0) 72%),
      radial-gradient(48mm 48mm at -8% 96%, rgba(190,242,100,0.16), rgba(190,242,100,0) 70%);
  }

  .report-hero__top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: auto;
  }
  .report-hero__wordmark {
    font-family: 'Poppins', sans-serif;
    font-size: 18pt;
    font-weight: 700;
    letter-spacing: 0.5pt;
    color: #ffffff;
  }
  .report-hero__wordmark-accent { color: #BEF264; }
  .report-hero__year {
    font-family: 'Poppins', sans-serif;
    font-size: 11pt;
    font-weight: 700;
    color: #064E3B;
    background: #BEF264;
    border-radius: 999px;
    padding: 2mm 6mm;
  }

  .report-hero__head {
    position: relative;
    margin: 14mm 0;
  }
  .report-hero__eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: 9pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2pt;
    color: #BEF264;
    margin: 0 0 4mm;
  }
  .report-hero__title {
    font-family: 'Poppins', sans-serif;
    font-size: 38pt;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1pt;
    color: #ffffff;
    margin: 0 0 5mm;
  }
  .report-hero__company {
    font-family: 'Poppins', sans-serif;
    font-size: 15pt;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 2mm;
  }
  .report-hero__meta {
    font-size: 11pt;
    color: rgba(255,255,255,0.78);
    margin: 0;
    letter-spacing: 0.2pt;
  }

  .report-hero__headline {
    position: relative;
    margin-top: auto;
    background: rgba(255,255,255,0.07);
    border: 1pt solid rgba(190,242,100,0.55);
    border-radius: 3mm;
    padding: 8mm;
  }
  .report-hero__headline-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 9pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8pt;
    color: #BEF264;
    margin-bottom: 3mm;
  }
  .report-hero__headline-value {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 46pt;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1.5pt;
    color: #ffffff;
    margin-bottom: 4mm;
  }
  /* Short-mode cover headline: the "value" is a teaser line, not a big rand */
  .report-hero__headline-value--short {
    font-size: 20pt;
    line-height: 1.2;
    letter-spacing: -0.4pt;
  }
  .report-hero__headline-sub {
    display: block;
    font-size: 10pt;
    color: rgba(255,255,255,0.82);
    line-height: 1.5;
  }

  .report-page__inner { padding-top: 0; }

  .report-h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 18pt;
    font-weight: 600;
    margin: 0 0 6mm;
    color: #111;
  }
  .report-h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 12pt;
    font-weight: 600;
    margin: 8mm 0 3mm;
    color: #111;
  }

  .report-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4mm;
    margin-bottom: 8mm;
  }

  .report-summary-card {
    background: #f9fafb;
    border-radius: 2mm;
    padding: 5mm 5mm;
    border-left: 3pt solid #e5e7eb;
  }

  .report-summary-card__label {
    display: block;
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1pt;
    color: #6b7280;
    margin-bottom: 2mm;
  }

  .report-summary-card__value {
    display: block;
    font-size: 18pt;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.3pt;
  }

  .report-summary-card__value--loss   { color: #8B0000; }
  .report-summary-card__value--saving { color: #006C51; }

  .report-summary-grid > .report-summary-card:nth-child(1) { border-left-color: #8B0000; }
  .report-summary-grid > .report-summary-card:nth-child(2) { border-left-color: #006C51; }

  .report-pain-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .report-pain-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 4mm;
    align-items: baseline;
    padding: 3mm 0;
    border-bottom: 0.4pt solid #e5e7eb;
    font-size: 11pt;
  }

  .report-pain-item__rank {
    width: 6mm;
    height: 6mm;
    border-radius: 50%;
    background: #006C51;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8pt;
    font-weight: 700;
  }

  .report-pain-item__title { font-weight: 600; color: #111; }

  .report-pain-item__rating {
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8pt;
    padding: 1mm 3mm;
    background: #fee2e2;
    color: #8B0000;
    border-radius: 8mm;
  }

  .report-pain-item__value {
    font-weight: 700;
    color: #006C51;
  }

  .report-topic-summary {
    background: #f9fafb;
    border-radius: 2mm;
    padding: 5mm;
    margin-bottom: 6mm;
  }

  .report-topic-summary__rating {
    display: inline-block;
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1pt;
    padding: 1mm 3mm;
    border-radius: 8mm;
    background: #fee2e2;
    color: #8B0000;
    margin-bottom: 3mm;
  }

  .report-topic-summary__rating--big      { background: #fed7aa; color: #9a3412; }
  .report-topic-summary__rating--moderate { background: #fef3c7; color: #92400e; }
  .report-topic-summary__rating--small    { background: #ecfccb; color: #3f6212; }
  .report-topic-summary__rating--none     { background: #e5e7eb; color: #6b7280; }
  .report-topic-summary__rating--null     { background: #e5e7eb; color: #6b7280; }

  .report-topic-summary__estimate {
    font-size: 22pt;
    font-weight: 700;
    color: #006C51;
    letter-spacing: -0.4pt;
    line-height: 1.1;
  }

  .report-topic-summary__label {
    font-size: 9pt;
    color: #6b7280;
    margin-top: 1mm;
  }

  .report-topic-empty {
    font-size: 10pt;
    color: #6b7280;
    font-style: italic;
  }

  .report-topic-meta {
    font-size: 10pt;
    color: #6b7280;
    margin-top: 4mm;
  }

  .report-input-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 3mm;
  }

  .report-input-row td {
    padding: 2.5mm 0;
    border-bottom: 0.3pt solid #e5e7eb;
    font-size: 10pt;
  }

  .report-input-row td:first-child { color: #374151; }

  .report-input-value {
    text-align: right;
    font-weight: 700;
    color: #006C51;
  }

  .report-method-seed {
    list-style: disc;
    padding-left: 5mm;
    margin: 2mm 0 6mm;
    font-size: 10pt;
  }

  .report-method-seed li { padding: 1mm 0; }

  .report-method-note {
    font-size: 10pt;
    color: #6b7280;
    margin: 0 0 3mm;
  }

  .report-disclaimer {
    margin-top: 10mm;
    font-size: 8pt;
    color: #6b7280;
    border-top: 0.4pt solid #e5e7eb;
    padding-top: 3mm;
  }

  /* ───── New v2 report classes — narrative, opportunity, system, proof, CTA ───── */

  .report-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6pt;
    color: #006C51;
    margin: 0 0 4mm;
  }

  .report-h2--narrative { font-size: 22pt; line-height: 1.2; margin-bottom: 6mm; }
  .report-h2__accent    { color: #006C51; font-weight: 700; }
  .report-h2--cta       { font-size: 22pt; line-height: 1.2; margin-bottom: 4mm; }

  .report-narrative-body {
    font-size: 11pt;
    line-height: 1.55;
    color: #374151;
    margin: 0 0 5mm;
  }

  /* Cover headline sub-line */
  .report-cover__headline-sub {
    display: block;
    font-size: 9pt;
    color: #374151;
    margin-top: 3mm;
    line-height: 1.45;
  }

  /* Page 2 — divider between "About this report" and "Why this matters" */
  .report-context-divider {
    height: 0;
    border-top: 0.5pt solid #d1fae5;
    margin: 7mm 0;
  }

  /* Page 2 — big stat callout (63% Google Reviews) */
  .report-context-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6mm;
    align-items: center;
    background: #f0fdf4;
    border-left: 4pt solid #006C51;
    border-radius: 2mm;
    padding: 6mm;
    margin: 4mm 0 6mm;
  }
  .report-context-stat__value {
    font-family: 'Poppins', sans-serif;
    font-size: 40pt;
    font-weight: 700;
    color: #006C51;
    letter-spacing: -1pt;
    line-height: 1;
  }
  .report-context-stat__lead {
    font-size: 13pt;
    font-weight: 600;
    color: #111;
    margin: 0 0 2mm;
    line-height: 1.3;
  }
  .report-context-stat__source {
    font-size: 9pt;
    color: #6b7280;
    margin: 0;
  }

  /* Page 3 — headline block */
  .report-headline-block {
    background: #f0fdf4;
    border-left: 4pt solid #006C51;
    border-radius: 2mm;
    padding: 6mm;
    margin: 0 0 6mm;
    text-align: center;
  }
  .report-headline-value {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 36pt;
    font-weight: 700;
    color: #006C51;
    letter-spacing: -0.8pt;
    line-height: 1;
    margin-bottom: 2mm;
  }
  .report-headline-sub {
    display: block;
    font-size: 10pt;
    color: #374151;
  }

  .report-summary-card__note {
    display: block;
    font-size: 8pt;
    color: #6b7280;
    margin-top: 2mm;
    line-height: 1.4;
  }

  /* Page 3 — top-3 pain list */
  .report-top3 {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .report-top3__item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 4mm;
    align-items: center;
    padding: 4mm 0;
    border-bottom: 0.4pt solid #e5e7eb;
  }
  .report-top3__rank {
    width: 7mm;
    height: 7mm;
    border-radius: 50%;
    background: #006C51;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9pt;
    font-weight: 700;
  }
  .report-top3__body { display: flex; flex-direction: column; gap: 1mm; }
  .report-top3__title { font-size: 11pt; font-weight: 600; color: #111; }
  .report-top3__sub   { font-size: 9pt; color: #6b7280; }
  .report-top3__chip {
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8pt;
    padding: 1mm 3mm;
    border-radius: 8mm;
  }
  .report-top3__chip--huge     { background: #fee2e2; color: #8B0000; }
  .report-top3__chip--big      { background: #fed7aa; color: #9a3412; }
  .report-top3__chip--moderate { background: #fef3c7; color: #92400e; }
  .report-top3__chip--small    { background: #ecfccb; color: #3f6212; }
  .report-top3__chip--none,
  .report-top3__chip--null     { background: #e5e7eb; color: #6b7280; }

  .report-top3__value {
    font-family: 'Poppins', sans-serif;
    font-size: 12pt;
    font-weight: 700;
    color: #006C51;
    text-align: right;
  }
  .report-top3__value--muted { color: #9ca3af; font-weight: 600; }
  /* # of Hires lever — stacked value + caption, since it's a % multiplier
     on the operational cost rather than a standalone rand figure. */
  .report-top3__value--lever {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
  }
  .report-top3__value-amt { font-size: 11pt; }
  .report-top3__value-cap {
    font-family: 'Poppins', sans-serif;
    font-size: 7pt;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4pt;
    margin-top: 0.5mm;
  }

  .report-empty {
    font-size: 10pt;
    color: #6b7280;
    font-style: italic;
    background: #f9fafb;
    padding: 4mm;
    border-radius: 2mm;
  }

  /* Pages 4-8 — Opportunity pages.
     Spacing here is intentionally tight so the per-hire value, framing,
     action list, proof, AND case study card all fit on a single A4 page.
     If you loosen any of these, expect the case study to start spilling. */

  /* Tighter h2 + eyebrow on opportunity pages specifically — keeps other
     pages (cover, methodology, etc.) at their more generous defaults. */
  .report-page--opportunity .report-eyebrow { margin-bottom: 2mm; }
  .report-page--opportunity .report-h2      { font-size: 16pt; margin-bottom: 2mm; line-height: 1.15; }

  .report-opp__subtitle {
    font-size: 11pt;
    color: #006C51;
    font-weight: 600;
    margin: -3mm 0 3mm;
  }
  .report-opp__chips {
    display: flex;
    gap: 2mm;
    flex-wrap: wrap;
    margin-bottom: 3mm;
  }

  .report-chip {
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8pt;
    padding: 1mm 3mm;
    border-radius: 8mm;
  }
  .report-chip--pain.report-chip--huge     { background: #fee2e2; color: #8B0000; }
  .report-chip--pain.report-chip--big      { background: #fed7aa; color: #9a3412; }
  .report-chip--pain.report-chip--moderate { background: #fef3c7; color: #92400e; }
  .report-chip--pain.report-chip--small    { background: #ecfccb; color: #3f6212; }
  .report-chip--pain.report-chip--none     { background: #e5e7eb; color: #6b7280; }
  .report-chip--impact { background: #e0f2fe; color: #075985; }
  .report-chip--muted  { background: #e5e7eb; color: #6b7280; }

  .report-opp__value {
    background: #f0fdf4;
    border-left: 4pt solid #006C51;
    border-radius: 2mm;
    padding: 3mm 5mm;
    margin: 0 0 3mm;
    display: flex;
    flex-direction: column;
    gap: 0.5mm;
  }
  .report-opp__value-label {
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1pt;
    color: #065F46;
  }
  .report-opp__value-amount {
    font-family: 'Poppins', sans-serif;
    font-size: 20pt;
    font-weight: 700;
    color: #006C51;
    letter-spacing: -0.5pt;
    line-height: 1.1;
  }
  .report-opp__value-amount-text {
    font-family: 'Poppins', sans-serif;
    font-size: 14pt;
    font-weight: 700;
    color: #006C51;
  }
  /* One-line calc breakdown — quiet, italic, sits under the value amount.
     Reads as "Calculated as: R1,800/day × 18 days × 140 hires/yr". */
  .report-opp__value-calc {
    display: block;
    font-size: 8.5pt;
    color: #6b7280;
    margin-top: 2mm;
    line-height: 1.35;
    font-style: italic;
  }
  .report-opp__value-calc-label {
    font-style: normal;
    font-weight: 700;
    color: #065F46;
    letter-spacing: 0.3pt;
    text-transform: uppercase;
    font-size: 7.5pt;
  }
  .report-opp__value--qualitative .report-opp__value-calc       { color: #3f6212; }
  .report-opp__value--qualitative .report-opp__value-calc-label { color: #3f6212; }
  .report-opp__value--qualitative { background: #ecfccb; border-left-color: #3f6212; }
  .report-opp__value--qualitative .report-opp__value-amount-text { color: #3f6212; }
  .report-opp__value--muted {
    background: #f9fafb;
    border-left-color: #d1d5db;
  }
  .report-opp__value--muted .report-opp__value-label { color: #6b7280; }

  /* Short-mode "Round 3 unlocks your number" carrot — replaces the rand
     tile on each opportunity page in preliminary reports. Lime-tinted so
     it reads as forward motion rather than a "blocked" state. */
  .report-opp__value--locked {
    background: linear-gradient(140deg, #ecfccb 0%, #d9f99d 100%);
    border-left-color: #65A30D;
  }
  .report-opp__value--locked .report-opp__value-label { color: #3F6212; }
  .report-opp__value-locked-text {
    display: block;
    font-size: 11pt;
    font-weight: 600;
    color: #1a2e05;
    line-height: 1.4;
    margin-top: 0.5mm;
  }
  .report-opp__value-locked-text strong { color: #166534; }

  /* Short-mode page-3 "unlock your full report" callout — sits where the
     summary grid would in full mode. Same lime palette as the locked tile. */
  .report-headline-block--short {
    background: linear-gradient(140deg, #ecfccb 0%, #d9f99d 100%);
    border-left: 4pt solid #65A30D;
    border-radius: 2mm;
    padding: 6mm 8mm;
    margin: 2mm 0 5mm;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2mm;
  }
  .report-headline-block-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 9pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6pt;
    color: #3F6212;
  }
  .report-headline-block-sub {
    display: block;
    font-size: 11pt;
    color: #1a2e05;
    line-height: 1.5;
  }
  .report-headline-block-sub strong { color: #166534; }

  /* Short-mode ranked rows: pain chip moves right since there's no value */
  .report-top3__item--short {
    grid-template-columns: auto 1fr auto !important;
  }

  /* Short-mode CTA page prelude — "Your full report is waiting" block */
  .report-cta__prelude {
    background: linear-gradient(140deg, #ecfccb 0%, #d9f99d 100%);
    border-left: 4pt solid #65A30D;
    border-radius: 2mm;
    padding: 6mm 7mm;
    margin: 0 0 6mm;
  }
  .report-cta__prelude-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: 9pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6pt;
    color: #3F6212;
    margin: 0 0 2mm;
  }
  .report-cta__prelude-text {
    font-size: 11pt;
    color: #1a2e05;
    line-height: 1.5;
    margin: 0;
  }
  .report-cta__prelude-text strong { color: #166534; }
  .report-opp__value-note {
    font-size: 9pt;
    color: #6b7280;
  }

  .report-opp__framing {
    font-size: 10pt;
    line-height: 1.45;
    color: #374151;
    margin: 0 0 3mm;
  }

  .report-h3--actions,
  .report-h3--proof {
    margin-top: 3mm;
    margin-bottom: 2mm;
    font-size: 11pt;
  }

  .report-opp__actions {
    list-style: none;
    padding: 0;
    margin: 0 0 3mm;
  }
  .report-opp__action {
    position: relative;
    padding: 1.2mm 0 1.2mm 5mm;
    font-size: 10pt;
    line-height: 1.4;
    color: #1f2937;
    border-bottom: 0.3pt solid #f3f4f6;
  }
  .report-opp__action:last-child { border-bottom: none; }
  .report-opp__action::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3mm;
    width: 1.8mm;
    height: 1.8mm;
    border-radius: 50%;
    background: #006C51;
  }

  .report-opp__proof {
    background: #f9fafb;
    border-radius: 2mm;
    padding: 5mm;
  }
  /* Compact variant — used when the proof block sits ABOVE a case-study
     card on the same page. The case study carries the visual weight; the
     proof block is supporting context, so we strip a lot of padding. */
  .report-opp__proof--inline {
    background: transparent;
    padding: 0;
    margin-top: 1mm;
  }

  .report-opp__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40mm, 1fr));
    gap: 3mm;
    margin-bottom: 2mm;
  }
  .report-opp__stat {
    background: #fff;
    border: 0.5pt solid #d1fae5;
    border-radius: 2mm;
    padding: 2.5mm 3mm;
    text-align: center;
  }
  /* On the inline (compact) variant, network proof stats are smaller and
     sit flush — no card background, just the value + label. */
  .report-opp__proof--inline .report-opp__stat {
    background: transparent;
    border: none;
    padding: 1mm;
  }
  .report-opp__stat-value {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 15pt;
    font-weight: 700;
    color: #006C51;
    line-height: 1.1;
    letter-spacing: -0.4pt;
    margin-bottom: 0.5mm;
  }
  .report-opp__stat-label {
    display: block;
    font-size: 8pt;
    color: #374151;
    line-height: 1.3;
  }
  .report-opp__stats-note {
    font-size: 8.5pt;
    color: #6b7280;
    font-style: italic;
    margin: 0 0 2mm;
  }

  .report-opp__quote {
    display: flex;
    align-items: flex-start;
    gap: 4mm;
    margin: 2mm 0 0;
    padding: 2mm 0 0;
    border-top: 0.4pt solid #e5e7eb;
  }
  .report-opp__quote + .report-opp__quote {
    margin-top: 2mm;
  }
  /* Human face on the quote — real photo (downloaded from jobjack.co.za)
     or a branded initials circle fallback. object-fit keeps portraits tidy. */
  .report-opp__quote-avatar {
    width: 13mm;
    height: 13mm;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    flex-shrink: 0;
    border: 1pt solid #d1fae5;
    background: #f0fdf4;
  }
  .report-opp__quote-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 11pt;
    font-weight: 700;
    color: #006C51;
  }
  .report-opp__quote-content { flex: 1; }
  .report-opp__quote-text {
    font-size: 9.5pt;
    font-style: italic;
    color: #1f2937;
    margin: 0 0 0.5mm;
    line-height: 1.4;
  }
  .report-opp__quote-cite {
    font-size: 8pt;
    color: #6b7280;
    margin: 0;
  }

  /* Page 9 — The 2026 Store Hiring System */
  .report-system {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4mm;
  }
  .report-system__pillar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5mm;
    background: #f0fdf4;
    border-radius: 2mm;
    padding: 5mm;
  }
  .report-system__num {
    width: 10mm;
    height: 10mm;
    border-radius: 50%;
    background: #006C51;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 14pt;
    font-weight: 700;
  }
  .report-system__title {
    font-family: 'Poppins', sans-serif;
    font-size: 13pt;
    font-weight: 600;
    color: #111;
    margin: 0 0 1mm;
  }
  .report-system__lead {
    font-size: 10pt;
    color: #374151;
    margin: 0 0 2mm;
    line-height: 1.45;
  }
  .report-system__list {
    list-style: disc;
    padding-left: 5mm;
    margin: 0;
    font-size: 9.5pt;
    color: #1f2937;
  }
  .report-system__list li { padding: 0.5mm 0; line-height: 1.4; }

  /* Page 10 — Proof at scale */
  .report-proof__stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4mm;
    margin: 4mm 0 6mm;
  }
  .report-proof__stat {
    background: #f0fdf4;
    border-radius: 2mm;
    padding: 5mm;
    text-align: center;
  }
  .report-proof__stat-value {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 24pt;
    font-weight: 700;
    color: #006C51;
    letter-spacing: -0.5pt;
    line-height: 1;
    margin-bottom: 2mm;
  }
  .report-proof__stat-label {
    display: block;
    font-size: 9pt;
    color: #374151;
    line-height: 1.4;
  }

  .report-proof__brands {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4mm;
    margin: 0 0 6mm;
  }
  .report-proof__brand {
    background: #fff;
    border: 0.8pt solid #d1fae5;
    border-radius: 2mm;
    padding: 5mm;
    text-align: center;
  }
  .report-proof__brand-name {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 16pt;
    font-weight: 700;
    color: #006C51;
    margin-bottom: 1mm;
  }
  .report-proof__brand-stat {
    display: block;
    font-size: 10pt;
    color: #374151;
  }

  .report-proof__brand-list {
    font-size: 11pt;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 6mm;
    line-height: 1.5;
  }

  .report-proof__closer {
    background: #f0fdf4;
    border-left: 4pt solid #006C51;
    border-radius: 2mm;
    padding: 5mm;
    margin-top: 4mm;
  }
  .report-proof__closer-text {
    font-size: 11pt;
    color: #111;
    margin: 0;
    line-height: 1.5;
    font-weight: 600;
  }

  /* Page 11 — CTA */
  .report-page__inner--cta { padding-top: 10mm; }
  .report-cta__lead {
    font-size: 11pt;
    line-height: 1.55;
    color: #374151;
    margin: 0 0 6mm;
  }
  .report-cta__box {
    background: #006C51;
    color: #fff;
    border-radius: 3mm;
    padding: 8mm;
    margin: 0 0 6mm;
  }
  .report-cta__box-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14pt;
    font-weight: 600;
    margin: 0 0 5mm;
    color: #fff;
  }
  .report-cta__contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5mm;
  }
  .report-cta__contact-item {
    display: flex;
    flex-direction: column;
    gap: 1mm;
  }
  .report-cta__contact-label {
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2pt;
    color: #a7f3d0;
  }
  .report-cta__contact-value {
    font-family: 'Poppins', sans-serif;
    font-size: 13pt;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
  }

  .report-cta__footer {
    font-size: 10pt;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
  }

  /* Method list (last page) */
  .report-method-list {
    list-style: none;
    padding: 0;
    margin: 2mm 0 0;
    font-size: 10pt;
  }
  .report-method-list li {
    padding: 2mm 0;
    border-bottom: 0.3pt solid #f3f4f6;
    line-height: 1.5;
  }
  .report-method-list li:last-child { border-bottom: none; }

  /* ─── Case-study block (rendered at the bottom of each opportunity page).
     Tight spacing — has to share a page with header, value, framing, action
     list, AND proof block. Don't loosen without testing all 5 opp pages. ─── */
  .report-opp__case {
    margin-top: 3mm;
    border: 1pt solid #006C51;
    border-left-width: 4pt;
    border-radius: 2mm;
    padding: 4mm;
    background: #ffffff;
    page-break-inside: avoid;
  }
  .report-opp__case-head {
    display: flex;
    align-items: flex-start;
    gap: 3mm;
    margin-bottom: 3mm;
    padding-bottom: 2mm;
    border-bottom: 0.4pt solid #d1fae5;
  }
  .report-opp__case-tag {
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 1.2pt;
    text-transform: uppercase;
    padding: 0.8mm 2.5mm;
    background: #006C51;
    color: #fff;
    border-radius: 8mm;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 0.5mm;
  }
  .report-opp__case-id {
    display: flex;
    flex-direction: column;
    gap: 0.3mm;
  }
  .report-opp__case-employer {
    font-family: 'Poppins', sans-serif;
    font-size: 11pt;
    font-weight: 700;
    color: #111;
    line-height: 1.15;
  }
  .report-opp__case-sector {
    font-size: 8.5pt;
    color: #6b7280;
    line-height: 1.3;
  }
  .report-opp__case-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32mm, 1fr));
    gap: 2mm;
    margin-bottom: 2.5mm;
  }
  .report-opp__case-stat {
    background: #f0fdf4;
    border-radius: 1.5mm;
    padding: 2mm 3mm;
    text-align: center;
  }
  .report-opp__case-stat-value {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 12pt;
    font-weight: 700;
    color: #006C51;
    line-height: 1.1;
    letter-spacing: -0.3pt;
    margin-bottom: 0.5mm;
  }
  .report-opp__case-stat-label {
    display: block;
    font-size: 7.5pt;
    color: #374151;
    line-height: 1.3;
  }
  .report-opp__case-quote {
    display: flex;
    align-items: flex-start;
    gap: 4mm;
    margin: 0;
    padding-top: 2mm;
    border-top: 0.4pt solid #d1fae5;
  }
  .report-opp__case-quote-avatar {
    width: 13mm;
    height: 13mm;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    flex-shrink: 0;
    border: 1pt solid #d1fae5;
    background: #f0fdf4;
  }
  .report-opp__case-quote-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 11pt;
    font-weight: 700;
    color: #006C51;
  }
  .report-opp__case-quote-content { flex: 1; }
  .report-opp__case-quote-text {
    font-size: 9.5pt;
    font-style: italic;
    color: #1f2937;
    margin: 0 0 0.5mm;
    line-height: 1.4;
  }
  .report-opp__case-quote-cite {
    font-size: 8pt;
    color: #6b7280;
    margin: 0;
  }

  /* ─── Real customer results spread (page 11) — 7-card 2-col grid. ─── */
  .report-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4mm;
    margin: 4mm 0;
  }
  .report-results-card {
    border: 0.8pt solid #d1fae5;
    border-left: 3pt solid #006C51;
    border-radius: 2mm;
    padding: 4mm;
    background: #ffffff;
    page-break-inside: avoid;
  }
  .report-results-card__head {
    margin-bottom: 3mm;
    padding-bottom: 2mm;
    border-bottom: 0.4pt solid #f3f4f6;
  }
  .report-results-card__employer {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 11pt;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
    margin-bottom: 1mm;
  }
  .report-results-card__sector {
    display: block;
    font-size: 8pt;
    color: #6b7280;
    line-height: 1.3;
  }
  .report-results-card__stats {
    display: flex;
    flex-direction: column;
    gap: 2mm;
  }
  .report-results-card__stat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3mm;
    align-items: baseline;
  }
  .report-results-card__stat-value {
    font-family: 'Poppins', sans-serif;
    font-size: 12pt;
    font-weight: 700;
    color: #006C51;
    letter-spacing: -0.2pt;
    white-space: nowrap;
  }
  .report-results-card__stat-label {
    font-size: 9pt;
    color: #374151;
    line-height: 1.35;
  }
  .report-results-footnote {
    font-size: 8.5pt;
    color: #6b7280;
    font-style: italic;
    margin: 5mm 0 0;
    line-height: 1.5;
    border-top: 0.4pt solid #e5e7eb;
    padding-top: 3mm;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Calculated-estimate card (Round 3 → TTP cost = months × R/mo × ramp%)
   Three editable sliders → derived rand value → accuracy yes/no.
   ───────────────────────────────────────────────────────────────────────── */
.calc-estimate {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.calc-estimate__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calc-estimate__label {
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}

.calc-estimate__input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.calc-estimate__slider {
  width: 100%;
  /* JOBJACK green track + thumb to match the rest of the tool, instead of
     the browser-default blue. Also covers Firefox / Safari / Chromium via
     accent-color. */
  accent-color: var(--jj-green-dark);
}

.calc-estimate__value {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  min-width: 90px;
  text-align: right;
}

.calc-estimate__result {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 10px;
  padding: 14px 18px;
  text-align: center;
}

.calc-estimate__result-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #065F46;
  margin: 0 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Info icon next to the result label — clickable + hoverable. Tooltip
   floats above on hover / focus, with a small arrow pointing down. */
.calc-estimate__info-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.calc-estimate__info {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #065F46;
  background: transparent;
  color: #065F46;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-style: italic;
  cursor: help;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}

.calc-estimate__info:hover,
.calc-estimate__info:focus-visible {
  background: #065F46;
  color: #fff;
  outline: none;
}

.calc-estimate__tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  max-width: 80vw;
  padding: 10px 12px;
  background: #111827;
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.45;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
  z-index: 50;
}

.calc-estimate__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #111827;
}

.calc-estimate__info-wrap:hover .calc-estimate__tooltip,
.calc-estimate__info:focus-visible + .calc-estimate__tooltip,
.calc-estimate__info-wrap:focus-within .calc-estimate__tooltip {
  opacity: 1;
}

.calc-estimate__result-value {
  font-size: 24px;
  font-weight: 800;
  color: #065F46;
  margin: 0;
}

.calc-estimate__result-unit {
  font-size: 13px;
  font-weight: 500;
  color: #065F46;
  opacity: 0.8;
}

.calc-estimate__accuracy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.calc-estimate__accuracy-label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.calc-estimate__accuracy-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calc-estimate__accuracy-buttons .segmented__btn {
  text-align: left;
  padding: 10px 14px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Cost-rollup card (Round 3 → # of Hires impact). Per-hire components
   stack vertically with × and = operators, total in a green callout,
   accuracy yes/no below; "No, let me adjust" reveals a multiselect that
   flips chosen rows into edit mode in place.
   ───────────────────────────────────────────────────────────────────────── */
.cost-rollup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.cost-rollup__row {
  padding: 10px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.cost-rollup__row--multiplier {
  background: #f3f4f6;
}

/* Bracket-style group wrapping the per-hire components — makes it
   visually obvious that they're SUMMED before being multiplied by
   hires/year. Uses a subtle border + a small "Per-hire components"
   label at the top and a "Total per hire" subtotal at the bottom. */
.cost-rollup__group {
  position: relative;
  border: 1.5px solid #d1d5db;
  border-radius: 12px;
  padding: 26px 10px 10px;
  margin: 2px 0;
  background: #fcfcfd;
}

.cost-rollup__group-label {
  position: absolute;
  top: -9px;
  left: 16px;
  padding: 0 8px;
  background: var(--surface-card, #fff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}

.cost-rollup__group-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cost-rollup__group-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #d1d5db;
}

.cost-rollup__group-subtotal-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #065F46;
}

.cost-rollup__group-subtotal-value {
  font-size: 16px;
  font-weight: 800;
  color: #065F46;
}

.cost-rollup__row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.cost-rollup__row-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.cost-rollup__row-value {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

.cost-rollup__row-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: #9ca3af;
  font-style: italic;
}

/* Note: :not([hidden]) so the [hidden] HTML attribute (display: none)
   still works — bare `display: grid` would override it. */
.cost-rollup__row-edit:not([hidden]) {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
}

.cost-rollup__row-edit label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cost-rollup__input {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 6px 8px;
  outline: none;
  width: 100%;
  -moz-appearance: textfield;
}

.cost-rollup__input::-webkit-outer-spin-button,
.cost-rollup__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cost-rollup__input:focus {
  border-color: var(--jj-green-dark);
  box-shadow: 0 0 0 3px rgba(0,108,81,0.10);
}

/* When the row is in edit mode AND has a multiplied component, the
   non-multiplyByS rows still need 2 columns instead of 4. CSS just lets
   the grid wrap. */
.cost-rollup__row-edit:has(input[data-role="value-input"]:only-of-type) {
  grid-template-columns: auto 1fr;
}

.cost-rollup__operator {
  align-self: center;
  margin: 2px 0;
  font-size: 14px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.5px;
  text-align: center;
}

.cost-rollup__operator--equals { color: var(--jj-green-dark); }

.cost-rollup__total {
  background: #ECFDF5;
  border: 1.5px solid #A7F3D0;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.cost-rollup__total-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #065F46;
}

.cost-rollup__total-value {
  font-size: 26px;
  font-weight: 800;
  color: #065F46;
}

.cost-rollup__accuracy {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cost-rollup__accuracy-label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.cost-rollup__accuracy-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cost-rollup__accuracy-buttons .segmented__btn {
  text-align: left;
  padding: 10px 14px;
}

.cost-rollup__edit-prompt {
  margin-top: 4px;
  padding: 10px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
}

.cost-rollup__edit-label {
  font-size: 13px;
  font-weight: 600;
  color: #78350f;
  margin: 0 0 8px;
}

.cost-rollup__edit-toggles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cost-rollup__edit-toggle {
  /* uses .multi-select__btn styling */
}

/* Drill-down details on read-only summary cards: small link-style button
   in the row head, expandable panel below with prose explaining the
   inputs that produced the row's value. */
.cost-rollup__detail-toggle {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--jj-green-dark);
  background: transparent;
  border: none;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.cost-rollup__detail-toggle:hover { color: #064E3B; }

.cost-rollup__row-detail:not([hidden]) {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  background: #ECFDF5;
  border-left: 3px solid var(--jj-green-dark);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #064E3B;
}

.cost-rollup__row-detail strong {
  color: #065F46;
  font-weight: 700;
}

/* Hide the row's R/day/days inputs entirely on read-only cards
   (defensive — they shouldn't render anyway). */
.cost-rollup--readonly .cost-rollup__row-edit { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   FIT summary card (Pass 4 / second summary card).
   Big headline number on top + table of captured FIT data points below.
   ───────────────────────────────────────────────────────────────────────── */
.fit-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.fit-summary__headline {
  background: #ECFDF5;
  border: 1.5px solid #A7F3D0;
  border-radius: 10px;
  padding: 16px 18px;
  text-align: center;
}

.fit-summary__headline--unavailable {
  background: #fffbeb;
  border-color: #fde68a;
}

.fit-summary__headline-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #065F46;
  margin: 0 0 4px;
}

.fit-summary__headline--unavailable .fit-summary__headline-label { color: #78350f; }

.fit-summary__headline-value {
  font-size: 26px;
  font-weight: 800;
  color: #065F46;
  margin: 0 0 6px;
}

.fit-summary__headline-value--text {
  font-size: 18px;
}

.fit-summary__headline--unavailable .fit-summary__headline-value { color: #78350f; }

.fit-summary__headline-note {
  font-size: 12px;
  color: #065F46;
  margin: 0;
}

.fit-summary__headline--unavailable .fit-summary__headline-note { color: #78350f; }

.fit-summary__rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.fit-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
}

.fit-summary__row:last-child { border-bottom: none; }

.fit-summary__row-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.fit-summary__row-value {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  text-align: right;
}

/* Pain rating + Financial impact rating shown as 5-block scale gauges
   side-by-side in a single panel. Both share the 1-5 scale, so the
   visual matches across the two — blocks 1..score fill in JOBJACK
   green, N+1..5 stay dim, with the descriptive label to the right.
   Read-only, at-a-glance "where on the scale". */
.fit-summary__ratings {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.fit-scale {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fit-scale__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
}

.fit-scale__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}

.fit-scale__blocks {
  display: inline-flex;
  gap: 4px;
}

.fit-scale__block {
  width: 28px;
  height: 10px;
  background: #e5e7eb;
  border-radius: 3px;
  transition: background 160ms ease;
}

.fit-scale__block--filled {
  background: var(--jj-green-dark);
  box-shadow: 0 1px 0 rgba(0, 108, 81, 0.18);
}

.fit-scale__value {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.fit-scale__value--unset {
  color: #9ca3af;
  font-style: italic;
  font-weight: 500;
}

/* Narrative — prose paragraph that weaves the rest of the FIT data
   points into a single coherent explanation of the headline number.
   Sits below the ratings block; uses subtle background to read as
   "context" rather than as a primary action. */
.fit-summary__narrative {
  font-size: 13px;
  line-height: 1.6;
  color: #1f2937;
  background: #f9fafb;
  border-left: 3px solid var(--jj-green-dark);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0;
}

.fit-summary__narrative strong {
  color: #065F46;
  font-weight: 700;
}

.fit-summary__narrative em {
  font-style: italic;
  color: var(--jj-green-dark);
}

/* Sense-check yes/no at the bottom of the FIT summary — same pattern as
   the operational summary card. "No, let me adjust" reveals an amber
   prompt pointing the user at the secondary topic chips. */
.fit-summary__accuracy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.fit-summary__accuracy-label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.fit-summary__accuracy-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fit-summary__accuracy-buttons .segmented__btn {
  text-align: left;
  padding: 10px 14px;
}

.fit-summary__adjust-prompt {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #78350f;
}

.fit-summary__adjust-prompt strong {
  font-weight: 700;
  color: #78350f;
}

/* Upside-estimate flow (shown only when MisFIT impact isn't directly
   computable). Collapsed by default behind a "Estimate the upside"
   toggle; reveals an annual-staff-investment readout, a %-impact
   segmented control, and a calculated upside figure. */
.fit-summary__upside {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fit-summary__upside-toggle {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--jj-green-dark);
  background: rgba(0, 108, 81, 0.08);
  border: 1px dashed var(--jj-green-dark);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: center;
  transition: background 120ms ease;
}

.fit-summary__upside-toggle:hover {
  background: rgba(0, 108, 81, 0.14);
}

.fit-summary__upside-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.fit-summary__upside-investment {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.fit-summary__upside-investment-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 4px;
}

.fit-summary__upside-investment-value {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
  margin: 0;
}

.fit-summary__upside-investment-note {
  font-size: 11px;
  color: #6b7280;
  margin: 4px 0 0;
}

.fit-summary__upside-prompt {
  font-size: 13px;
  line-height: 1.45;
  color: #1f2937;
  margin: 0;
}

.fit-summary__upside-prompt strong {
  color: var(--jj-green-dark);
}

.fit-summary__upside-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.fit-summary__upside-buttons .segmented__btn {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 0;
}

.fit-summary__upside-result {
  background: #ECFDF5;
  border: 1.5px solid #A7F3D0;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}

.fit-summary__upside-result-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #065F46;
  margin: 0 0 4px;
}

.fit-summary__upside-result-value {
  font-size: 22px;
  font-weight: 800;
  color: #065F46;
  margin: 0;
}

.fit-summary__upside-result-note {
  font-size: 11px;
  color: #065F46;
  margin: 4px 0 0;
}

.fit-summary__upside-awareness {
  font-size: 12px;
  line-height: 1.5;
  color: #374151;
  background: #fffbeb;
  border-left: 3px solid #d97706;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Hires-estimate card (Round 3 → # of Hires topic).
   Three editable number inputs glued by `staff × turnover% = hires`,
   stacked vertically with × and = operators between them. Result row
   gets a green-tinted background so it visually reads as the "answer".
   ───────────────────────────────────────────────────────────────────────── */
.hires-estimate {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.hires-estimate__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.hires-estimate__row--result {
  background: #ECFDF5;
  border-color: #A7F3D0;
}

.hires-estimate__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0;
}

.hires-estimate__row--result .hires-estimate__label {
  color: #065F46;
}

.hires-estimate__input {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 4px 0;
  outline: none;
  width: 100%;
  -moz-appearance: textfield;
}

.hires-estimate__input::-webkit-outer-spin-button,
.hires-estimate__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hires-estimate__input:focus {
  border-bottom-color: var(--jj-green-dark);
}

.hires-estimate__input--result {
  color: #065F46;
}

.hires-estimate__operator {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: 0.5px;
  line-height: 1;
}

.hires-estimate__operator--equals { color: var(--jj-green-dark); }

.hires-estimate__row .not-sure-link {
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Free-text card (Round 3 → "Further comments" per topic).
   ───────────────────────────────────────────────────────────────────────── */
.free-text {
  margin-top: 8px;
}

.free-text__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #111827;
  resize: vertical;
  min-height: 96px;
  background: #fff;
}

.free-text__input:focus {
  outline: none;
  border-color: #006C51;
  box-shadow: 0 0 0 3px rgba(0, 108, 81, 0.12);
}

.free-text__input::placeholder {
  color: #9ca3af;
}

/* ─────────────────────────────────────────────────────────────────────────
   Reprio screen: custom-priorities textarea ("Other priorities you'd like
   noted on your report"). Stored at STATE.meta.customPriorities for the
   final report; doesn't affect the 5-topic Round 3 walk order.
   ───────────────────────────────────────────────────────────────────────── */
.reprio-custom {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reprio-custom__label {
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}

.reprio-custom__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #111827;
  resize: vertical;
  min-height: 64px;
  background: #fff;
}

.reprio-custom__input:focus {
  outline: none;
  border-color: #006C51;
  box-shadow: 0 0 0 3px rgba(0, 108, 81, 0.12);
}

.reprio-custom__input::placeholder {
  color: #9ca3af;
}

/* ── Admin preview banner ──
   Sticks at the top of the journey when an admin opens a user's session
   in preview mode. Yellow so it's unmistakable; the rest of the journey
   looks normal otherwise. */
.journey-preview-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-bottom: 2px solid #f59e0b;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  color: #78350f;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.18);
}
.journey-preview-banner__icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.journey-preview-banner__text {
  flex: 1;
  line-height: 1.4;
}
.journey-preview-banner__text strong { font-weight: 700; }
.journey-preview-banner__close {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border: 1.5px solid #f59e0b;
  border-radius: 8px;
  background: #fff;
  color: #78350f;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
  flex-shrink: 0;
}
.journey-preview-banner__close:hover { background: #fef3c7; }
.journey-preview-banner__close:active { transform: scale(0.97); }

/* ── Preliminary report reward screen (between Round 2 and Round 3) ── */
.preliminary-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 20px;
}
.preliminary-card__row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  background: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%);
  border-radius: 10px;
  padding: 14px 16px;
  align-items: flex-start;
}
.preliminary-card__row--unlock {
  background: var(--surface-warm);
  border: 1px dashed var(--border-subtle);
}
.preliminary-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--jj-green-dark);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.preliminary-card__icon--lock {
  background: #d1d5db;
  color: #6b7280;
}
.preliminary-card__body { display: flex; flex-direction: column; gap: 3px; }
.preliminary-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.preliminary-card__row--unlock .preliminary-card__title { color: #4b5563; }
.preliminary-card__sub {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-body);
  margin: 0;
}

.question-card__actions--prelim {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.question-card__actions--prelim .btn-secondary,
.question-card__actions--prelim .btn-primary { flex: 1 1 auto; }

/* ─────────────────────────────────────────────────────────────────────────
   "You are here" pulse on the SVG diagram — runs on the SPECIFIC element
   tagged for the current topic (data-pulse-topic="<key>", set by the
   stage-animations.js draw helpers). Only one element pulses at a time
   (applyTopicPulse clears previous tags before setting the active one).
   Uses opacity rather than fill / filter so it doesn't fight with the
   imperative fill swap on hover (mouseenter sets fill via setAttribute,
   our keyframe just animates opacity).
   The selector matches `svg.diagram rect[fill="..."]` / `path[fill="..."]`
   specificity (0,2,2) so it wins over the existing red `animation: none`
   and green `breathe-green` rules earlier in this file.
   ───────────────────────────────────────────────────────────────────────── */
/* Pulse DARKENS the element — brightness 1.0 → 0.6 → 1.0 over 1.6s. Goes
   darker rather than lighter so the user reads it as "this is what we're
   talking about" rather than "this is fading out". Uses filter (not
   opacity) so the dimming reads as a colour shift rather than a fade.
   Hover handlers set inline style.filter — CSS animation beats inline
   normal styles in the cascade, so the pulse keeps running during hover
   with the hover's drop-shadow temporarily replaced by our brightness. */
@keyframes journey-topic-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(0.6); }
}

svg.diagram rect[data-pulse-active="true"],
svg.diagram path[data-pulse-active="true"],
svg.diagram g[data-pulse-active="true"] {
  animation: journey-topic-pulse 1.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  svg.diagram rect[data-pulse-active="true"],
  svg.diagram path[data-pulse-active="true"],
  svg.diagram g[data-pulse-active="true"] {
    animation: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Pass 4 finale — "Your hiring opportunities" (renderFinale in
   journey-cards.js). Replaces the old impact-summary screen. Layout:
   green-tinted headline block (total annual opportunity) followed by
   an ordered list of 5 levers. Each lever row carries a title, an
   optional rand value (right-aligned), and a prose framing paragraph.
   Tokens mirror .fit-summary__headline / .cost-rollup__row so the three
   summary slides read as a family.
   ───────────────────────────────────────────────────────────────────── */

.opportunities__headline {
  background: #ECFDF5;
  border: 1.5px solid #A7F3D0;
  border-radius: 12px;
  padding: 16px 18px;
  text-align: center;
  margin: 4px 0 14px;
}

.opportunities__headline-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #065F46;
  margin: 0 0 4px;
}

.opportunities__headline-value {
  font-size: 30px;
  font-weight: 800;
  color: #065F46;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.opportunities__headline-note {
  font-size: 12px;
  color: #065F46;
  margin: 0;
  line-height: 1.5;
}

.opportunities__headline-note strong {
  font-weight: 700;
}

.opportunities__list {
  list-style: none;
  counter-reset: opportunity;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opportunity-row {
  counter-increment: opportunity;
  position: relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px 12px 44px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.opportunity-row::before {
  content: counter(opportunity);
  position: absolute;
  top: 12px;
  left: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--jj-green, #16A34A);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.opportunity-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 4px;
}

.opportunity-row__title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  letter-spacing: -0.005em;
}

.opportunity-row__value {
  font-size: 13px;
  font-weight: 700;
  color: var(--jj-green-dark, #065F46);
  white-space: nowrap;
  flex-shrink: 0;
}

.opportunity-row__body {
  font-size: 12.5px;
  line-height: 1.55;
  color: #374151;
  margin: 0;
}

.opportunity-row__body strong {
  font-weight: 700;
  color: #111827;
}