/* =============================================================
   LFM LAW FIRM AUDIT — CONSOLIDATED CSS
   Cleaned from original ~3,800 lines
   Key changes:
   1. Single .panel-branded rule replaces 6 step-scoped duplicates
   2. Single .s2-freedom-* ruleset replaces 4 identical tray blocks
   3. #fin_snapshot_panel duplicate removed
   4. Typos fixed: "Monhtly" → "Monthly", "RATEo" → "RATE"
   ============================================================= */
/* =========================
   TOKENS
========================= */
:root {
  --bg: #020617;
  --panel: #0f172a;
  --accent: #c5a059;
  --navy: #1e293b;
  --text: #e5e7eb;
  --card-bg: #ffffff;
  --card-text: #0f172a;
  --radius: 12px;
  --dashboard-blue: #0B2A5B;
}
/* =========================
   BASE
========================= */
* { box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  margin: 0;
  height: 100vh;
  overflow: hidden;
}
.app { display: flex; min-height: 100vh; }
/* SIDEBAR */
aside {
  width: 260px;
  position: fixed;
  height: 100vh;
  background: var(--panel);
  padding: 20px;
  z-index: 10;
}
.logo-main { display: block; width: 180px; height: auto; margin: 0 auto; }
.steps { margin-top: 50px; display: flex; flex-direction: column; gap: -5px; }
.step {
  display: flex; align-items: center; gap: 12px; padding: 6px 10px;
  opacity: 0.5; transition: 0.3s; cursor: pointer;
}
.step.active { opacity: 1; color: var(--accent); font-weight: bold; }
.num {
  width: 28px; height: 28px; border: 2px solid var(--accent);
  border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem;
}
/* =========================
   MAIN LAYOUT
========================= */
main {
  margin-left: 260px;
  padding: 5px 40px;
  width: calc(100% - 260px);
  height: 100vh;
  position: relative;
  overflow-y: auto;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .briefing-container {
  background: var(--card-bg);
  color: var(--card-text);
  padding: 28px 50px;
  border-radius: var(--radius);
  min-height: 88vh;
  margin-top: 0;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.tactical-header {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 10px;
}
/* =========================
   TACTICAL NAV (HEADER)
========================= */
header.tactical-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
header.tactical-nav #title {
  margin: 0; padding: 0; flex: 1; min-width: 0;
}
header.tactical-nav .nav-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
  margin-left: auto;
}
header.tactical-nav #back {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 10px;
  border: 2px solid #caa257; background: transparent; color: #ffffff;
  font-weight: 800; letter-spacing: 0.5px; cursor: pointer;
}
header.tactical-nav #back:hover { background: rgba(202,162,87,0.15); }
header.tactical-nav .btn-clear-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(197,160,89,0.45);
  color: #c5a059;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
header.tactical-nav .btn-clear-step:hover {
  background: rgba(220,60,60,0.12);
  border-color: rgba(220,60,60,0.65);
  color: #ff8a8a;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(220,60,60,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
}
header.tactical-nav .btn-clear-step:active { transform: translateY(0); }
header.tactical-nav .btn-clear-step[hidden] { display: none !important; }
header.tactical-nav #next {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 10px; border: none;
  background: var(--accent); color: #0f172a;
  font-weight: 900; letter-spacing: 0.5px; cursor: pointer;
}
header.tactical-nav #next:hover { filter: brightness(1.05); }
/* =========================
   GLOBAL BUTTONS
========================= */
.btn-primary {
  background: #c79b4c;
  color: #0f2a4a;
  font-weight: 800;
  font-size: 18px;
  padding: 14px 36px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  letter-spacing: .04em;
  transition: all .2s ease;
}
.btn-primary:hover { background: #d7ab5a; transform: translateY(-1px); }
.s2-calc-btn {
  width: 100%; padding: 18px; border-radius: 14px;
  font-size: 1.05rem; font-weight: 950; letter-spacing: 2px;
  text-transform: uppercase; display: block;
}
.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); }
/* Form controls */
input[type="text"],
input[type="number"],
input[type="range"],
select,
textarea {
  width: 100%; padding: 12px;
  border: 1px solid #cbd5e1; border-radius: 6px;
}
input[type="checkbox"] { width: auto; padding: 0; border-radius: 4px; }
/* =========================
   GLOBAL FILLED STATE
========================= */
input.is-filled,
textarea.is-filled,
select.is-filled {
  background: #e8e8e8;
  color: #1a1a1a;
  border-color: rgba(0,0,0,0.22);
}
input.is-filled::placeholder,
textarea.is-filled::placeholder { color: rgba(0,0,0,0.35); }
/* =========================
   S2 PANEL BASE
========================= */
.s2-panel {
  background: var(--navy);
  border: 2px solid #020617;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
.s2-panel-head {
  background: #f8fafc;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  border: 1px solid rgba(15,23,42,0.10);
}
.s2-head-left  { color: #0f172a; font-weight: 950; font-size: 0.95rem; }
.s2-head-right { color: rgba(15,23,42,0.70); font-weight: 950; font-size: 0.72rem; text-transform: uppercase; }
/* =========================
   PANEL BRANDED BACKGROUND
   (replaces 6 step-scoped duplicates)
========================= */
#step2 .s2-panel,
#step3 .s2-panel,
#step4 .s2-panel,
#step5 .s2-panel,
#step6 .s2-panel,
#step7 .s2-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(6,12,28,0.75) 0%, rgba(7,14,32,0.85) 100%),
    url("images/AhqGB6V.png") center center / cover no-repeat;
}
#step2 .s2-panel::before,
#step3 .s2-panel::before,
#step4 .s2-panel::before,
#step5 .s2-panel::before,
#step6 .s2-panel::before,
#step7 .s2-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.35));
  pointer-events: none;
  z-index: 0;
}
#step2 .s2-panel > *,
#step3 .s2-panel > *,
#step4 .s2-panel > *,
#step5 .s2-panel > *,
#step6 .s2-panel > *,
#step7 .s2-panel > * { position: relative; z-index: 1; }
/* =========================
   S2 INPUTS
========================= */
.s2-input {
  width: 100%; padding: 12px; border-radius: 12px;
  border: 2px solid rgba(197,160,89,0.75);
  background: rgba(2,6,23,0.55);
  color: #ffffff; font-weight: 900;
}
.s2-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(197,160,89,0.22);
}
textarea.s2-textarea {
  resize: vertical;
  min-height: 52px;
  line-height: 1.4;
  font-family: inherit;
  font-size: inherit;
  overflow: hidden;
}
.s2-helper {
  margin-top: 8px; color: rgba(255,255,255,0.70);
  font-weight: 800; line-height: 1.35; font-size: 0.9rem;
}
/* =========================
   TIER GRIDS & CARDS
========================= */
.s2-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px; margin-top: 6px;
}
.s2-tier-card {
  cursor: pointer; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(2,6,23,0.35); border-radius: 14px;
  padding: 16px; text-align: center; transition: 0.2s; color: #ffffff;
}
.s2-tier-card:hover { transform: scale(1.02); border-color: var(--accent); }
.s2-tier-card.active-tier, .s2-tier-card.active {
  border: 2px solid var(--accent);
  box-shadow: 0 0 18px rgba(197,160,89,0.35);
  background: rgba(197,160,89,0.1);
}
/* =========================
   DIAGNOSTIC ROWS
========================= */
.s2-diag-row {
  display: grid;
  grid-template-columns: 1.15fr 0.9fr 0.9fr;
  gap: 12px; background: rgba(2,6,23,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 12px; margin-bottom: 12px;
}
.s2-metric-box {
  background: #f8fafc; border-radius: 14px; padding: 14px;
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 6px;
}
.s2-metric-value {
  color: #0f172a; font-weight: 950; font-size: 1.8rem;
  width: 100%; text-align: center; margin: 0;
}
.s2-metric-sub {
  margin-top: 8px; color: rgba(15,23,42,0.70);
  font-weight: 800; line-height: 1.35;
}
@keyframes kpiPulse {
  0%   { box-shadow: 0 0 0 rgba(197,160,89,0.00); }
  50%  { box-shadow: 0 0 0 4px rgba(197,160,89,0.18); }
  100% { box-shadow: 0 0 0 rgba(197,160,89,0.00); }
}
/* =========================
   SPLIT ACTIONS (GLOBAL)
========================= */
.split-actions {
  display: flex; gap: 14px;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 24px;
}
.split-actions-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.split-actions button { flex: 1 1 0; }
@media (max-width: 768px) {
  .split-actions, .split-actions-2 { flex-direction: column; }
}
/* =========================
   FREEDOM GAP TRAY (SHARED)
   Replaces 4 identical step-scoped copies
========================= */
.s2-freedom-simple {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px; align-items: stretch;
}
@media (max-width: 1100px) {
  .s2-freedom-simple { grid-template-columns: 1fr; }
}
.s2-freedom-zone {
  background: #f8fafc; border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  padding: 14px; box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.s2-freedom-label {
  color: rgba(15,23,42,0.75); font-weight: 950;
  letter-spacing: 2px; text-transform: uppercase; font-size: 0.72rem;
}
.s2-freedom-hero {
  margin-top: 10px; color: #0f172a;
  font-weight: 950; font-size: 2.2rem; line-height: 1.05;
}
.s2-freedom-sub {
  margin-top: 8px; color: rgba(15,23,42,0.70);
  font-weight: 800; line-height: 1.35;
}
.s2-freedom-breakdown {
  margin-top: 10px; border-top: 1px solid rgba(15,23,42,0.10);
  padding-top: 10px; display: grid; gap: 8px;
}
.s2-freedom-row {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px;
}
.s2-freedom-row-label { color: rgba(15,23,42,0.75); font-weight: 900; }
.s2-freedom-row-value { color: #0f172a; font-weight: 950; }
.s2-freedom-coverage-line {
  margin-top: 10px; display: flex; align-items: baseline; gap: 10px;
}
.s2-freedom-coverage-value { color: #0f172a; font-weight: 950; font-size: 2.0rem; line-height: 1.05; }
.s2-freedom-coverage-text  { color: rgba(15,23,42,0.70); font-weight: 900; }
.s2-coverage-bar {
  margin-top: 10px; height: 10px; border-radius: 999px;
  background: rgba(15,23,42,0.10); overflow: hidden;
  border: 1px solid rgba(15,23,42,0.10);
}
.s2-coverage-fill {
  height: 100%; width: 0%; background: var(--accent);
  border-radius: 999px; transition: width 350ms ease;
}
.s2-next { margin-top: 12px; }
.s2-next .btn-primary { width: 100%; padding: 16px; border-radius: 12px; cursor: pointer; }
/* =========================
   STEP 1
========================= */
#step1 .briefing-container.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
}
#step1 .mission-brief  { height: 100%; min-height: 100%; }
#step1 .mission-image  { display: flex; justify-content: center; align-items: center; }
#step1 .mission-image img {
  max-width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
#step1 .tactical-header { font-size: 0.85rem; letter-spacing: 2px; }
#step1 .briefing-title  { font-size: 3.2rem; line-height: 1.15; margin-bottom: 24px; }
#step1 .quote-block p   { font-size: 1.35rem; line-height: 1.6; }
#step1 .quote-block .attribution { font-size: 0.95rem; letter-spacing: 0.5px; display: block; margin-top: 10px; }
#step1 .briefing-body p { font-size: 1.15rem; line-height: 1.7; margin-bottom: 22px; }
#step1 .quote-block     { margin-bottom: 32px; }
#step1 .cta-wrap { margin-top: auto; padding-top: 18px; }
#step1 .cta-row  { display: flex; gap: 12px; width: 100%; }
#step1 .btn-premium {
  flex: 1; height: 58px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 950; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: 0.2s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.28);
}
#step1 .btn-premium-clear {
  background: linear-gradient(180deg, #1E3B68, #082147);
  border: 2px solid #546A8C;
  color: #ffffff;
}
#step1 .btn-premium-crush {
  background: linear-gradient(180deg, #CAA866, #997D45);
  border: 2px solid var(--accent); color: #020617;
}
#step1 .btn-premium:hover { filter: brightness(1.05); transform: translateY(-1px); }
@media (max-width: 900px) {
  #step1 .briefing-container.split { grid-template-columns: 1fr; }
  #step1 .mission-image { margin-top: 32px; }
}
@media (max-width: 700px) {
  #step1 .cta-row { flex-direction: column; }
  #step1 .btn-premium { width: 100%; }
}
/* =========================
   STEP 2
========================= */
#step2 .s2-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
#step2 .s2-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
#step2 .s2-field  { margin-bottom: 0; }
#step2 .s2-panel,
#step2 .s2-panel label,
#step2 .s2-panel .s2-q-title,
#step2 .s2-panel .s2-metric-label { color: #ffffff; }
#step2 .s2-diag-row .s2-metric-label { width: 100%; text-align: center; display: block; }
#step2 .s2-diag-row .s2-metric      { text-align: center; }
#step2 .s2-vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#step2 .s2-vision-card {
  background: rgba(2,6,23,0.30); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column;
}
#step2 .s2-vision-kicker {
  font-weight: 950; letter-spacing: 2px; text-transform: uppercase;
  font-size: 0.72rem; margin-bottom: 12px;
}
#step2 .s2-kicker--personal { color: #94a3b8; }
#step2 .s2-kicker--business { color: var(--accent); }
#step2 .s2-note  { margin-top: 10px; color: rgba(255,255,255,0.70); font-weight: 800; line-height: 1.35; }
#step2 .s2-actions { margin: 12px 0 8px; }
#step2 .s2-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#step2 .s2-result-box {
  background: #f8fafc; border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  padding: 14px; box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
#step2 .s2-result-label {
  color: rgba(15,23,42,0.75); font-weight: 950;
  letter-spacing: 2px; text-transform: uppercase; font-size: 0.72rem;
}
#step2 .s2-result-value { margin-top: 8px; color: #0f172a; font-weight: 950; font-size: 2.2rem; }
#step2 .s2-result-sub   { margin-top: 8px; color: rgba(15,23,42,0.70); font-weight: 800; line-height: 1.35; }
#step2 .s2-quote {
  margin-top: 12px; border-radius: 14px;
  border: 2px solid var(--accent); background: rgba(2,6,23,0.28); padding: 14px;
}
#step2 .s2-quote-title {
  color: var(--accent); font-weight: 950; letter-spacing: 2px;
  text-transform: uppercase; font-size: 0.72rem;
}
#step2 .s2-quote-text { margin-top: 10px; color: #ffffff; font-weight: 900; font-size: 1.02rem; line-height: 1.45; }
/* Step 2 vision alignment */
#step2 .s2-vision-grid    { align-items: stretch; }
#step2 .s2-vision-card .s2-field { flex-grow: 1; display: flex; flex-direction: column; }
#step2 #personal_goal_1,
#step2 #personal_goal_2,
#step2 #personal_goal_3  { flex-grow: 1; padding-top: 16px; padding-bottom: 16px; }
#step2 .s2-tier-card .s2-tier-title { font-size: 1.15rem; font-weight: 950; }
#step2 .s2-tier-card .s2-tier-sub   { font-size: 0.95rem; font-weight: 800; }
@media (max-width: 1100px) {
  #step2 .s2-grid-2, #step2 .s2-grid-3,
  #step2 .s2-tier-grid, #step2 .s2-diag-row,
  #step2 .s2-vision-grid, #step2 .s2-results-grid { grid-template-columns: 1fr; }
}
/* =========================
   STEP 3 — FINANCE
========================= */
#step3 .s2-actions { margin: 12px 0 8px; display: flex; justify-content: center; }
#step3 .s2-next    { margin-top: 12px; }
#step3 .s2-next .btn-primary { width: 100%; padding: 16px; border-radius: 12px; cursor: pointer; }
/* =========================
   RUN BUTTON SHARED STYLE (steps 3,4,5,6)
========================= */
.mkt-run-wrap   { margin-bottom: 14px; }
.mkt-run-btn    { width: 100%; border-radius: 14px; padding: 18px; letter-spacing: 2px; font-weight: 950; }
#step6 .mkt-run-wrap { margin-bottom: 22px; }
/* =========================
   FINANCE SNAPSHOT PANEL (Step 3)
========================= */
#fin_snapshot_panel { margin-bottom: 16px; }
#fin_snapshot_panel .s2-panel-head { margin-bottom: 12px; }
#fin_snapshot_panel .s2-input {
  height: 42px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(2,6,23,0.35); color: #ffffff; font-weight: 800;
}
#fin_snapshot_panel .s2-input::placeholder { color: rgba(255,255,255,0.55); font-weight: 700; }
#fin_snapshot_panel .s2-input:focus {
  outline: none; border-color: rgba(197,160,89,0.70);
  box-shadow: 0 0 0 3px rgba(197,160,89,0.18);
}
/* Topbar */
#fin_snapshot_panel .mkt-topbar {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px; margin-bottom: 10px; align-items: stretch;
}
#fin_snapshot_panel .mkt-topbar-item {
  background: rgba(15,23,42,0.28); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#fin_snapshot_panel .mkt-topbar-label {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: rgba(255,255,255,0.90); font-weight: 950; letter-spacing: 1.8px;
  text-transform: uppercase; font-size: 0.68rem; margin-bottom: 8px;
}
#fin_snapshot_panel .mkt-inline  { display: flex; align-items: center; gap: 10px; }
#fin_snapshot_panel .mkt-suffix  { color: rgba(255,255,255,0.80); font-weight: 950; }
/* Reset button */
#fin_snapshot_panel .fin-reset {
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(2,6,23,0.40);
  color: rgba(255,255,255,0.78); font-weight: 950; font-size: 0.64rem;
  letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
