:root {
  /* Sourced from helderpath.com's actual site CSS */
  --bg: #0D1117;
  --bg-darker: #080b0f;
  --card-bg: rgba(255, 255, 255, 0.02);
  --card-bg-hover: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.08);
  --input-bg: #0d1117;
  --white: #ffffff;
  --muted: #e2e8f0;
  --muted-dim: #b8bfc7;
  --muted-dimmer: #637381;
  --teal: #00CED1;
  --teal-dark: #008B8B;
  --critical: #ef6a5f;
  --nice: #f0b84d;
  --future: #6ea8e0;
  --none: #4b5f74;
  /* Partner-engagement timeline (Now/Current, Near-term, Long-term) — used in
     Roadmap's tri-state control and the step-62 corollary grid. Deliberately
     a separate violet/magenta/indigo family, not a shade of an existing
     token: teal/gold/red are Cost Clarity's exclusively (a quality axis),
     and this is a time axis — sharing colors between the two created a
     collision when both appear in the same table. Three distinct, equally
     saturated hues rather than one color faded across three opacities, so
     "long-term" doesn't read as visually weaker than "now." */
  --partner-now: #d946ef;
  --partner-near: #8b5cf6;
  --partner-long: #3b82f6;
  --radius: 6px;
  --font-display: 'Comfortaa', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-mono: "SF Mono", "Menlo", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  height: 100%;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
  color: var(--white);
}

h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 24px; }
h3 { font-size: 17px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal); font-weight: 500; }

p { line-height: 1.6; color: var(--muted); margin: 0 0 12px 0; font-size: 16px; }

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--card-border);
  background: var(--bg-darker);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.5px;
}

.topbar .brand img.logo-mark {
  height: 26px;
  width: auto;
}

.topbar .brand .brand-accent { color: var(--teal); }

.topbar .progress-label {
  font-size: 13px;
  color: var(--muted-dimmer);
  font-family: var(--font-mono);
}

.main {
  flex: 1;
  padding: 40px 32px 120px;
  max-width: min(1800px, 96vw);
  margin: 0 auto;
  width: 100%;
}

.eyebrow {
  font-size: 12px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-weight: 500;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.card + .card { margin-top: 0; }

.room-priority-item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.room-priority-item label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.room-priority-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--teal);
  flex-shrink: 0;
  cursor: pointer;
}
.room-priority-item .rp-question {
  color: var(--muted-dim);
  font-size: 13px;
  margin: 6px 0 0 32px;
  line-height: 1.5;
}
.room-priority-item textarea {
  margin-left: 32px;
  width: calc(100% - 32px);
}

/* Compact scope for the client-side read-along view only -- the shared
   .takeaway-card/.icon-badge styles stay full-size everywhere else
   (Art of Possible etc.); this list can run to 6+ items at once and needs
   to fit one screen with zero scrolling -- the facilitator is on a
   different tab and can't scroll it for the audience. Two-column CSS
   layout auto-balances height even though items vary (1 card vs 2 cards
   per substage); break-inside keeps each substage's block from splitting
   awkwardly across the column break.
*/
.rp-client-list {
  column-count: 2;
  column-gap: 20px;
}
.rp-client-list .room-priority-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.rp-client-list .takeaway-card { padding: 8px 12px; margin-bottom: 6px; }
.rp-client-list .takeaway-header { margin-bottom: 4px; }
.rp-client-list .takeaway-card .takeaway-text { font-size: 12px; line-height: 1.35; }
.rp-client-list .takeaway-card .example-tag { font-size: 9px; padding: 2px 7px; }
.rp-client-list .icon-badge { width: 18px; height: 18px; }
.rp-client-list .icon-badge svg { width: 10px; height: 10px; }

.ps-section-heading { margin: 32px 0 12px; }
.ps-section-heading:first-of-type { margin-top: 0; }

/* Partner Success — nested short-term/long-term/notes blocks within a
   substage column, so each timeframe reads as its own distinct unit
   instead of one long run-on stack. */