#fin_snapshot_panel .fin-reset:hover { border-color: rgba(197,160,89,0.70); color: #ffffff; }
/* Command center grid */
#fin_snapshot_panel .mkt-cc-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 10px; align-items: stretch;
}
#fin_snapshot_panel .mkt-cc-left,
#fin_snapshot_panel .mkt-cc-right { display: flex; flex-direction: column; min-height: 100%; }
#fin_snapshot_panel .mkt-cc-block {
  background: rgba(15,23,42,0.22); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 12px; margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#fin_snapshot_panel .mkt-cc-block:last-child { margin-bottom: 0; }
#fin_snapshot_panel .mkt-cc-block-title {
  color: var(--accent); font-weight: 950; letter-spacing: 2.2px;
  text-transform: uppercase; font-size: 0.70rem; margin-bottom: 10px;
}
#fin_snapshot_panel .mkt-cc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#fin_snapshot_panel .mkt-cc-row > div { display: flex; flex-direction: column; gap: 6px; }
#fin_snapshot_panel .mkt-cc-row .s2-input { width: 100%; box-sizing: border-box; }
#fin_snapshot_panel .mkt-cc-label {
  color: rgba(255,255,255,0.92); font-weight: 950; letter-spacing: 1.6px;
  text-transform: uppercase; font-size: 0.68rem; margin-bottom: 7px;
}
/* KPI grid */
#fin_snapshot_panel .mkt-kpi-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; flex: 1; grid-auto-rows: 1fr; align-items: stretch;
}
#fin_snapshot_panel .mkt-kpi-card {
  border-radius: 16px; padding: 14px;
  border: 1px solid rgba(197,160,89,0.55);
  background: rgba(15,23,42,0.30); box-shadow: 0 16px 38px rgba(0,0,0,0.18);
  display: grid; grid-template-rows: auto 1fr auto;
  justify-items: center; text-align: center;
}
#fin_snapshot_panel .mkt-kpi-label {
  margin: 0; width: 100%; text-align: center;
  color: rgba(255,255,255,0.82); font-weight: 950;
  letter-spacing: 2px; text-transform: uppercase; font-size: 0.68rem; align-self: start;
}
#fin_snapshot_panel .mkt-kpi-value {
  margin: 0; width: 100%; text-align: center;
  color: #ffffff; font-weight: 950; font-size: 1.75rem; line-height: 1.05; align-self: center;
}
#fin_snapshot_panel .mkt-kpi-sub {
  margin: 0; width: 100%; text-align: center;
  color: rgba(255,255,255,0.65); font-weight: 800; font-size: 0.84rem;
  line-height: 1.25; align-self: end; min-height: 2.5em;
  display: flex; align-items: center; justify-content: center;
}
/* Tier cards in finance */
#fin_snapshot_panel .fin-tier-wrap  { margin-top: 2px; }
#fin_snapshot_panel .s2-tier-grid   { margin-top: 8px; gap: 10px; }
#fin_snapshot_panel .s2-tier-card   { min-height: 54px; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(2,6,23,0.30); }
#fin_snapshot_panel .s2-tier-card .s2-tier-title { font-weight: 950; font-size: 0.92rem; color: #ffffff; }
#fin_snapshot_panel .s2-tier-card .s2-tier-sub   { font-weight: 800; font-size: 0.78rem; color: rgba(255,255,255,0.72); }
/* Billing maturity colors */
#fin_snapshot_panel #fin_billing_maturity_ad_hoc.s2-tier-card.active    { border: 2px solid #ef4444 !important; background: rgba(239,68,68,0.18) !important; box-shadow: 0 0 16px rgba(239,68,68,0.35) !important; }
#fin_snapshot_panel #fin_billing_maturity_doc_manual.s2-tier-card.active { border: 2px solid #eab308 !important; background: rgba(234,179,8,0.18) !important; box-shadow: 0 0 16px rgba(234,179,8,0.30) !important; }
#fin_snapshot_panel #fin_billing_maturity_automated.s2-tier-card.active  { border: 2px solid #22c55e !important; background: rgba(34,197,94,0.18) !important; box-shadow: 0 0 16px rgba(34,197,94,0.30) !important; }
#fin_snapshot_panel .s2-helper { margin-top: 8px; color: rgba(255,255,255,0.65); font-weight: 800; font-size: 0.85rem; }
@media (max-width: 1100px) {
  #fin_snapshot_panel .mkt-topbar,
  #fin_snapshot_panel .mkt-cc-grid,
  #fin_snapshot_panel .mkt-cc-row,
  #fin_snapshot_panel .mkt-kpi-grid { grid-template-columns: 1fr; }
}
/* =========================
   MARKETING SNAPSHOT PANEL (Step 4)
========================= */
#mkt_snapshot_panel { margin-bottom: 16px; }
#mkt_snapshot_panel .s2-panel-head { margin-bottom: 12px; }
#mkt_snapshot_panel .s2-input {
  height: 42px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(2,6,23,0.35); color: #ffffff; font-weight: 800;
}
#mkt_snapshot_panel .s2-input::placeholder { color: rgba(255,255,255,0.55); font-weight: 700; }
#mkt_snapshot_panel .s2-input:focus { outline: none; border-color: rgba(197,160,89,0.70); box-shadow: 0 0 0 3px rgba(197,160,89,0.18); }
#mkt_snapshot_panel .mkt-topbar {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px; margin-bottom: 10px;
}
#mkt_snapshot_panel .mkt-topbar-item {
  background: rgba(15,23,42,0.28); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#mkt_snapshot_panel .mkt-topbar-label {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: rgba(255,255,255,0.90); font-weight: 950; letter-spacing: 1.8px;
  text-transform: uppercase; font-size: 0.68rem; margin-bottom: 8px;
}
#mkt_snapshot_panel .mkt-inline { display: flex; align-items: center; gap: 10px; }
#mkt_snapshot_panel .mkt-suffix { color: rgba(255,255,255,0.80); font-weight: 950; }
#mkt_snapshot_panel .mkt-cc-grid  { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 10px; align-items: stretch; }
#mkt_snapshot_panel .mkt-cc-left,
#mkt_snapshot_panel .mkt-cc-right { display: flex; flex-direction: column; min-height: 100%; }
#mkt_snapshot_panel .mkt-cc-block {
  background: rgba(15,23,42,0.22); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 12px; margin-bottom: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#mkt_snapshot_panel .mkt-cc-block:last-child { margin-bottom: 0; }
#mkt_snapshot_panel .mkt-cc-block-title {
  color: var(--accent); font-weight: 950; letter-spacing: 2.2px;
  text-transform: uppercase; font-size: 0.70rem; margin-bottom: 10px;
}
#mkt_snapshot_panel .mkt-cc-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#mkt_snapshot_panel .mkt-cc-label {
  color: rgba(255,255,255,0.92); font-weight: 950; letter-spacing: 1.6px;
  text-transform: uppercase; font-size: 0.68rem; margin-bottom: 7px;
}
#mkt_snapshot_panel .mkt-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; grid-auto-rows: 1fr; }
#mkt_snapshot_panel .mkt-kpi-card {
  border-radius: 16px; padding: 14px;
  border: 1px solid rgba(197,160,89,0.55);
  background: rgba(15,23,42,0.30); box-shadow: 0 16px 38px rgba(0,0,0,0.18);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: 8px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#mkt_snapshot_panel .mkt-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 22px 52px rgba(0,0,0,0.22); border-color: rgba(197,160,89,0.80); }
#mkt_snapshot_panel .mkt-kpi-label { color: rgba(255,255,255,0.82); font-weight: 950; letter-spacing: 2px; text-transform: uppercase; font-size: 0.68rem; }
#mkt_snapshot_panel .mkt-kpi-value { margin-top: 8px; color: #ffffff; font-weight: 950; font-size: 1.75rem; line-height: 1.05; }
#mkt_snapshot_panel .mkt-kpi-sub   { margin-top: 8px; color: rgba(255,255,255,0.65); font-weight: 800; font-size: 0.84rem; line-height: 1.25; }
@media (max-width: 1100px) {
  #mkt_snapshot_panel .mkt-topbar,
  #mkt_snapshot_panel .mkt-cc-grid,
  #mkt_snapshot_panel .mkt-cc-row,
  #mkt_snapshot_panel .mkt-kpi-grid { grid-template-columns: 1fr; }
}
/* Step 4 — Marketing engine internals */
#step4 .mkt-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; grid-column: 1 / -1; }
#step4 .mkt-toggle-wrap, #step4 .mkt-block { width: 100%; }
#step4 .mkt-toggle {
  width: 100%; text-align: left; padding: 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(2,6,23,0.24);
  color: #ffffff; cursor: pointer; transition: 0.2s; font-weight: 950;
}
#step4 .mkt-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
#step4 .mkt-toggle[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 18px rgba(197,160,89,0.25); }
#step4 .mkt-toggle-meta { display: block; margin-top: 8px; color: rgba(255,255,255,0.70); font-weight: 800; font-size: 0.9rem; line-height: 1.35; }
#step4 .mkt-block { margin-top: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(2,6,23,0.18); padding: 14px; }
#step4 .mkt-block-title { color: #ffffff; font-weight: 950; font-size: 1.05rem; }
#step4 .mkt-block-sub   { color: rgba(255,255,255,0.70); font-weight: 800; margin-top: 6px; }
#step4 .mkt-engine-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 12px; align-items: start; }
#step4 .mkt-minihead    { color: rgba(255,255,255,0.80); font-weight: 950; letter-spacing: 1.6px; text-transform: uppercase; font-size: 0.72rem; margin-bottom: 10px; }
#step4 .mkt-line        { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
#step4 .mkt-line span   { color: rgba(255,255,255,0.85); font-weight: 900; }
#step4 .mkt-total       { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.10); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
#step4 .mkt-total span  { color: rgba(255,255,255,0.85); font-weight: 950; }
#step4 .mkt-kpi-row     { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
#step4 .mkt-kpi-label   { color: rgba(255,255,255,0.80); font-weight: 950; letter-spacing: 1.4px; text-transform: uppercase; font-size: 0.70rem; margin-bottom: 8px; }
#step4 .mkt-metric-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
#step4 .mkt-metric { background: #f8fafc; border-radius: 14px; padding: 14px; border: 1px solid rgba(15,23,42,0.10); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
#step4 .mkt-metric-label { color: rgba(15,23,42,0.70); font-weight: 950; letter-spacing: 1.6px; text-transform: uppercase; font-size: 0.70rem; }
#step4 .mkt-metric-value { margin-top: 0; color: #0f172a; font-weight: 950; font-size: 1.4rem; text-align: right; white-space: nowrap; }
#step4 .mkt-input-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; align-items: stretch; }
#step4 .mkt-input-card { background: rgba(15,23,42,0.28); border: 1px solid rgba(197,160,89,0.40); border-radius: 16px; padding: 14px; box-shadow: 0 14px 32px rgba(0,0,0,0.22); display: flex; flex-direction: column; gap: 10px; }
#step4 .mkt-input-label { color: rgba(255,255,255,0.90); font-weight: 950; letter-spacing: 2px; text-transform: uppercase; font-size: 0.70rem; }
#step4 .mkt-input-sub   { color: rgba(255,255,255,0.66); font-weight: 800; font-size: 0.82rem; line-height: 1.25; }
/* Force stack inside digital/offline blocks */
#step4 .mkt-block .mkt-metric-grid { display: grid !important; grid-template-columns: 1fr !important; }
@media (max-width: 1100px) {
  #step4 .mkt-opt-grid, #step4 .mkt-engine-grid, #step4 .mkt-metric-grid, #step4 .mkt-input-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  #step4 .mkt-opt-grid { grid-template-columns: 1fr; }
}
/* =========================
   STEP 5 — SALES SNAPSHOT
========================= */
#step5 #sales_snapshot_panel { padding: 18px 18px 16px; border-radius: 16px; }
#step5 #sales_snapshot_panel .s2-panel-head { background: #ffffff; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(15,23,42,0.08); }
#step5 #sales_snapshot_panel .s2-head-left { font-weight: 900; color: #0f172a; }
#step5 #sales_snapshot_panel .s2-head-right { font-weight: 900; letter-spacing: 1px; text-transform: uppercase; font-size: 0.72rem; color: rgba(15,23,42,0.80); }
#step5 #sales_snapshot_panel .mkt-topbar,
#step5 #sales_snapshot_panel .sales-q-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px;
}
#step5 #sales_snapshot_panel .mkt-topbar { margin-bottom: 12px; }
#step5 #sales_snapshot_panel .sales-q-grid { margin-bottom: 14px; }
#step5 #sales_snapshot_panel .mkt-topbar-item,
#step5 #sales_snapshot_panel .sales-q {
  border-radius: 12px; padding: 12px;
  background: rgba(15,23,42,0.55); border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#step5 #sales_snapshot_panel .mkt-topbar-label,
#step5 #sales_snapshot_panel .mkt-cc-label {
  display: block; margin: 0 0 8px; font-size: 0.72rem; font-weight: 900;
  letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.92);
}
#step5 #sales_snapshot_panel .s2-input {
  width: 100%; height: 44px; border-radius: 10px; padding: 10px 12px;
  background: rgba(2,6,23,0.72); color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.14); font-weight: 800;
}
#step5 #sales_snapshot_panel .s2-input::placeholder { color: rgba(255,255,255,0.45); }
#step5 #sales_snapshot_panel .s2-input:focus { border-color: rgba(201,160,74,0.70); }
#step5 #sales_snapshot_panel .s2-input.is-filled { background: #f8fafc; color: #0f172a; border-color: rgba(15,23,42,0.12); }
#step5 #sales_snapshot_panel select.s2-input { color: rgba(255,255,255,0.92); }
#step5 #sales_snapshot_panel select.s2-input.is-filled { color: #0f172a; }
#step5 #sales_snapshot_panel .sales-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; align-items: stretch; }
#step5 #sales_snapshot_panel .sales-kpi-col  { display: flex; flex-direction: column; gap: 14px; }
#step5 #sales_snapshot_panel .mkt-kpi-card {
  border-radius: 14px; padding: 16px 14px; border: 1px solid #c9a04a;
  background: rgba(15,23,42,0.58); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  text-align: center; display: flex; flex-direction: column; justify-content: center; min-height: 112px;
}
#step5 #sales_snapshot_panel .mkt-kpi-label { font-size: 0.70rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.92); margin: 0 0 10px; }
#step5 #sales_snapshot_panel .mkt-kpi-value { font-size: 2.05rem; font-weight: 950; line-height: 1.05; color: #ffffff; margin: 0 0 8px; }
#step5 #sales_snapshot_panel .mkt-kpi-sub   { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.78); margin: 0; }
@media (max-width: 1100px) {
  #step5 #sales_snapshot_panel .mkt-topbar,
  #step5 #sales_snapshot_panel .sales-q-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #step5 #sales_snapshot_panel .sales-kpi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #step5 #sales_snapshot_panel .mkt-topbar,
  #step5 #sales_snapshot_panel .sales-q-grid { grid-template-columns: 1fr; }
}
/* Sales analysis results */
#step5 #sales_analysis_results_panel { background: rgba(15,23,42,0.62); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 16px; margin-top: 14px; box-shadow: 0 12px 28px rgba(0,0,0,0.35); }
#step5 #sales_analysis_results_panel .s2-panel-head { background: #ffffff; border-radius: 14px; padding: 14px 16px; border: 1px solid rgba(15,23,42,0.08); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
#step5 #sales_analysis_results_panel .s2-head-left  { font-weight: 950; color: #0f172a; }
#step5 #sales_analysis_results_panel .s2-head-right { font-weight: 950; letter-spacing: 1px; text-transform: uppercase; font-size: 0.72rem; color: rgba(15,23,42,0.80); }
#step5 #sales_analysis_results_panel .sales-output-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; align-items: stretch; }
#step5 #sales_analysis_results_panel .sales-output-card { background: rgba(15,23,42,0.55); border: 1px solid rgba(201,160,74,0.65); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px; min-height: 120px; }
#step5 #sales_analysis_results_panel .mkt-input-label  { color: rgba(255,255,255,0.92); font-weight: 950; letter-spacing: 1.6px; text-transform: uppercase; font-size: 0.70rem; margin: 0; }
#step5 #sales_analysis_results_panel .sales-output-value{ color: #ffffff; font-weight: 950; font-size: 2.0rem; line-height: 1.05; margin: 0; }
#step5 #sales_analysis_results_panel .mkt-input-sub    { color: rgba(255,255,255,0.78); font-weight: 700; font-size: 0.86rem; line-height: 1.25; margin: 0; }
#step5 #sales_analysis_results_panel .mkt-kpi-row .mkt-kpi-card { border-radius: 16px; padding: 16px 14px; border: 1px solid rgba(201,160,74,0.85); background: rgba(15,23,42,0.58); text-align: center; }
#step5 #sales_analysis_results_panel .mkt-kpi-label { font-size: 0.72rem; font-weight: 950; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.92); margin-bottom: 10px; }
#step5 #sales_analysis_results_panel .mkt-kpi-value { font-size: 2.25rem; font-weight: 950; color: #ffffff; line-height: 1.05; margin-bottom: 8px; }
#step5 #sales_analysis_results_panel .mkt-kpi-sub   { font-size: 0.88rem; font-weight: 700; color: rgba(255,255,255,0.78); }
@media (max-width: 1100px) {
  #step5 #sales_analysis_results_panel .sales-output-grid { grid-template-columns: 1fr; }
}
/* =========================
   STEP 6 — PEOPLE
========================= */
#step6 .card { background: #ffffff; color: #0f172a; border-top: 4px solid var(--accent); box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
#people_snapshot_panel { background: var(--navy); border: 2px solid #020617; border-radius: 14px; padding: 14px; margin-bottom: 14px; box-shadow: 0 10px 22px rgba(0,0,0,0.10); }
#people_snapshot_panel .s2-panel-head { background: #f8fafc; border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; border: 1px solid rgba(15,23,42,0.10); }
#people_snapshot_panel .s2-head-left  { color: #0f172a; font-weight: 950; font-size: 0.95rem; }
#people_snapshot_panel .s2-head-right { color: rgba(15,23,42,0.70); font-weight: 950; font-size: 0.72rem; text-transform: uppercase; }
#people_snapshot_panel .s2-input { width: 100%; padding: 8px 12px; border-radius: 12px; border: 2px solid rgba(197,160,89,0.75); background: rgba(2,6,23,0.55); color: #ffffff; font-weight: 900; }
#people_snapshot_panel .s2-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(197,160,89,0.22); }
#people_snapshot_panel .people-grid-v2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
#people_snapshot_panel .people-grid-v2 > .ppl-span-2 { grid-column: 1 / -1; }
#people_snapshot_panel .people-tile { border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, rgba(6,12,28,0.72) 0%, rgba(7,14,32,0.84) 100%), url("images/AhqGB6V.png") center center / cover no-repeat; }
#people_snapshot_panel .people-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.32)); pointer-events: none; z-index: 0; }
#people_snapshot_panel .people-tile > * { position: relative; z-index: 1; }
#people_snapshot_panel .people-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#people_snapshot_panel .people-tile-kicker { color: var(--accent); font-weight: 950; letter-spacing: 2px; text-transform: uppercase; font-size: 0.72rem; }
#people_snapshot_panel .people-tile-title  { color: #ffffff; font-weight: 950; letter-spacing: 2px; text-transform: uppercase; font-size: 0.72rem; opacity: 0.95; }
#people_snapshot_panel .people-row   { display: flex; flex-direction: column; }
#people_snapshot_panel .people-label { color: #ffffff; font-weight: 950; letter-spacing: 1px; text-transform: uppercase; font-size: 0.74rem; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
#people_snapshot_panel .people-micro { margin-top: 4px; color: rgba(255,255,255,0.60); font-weight: 800; font-size: 0.82rem; line-height: 1.25; }
#people_snapshot_panel .fin-reset { font-weight: 950; font-size: 0.70rem; padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(15,23,42,0.20); background: #ffffff; color: #0f172a; cursor: pointer; }
#people_snapshot_panel .fin-reset:hover { opacity: 0.92; }
#people_snapshot_panel .people-foundation-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
#people_snapshot_panel .people-support-grid    { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
/* Engine tiles — 5 questions left | 3 KPI boxes right */
#people_snapshot_panel .people-tile.people-engine {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  grid-template-rows: auto auto auto auto auto auto;
  column-gap: 14px;
  row-gap: 8px;
  align-items: stretch;
}
#people_snapshot_panel .people-tile.people-engine .people-tile-top {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 0;
}
#people_snapshot_panel .people-tile.people-engine .people-engine-questions {
  grid-column: 1;
  grid-row: 2 / 7;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 8px;
}
#people_snapshot_panel .people-tile.people-engine .people-engine-qgrid {
  display: contents;
}
#people_snapshot_panel .people-tile.people-engine .people-engine-kpis {
  grid-column: 2;
  grid-row: 2 / 7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  height: 100%;
}
/* Side metric cards — centered */
#people_snapshot_panel .people-side-metric {
  border-radius: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(197,160,89,0.55);
  background: rgba(15,23,42,0.35);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex: 1;
  min-height: 0;
  gap: 4px;
}
#people_snapshot_panel .people-side-label {
  color: rgba(255,255,255,0.85);
  font-weight: 950;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.68rem;
  text-align: center;
  width: 100%;
}
#people_snapshot_panel .people-side-value {
  color: #fff;
  font-weight: 950;
  font-size: 1.6rem;
  line-height: 1.1;
  text-align: center;
  width: 100%;
}
#people_snapshot_panel .people-side-sub {
  color: rgba(255,255,255,0.70);
  font-weight: 800;
  font-size: 0.82rem;
  line-height: 1.25;
  text-align: center;
  width: 100%;
}
/* Utilization Gap color coding */
#disp_att_util_gap.is-positive,
#disp_para_util_gap.is-positive { color: #22c55e; }
#disp_att_util_gap.is-negative,
#disp_para_util_gap.is-negative { color: #ef4444; }
/* Bottom KPI row */
#people_snapshot_panel .people-kpi-row,
#people_results_tray .people-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 12px; }
#people_snapshot_panel .people-kpi-row .mkt-kpi-card,
#people_results_tray .people-kpi-row .mkt-kpi-card { border-radius: 16px; padding: 16px; border: 1px solid rgba(197,160,89,0.55); background: rgba(15,23,42,0.35); backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 170px; }
#people_snapshot_panel .people-kpi-row .mkt-kpi-label,
#people_results_tray .people-kpi-row .mkt-kpi-label { color: rgba(255,255,255,0.85); font-weight: 950; letter-spacing: 2px; text-transform: uppercase; font-size: 0.72rem; text-align: center; width: 100%; }
#people_snapshot_panel .people-kpi-row .mkt-kpi-value,
#people_results_tray .people-kpi-row .mkt-kpi-value { margin-top: 10px; color: #fff; font-weight: 950; font-size: 2.0rem; text-align: center; width: 100%; }
#people_snapshot_panel .people-kpi-row .mkt-kpi-sub,
#people_results_tray .people-kpi-row .mkt-kpi-sub   { margin-top: 10px; color: rgba(255,255,255,0.70); font-weight: 800; font-size: 0.90rem; line-height: 1.35; text-align: center; width: 100%; }
/* People freedom gap tray centering */
#people_freedomgap_tray .s2-freedom-zone          { text-align: center; align-items: center; justify-content: center; }
#people_freedomgap_tray .s2-freedom-hero          { text-align: center; }
#people_freedomgap_tray .s2-freedom-row           { display: flex; justify-content: space-between; }
#people_freedomgap_tray .s2-freedom-row-label,
#people_freedomgap_tray .s2-freedom-row-value     { width: 100%; text-align: center; }
#people_freedomgap_tray .s2-freedom-coverage-line { justify-content: center; text-align: center; }
#people_freedomgap_tray .s2-coverage-bar          { margin-left: auto; margin-right: auto; max-width: 320px; }
#people_freedomgap_tray .s2-next                  { display: flex; justify-content: center; margin-top: 24px; }
/* People results tray centering */
#people_results_tray .mkt-kpi-card  { text-align: center; align-items: center; justify-content: center; }
#people_results_tray .mkt-kpi-label,
#people_results_tray .mkt-kpi-value,
#people_results_tray .mkt-kpi-sub   { text-align: center; }
@media (max-width: 1300px) { #people_snapshot_panel .people-support-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1100px) {
  #people_snapshot_panel .people-grid-v2, #people_snapshot_panel .people-foundation-grid,
  #people_snapshot_panel .people-support-grid, #people_snapshot_panel .people-kpi-row { grid-template-columns: 1fr; }
  #people_snapshot_panel .people-tile.people-engine { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  #people_snapshot_panel .people-tile.people-engine .people-engine-questions { grid-column: 1; grid-row: 2; }
  #people_snapshot_panel .people-tile.people-engine .people-engine-kpis { grid-column: 1; grid-row: 3; height: auto; }
}
/* =========================
   STEP 7 — SYSTEMATIZE
========================= */
/* Snapshot panel */
#systematize_snapshot_panel { border-radius: 18px; overflow: hidden; }
#systematize_snapshot_panel .s2-panel-head { margin-bottom: 12px; }
#systematize_snapshot_panel .s7-snap-wrap  { width: 100%; border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; overflow: hidden; background: rgba(2,6,23,0.35); }
#systematize_snapshot_panel .s7-snap-row {
  display: grid;
  grid-template-columns: 2.2fr 0.82fr 1.12fr 1.12fr 1.12fr 1.05fr;
  align-items: center; padding: 12px 14px;
}
#systematize_snapshot_panel .s7-col { min-width: 0; }
/* Header row */
#systematize_snapshot_panel .s7-snap-head { padding: 0; column-gap: 0; border-bottom: 1px solid rgba(255,255,255,0.10); background: transparent; }
#systematize_snapshot_panel .s7-snap-head .s7-col {
  height: 54px; display: flex; align-items: center; justify-content: center; padding: 0 14px;
  border-right: 1px solid rgba(255,255,255,0.10); border-top: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.40);
  color: rgba(255,255,255,0.92); font-weight: 950; letter-spacing: 1.6px;
  text-transform: uppercase; font-size: 0.72rem; line-height: 1.15; text-align: center;
  background: linear-gradient(180deg, rgba(148,163,184,0.20), rgba(2,6,23,0.78));
}
#systematize_snapshot_panel .s7-snap-head .s7-col:first-child { border-top-left-radius: 18px; }
#systematize_snapshot_panel .s7-snap-head .s7-col:last-child  { border-right: none; border-top-right-radius: 18px; }
/* Stage header tile colors */
#systematize_snapshot_panel .s7-snap-head .s7-col:nth-child(3) { background: #9dc3e6 !important; border-right: 1px solid rgba(0,0,0,0.25) !important; color: #020617 !important; }
#systematize_snapshot_panel .s7-snap-head .s7-col:nth-child(4) { background: #ffff00 !important; border-right: 1px solid rgba(0,0,0,0.25) !important; color: #020617 !important; }
#systematize_snapshot_panel .s7-snap-head .s7-col:nth-child(5) { background: #ffc000 !important; border-right: 1px solid rgba(0,0,0,0.25) !important; color: #020617 !important; }
#systematize_snapshot_panel .s7-snap-head .s7-col:nth-child(6) { background: #b91c1c !important; color: #ffffff !important; }
/* Controls & questions rows */
#systematize_snapshot_panel .s7-snap-controls { background: rgba(2,6,23,0.28); border-bottom: 1px solid rgba(255,255,255,0.06); }
#systematize_snapshot_panel .s7-area-title { color: #fff; font-weight: 950; letter-spacing: 1.6px; text-transform: uppercase; font-size: 0.82rem; }
#systematize_snapshot_panel .s7-area-sub   { margin-top: 4px; color: rgba(255,255,255,0.70); font-weight: 700; font-size: 0.78rem; }
#systematize_snapshot_panel .s7-snap-controls .s2-input {
  height: 42px !important; width: 100%; margin: 0 !important; border-radius: 12px;
  border: 2px solid rgba(197,160,89,0.75); background: rgba(2,6,23,0.55);
  color: #ffffff; font-weight: 900; padding: 10px 12px;
  text-align: center; text-align-last: center;
}
#systematize_snapshot_panel .s7-snap-controls .s2-input:focus { border-color: rgba(197,160,89,1); box-shadow: 0 0 0 3px rgba(197,160,89,0.22); }
/* Revenue leak chips */
#systematize_snapshot_panel .s7-leak-chip { height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(2,6,23,0.42); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.80); font-weight: 900; letter-spacing: 0.6px; font-size: 0.86rem; width: 100%; }
/* YES/NO pill switch */
#systematize_snapshot_panel .s7-yn { height: 34px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.22); background: rgba(15,23,42,0.82); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
#systematize_snapshot_panel .s7-yn-btn { border: none; background: transparent; color: rgba(255,255,255,0.72); font-weight: 950; font-size: 0.70rem; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
#systematize_snapshot_panel .s7-yn-btn:first-child { border-right: 1px solid rgba(255,255,255,0.16); }
#systematize_snapshot_panel .s7-yn.is-yes .s7-yn-btn[data-s7-yn="YES"] { background: linear-gradient(180deg, #43CE76, #188A41); color: #052e16; }
#systematize_snapshot_panel .s7-yn.is-no  .s7-yn-btn[data-s7-yn="NO"]  { background: linear-gradient(180deg, #F16060, #A73030); color: #3f0a0a; }
#systematize_snapshot_panel .s7-yn.is-yes .s7-yn-btn[data-s7-yn="NO"],
#systematize_snapshot_panel .s7-yn.is-no  .s7-yn-btn[data-s7-yn="YES"] { opacity: 0.35; }
/* Questions row */
#systematize_snapshot_panel .s7-snap-questions { background: rgba(2,6,23,0.18); border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px; padding-bottom: 14px; align-items: start; }
#systematize_snapshot_panel .s7-snap-questions .s7-col { padding: 10px; border-radius: 12px; background: rgba(2,6,23,0.25); border: 1px solid rgba(255,255,255,0.08); }
#systematize_snapshot_panel .s7-q-title { color: rgba(255,255,255,0.92); font-weight: 900; font-size: 15px; line-height: 1.28; }
#systematize_snapshot_panel .s7-q-text  { color: rgba(255,255,255,0.86); font-weight: 750; font-size: 13px; line-height: 1.42; }
#systematize_snapshot_panel .s7-q-sub   { margin-top: 6px; color: rgba(255,255,255,0.62); font-size: 12px; line-height: 1.38; }
#systematize_snapshot_panel .s7-snap-block .s7-snap-questions { display: none; }
#systematize_snapshot_panel .s7-snap-block.is-open .s7-snap-questions { display: grid; }
/* Business area toggle cell */
#systematize_snapshot_panel .s7-snap-block .s7-snap-controls .s7-col-area {
  position: relative; cursor: pointer; display: flex; flex-direction: column;
  justify-content: center; gap: 4px; min-height: 72px; padding: 16px 18px;
  border-radius: 18px; border: 1px solid rgba(214,174,63,0.24);
  background: linear-gradient(180deg, rgba(8,18,46,0.92) 0%, rgba(4,10,28,0.95) 100%);
  box-shadow: 0 8px 20px rgba(0,0,0,0.14); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}