.nested-block {
  border-left: 3px solid var(--none);
  background: rgba(255,255,255,0.03);
  border-radius: 0 6px 6px 0;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.nested-block:last-child { margin-bottom: 0; }
.nested-block-label {
  font-size: 11px;
  color: var(--muted-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.nested-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nested-block-list li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  color: var(--white);
  line-height: 1.6;
}
.nested-block-list li::before { content: "•"; position: absolute; left: 0; color: var(--muted-dimmer); }
.nested-block-text { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0; }

.nested-block.accent-short { border-left-color: var(--teal); background: rgba(0,206,209,0.06); }
.nested-block.accent-short .nested-block-label,
.nested-block.accent-short .nested-block-list li::before { color: var(--teal); }

.nested-block.accent-long { border-left-color: var(--nice); background: rgba(240,184,77,0.06); }
.nested-block.accent-long .nested-block-label,
.nested-block.accent-long .nested-block-list li::before { color: var(--nice); }

.field-label {
  display: block;
  font-size: 14px;
  color: var(--muted-dim);
  margin-bottom: 6px;
  font-weight: 500;
}

.field-label .field-expand {
  display: block;
  font-size: 12px;
  color: var(--muted-dimmer);
  font-weight: 400;
  margin-top: 2px;
}

/* Section-header badge (e.g. "Internally-led baseline") shown next to an h1/h3 */
.section-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(0, 206, 209, 0.4);
  color: var(--teal);
  background: rgba(0, 206, 209, 0.08);
  vertical-align: middle;
  margin-left: 12px;
}

/* Short explanatory copy shown above a question — pairs a plain-language
   primer with a secondary "why it matters here" line. Used on Lifecycle
   Efficiency; reusable anywhere a jargon-heavy question needs context. */
.primer-block {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 20px;
}
.primer-block b { color: var(--teal); font-weight: 600; }
.primer-block .primer-followup {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(240, 184, 77, 0.35);
  color: var(--muted-dim);
}
.primer-block .primer-followup b { color: var(--nice); }

/* Reference term cards — client/shared screen only, sits above the gut-check
   grid so the room has something to glance at while discussing CAC/LTV/etc.
   live, without the facilitator needing to define them out loud. */
.term-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
@media (max-width: 900px) { .term-grid { grid-template-columns: 1fr 1fr; } }
.term-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  padding: 16px 18px;
}
.term-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}
.term-full {
  font-size: 12px;
  color: var(--muted-dimmer);
  margin-top: 2px;
  margin-bottom: 10px;
}
.term-formula {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
  line-height: 1.5;
}

/* ---- CEP intro (step 19) — discussion cards, stamp, gut-check grid ---- */
.discuss-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  margin-bottom: 12px;
}
.discuss-num {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 206, 209, 0.12);
  border: 1px solid var(--teal-dark);
  color: var(--teal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.discuss-q {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
}

.section-divider {
  margin: 30px 0 22px;
  padding-top: 22px;
  border-top: 1px solid var(--card-border);
}

.cep-stamp {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--teal-dark);
  border-radius: var(--radius);
  background: rgba(0, 206, 209, 0.06);
  padding: 16px 22px;
  margin-top: 26px;
}
.cep-stamp-line {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--white);
  font-weight: 600;
}
.cep-stamp-formula {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--teal);
  margin-top: 3px;
}

/* Compact 3-row / 8-column gut-check grid: Stage / Sense / Notes */
.gc-table {
  display: grid;
  grid-template-columns: 110px repeat(7, 1fr);
  gap: 1px;
  background: var(--card-border);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 4px;
}
.gc-cell {
  background: var(--bg);
  padding: 12px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.gc-cell.gc-label {
  background: var(--bg-darker);
  justify-content: flex-start;
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-dimmer);
}
.gc-cell.gc-stage {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--white);
  background: var(--bg-darker);
}
.gc-select {
  width: 100%;
  padding: 8px 6px;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--muted-dim);
  font-family: var(--font-body);
  font-size: 12px;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}
.gc-select.val-clear { background: rgba(0, 206, 209, 0.16); border-color: var(--teal); color: var(--teal); font-weight: 600; }
.gc-select.val-rough { background: rgba(240, 184, 77, 0.14); border-color: var(--nice); color: var(--nice); font-weight: 600; }
.gc-select.val-none { background: rgba(239, 106, 95, 0.14); border-color: var(--critical); color: var(--critical); font-weight: 600; }

.gc-cell.gc-note { padding: 8px 8px; }
.gc-note input[type="text"] {
  width: 100%;
  padding: 7px 8px;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
}
.gc-note input::placeholder { color: var(--muted-dimmer); }

/* Read-only counterparts, used by client.js */
.gc-badge {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  color: var(--muted-dim);
}
.gc-badge.val-clear { background: rgba(0, 206, 209, 0.16); border-color: var(--teal); color: var(--teal); }
.gc-badge.val-rough { background: rgba(240, 184, 77, 0.14); border-color: var(--nice); color: var(--nice); }
.gc-badge.val-none { background: rgba(239, 106, 95, 0.14); border-color: var(--critical); color: var(--critical); }
.gc-cell.gc-note-readonly { padding: 8px 10px; font-size: 12px; color: var(--muted); }

/* ---- Roadmap tri-state possibility control (Current / Near-term / Long-term) ---- */
.tri-list {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}
.tri-head {
  display: grid;
  padding: 10px 14px;
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  background: var(--bg-darker);
  z-index: 1;
}
.tri-head span {
  font-family: var(--font-display);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-dimmer);
  text-align: center;
}
.tri-head span:first-child { text-align: left; }
.tri-row {
  display: grid;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tri-row:last-child { border-bottom: none; }
.tri-text { font-size: 14px; color: var(--white); padding-right: 10px; }
.tri-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted-dim);
  vertical-align: middle;
}
.tri-cell { display: flex; justify-content: center; }
.tri-cell input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; }
.tri-cell input.cur-check { accent-color: var(--partner-now); }
.tri-cell input.short-check { accent-color: var(--partner-near); }
.tri-cell input.long-check { accent-color: var(--partner-long); }
.tri-copy-row { display: flex; justify-content: center; gap: 10px; margin: 12px 0 6px; flex-wrap: wrap; }
.current-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal);
  border: 1px solid var(--teal-dark);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