#systematize_snapshot_panel .s7-snap-block .s7-snap-controls .s7-col-area::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 999px; background: linear-gradient(180deg, rgba(231,198,99,0.98) 0%, rgba(212,172,60,0.82) 100%); }
#systematize_snapshot_panel .s7-snap-block .s7-snap-controls .s7-col-area::after  { content: "CLICK TO OPEN"; position: absolute; right: 14px; bottom: 12px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(214,174,63,0.88); background: rgba(6,14,36,0.92); color: #f0dd9a; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
#systematize_snapshot_panel .s7-snap-block .s7-snap-controls .s7-col-area:hover   { transform: translateY(-1px); border-color: rgba(231,198,99,0.52); }
#systematize_snapshot_panel .s7-snap-block.is-open .s7-snap-controls .s7-col-area { border-color: rgba(231,198,99,0.86); background: linear-gradient(180deg, rgba(18,32,70,0.98) 0%, rgba(7,15,38,0.98) 100%); }
#systematize_snapshot_panel .s7-snap-block.is-open .s7-snap-controls .s7-col-area::after { content: "CLICK TO CLOSE"; background: linear-gradient(180deg, rgba(231,198,99,0.98) 0%, rgba(212,172,60,0.98) 100%); color: #071327; border-color: rgba(231,198,99,0.98); }
/* Run + print buttons */
#systematize_snapshot_panel .s7-snap-actions-center { display: flex !important; justify-content: center !important; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 6px; }
#systematize_snapshot_panel #s7_print_snapshot_btn  { min-width: 220px; height: 46px; border-radius: 14px; border: 2px solid rgba(197,160,89,0.95); background: transparent; color: #ffffff; font-weight: 950; font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
#systematize_snapshot_panel #s7_print_snapshot_btn:hover { background: rgba(197,160,89,0.15); }
/* Step 7 workbench */
#s7_workbench_panel { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,10); background: rgba(2,6,23,0.92) !important; --wb-foundation:#9EC9E6; --wb-expansion:#FFF200; --wb-scalable:#F4A000; --wb-accent:rgba(197,160,89,95); }
#s7_workbench_panel .s2-panel-head { background: rgba(2,6,23,0.55) !important; border: 1px solid rgba(255,255,255,0.10) !important; }
#s7_workbench_panel .s2-head-left,
#s7_workbench_panel .s2-head-right { color: rgba(255,255,255,0.92) !important; }
#s7_workbench_panel .wb-area-tabs { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 12px; margin: 6px 0 14px; }
#s7_workbench_panel .wb-area-tab  { height: 56px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(2,6,23,.25)); color: #fff; font-weight: 950; letter-spacing: 1.6px; text-transform: uppercase; font-size: .78rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease; }
#s7_workbench_panel .wb-area-tab:hover { filter: brightness(1.08); transform: translateY(-1px); }
#s7_workbench_panel .wb-area-tab.is-active { border-color: rgba(197,160,89,.70); }
#s7_workbench_panel .wb-area-panel { display: none; }
#s7_workbench_panel .wb-area-panel.is-active { display: block; }
#s7_workbench_panel .wb-topbar { display: grid; grid-template-columns: minmax(520px,1.1fr) minmax(420px,.9fr); gap: 14px; padding: 14px; border-radius: 16px; background: rgba(2,6,23,.18); border: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; align-items: stretch; }
#s7_workbench_panel .wb-topbar-left  { min-height: 118px; height: 100%; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(2,6,23,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 14px 16px; gap: 6px; }
#s7_workbench_panel .wb-topbar-title { font-weight: 950; letter-spacing: 1.8px; text-transform: uppercase; }
#s7_workbench_panel .wb-topbar-right { height: 100%; min-height: 118px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(2,6,23,.35); padding: 12px 14px; display: flex; flex-direction: row; gap: 12px; align-items: stretch; }
#s7_workbench_panel .wb-stage-box   { flex: 1 1 0; min-width: 0; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(2,6,23,.22); padding: 10px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
#s7_workbench_panel .wb-stage-label { color: rgba(255,255,255,.78); font-weight: 950; letter-spacing: 1.3px; text-transform: uppercase; font-size: .68rem; line-height: 1.1; }
#s7_workbench_panel .wb-stage-pill  { height: 44px; border-radius: 12px; border: 2px solid rgba(255,255,255,.16); background: rgba(2,6,23,.55); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 950; }
#s7_workbench_panel .wb-stage-select { height: 44px !important; border-radius: 12px; border: 2px solid rgba(197,160,89,.75); background: rgba(2,6,23,.55); color: #fff; font-weight: 950; text-align: center; text-align-last: center; }
#s7_workbench_panel .wb-shell { display: grid; gap: 14px; padding: 14px; }
#s7_workbench_panel .wb-block { border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(2,6,23,.22); padding: 14px; }
#s7_workbench_panel .wb-block-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
#s7_workbench_panel .wb-block-title { color: #fff; font-weight: 950; letter-spacing: 1.6px; text-transform: uppercase; font-size: .82rem; }
#s7_workbench_panel .wb-block-score label { display: block; color: rgba(255,255,255,.78); font-weight: 950; letter-spacing: 1.3px; text-transform: uppercase; font-size: .68rem; margin-bottom: 6px; }
#s7_workbench_panel .wb-block-score .s2-input { height: 44px !important; border-radius: 12px; border: 2px solid rgba(197,160,89,.75); background: rgba(2,6,23,.55); color: #fff; font-weight: 950; text-align: center; text-align-last: center; }
#s7_workbench_panel .wb-question { border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(2,6,23,.35); color: #fff; font-weight: 850; padding: 12px; line-height: 1.3; margin-bottom: 10px; }
#s7_workbench_panel .wb-notes label { display: block; color: rgba(255,255,255,.78); font-weight: 950; letter-spacing: 1.3px; text-transform: uppercase; font-size: .68rem; margin: 8px 0 6px; }
#s7_workbench_panel .wb-notes textarea { width: 100%; min-height: 74px; resize: vertical; border-radius: 12px; border: 1px solid rgba(197,160,89,.45); background: rgba(2,6,23,.45); color: #fff; font-weight: 800; padding: 10px 12px; }
#s7_workbench_panel .wb-expand-btn { width: 100%; margin-top: 10px; height: 44px; border-radius: 12px; border: 2px solid rgba(197,160,89,.75); background: rgba(2,6,23,.35); color: #fff; font-weight: 950; letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; }
#s7_workbench_panel .wb-expand-btn:hover { filter: brightness(1.08); }
/* Workbench text: force white */
#s7_workbench_panel, #s7_workbench_panel * { color: #ffffff; }
#s7_workbench_panel .wb-stage-label, #s7_workbench_panel .wb-block-score label, #s7_workbench_panel .wb-notes label { color: rgba(255,255,255,.82) !important; }
#s7_workbench_panel .wb-topbar-title, #s7_workbench_panel .wb-block-title { color: #ffffff !important; }
#s7_workbench_panel input, #s7_workbench_panel select, #s7_workbench_panel textarea { color: #ffffff !important; caret-color: #ffffff; }
#s7_workbench_panel input::placeholder, #s7_workbench_panel textarea::placeholder { color: rgba(255,255,255,.55) !important; }
#s7_workbench_panel input[type="checkbox"] { accent-color: rgba(197,160,89,.95); }
/* Table */
#s7_workbench_panel .wb-table { border-collapse: separate; border-spacing: 0; }
#s7_workbench_panel .wb-table thead th { background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(2,6,23,.70)); border-bottom: 1px solid rgba(255,255,255,.14); color: #ffffff !important; font-weight: 950; letter-spacing: 1.6px; text-transform: uppercase; font-size: .74rem; padding: 12px 10px; }
#s7_workbench_panel .wb-table td { padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.90) !important; vertical-align: middle; }
#s7_workbench_panel .wb-table td:nth-child(3) { color: rgba(255,255,255,.96) !important; font-weight: 950; }
#s7_workbench_panel .wb-table td:nth-child(4) { color: rgba(255,255,255,.86) !important; font-weight: 800; line-height: 1.35; }
/* Stage chips */
#s7_workbench_panel .wb-stage-chip { display: inline-flex; align-items: center; justify-content: center; width: 138px; height: 30px; padding: 0 10px; border-radius: 10px; box-sizing: border-box; font-weight: 950; letter-spacing: 1.2px; text-transform: uppercase; font-size: .70rem; border: 1px solid rgba(0,0,0,.25); white-space: nowrap; }
#s7_workbench_panel .wb-stage-chip[data-stage="FOUNDATION"] { background: #9EC9E6; color: rgba(2,6,23,.92) !important; }
#s7_workbench_panel .wb-stage-chip[data-stage="EXPANSION"]  { background: #FFF200; color: rgba(2,6,23,.92) !important; }
#s7_workbench_panel .wb-stage-chip[data-stage="SCALABLE"]   { background: #F4A000; color: rgba(2,6,23,.92) !important; }
#s7_workbench_panel .wb-stage-chip[data-stage="ENTERPRISE"] { background: #22c55e; color: rgba(2,6,23,.92) !important; }
/* Enterprise toggle button */
#s7_workbench_panel .wb-systems-actions-bottom { display: flex; justify-content: center; margin-top: 14px; }
#s7_workbench_panel .wb-systems-actions-bottom button[data-wb-enterprise-toggle] { height: 44px; border-radius: 12px; border: 2px solid rgba(34,197,94,.55); background: linear-gradient(180deg, rgba(34,197,94,.28), rgba(2,6,23,.55)); color: #ffffff !important; font-weight: 950; letter-spacing: 1.6px; text-transform: uppercase; padding: 10px 16px; cursor: pointer; }
/* Print buttons */
button.btn-print-section, button[data-print-block] {
  background: linear-gradient(180deg, #e6c36a 0%, #c5a059 100%) !important;
  border: 2px solid #c5a059 !important; color: #020617 !important;
  font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
  border-radius: 14px; height: 52px; width: 100%; margin-top: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}
button.btn-print-section:hover, button[data-print-block]:hover { filter: brightness(1.05); transform: translateY(-1px); }
#step7 header.tactical-nav .nav-controls { display: none; }
@media (max-width: 1180px) {
  #s7_workbench_panel .wb-area-tabs { grid-template-columns: repeat(4, minmax(0,1fr)); }
  #s7_workbench_panel .wb-topbar    { grid-template-columns: 1fr; }
}
/* =========================
   STEPS 8–12
   (abbreviated — structure-only; existing styles kept)
========================= */
/* Step 8 */
#step8 .card { background: linear-gradient(rgba(4,10,28,0.88), rgba(4,10,28,0.92)), url("images/LpuKiHx.jpg") center / cover no-repeat; color: #ffffff; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 18px 48px rgba(0,0,0,0.42); }
#step8 .tactical-header { color: var(--accent); border-bottom: 1px solid rgba(255,255,255,0.10); margin-bottom: 18px; padding-bottom: 12px; }
#step8 h3    { color: #ffffff; border-bottom: 1px solid rgba(197,160,89,0.22); margin-bottom: 18px; padding-bottom: 10px; }
#step8 label { color: rgba(255,255,255,0.84); font-weight: 800; margin-bottom: 8px; }
#step8 .s8-goals-row  { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-bottom: 18px; align-items: stretch; }
#step8 .s8-goal-card { display: flex; flex-direction: column; }
#step8 .s8-goal-divider { margin: 12px 0; border: none; border-top: 1px solid rgba(255,255,255,0.10); }
#step8 .s8-goal-reflect-label { display: block; margin-bottom: 8px; }
#step8 .s8-goal-reflect { margin-top: auto; width: 100%; min-height: 60px; resize: vertical; border-radius: 10px; border: 1px solid rgba(197,160,89,0.45); background: rgba(2,6,23,0.45); color: #fff; font-weight: 800; padding: 10px 12px; box-sizing: border-box; }
#step8 .s8-gap-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; margin-top: 20px; align-items: start; }
#step8 .s8-bottom-gap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; margin-top: 20px; align-items: stretch; }
#step8 .gap-card { position: relative; padding: 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 18px 38px rgba(0,0,0,0.34); overflow: hidden; }
#step8 .gap-title { color: var(--accent); font-weight: 950; letter-spacing: 2px; text-transform: uppercase; font-size: 0.92rem; margin-bottom: 16px; }
#step8 .gap-card input, #step8 .gap-card select, #step8 .gap-card textarea { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.34); color: #ffffff; padding: 13px 14px; margin-bottom: 14px; font-weight: 800; }
#step8 .gap-card input:focus, #step8 .gap-card select:focus, #step8 .gap-card textarea:focus { outline: none; border-color: rgba(197,160,89,0.82); box-shadow: 0 0 0 3px rgba(197,160,89,0.16); }
#step8 .s8-revenue-bar { margin: 8px 0 22px; padding: 20px 20px 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(197,160,89,0.10) 0%, rgba(255,255,255,0.03) 100%); border: 1px solid rgba(197,160,89,0.25); }
#step8 .s8-journey-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: end; margin-bottom: 14px; }
#step8 .s8-stage-label  { color: rgba(255,255,255,0.60); font-size: 0.72rem; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; }
#step8 .s8-stage-name   { color: var(--accent); font-size: 1.05rem; font-weight: 950; }
#step8 .s8-stage-revenue { color: #ffffff; font-size: 1.22rem; font-weight: 950; }
#step8 .s8-stage-right  { text-align: right; }
#step8 .rev-bar { position: relative; height: 18px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)); overflow: visible; border: 1px solid rgba(255,255,255,0.08); }
#step8 .rev-progress { position: relative; height: 100%; min-width: 6%; max-width: 96%; border-radius: 999px; background: linear-gradient(90deg, rgba(214,179,97,0.78) 0%, rgba(248,224,156,1) 100%); }
#step8 .s8-progress-tip { position: absolute; top: 50%; right: -11px; width: 22px; height: 22px; border-radius: 50%; transform: translateY(-50%); background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(197,160,89,1) 100%); border: 2px solid rgba(9,14,27,0.95); box-shadow: 0 0 0 5px rgba(197,160,89,0.12), 0 0 24px rgba(197,160,89,0.34); z-index: 4; }
#step8 .rev-caption { margin-top: 12px; color: rgba(255,255,255,0.72); text-align: center; font-weight: 800; font-size: 0.92rem; }
#step8 input.is-filled, #step8 textarea.is-filled, #step8 select.is-filled { background: rgba(197,160,89,0.12); color: #ffffff; border-color: rgba(197,160,89,0.46); }
#step8 select option { color: #020617; background: #ffffff; }
@media (max-width: 1100px) { #step8 .s8-goals-row, #step8 .s8-gap-grid, #step8 .s8-bottom-gap-row { grid-template-columns: 1fr; } }
/* Step 9 */
#step9 .card { background: linear-gradient(rgba(4,10,28,0.82), rgba(4,10,28,0.88)), url("images/gDRzFZc.png") center / cover no-repeat; color: #ffffff; border: 1px solid rgba(255,255,255,0.06); border-radius: 22px; }
#step9 .s9-question-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 24px; }
#step9 .s9-question-card, #step9 .s9-question-card--full { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.025) 100%); border: 1px solid rgba(255,255,255,0.10); border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.34); overflow: hidden; }
#step9 .s9-question-card { min-height: 248px; padding: 18px 18px 16px; }
#step9 .s9-question-card::before, #step9 .s9-question-card--full::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, rgba(197,160,89,1) 0%, rgba(197,160,89,0.25) 100%); }
#step9 .s9-question-title { font-size: 0.95rem; font-weight: 950; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid rgba(197,160,89,0.22); }
#step9 .s9-option-list { display: flex; flex-direction: column; gap: 6px; }
#step9 .s9-option {
  font-size: 1rem; color: rgba(255,255,255,0.88); font-weight: 800; line-height: 1.45;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer; transition: background 120ms ease, border-color 120ms ease;
}
#step9 .s9-option:hover { background: rgba(197,160,89,0.10); border-color: rgba(197,160,89,0.20); }
#step9 .s9-option:has(input[type="radio"]:checked) {
  background: rgba(197,160,89,0.22);
  border-color: rgba(197,160,89,0.70);
  color: #ffffff;
}
#step9 .s9-option input[type="radio"] { accent-color: var(--accent); flex-shrink: 0; }
#step9 .s9-question-card--full { text-align: center; max-width: 900px; margin: 40px auto 20px; padding: 22px 20px 20px; }
#step9 .s9-textarea { width: 420px; height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.34); color: #ffffff; font-size: 14px; font-weight: 800; resize: none; }
#step9 .s9-next { display: flex; justify-content: center; margin-top: 30px; }
@media (max-width: 1100px) { #step9 .s9-question-grid { grid-template-columns: 1fr; } }
/* =========================================
   STEP 10 — THE FIRM YOU WANT
   Cinematic current state vs future state
   ========================================= */
#step10{
  padding: 40px 0;
}
/* =========================
OUTER CARD SHELL
========================= */
#step10 .card{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(6,12,28,0.84) 0%, rgba(7,14,32,0.92) 100%),
    url("images/AhqGB6V.png") center center / cover no-repeat;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.05);
  isolation: isolate;
}
#step10 .card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(197,160,89,0.14) 0%, transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.00) 24%, rgba(0,0,0,0.14) 100%);
  pointer-events:none;
  z-index:0;
}
#step10 .card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  pointer-events:none;
  z-index:0;
}
#step10 .tactical-header{
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  padding: 0 0 12px;
  color: var(--accent);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-transform: uppercase;
  letter-spacing: 2.4px;
  font-weight: 900;
}
#step10 .s10-canvas{
  position: relative;
  z-index: 1;
}
/* =========================
HERO
========================= */
#step10 .s10-hero{
  margin-bottom: 18px;
}
#step10 .s10-hero-inner{
  text-align: center;
}
#step10 .s10-logo{
  width: 100px;
  height: auto;
  display: block;
  margin: 0 auto 10px auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}
#step10 .s10-main-title{
  margin: 0;
  color: #ffffff;
  font-weight: 950;
  font-size: 2.4rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#step10 .s10-main-subtitle{
  margin-top: 8px;
  color: rgba(255,255,255,0.78);
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}
/* =========================
TOP COMPARISON TABLE
========================= */
#step10 .s10-compare-shell{
  position: relative;
  margin-bottom: 24px;
  border-radius: 22px;
  border: 1px solid rgba(197,160,89,0.30);
  background:
    linear-gradient(180deg, rgba(9,18,39,0.62) 0%, rgba(7,14,32,0.74) 100%);
  box-shadow:
    0 20px 48px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  isolation: isolate;
}
#step10 .s10-compare-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(197,160,89,0.12) 0%, rgba(197,160,89,0.00) 40%);
  pointer-events:none;
  z-index:0;
}
#step10 .s10-compare-title-row,
#step10 .s10-compare-table{
  position: relative;
  z-index: 1;
}
#step10 .s10-compare-title-row{
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#step10 .s10-compare-kicker{
  color: var(--accent);
  font-weight: 950;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.9rem;
  text-align: center;
}
/* New split comparison layout */
#step10 .s10-compare-table,
#step10 .s10-compare-table--split{
  display: grid;
  grid-template-columns: 1fr 0.9fr 1fr;
  align-items: stretch;
}
/* Top headers */
#step10 .s10-compare-head{
  padding: 16px 18px;
  background: rgba(255,255,255,0.05);
  color: #ffffff;
  font-weight: 950;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-align: center;
}
#step10 .s10-compare-head--metric{
  color: #fff1c7;
  text-shadow:
    0 0 10px rgba(197,160,89,0.14);
}
#step10 .s10-compare-table--split > .s10-compare-head:nth-child(1),
#step10 .s10-compare-table--split > .s10-compare-head:nth-child(2){
  border-right: 1px solid rgba(255,255,255,0.08);
}
/* Clean divider spacing (no arrow) */
#step10 .s10-compare-spacer-row{
  min-height: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Section rows */
#step10 .s10-compare-section-cell{
  padding: 14px 18px;
  background: rgba(197,160,89,0.10);
  color: rgba(255,232,184,0.80);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.76rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
#step10 .s10-compare-section-cell--center{
  color: var(--accent);
  font-weight: 950;
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.08);
}
#step10 .s10-compare-section-cell--right{
  color: #ffe3a7;
  text-shadow:
    0 0 10px rgba(197,160,89,0.12);
}
/* Body cells */
#step10 .s10-compare-label,
#step10 .s10-compare-value{
  position: relative;
  padding: 15px 18px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
#step10 .s10-compare-label{
  color: #ffffff;
  font-weight: 950;
  font-size: 0.98rem;
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.08);
}
#step10 .s10-compare-value{
  color: #ffffff;
  font-weight: 950;
  font-size: 1.02rem;
}
/* Left / current side = cooler and flatter */
#step10 .s10-compare-table--split > .s10-compare-value:nth-child(3n+1){
  background:
    linear-gradient(180deg, rgba(5,14,40,0.24) 0%, rgba(6,16,39,0.12) 100%);
}
/* Right / future side = same glow family as lower future-state cards */
#step10 .s10-compare-table--split > .s10-compare-value:nth-child(3n){
  color: #f7ecd2;
  background:
    linear-gradient(180deg, rgba(48,35,16,0.26) 0%, rgba(15,23,46,0.18) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05);
}
#step10 .s10-compare-table--split > .s10-compare-value:nth-child(3n)::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,223,154,0.16) 0%, rgba(197,160,89,0.10) 24%, rgba(197,160,89,0.00) 58%);
  pointer-events:none;
}
#step10 .s10-compare-table--split > .s10-compare-value:nth-child(3n) > *{
  position: relative;
  z-index: 1;
}
/* remove bottom border on final row */
#step10 .s10-compare-table--split > :nth-last-child(-n+3){
  border-bottom: none;
}
/* Responsive */
@media (max-width: 900px){
  #step10 .s10-compare-shell{
    border-radius: 18px;
  }
  #step10 .s10-compare-head{
    font-size: 0.82rem;
    letter-spacing: 2px;
    padding: 14px 12px;
  }
  #step10 .s10-compare-label,
  #step10 .s10-compare-value{
    padding: 12px 10px;
    font-size: 0.92rem;
  }
  #step10 .s10-compare-arrow-wrap{
    width: 68px;
    height: 68px;
  }
  #step10 .s10-compare-arrow{
    font-size: 34px;
  }
  #step10 .s10-compare-band--center::before{
    width: 180px;
  }
}
@media (max-width: 640px){
  #step10 .s10-compare-table,
  #step10 .s10-compare-table--split{
    grid-template-columns: 1fr;
  }
  #step10 .s10-compare-head,
  #step10 .s10-compare-band,
  #step10 .s10-compare-section-cell,
  #step10 .s10-compare-label,
  #step10 .s10-compare-value{
    border-left: none !important;
    border-right: none !important;
  }
  #step10 .s10-compare-band--center{
    min-height: 74px;
  }
  #step10 .s10-compare-band--center::before{
    width: 140px;
  }
}
/* =========================
STEP 10 — BOTTOM SECTION ONLY
For current HTML IDs
========================= */
/* BOARD + ROW LAYOUT */
#step10 .s10-board{
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  z-index: 1;
  margin-top: 10px;
}
#step10 .s10-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
#step10 .s10-column{
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#step10 .s10-column-title{
  text-align: center;
  color: #ffffff;
  font-weight: 950;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.92rem;
  margin: 0 0 14px;
}
#step10 .s10-column--future .s10-column-title{
  color: #ffe7b0;
  text-shadow:
    0 0 10px rgba(197,160,89,0.16),
    0 0 22px rgba(197,160,89,0.08);
}
/* CARD SYSTEM */
#step10 .s10-card,
#step10 .s10-card--equal{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 24px 26px 22px;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}
#step10 .s10-card::before,
#step10 .s10-card--equal::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
#step10 .s10-card::after,
#step10 .s10-card--equal::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
#step10 .s10-card > *,
#step10 .s10-card--equal > *{
  position: relative;
  z-index: 1;
}
/* CURRENT SIDE */
#step10 .s10-column--current .s10-card,
#step10 .s10-column--current .s10-card--equal{
  border: 1px solid rgba(255,255,255,0.07);
  background:
    linear-gradient(180deg, rgba(6,18,48,0.80) 0%, rgba(6,16,40,0.62) 100%);
  box-shadow:
    0 20px 44px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
#step10 .s10-column--current .s10-card::before,
#step10 .s10-column--current .s10-card--equal::before{
  background:
    radial-gradient(circle at 50% 0%, rgba(82,121,188,0.12) 0%, rgba(82,121,188,0.00) 36%);
}
#step10 .s10-column--current .s10-card::after,
#step10 .s10-column--current .s10-card--equal::after{
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* FUTURE SIDE */
#step10 .s10-column--future .s10-card,
#step10 .s10-column--future .s10-card--equal{
  border: 1px solid rgba(197,160,89,0.38);
  background:
    linear-gradient(180deg, rgba(54,39,17,0.36) 0%, rgba(12,19,42,0.82) 100%);
  box-shadow:
    0 22px 50px rgba(0,0,0,0.28),
    0 0 24px rgba(197,160,89,0.10),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(197,160,89,0.08);
}
#step10 .s10-column--future .s10-card::before,
#step10 .s10-column--future .s10-card--equal::before{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,223,154,0.20) 0%, rgba(197,160,89,0.12) 24%, rgba(197,160,89,0.00) 58%);
}
#step10 .s10-column--future .s10-card::after,
#step10 .s10-column--future .s10-card--equal::after{
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
/* HOVER */
#step10 .s10-row:hover .s10-card,
#step10 .s10-row:hover .s10-card--equal{
  transform: translateY(-2px);
}
#step10 .s10-column--current .s10-card:hover,
#step10 .s10-column--current .s10-card--equal:hover{
  border-color: rgba(197,160,89,0.30);
  box-shadow:
    0 24px 54px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
#step10 .s10-column--future .s10-card:hover,
#step10 .s10-column--future .s10-card--equal:hover{
  border-color: rgba(255,223,154,0.56);
  box-shadow:
    0 28px 60px rgba(0,0,0,0.32),
    0 0 30px rgba(197,160,89,0.14),
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 -1px 0 rgba(197,160,89,0.10);
}
/* HEIGHTS */
#step10 .s10-row--top .s10-card,
#step10 .s10-row--top .s10-card--equal{
  min-height: 300px;
}
#step10 .s10-row--middle .s10-card,
#step10 .s10-row--middle .s10-card--equal,
#step10 .s10-row--bottom .s10-card,
#step10 .s10-row--bottom .s10-card--equal{
  min-height: 220px;
}
/* CARD HEADERS */
#step10 .s10-card-head{
  padding-bottom: 12px;
  margin-bottom: 16px;
  min-height: 38px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid rgba(197,160,89,0.20);
}
#step10 .s10-column--future .s10-card-head,
#step10 .s10-column--future .s10-card--equal .s10-card-head{
  border-bottom-color: rgba(255,223,154,0.24);
}
#step10 .s10-card-label{
  color: var(--accent);
  font-weight: 950;
  font-size: 0.8rem;
  line-height: 1.2;
  letter-spacing: 3px;
  text-transform: uppercase;
}
#step10 .s10-column--future .s10-card-label,
#step10 .s10-column--future .s10-card--equal .s10-card-label{
  color: #ffe2a2;
  text-shadow: 0 0 10px rgba(197,160,89,0.14);
}
/* LOWER LISTS ONLY */
#step10 .s10-bullet-list{
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  align-content: start;
  row-gap: 16px;
  flex: 1 1 auto;
}
#step10 .s10-bullet-list li{
  position: relative;
  margin: 0;
  padding-left: 24px;
  display: block;
  min-height: 1.45em;
  font-size: 1.02rem;
  line-height: 1.52;
  letter-spacing: 0.1px;
  text-wrap: pretty;
}
/* CURRENT LIST TYPOGRAPHY */
#step10 #s10_all_gaps_list li,
#step10 #s10_urgency_list li{
  color: rgba(255,255,255,0.92);
  font-weight: 600;
}
/* FUTURE LIST TYPOGRAPHY */
#step10 #s10_business_goals_list li,
#step10 #s10_personal_goals_list li{
  color: #f5ead0;
  font-weight: 620;
  text-shadow: 0 0 8px rgba(197,160,89,0.06);
}
/* BULLETS */
#step10 .s10-bullet-list li::before{
  content: "";
  position: absolute;
  left: 2px;
  top: 0.56em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.64);
}
#step10 #s10_business_goals_list li::before,
#step10 #s10_personal_goals_list li::before{
  background: #ffe3a7;
  box-shadow:
    0 0 6px rgba(197,160,89,0.34),
    0 0 10px rgba(197,160,89,0.16);
}
#step10 .s10-bullet-list li:empty::after{
  content: "—";
  opacity: 0;
}
/* SPECIFIC LOWER IDS */
#step10 #s10_all_gaps_list,
#step10 #s10_urgency_list,
#step10 #s10_business_goals_list,
#step10 #s10_personal_goals_list{
  grid-auto-rows: minmax(1.45em, auto);
}
/* CENTER ARROW */
#step10 .s10-arrow-wrap{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 118px;
  isolation: isolate;
}
#step10 .s10-arrow-wrap::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 86px;
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.00) 0%,
      rgba(197,160,89,0.18) 12%,
      rgba(255,233,186,0.98) 50%,
      rgba(197,160,89,0.18) 88%,
      rgba(255,255,255,0.00) 100%
    );
  box-shadow:
    0 0 18px rgba(197,160,89,0.20),
    0 0 42px rgba(197,160,89,0.16),
    0 0 92px rgba(197,160,89,0.10);
  z-index: 0;
}
#step10 .s10-arrow-wrap::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 170px;
  height: 120px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(197,160,89,0.18) 0%, rgba(197,160,89,0.08) 38%, rgba(197,160,89,0.00) 74%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
#step10 .s10-arrow{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  color: #fff3d2;
  font-size: 38px;
  font-weight: 950;
  line-height: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,247,221,0.28) 0%, rgba(197,160,89,0.24) 36%, rgba(9,14,29,0.94) 74%);
  border: 1px solid rgba(197,160,89,0.74);
  box-shadow:
    0 0 0 4px rgba(197,160,89,0.10),
    0 0 24px rgba(197,160,89,0.26),
    0 0 60px rgba(197,160,89,0.18),
    0 18px 36px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.26);
  text-shadow:
    0 0 14px rgba(255,235,189,0.48),
    0 0 28px rgba(197,160,89,0.26);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
#step10 .s10-row:hover .s10-arrow{
  transform: scale(1.04);
}
/* TRANSITION BANNER */
#step10 .s10-transition-banner{
  position: relative;
  z-index: 1;
  margin-top: 28px;
  margin-bottom: 14px;
  border-radius: 22px;
  border: 1px solid rgba(197,160,89,0.42);
  background:
    linear-gradient(180deg, rgba(44,31,14,0.34) 0%, rgba(13,21,46,0.74) 100%);
  box-shadow:
    0 22px 52px rgba(0,0,0,0.28),
    0 0 26px rgba(197,160,89,0.10),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(197,160,89,0.10);
  overflow: hidden;
  isolation: isolate;
}
#step10 .s10-transition-banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,223,154,0.20) 0%, rgba(197,160,89,0.12) 24%, rgba(197,160,89,0.00) 58%);
  pointer-events: none;
  z-index: 0;
}
#step10 .s10-transition-banner::after{
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(197,160,89,0.00) 0%, rgba(255,227,160,0.86) 50%, rgba(197,160,89,0.00) 100%);
  box-shadow: 0 0 20px rgba(197,160,89,0.24);
  pointer-events: none;
  z-index: 0;
}
#step10 .s10-transition-copy{
  position: relative;
  z-index: 1;
  padding: 28px 34px 30px;
  text-align: center;
  color: #f4ead0;
  font-weight: 900;
  font-size: 1.16rem;
  line-height: 1.55;
  max-width: 1100px;
  margin: 0 auto;
}
#step10 .s10-transition-copy::before{
  content: "YOUR RECOMMENDED PATH";
  display: block;
  margin: 0 auto 14px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1;
}
/* BOTTOM ACTIONS */
#step10 .s2-next{
  position: relative;
  z-index: 1;
  margin-top: 0;
}
#step10 .split-actions{
  display: flex;
  gap: 12px;
  align-items: center;
}
#step10 .split-actions .btn-primary,
#step10 .split-actions .btn-secondary{
  flex: 1;
}
#step10 .split-actions .btn-primary{
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 2px;
}
#step10 .split-actions .btn-secondary{
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 1px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}
#step10 .split-actions .btn-secondary:hover{
  background: rgba(255,255,255,0.10);
}
/* RESPONSIVE */
@media (max-width: 1200px){
  #step10 .s10-row{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #step10 .s10-arrow-wrap{
    min-width: 0;
    min-height: 90px;
    order: 2;
  }
  #step10 .s10-column--future{
    order: 3;
  }
  #step10 .s10-arrow-wrap::before{
    width: 180px;
    height: 12px;
  }
  #step10 .s10-arrow-wrap::after{
    width: 260px;
    height: 140px;
  }
  #step10 .s10-arrow{
    transform: rotate(90deg);
  }
  #step10 .s10-row:hover .s10-arrow{
    transform: rotate(90deg) scale(1.04);
  }
}
@media (max-width: 900px){
  #step10 .split-actions{
    flex-direction: column;
  }
  #step10 .s10-row--top .s10-card,
  #step10 .s10-row--top .s10-card--equal,
  #step10 .s10-row--middle .s10-card,
  #step10 .s10-row--middle .s10-card--equal,
  #step10 .s10-row--bottom .s10-card,
  #step10 .s10-row--bottom .s10-card--equal{
    min-height: unset;
  }
  #step10 .s10-transition-copy{
    font-size: 1.05rem;
    padding: 20px 18px;
  }
  #step10 .s10-arrow{
    width: 70px;
    height: 70px;
    font-size: 34px;
  }
  #step10 .s10-bullet-list li{
    font-size: 0.96rem;
    line-height: 1.46;
  }
}
@media (max-width: 640px){
  #step10 .s10-column-title{
    font-size: 0.84rem;
    letter-spacing: 2.2px;
  }
  #step10 .s10-card,
  #step10 .s10-card--equal{
    padding: 18px 16px 16px;
    border-radius: 18px;
  }
  #step10 .s10-card-label{
    font-size: 0.74rem;
    letter-spacing: 2.2px;
  }
  #step10 .s10-bullet-list li{
    padding-left: 20px;
    font-size: 0.94rem;
  }
  #step10 .s10-arrow-wrap::before{
    width: 140px;
  }
  #step10 .s10-arrow-wrap::after{
    width: 210px;
    height: 110px;
  }
  #step10 .s10-arrow{
    width: 64px;
    height: 64px;
    font-size: 30px;
  }
}
/* =========================
TOP ROW — PAIRED GRID
Separate widths for left vs right cards
========================= */
#step10 .s10-foundations-locked { padding: 18px 14px; text-align: center; }
#step10 .s10-foundations-lock-msg {
  color: rgba(255,255,255,0.55); font-size: 0.88rem; font-weight: 700;
  border: 1px dashed rgba(197,160,89,0.35); border-radius: 10px;
  padding: 14px 16px; line-height: 1.5;
}
#step10 .s10-foundations-lock-msg strong { color: rgba(197,160,89,0.85); }
#step10 .s10-paired-grid{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* LEFT TOP CARD */
#step10 #s10_current_pairs .s10-paired-row{
  display: grid;
  grid-template-columns: minmax(180px, 0.78fr) minmax(0, 1.42fr);
  column-gap: 34px;
  align-items: start;
}
/* RIGHT TOP CARD */
#step10 #s10_future_pairs .s10-paired-row{
  display: grid;
  grid-template-columns: minmax(235px, 1.08fr) minmax(0, 1.18fr);
  column-gap: 34px;
  align-items: start;
}
#step10 .s10-paired-cell{
  position: relative;
  padding-left: 20px;
  font-size: 1.03rem;
  line-height: 1.55;
  text-wrap: pretty;
}
#step10 .s10-paired-cell::before{
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
}
/* LEFT CARD TYPE */
#step10 .s10-column--current .s10-paired-cell--driver{
  font-weight: 700;
  color: rgba(255,255,255,0.95);
}
#step10 .s10-column--current .s10-paired-cell--outcome{
  font-weight: 500;
  color: rgba(255,255,255,0.75);
}
/* RIGHT CARD TYPE */
#step10 .s10-column--future .s10-paired-cell--driver{
  font-weight: 720;
  color: #fff3d6;
}
#step10 .s10-column--future .s10-paired-cell--outcome{
  font-weight: 540;
  color: #f5ead0;
}
#step10 .s10-column--future .s10-paired-cell::before{
  background: #ffe3a7;
  box-shadow: 0 0 8px rgba(197,160,89,0.35);
}
@media (max-width: 900px){
  #step10 #s10_current_pairs .s10-paired-row,
  #step10 #s10_future_pairs .s10-paired-row{
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
}
/* =========================================
   STEP 11 — KEYS TO THE FIRM YOU WANT
   Unified systems:
   1) Hero
   2) 6 risk boxes / buttons
   3) 6 coaching cards
   4) 3 coaching program cards
   ========================================= */
#step11{
  padding: 40px 0;
}
/* =========================================
   OUTER CARD SHELL
   ========================================= */
#step11 .card{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(6,12,28,0.82) 0%, rgba(7,14,32,0.90) 100%),
    url("images/AhqGB6V.png") center center / cover no-repeat;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.05);
  isolation: isolate;
}
#step11 .card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(197,160,89,0.14) 0%, transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.00) 24%, rgba(0,0,0,0.14) 100%);
  pointer-events:none;
  z-index:0;
}
#step11 .card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  pointer-events:none;
  z-index:0;
}
#step11 .tactical-header{
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  padding: 0 0 12px;
  color: var(--accent);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-transform: uppercase;
  letter-spacing: 2.4px;
  font-weight: 900;
}
#step11 .s11-canvas{
  position: relative;
  z-index: 1;
  padding: 10px 0 8px;
  color:#ffffff;
}
/* =========================================
   HERO
   ========================================= */