/* ---- Partnering for Value (step 62) — corollary grid, insight callout ---- */
.goal-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  background: rgba(0, 206, 209, 0.08);
  border: 1.5px solid var(--teal);
  border-radius: 999px;
  padding: 8px 20px;
  margin-bottom: 14px;
}
.cor-grid {
  display: grid;
  grid-template-columns: 130px repeat(14, minmax(72px, 1fr));
  gap: 1px;
  background: var(--card-border);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-top: 4px;
  font-size: 11px;
}
.cor-cell {
  background: var(--bg);
  padding: 8px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
}
.cor-cell.cor-label {
  background: var(--bg-darker);
  justify-content: flex-start;
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-dimmer);
}
.cor-cell.cor-stagehead {
  grid-column: span 2;
  background: var(--bg-darker);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cor-cell.cor-substage {
  background: var(--bg-darker);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--white);
  padding: 10px 8px;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.cor-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--card-border);
  color: var(--muted-dimmer);
}
.cor-pill.on-now { background: rgba(217, 70, 239, 0.18); border-color: var(--partner-now); color: var(--partner-now); font-weight: 800; }
.cor-pill.on-short { background: rgba(139, 92, 246, 0.18); border-color: var(--partner-near); color: var(--partner-near); }
.cor-pill.on-long { background: rgba(59, 130, 246, 0.18); border-color: var(--partner-long); color: var(--partner-long); }
.cor-pill.carry { background: transparent; border: 1px dashed var(--teal-dark); color: var(--teal-dark); }
.cor-cell.cor-sensecell { grid-column: span 2; padding: 8px 8px; }
.cor-legend { display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.cor-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-dim); }

.insight-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--teal-dark);
  border-radius: var(--radius);
  background: rgba(0, 206, 209, 0.06);
  padding: 18px 22px;
  margin-top: 22px;
}
.insight-callout .insight-tag {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  border: 1px solid var(--teal-dark);
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 2px;
}
.insight-callout-line {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--white);
  font-weight: 600;
  line-height: 1.4;
}
.insight-callout-line b { color: var(--teal); }
.insight-callout-principle { font-size: 13px; color: var(--muted-dim); margin-top: 8px; }
.insight-callout-body { font-size: 14px; color: var(--muted); line-height: 1.6; margin-top: 10px; }

/* ---- CEP scenario comparison (step 62 opener) ---- */
.cep-scenario-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--white); line-height: 1.3; margin-top: 22px; margin-bottom: 10px; }
.cep-scenario-desc { font-size: 14px; color: var(--muted-dim); margin-bottom: 16px; }
.cep-scenario { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 800px) { .cep-scenario { grid-template-columns: 1fr; } }
.cep-scenario-col { border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px 20px; background: var(--card-bg); }
.cep-scenario-col.naive { border-color: rgba(239, 106, 95, 0.35); }
.cep-scenario-col.true { border-color: var(--teal-dark); background: rgba(0, 206, 209, 0.04); }
.cep-scenario-label { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-dimmer); margin-bottom: 12px; }
.cep-scenario-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.06); gap: 10px; }
.cep-scenario-row:last-of-type { border-bottom: none; }
.cep-scenario-row span:first-child { font-size: 13px; color: var(--muted-dim); flex: 1; min-width: 0; overflow-wrap: break-word; }
.cep-scenario-row .stat { font-family: var(--font-mono); font-size: 15px; color: var(--white); font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.cep-scenario-verdict { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--card-border); font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.cep-scenario-verdict.bad { color: var(--critical); }
.cep-scenario-verdict.good { color: var(--teal); }
.cep-scenario-explain { font-size: 13px; color: var(--muted-dim); line-height: 1.6; }

/* ---- Implementation metrics trio + causal chain (v1) ---- */
.metric-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 800px) { .metric-trio { grid-template-columns: 1fr; } }
.metric-card { border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px 18px; background: var(--card-bg); }
.metric-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--teal); margin-bottom: 8px; }
.metric-takeaway { font-size: 13px; color: var(--muted-dim); line-height: 1.55; }
.metric-chain {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--white);
  border: 1px solid var(--teal-dark); background: rgba(0,206,209,0.05);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px;
}
.metric-chain .chain-node { white-space: nowrap; }
.metric-chain .chain-node.outcome { color: var(--teal); font-weight: 600; }
.metric-chain .chain-arrow { color: var(--muted-dimmer); }
.chain-explain { font-size: 13px; color: var(--muted-dim); line-height: 1.6; }

.commit-card { border: 1px solid var(--teal-dark); background: rgba(0, 206, 209, 0.05); }
.commit-card input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  margin-top: 8px;
}

.readout-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.readout-block .readout-label {
  font-size: 12px;
  color: var(--muted-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.readout-block .readout-value {
  font-size: 15px;
  color: var(--white);
}

textarea, input[type="text"], input[type="number"], select {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  color: var(--white);
  border-radius: 4px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 15px;
  resize: vertical;
}
textarea:focus, input:focus, select:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

.row { display: flex; gap: 16px; flex-wrap: wrap; }

.why-align-row { margin-top: 28px; align-items: stretch; }
.why-align-col { display: flex; flex-direction: column; }
.stat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(0, 206, 209, 0.3);
  border-radius: 16px;
  padding: 32px 24px;
  box-sizing: border-box;
}
.col { flex: 1; min-width: 220px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  font-family: var(--font-display);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 206, 209, 0.25); }
.btn.secondary {
  background: linear-gradient(135deg, #0d1117 0%, #1a202c 100%);
  color: var(--white);
  border: 1px solid var(--card-border);
}
.btn.secondary:hover { border-color: var(--teal); box-shadow: 0 0 15px rgba(0, 206, 209, 0.2); transform: none; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.footer-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(8, 11, 15, 0.95);
  border-top: 1px solid var(--card-border);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.yn-toggle {
  display: flex;
  gap: 8px;
}
.yn-toggle button {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--muted-dim);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font-body);
}
.yn-toggle button.active-yes { background: linear-gradient(135deg, var(--teal-dark), var(--teal)); color: var(--white); border-color: var(--teal); }
.yn-toggle button.active-no { background: #1a202c; color: var(--white); border-color: var(--card-border); }

.raci-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.raci-cell {
  text-align: center;
}
.raci-cell .role-name {
  font-size: 12px;
  color: var(--muted-dimmer);
  margin-bottom: 6px;
  min-height: 28px;
}
.raci-buttons { display: flex; flex-direction: column; gap: 4px; }
.raci-buttons button {
  padding: 6px 0;
  border-radius: 5px;
  border: 1px solid var(--card-border);
  background: var(--input-bg);
  color: var(--muted-dim);
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-body);
}
.raci-buttons button.selected-R { background: #ef6a5f; color: var(--bg); border-color: #ef6a5f; }
.raci-buttons button.selected-A { background: var(--teal); color: var(--bg); border-color: var(--teal); }
.raci-buttons button.selected-C { background: #f0b84d; color: var(--bg); border-color: #f0b84d; }
.raci-buttons button.selected-I { background: #4b5f74; color: var(--white); border-color: #4b5f74; }

.raci-warning {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(239, 106, 95, 0.12);
  border: 1px solid var(--critical);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--critical);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.checklist label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--white);
  cursor: pointer;
}
.checklist input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--teal);
  cursor: pointer;
}
.checklist-other-label {
  font-size: 13px;
  color: var(--muted-dimmer);
  margin-top: 4px;
  display: block;
}

/* Roadmap step — per-possibility short-term/long-term checklist.
   Scrollable so a 5-item substage and Evaluation & Fit's 24-item substage
   use the same component. */
.poss-check-list {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 4px 14px;
  background: rgba(255, 255, 255, 0.02);
}
.poss-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.poss-check-row:last-child { border-bottom: none; }
.poss-check-row input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--teal);
  cursor: pointer;
  flex-shrink: 0;
}
.poss-check-text {
  flex: 1;
  font-size: 14px;
  color: var(--white);
}
.poss-copy-row {
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
}

.priority-tag-bar {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--card-border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.priority-tag-bar .lock-icon { color: var(--muted-dimmer); font-size: 13px; }
.priority-tag-bar select { width: auto; max-width: 240px; }
.priority-tag-bar input[type="text"] { max-width: 300px; }
.tag-pill {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 600;
}
.tag-pill.critical { background: var(--critical); color: var(--bg); }
.tag-pill.nice { background: var(--nice); color: var(--bg); }
.tag-pill.future { background: var(--future); color: var(--bg); }
.tag-pill.none { background: var(--none); color: var(--white); }

.scratchpad-toggle {
  position: fixed;
  bottom: 70px; right: 24px;
  z-index: 20;
}
.scratchpad-panel {
  position: fixed;
  bottom: 110px; right: 24px;
  width: 320px;
  max-height: 400px;
  background: #10151c;
  border: 1px solid var(--teal-dark);
  border-radius: var(--radius);
  padding: 16px;
  z-index: 20;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.scratchpad-panel textarea {
  height: 260px;
}
.hidden { display: none !important; }

/* Multi-tier navigation */
.nav-tier {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 24px;
  overflow-x: auto;
  background: var(--bg);
}
.nav-tier.tier-1 {
  border-bottom: 1px solid var(--card-border);
  padding-top: 10px;
  padding-bottom: 10px;
}
.nav-tier.tier-2 {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--bg-darker);
}
.nav-tier.tier-3 {
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--bg-darker);
  flex-wrap: wrap;
}