#step11 .s11-hero{
  margin: 0 0 24px;
  padding: 6px 2px 0;
}
#step11 .s11-hero-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  text-align:left;
  max-width: 900px;
  margin: 0 auto;
}
#step11 .s11-hero-logo-wrap{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
#step11 .s11-hero-logo{
  width: 68px;
  height: auto;
  display:block;
  filter:
    drop-shadow(0 0 12px rgba(197,160,89,0.24))
    drop-shadow(0 10px 22px rgba(0,0,0,0.34));
}
#step11 .s11-hero-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width: 0;
}
#step11 .s11-main-title{
  margin: 0;
  color: #f5ead1;
  font-size: clamp(2rem, 3vw, 2.85rem);
  line-height: 1.04;
  font-weight: 950;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 4px 22px rgba(0,0,0,0.34);
}
#step11 .s11-main-subtitle{
  margin-top: 10px;
  color: rgba(255,255,255,0.78);
  font-size: 0.92rem;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 2.8px;
  text-transform: uppercase;
}
#step11 .s11-hero::after{
  content:"";
  display:block;
  width:100%;
  height:1px;
  margin-top:20px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(197,160,89,0.00) 8%,
      rgba(197,160,89,0.42) 26%,
      rgba(255,255,255,0.08) 50%,
      rgba(197,160,89,0.24) 74%,
      rgba(197,160,89,0.00) 92%,
      transparent 100%
    );
}
/* =========================================
   HERO RESPONSIVE
   ========================================= */
@media (max-width: 820px){
  #step11{
    padding: 32px 0;
  }
  #step11 .card{
    border-radius: 20px;
  }
  #step11 .s11-hero-brand{
    gap:16px;
  }
  #step11 .s11-hero-logo{
    width: 58px;
  }
  #step11 .s11-main-subtitle{
    letter-spacing: 2.2px;
    font-size: 0.84rem;
  }
}
@media (max-width: 640px){
  #step11 .tactical-header{
    letter-spacing: 1.8px;
    padding-bottom: 10px;
    margin-bottom: 16px;
  }
  #step11 .s11-canvas{
    padding-top: 6px;
  }
  #step11 .s11-hero{
    margin-bottom: 20px;
  }
  #step11 .s11-hero-brand{
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  #step11 .s11-hero-copy{
    align-items:center;
  }
  #step11 .s11-hero-logo{
    width: 54px;
  }
  #step11 .s11-main-title{
    font-size: clamp(1.7rem, 8vw, 2.25rem);
    letter-spacing: 0.8px;
  }
  #step11 .s11-main-subtitle{
    margin-top: 8px;
    font-size: 0.78rem;
    letter-spacing: 2px;
  }
  #step11 .s11-hero::after{
    margin-top: 16px;
  }
}
/* =========================================
   SYSTEM 1 — 6 RISK BOXES / BUTTONS
   ========================================= */
#step11 .s11-constraint-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}
#step11 .s11-constraint-card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding: 18px 14px 14px;
  border-radius: 18px;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  background:
    radial-gradient(circle at 100% 0%, rgba(197,160,89,0.12) 0%, transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}
#step11 .s11-constraint-card::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(197,160,89,0.95) 0%, rgba(197,160,89,0.22) 100%);
  pointer-events: none;
}
#step11 .s11-constraint-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
  pointer-events: none;
}
#step11 .s11-constraint-card:hover{
  transform: translateY(-2px);
  border-color: rgba(197,160,89,0.32);
  box-shadow:
    0 18px 36px rgba(0,0,0,0.34),
    0 0 0 3px rgba(197,160,89,0.06),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
#step11 .s11-constraint-title{
  margin: 0 0 12px;
  padding: 0 0 10px;
  color: #f5ead1;
  font-size: 0.82rem;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(197,160,89,0.22);
}
#step11 .s11-constraint-risk{
  margin: 0 0 6px;
  color: var(--accent);
  font-size: clamp(2.35rem, 3vw, 3rem);
  line-height: 0.95;
  font-weight: 950;
  text-shadow: 0 3px 16px rgba(0,0,0,0.28);
}
#step11 .s11-constraint-risk-label,
#step11 .s11-constraint-leakage-label{
  color: rgba(255,255,255,0.72);
  font-size: 0.76rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}
#step11 .s11-constraint-leakage{
  margin: 10px 0 0;
  color: #f5ead1;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 900;
}
#step11 .s11-toggle-btn{
  width: 100%;
  margin-top: 14px;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid rgba(197,160,89,0.42);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(16,24,44,0.86) 0%, rgba(6,10,24,0.96) 100%);
  color: #f5ead1;
  font-size: 0.95rem;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: 0.15px;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(0,0,0,0.26);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease;
}
#step11 .s11-toggle-btn:hover,
#step11 .s11-toggle-btn:focus-visible,
#step11 .s11-toggle-btn.is-active{
  transform: translateY(-1px);
  border-color: rgba(197,160,89,0.78);
  background:
    linear-gradient(180deg, rgba(24,34,60,0.94) 0%, rgba(9,14,31,0.98) 100%);
  box-shadow:
    0 0 0 3px rgba(197,160,89,0.10),
    0 16px 30px rgba(0,0,0,0.32);
  outline: none;
}
#step11 .s11-toggle-btn.is-active{
  color: #fff4da;
}
/* =========================================
   RISK GRID RESPONSIVE
   ========================================= */
@media (max-width: 1200px){
  #step11 .s11-constraint-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 820px){
  #step11 .s11-constraint-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
  }
  #step11 .s11-constraint-card{
    padding: 16px 13px 13px;
  }
  #step11 .s11-constraint-title{
    font-size: 0.78rem;
    letter-spacing: 1.3px;
  }
  #step11 .s11-toggle-btn{
    min-height: 44px;
    font-size: 0.92rem;
  }
}
@media (max-width: 560px){
  #step11 .s11-constraint-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #step11 .s11-constraint-card{
    border-radius: 16px;
    padding: 15px 12px 12px;
  }
  #step11 .s11-constraint-risk{
    font-size: 2.2rem;
  }
  #step11 .s11-constraint-risk-label,
  #step11 .s11-constraint-leakage-label{
    font-size: 0.72rem;
    letter-spacing: 1.15px;
  }
  #step11 .s11-constraint-leakage{
    font-size: 0.96rem;
  }
  #step11 .s11-toggle-btn{
    margin-top: 12px;
  }
}
/* =========================================
   STEP 11 — CONSTRAINT SNAPSHOT VIEWER
   Scoped to actual HTML wrapper: #s11_snapshot_panel
   ========================================= */
#s11_snapshot_panel{
  /* ===== main size controls ===== */
  --s11-snapshot-panel-pad: 18px;
  --s11-snapshot-panel-radius: 22px;
  --s11-slide-radius: 20px;
  --s11-frame-pad: 20px;
  --s11-header-gap: 18px;
  --s11-body-gap: 18px;
  --s11-footer-gap: 18px;
  /* left systems column */
  --s11-sidebar-width: 250px;
  --s11-sidebar-pad-y: 18px;
  --s11-sidebar-pad-x: 16px;
/* right image panel */
--s11-media-width: 860px;
--s11-media-height: 720px;
--s11-media-radius: 18px;
  /* stage cards */
  --s11-stage-gap: 16px;
  --s11-stage-card-min-height: 0px;
  --s11-stage-card-pad-y: 16px;
  --s11-stage-card-pad-x: 14px;
  --s11-stage-radius: 16px;
  /* ===== visuals ===== */
  --s11-shell-border: 1px solid rgba(255,255,255,0.10);
  --s11-slide-border: 1px solid rgba(255,255,255,0.09);
  --s11-line: rgba(197,160,89,0.20);
  --s11-panel-bg:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.025) 100%);
  --s11-card-bg:
    linear-gradient(180deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.03) 100%);
  --s11-media-bg:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  --s11-shell-bg:
    linear-gradient(180deg, rgba(8,15,34,0.74) 0%, rgba(7,14,31,0.88) 100%);
  --s11-panel-shadow:
    0 18px 40px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.04);
  --s11-slide-shadow:
    0 20px 44px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.04);
  --s11-card-shadow:
    0 12px 28px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.04);
  --s11-media-shadow:
    0 14px 30px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.04);
  --s11-stage-shadow:
    0 12px 26px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.04);
  margin: 26px 0 30px;
  padding: var(--s11-snapshot-panel-pad);
  border-radius: var(--s11-snapshot-panel-radius);
  background: var(--s11-panel-bg);
  border: var(--s11-shell-border);
  box-shadow: var(--s11-panel-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#s11_snapshot_panel[hidden],
#s11_snapshot_panel .s11-snapshot-view[hidden],
#s11_snapshot_finance[hidden],
#s11_snapshot_marketing[hidden],
#s11_snapshot_sales[hidden],
#s11_snapshot_people[hidden],
#s11_snapshot_systems[hidden],
#s11_snapshot_leadership[hidden]{
  display: none !important;
}
/* =========================================
   PANEL HEAD
   ========================================= */
#s11_snapshot_panel .s11-snapshot-head{
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--s11-line);
}
#s11_snapshot_panel .s11-snapshot-kicker{
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.74rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}
#s11_snapshot_title,
#s11_snapshot_panel .s11-snapshot-title{
  margin: 0;
  color: #f5ead1;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: 0.4px;
}
#s11_snapshot_panel .s11-snapshot-body{
  position: relative;
}
#s11_snapshot_finance,
#s11_snapshot_marketing,
#s11_snapshot_sales,
#s11_snapshot_people,
#s11_snapshot_systems,
#s11_snapshot_leadership{
  width: 100%;
}
/* =========================================
   FOUNDATION SLIDE SHELL
   ========================================= */
#s11_snapshot_panel .foundation-slide{
  position: relative;
  border-radius: var(--s11-slide-radius);
  overflow: hidden;
  background: var(--s11-shell-bg);
  border: var(--s11-slide-border);
  box-shadow: var(--s11-slide-shadow);
}
#s11_snapshot_panel .foundation-slide::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(197,160,89,0.10) 0%, transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 26%, rgba(0,0,0,0.10) 100%);
  pointer-events: none;
}
#s11_snapshot_panel .foundation-slide__frame{
  position: relative;
  z-index: 1;
  padding: var(--s11-frame-pad);
}
#s11_snapshot_panel .foundation-slide__header{
  margin: 0 0 var(--s11-header-gap);
  padding: 0 0 12px;
  border-bottom: 1px solid var(--s11-line);
}
#s11_snapshot_panel .foundation-slide__title{
  margin: 0;
  color: #f5ead1;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
/* =========================================
   BODY LAYOUT
   Desktop:
   - fixed sidebar width
   - flexible image panel fills remaining width
   - sidebar matches image height
   ========================================= */
#s11_snapshot_panel .foundation-slide__body{
  display: grid;
  grid-template-columns: var(--s11-sidebar-width) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--s11-body-gap);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#s11_snapshot_panel .foundation-slide__sidebar{
  position: relative;
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: var(--s11-media-height);
  padding: var(--s11-sidebar-pad-y) var(--s11-sidebar-pad-x);
  border-radius: var(--s11-media-radius);
  background: var(--s11-card-bg);
  border: var(--s11-shell-border);
  box-shadow: var(--s11-card-shadow);
  box-sizing: border-box;
  overflow: hidden;
  float: none;
  transform: none;
}
#s11_snapshot_panel .foundation-slide__media-card{
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 10;
  border-radius: var(--s11-media-radius);
  overflow: hidden;
  background: var(--s11-media-bg);
  border: var(--s11-shell-border);
  box-shadow: var(--s11-media-shadow);
  box-sizing: border-box;
}
#s11_snapshot_panel .foundation-slide__media-image{
  display: block;
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  float: none;
  transform: none;
  object-fit: cover;
  object-position: center center;
}
/* =========================================
   FOOTER / BUSINESS STAGES
   ========================================= */
#s11_snapshot_panel .foundation-slide__footer{
  margin-top: var(--s11-footer-gap);
}
#s11_snapshot_panel .foundation-slide__stage-title{
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
#s11_snapshot_panel .foundation-slide__stages{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s11-stage-gap);
}
#s11_snapshot_panel .stage-card{
  min-width: 0;
  min-height: var(--s11-stage-card-min-height);
  padding: var(--s11-stage-card-pad-y) var(--s11-stage-card-pad-x);
  border-radius: var(--s11-stage-radius);
  background: var(--s11-card-bg);
  border: var(--s11-shell-border);
  box-shadow: var(--s11-stage-shadow);
  box-sizing: border-box;
}
#s11_snapshot_panel .stage-card__label{
  margin: 0 0 10px;
  padding-bottom: 8px;
  color: #f5ead1;
  font-size: 0.76rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--s11-line);
}
#s11_snapshot_panel .stage-card ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.82);
}
#s11_snapshot_panel .stage-card li{
  margin: 0 0 8px;
  font-size: 0.86rem;
  line-height: 1.4;
  font-weight: 600;
}
#s11_snapshot_panel .stage-card li:last-child{
  margin-bottom: 0;
}
/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1100px){
  #s11_snapshot_panel{
    --s11-media-height: 340px;
  }
  #s11_snapshot_panel .foundation-slide__body{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s11-body-gap);
  }
  #s11_snapshot_panel .foundation-slide__sidebar{
    width: 100%;
    height: auto;
    min-width: 0;
  }
  #s11_snapshot_panel .foundation-slide__engine{
    width: 100%;
    min-width: 0;
    height: var(--s11-media-height);
    overflow: hidden;
  }
  #s11_snapshot_panel .foundation-slide__media-card{
    width: 100%;
    height: 100%;
    padding: 0;
  }
#s11_snapshot_panel .foundation-slide__media-image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
  #s11_snapshot_panel .foundation-slide__stages{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px){
  #s11_snapshot_panel{
    --s11-snapshot-panel-pad: 14px;
    --s11-frame-pad: 16px;
    --s11-sidebar-pad-y: 16px;
    --s11-sidebar-pad-x: 14px;
    --s11-media-height: 300px;
    border-radius: 18px;
  }
  #s11_snapshot_panel .foundation-slide__body{
    gap: 14px;
  }
  #s11_snapshot_panel .foundation-slide__media-card{
    padding: 0;
  }
}
@media (max-width: 560px){
  #s11_snapshot_panel{
    --s11-frame-pad: 14px;
    --s11-sidebar-pad-y: 14px;
    --s11-sidebar-pad-x: 13px;
    --s11-media-height: 240px;
    --s11-stage-card-pad-y: 14px;
    --s11-stage-card-pad-x: 12px;
  }
  #s11_snapshot_panel .s11-snapshot-kicker,
  #s11_snapshot_panel .foundation-slide__stage-title,
  #s11_snapshot_panel .foundation-slide__sidebar-title{
    letter-spacing: 1.4px;
  }
  #s11_snapshot_panel .foundation-slide__header{
    margin-bottom: 14px;
    padding-bottom: 10px;
  }
  #s11_snapshot_panel .foundation-slide__body{
    gap: 12px;
  }
  #s11_snapshot_panel .foundation-slide__sidebar,
  #s11_snapshot_panel .foundation-slide__media-card{
    border-radius: 15px;
  }
  #s11_snapshot_panel .foundation-slide__media-card{
    padding: 0;
  }
  #s11_snapshot_panel .stage-card{
    border-radius: 14px;
  }
  #s11_snapshot_panel .foundation-slide__systems-list li,
  #s11_snapshot_panel .stage-card li{
    font-size: 0.84rem;
  }
}
/* === FOUNDATION SLIDE TYPOGRAPHY / SPACING OVERRIDES === */
.foundation-slide__sidebar-title {
  font-size: 18px;
  margin-bottom: 18px;
}
.foundation-slide__systems-list {
  font-size: 18px;
  line-height: 1.8;
}
.foundation-slide__systems-list li {
  margin-bottom: 16px;
}
.stage-card__label {
  font-size: 18px;
}
.foundation-slide__stages .stage-card ul li {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 10px;
}
/* === FORCE BUSINESS STAGES TYPOGRAPHY === */
.foundation-slide .foundation-slide__footer .foundation-slide__stage-title {
  font-size: 22px !important;
  line-height: 1.2 !important;
}
.foundation-slide .foundation-slide__footer .foundation-slide__stages .stage-card .stage-card__label {
  font-size: 19px !important;
  line-height: 1.2 !important;
}
.foundation-slide .foundation-slide__footer .foundation-slide__stages .stage-card ul,
.foundation-slide .foundation-slide__footer .foundation-slide__stages .stage-card li {
  font-size: 18px !important;
  line-height: 1.65 !important;
}
.foundation-slide .foundation-slide__footer .foundation-slide__stages .stage-card li {
  margin-bottom: 10px !important;
}
/* === MATCH SIDEBAR HEIGHT TO IMAGE HEIGHT === */
.foundation-slide__body {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: 24px !important;
  align-items: stretch !important;
}
.foundation-slide__engine {
  display: flex !important;
  height: 100% !important;
}
.foundation-slide__media-card {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
}
.foundation-slide__media-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.foundation-slide__sidebar {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 100% !important;
}
/* =========================================
SECTION 1 — DETAIL VIEWER SHELL
========================================= */
#step11 .s11-stage-detail-panel{
  margin-top: 22px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at top center, rgba(212,177,106,0.12), transparent 55%),
    linear-gradient(180deg, rgba(6,18,50,0.96), rgba(3,10,30,0.98));
  border: 1px solid rgba(212,177,106,0.35);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* HEADER STRIP */
#step11 .s11-snapshot-head{
  padding: 22px 26px 18px;
  border-bottom: 1px solid rgba(212,177,106,0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%);
}
/* SMALL LABEL */
#step11 .s11-snapshot-kicker{
  color: #e4c06a;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}
/* MAIN HEADER TEXT */
#step11 .s11-snapshot-title{
  margin-top: 6px;
  color: rgba(255,255,255,0.92);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}