.lc-tracker {
  width: 100%;
  padding: 4px 0 10px;
}
.lc-diagram {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 24px;
}
.lc-grid {
  display: flex;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lc-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--card-border);
  min-width: 0;
}
.lc-col:last-child { border-right: none; }
.lc-col.active { background: rgba(0, 206, 209, 0.07); }
.lc-cell {
  padding: 9px 5px;
  text-align: center;
  font-size: 12px;
  color: var(--muted-dimmer);
  border-bottom: 1px solid var(--card-border);
  line-height: 1.3;
  word-break: break-word;
}
.lc-col > .lc-cell:last-child { border-bottom: none; }
.lc-stage-cell {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  color: var(--muted-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.02);
}
.lc-col.active .lc-stage-cell { color: var(--teal); font-weight: 700; }
.lc-sub-cell.active { color: var(--teal); font-weight: 700; }

.lc-cell-with-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lc-cell-with-icon .cell-icon { width: 19.8px; height: 19.8px; display: inline-block; }
.lc-sub-cell.lc-cell-with-icon .cell-icon { width: 16.5px; height: 16.5px; }
.cell-icon svg { width: 100%; height: 100%; color: inherit; }

/* Tracker grid's stage row (repeats at the top of most steps) \u2014 icon sits
   beside the text as one centered horizontal unit, not stacked above it.
   Kept deliberately different from .lc-cell-with-icon (used only in the
   step-3 overview, which has room to stack): the tracker's columns are
   narrow, and stage names never needed the wrap room stacking exists for. */
.lc-cell-icon-inline { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; }
.lc-cell-icon-inline .cell-icon { width: 15.4px; height: 15.4px; flex-shrink: 0; }

/* Substage heading \u2014 icon beside the page's own H1, used wherever a
   substage's title is the page title (Walkthrough, Partner Status Quo,
   Art of the Possible, Roadmap). This is where the wrap room actually is,
   so the substage icon lives here instead of in the cramped tracker cell. */
.substage-heading { display: flex; align-items: center; gap: 12px; }
.substage-heading h1 { margin: 0; }
.substage-heading .cell-icon { width: 35.2px; height: 35.2px; flex-shrink: 0; }
.lc-clickable { cursor: pointer; }
.lc-clickable:hover { background: rgba(255,255,255,0.05); }

.challenge-cloud {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(0, 206, 209, 0.3);
  border-radius: 16px;
  box-sizing: border-box;
}
.stat-ring-wrap {
  text-align: center;
}
.stat-ring-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  line-height: 1.4;
}
.stat-ring-svg { width: 140px; height: 140px; }
.nav-seg {
  background: transparent;
  border: none;
  color: var(--muted-dimmer);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-display);
}
.nav-seg:hover { color: var(--white); background: rgba(255,255,255,0.04); }
.nav-seg.active { color: var(--bg); background: var(--teal); }
.nav-seg.bookend { color: var(--muted-dimmer); font-weight: 400; font-size: 13px; }
.nav-seg-arrow { color: var(--muted-dimmer); font-size: 12px; padding: 0 2px; }

.nav-sub {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--muted-dim);
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-body);
}
.nav-sub:hover { border-color: var(--teal); color: var(--teal); }
.nav-sub.active { background: var(--teal); border-color: var(--teal); color: var(--bg); }

.nav-chip {
  background: var(--bg);
  border: 1px solid var(--card-border);
  color: var(--muted-dimmer);
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--font-body);
}
.nav-chip:hover { border-color: var(--teal); color: var(--teal); }
.nav-chip.active { background: var(--teal); border-color: var(--teal); color: var(--bg); font-weight: 600; }

.contrast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contrast-grid .col-heading {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-dimmer);
  margin-bottom: 8px;
}

/* Art of the Possible — north star + needle-moving incentive cards */
.takeaway-card {
  background: linear-gradient(160deg, rgba(0,206,209,0.08), rgba(0,206,209,0.02));
  border: 1px solid rgba(0,206,209,0.3);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.takeaway-card .card-icon { font-size: 18px; margin-bottom: 8px; display: block; }
.takeaway-icon-svg { display: block; flex-shrink: 0; }
.icon-badge {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-badge.badge-gold { background: #f0b84d; }
.icon-badge.badge-red { background: #ef6a5f; }
.icon-badge.badge-teal { background: var(--teal); }
.icon-badge svg { color: var(--bg); }

/* ---- Enablement preview grid (discussion opener) ---- */
.enablement-preview-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 20px;
  margin: 8px 0 26px;
  background: var(--card-bg);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}
@media (max-width: 900px) { .enablement-preview-grid { flex-wrap: wrap; justify-content: center; row-gap: 20px; } }
.enablement-preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: 1;
  text-align: center;
}
.enablement-preview-card .icon-badge { width: 40px; height: 40px; }
.enablement-preview-label { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.3; }

/* ---- Horizontal pill checklist \u2014 one full-width section per category ---- */
.enablement-sections-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; }
@media (max-width: 900px) { .enablement-sections-grid { grid-template-columns: 1fr; } }
.enablement-section { margin-bottom: 0; }
.enablement-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.enablement-section-header .icon-badge { width: 26px; height: 26px; }
.enablement-section-header .icon-badge svg { width: 14px; height: 14px; }
.enablement-section-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--white); }
.enablement-pills { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.enablement-pill {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--card-border);
  border-radius: 8px; padding: 9px 14px; background: var(--input-bg); cursor: pointer;
  width: 100%;
}
.enablement-pill input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--teal); cursor: pointer; flex: 0 0 auto; }
.enablement-pill span { font-size: 13px; color: var(--white); }
.enablement-pill.checked { border-color: var(--teal-dark); background: rgba(0, 206, 209, 0.08); }
.enablement-pill.readonly { cursor: default; }

/* Enablement Matrix (facilitator-only, post-session step) */
.em-card { margin-bottom: 20px; }
.em-card-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.em-activities { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.em-activity-row {
  display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
  color: var(--white); background: var(--input-bg); border: 1px solid var(--card-border);
  border-radius: 6px; padding: 6px 10px;
}
.em-activity-when { color: var(--muted-dim); font-size: 11px; white-space: nowrap; }
.em-activities-empty { font-size: 13px; color: var(--muted-dim); font-style: italic; }
/* Relevant toggle is a distinct gold highlight layered on top of the
   existing teal status treatment (checked/effective), so the two signals
   -- "exists today" vs "facilitator marked relevant here" -- stay visually
   separable rather than competing for the same color. */
.enablement-pill.relevant { border-color: var(--nice); box-shadow: inset 0 0 0 1px var(--nice); }
.enablement-pill .relevant-hint { font-size: 10px; color: var(--muted-dimmer); margin-left: 8px; flex: 0 0 auto; }
.enablement-pill.relevant .relevant-hint { color: var(--nice); font-weight: 600; }
.enablement-pill.effective.relevant .relevant-hint { color: var(--bg); opacity: 0.85; }
.em-pill-wrap { margin-bottom: 8px; }
.em-pill-wrap .enablement-pill { margin-bottom: 0; width: 100%; }
.em-chip-block {
  margin: 4px 0 0 14px; padding: 8px 10px; border-left: 2px solid var(--nice);
  background: rgba(240, 184, 77, 0.04);
}
.em-chip-hint { font-size: 11px; color: var(--muted-dim); margin-bottom: 6px; }
.em-chip-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--white); padding: 3px 0; cursor: pointer; }
.em-chip-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--nice); cursor: pointer; flex: 0 0 auto; margin-top: 1px; }
.em-chip-unchecked { color: var(--muted-dimmer); text-decoration: line-through; }
.takeaway-card .readout-label { color: var(--teal); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.takeaway-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.takeaway-card .example-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bg); background: var(--teal);
  padding: 3px 9px; border-radius: 20px;
  line-height: 1;
}
.takeaway-card .example-tag.tag-gold { background: #f0b84d; }
.takeaway-card .example-tag.tag-red { background: #ef6a5f; }
.takeaway-card .takeaway-text { font-size: 17px; color: var(--muted); line-height: 1.65; max-width: 1200px; }
.takeaway-card .takeaway-text:has(.needle-list) { max-width: none; }

.needle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 24px;
}
.needle-list li {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.5;
}
.needle-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ef6a5f;
}

.possible-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .possible-grid-4 { grid-template-columns: 1fr 1fr; }
  .needle-list { grid-template-columns: 1fr 1fr; }
}
.possible-card-sm {
  background: linear-gradient(160deg, rgba(0,206,209,0.08), rgba(0,206,209,0.02));
  border: 1px solid rgba(0,206,209,0.3);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.possible-card-sm .readout-label { font-size: 12px; color: var(--teal); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.possible-card-sm .readout-value { font-size: 15px; color: var(--white); line-height: 1.5; }

.readout-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.readout-list li {
  position: relative;
  padding-left: 14px;
  font-size: 15px;
  color: var(--white);
  line-height: 1.5;
}
.readout-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--teal);
}

/* Possibilities panel (facilitator-only quick reference, separate from scratchpad) */
.possibilities-toggle { position: fixed; bottom: 70px; right: 130px; z-index: 20; }
.possibilities-panel {
  position: fixed;
  bottom: 110px; right: 24px;
  width: 380px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--navy-800, #10151c);
  border: 1px solid var(--teal-dark);
  border-radius: var(--radius);
  padding: 16px;
  z-index: 20;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.possibilities-panel h3 { margin-bottom: 12px; }
.possibility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
  color: var(--white);
}
.possibility-row:last-child { border-bottom: none; }
.pill-locked {
  display: inline-block;
  font-size: 10px;
  color: var(--muted-dimmer);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 2px 8px;
  margin-left: 8px;
}