/* BODY CONTAINER */
#step11 .s11-snapshot-body{
  padding: 24px;
}
/* VIEW HANDLING */
#step11 .s11-snapshot-view{
  display: block;
}
#step11 .s11-snapshot-view[hidden]{
  display: none !important;
}
/* =========================================
SECTION 2 — PROGRAM CARD SHELL
========================================= */
#step11 .program-card{
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  padding: 28px 28px 22px;
  background:
    linear-gradient(180deg, rgba(250,251,255,0.99) 0%, rgba(240,244,252,0.97) 55%, rgba(231,237,248,0.97) 100%);
  border: 2px solid rgba(205,168,88,0.78);
  box-shadow:
    0 22px 45px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -30px 60px rgba(34,66,128,0.05);
}
/* soft premium texture */
#step11 .program-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.35) 18%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(92,128,205,0.08) 0%, rgba(255,255,255,0) 28%, rgba(88,129,208,0.05) 100%);
}
/* keep inner content above texture */
#step11 .program-card > *{
  position: relative;
  z-index: 1;
}
/* =========================================
SECTION 3 — PROGRAM HEADER
========================================= */
#step11 .program-header{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 6px 16px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(205,168,88,0.25);
}
/* LEFT */
#step11 .program-header-left{
  justify-self: start;
}
#step11 .program-eyebrow{
  margin: 0;
  color: #19366e;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  line-height: 1.1;
}
/* CENTER */
#step11 .program-header-center{
  justify-self: center;
  text-align: center;
}
#step11 .program-title{
  margin: 0;
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(3.2rem, 5vw, 4.6rem);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 0.95;
  color: #17346a;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.85),
    0 8px 18px rgba(18,42,92,0.10);
}
/* RIGHT */
#step11 .program-header-right{
  justify-self: end;
}
#step11 .program-logo img{
  width: 130px;
  height: auto;
  display: block;
}
/* =========================================
SECTION 4 — PROGRAM BODY LAYOUT
========================================= */
#step11 .program-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
/* MAIN COLUMNS */
#step11 .program-column{
  min-width: 0;              /* critical: prevents bleed/overflow */
  min-height: 420px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(244,247,253,0.74) 100%);
  border: 1px solid rgba(194,206,231,0.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.88),
    0 8px 20px rgba(24,49,95,0.08);
}
/* COLUMN HEADERS */
#step11 .program-column h3{
  margin: 0;
  padding: 18px 22px 16px;
  border-bottom: 1px solid rgba(205,168,88,0.28);
  color: #18366d;
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  line-height: 1.2;
  background:
    linear-gradient(180deg, rgba(240,244,252,0.88) 0%, rgba(231,238,249,0.74) 100%);
}
/* MASTERMINd RIGHT-SIDE SPLIT FOUNDATION */
#step11 .program-split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  min-width: 0;
}
#step11 .program-split-col{
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.58) 0%, rgba(245,248,253,0.7) 100%);
  border: 1px solid rgba(194,206,231,0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.84),
    0 6px 16px rgba(24,49,95,0.05);
}
#step11 .program-split-col h3{
  margin: 0;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(205,168,88,0.22);
  color: #18366d;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  line-height: 1.2;
  background:
    linear-gradient(180deg, rgba(240,244,252,0.82) 0%, rgba(231,238,249,0.68) 100%);
}
/* =========================================
SECTION 5 — LEFT-SIDE INCLUDED-IN-ALL LIST
========================================= */
#step11 .program-list{
  list-style: none;
  margin: 0;
  padding: 20px 24px 24px;
  display: grid;
  gap: 16px;
}
/* EACH ITEM */
#step11 .program-list li{
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 12px;
  align-items: start;
  color: #203a6f;
  font-size: 1.12rem;
  line-height: 1.5;
  font-weight: 700;
}
/* ICONS */
#step11 .program-list li::before{
  display: block;
  margin-top: 3px;
  font-size: 1.15rem;
  line-height: 1;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
/* MAIN TITLE (academy item anchor) */
#step11 .program-item-main{
  display: block;
}
/* ACADEMY SUBTEXT */
#step11 .program-subtext{
  grid-column: 2;
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(32,58,111,0.75);
  line-height: 1.4;
}
/* INLINE ITEMS */
#step11 .program-subtext span{
  white-space: nowrap;
  position: relative;
}
/* SEPARATORS */
#step11 .program-subtext span:not(:last-child)::after{
  content: "•";
  margin-left: 10px;
  color: rgba(32,58,111,0.4);
}
/* CUSTOM ICONS */
#step11 .icon-community::before{
  content: "👥";
}
#step11 .icon-academy::before{
  content: "📘";
}
#step11 .icon-bootcamp::before{
  content: "🪖";
}
#step11 .icon-kickstarter::before{
  content: "⚡";
}
#step11 .icon-mindset::before{
  content: "🧠";
}
#step11 .icon-library::before{
  content: "📂";
}
/* =========================================
SECTION 6 — RIGHT-SIDE PLAIN LISTS
========================================= */
#step11 .program-list-plain{
  list-style: none;
  margin: 0;
  padding: 20px 24px 24px;
  display: grid;
  gap: 14px;
}
#step11 .program-list-plain li{
  display: block;
  margin: 0;
  padding: 0;
  color: #203a6f;
  font-size: 1.12rem;
  line-height: 1.5;
  font-weight: 700;
}
/* remove inherited icons from left-list system */
#step11 .program-list-plain li::before{
  content: none;
}
/* slightly tighter type inside the mastermind split cards */
#step11 .program-split-col .program-list-plain{
  padding: 16px 18px 18px;
  gap: 12px;
}
#step11 .program-split-col .program-list-plain li{
  font-size: 1rem;
  line-height: 1.45;
}
/* =========================================
SECTION 7 — INVESTMENT BAR + FOOTER
========================================= */
#step11 .program-investment{
  margin-top: 18px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(205,168,88,0.52);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.76) 0%, rgba(245,248,253,0.84) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.86),
    0 8px 20px rgba(24,49,95,0.08);
}
#step11 .investment-label{
  padding: 10px 18px;
  text-align: center;
  color: #17346a;
  font-size: 0.9rem;
  font-weight: 950;
  letter-spacing: 2px;
  text-transform: uppercase;
  background:
    linear-gradient(180deg, #e4c06a 0%, #c89a42 100%);
  border-bottom: 1px solid rgba(164,123,44,0.45);
}
#step11 .investment-amount{
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  text-align: center;
  color: #17346a;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  line-height: 1.15;
}
/* placeholder when blank */
#step11 .investment-amount:empty::before{
  content: "Add investment later";
  color: rgba(23,52,106,0.38);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}
/* FOOTER RIBBON */
#step11 .program-footer{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
#step11 .program-footer span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 12px 26px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #e4c06a 0%, #c89a42 100%);
  color: #17346a;
  font-size: 0.98rem;
  font-weight: 950;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  box-shadow:
    0 10px 24px rgba(200,154,66,0.28),
    inset 0 1px 0 rgba(255,255,255,0.7);
}
/* =========================================
OVERRIDE — PREMIUM PROGRAM SELECTOR BUTTONS
Refined luxury treatment for Step 11 coaching cards
========================================= */
#step11 .s11-stage-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
  margin-top: 30px;
}
#step11 .s11-stage-card{
  position: relative;
  overflow: hidden;
  min-height: 198px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  border-radius: 24px;
  border: 1px solid rgba(255,220,150,0.72);
  background:
    linear-gradient(
      180deg,
      #f7e5ad 0%,
      #e5c773 16%,
      #cb9f49 48%,
      #b9852d 78%,
      #9f6d1d 100%
    );
  box-shadow:
    0 22px 46px rgba(0,0,0,0.38),
    0 0 0 1px rgba(255,255,255,0.06),
    inset 0 2px 0 rgba(255,255,255,0.72),
    inset 0 -4px 10px rgba(0,0,0,0.24),
    inset 0 0 24px rgba(255,220,140,0.18);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    filter .28s ease;
  cursor: pointer;
  isolation: isolate;
}
/* metallic sweep */
#step11 .s11-stage-card::after{
  content:"";
  position:absolute;
  top:0;
  left:-130%;
  width:58%;
  height:100%;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,0.42) 48%,
    rgba(255,255,255,0.12) 58%,
    transparent 78%
  );
  transform: skewX(-22deg);
  transition: left .75s ease;
  z-index: 1;
  pointer-events: none;
}
/* inner navy panel */
#step11 .s11-stage-card::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:50px;
  bottom:46px;
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 32%),
    linear-gradient(180deg, #0c2d6b 0%, #081b3f 58%, #06152f 100%);
  box-shadow:
    inset 0 2px 12px rgba(0,0,0,0.42),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 10px 22px rgba(0,0,0,0.18);
  z-index: 0;
}
#step11 .s11-stage-card > *{
  position: relative;
  z-index: 2;
}
#step11 .s11-stage-title{
  margin: 16px 0 8px;
  color: #08245b;
  font-size: 0.96rem;
  font-weight: 950;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
#step11 .s11-stage-sub{
  margin: 28px 0 0;
  padding: 0 18px;
  color: #ffffff;
  font-size: clamp(1.45rem, 2vw, 1.72rem);
  font-weight: 850;
  line-height: 1.1;
  text-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
#step11 .s11-stage-desc{
  margin-top: 8px;
  padding: 0 18px;
  color: rgba(255,255,255,0.78);
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.35;
}
#step11 .s11-stage-plus{
  width: 100%;
  margin-top: auto;
  padding: 11px 0 12px;
  background:
    linear-gradient(
      180deg,
      #f7e3a1 0%,
      #e1bf68 30%,
      #c79840 66%,
      #af7a27 100%
    );
  color: #ffffff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  border-top: 1px solid rgba(146,101,25,0.46);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.62),
    inset 0 -2px 6px rgba(0,0,0,0.26);
  transition:
    color .28s ease,
    transform .28s ease,
    text-shadow .28s ease;
}
#step11 .s11-stage-card:hover,
#step11 .s11-stage-card:focus-visible,
#step11 .s11-stage-card.is-active{
  transform: translateY(-7px);
  border-color: rgba(255,228,163,0.95);
  box-shadow:
    0 28px 56px rgba(0,0,0,0.44),
    0 0 0 3px rgba(212,177,106,0.10),
    0 0 28px rgba(212,177,106,0.18),
    inset 0 2px 0 rgba(255,255,255,0.78),
    inset 0 -4px 12px rgba(0,0,0,0.24),
    inset 0 0 28px rgba(255,225,150,0.24);
  outline: none;
}
#step11 .s11-stage-card:hover::after,
#step11 .s11-stage-card.is-active::after{
  left: 145%;
}
#step11 .s11-stage-card:hover .s11-stage-plus,
#step11 .s11-stage-card.is-active .s11-stage-plus{
  color: #fff8ea;
  text-shadow: 0 0 12px rgba(255,255,255,0.28);
}
@media (max-width: 1100px){
  #step11 .s11-stage-row{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #step11 .s11-stage-card{
    min-height: 184px;
  }
}
@media (max-width: 640px){
  #step11 .s11-stage-card{
    min-height: 172px;
    border-radius: 20px;
  }
  #step11 .s11-stage-card::before{
    top: 46px;
    bottom: 42px;
    left: 7px;
    right: 7px;
    border-radius: 14px;
  }
  #step11 .s11-stage-title{
    font-size: 0.88rem;
    letter-spacing: 2.2px;
  }
  #step11 .s11-stage-sub{
    font-size: 1.3rem;
  }
  #step11 .s11-stage-desc{
    font-size: 0.9rem;
  }
  #step11 .s11-stage-plus{
    font-size: 1.75rem;
  }
}
/* =========================================
STEP 11 — PROGRAM INVESTMENT BAR
Targets Premier / Elite / Mastermind
========================================= */
#step11 .program-investment{
  margin-top: 20px;
  border: 1px solid rgba(210,177,93,0.55);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(244,247,252,0.96) 100%);
  box-shadow:
    0 14px 28px rgba(8, 28, 69, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.78);
}
#step11 .investment-label{
  display: block;
  width: 100%;
  padding: 12px 18px 11px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #0b3273;
  background: linear-gradient(180deg, #e4c36c 0%, #cfa345 100%);
  border-bottom: 1px solid rgba(157,114,24,0.28);
  text-shadow: 0 1px 0 rgba(255,255,255,0.22);
}
#step11 .investment-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  padding: 20px 26px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(240,244,251,0.72) 100%);
}
#step11 .investment-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}
#step11 .investment-value{
  display: block;
  font-size: clamp(1.65rem, 2.1vw, 2.2rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #173a7a;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
#step11 .investment-meta{
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d7f9f;
}
#step11 .investment-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(23,58,122,0.32);
}
/* subtle emphasis by price type */
#step11 .investment-value[data-price="monthly"]{
  color: #173a7a;
}
#step11 .investment-value[data-price="annual"]{
  color: #0f2f67;
}
#step11 .investment-value[data-price="payfull"]{
  color: #0b3273;
}
/* responsive */
@media (max-width: 980px){
  #step11 .investment-grid{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 18px 20px;
  }
  #step11 .investment-divider{
    display: none;
  }
  #step11 .investment-item{
    padding: 8px 0;
  }
  #step11 .investment-value{
    white-space: normal;
  }
}
@media (max-width: 640px){
  #step11 .program-investment{
    border-radius: 18px;
  }
  #step11 .investment-label{
    font-size: 0.84rem;
    letter-spacing: 2.4px;
    padding: 11px 14px 10px;
  }
  #step11 .investment-grid{
    padding: 16px 14px 18px;
  }
  #step11 .investment-value{
    font-size: 1.5rem;
  }
  #step11 .investment-meta{
    font-size: 0.82rem;
  }
}
/* =========================================
STEP 11 — PROGRAM BODY LAYOUT OVERRIDES
Put this at the VERY BOTTOM of your CSS
========================================= */
/* Reset any old flex / split behavior */
#step11 .program-body,
#step11 #s11_stage_foundation .program-body,
#step11 #s11_stage_expansion .program-body,
#step11 #s11_stage_scaling .program-body{
  display: grid !important;
  gap: 20px !important;
  align-items: stretch !important;
}
/* Premier + Elite = true 50/50 */
#step11 #s11_stage_foundation .program-body,
#step11 #s11_stage_expansion .program-body{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
/* Mastermind = 3 equal columns */
#step11 #s11_stage_scaling .program-body{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
}
/* Kill old nested split layout if older CSS is still affecting it */
#step11 .program-split{
  display: contents !important;
}
#step11 .program-split-col{
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  flex: unset !important;
}
/* Make sure columns can shrink properly instead of forcing overflow/gaps */
#step11 .program-column,
#step11 .program-split-col{
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: unset !important;
}
/* In case old CSS assigned spans or widths */
#step11 #s11_stage_foundation .program-column,
#step11 #s11_stage_expansion .program-column,
#step11 #s11_stage_scaling .program-column{
  grid-column: auto !important;
}
/* Mobile */
@media (max-width: 980px){
  #step11 #s11_stage_foundation .program-body,
  #step11 #s11_stage_expansion .program-body,
  #step11 #s11_stage_scaling .program-body{
    grid-template-columns: 1fr !important;
  }
  #step11 .program-split{
    display: block !important;
  }
}
/* Step 10 prerequisite banner */
.s10-prereq-banner {
  margin: 0 0 18px; padding: 14px 18px; border-radius: 12px;
  background: rgba(197,160,89,0.08); border: 1px solid rgba(197,160,89,0.30);
}
.s10-prereq-title {
  font-size: 0.82rem; font-weight: 900; color: rgba(197,160,89,0.9);
  letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 10px;
}
.s10-prereq-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px;
}
.s10-prereq-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.80rem; font-weight: 800; color: rgba(255,255,255,0.70);
}
.s10-prereq-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25);
  transition: background 200ms ease;
}
.s10-prereq-item.is-filled .s10-prereq-dot {
  background: #4ade80; border-color: #16a34a;
}
.s10-prereq-item.is-filled { color: rgba(255,255,255,0.90); }
/* Enterprise: 2-col layout for Team + CEO columns */
#step11 #s11_stage_scaling .enterprise-two-col {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
}
#step11 #s11_stage_scaling .enterprise-main-col h3 {
  font-size: 1rem !important;
}
#step11 #s11_stage_scaling .enterprise-main-col li {
  font-size: 0.92rem !important;
}
/* Enterprise "Included in All Programs" trigger button */
.enterprise-included-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin: 0; padding: 10px 20px;
  background: linear-gradient(90deg, rgba(197,160,89,0.12), rgba(197,160,89,0.06));
  border: none; border-bottom: 1px solid rgba(197,160,89,0.25);
  cursor: pointer; transition: background 140ms ease;
}
.enterprise-included-trigger:hover { background: linear-gradient(90deg, rgba(197,160,89,0.22), rgba(197,160,89,0.10)); }
.enterprise-included-trigger__label { color: #18366d; font-weight: 900; font-size: 0.88rem; letter-spacing: 0.5px; }
.enterprise-included-trigger__cta { color: rgba(197,160,89,0.9); font-size: 0.80rem; font-weight: 800; }
/* Included in All Programs modal */
.included-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.62);
  display: flex; align-items: center; justify-content: center;
}
.included-modal-card {
  position: relative; background: #fff; border-radius: 18px;
  padding: 32px 28px 28px; max-width: 480px; width: 90%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.included-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 1.1rem;
  cursor: pointer; color: #555; line-height: 1;
}
.included-modal-close:hover { color: #111; }
.included-modal-header {
  font-size: 1.1rem; font-weight: 900; color: #18366d;
  border-bottom: 1px solid rgba(197,160,89,0.35);
  padding-bottom: 12px; margin-bottom: 16px; letter-spacing: 0.5px;
}
.included-modal-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.included-modal-list li {
  color: #1a2a4a; font-weight: 800; font-size: 0.92rem; line-height: 1.4;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(197,160,89,0.06); border: 1px solid rgba(197,160,89,0.15);
}
/* =========================================
STEP 12 — VIP GROWTH KICKOFF PLAN
========================================= */
#step12 .card{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,213,103,0.32) 0%, rgba(255,213,103,0.08) 10%, rgba(255,213,103,0) 20%),
    linear-gradient(180deg, #243b8f 0%, #30489d 18%, #3f57ac 42%, #5268b9 68%, #6f84ca 100%);
  border: 1px solid rgba(228,186,91,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 20px 50px rgba(0,0,0,0.35);
}
#step12 .card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 28%),
    radial-gradient(circle at 75% 18%, rgba(255,255,255,0.06), transparent 24%),
    radial-gradient(circle at 50% 78%, rgba(255,220,140,0.10), transparent 28%);
  mix-blend-mode: screen;
}
#step12 .tactical-header{
  position: relative;
  z-index: 2;
  background: rgba(8,18,56,0.78);
  color: #f1d285;
  border-bottom: 1px solid rgba(228,186,91,0.45);
}
#step12 .vip-kickoff-card{
  position: relative;
  z-index: 2;
  padding: 26px 34px 34px;
  color: #f7ead0;
}
#step12 .vip-kickoff-header{
  text-align: center;
  margin-bottom: 14px;
}
#step12 .vip-kickoff-title{
  margin: 0;
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #f2d287;
  text-shadow:
    0 2px 0 rgba(92,56,0,0.28),
    0 8px 18px rgba(0,0,0,0.28);
}
#step12 .vip-kickoff-divider{
  height: 3px;
  width: calc(100% + 68px);
  margin: 0 0 26px -34px;
  background:
    linear-gradient(90deg,
      rgba(228,186,91,0.95) 0%,
      rgba(255,219,128,0.98) 18%,
      rgba(255,245,190,1) 50%,
      rgba(255,219,128,0.98) 82%,
      rgba(228,186,91,0.95) 100%);
  box-shadow:
    0 0 12px rgba(255,216,122,0.65),
    0 0 28px rgba(255,216,122,0.25);
}
#step12 .vip-kickoff-divider-bottom{
  margin-top: 28px;
  margin-bottom: 24px;
}
#step12 .vip-kickoff-body{
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
#step12 .vip-kickoff-image-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
}
#step12 .vip-kickoff-image-placeholder{
  width: 100%;
  aspect-ratio: 4 / 4;
  border-radius: 18px;
  border: 2px solid rgba(228,186,91,0.68);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 100%),
    linear-gradient(135deg, rgba(23,36,96,0.72) 0%, rgba(71,94,176,0.45) 100%);
  color: rgba(255,240,215,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 0 0 4px rgba(228,186,91,0.10);
}
#step12 .vip-kickoff-content{
  min-width: 0;
}
#step12 .vip-kickoff-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
#step12 .vip-kickoff-list li{
  position: relative;
  padding-left: 34px;
  font-size: clamp(1.08rem, 1.5vw, 1.26rem);
  line-height: 1.35;
  font-weight: 500;
  color: #f7ead0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