.setup-form { max-width: 420px; margin: 60px auto 0; }

.empty-state {
  text-align: center;
  padding: 100px 20px;
  color: var(--muted-dimmer);
}

@media (max-width: 720px) {
  .raci-grid { grid-template-columns: repeat(4, 1fr); }
  .contrast-grid { grid-template-columns: 1fr; }
  .lc-grid { flex-wrap: wrap; }
  .needle-list { grid-template-columns: 1fr; }
}

@media (min-width: 1400px) {
  .raci-buttons button { padding: 9px 0; font-size: 14px; }
  .raci-cell .role-name { font-size: 13px; }
  .checklist label { font-size: 15px; }
  .card { padding: 30px; }
  h1 { font-size: 34px; }
  p { font-size: 17px; }
  .stat-ring-svg { width: 180px; height: 180px; }
  .stat-ring-label { font-size: 13px; max-width: 260px; margin-left: auto; margin-right: auto; }
  .lc-diagram { max-width: 420px; }
  .lc-cell { padding: 12px 8px; font-size: 13px; }
  .lc-stage-cell { font-size: 13px; }
  .takeaway-card .takeaway-text { font-size: 19px; max-width: 1500px; }
  .takeaway-card .example-tag { font-size: 13px; padding: 5px 11px; }
  .possible-card-sm .readout-value { font-size: 17px; }
  .possible-card-sm .readout-label { font-size: 13px; }
  .needle-list li { font-size: 19px; }
  .readout-list li { font-size: 17px; }
}

@media (min-width: 1900px) {
  .main { padding-left: 48px; padding-right: 48px; }
  .card { padding: 36px; }
  h1 { font-size: 38px; }
  h2 { font-size: 28px; }
  p { font-size: 18px; }
  .raci-buttons button { padding: 11px 0; font-size: 15px; }
  .raci-cell .role-name { font-size: 14px; min-height: 32px; }
  .checklist label { font-size: 16px; }
  .checklist input[type="checkbox"] { width: 17px; height: 17px; }
  .field-label { font-size: 15px; }
  .stat-ring-svg { width: 220px; height: 220px; }
  .stat-ring-label { font-size: 14px; max-width: 300px; }
  .lc-diagram { max-width: 520px; }
  .lc-cell { padding: 14px 10px; font-size: 14px; }
  .lc-stage-cell { font-size: 14px; }
  textarea, input[type="text"], input[type="number"], select { font-size: 16px; padding: 12px 14px; }
  .takeaway-card .takeaway-text { font-size: 21px; max-width: none; }
  .takeaway-card .example-tag { font-size: 14px; padding: 6px 12px; }
  .possible-card-sm .readout-value { font-size: 19px; }
  .possible-card-sm .readout-label { font-size: 15px; }
  .needle-list li { font-size: 21px; }
  .readout-list li { font-size: 19px; }
}

.page-footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 0 100px;
}
.page-footer-logo img {
  height: 32px;
  width: auto;
  opacity: 0.8;
}
.page-footer-caption {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dimmer);
}
/* ---------------------------------------------------------------------
   RACI primer — role cards (R/A/C/I)
--------------------------------------------------------------------- */
.raci-fun-fact {
  font-style: italic;
  color: var(--muted-dim);
  margin-bottom: 20px;
}

.raci-role-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
@media (min-width: 900px) {
  .raci-role-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

.raci-role-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--card-bg);
}

.raci-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--white);
  margin-bottom: 10px;
}

.raci-role-title { font-weight: 500; font-size: 14px; margin-bottom: 4px; }
.raci-role-desc { font-size: 13px; color: var(--muted-dim); line-height: 1.5; margin: 0; }

.raci-role-card.role-r { border-color: rgba(239,106,95,0.35); background: rgba(239,106,95,0.07); }
.raci-role-card.role-r .raci-role-badge { background: var(--critical); }
.raci-role-card.role-r .raci-role-title { color: var(--critical); }

.raci-role-card.role-a { border-color: rgba(0,206,209,0.35); background: rgba(0,206,209,0.07); }
.raci-role-card.role-a .raci-role-badge { background: var(--teal); }
.raci-role-card.role-a .raci-role-title { color: var(--teal); }

.raci-role-card.role-c { border-color: rgba(240,184,77,0.35); background: rgba(240,184,77,0.08); }
.raci-role-card.role-c .raci-role-badge { background: var(--nice); }
.raci-role-card.role-c .raci-role-title { color: var(--nice); }

.raci-role-card.role-i { border-color: rgba(75,95,116,0.5); background: rgba(75,95,116,0.12); }
.raci-role-card.role-i .raci-role-badge { background: var(--none); color: var(--white); }
.raci-role-card.role-i .raci-role-title { color: var(--muted-dim); }

/* ---------------------------------------------------------------------
   Intro overview — diagram + 3-row grid + Stage/Takeaway table
--------------------------------------------------------------------- */
.lifecycle-overview { width: 100%; }

.intro-diagram {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 40px;
  padding: 12px 24px;
}

.lc-grid-overview { margin-bottom: 28px; }
.lc-grid-overview .lc-col { transition: background 0.15s ease; cursor: default; }
.lc-grid-overview .lc-stage-cell { transition: color 0.15s ease; }
.lc-grid-overview .lc-col.active { background: rgba(0, 206, 209, 0.07); }
.lc-grid-overview .lc-col.active .lc-stage-cell { color: var(--teal); font-weight: 700; }

.lifecycle-table-takeaways {
  width: 100%;
  border-collapse: collapse;
}
.lifecycle-table-takeaways td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--card-border);
  font-size: 14px;
  vertical-align: top;
}
.lifecycle-table-takeaways .stage-name-cell {
  width: 160px;
  font-weight: 600;
  color: var(--muted-dim);
  white-space: nowrap;
}
.lifecycle-table-takeaways .takeaway-cell { color: var(--muted-dim); }
.lifecycle-table-takeaways tr { transition: background 0.15s ease; }
.lifecycle-table-takeaways .takeaway-cell { transition: color 0.15s ease, font-weight 0.15s ease; }
.lifecycle-table-takeaways tr.active { background: rgba(0, 206, 209, 0.06); }
.lifecycle-table-takeaways tr.active .stage-name-cell { color: var(--teal); }
.lifecycle-table-takeaways tr.active .takeaway-cell { color: var(--white); font-weight: 600; }

/* ---------------------------------------------------------------------
   Possibilities tag chips (Co-sell / Partner-led / Both)
--------------------------------------------------------------------- */
.tag-chip {
  display: inline-block;
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tag-chip.cosell { background: rgba(0,206,209,0.14); color: var(--teal); border: 1px solid rgba(0,206,209,0.35); }
.tag-chip.partner-led { background: rgba(240,184,77,0.14); color: var(--nice); border: 1px solid rgba(240,184,77,0.35); }
.tag-chip.both { background: rgba(255,255,255,0.08); color: var(--muted-dim); border: 1px solid var(--card-border); }
.facilitator-note-item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.facilitator-note-item .fn-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.facilitator-note-item textarea {
  width: 100%;
}

.enablement-pill.effective {
  border-color: var(--teal);
  background: var(--teal);
}
.enablement-pill.effective span { color: var(--bg); font-weight: 600; }
.enablement-pill .state-hint { font-size: 10px; color: var(--muted-dimmer); margin-left: auto; }
.enablement-pill.checked .state-hint { color: var(--teal-dark); }
.enablement-pill.effective .state-hint { color: var(--bg); opacity: 0.7; }
/* Partner Alignment Narrative -- capture blocks (Partner Status Quo /
   Roadmap checkpoints) and the Where to Start review step. Reuses .card,
   .field-label, .btn conventions already established above rather than
   inventing a new visual language for this feature. */
.alignment-block .field-label { margin-bottom: 10px; }
.alignment-field {
  border-top: 1px solid var(--card-border);
  padding-top: 12px;
  margin-top: 12px;
}
.alignment-field:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.alignment-field .field-label { margin-bottom: 4px; }
.alignment-question {
  font-size: 13px;
  color: var(--muted-dim);
  line-height: 1.5;
  margin: 0 0 8px 0;
}
.alignment-field textarea {
  width: 100%;
  margin-bottom: 6px;
}
.alignment-field textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.alignment-prefill-banner {
  font-size: 12px;
  font-style: italic;
  color: var(--teal);
  margin: 0 0 6px 0;
}
.alignment-skip-note {
  font-size: 12px;
  font-style: italic;
  color: var(--muted-dimmer);
  margin: 0 0 6px 0;
}
.alignment-skip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted-dim);
  cursor: pointer;
}
.alignment-skip input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--teal-dark);
  cursor: pointer;
}

/* Where to Start review step (alignment-review) -- same .alignment-field
   rhythm, plus Today/Ahead sub-labels and the all-clean collapse line. */
.alignment-review-sublabel {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-dimmer);
  margin: 6px 0 4px 0;
}
.alignment-review-sublabel:first-of-type { margin-top: 0; }
.alignment-clean-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--muted-dim);
}
.alignment-add-anyway {
  padding: 4px 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* Partner status-quo client screen -- side-by-side layout: full-menu chip
   grids (left) next to the alignment narrative (right). Muted borders
   throughout so teal stays reserved for "this is a value/selection"
   (selected chips, alignment field labels) rather than competing with
   itself as a container color too. */
.align-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.align-split .card {
  margin-top: 0;
  margin-bottom: 0;
  height: 100%;
}
.chip-section + .chip-section { margin-top: 14px; }
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.chip {
  display: inline-block;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  color: var(--muted-dimmer);
}
.chip-selected {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--bg-darker);
  font-weight: 600;
}