#step12 .vip-kickoff-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 900;
  color: #e7b24b;
  text-shadow:
    0 0 10px rgba(255,220,140,0.32),
    0 1px 0 rgba(255,248,214,0.18);
}
#step12 .vip-kickoff-footer{
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}
#step12 .vip-kickoff-footer-text{
  margin: 0;
  font-size: clamp(1.22rem, 2vw, 1.8rem);
  line-height: 1.35;
  font-weight: 500;
  color: #f2deb0;
  text-shadow:
    0 2px 0 rgba(74,45,0,0.18),
    0 6px 18px rgba(0,0,0,0.18);
}
/* optional real image support */
#step12 .vip-kickoff-image-placeholder img,
#step12 .vip-kickoff-image-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
/* responsive */
@media (max-width: 980px){
  #step12 .vip-kickoff-card{
    padding: 24px 22px 28px;
  }
  #step12 .vip-kickoff-divider{
    width: calc(100% + 44px);
    margin-left: -22px;
  }
  #step12 .vip-kickoff-body{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  #step12 .vip-kickoff-image-wrap{
    max-width: 420px;
    margin: 0 auto;
  }
  #step12 .vip-kickoff-content{
    width: 100%;
  }
}
@media (max-width: 640px){
  #step12 .vip-kickoff-card{
    padding: 20px 16px 24px;
  }
  #step12 .vip-kickoff-divider{
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-bottom: 20px;
  }
  #step12 .vip-kickoff-divider-bottom{
    margin-top: 22px;
    margin-bottom: 18px;
  }
  #step12 .vip-kickoff-title{
    font-size: 2rem;
  }
  #step12 .vip-kickoff-list{
    gap: 14px;
  }
  #step12 .vip-kickoff-list li{
    padding-left: 28px;
    font-size: 1rem;
  }
  #step12 .vip-kickoff-list li::before{
    font-size: 1.2rem;
  }
  #step12 .vip-kickoff-footer-text{
    font-size: 1.08rem;
  }
}
/* right side split: checklist + logo */
#step12 .vip-kickoff-content-inner{
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 20px;
  align-items: center;
}
/* logo styling */
#step12 .vip-kickoff-logo{
  display: flex;
  align-items: center;
  justify-content: center;
}
#step12 .vip-kickoff-logo img{
  width: 140px;
  max-width: 100%;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25));
}
/* make image behave nicely */
#step12 .vip-kickoff-image-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}
/* =========================================
STEP 12 — SIZE BOOST OVERRIDES
Put this at the VERY BOTTOM of your CSS
========================================= */
#step12 .vip-kickoff-body{
  grid-template-columns: 380px minmax(0, 1fr) !important;
  gap: 34px !important;
  align-items: center !important;
}
#step12 .vip-kickoff-image-wrap{
  max-width: 380px !important;
}
#step12 .vip-kickoff-image-wrap img{
  width: 100% !important;
  height: auto !important;
  min-height: 300px !important;
  object-fit: cover !important;
  border-radius: 20px !important;
}
#step12 .vip-kickoff-content-inner{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 230px !important;
  gap: 28px !important;
  align-items: center !important;
}
#step12 .vip-kickoff-list{
  gap: 22px !important;
}
#step12 .vip-kickoff-list li{
  padding-left: 38px !important;
  font-size: 1.2rem !important;
  line-height: 1.4 !important;
}
#step12 .vip-kickoff-list li::before{
  font-size: 1.6rem !important;
  top: -1px !important;
}
#step12 .vip-kickoff-logo{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#step12 .vip-kickoff-logo img{
  width: 210px !important;
  max-width: 100% !important;
  height: auto !important;
  opacity: 0.98 !important;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.24)) !important;
}
#step12 .vip-kickoff-footer{
  margin-top: 12px !important;
}
#step12 .vip-kickoff-footer-text{
  font-size: clamp(1.45rem, 2.2vw, 2rem) !important;
  line-height: 1.35 !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}
/* tablet */
@media (max-width: 1100px){
  #step12 .vip-kickoff-body{
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  #step12 .vip-kickoff-image-wrap{
    max-width: 460px !important;
    margin: 0 auto !important;
  }
  #step12 .vip-kickoff-content-inner{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  #step12 .vip-kickoff-logo img{
    width: 180px !important;
  }
}
/* mobile */
@media (max-width: 640px){
  #step12 .vip-kickoff-image-wrap{
    max-width: 100% !important;
  }
  #step12 .vip-kickoff-image-wrap img{
    min-height: 240px !important;
  }
  #step12 .vip-kickoff-list li{
    font-size: 1.05rem !important;
    padding-left: 30px !important;
  }
  #step12 .vip-kickoff-logo img{
    width: 150px !important;
  }
  #step12 .vip-kickoff-footer-text{
    font-size: 1.15rem !important;
  }
}
/* =========================================
STEP 12 — FORCE SIZE OVERRIDES (HARD)
========================================= */
/* MAKE LEFT IMAGE MUCH BIGGER */
#step12 .vip-kickoff-body{
  grid-template-columns: 520px minmax(0, 1fr) !important;
  gap: 40px !important;
}
#step12 .vip-kickoff-image-wrap{
  max-width: 520px !important;
}
#step12 .vip-kickoff-image-wrap img{
  width: 520px !important;
  height: 360px !important;
  object-fit: cover !important;
  border-radius: 22px !important;
  display: block !important;
}
/* MAKE CHECKLIST TEXT MUCH LARGER */
#step12 .vip-kickoff-list li{
  font-size: 1.45rem !important;
  line-height: 1.5 !important;
  padding-left: 44px !important;
}
#step12 .vip-kickoff-list li::before{
  font-size: 1.9rem !important;
  left: 0 !important;
}
/* MAKE LOGO MUCH BIGGER */
#step12 .vip-kickoff-content-inner{
  grid-template-columns: minmax(0, 1fr) 300px !important;
  gap: 30px !important;
}
#step12 .vip-kickoff-logo img{
  width: 280px !important;
  max-width: none !important;
  height: auto !important;
  opacity: 1 !important;
  transform: scale(1.1) !important;
}
/* PUSH FOOTER LOWER */
#step12 .vip-kickoff-footer{
  margin-top: 30px !important;
}
#step12 .vip-kickoff-footer-text{
  font-size: 1.8rem !important;
  max-width: 1200px !important;
}
/* =========================
   STEP 12 — PRINT CONTROLS
   (Screen UI only — not print)
========================= */
#step12 .s12-print-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  margin-top: 24px;
}
#step12 .s12-program-selector {
  flex: 1;
  background: linear-gradient(180deg, #0c1e45 0%, #081530 100%);
  border: 1px solid rgba(212,168,74,0.65);
  border-radius: 16px;
  padding: 16px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
#step12 .s12-selector-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#step12 .s12-selector-label {
  color: #e4c06a;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
#step12 .s12-selector-status {
  color: rgba(228,192,106,0.70);
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: right;
  min-height: 1.2em;
  white-space: nowrap;
}
#step12 .s12-selector-btns {
  display: flex;
  gap: 12px;
}
#step12 .s12-program-btn {
  flex: 1;
  padding: 14px 10px;
  border-radius: 10px;
  border: 2px solid rgba(212,168,74,0.55);
  background: rgba(255,255,255,0.07);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
#step12 .s12-program-btn:hover {
  border-color: rgba(212,168,74,0.80);
  background: rgba(212,168,74,0.12);
  color: #f5ead1;
  transform: translateY(-1px);
}
#step12 .s12-program-btn.is-selected,
#step12 .s12-program-btn[data-selected="true"] {
  background: linear-gradient(180deg, rgba(212,168,74,0.30) 0%, rgba(212,168,74,0.18) 100%);
  border-color: #d4a84a;
  color: #f5ead1;
  box-shadow:
    0 0 0 3px rgba(212,168,74,0.15),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
#step12 .s12-print-controls .s12-print-btn {
  /* Full-width across the two stacked selector boxes above, much shorter. */
  width: 100%;
  padding: 10px 24px;
  background: linear-gradient(180deg, #e4c36c 0%, #c89a42 100%) !important;
  color: #0b2e4f !important;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none !important;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  min-height: 38px;
  height: 38px;
  box-shadow:
    0 6px 16px rgba(200,154,66,0.35),
    inset 0 1px 0 rgba(255,255,255,0.55);
  transition: all 0.2s ease;
}
#step12 .s12-print-controls .s12-print-btn:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px);
  box-shadow:
    0 12px 30px rgba(200,154,66,0.50),
    inset 0 1px 0 rgba(255,255,255,0.55);
}
/* =========================
   PAGE 1 PRINT — STEP 1
   (Inside @media print only)
========================= */
@media print {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
   body > * {
    display: none !important;
  }
  body #lfm_print_root {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    overflow: visible !important;
  }
  #lfm_print_root * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  #lfm_print_root .lfm-print-section {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    page-break-before: always !important;
    break-before: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  #lfm_print_root .lfm-print-section:first-child {
    page-break-before: avoid !important;
    break-before: avoid !important;
  }
  /* Hide UI chrome inside cloned print sections */
  #lfm_print_root aside,
  #lfm_print_root header.tactical-nav,
  #lfm_print_root .nav-controls,
  #lfm_print_root .s12-print-controls,
  #lfm_print_root .split-actions,
  #lfm_print_root .s2-next,
  #lfm_print_root .cta-wrap,
  #lfm_print_root .cta-row,
  #lfm_print_root .btn-primary,
  #lfm_print_root .btn-secondary,
  #lfm_print_root .btn-premium,
  #lfm_print_root .mkt-run-wrap,
  #lfm_print_root .s2-actions,
  #lfm_print_root .s7-snap-actions-center,
  #lfm_print_root #s7_workbench_panel,
  #lfm_print_root .s11-stage-row,
  #lfm_print_root .s11-constraint-grid,
  #lfm_print_root #back,
  #lfm_print_root #clear-step,
  #lfm_print_root .btn-clear-step,
  #lfm_print_root #next {
    display: none !important;
  }
  #lfm_print_root .card,
  #lfm_print_root .briefing-container {
    min-height: unset !important;
    height: auto !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  aside { display: none !important; }
  main  { margin-left: 0 !important; width: 100% !important; }
/* --- Page 1 layout --- */
  #lfm_print_root .lfm-print-page1 {
    background: #ffffff !important;
    padding: 0 !important;
    display: block !important;
  }
  #lfm_print_root .lfm-print-page1 .page {
    display: block !important;
  }
  #lfm_print_root .lfm-print-page1 * {
    visibility: visible !important;
  }
  #lfm_print_root .lfm-print-page1 .briefing-container {
    background: #ffffff !important;
    color: #0f172a !important;
    min-height: unset !important;
    height: auto !important;
    max-height: 185mm !important;
    box-shadow: none !important;
    padding: 16px 32px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    align-items: center !important;
    border: 1px solid rgba(197,160,89,0.25) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #lfm_print_root .lfm-print-page1 .tactical-header {
    font-size: 0.68rem !important;
    color: #c5a059 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
  }
  #lfm_print_root .lfm-print-page1 .briefing-title {
    font-size: 1.8rem !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
    color: #0f172a !important;
  }
  #lfm_print_root .lfm-print-page1 .quote-block {
    margin-bottom: 12px !important;
  }
  #lfm_print_root .lfm-print-page1 .quote-block p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: #0f172a !important;
  }
  #lfm_print_root .lfm-print-page1 .attribution {
    font-size: 0.78rem !important;
    color: rgba(15,23,42,0.65) !important;
  }
  #lfm_print_root .lfm-print-page1 .briefing-body p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
    color: #0f172a !important;
  }
  #lfm_print_root .lfm-print-page1 .mission-brief {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  #lfm_print_root .lfm-print-page1 .mission-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  #lfm_print_root .lfm-print-page1 .mission-image img {
    max-width: 100% !important;
    max-height: 170mm !important;
    width: auto !important;
    height: auto !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    display: block !important;
  }
  @page {
    size: letter landscape;
    margin: 8mm;
  }
}
/* =============================================
   PDF RENDER STYLES (also used for window.print fallback)
   Applied via either:
     - #lfm_print_container.lfm-pdf-output ... (html2pdf path, off-screen)
     - body.lfm-printing #lfm_print_container ... (window.print path)
   The two paths share every rule below via comma selectors.
============================================= */

/* Container basics — landscape letter (11" wide × 8.5" tall) */
#lfm_print_container.lfm-pdf-output,
body.lfm-printing #lfm_print_container {
  display: block !important;
  background: #ffffff !important;
  color: #111 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  width: 11in !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* When rendered for PDF, container is wrapped in .lfm-pdf-hidden-wrapper
   which clips it to 0×0 visually — but the container itself stays fully
   laid out so html2canvas captures it correctly. */
.lfm-pdf-hidden-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Step 1 — exactly one landscape page (11×8.5"), so it fills the page. */
#lfm_print_container.lfm-pdf-output #step1,
body.lfm-printing #lfm_print_container #step1 {
  display: block !important;
  width: 11in !important;
  height: 8.5in !important;
  padding: 0.4in !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
#lfm_print_container.lfm-pdf-output #step1 .briefing-container,
body.lfm-printing #lfm_print_container #step1 .briefing-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px !important;
  align-items: center !important;
}
#lfm_print_container.lfm-pdf-output #step1 .mission-brief,
body.lfm-printing #lfm_print_container #step1 .mission-brief {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}
#lfm_print_container.lfm-pdf-output #step1 .mission-image,
body.lfm-printing #lfm_print_container #step1 .mission-image {
  flex: 0 0 40% !important;
  max-width: 40% !important;
  aspect-ratio: 2 / 3 !important;
  max-height: 7in !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}
#lfm_print_container.lfm-pdf-output #step1 .mission-image img,
body.lfm-printing #lfm_print_container #step1 .mission-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  border-radius: 14px !important;
}

/* Step 2 — render at NATURAL size (11in wide, however tall).
   jsPDF addImage will scale it down to fit one landscape page, centered. */
#lfm_print_container.lfm-pdf-output #step2,
body.lfm-printing #lfm_print_container #step2 {
  display: block !important;
  width: 11in !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: #0b1a37 !important;
}
#lfm_print_container.lfm-pdf-output #s2_results,
body.lfm-printing #lfm_print_container #s2_results {
  display: block !important;
}

/* =============================================
   BROWSER PRINT FALLBACK (window.print path)
============================================= */
@media print {
  @page {
    size: landscape;
    margin: 0.35in;
  }
  body.lfm-printing,
  body.lfm-printing #lfm_print_container,
  body.lfm-printing #lfm_print_container * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  body.lfm-printing > * {
    display: none !important;
  }
  body.lfm-printing #lfm_print_container {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    z-index: auto !important;
  }
}