/* ═══════════════════════════════════════════════════════════
   PLANNER PREMIUM — Visual elevation layer
   Goal: calm authority, intelligent design, premium experience
   Rules: no JS/ID changes, no layout breakage, RTL-safe
   ═══════════════════════════════════════════════════════════ */

/* ── 1. HERO ──────────────────────────────────────────────── */

.planner-hero {
  margin-bottom: 3rem;
  max-width: 680px;
  padding: 0 0.5rem;
}

.planner-badge {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  padding: 0.35rem 1.1rem;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(201, 168, 76, 0.35);
  margin-bottom: 1.5rem;
}

.planner-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  line-height: 1.1;
}

.planner-subtitle {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 1.75rem;
}

/* Trust badges — horizontal, minimal, refined */
.planner-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}

.trust-badge {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
  padding: 0 1.1rem;
  position: relative;
  border: none;
  background: none;
}

.trust-badge + .trust-badge::before {
  content: '·';
  position: absolute;
  right: 0;
  color: rgba(255, 255, 255, 0.28);
}

/* ── 2. CURIOSITY HOOK — editorial, not alarming ──────────── */

.planner-warning {
  font-size: 0.88rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.48);
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  padding: 1rem 0;
  margin-bottom: 2rem;
  text-align: center;
  letter-spacing: 0.01em;
}

/* ── 3. STEP NAVIGATION — journey feel ───────────────────── */

.planner-steps {
  gap: 0;
  padding: 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.planner-step {
  padding: 0.875rem 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  gap: 0.4rem;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}

.planner-step:hover { opacity: 0.7; background: transparent; }
.planner-step.active { opacity: 1; }
.planner-step.completed { opacity: 0.85; }

.step-num {
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: transparent;
}

.planner-step.active .step-num {
  background: var(--gold, #c9a84c);
  border-color: var(--gold, #c9a84c);
  color: #fff;
  box-shadow: 0 0 0 3px var(--gold-glow, rgba(201, 168, 76, 0.25));
}

.planner-step.completed .step-num {
  background: transparent;
  border-color: var(--gold, #c9a84c);
  color: var(--gold, #c9a84c);
}

.step-track-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  align-self: center;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.step-track-line.filled::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--gold, #c9a84c);
  animation: trackFill 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes trackFill {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── 4. PROGRESS ──────────────────────────────────────────── */

.planner-progress {
  margin-bottom: 0.75rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.07);
}

.planner-progress-fill {
  background: var(--gold-gradient, linear-gradient(135deg, #c9a84c 0%, #e2c97e 100%));
}

.planner-progress-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.72;
  margin-bottom: 2.25rem;
  color: var(--gold, #c9a84c);
}

/* ── 5. STEP PANELS — breathing room ─────────────────────── */

.planner-panel .calc-card {
  padding: 2.25rem;
  border-radius: 20px;
  border-top: none;
  border: 1px solid rgba(0, 0, 0, 0.04);
  background: #fff;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.07);
  position: relative;
  overflow: hidden;
}

/* Subtle right-edge accent — editorial, not loud */
.planner-panel .calc-card::after {
  content: '';
  position: absolute;
  top: 2.5rem;
  bottom: 2.5rem;
  right: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--gold, #c9a84c) 0%, transparent 100%);
  opacity: 0.3;
}

/* Step card title */
.planner-panel .calc-title {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  margin-bottom: 0.75rem;
  color: #0d1f33;
  line-height: 1.2;
}

.planner-panel .calc-desc {
  font-size: 0.92rem;
  color: rgba(0, 0, 0, 0.4);
  line-height: 1.7;
  margin-bottom: 1.75rem;
  font-weight: 400;
}

/* ── 6. LIFESTYLE TILES — aspirational, tactile ──────────── */

.lifestyle-tiles {
  gap: 1rem;
  margin-bottom: 2rem;
}

.lifestyle-tile {
  padding: 1.5rem 0.75rem 1.25rem;
  border-radius: 16px;
  border-width: 1.5px;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.lifestyle-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.lifestyle-tile.active {
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  border-width: 2px;
}

.lifestyle-tile-icon {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

.lifestyle-tile-label {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.lifestyle-tile-amount {
  font-size: 0.73rem;
  font-weight: 600;
}

.lifestyle-tile-desc {
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.4);
}

/* ── 6b. STEP 1 — THREE-SECTION PREMIUM LAYOUT ──────────── */

.step1-premium-card {
  padding: 3rem 2.25rem;
}

.step1-section {
  margin-bottom: 3.25rem;
}

.step1-section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold, #c9a84c) 30%, var(--gold, #c9a84c) 70%, transparent);
  margin: 2.5rem 0 3rem;
  opacity: 0.3;
}

.step1-main-title {
  font-family: var(--font-heading, 'Heebo', sans-serif);
  font-size: var(--text-2xl, clamp(1.85rem, 3vw, 2.4rem));
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary, #071e36);
  line-height: 1.15;
}

.step1-section-title {
  font-family: var(--font-heading, 'Heebo', sans-serif);
  font-size: var(--text-xl, clamp(1.4rem, 2vw, 1.8rem));
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--text-primary, #071e36);
}

.step1-section-desc {
  font-size: var(--text-sm, 0.95rem);
  color: var(--text-secondary, #4a5a6a);
  margin-bottom: 1.5rem;
  line-height: var(--leading-normal, 1.6);
}

/* ── 6c. VISION SLIDER — Timeline to Freedom ─────────────── */

.vision-cost-display {
  text-align: center;
  margin-bottom: 1.75rem;
  padding: 1.5rem 0;
}

.vision-cost-amount {
  display: block;
  font-family: var(--font-heading, 'Heebo', sans-serif);
  font-size: var(--text-4xl, clamp(2.6rem, 4.5vw, 3.8rem));
  font-weight: 700;
  color: var(--gold, #c9a84c);
  line-height: 1;
  transition: transform 0.15s ease, color 0.15s ease;
}

.vision-cost-amount.pulse {
  transform: scale(1.06);
}

.vision-cost-period {
  font-size: var(--text-sm, 0.95rem);
  color: var(--text-muted, #5a7a77);
  margin-top: 0.25rem;
  display: block;
}

.vision-cost-annual {
  display: block;
  font-size: var(--text-sm, 0.95rem);
  color: var(--text-secondary, #4a5a6a);
  margin-top: 0.35rem;
}

.vision-tier-label {
  text-align: center;
  font-family: var(--font-heading, 'Heebo', sans-serif);
  font-size: var(--text-lg, clamp(1.15rem, 1.5vw, 1.25rem));
  font-weight: 700;
  color: var(--brand-teal, #0b6b63);
  margin-bottom: 0.25rem;
  transition: all 0.2s ease;
}

.vision-tier-desc {
  text-align: center;
  font-size: var(--text-sm, 0.95rem);
  color: var(--text-muted, #5a7a77);
  margin-bottom: 2rem;
  line-height: 1.5;
}

/* Slider wrapper */
.vision-slider-wrap {
  padding: 0 0.5rem;
  margin-bottom: 1rem;
}

/* Range slider — gold track */
.vision-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full, 999px);
  background: rgba(201, 168, 76, 0.15);
  outline: none;
  cursor: pointer;
  direction: ltr;
  position: relative;
}

.vision-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--radius-full, 999px);
  background: linear-gradient(
    to right,
    var(--gold, #c9a84c) 0%,
    var(--gold, #c9a84c) var(--slider-pct, 50%),
    rgba(201, 168, 76, 0.15) var(--slider-pct, 50%),
    rgba(201, 168, 76, 0.15) 100%
  );
}

.vision-slider::-moz-range-track {
  height: 8px;
  border-radius: var(--radius-full, 999px);
  background: rgba(201, 168, 76, 0.15);
}

.vision-slider::-moz-range-progress {
  height: 8px;
  border-radius: var(--radius-full, 999px);
  background: var(--gold, #c9a84c);
}

.vision-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--gold, #c9a84c);
  box-shadow:
    0 0 0 4px var(--gold-glow, rgba(201, 168, 76, 0.25)),
    0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: grab;
  margin-top: -12px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.vision-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
  box-shadow:
    0 0 0 6px var(--gold-glow, rgba(201, 168, 76, 0.25)),
    0 6px 16px rgba(0, 0, 0, 0.2);
}

.vision-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.vision-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--gold, #c9a84c);
  box-shadow:
    0 0 0 4px var(--gold-glow, rgba(201, 168, 76, 0.25)),
    0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: grab;
}

.vision-slider:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold-glow, rgba(201, 168, 76, 0.25));
}

/* Slider anchors */
.vision-slider-anchors {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted, #5a7a77);
  margin-top: 0.5rem;
  direction: ltr;
}

/* Tier markers */
.vision-tier-markers {
  display: flex;
  justify-content: space-between;
  padding: 0 2%;
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
}

.vision-marker {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #5a7a77);
  opacity: 0.45;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.vision-marker.active-zone {
  opacity: 1;
  color: var(--gold, #c9a84c);
}

/* Vision refine accordion */
.vision-refine {
  margin-top: 1.5rem;
  border: 1px solid var(--border-light, rgba(7, 30, 54, 0.06));
  border-radius: var(--radius-md, 14px);
  padding: 0;
  overflow: hidden;
}

.vision-refine > summary {
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary, #4a5a6a);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vision-refine > summary::-webkit-details-marker { display: none; }
.vision-refine > summary::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 0.75rem;
}
.vision-refine[open] > summary::before {
  transform: rotate(90deg);
}

.vision-refine-content {
  padding: 0 1.25rem 1.25rem;
}

/* Step 1 age row — single field centered */
.step1-age-row {
  max-width: 200px;
}

/* Step 1 employment — reuse existing buttons but with gold active */
#step-1 .employment-type-btn.active {
  background: var(--gold-dark, #a68a3a);
  border-color: var(--gold-dark, #a68a3a);
  color: #fff;
  box-shadow: 0 2px 8px var(--gold-glow, rgba(201, 168, 76, 0.25));
}

#step-1 .employment-type-btn:hover:not(.active) {
  border-color: var(--gold, #c9a84c);
  background: var(--gold-pale, rgba(201, 168, 76, 0.08));
}

/* Mobile responsive */
@media (max-width: 600px) {
  .step1-premium-card {
    padding: 1.75rem 1.25rem;
  }
  .vision-cost-amount {
    font-size: var(--text-2xl, clamp(1.85rem, 3vw, 2.4rem));
  }
  .step1-section {
    margin-bottom: 2rem;
  }
  .step1-section-divider {
    margin: 1.5rem 0 2rem;
  }
  .step1-age-row {
    max-width: 100%;
  }
}

/* ── 7. INCOME CHIPS — unified voice ─────────────────────── */

.income-chip {
  padding: 0.55rem 1.1rem;
  font-size: 0.83rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.025);
  color: #2d3748;
  transition: all 0.18s ease;
  min-height: 36px;
}

.income-chip:hover {
  border-color: var(--brand-accent);
  background: rgba(15, 185, 168, 0.07);
  color: var(--brand-teal);
}

.income-chip.active {
  background: #0c5c55;
  border-color: #0c5c55;
  color: #fff;
  box-shadow: 0 2px 8px rgba(12, 92, 85, 0.22);
}

/* "Add other income" chip — always visible, dashed border */
.income-chip--add-other {
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.2);
  background: transparent;
  color: var(--text-secondary, #4a5a6a);
  font-weight: 600;
}
.income-chip--add-other:hover {
  border-color: var(--gold, #c9a84c);
  color: var(--gold-dark, #a68a3a);
  background: var(--gold-pale, rgba(201, 168, 76, 0.08));
}

/* Other income name input field */
.other-inc-name-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-bottom: 1.5px solid var(--border-mid, rgba(7, 30, 54, 0.12));
  background: transparent;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary, #071e36);
  padding: 0.25rem 0;
  outline: none;
  font-family: inherit;
  direction: rtl;
}
.other-inc-name-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-weight: 400;
}
.other-inc-name-input:focus {
  border-bottom-color: var(--gold, #c9a84c);
}

/* Rental income gross hint */
.income-rental-hint {
  font-size: 0.78rem;
  color: var(--gold-dark, #a68a3a);
  background: var(--gold-pale, rgba(201, 168, 76, 0.08));
  border-radius: var(--radius-sm, 8px);
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0 0.5rem;
  line-height: 1.5;
  direction: rtl;
}

/* ── 8. EXPENSE CHIPS — same language as income ──────────── */

.expense-cat-btn {
  padding: 0.875rem 0.5rem;
  border-radius: 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.09);
  background: rgba(0, 0, 0, 0.02);
  transition: all 0.18s ease;
  gap: 0.4rem;
  min-height: 68px;
}

.expense-cat-btn:hover {
  border-color: var(--brand-accent);
  background: rgba(15, 185, 168, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 185, 168, 0.1);
}

.expense-cat-btn.active {
  background: rgba(12, 92, 85, 0.08);
  border-color: var(--brand-accent);
  border-width: 2px;
}

/* ── Focus-visible — keyboard accessibility ──────────────── */
.income-chip:focus-visible,
.expense-cat-btn:focus-visible,
.lifestyle-tile:focus-visible,
.goal-chip:focus-visible,
.children-count-btn:focus-visible,
.ownership-btn:focus-visible,
.asset-flat-chip:focus-visible,
.assets-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(15, 185, 168, 0.38);
}

.cat-ico { font-size: 1.3rem; }

/* ── 8b. OWNERSHIP SELECTION — premium two-option cards ──── */

.ownership-section-hint {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.42);
  margin: -0.2rem 0 1rem;
  line-height: 1.5;
}

.ownership-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  direction: rtl;
}

.ownership-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 60px;
  padding: 1.1rem 1rem;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  text-align: center;
}

.ownership-card:hover {
  border-color: rgba(15, 185, 168, 0.35);
  background: rgba(15, 185, 168, 0.03);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.ownership-card.active {
  border-color: var(--brand-accent);
  background: rgba(15, 185, 168, 0.07);
  box-shadow:
    0 0 0 3px rgba(15, 185, 168, 0.15),
    0 8px 24px rgba(15, 185, 168, 0.1);
  transform: translateY(-1px);
}

.ownership-card.active::after {
  content: '✓';
  position: absolute;
  top: 0.5rem;
  inset-inline-end: 0.6rem;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  background: var(--brand-accent);
  border-radius: 50%;
}

.ownership-card-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.ownership-card-label {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary, #071e36);
  letter-spacing: -0.01em;
}

.ownership-card.active .ownership-card-label {
  color: var(--brand-teal, #0b6b63);
}

.ownership-card-desc {
  font-size: 0.76rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.42);
  line-height: 1.45;
}

.ownership-card.active .ownership-card-desc {
  color: rgba(11, 107, 99, 0.7);
}

/* Focus-visible for cards */
.ownership-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(15, 185, 168, 0.38);
}

/* Mobile: stack vertically on very small screens */
@media (max-width: 400px) {
  .ownership-cards-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* Expense wizard question */
.wizard-q {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0d1f33;
  margin-bottom: 1rem;
}

.wizard-q-hint,
.wizard-q-sub {
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  display: block;
  margin-top: 0.2rem;
}

/* ── 9. SLIDERS — unified in REFINEMENT LAYER below ──── */

/* ── 10. STEP INSIGHT CARDS — intelligence, not warning ───── */

.step-insight-card {
  margin: 1.75rem 0 0.75rem;
  padding: 1.5rem 1.75rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #faf8f0 0%, #f8f4e8 100%);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-inline-start: 3px solid var(--gold, #c9a84c);
  text-align: center;
}

.insight-number {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.insight-card-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.38);
  margin-bottom: 0.4rem;
}

.insight-card-text,
.insight-text {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.48);
  line-height: 1.65;
  max-width: 380px;
  margin: 0 auto;
}

/* ── 11. STICKY SUMMARY — private dashboard ──────────────── */

.planner-sticky-summary {
  min-width: 200px;
  max-width: 240px;
  padding: 1rem 1.25rem 0.875rem;
  border-radius: 16px;
  background: rgba(5, 20, 40, 0.97);
  border: 1px solid rgba(201, 168, 76, 0.25);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(201, 168, 76, 0.08);
  gap: 0.5rem;
}

.pss-header {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.3rem;
}

.pss-name {
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.48);
}

.pss-val {
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.pss-divider {
  background: rgba(255, 255, 255, 0.06);
  margin: 0.2rem 0;
}

.pss-insight {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* ── 12. MICRO INSIGHTS — advisor tone ───────────────────── */

.planner-micro-insight {
  padding: 0.875rem 1.125rem;
  border-radius: 0 12px 12px 0;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.65;
  border: none;
}

.micro-insight--positive {
  background: rgba(15, 185, 168, 0.06);
  border-inline-start: 3px solid var(--brand-accent);
  color: #0c5c55;
}

.micro-insight--warning {
  background: rgba(245, 158, 11, 0.06);
  border-inline-start: 3px solid #f59e0b;
  color: #78450b;
}

.micro-insight--neutral {
  background: rgba(0, 0, 0, 0.03);
  border-inline-start: 3px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}

/* ── 13. SURPLUS BAR — live indicator ───────────────────── */

.planner-surplus-bar {
  padding: 1.125rem 1.375rem;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.025);
  border: 1.5px solid rgba(0, 0, 0, 0.07);
  margin-top: 2rem;
}

.surplus-bar-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.38);
  letter-spacing: 0.03em;
}

.surplus-bar-value {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.surplus-track {
  height: 5px;
  background: rgba(0, 0, 0, 0.06);
}

/* ── 14. NAVIGATION BUTTONS — intentional CTAs ───────────── */

.planner-nav-btns {
  margin-top: 2.5rem;
  gap: 0.875rem;
}

.planner-next {
  padding: 0.9rem 2rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 12px;
  background: var(--gold-gradient, linear-gradient(135deg, #c9a84c 0%, #e2c97e 100%));
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px var(--gold-glow, rgba(201, 168, 76, 0.25));
}

.planner-next:hover {
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.35);
  transform: translateY(-1px);
}

.planner-prev {
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  padding: 0.875rem 1.25rem;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: none;
}

.planner-prev:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: none;
}

/* ── 15. RESUME BANNER ───────────────────────────────────── */

.planner-resume-banner {
  border-radius: 16px;
  padding: 0.875rem 1.5rem;
  gap: 1.5rem;
}

/* ── 16. ASSET NETWORTH DISPLAY ─────────────────────────── */

.assets-networth-display {
  padding: 1.375rem 1.5rem;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.02);
  border: 1.5px solid rgba(0, 0, 0, 0.07);
  margin-bottom: 2rem;
}

.nw-value {
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.nw-total-row .nw-value {
  font-size: 1.6rem;
}

.assets-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.32);
  margin-bottom: 0.875rem;
}

/* ── 17. GOALS AREA — meaningful destinations ────────────── */

.goals-library {
  margin-top: 2rem;
}

.goals-library-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.32);
  margin-bottom: 1.25rem;
}

.goal-cat-group {
  margin-bottom: 1.375rem;
}

.goal-cat-group-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.4);
  margin-bottom: 0.625rem;
  display: block;
}

.goal-chip {
  padding: 0.5rem 1rem;
  font-size: 0.83rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.025);
  color: #2d3748;
  transition: all 0.18s ease;
  min-height: 36px;
}

.goal-chip:hover {
  border-color: var(--brand-accent);
  background: rgba(15, 185, 168, 0.07);
  color: var(--brand-teal);
  transform: translateY(-1px);
}

.retirement-vision-card {
  border-radius: 16px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}

.goals-my-plans-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0d1f33;
  letter-spacing: -0.01em;
}

/* ── 18. WOW SCREEN — emotional climax ───────────────────── */

.wow-screen {
  padding: 1.5rem 0 1rem;
}

.wow-numbers {
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.wow-number-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  padding: 1.5rem 1rem;
  border-radius: 16px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.10);
  border-width: 1.5px;
}

.wow-number-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.38);
  margin-bottom: 0.625rem;
}

.wow-number-value {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  font-family: var(--font-heading);
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.wow-chart-wrap {
  height: 260px;
  margin-bottom: 2rem;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.015);
  padding: 1rem;
  box-sizing: border-box;
}

.wow-summary-sentence {
  font-size: 1rem;
  line-height: 1.8;
  font-weight: 600;
  color: #1a2233;
  padding: 1.25rem 1.5rem;
  border-radius: 0;
  background: transparent;
  border-inline-start: none;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: 2rem;
  text-align: center;
}

.wow-summary-sentence[data-tone="surplus"] {
  background: transparent;
  color: #0c5c55;
  border-color: rgba(15, 185, 168, 0.18);
}

.wow-summary-sentence[data-tone="gap-large"] {
  color: #7a1a1a;
  background: transparent;
  border-color: rgba(229, 62, 62, 0.15);
}

.wow-summary-sentence[data-tone="gap-small"] {
  color: #6b3d0b;
  background: transparent;
  border-color: rgba(245, 158, 11, 0.18);
}

.wow-actions {
  gap: 0.875rem;
  margin-bottom: 2rem;
}

.wow-deep-dive-btn {
  background: #0c5c55;
  color: #fff;
  font-family: var(--font-body);
  border-radius: 12px;
  padding: 0.9rem 1.75rem;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(12, 92, 85, 0.22);
}

.wow-deep-dive-btn:hover {
  opacity: 1;
  background: #0a4f49;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(12, 92, 85, 0.3);
}

.wow-share-btn {
  background: transparent;
  color: rgba(0, 0, 0, 0.48);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  font-family: var(--font-body);
  padding: 0.9rem 1.75rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.wow-share-btn:hover {
  opacity: 1;
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.68);
  transform: translateY(-1px);
}

/* ── 19. DEEP DIVE ───────────────────────────────────────── */

#deep-dive {
  padding-top: 2.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 1rem;
}

.results-screen-title {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #0d1f33;
  margin-bottom: 2rem;
  text-align: center;
}

/* ── 20. SNAPSHOT CARDS ──────────────────────────────────── */

.planner-snapshot {
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.snapshot-card {
  padding: 1.5rem 1.25rem;
  border-radius: 16px;
  gap: 0.4rem;
  border: 1.5px solid rgba(0, 0, 0, 0.07);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.07);
}

.snapshot-value {
  font-size: 1.55rem;
  letter-spacing: -0.025em;
}

/* ── 21. RETIREMENT SNAPSHOT ─────────────────────────────── */

.retirement-snapshot {
  border-radius: 20px;
  padding: 2rem;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: #fafcfb;
  margin-bottom: 2rem;
}

.rsn-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.32);
  margin-bottom: 1rem;
  display: block;
}

.rsn-hero-value {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.rsn-story {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.58);
  margin: 1.25rem 0 1.5rem;
  max-width: 560px;
}

/* ── 22. OPTIONAL ACCORDIONS — refined ──────────────────── */

.optional-pension-details {
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  background: rgba(0, 0, 0, 0.01);
}

.optional-pension-summary {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.42);
  font-weight: 600;
}

/* ── 23. PARTNER SECTION ─────────────────────────────────── */

.partner-section {
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 2rem;
  background: rgba(99, 102, 241, 0.025);
  border: 1px solid rgba(99, 102, 241, 0.1);
  border-inline-start: 3px solid #6366f1;
}

.partner-toggle-btn {
  border-radius: 12px;
  padding: 0.75rem 1.375rem;
  font-size: 0.85rem;
}

/* ── 24. PERSON HEADER ───────────────────────────────────── */

.person-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.78rem;
}

.person-title {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.planner-person-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── 25. NAME FIELD ──────────────────────────────────────── */

.planner-name-field {
  background: rgba(15, 185, 168, 0.04);
  border-color: rgba(15, 185, 168, 0.14);
  border-radius: 16px;
  padding: 1.375rem 1.5rem;
  margin-bottom: 2rem;
}

.planner-name-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.38);
  margin-bottom: 0.5rem;
}

.planner-name-input {
  font-size: 1.2rem;
  border-radius: 10px;
  border-color: rgba(0, 0, 0, 0.1);
  padding: 0.625rem 0.875rem;
}

.planner-name-hint {
  font-size: 0.7rem;
  opacity: 0.5;
  margin-top: 0.35rem;
}

/* ── 25b. GLOBAL INPUT POLISH ──────────────────────────────── */

.planner-panel input::placeholder,
.planner-panel select::placeholder {
  color: rgba(0, 0, 0, 0.28);
}

.planner-panel input:focus-visible,
.planner-panel select:focus-visible {
  outline: none;
  border-color: var(--brand-accent, #0fb9a8);
  box-shadow: 0 0 0 3px rgba(15, 185, 168, 0.14);
}

.slider-number-input {
  min-height: 44px;
  width: 5rem;
}

/* ── 26. FIELD LABELS + CHILDREN ─────────────────────────── */

.planner-field-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.36);
  margin-bottom: 0.75rem;
}

.children-count-btn {
  border-radius: var(--radius-md);
  min-width: 48px;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 700;
  transition: all 0.18s ease;
}

/* ── 27. MOBILE REFINEMENTS ──────────────────────────────── */

@media (max-width: 768px) {
  .planner-panel .calc-card {
    padding: 1.75rem 1.25rem;
    border-radius: 16px;
  }

  .planner-hero {
    margin-bottom: 2rem;
  }

  .planner-title {
    font-size: 1.85rem;
  }

  .wow-numbers {
    gap: 0.625rem;
  }

  .wow-number-card {
    padding: 1.125rem 0.625rem;
    border-radius: 12px;
  }

  .wow-number-value {
    font-size: 1.5rem;
  }

  .wow-number-label {
    font-size: 0.6rem;
  }

  .wow-chart-wrap {
    height: 200px;
    padding: 0.75rem;
  }

  .wow-summary-sentence {
    font-size: 0.92rem;
    padding: 1rem 1.25rem;
  }

  .wow-share-btn,
  .wow-deep-dive-btn {
    padding: 0.875rem 1.25rem;
    font-size: 0.85rem;
  }

  .lifestyle-tile {
    padding: 1.125rem 0.5rem 1rem;
  }

  .lifestyle-tile-icon {
    font-size: 1.65rem;
  }

  .slider-value-display {
    font-size: 1.65rem;
  }

  .slider-row {
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
  }

  .insight-number {
    font-size: 2rem;
  }

  .planner-panel .calc-title {
    font-size: 1.35rem;
  }

  .snapshot-value {
    font-size: 1.3rem;
  }

  .planner-nav-btns {
    margin-top: 2rem;
  }

  .step-insight-card {
    padding: 1.25rem;
  }
}

@media (max-width: 480px) {
  .planner-main {
    padding: 1.5rem 1rem 2rem;
  }

  .planner-panel .calc-card {
    padding: 1.5rem 1.125rem;
    border-radius: 14px;
  }

  .planner-title {
    font-size: 1.65rem;
  }

  .trust-badge {
    font-size: 0.65rem;
    padding: 0 0.6rem;
  }

  .wow-numbers {
    gap: 0.375rem;
  }

  .wow-number-card {
    padding: 0.875rem 0.375rem;
    border-radius: 12px;
  }

  .wow-number-value {
    font-size: 1.2rem;
  }

  .lifestyle-tiles {
    gap: 0.625rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .income-chip {
    font-size: 0.78rem;
    padding: 0.45rem 0.875rem;
    min-height: 34px;
  }

  .goal-chip {
    font-size: 0.78rem;
    padding: 0.4rem 0.875rem;
    min-height: 34px;
  }

  .planner-nav-btns {
    gap: 0.625rem;
    align-items: stretch;
  }

  /* Hide sticky summary on small screens */
  .planner-sticky-summary {
    display: none !important;
  }
}

/* ── 27b. TOUCH ACTIVE STATES (no hover on mobile) ─────── */

@media (hover: none) {
  .lifestyle-tile:active,
  .income-chip:active,
  .expense-cat-btn:active,
  .goal-chip:active {
    transform: scale(0.97);
  }
}

/* ── 27c. STEP NAV OVERFLOW HINT ───────────────────────── */

@media (max-width: 620px) {
  .planner-steps {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%);
    mask-image: linear-gradient(to right, transparent 0%, #000 12%);
  }
}

/* ── 27d. NAV BUTTONS — equal height ────────────────────── */

.planner-nav-btns {
  align-items: stretch;
}

/* ── 28. REDUCED MOTION ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lifestyle-tile,
  .lifestyle-tile:hover,
  .lifestyle-tile.active,
  .income-chip,
  .expense-cat-btn,
  .wow-share-btn,
  .wow-deep-dive-btn {
    transition: none;
    transform: none;
  }
}

/* ── 29. WOW GAP CARD — hero prominence ─────────────────── */

/* Placed first in DOM (RTL: rightmost), scaled up to command attention */
.wow-gap--hero {
  flex: 1.4 1 0;
  background: linear-gradient(135deg, #0d1f33 0%, #122b45 100%) !important;
  border-color: rgba(15, 185, 168, 0.35) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.18),
    0 20px 48px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(15, 185, 168, 0.12) !important;
}

.wow-gap--hero .wow-number-label {
  color: rgba(255, 255, 255, 0.52) !important;
}

.wow-gap--hero .wow-number-value {
  color: #fff !important;
  font-size: clamp(2rem, 5vw, 3.25rem) !important;
}

/* ── 30. STEP 2 YEARS TAGLINE — live motivational hint ──── */

.step2-retire-spotlight {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light, rgba(7, 30, 54, 0.06));
}

.step2-years-tagline {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gold, #c9a84c);
  letter-spacing: 0.01em;
  text-align: center;
}

/* ── 31. WOW SCREEN CTA BLOCK (top position) ─────────────── */

.sim-cta-block--wow {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #f0fdfc 0%, #e8faf8 100%);
  border: 1.5px solid rgba(15, 185, 168, 0.22);
  box-shadow:
    0 2px 8px rgba(15, 185, 168, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.05);
}

.sim-cta-block--wow .sim-cta-title {
  color: #0d1f33;
}

.sim-cta-block--wow .sim-cta-sub {
  color: rgba(0, 0, 0, 0.52);
}

/* ── 32. ASSETS ZERO STATE HINT ─────────────────────────── */

.assets-networth-display:empty::before,
.assets-networth-display[data-empty="true"]::before {
  content: 'סמנו נכסים למעלה כדי לחשב שווי נטו';
  display: block;
  text-align: center;
  padding: 1.5rem;
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.32);
  font-style: italic;
}

/* ── 33. SLIDER TRACK-WRAP RTL ALIGNMENT FIX ─────────────── */

/* Prevent range input from overflowing on small screens */
.slider-track-wrap .slider-input {
  min-width: 0;
}

/* ── 34. STEP MOMENTUM — entry pulse ─────────────────────── */

@keyframes stepEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.planner-panel.active .calc-card {
  animation: stepEnter 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── 35. RESULTS SCREEN TITLE ────────────────────────────── */

.results-screen-title {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #0d1f33;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  line-height: 1.25;
}

/* ═══════════════════════════════════════════════════════════
   PASS 3 + PASS 4 — FULL PREMIUM TRANSFORMATION
   Target: match calculator quality × visual impact × emotional clarity
   ═══════════════════════════════════════════════════════════ */

/* ── 36. WOW SUMMARY SENTENCE — verdict card (now before chart) ── */

.wow-summary-sentence {
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 600;
  color: #0d1f33;
  padding: 1.125rem 1.5rem;
  border-radius: 16px;
  background: rgba(7, 30, 54, 0.04);
  border: 1.5px solid rgba(7, 30, 54, 0.08);
  margin-bottom: 1.5rem;
  text-align: center;
  border-top: none;
  border-bottom: none;
}

.wow-summary-sentence[data-tone="surplus"] {
  background: rgba(15, 185, 168, 0.07);
  border-color: rgba(15, 185, 168, 0.25);
  color: #0c5c55;
}

.wow-summary-sentence[data-tone="gap-large"] {
  background: rgba(231, 76, 60, 0.06);
  border-color: rgba(231, 76, 60, 0.18);
  color: #7a1a1a;
}

.wow-summary-sentence[data-tone="gap-small"] {
  background: rgba(243, 156, 18, 0.07);
  border-color: rgba(243, 156, 18, 0.2);
  color: #6b3d0b;
}

/* ── 37. LIFE DIAGNOSIS — upgrade to insight-item style ──── */

.life-diagnosis {
  margin-bottom: 2.5rem;
}

.diagnosis-top {
  margin-bottom: 1.5rem;
}

.diagnosis-badge {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(15, 185, 168, 0.1);
  color: var(--brand-teal, #0b6b63);
  border: 1.5px solid rgba(15, 185, 168, 0.25);
  margin-bottom: 0.75rem;
}

.diagnosis-headline {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0d1f33;
  line-height: 1.2;
  margin: 0;
}

.diagnosis-reality,
.diagnosis-summary {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.56);
  margin-bottom: 1rem;
}

.diagnosis-details {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

/* Each diagnosis row = calc-insight-item style */
.diagnosis-row {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.55;
  border: 1px solid transparent;
  transition: background 0.2s ease;
}

.diag-row-icon {
  flex-shrink: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  margin-top: 0.05em;
}

.diag-row-body {
  flex: 1;
  min-width: 0;
}

.diag-row-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  opacity: 0.65;
}

.diag-row-text {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.6;
}

/* Gap row → red insight */
.diagnosis-row--gap {
  background: rgba(231, 76, 60, 0.07);
  border-color: rgba(231, 76, 60, 0.2);
  color: #7a1a1a;
}
.diagnosis-row--gap .diag-row-label { color: #9b2418; }

/* No-change row → yellow warning */
.diagnosis-row--nochange {
  background: rgba(243, 156, 18, 0.07);
  border-color: rgba(243, 156, 18, 0.22);
  color: #7a4f00;
}
.diagnosis-row--nochange .diag-row-label { color: #7a4f00; }

/* Improved row → green success */
.diagnosis-row--improved {
  background: rgba(39, 174, 96, 0.07);
  border-color: rgba(39, 174, 96, 0.2);
  color: #1a6b35;
}
.diagnosis-row--improved .diag-row-label { color: #1a6b35; }

/* Next step row → teal action */
.diagnosis-row--next {
  background: rgba(11, 107, 99, 0.07);
  border-color: rgba(11, 107, 99, 0.2);
  color: #0b4a44;
}
.diagnosis-row--next .diag-row-label { color: var(--brand-teal, #0b6b63); }

/* ── 38. LIFESTYLE VS REALITY — premium comparison card ──── */

.lifestyle-vs-reality {
  border-radius: 20px;
  padding: 2rem;
  background: #fff;
  border: 1.5px solid rgba(7, 30, 54, 0.09);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.04);
  margin-bottom: 2rem;
}

.lvr-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.lvr-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.lvr-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0d1f33;
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}

.lvr-sub {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 500;
}

.lvr-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
  margin-bottom: 1.75rem;
}

.lvr-card {
  padding: 1.1rem 1rem;
  border-radius: 12px;
  background: rgba(7, 30, 54, 0.03);
  border: 1.5px solid rgba(7, 30, 54, 0.07);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.lvr-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.42);
}

.lvr-card-value {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-family: var(--font-heading, 'Heebo', sans-serif);
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.lvr-card-hint {
  font-size: 0.72rem;
  color: rgba(0, 0, 0, 0.38);
}

.lvr-card--target { background: rgba(15, 185, 168, 0.06); border-color: rgba(15, 185, 168, 0.18); }
.lvr-card--target .lvr-card-value { color: var(--brand-teal, #0b6b63); }

.lvr-card--current { background: rgba(7, 30, 54, 0.04); border-color: rgba(7, 30, 54, 0.09); }
.lvr-card--current .lvr-card-value { color: #0d1f33; }

.lvr-card--retire { background: rgba(99, 102, 241, 0.05); border-color: rgba(99, 102, 241, 0.15); }
.lvr-card--retire .lvr-card-value { color: #3730a3; }

.lvr-card--gap {
  grid-column: 1 / -1;
  background: rgba(231, 76, 60, 0.06);
  border-color: rgba(231, 76, 60, 0.2);
}
.lvr-card--gap .lvr-card-value { color: #c0392b; }
.lvr-card--gap.lvr-gap--surplus { background: rgba(39, 174, 96, 0.07); border-color: rgba(39, 174, 96, 0.2); }
.lvr-card--gap.lvr-gap--surplus .lvr-card-value { color: #1a6b35; }
.lvr-card--gap.lvr-gap--deficit { background: rgba(231, 76, 60, 0.07); border-color: rgba(231, 76, 60, 0.2); }
.lvr-card--gap.lvr-gap--deficit .lvr-card-value { color: #c0392b; }

/* Coverage bar */
.lvr-bar-section {
  margin-top: 0.5rem;
}

.lvr-bar-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.48);
  margin-bottom: 0.625rem;
}

.lvr-bar-pct {
  font-size: 1rem;
  font-weight: 900;
  color: var(--brand-teal, #0b6b63);
  letter-spacing: -0.02em;
}

.lvr-bar-track {
  width: 100%;
  height: 10px;
  background: rgba(7, 30, 54, 0.06);
  border-radius: 999px;
  overflow: visible;
  position: relative;
}

.lvr-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-teal, #0b6b63) 0%, var(--brand-accent, #0fb9a8) 100%);
  max-width: 100%;
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lvr-bar-target-line {
  position: absolute;
  top: -3px;
  bottom: -3px;
  right: 30%; /* 70% mark in RTL */
  width: 2px;
  background: #f59e0b;
  border-radius: 2px;
}

.lvr-bar-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: rgba(0, 0, 0, 0.3);
  margin-top: 0.4rem;
}

.lvr-scale-mid {
  color: #f59e0b;
  font-weight: 700;
}

/* Bar fill state variants — set by JS */
.lvr-bar-fill.lvr-fill--good {
  background: linear-gradient(90deg, #27ae60 0%, #2ecc71 100%);
}
.lvr-bar-fill.lvr-fill--fair {
  background: linear-gradient(90deg, #f39c12 0%, #f7b731 100%);
}
.lvr-bar-fill.lvr-fill--poor {
  background: linear-gradient(90deg, #e74c3c 0%, #e55039 100%);
}

.lvr-action-line {
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  background: rgba(7, 30, 54, 0.04);
  font-size: 0.88rem;
  font-weight: 600;
  color: #0d1f33;
  line-height: 1.6;
  border-inline-start: 3px solid var(--brand-accent, #0fb9a8);
}

/* ── 39. PLANNER SNAPSHOT — 4 key metrics, now visible ────── */

.planner-snapshot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
  margin-bottom: 2rem;
}

.snapshot-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 1rem;
  border-radius: 16px;
  background: #fff;
  border: 1.5px solid rgba(7, 30, 54, 0.07);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  gap: 0.35rem;
}

.snapshot-icon {
  font-size: 0.9rem;
  color: var(--brand-accent, #0fb9a8);
  margin-bottom: 0.25rem;
  opacity: 0.7;
}

.snapshot-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.38);
}

.snapshot-value {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0d1f33;
  font-family: var(--font-heading, 'Heebo', sans-serif);
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.snapshot-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 0.1rem;
}

/* Snap specific colors */
#snap-networth .snapshot-value { color: var(--brand-teal, #0b6b63); }
#snap-surplus .snapshot-value { color: #0d1f33; }
#snap-pension .snapshot-value { color: #3730a3; }
#snap-years .snapshot-value { color: #0d1f33; }

/* ── 40. GAP SECTION — retirement coverage ───────────────── */

.planner-gap-section {
  margin-bottom: 2.5rem;
  padding: 2rem;
  border-radius: 20px;
  background: rgba(7, 30, 54, 0.02);
  border: 1.5px solid rgba(7, 30, 54, 0.07);
}

.planner-gap-section .planner-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
  margin-bottom: 1.5rem;
}

.gap-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.gap-card {
  padding: 1.25rem 1rem;
  border-radius: 12px;
  background: rgba(7, 30, 54, 0.03);
  border: 1.5px solid rgba(7, 30, 54, 0.07);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.gap-card-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.38);
}

.gap-card-value {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0d1f33;
  font-family: var(--font-heading, 'Heebo', sans-serif);
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.gap-card-hint {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.38);
}

.gap-card--pension { background: rgba(99, 102, 241, 0.04); border-color: rgba(99, 102, 241, 0.12); }
.gap-card--pension .gap-card-value { color: #3730a3; }
.gap-card--result { background: rgba(15, 185, 168, 0.06); border-color: rgba(15, 185, 168, 0.18); }
.gap-card--result .gap-card-value { color: var(--brand-teal, #0b6b63); }

/* Gap result state variants */
.gap-result--good  { background: rgba(16, 185, 129, 0.06) !important; border-color: rgba(16, 185, 129, 0.2) !important; }
.gap-result--good  .gap-card-value { color: #065f46 !important; }
.gap-result--fair  { background: rgba(245, 158, 11, 0.06) !important; border-color: rgba(245, 158, 11, 0.2) !important; }
.gap-result--fair  .gap-card-value { color: #92400e !important; }
.gap-result--poor  { background: rgba(239, 68, 68, 0.06) !important; border-color: rgba(239, 68, 68, 0.2) !important; }
.gap-result--poor  .gap-card-value { color: #991b1b !important; }

.gap-bar-wrap { margin-top: 1rem; }

.gap-bar-track {
  width: 100%;
  height: 10px;
  background: rgba(7, 30, 54, 0.06);
  border-radius: 999px;
  overflow: visible;
  position: relative;
}

.gap-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-teal) 0%, var(--brand-accent, #0fb9a8) 100%);
  max-width: 100%;
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gap-fill--good { background: linear-gradient(90deg, #059669, #10b981) !important; }
.gap-fill--fair { background: linear-gradient(90deg, #d97706, #f59e0b) !important; }
.gap-fill--poor { background: linear-gradient(90deg, #dc2626, #ef4444) !important; }

.gap-bar-target {
  position: absolute;
  top: -4px;
  bottom: -4px;
  right: 30%;
  width: 2.5px;
  background: #f59e0b;
  border-radius: 2px;
}

.gap-bar-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: rgba(0, 0, 0, 0.32);
  margin-top: 0.5rem;
}

.gap-target-label {
  font-weight: 700;
  color: #f59e0b;
  font-size: 0.7rem;
}

/* ── 41. HEALTH SCORE — premium ring ─────────────────────── */

.planner-health-section {
  margin-bottom: 2.5rem;
  padding: 2rem;
  border-radius: 20px;
  background: rgba(7, 30, 54, 0.02);
  border: 1.5px solid rgba(7, 30, 54, 0.07);
}

.health-score-wrap {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.health-score-ring {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  position: relative;
}

.health-ring-bg {
  fill: none;
  stroke: rgba(7, 30, 54, 0.07);
  stroke-width: 10;
}

.health-ring-fill {
  fill: none;
  stroke: var(--brand-accent, #0fb9a8);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dasharray 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.health-score-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.health-num {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #0d1f33;
  font-family: var(--font-heading, 'Heebo', sans-serif);
  line-height: 1;
}

.health-sub {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.38);
  letter-spacing: 0.02em;
}

.health-breakdown {
  flex: 1;
  min-width: 0;
}

.health-breakdown-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.52);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.health-bar-row {
  display: grid;
  grid-template-columns: 7rem 1fr 3rem;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.hb-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.52);
  white-space: nowrap;
}

.hb-track {
  height: 6px;
  background: rgba(7, 30, 54, 0.07);
  border-radius: 999px;
  overflow: hidden;
}

.hb-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-teal) 0%, var(--brand-accent) 100%);
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hb-pts {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.38);
  text-align: start;
}

/* ── 42. RESULTS DETAIL ROWS — now visible from legacy area ─ */

.calc-result .result-row {
  animation: resultReveal 0.35s ease both;
}

.calc-result .result-row:nth-child(1) { animation-delay: 0.04s; }
.calc-result .result-row:nth-child(2) { animation-delay: 0.09s; }
.calc-result .result-row:nth-child(3) { animation-delay: 0.14s; }
.calc-result .result-row:nth-child(4) { animation-delay: 0.19s; }
.calc-result .result-row:nth-child(5) { animation-delay: 0.24s; }
.calc-result .result-row:nth-child(6) { animation-delay: 0.29s; }

/* ── 43. SURPLUS MODE PANEL — premium ────────────────────── */

.surplus-mode-panel {
  padding: 2rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(15, 185, 168, 0.07) 0%, rgba(11, 107, 99, 0.09) 100%);
  border: 1.5px solid rgba(15, 185, 168, 0.22);
  box-shadow: 0 4px 16px rgba(15, 185, 168, 0.08);
  margin-bottom: 2rem;
}

.surplus-mode-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.surplus-mode-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.surplus-mode-title {
  font-size: 1rem;
  font-weight: 800;
  color: #0c5c55;
  margin-bottom: 0.35rem;
  line-height: 1.35;
}

.surplus-mode-sub {
  font-size: 0.85rem;
  color: rgba(12, 92, 85, 0.72);
  line-height: 1.55;
}

.surplus-mode-amount {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.surplus-amount-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(12, 92, 85, 0.6);
}

.surplus-amount-val {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #0c5c55;
  font-family: var(--font-heading, 'Heebo', sans-serif);
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.surplus-suggestions-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(12, 92, 85, 0.55);
  margin-bottom: 0.875rem;
}

/* ── 44. GOALS RESULTS — premium grid ────────────────────── */

.planner-goals-results {
  margin-bottom: 2rem;
}

.goals-results-grid {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* ── 45. SEPARATE OWNERSHIP RESULTS ─────────────────────── */

.separate-ownership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.so-block {
  padding: 1.25rem;
  border-radius: 16px;
  background: rgba(7, 30, 54, 0.02);
  border: 1.5px solid rgba(7, 30, 54, 0.07);
}

.so-block--mine { border-color: rgba(15, 185, 168, 0.2); background: rgba(15, 185, 168, 0.04); }
.so-block--partner { border-color: rgba(99, 102, 241, 0.18); background: rgba(99, 102, 241, 0.03); }
.so-block--household { border-color: rgba(7, 30, 54, 0.1); background: rgba(7, 30, 54, 0.03); }

.so-block-name {
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.875rem;
  color: rgba(0, 0, 0, 0.52);
}

.so-block-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.so-label {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.45);
}

.so-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0d1f33;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── 46. PLANNER DISCLAIMER — clean, subtle ──────────────── */

.planner-disclaimer-box {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  background: rgba(7, 30, 54, 0.03);
  border: 1px solid rgba(7, 30, 54, 0.08);
}

.planner-disclaimer-box p {
  font-size: 0.78rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.4);
  margin: 0;
}

.planner-disclaimer-box strong {
  color: rgba(0, 0, 0, 0.52);
}

/* ── 47. SECTION DIVIDERS — consistent rhythm ────────────── */

.planner-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.32);
  margin-bottom: 1.25rem;
  margin-top: 2rem;
}

/* ── 48. RESULTS ACCORDION — premium refinement ─────────── */

.results-accordion {
  border-radius: 16px;
  border-color: rgba(7, 30, 54, 0.08);
  margin-bottom: 1rem;
  overflow: hidden;
}

.accordion-summary {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.52);
  padding: 1rem 1.25rem;
  background: rgba(7, 30, 54, 0.025);
  cursor: pointer;
  user-select: none;
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.18s, color 0.18s;
}

.accordion-summary::after {
  content: '▾';
  font-size: 0.75rem;
  opacity: 0.45;
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-inline-start: auto;
  padding-left: 0.75rem;
}

details.results-accordion[open] .accordion-summary {
  color: var(--brand-teal, #0b6b63);
  background: rgba(11, 107, 99, 0.05);
}

details.results-accordion[open] .accordion-summary::after {
  transform: rotate(180deg);
}

.accordion-summary:hover {
  background: rgba(7, 30, 54, 0.05);
  color: rgba(0, 0, 0, 0.7);
}

.accordion-content {
  padding: 1.25rem 1.25rem 1rem;
}

/* ── 49. RETIREMENT SNAPSHOT — stronger visual ───────────── */

.retirement-snapshot {
  background: linear-gradient(135deg, #f7f9fc 0%, #f0fafb 100%);
  border-color: rgba(11, 107, 99, 0.14);
  box-shadow: 0 4px 20px rgba(11, 107, 99, 0.06);
}

.rsn-hero {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.rsn-hero-value {
  color: #0b4a44;
}

.rsn-hero-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.45);
}

.rsn-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
  margin-top: 1.5rem;
}

.rsn-stat {
  padding: 0.875rem 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(11, 107, 99, 0.1);
}

.rsn-stat-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.38);
  margin-bottom: 0.35rem;
}

.rsn-stat-value {
  font-size: 1.2rem;
  font-weight: 900;
  color: #0d1f33;
  letter-spacing: -0.025em;
  direction: ltr;
  unicode-bidi: isolate;
}

.rsn-action {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  background: rgba(11, 107, 99, 0.07);
  font-size: 0.88rem;
  font-weight: 600;
  color: #0b4a44;
  line-height: 1.6;
  border-inline-start: 3px solid var(--brand-accent, #0fb9a8);
}

/* ── 50. MICRO SNAPSHOT — compact 3-column ───────────────── */

.result-micro-snapshot {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 1.5rem;
  background: rgba(7, 30, 54, 0.025);
  border-radius: 12px;
  border: 1.5px solid rgba(7, 30, 54, 0.07);
  overflow: hidden;
}

.rms-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.75rem;
  gap: 0.25rem;
  text-align: center;
}

.rms-item + .rms-item {
  border-inline-start: 1px solid rgba(7, 30, 54, 0.06);
}

.rms-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
}

.rms-value {
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #0d1f33;
  font-family: var(--font-heading, 'Heebo', sans-serif);
  direction: ltr;
  unicode-bidi: isolate;
}

.rms-sep {
  display: none; /* replaced by border-right on rms-item */
}

/* ── 51. RESULT INSIGHT LINE — strong verdict ────────────── */

.result-insight-line {
  display: block;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.65;
  background: rgba(7, 30, 54, 0.04);
  border: 1.5px solid rgba(7, 30, 54, 0.08);
  color: rgba(0, 0, 0, 0.7);
  border-inline-start: 4px solid var(--brand-accent, #0fb9a8);
}

/* ── 52. WOW NUMBERS — proportional gap card ─────────────── */

/* Gap is 42%, need and have split the rest */
.wow-numbers {
  display: flex;
}
.wow-gap--hero {
  flex: 1.55 1 0;
}
.wow-need,
.wow-have {
  flex: 1 1 0;
}

/* Labels clarification */
.wow-need .wow-number-label::before  { content: 'יעד הפרישה: '; }
.wow-have .wow-number-label::before  { content: 'הכנסה צפויה: '; }

/* ── 53. CALC HUB — consistent with main site ────────────── */

.planner-calc-hub {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(7, 30, 54, 0.06);
}

.planner-calc-hub .calc-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  margin-top: 1.25rem;
}

.planner-calc-hub .calc-hub-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
  background: rgba(7, 30, 54, 0.02);
  border-radius: 16px;
  border: 1.5px solid rgba(7, 30, 54, 0.07);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.planner-calc-hub .calc-hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(7, 30, 54, 0.1);
  border-color: rgba(15, 185, 168, 0.3);
}

/* Hub cards that use legacy .hub-card-* classes */
.hub-card-icon { font-size: 1.6rem; margin-bottom: 0.625rem; display: block; }
.hub-card-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0d1f33;
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}
.hub-card-desc {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.5;
  flex: 1;
}

/* ── 54. RESPONSIVE UPGRADE — new components ─────────────── */

@media (max-width: 768px) {
  .lvr-compare-grid {
    grid-template-columns: 1fr 1fr;
  }
  .lvr-card--gap {
    grid-column: 1 / -1;
  }
  .gap-cards {
    grid-template-columns: 1fr;
  }
  .planner-snapshot {
    grid-template-columns: repeat(2, 1fr);
  }
  .rsn-stats {
    grid-template-columns: 1fr;
  }
  .health-score-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .health-bar-row {
    grid-template-columns: 6rem 1fr 2.5rem;
  }
  .separate-ownership-grid {
    grid-template-columns: 1fr;
  }
  .planner-calc-hub .calc-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .result-micro-snapshot {
    flex-direction: column;
  }
  .rms-item + .rms-item {
    border-inline-start: none;
    border-top: 1px solid rgba(7, 30, 54, 0.06);
  }
  .wow-numbers {
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .planner-snapshot {
    grid-template-columns: 1fr 1fr;
  }
  .planner-calc-hub .calc-hub-grid {
    grid-template-columns: 1fr;
  }
  .gap-cards {
    grid-template-columns: 1fr;
  }
  .lifestyle-vs-reality {
    padding: 1.25rem;
  }
  .lvr-compare-grid {
    grid-template-columns: 1fr;
  }
  .lvr-card--gap {
    grid-column: unset;
  }
  .health-bar-row {
    grid-template-columns: 5rem 1fr 2.5rem;
  }
  .slider-input::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, #fff 6px, var(--slider-track-active, #0fb9a8) 6px);
    margin-top: calc(-24px / 2 + var(--slider-track-height, 6px) / 2);
  }
  .slider-input::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, #fff 6px, var(--slider-track-active, #0fb9a8) 6px);
  }
  .slider-number-input {
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════
   APPLE/TESLA UX UPGRADE
   ═══════════════════════════════════════════════════════════ */

/* ── 1. WOW Screen Hero Number ─────────────────────────── */
.wow-hero-number {
  text-align: center;
  padding: 2.5rem 1rem 1.5rem;
}

.wow-hero-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
}

.wow-hero-value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 8vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  transition: color 0.4s ease;
}

/* Color coding by tone */
.wow-screen[data-tone="surplus"] .wow-hero-value,
.wow-number-card[data-tone="surplus"] .wow-hero-value {
  color: #2ecc71;
}
.wow-screen[data-tone="gap-large"] .wow-hero-value {
  color: #e74c3c;
}
.wow-screen[data-tone="gap-small"] .wow-hero-value {
  color: #e8a838;
}

/* Personal sentence */
.wow-personal-sentence {
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
  max-width: 520px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}
.wow-personal-sentence[data-tone="surplus"] {
  color: rgba(46, 204, 113, 0.85);
}
.wow-personal-sentence[data-tone="gap-large"] {
  color: rgba(231, 76, 60, 0.85);
}

/* Smaller supporting numbers */
.wow-screen .wow-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 400px;
  margin: 0 auto 1.5rem;
}
.wow-screen .wow-number-card {
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.wow-screen .wow-number-label {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
  display: block;
  margin-bottom: 0.3rem;
}
.wow-screen .wow-number-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

/* ── 2. Celebration Animations ─────────────────────────── */
@keyframes celebratePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes celebrateGlow {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.3); }
  70% { box-shadow: 0 0 0 12px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

@keyframes surplusFlash {
  0% { background-color: transparent; }
  15% { background-color: rgba(46, 204, 113, 0.08); }
  100% { background-color: transparent; }
}

.celebrate-surplus {
  animation: celebratePulse 0.5s ease, surplusFlash 1.5s ease;
}

.celebrate-milestone {
  animation: celebrateGlow 0.8s ease;
  border-color: rgba(46, 204, 113, 0.4) !important;
}

/* ── 3. Health Score — 4 ring layout ───────────────────── */
.health-rings-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.health-mini-ring {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.health-mini-ring:hover {
  transform: scale(1.08);
}

.health-mini-ring svg {
  width: 64px;
  height: 64px;
}

.health-mini-ring .ring-label {
  display: block;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.3rem;
}

.health-mini-ring .ring-score {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
}

@media (max-width: 480px) {
  .health-mini-ring svg {
    width: 52px;
    height: 52px;
  }
  .health-rings-row {
    gap: 0.6rem;
  }
}

/* ── 4. Life Graph Hero Mode on Step 7 ─────────────────── */
#step-6 .life-graph-container {
  margin: 2rem -1rem 1.5rem;
  padding: 1.5rem 1rem;
  border-radius: var(--radius-lg);
  background: rgba(11, 107, 99, 0.04);
  border: 1px solid rgba(11, 107, 99, 0.12);
}

#step-6 .life-graph-container canvas {
  height: 220px !important;
}

#step-6 .life-graph-title {
  font-size: 1rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  #step-6 .life-graph-container canvas {
    height: 300px !important;
  }
}

/* ── 5. Financial Narrative ─────────────────────────────── */
.financial-narrative {
  max-width: 600px;
  margin: 1.5rem auto 2rem;
  padding: 1.5rem 1.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-inline-start: 3px solid var(--brand-accent);
}

.narrative-text {
  font-size: 1rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  direction: rtl;
}

/* Mobile-first refinements */

/* ── Stepper: minimal on mobile ─────────────────────────── */
@media (max-width: 600px) {
  /* Hide step labels on mobile — H2 in each panel provides context */
  .planner-step .step-label {
    display: none;
  }
  /* Smaller step numbers */
  .planner-steps {
    gap: 0;
    justify-content: center;
    padding: 0.5rem 0;
  }
  .planner-step {
    padding: 0.5rem 0.4rem;
    min-width: unset;
  }
  .step-num {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
  }
  .step-track-line {
    flex: 0 1 12px;
    min-width: 8px;
  }
}

/* ── Sticky summary: hide on mobile for steps 1-6 ──────── */
@media (max-width: 600px) {
  .planner-sticky-summary {
    display: none !important;
  }
  /* Show it only when step-7 is active */
  .planner-main[data-step="6"] .planner-sticky-summary,
  body.planner-step-7 .planner-sticky-summary {
    display: block !important;
  }
}

/* ── Slider: cleaner mobile layout ─────────────────────── */
@media (max-width: 600px) {
  /* Hide number input on mobile — value shown in slider-value-display */
  .step2-sliders .slider-number-input {
    display: none;
  }
  /* Make slider value display more prominent */
  .step2-sliders .slider-value-display {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-accent);
  }
  /* Touch target handled by padding in base slider styles */
}

/* ── Bottom CTA block — same style as main CTA ─────────── */
.sim-cta-block--bottom {
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 2rem;
}

/* Hide inline CTA on mobile — the fixed mobile CTA bar handles it */
@media (max-width: 768px) {
  .sim-cta-block--bottom {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   REFINEMENT LAYER — hierarchy, spacing, personality
   Principle: minimal structure, not hidden system
   ═══════════════════════════════════════════════════════════ */

/* ── UNIFIED SLIDER SYSTEM ─────────────────────────────── */
/* Single source of truth: all planner sliders look identical */

.slider-row {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.slider-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.75rem;
}

.slider-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #4a5a6a);
  letter-spacing: 0.01em;
}

/* VALUE DISPLAY — always same size, everywhere */
.slider-value-display {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--brand-navy, #071e36);
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
  line-height: 1;
  direction: ltr;
}

/* REMOVE the Step 3 exception — unified now */
#income-slider-area .slider-value-display,
#expense-slider-area .slider-value-display {
  font-size: 1.35rem;
  font-weight: 800;
}

.slider-track-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.slider-track-wrap .slider-input { flex: 1; }

/* NUMBER INPUT — consistent across all contexts */
.slider-number-input {
  width: 5rem;
  padding: 0.5rem 0.4rem;
  border: 1.5px solid rgba(8, 34, 61, 0.1);
  border-radius: 12px;
  font-size: 0.95rem;
  text-align: center;
  font-weight: 600;
  color: var(--text-primary, #071e36);
  background: #f8fafb;
  flex-shrink: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.slider-number-input:focus {
  outline: none;
  border-color: var(--brand-accent, #0fb9a8);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15, 185, 168, 0.12);
}

/* SLIDER HINT — whisper level */
.slider-hint {
  font-size: 0.72rem;
  color: rgba(0, 0, 0, 0.3);
  margin: 0.25rem 0 0;
  line-height: 1.5;
}

/* FLAT SLIDER (Assets) — accordion with unified tokens */
.flat-slider-row {
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 0.35rem;
  transition: border-color 0.15s ease;
}
.flat-slider-row.is-expanded {
  border-color: rgba(15, 185, 168, 0.15);
}
.flat-slider-row .slider-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  padding: 0.5rem 0.75rem;
}
.flat-slider-row .slider-value-display {
  font-size: 1.35rem; /* same as all other sliders */
}
.flat-slider-row:not(.is-expanded) .slider-value-display {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-teal, #0b6b63);
}
.slider-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.15s ease, padding 0.2s ease;
  padding: 0 1rem;
}
.flat-slider-row.is-expanded .slider-body {
  max-height: 80px;
  opacity: 1;
  padding: 0.25rem 1rem 0.75rem;
}
.slider-collapse-arrow {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
  margin-inline-end: auto;
}
.flat-slider-row.is-expanded .slider-collapse-arrow {
  transform: rotate(-90deg);
  color: rgba(0, 0, 0, 0.3);
}

/* ── 1. STICKY SUMMARY — architectural hide ──────────────── */
.planner-sticky-summary {
  display: none !important;
}

/* ── 2. STEP PANELS ──────────────────────────────────────── */
.planner-panel .calc-card {
  padding: 2.5rem;
}
@media (max-width: 600px) {
  .planner-panel .calc-card {
    padding: 1.75rem 1.25rem;
  }
}

/* ── 3. TYPOGRAPHY — 4 tiers: title, label, body, whisper ── */

/* Title: handled by .calc-title above */

/* Label tier: 0.85rem / 600 */
.planner-panel .calc-desc {
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
  color: rgba(0, 0, 0, 0.42);
}
.planner-field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}
.assets-section-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 0.75rem;
}

/* Whisper tier: 0.72rem / 400–500 */
.planner-name-hint {
  font-size: 0.72rem;
  color: rgba(0, 0, 0, 0.48);
  display: block;
  margin-top: 0.35rem;
}
.optional-pension-ref {
  font-size: 0.72rem;
  color: rgba(0, 0, 0, 0.3);
  margin-top: 0.5rem;
  text-align: center;
}
.step6-microcopy {
  text-align: center;
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.3);
  margin-top: 0.75rem;
}
.planner-progress-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.5;
  margin-bottom: 1.5rem;
  text-align: center;
}
.cat-hint {
  font-size: 0.65rem;
  color: rgba(0, 0, 0, 0.28);
  display: block;
  line-height: 1.3;
  margin-top: 0.15rem;
}
.income-passive-badge {
  font-size: 0.62rem;
  color: rgba(0, 0, 0, 0.25);
  font-weight: 400;
}
.goal-cat-group-label {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.38);
  font-weight: 600;
}

/* ── 4. SECTION SPACING — 3 tiers: 1rem, 1.5rem, 2.5rem ── */

/* Tight (1rem): within a section */
.income-wizard { margin-bottom: 1rem; }
.goals-library { margin-bottom: 1rem; }
.goal-cat-group { margin-bottom: 1rem; }

/* Medium (1.5rem): between related sections */
.planner-person-header { margin-top: 1.5rem; }
.investments-wizard {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.planner-surplus-bar { margin-top: 1.5rem; }
.planner-health-section {
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}

/* Wide (2.5rem): between major sections */
.planner-children-section {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.partner-toggle-wrap {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.employment-type-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.retirement-snapshot { margin-bottom: 2.5rem; }
.results-chart-wrap { margin-bottom: 2.5rem; }
.life-diagnosis { margin-bottom: 2.5rem; }
.results-accordion { margin-bottom: 1rem; }
.planner-calc-hub {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}
.calc-hub-desc {
  font-size: 0.72rem;
  color: rgba(0, 0, 0, 0.3);
}

/* ── 5. COMPONENTS — unified tokens ──────────────────────── */

/* Lifestyle tiles */
.lifestyle-tiles {
  gap: 1rem;
  margin-bottom: 2.5rem;
}

/* Expense grid */
.expense-cats-grid {
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

/* Assets empty state */
.assets-empty-state {
  text-align: center;
  padding: 1.5rem 1rem;
  color: rgba(0, 0, 0, 0.35);
  font-size: 0.85rem;
}
.empty-state-title {
  margin: 0;
  font-weight: 500;
}

/* Accordion — consistent */
.accordion-summary {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 1rem 1.25rem;
  letter-spacing: 0;
}

/* Estimate confirm */
.estimate-confirm .estimate-q {
  font-size: 0.85rem;
}

/* Surplus suggestions */
.surplus-suggestions-label {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.45);
}

/* ── 6. BUTTONS — 2 tiers: primary and secondary ────────── */
.planner-nav-btns {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  gap: 0.75rem;
}
.planner-nav-btns .calc-btn {
  min-height: 48px;
  font-size: 0.92rem;
  border-radius: 14px;
}
/* Primary (next) — gradient, bold */
.planner-nav-btns .planner-next {
  padding: 0.75rem 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Secondary (prev) — ghost */
.planner-nav-btns .planner-prev,
.planner-nav-btns .step2-back-to-income,
.planner-nav-btns .step3-back-to-income {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  background: rgba(7, 30, 54, 0.04);
  color: var(--text-secondary, #4a5a6a);
  box-shadow: none;
}
.planner-nav-btns .planner-prev:hover,
.planner-nav-btns .step2-back-to-income:hover,
.planner-nav-btns .step3-back-to-income:hover {
  background: rgba(7, 30, 54, 0.08);
  box-shadow: none;
}

/* ── 7. COMPLETION MOMENTS ───────────────────────────────── */
.step-completion-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 1.5rem 0;
  background: rgba(15, 185, 168, 0.04);
  border: 1px solid rgba(15, 185, 168, 0.12);
  border-radius: 12px;
  font-size: 0.85rem;
  color: var(--brand-teal, #0b6b63);
  font-weight: 600;
  animation: completionFadeIn 0.3s ease;
}
.step-completion-bar .completion-icon { font-size: 1rem; }
.step-completion-bar .completion-text { flex: 1; }
@keyframes completionFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-section-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.05);
  margin: 1.5rem 0;
  border: none;
}

/* ── 8. MOBILE — unified overrides ───────────────────────── */
@media (max-width: 600px) {
  .slider-value-display {
    font-size: 1.15rem !important;
  }
  .slider-number-input {
    width: 4.5rem;
    font-size: 0.85rem;
    min-height: 44px;
  }
  .step2-sliders .slider-number-input {
    display: none;
  }
  .step2-sliders .slider-value-display {
    color: var(--brand-accent);
  }
  .planner-nav-btns {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }
  .planner-nav-btns .calc-btn {
    width: 100%;
    min-height: 48px;
  }
}

/* ── STEP 2 ADVANCED ACCORDION ──────────────────────────── */
.step2-advanced-details {
  margin-top: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.step2-advanced-details[open] {
  border-color: rgba(15, 185, 168, 0.15);
}
.step2-advanced-summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary, #4a5a6a);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  user-select: none;
  transition: color 0.15s ease;
}
.step2-advanced-summary:hover {
  color: var(--brand-teal, #0b6b63);
}
.step2-advanced-summary::-webkit-details-marker { display: none; }
.step2-advanced-summary::before {
  content: '▾';
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  display: inline-block;
}
.step2-advanced-details[open] .step2-advanced-summary::before {
  transform: rotate(180deg);
}
.step2-advanced-content {
  padding: 0 1.25rem 1.5rem;
}
.step2-advanced-content .planner-field-label {
  margin-bottom: 0.75rem;
  margin-top: 0;
}
.step2-advanced-content .step2-retirement-params {
  margin-top: 0 !important;
  border-top: none !important;
  padding-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   VISUAL DEPTH — final pass
   Shadow: sm / md / lg · Accent: hero values only
   Interactions: subtle, fast, no decoration
   ═══════════════════════════════════════════════════════════ */

/* ── SHADOW SCALE (reference) ────────────────────────────── */
/* sm: 0 1px 3px rgba(0,0,0,0.04)                           */
/* md: 0 2px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06) */
/* lg: 0 2px 8px rgba(0,0,0,0.05), 0 16px 40px rgba(0,0,0,0.07) */

/* ── A. CARD — lg ────────────────────────────────────────── */
.planner-panel .calc-card {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    0 16px 40px rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.04);
}
.planner-panel .calc-card::after {
  top: 3rem;
  bottom: 3rem;
  width: 2px;
  opacity: 0.18;
}

/* ── B. HERO ELEMENT — one per screen ────────────────────── */
/* Title is always the dominant text element */
.planner-panel .calc-title {
  font-size: clamp(1.4rem, 3.2vw, 1.8rem);
  margin-bottom: 0.6rem;
  color: #071e36;
}
.planner-panel .calc-desc {
  margin-bottom: 1.75rem;
  line-height: 1.65;
}

/* Hero numbers — one emphasized value per step */
/* Step 3 expenses: surplus */
.surplus-bar-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--brand-navy, #071e36);
}
/* Step 4: net worth total */
.nw-total-row .nw-value {
  font-size: 1.65rem;
  color: var(--brand-navy, #071e36);
}
/* Step 7: wow gap — the single biggest number */
.wow-hero-value {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
}
/* Step 7: retirement snapshot — secondary to wow */
.rsn-hero-value {
  font-size: clamp(2rem, 5vw, 3rem);
}

/* ── C. DEPTH — md on elevated, nothing else ─────────────── */
.wow-number-card {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.06);
}
.planner-health-section {
  background: rgba(0, 0, 0, 0.01);
  border-radius: 20px;
  padding: 2rem;
}
.results-accordion {
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.results-accordion:hover {
  border-color: rgba(0, 0, 0, 0.08);
}
.results-accordion + .results-accordion {
  margin-top: 0.5rem;
}

/* ── D. DIVIDERS — light / standard ──────────────────────── */
.slider-row { border-bottom-color: rgba(0, 0, 0, 0.035); }
.planner-children-section,
.partner-toggle-wrap { border-top-color: rgba(0, 0, 0, 0.06); }
.employment-type-section { border-bottom-color: rgba(0, 0, 0, 0.06); }
.step-section-divider {
  background: rgba(0, 0, 0, 0.05);
  margin: 1.5rem 0;
}

/* ── E. NAV — section closer ─────────────────────────────── */
.planner-nav-btns {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* ── F. MICRO-INTERACTIONS ───────────────────────────────── */

/* Lifestyle tiles: tamed hover (was -4px, now -2px) */
.lifestyle-tile {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.lifestyle-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}
.lifestyle-tile.active {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.lifestyle-tile:active {
  transform: translateY(0);
  transition-duration: 0.08s;
}

/* Expense category buttons: softer hover */
.expense-cat-btn {
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.expense-cat-btn:hover {
  transform: translateY(-1px);
  box-shadow: none;
}
.expense-cat-btn.active {
  box-shadow: none;
}
.expense-cat-btn:active {
  transform: translateY(0);
  transition-duration: 0.06s;
}

/* Income chips: fast, no transform */
.income-chip {
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.income-chip.active {
  box-shadow: 0 2px 8px rgba(12, 92, 85, 0.15);
}

/* Goal chips: micro-lift on hover */
.goal-chip {
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.goal-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.goal-chip:active {
  transform: translateY(0);
  transition-duration: 0.06s;
}

/* Primary button: press feedback */
.planner-nav-btns .planner-next {
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.planner-nav-btns .planner-next:hover {
  transform: translateY(-1px);
}
.planner-nav-btns .planner-next:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.06s;
}

/* Secondary button: soft transition */
.planner-nav-btns .planner-prev,
.planner-nav-btns .step2-back-to-income,
.planner-nav-btns .step3-back-to-income {
  transition: background 0.12s ease, color 0.12s ease;
}

/* Slider number input: focus is the only feedback */
.slider-number-input {
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Accordion summary: cursor hint */
.accordion-summary {
  transition: color 0.12s ease;
  cursor: pointer;
}
.accordion-summary:hover {
  color: #071e36;
}

/* Children count buttons: press */
.children-count-btn {
  transition: background 0.1s ease, border-color 0.1s ease, transform 0.1s ease;
}
.children-count-btn:active {
  transform: scale(0.95);
  transition-duration: 0.06s;
}

/* Employment type buttons: press */
.employment-type-btn {
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.employment-type-btn:active {
  transform: scale(0.97);
  transition-duration: 0.06s;
}

/* Ownership cards: press */
.ownership-card {
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.ownership-card:active {
  transform: scale(0.98);
  transition-duration: 0.06s;
}

/* ── G. MOBILE ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .planner-panel .calc-card {
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.04),
      0 8px 24px rgba(0, 0, 0, 0.05);
  }
  .planner-health-section {
    padding: 1.25rem;
    border-radius: 16px;
  }
  /* Disable hover transforms on touch */
  .lifestyle-tile:hover,
  .expense-cat-btn:hover,
  .goal-chip:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   FOCUS LAYER — hero + alive support
   Rule: size/weight/color before opacity. Never flatten to lifeless.
   ═══════════════════════════════════════════════════════════ */

/* ── STEP 1: tiles are hero ──────────────────────────────── */

/* Unselected tiles recede via scale + border, not opacity */
.lifestyle-tiles:has(.active) .lifestyle-tile:not(.active) {
  border-color: rgba(0, 0, 0, 0.06);
  transform: scale(0.97);
}
/* Selected tile: strong border + lift — unmistakable */
.lifestyle-tile.active {
  border-color: var(--brand-accent, #0fb9a8);
  border-width: 2.5px;
  box-shadow:
    0 0 0 3px rgba(15, 185, 168, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Insight card: smaller number, warm bg — confirming, not competing */
.step-insight-card .insight-number {
  font-size: clamp(1.6rem, 4vw, 2.15rem);
  font-weight: 800;
  color: #0d3330;
}

/* ── STEP 2: slider values are hero ──────────────────────── */

/* Person header — present but lighter weight, not faded */
.planner-person-header .person-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
}
/* Slider values — the hero: larger, darker, premium feel */
#step-1 .slider-value-display {
  font-size: 1.5rem;
  font-weight: 900;
  color: #071e36;
}
/* Years tagline — supporting, center aligned, alive */
.step2-years-tagline {
  font-size: 0.85rem;
  color: #2a5a54;
  text-align: center;
  font-weight: 500;
}
/* Name field — secondary by size, not by fading */
.planner-name-field {
  margin-bottom: 1rem;
}
.planner-name-label {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.5);
}

/* ── STEP 3: surplus is hero, chips feel alive ───────────── */

/* Wizard-q labels — clear guide voice, not faded */
.wizard-q {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a2a3a;
  margin-bottom: 0.75rem;
}
/* Totals — smaller size creates hierarchy, no opacity */
.wizard-total {
  font-size: 0.82rem;
}
.dynamic-section-total {
  font-weight: 800;
  font-size: 1.05rem;
  color: #0d1f33;
}
/* Surplus bar — hero moment: bigger value, premium */
.surplus-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.surplus-bar-value {
  font-size: 1.65rem;
  font-weight: 900;
  color: #071e36;
  letter-spacing: -0.03em;
}
/* Income chips: selected = solid, confident */
.income-chip.active {
  background: #0b5d56;
  border-color: #0b5d56;
  color: #fff;
  box-shadow: 0 3px 12px rgba(11, 93, 86, 0.28);
  font-weight: 700;
}
/* Expense buttons: selected = stronger presence */
.expense-cat-btn.active {
  background: rgba(11, 107, 99, 0.1);
  border-color: var(--brand-accent, #0fb9a8);
  border-width: 2px;
  box-shadow: 0 2px 8px rgba(11, 107, 99, 0.08);
}

/* ── STEP 4: net worth total is hero, cards feel premium ── */

/* Non-total rows: smaller size, full color */
.nw-row:not(.nw-total-row) .nw-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2d3748;
}
/* Total row: dominant */
.nw-total-row .nw-label {
  font-weight: 700;
  color: #071e36;
}
.nw-total-row .nw-value {
  font-size: 1.75rem;
  color: #071e36;
}
/* Section spacing */
.assets-chips-section,
.liab-chips-section {
  margin-top: 1.75rem;
}
/* Asset flat chips: selected = clear, strong */
.flat-slider-row.is-expanded {
  border-color: rgba(15, 185, 168, 0.25);
  box-shadow: 0 2px 8px rgba(15, 185, 168, 0.06);
}

/* ── STEP 6: goals — aspirational, life-oriented ─────────── */

/* Retirement anchor: hidden — replaced by vision card */
.retirement-anchor { display: none; }

/* Retirement vision card premium overrides */
.retirement-vision-card {
  background: linear-gradient(135deg, rgba(7, 30, 54, 0.03) 0%, rgba(15, 185, 168, 0.06) 100%);
  border-color: rgba(0, 0, 0, 0.08);
}
.retirement-vision-value {
  color: #071e36;
}
.retirement-vision-input {
  color: #071e36;
}
/* Library label — small but legible */
.goals-library-label {
  font-size: 0.72rem;
  color: rgba(0, 0, 0, 0.38);
  font-weight: 600;
}
/* Goal chips: selected state = satisfying, confident */
.goal-chip.selected,
.goal-chip[disabled] {
  background: rgba(11, 107, 99, 0.08);
  border-color: var(--brand-accent, #0fb9a8);
  color: #0b5d56;
  font-weight: 700;
}
/* When plans exist, the plans section is visually anchored */
.goals-my-plans-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #071e36;
}

/* ── STEP 7: results — cinematic, conclusive ─────────────── */

/* Wow hero — hard domination */
.wow-hero-value {
  font-size: clamp(2.75rem, 7vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
}
/* Supporting analytics — smaller, lighter color, still alive */
.health-mini-ring .ring-label {
  font-size: 0.62rem;
  color: rgba(0, 0, 0, 0.5);
}
.health-breakdown .hb-label {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.5);
}
/* Retirement snapshot: secondary hero — clearly below wow */
.retirement-snapshot .rsn-eyebrow {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 0.08em;
}
.rsn-hero-value {
  font-size: clamp(2rem, 5vw, 3rem);
  color: #071e36;
}
/* Chart and diagnosis: supporting narrative */
.results-chart-headline {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a2a3a;
}
.diagnosis-top .diagnosis-badge {
  font-size: 0.72rem;
}
.diagnosis-headline {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0d1f33;
}

/* ── CROSS-STEP: unified secondary elements ──────────────── */

/* Insight card labels — consistent everywhere */
.step-insight-card .insight-card-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.38);
}

/* ── END FOCUS LAYER ─────────────────────────────────────── */

/* ── END VISUAL DEPTH ────────────────────────────────────── */

/* ── END REFINEMENT LAYER ────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   NEW RESULTS SCREENS (NRS) — Cinematic 5-panel experience
   ═══════════════════════════════════════════════════════════════ */

/* ── NRS Card — no accent bar, clean canvas ─────────────────── */
.nrs-card.calc-card::after { display: none; }

/* ── NRS Screen — base ──────────────────────────────────────── */
.nrs-screen {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.nrs-screen:last-of-type { border-bottom: none; }
.nrs-screen.nrs-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── A. HERO SCREEN — the big number ────────────────────────── */
.nrs-screen--hero {
  text-align: center;
  padding-top: 1rem;
}
.nrs-screen--hero .results-screen-title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.5rem;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 600;
  color: rgba(0, 0, 0, 0.42);
  letter-spacing: 0.02em;
}
.nrs-hero-pct-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1em;
  margin: 0.75rem 0 0.5rem;
  line-height: 1;
}
.nrs-hero-pct {
  font-family: var(--font-heading, 'Heebo', sans-serif);
  font-size: clamp(4.5rem, 14vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--brand-teal, #0b6b63);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.nrs-hero-pct-sign {
  font-family: var(--font-heading, 'Heebo', sans-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--brand-teal, #0b6b63);
  opacity: 0.6;
}

/* Tone coloring */
[data-nrs-tone="surplus"] .nrs-hero-pct,
[data-nrs-tone="surplus"] .nrs-hero-pct-sign { color: #0b6b63; }
[data-nrs-tone="gap-small"] .nrs-hero-pct,
[data-nrs-tone="gap-small"] .nrs-hero-pct-sign { color: #b45309; }
[data-nrs-tone="gap-large"] .nrs-hero-pct,
[data-nrs-tone="gap-large"] .nrs-hero-pct-sign { color: #b91c1c; }
[data-nrs-tone="critical"] .nrs-hero-pct,
[data-nrs-tone="critical"] .nrs-hero-pct-sign { color: #991b1b; }

/* Hero glow */
[data-nrs-tone="surplus"] .nrs-hero-pct { text-shadow: 0 0 60px rgba(15, 185, 168, 0.12); }
[data-nrs-tone="gap-small"] .nrs-hero-pct { text-shadow: 0 0 60px rgba(245, 158, 11, 0.1); }
[data-nrs-tone="gap-large"] .nrs-hero-pct { text-shadow: 0 0 60px rgba(239, 68, 68, 0.08); }

.nrs-hero-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.62);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.nrs-hero-sentence {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.48);
  max-width: 480px;
  margin: 0 auto 2rem;
}

/* Mini stats row */
.nrs-hero-mini-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.nrs-mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1.25rem;
}
.nrs-mini-stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.32);
  margin-bottom: 0.25rem;
}
.nrs-mini-stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0d1f33;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.nrs-mini-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(0, 0, 0, 0.08);
  margin: 0.5rem 0;
}

/* ── B. STORY SCREEN ────────────────────────────────────────── */
.nrs-story-card {
  padding: 1.75rem 2rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fcfb 0%, #f0f7f6 100%);
  border: 1px solid rgba(15, 185, 168, 0.12);
  margin-bottom: 2rem;
}
.nrs-story-eyebrow {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.32);
  margin-bottom: 1rem;
}
.nrs-story-text {
  font-size: 1rem;
  line-height: 2;
  color: #1a2233;
  font-weight: 500;
  margin: 0;
}
.nrs-story-text strong {
  font-weight: 800;
  color: var(--brand-teal, #0b6b63);
}

/* Snapshot grid */
.nrs-snapshot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .nrs-snapshot-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.nrs-snap-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.125rem 0.75rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  text-align: center;
}
.nrs-snap-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.36);
}
.nrs-snap-value {
  font-size: 1.25rem;
  font-weight: 900;
  color: #0d1f33;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.nrs-snap-card[data-positive="true"] .nrs-snap-value { color: #0b6b63; }
.nrs-snap-card[data-positive="false"] .nrs-snap-value { color: #b91c1c; }

/* ── C. CHART SCREEN ───────────────────────────────────────── */
.nrs-section-title {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0d1f33;
  margin-bottom: 0.5rem;
}
.nrs-section-sub {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.38);
  margin-bottom: 1.5rem;
}
.nrs-chart-wrap {
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.015);
  padding: 1rem;
  box-sizing: border-box;
  margin-bottom: 1rem;
}
.nrs-chart-legend {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.nrs-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.42);
}
.nrs-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.nrs-legend-dot--teal   { background: #0f9d8e; }
.nrs-legend-dot--orange { background: #f59e0b; }
.nrs-legend-dot--red    { background: #e8534a; }

.nrs-chart-interp {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.52);
  text-align: center;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.025);
}

/* ── D. ACTIONS SCREEN ──────────────────────────────────────── */
.nrs-scenario-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.nrs-scenario-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0.75rem;
  border-radius: 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
}
.nrs-scenario-btn:hover {
  border-color: var(--brand-accent, #0fb9a8);
  background: rgba(15, 185, 168, 0.04);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.nrs-scenario-btn:active {
  transform: scale(0.97);
}
.nrs-scenario-btn.active {
  border-color: var(--brand-accent);
  background: rgba(15, 185, 168, 0.08);
  box-shadow: 0 0 0 3px rgba(15, 185, 168, 0.12);
}
.nrs-scenario-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.05);
  color: #0d1f33;
}
.nrs-scenario-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0d1f33;
  line-height: 1.4;
}
.nrs-scenario-impact {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand-teal, #0b6b63);
  opacity: 0.7;
}

/* Scenario result */
.nrs-scenario-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: rgba(15, 185, 168, 0.07);
  border: 1px solid rgba(15, 185, 168, 0.2);
  margin-bottom: 2rem;
  animation: nrsFadeIn 0.3s ease;
}
.nrs-scenario-result-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0c5c55;
  line-height: 1.5;
}
.nrs-scenario-reset {
  padding: 0.4rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  color: #0d1f33;
}

/* Diagnosis condensed */
.nrs-diagnosis {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.nrs-diag-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.nrs-diag-row--positive {
  background: rgba(15, 185, 168, 0.05);
  border-color: rgba(15, 185, 168, 0.15);
}
.nrs-diag-icon {
  flex-shrink: 0;
  font-size: 0.85rem;
  margin-top: 0.15em;
  opacity: 0.5;
}
.nrs-diag-body { flex: 1; min-width: 0; }
.nrs-diag-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.36);
  margin-bottom: 0.2rem;
}
.nrs-diag-text {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.62);
}

/* ── E. SCORE + CTA SCREEN ──────────────────────────────────── */
.nrs-health-wrap {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.nrs-health-bars { flex: 1; min-width: 0; }
.nrs-health-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0d1f33;
  margin-bottom: 1rem;
}

/* CTA block */
.nrs-cta-block {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: 20px;
  background: linear-gradient(135deg, #f0fdfc 0%, #e8faf8 100%);
  border: 1.5px solid rgba(15, 185, 168, 0.22);
  margin-bottom: 2rem;
}
.nrs-cta-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0d1f33;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.nrs-cta-sub {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 1.25rem;
}
.nrs-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 1rem 2.25rem;
  border-radius: 12px;
  background: #0c5c55;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(12, 92, 85, 0.25);
  transition: all 0.22s ease;
}
.nrs-cta-btn:hover {
  background: #0a4f49;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(12, 92, 85, 0.35);
}
.nrs-cta-btn-text { position: relative; z-index: 1; }

/* Shimmer */
.nrs-cta-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  animation: nrsShimmer 3.5s infinite;
}
@keyframes nrsShimmer {
  0%   { left: -100%; }
  40%  { left: 100%; }
  100% { left: 100%; }
}

.nrs-cta-wa {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.38);
  text-decoration: none;
}
.nrs-cta-wa:hover { color: var(--brand-teal); }

/* v5.2: Brain Insights Panel */
.nrs-brain-insights {
  margin-bottom: 1.5rem;
  direction: rtl;
}
.brain-section {
  margin-bottom: 1.25rem;
}
.brain-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary, #0d1f33);
  margin: 0 0 0.6rem;
}
.brain-conn, .brain-whatif {
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.55;
  margin-bottom: 0.4rem;
}
.brain-conn--positive, .brain-whatif--positive {
  background: rgba(15, 185, 168, 0.08);
  border: 1px solid rgba(15, 185, 168, 0.2);
  color: #0c5c55;
}
.brain-conn--warning, .brain-whatif--warning {
  background: rgba(243, 156, 18, 0.08);
  border: 1px solid rgba(243, 156, 18, 0.2);
  color: #92400e;
}
.brain-conn--neutral, .brain-whatif--neutral {
  background: rgba(7, 30, 54, 0.04);
  border: 1px solid rgba(7, 30, 54, 0.08);
  color: rgba(0, 0, 0, 0.6);
}
.brain-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.brain-event {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.45;
}
.brain-event--positive { background: rgba(15, 185, 168, 0.06); }
.brain-event--negative { background: rgba(231, 76, 60, 0.06); }
.brain-event--milestone { background: rgba(243, 156, 18, 0.08); }
.brain-event--neutral { background: rgba(7, 30, 54, 0.03); }
.brain-event-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1; }
.brain-event-body { display: flex; flex-direction: column; }
.brain-event-year {
  font-weight: 700;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 0.1rem;
}
.brain-event-label { color: rgba(0, 0, 0, 0.7); }

/* v5.2: Client Profile Badge */
.nrs-client-profile {
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #f8fafc, #f0f4f8);
  border: 1px solid rgba(7, 30, 54, 0.1);
  border-radius: 16px;
  margin-bottom: 1.5rem;
  direction: rtl;
}
.cp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.cp-stage {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary, #0d1f33);
}
.cp-readiness {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.5);
}
.cp-score {
  font-weight: 700;
  color: var(--brand-teal, #0fb9a8);
}
.cp-summary {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.cp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.cp-pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: rgba(15, 185, 168, 0.1);
  border: 1px solid rgba(15, 185, 168, 0.25);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0c5c55;
}
.cp-checklist {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  direction: ltr;
}
.cp-dot {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.65rem;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.25);
}
.cp-dot--done {
  background: rgba(15, 185, 168, 0.15);
  color: #0c5c55;
  font-weight: 700;
}
.cp-peer {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.cp-peer--ahead { color: #166534; }
.cp-peer--on-track { color: #0c5c55; }
.cp-peer--behind { color: #c0392b; }
.cp-priority {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.55);
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.cp-priority strong {
  color: var(--brand-teal, #0fb9a8);
}

/* v5.2: Urgent CTA — financial stress detected */
.nrs-cta--urgent {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.12), rgba(255, 183, 77, 0.08));
  border: 2px solid rgba(255, 152, 0, 0.4);
  animation: ctaPulse 2s ease-in-out 3;
}
.nrs-cta--urgent .nrs-cta-btn {
  background: #e65100;
  box-shadow: 0 4px 16px rgba(230, 81, 0, 0.3);
}
.nrs-cta--urgent .nrs-cta-btn:hover {
  background: #bf360c;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.25); }
  50% { box-shadow: 0 0 16px 4px rgba(255, 152, 0, 0.25); }
}

/* v5.2: Results updated flash on re-entry */
.nrs-updated-flash {
  animation: updatedFlash 0.6s ease-out 2;
}
@keyframes updatedFlash {
  0% { background: rgba(15, 185, 168, 0.3); }
  100% { background: transparent; }
}

/* Actions row */
.nrs-actions-row {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.nrs-action-btn {
  padding: 0.6rem 1.5rem;
  border-radius: 10px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.18s ease;
}
.nrs-action-btn:hover {
  border-color: rgba(0, 0, 0, 0.2);
  color: #0d1f33;
}

/* NRS Accordion */
.nrs-accordion {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.nrs-accordion-summary {
  padding: 0.875rem 1.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.42);
  cursor: pointer;
  list-style: none;
}
.nrs-accordion-summary::-webkit-details-marker { display: none; }
.nrs-accordion-summary::before { content: '+ '; font-weight: 800; }
[open] .nrs-accordion-summary::before { content: '- '; }
.nrs-accordion-content {
  padding: 0 1.25rem 1.25rem;
}
.nrs-accordion-hint {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.38);
  margin-bottom: 1rem;
}

/* ── NRS Fade-in animation ──────────────────────────────────── */
@keyframes nrsFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── NRS Loader Upgrade ─────────────────────────────────────── */
.planner-loader.is-active {
  display: flex !important;
}
.planner-loader .loader-lines {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.planner-loader .loader-line {
  opacity: 0;
  animation: nrsLoaderLine 0.6s ease forwards;
}
.planner-loader .loader-line:nth-child(1) { animation-delay: 0.2s; }
.planner-loader .loader-line:nth-child(2) { animation-delay: 0.9s; }
.planner-loader .loader-line:nth-child(3) { animation-delay: 1.6s; }
.planner-loader .loader-line:nth-child(4) { animation-delay: 2.4s; }

@keyframes nrsLoaderLine {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── NRS Mobile Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
  .nrs-health-wrap {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .nrs-scenario-cards {
    grid-template-columns: 1fr;
    gap: 0.625rem;
  }
  .nrs-scenario-btn {
    flex-direction: row;
    gap: 0.875rem;
    padding: 1rem;
    text-align: start;
  }
  .nrs-hero-pct {
    font-size: clamp(3.5rem, 12vw, 6rem);
  }
  .nrs-chart-wrap {
    height: 220px;
    padding: 0.75rem;
  }
  .nrs-story-card {
    padding: 1.375rem 1.25rem;
  }
}

@media (max-width: 480px) {
  .nrs-hero-mini-stats {
    flex-wrap: wrap;
  }
  .nrs-mini-sep {
    display: none;
  }
  .nrs-mini-stat {
    flex: 1 1 40%;
    padding: 0.5rem;
  }
  .nrs-snap-value {
    font-size: 1.1rem;
  }
  .nrs-snapshot-grid {
    gap: 0.5rem;
  }
}

/* ── NRS Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nrs-screen {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nrs-cta-shimmer { animation: none; }
}

/* P1-P29 removed — using base calc-page dark gradient */

/* ══════════════════════════════════════════════════════════════════════════
   GOALS DEEP-DIVE v3 — Visual card-based deep-dives with sliders
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Lifestyle Question ── */
.goals-lifestyle-wrap {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  text-align: center;
}
.goals-lifestyle-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 0.6rem;
}
.goals-lifestyle-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: #718096;
  margin-bottom: 0.3rem;
}
.goals-lifestyle-slider {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px;
  background: linear-gradient(to left, var(--brand-accent, #0fb9a8), #e2e8f0, #d69e2e);
  outline: none;
}
.goals-lifestyle-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.04);
}
.goals-lifestyle-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: none;
  background: #fff; cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}
.goals-lifestyle-hint {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--brand-teal, #0b6b63);
  margin-top: 0.4rem;
  min-height: 1.2em;
}

/* ── Budget Reality Check ── */
.goals-budget-bar-wrap {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}
.goals-budget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.goals-budget-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2d3748;
}
.goals-budget-pct {
  font-family: var(--font-body, 'Heebo', sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
}
.goals-budget-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #edf2f7;
  overflow: hidden;
}
.goals-budget-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.goals-budget-msg {
  font-size: 0.65rem;
  color: #718096;
  margin-top: 0.3rem;
  text-align: center;
}

/* ── Missing Items Scan ── */
.goals-missing-wrap {
  background: rgba(214,158,46,0.06);
  border: 1px solid rgba(214,158,46,0.15);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  color: #744210;
  text-align: center;
  margin-top: 0.5rem;
}
.goals-missing-icon { font-size: 0.85rem; }

/* ── Category Selection Grid ── */
.goals-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.goals-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.75rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 2px solid transparent;
  min-height: 120px;
}

.goals-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.goals-cat-card--active {
  border-color: var(--brand-accent, #0fb9a8);
  box-shadow: 0 4px 16px rgba(15, 185, 168, 0.2);
  transform: translateY(-2px);
}

.goals-cat-card--completed { opacity: 0.85; }
.goals-cat-card--completed .goals-cat-card-status {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: #43a047;
  font-size: 1.1rem;
  font-weight: 800;
}

.goals-cat-card-icon { font-size: 2.2rem; line-height: 1; }

.goals-cat-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a202c;
  letter-spacing: -0.01em;
  text-align: center;
}

.goals-cat-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--brand-accent, #0fb9a8);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  box-shadow: 0 2px 6px rgba(15, 185, 168, 0.3);
}

/* Active label */
.goals-cat-card--active .goals-cat-card-active-tag {
  display: block;
}
.goals-cat-card-active-tag {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
  background: var(--brand-accent, #0fb9a8);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

.goals-cat-card-status { display: none; }
.goals-cat-card--completed .goals-cat-card-status { display: block; }

/* v5.2: Suggested category pulse (children auto-suggestion) */
.goals-cat-card--suggested {
  animation: suggestedPulse 2s ease-in-out 3;
  border-color: rgba(15, 185, 168, 0.5);
}
@keyframes suggestedPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 185, 168, 0.3); }
  50% { box-shadow: 0 0 12px 3px rgba(15, 185, 168, 0.3); }
}

/* ── Deep-Dive Container ── */
.goals-deep-dive {
  background: #fff;
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  border: 1.5px solid rgba(0,0,0,0.06);
}

.goals-dd-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.goals-dd-header-icon { font-size: 1.6rem; }
.goals-dd-header-title { font-size: 1.1rem; font-weight: 800; color: #1a202c; flex: 1; margin: 0; }

.goals-dd-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.04); color: #718096; font-size: 1.2rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.goals-dd-close:hover { background: rgba(0,0,0,0.08); color: #2d3748; }

/* Amit tip */
.goals-dd-tip {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.875rem 1rem; border-radius: 14px;
  background: rgba(15, 185, 168, 0.06); margin-bottom: 1.5rem;
}
.goals-dd-tip-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.goals-dd-tip-text { font-size: 0.82rem; color: #2d3748; line-height: 1.5; font-weight: 500; margin: 0; }

/* ── Sections ── */
.goals-dd-section { margin-bottom: 1.5rem; }
.goals-dd-sub-title { font-size: 0.95rem; font-weight: 700; color: #1a202c; margin: 1.25rem 0 0.75rem; }
.goals-dd-empty { font-size: 0.84rem; color: rgba(0,0,0,0.5); margin: 0 0 1rem; }

/* Done / Add buttons */
.goals-dd-done-btn {
  display: block; width: 100%; padding: 0.75rem; border-radius: 14px;
  border: 2px solid var(--brand-accent, #0fb9a8); background: transparent;
  color: var(--brand-accent, #0fb9a8); font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease; margin-top: 1.5rem;
}
.goals-dd-done-btn:hover { background: var(--brand-accent, #0fb9a8); color: #fff; }

.goals-dd-add-btn {
  padding: 0.6rem 1.2rem; border-radius: 999px;
  border: 1.5px dashed rgba(0,0,0,0.15); background: transparent;
  color: #4a5568; font-size: 0.84rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease;
}
.goals-dd-add-btn:hover { border-color: var(--brand-accent, #0fb9a8); color: var(--brand-accent, #0fb9a8); background: rgba(15,185,168,0.05); }

/* ── Kid Card ── */
.goals-dd-kid-card {
  background: rgba(0,0,0,0.02); border-radius: 16px;
  padding: 1.25rem; margin-bottom: 1rem; border: 1px solid rgba(0,0,0,0.06);
}
.goals-dd-kid-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.goals-dd-kid-icon { font-size: 1.5rem; }
.goals-dd-kid-name { font-size: 0.95rem; font-weight: 700; color: #1a202c; }
.goals-dd-kid-age { font-size: 0.78rem; color: rgba(0,0,0,0.45); margin-right: auto; }

/* ── Visual Timeline (0→3→6→12→18→21) ── */
.goals-dd-kid-timeline {
  display: flex; align-items: center; gap: 0; margin-bottom: 1.25rem;
  position: relative; padding: 0.5rem 0;
}
.goals-dd-kid-timeline::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 3px; background: #e2e8f0; transform: translateY(-50%);
}
.goals-dd-tl-chip {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  font-size: 0.62rem; font-weight: 700; text-align: center;
  transition: opacity 0.2s;
}
.goals-dd-tl-chip--past { opacity: 0.35; }
.goals-dd-tl-dot {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 800; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.goals-dd-tl-dot--daycare { background: #ffd54f; color: #5d4037; }
.goals-dd-tl-dot--preschool { background: #81c784; }
.goals-dd-tl-dot--elementary { background: #64b5f6; }
.goals-dd-tl-dot--secondary { background: #ba68c8; }
.goals-dd-tl-dot--army { background: #a1887f; }
.goals-dd-tl-dot--post-army { background: #90a4ae; }
.goals-dd-tl-label { color: #4a5568; line-height: 1.2; max-width: 56px; }
.goals-dd-tl-ages { color: rgba(0,0,0,0.35); font-size: 0.58rem; }

/* ── Stage Cards Grid (2 col) ── */
.goals-dd-stage-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
}
.goals-dd-stage-card {
  border-radius: 14px; padding: 0.875rem; position: relative;
  border: 1.5px solid rgba(0,0,0,0.06); transition: all 0.2s;
}
.goals-dd-stage-card--unchecked { opacity: 0.45; }
.goals-dd-stage-card-header {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
}
.goals-dd-stage-check {
  width: 20px; height: 20px; accent-color: var(--brand-accent, #0fb9a8);
  cursor: pointer; flex-shrink: 0;
}
.goals-dd-stage-icon { font-size: 1.2rem; }
.goals-dd-stage-name { font-size: 0.82rem; font-weight: 700; color: #1a202c; }
.goals-dd-stage-badge {
  font-size: 0.62rem; font-weight: 800; color: #fff;
  background: var(--brand-accent, #0fb9a8); border-radius: 999px;
  padding: 0.1rem 0.45rem; margin-right: auto;
}
.goals-dd-stage-years-row {
  display: flex; align-items: center; gap: 0.3rem;
  margin-bottom: 0.5rem;
}
.goals-dd-year-input {
  width: 58px; padding: 0.25rem 0.4rem; border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.1); font-size: 0.72rem; font-weight: 600;
  color: #4a5568; text-align: center; background: rgba(255,255,255,0.7);
  transition: border-color 0.15s;
}
.goals-dd-year-input:focus { border-color: var(--brand-accent, #0fb9a8); outline: none; }
.goals-dd-year-dash { font-size: 0.72rem; color: rgba(0,0,0,0.3); }
/* Slider row */
.goals-dd-stage-slider-row {
  display: flex; align-items: center; gap: 0.5rem;
}
.goals-dd-stage-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px; background: #e2e8f0; outline: none;
}
.goals-dd-stage-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-accent, #0fb9a8); cursor: pointer;
  box-shadow: 0 2px 6px rgba(15,185,168,0.3);
}
.goals-dd-stage-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: none;
  background: var(--brand-accent, #0fb9a8); cursor: pointer;
}
.goals-dd-stage-value {
  font-size: 0.82rem; font-weight: 700; color: #1a202c;
  min-width: 65px; text-align: left;
}
/* Stage card color variants */
.goals-dd-stage-card--daycare { background: #fff8e1; }
.goals-dd-stage-card--preschool { background: #e8f5e9; }
.goals-dd-stage-card--elementary { background: #e3f2fd; }
.goals-dd-stage-card--secondary { background: #f3e5f5; }
.goals-dd-stage-card--army { background: #efebe9; }
.goals-dd-stage-card--post-army { background: #eceff1; }

/* ── Milestone Grid (2×2) ── */
.goals-dd-ms-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
}
.goals-dd-ms-card {
  border-radius: 14px; padding: 0.875rem; background: #fff;
  border: 1.5px solid rgba(0,0,0,0.06); transition: all 0.2s;
}
.goals-dd-ms-card--unchecked { opacity: 0.4; }
.goals-dd-ms-card-header {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem;
}
.goals-dd-ms-check {
  width: 20px; height: 20px; accent-color: var(--brand-accent, #0fb9a8);
  cursor: pointer; flex-shrink: 0;
}
.goals-dd-ms-icon { font-size: 1.1rem; }
.goals-dd-ms-card-name { font-size: 0.82rem; font-weight: 700; color: #1a202c; flex: 1; }
.goals-dd-ms-age-badge {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-accent, #0fb9a8); color: #fff;
  font-size: 0.72rem; font-weight: 800;
}
.goals-dd-ms-card-year-row {
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem;
}
.goals-dd-ms-card-year-label { font-size: 0.68rem; color: rgba(0,0,0,0.4); }
.goals-dd-ms-year-input { width: 58px; }
.goals-dd-ms-card-input {
  width: 100%; padding: 0.4rem 0.6rem; border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,0.08); font-size: 0.82rem; font-weight: 600;
  text-align: center; direction: ltr;
}
.goals-dd-ms-card-input:focus { border-color: var(--brand-accent, #0fb9a8); outline: none; }

/* ── Summary Bubble (savings projection) ── */
.goals-dd-summary-bubble {
  background: linear-gradient(135deg, rgba(15,185,168,0.08) 0%, rgba(15,185,168,0.15) 100%);
  border: 1.5px solid rgba(15,185,168,0.2);
  border-radius: 16px; padding: 1rem 1.25rem; text-align: center;
  margin-top: 0.75rem;
}
.goals-dd-summary-bubble-label {
  font-size: 0.78rem; color: #4a5568; margin-bottom: 0.3rem;
}
.goals-dd-summary-bubble-amount {
  font-size: 1.8rem; font-weight: 900; color: var(--brand-teal, #0b6b63);
  line-height: 1.1;
}
.goals-dd-summary-bubble-trend {
  font-size: 1rem; margin-right: 0.3rem; vertical-align: middle;
}

/* ── Collapsible detail wrapper — anti-clutter ── */
.goals-dd-collapse-wrap { margin-bottom: 0.75rem; }
.goals-dd-collapse-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: rgba(15,185,168,0.04);
  border: 1px solid rgba(15,185,168,0.1);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}
.goals-dd-collapse-total {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-teal, #0b6b63);
}
.goals-dd-collapse-toggle {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-accent, #0fb9a8);
  background: none;
  border: 1px solid rgba(15,185,168,0.2);
  border-radius: 6px;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  transition: all 0.15s;
}
.goals-dd-collapse-toggle:hover {
  background: rgba(15,185,168,0.06);
  border-color: rgba(15,185,168,0.35);
}
.goals-dd-collapse--closed .goals-dd-collapse-detail {
  display: none;
}

/* ── Row-based expense/help rows ── */
.goals-dd-rows { display: flex; flex-direction: column; gap: 0.4rem; }
.goals-dd-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-radius: 10px;
  background: #fff; border: 1px solid rgba(0,0,0,0.05);
  transition: opacity 0.2s;
}
.goals-dd-row--off { opacity: 0.35; }
.goals-dd-row-label { font-size: 0.82rem; font-weight: 600; color: #1a202c; min-width: 100px; flex-shrink: 0; }
.goals-dd-row-slider { flex: 1; min-width: 80px; }
.goals-dd-row-val { font-size: 0.78rem; font-weight: 700; color: var(--brand-teal, #0b6b63); min-width: 65px; text-align: left; white-space: nowrap; }
.goals-dd-row-amount {
  width: 75px; padding: 0.3rem 0.5rem; border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,0.08); font-size: 0.82rem;
  font-weight: 600; text-align: center; direction: ltr;
}
.goals-dd-row-amount:focus { border-color: var(--brand-accent, #0fb9a8); outline: none; }
.goals-dd-row-suffix { font-size: 0.72rem; color: rgba(0,0,0,0.4); flex-shrink: 0; }

/* Until-age row */
.goals-dd-until-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; margin-top: 0.5rem;
}
.goals-dd-until-label { font-size: 0.82rem; font-weight: 600; color: #1a202c; }
.goals-dd-until-select {
  padding: 0.3rem 0.5rem; border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,0.1); font-size: 0.82rem;
  font-weight: 600; color: var(--brand-teal, #0b6b63);
  background: #fff; cursor: pointer;
}

/* ── Funding mode radio (help items) ── */
.goals-dd-fund-row {
  display: flex; gap: 1rem; width: 100%;
  padding: 0.35rem 0 0 1.8rem; /* indent under checkbox */
}
.goals-dd-fund-option {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; color: #4a5568; cursor: pointer;
}
.goals-dd-fund-radio { accent-color: var(--brand-accent, #0fb9a8); cursor: pointer; }
.goals-dd-fund-monthly {
  font-weight: 700; color: var(--brand-teal, #0b6b63);
}

/* ── Compact Savings section ── */
.goals-dd-savings-compact {
  background: rgba(0,0,0,0.02); border-radius: 14px;
  padding: 1rem; margin-top: 0.5rem;
}
.goals-dd-sav-row {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;
}
.goals-dd-sav-label {
  font-size: 0.78rem; font-weight: 600; color: #1a202c; min-width: 90px; flex-shrink: 0;
}
.goals-dd-sav-slider { flex: 1; }
.goals-dd-sav-val {
  font-size: 0.82rem; font-weight: 700; color: var(--brand-teal, #0b6b63);
  min-width: 50px; text-align: left;
}
.goals-dd-sav-bl-row {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;
}
.goals-dd-sav-bl-text {
  font-size: 0.78rem; font-weight: 500; color: #4a5568;
}

/* Toggle checkbox shared */
.goals-dd-toggle {
  width: 18px; height: 18px; accent-color: var(--brand-accent, #0fb9a8);
  flex-shrink: 0; cursor: pointer;
}

/* ── Vehicle ── */
.goals-dd-question { margin-bottom: 1rem; }
.goals-dd-q-label { font-size: 0.88rem; font-weight: 600; color: #1a202c; display: block; margin-bottom: 0.6rem; }

.goals-dd-choice-btn {
  padding: 0.55rem 1.1rem; border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,0.12); background: #fff;
  color: #4a5568; font-size: 0.84rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease;
  margin-left: 0.5rem; margin-bottom: 0.5rem;
}
.goals-dd-choice-btn:hover { border-color: var(--brand-accent, #0fb9a8); color: var(--brand-accent, #0fb9a8); }
.goals-dd-choice-btn--active { background: var(--brand-accent, #0fb9a8); color: #fff; border-color: var(--brand-accent, #0fb9a8); }
.goals-dd-choice-btn--wide { display: block; width: 100%; text-align: right; margin: 0 0 0.5rem; border-radius: 12px; padding: 0.75rem 1rem; }

.goals-dd-field-row { display: flex; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.goals-dd-field { flex: 1; min-width: 120px; }
.goals-dd-field label { display: block; font-size: 0.75rem; font-weight: 600; color: rgba(0,0,0,0.45); margin-bottom: 0.35rem; }

.goals-dd-input {
  width: 100%; padding: 0.5rem 0.75rem; border-radius: 10px;
  border: 1.5px solid rgba(0,0,0,0.1); font-size: 0.88rem; font-weight: 600;
  color: #1a202c; background: #fff; transition: border-color 0.15s; box-sizing: border-box;
}
.goals-dd-input:focus { border-color: var(--brand-accent, #0fb9a8); outline: none; }

.goals-dd-depreciation-preview { font-size: 0.78rem; color: rgba(0,0,0,0.55); line-height: 1.6; margin-bottom: 0.75rem; }

.goals-dd-cycle-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.35rem; }
.goals-dd-cycle-btn {
  width: 40px; height: 40px; border-radius: 12px;
  border: 1.5px solid rgba(0,0,0,0.1); background: #fff;
  color: #4a5568; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s ease;
  display: flex; align-items: center; justify-content: center;
}
.goals-dd-cycle-btn:hover { border-color: var(--brand-accent, #0fb9a8); color: var(--brand-accent, #0fb9a8); }
.goals-dd-cycle-btn--active { background: var(--brand-accent, #0fb9a8); color: #fff; border-color: var(--brand-accent, #0fb9a8); }

.goals-dd-vehicle-timeline { font-size: 0.78rem; color: rgba(0,0,0,0.55); line-height: 1.8; margin-top: 1rem; }
.goals-dd-vehicle-timeline strong { color: var(--brand-teal, #0fb9a8); }
.goals-dd-timeline-row { padding: 0.2rem 0; }
.goals-dd-timeline-total { padding-top: 0.5rem; border-top: 1px solid rgba(0,0,0,0.08); margin-top: 0.5rem; }

/* ── Vacation Presets — slim horizontal ── */
.goals-dd-preset-cards { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.goals-dd-preset-card {
  display: flex; flex-direction: row; align-items: center; gap: 0.6rem;
  padding: 0.65rem 0.9rem; border-radius: 10px;
  border: 1.5px solid rgba(0,0,0,0.06); border-right: 3.5px solid rgba(15,185,168,0.25);
  background: #fff; cursor: pointer; transition: all 0.2s ease;
}
.goals-dd-preset-card:hover { border-color: rgba(0,0,0,0.1); border-right-color: rgba(15,185,168,0.5); background: rgba(0,0,0,0.01); }
.goals-dd-preset-card--active { border-right-color: var(--brand-accent, #0fb9a8); background: rgba(15,185,168,0.03); box-shadow: 0 1px 6px rgba(15,185,168,0.08); }
.goals-dd-preset-icon { font-size: 1.15rem; flex-shrink: 0; }
.goals-dd-preset-label { font-size: 0.82rem; font-weight: 700; color: #1a202c; }
.goals-dd-preset-amount { font-size: 0.72rem; color: rgba(0,0,0,0.45); margin-inline-start: auto; }

.goals-dd-custom-amount { margin-bottom: 1rem; }
.goals-dd-custom-amount label { font-size: 0.82rem; font-weight: 600; color: #1a202c; display: block; margin-bottom: 0.4rem; }
.goals-dd-vacation-preview { font-size: 0.88rem; font-weight: 600; color: var(--brand-teal, #0b6b63); }

/* ── Toggle rows (Family, Wellness) — now 2×2 grid ── */
.goals-dd-toggles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.goals-dd-toggle-row {
  padding: 0.75rem; border-radius: 14px; background: #fff;
  border: 1.5px solid rgba(0,0,0,0.06); display: flex;
  flex-direction: column; gap: 0.5rem;
}
.goals-dd-toggle-row-header { display: flex; align-items: center; gap: 0.5rem; }
.goals-dd-toggle-label { font-size: 0.82rem; font-weight: 700; color: #1a202c; cursor: pointer; flex: 1; }
.goals-dd-toggle-icon { font-size: 1.1rem; }
.goals-dd-toggle-detail {
  width: 100%; padding-top: 0.5rem;
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  border-top: 1px solid rgba(0,0,0,0.04);
}

/* Housing options */
.goals-dd-housing-options { display: flex; flex-direction: column; gap: 0.5rem; }

/* ── Combo Summary Cards (replaces flat goal-card list) ── */
.goals-summary-combo { display: flex; flex-direction: column; gap: 0.75rem; }
.goals-summary-combo-card {
  border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-xl, 14px); overflow: hidden;
  background: rgba(0,0,0,0.01);
}
.goals-combo-header {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1rem; cursor: pointer;
}
.goals-combo-icon { font-size: 1.3rem; }
.goals-combo-info { flex: 1; }
.goals-combo-name { font-size: 0.88rem; font-weight: 700; }
.goals-combo-meta { font-size: 0.68rem; color: #718096; margin-top: 0.1rem; }
.goals-combo-cost { font-size: 0.88rem; font-weight: 800; color: var(--brand-teal, #0b6b63); }
.goals-combo-chevron { font-size: 0.65rem; color: #a0aec0; transition: transform 0.2s; }
/* Detail hidden by default — shown via edit only */
.goals-combo-detail { display: none; }
.goals-combo-tl-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0; font-size: 0.75rem; color: #4a5568;
}
.goals-combo-tl-year { font-weight: 700; color: var(--brand-teal, #0b6b63); min-width: 35px; font-size: 0.72rem; }
.goals-combo-tl-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.goals-combo-tl-name { flex: 1; }
.goals-combo-tl-amount { font-weight: 600; color: #1a202c; font-size: 0.72rem; }
.goals-combo-tl-recurring { font-size: 0.68rem; color: var(--brand-teal, #0b6b63); background: rgba(15,185,168,0.08); padding: 0.1rem 0.4rem; border-radius: 4px; }

.goals-combo-actions {
  display: flex; border-top: 1px solid rgba(0,0,0,0.04); gap: 0;
}
.goals-combo-action-btn {
  flex: 1; padding: 0.5rem; border: none; background: transparent;
  font-size: 0.72rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.goals-combo-edit-btn { color: var(--brand-accent, #0fb9a8); }
.goals-combo-edit-btn:hover { background: rgba(15,185,168,0.04); }
.goals-combo-delete-btn { color: #cbd5e0; }
.goals-combo-delete-btn:hover { color: #e53e3e; background: rgba(229,62,62,0.04); }

/* ══════════════════════════════════════════════════════════════════════════
   DECISION LAYER — Premium Banking UI — Clean, Aligned, Minimalist
   ══════════════════════════════════════════════════════════════════════════ */

.goals-decision {
  margin-bottom: 1.5rem;
}
.goals-decision-q {
  font-size: 1rem;
  font-weight: 700;
  color: #1a202c;
  text-align: right;
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Card-based presets — slim horizontal cards with accent side border */
.goals-decision-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.goals-decision-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md, 10px);
  border: 1.5px solid rgba(0,0,0,0.06);
  border-right: 3.5px solid transparent;
  background: var(--white, #fff);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: start;
}
.goals-decision-card:hover {
  background: rgba(0,0,0,0.015);
  border-color: rgba(0,0,0,0.1);
  border-right-color: rgba(15,185,168,0.4);
}
.goals-decision-card--active {
  background: rgba(15,185,168,0.03);
  border-color: rgba(15,185,168,0.15);
  border-right-color: var(--brand-accent, #0fb9a8);
  box-shadow: 0 1px 6px rgba(15,185,168,0.08);
}
/* Preset-tier accent colors */
.goals-decision-card[data-preset="basic"] { border-right-color: #a0aec0; }
.goals-decision-card[data-preset="basic"].goals-decision-card--active { border-right-color: #718096; }
.goals-decision-card[data-preset="standard"] { border-right-color: rgba(15,185,168,0.35); }
.goals-decision-card[data-preset="standard"].goals-decision-card--active { border-right-color: var(--brand-accent, #0fb9a8); }
.goals-decision-card[data-preset="premium"] { border-right-color: rgba(214,158,46,0.35); }
.goals-decision-card[data-preset="premium"].goals-decision-card--active { border-right-color: #d69e2e; }
.goals-decision-card-icon { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.goals-decision-card-label { font-size: 0.82rem; font-weight: 700; color: #1a202c; }
.goals-decision-card-sub { font-size: 0.7rem; color: #718096; line-height: 1.35; }

/* Toggles (family, wellness) — slim rows with right accent + inline editor */
.goals-decision-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.goals-decision-toggle {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  border-right: 4px solid #e2e8f0;
  background: #fff;
  transition: all 0.2s ease;
  overflow: hidden;
}
.goals-decision-toggle:hover { border-right-color: rgba(15,185,168,0.3); }
.goals-decision-toggle--active {
  border-right-color: var(--brand-accent, #0fb9a8);
  background: rgba(15,185,168,0.02);
}
.goals-decision-toggle-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.875rem;
  cursor: pointer;
  transition: background 0.15s;
}
.goals-decision-toggle-header:hover { background: rgba(0,0,0,0.015); }
.goals-decision-toggle-icon { font-size: 1rem; flex-shrink: 0; width: 22px; text-align: center; }
.goals-decision-toggle-info { flex: 1; min-width: 0; }
.goals-decision-toggle-name { font-size: 0.75rem; font-weight: 700; color: #1a202c; display: block; }
.goals-decision-toggle-cost {
  font-family: var(--font-body, 'Heebo', sans-serif);
  font-size: 0.68rem; font-weight: 600;
  color: var(--brand-teal, #0b6b63);
  display: block; margin-top: 0.1rem;
  direction: ltr; text-align: right;
}

/* Toggle editor — slides open when active */
.goals-toggle-editor {
  display: none;
  padding: 0.5rem 0.875rem 0.65rem;
  background: rgba(0,0,0,0.015);
  border-top: 1px solid rgba(0,0,0,0.04);
}
.goals-decision-toggle--active .goals-toggle-editor { display: block; }
.goals-toggle-editor-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.goals-toggle-editor-row:first-child { margin-top: 0; }
.goals-toggle-editor-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: #a0aec0;
  white-space: nowrap;
  min-width: 28px;
}
.goals-toggle-slider {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 1.5px;
  background: #e0e0e0; outline: none;
}
.goals-toggle-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
}
.goals-toggle-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: none;
  background: #fff; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.goals-toggle-slider-val {
  font-family: var(--font-body, 'Heebo', sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--brand-teal, #0b6b63);
  min-width: 55px;
  text-align: left;
  direction: ltr;
}
.goals-toggle-years {
  width: 34px;
  padding: 0.12rem 0.2rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  font-size: 0.68rem;
  text-align: center;
  color: #2d3748;
  background: #fff;
  -moz-appearance: textfield;
}
.goals-toggle-years::-webkit-inner-spin-button,
.goals-toggle-years::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.goals-toggle-years:focus { border-color: var(--brand-accent, #0fb9a8); outline: none; }
.goals-toggle-monthly-eq {
  font-size: 0.62rem;
  font-weight: 600;
  color: #a0aec0;
  white-space: nowrap;
  margin-right: auto;
}

/* Slider input (legacy fallback) */
.goals-decision-slider-wrap {
  margin-bottom: 1.25rem;
  text-align: center;
}
.goals-decision-slider {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 1.5px;
  background: #e0e0e0; outline: none;
  margin-bottom: 0.5rem;
}
.goals-decision-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.04);
}
.goals-decision-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: none;
  background: #fff; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
/* Floating benchmark bubble */
.goals-benchmark-bubble {
  position: absolute;
  z-index: 1000;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, top 0.15s ease, left 0.15s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(30,42,58,0.88);
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transform: translateX(-50%);
}
.goals-benchmark-bubble[data-tone="below"] {
  background: rgba(231,76,60,0.85);
  border-color: rgba(231,76,60,0.3);
}
.goals-benchmark-bubble[data-tone="above"] {
  background: rgba(214,158,46,0.85);
  border-color: rgba(214,158,46,0.3);
}
.goals-benchmark-bubble[data-tone="average"] {
  background: rgba(15,185,168,0.85);
  border-color: rgba(15,185,168,0.3);
}

.goals-decision-slider-labels {
  display: flex; justify-content: space-between;
  font-size: 0.68rem; color: #a0aec0;
}

/* Hero Result — clean, centered */
.goals-decision-result {
  text-align: center;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
}
.goals-decision-hero {
  font-family: var(--font-body, 'Heebo', sans-serif);
  font-size: 2rem;
  font-weight: 900;
  color: var(--brand-teal, #0b6b63);
  line-height: 1;
  margin-bottom: 0.15rem;
  direction: ltr;
  display: inline-block;
}
.goals-decision-hero-suffix {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-teal, #0b6b63);
  opacity: 0.5;
}

/* Impact text */
.goals-decision-impact {
  text-align: center;
  font-size: 0.75rem;
  color: #718096;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.goals-decision-impact strong {
  color: var(--brand-teal, #0b6b63);
  font-weight: 700;
}
.goals-decision-impact em {
  font-style: normal;
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.04);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--brand-accent, #0fb9a8);
  margin-bottom: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   TUNER — Clean table layout, white thumb sliders, premium banking style
   ══════════════════════════════════════════════════════════════════════════ */

.goals-decision-tuner {
  background: #fff;
  border-radius: 12px;
  padding: 0.875rem;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(0,0,0,0.06);
}
.goals-tuner-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: #a0aec0;
  margin-bottom: 0.5rem;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Tuner row — table: icon | name+age | slider | amount */
.goals-tuner-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.03);
}
.goals-tuner-row:last-child { border-bottom: none; }
.goals-tuner-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  opacity: 0.8;
}
.goals-tuner-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #2d3748;
  min-width: 85px;
  flex-shrink: 0;
  line-height: 1.3;
}

/* ── Context questions (vehicle: hasCar, carAge, etc) ── */
.goals-context-questions {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.goals-context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
}
.goals-context-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #2d3748;
}
.goals-context-yesno {
  display: flex;
  gap: 0.25rem;
}
.goals-ctx-btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  color: #718096;
  cursor: pointer;
  transition: all 0.15s;
}
.goals-ctx-btn:hover { border-color: rgba(15,185,168,0.3); }
.goals-ctx-btn--active {
  background: var(--brand-teal, #0b6b63);
  border-color: var(--brand-teal, #0b6b63);
  color: #fff;
}
.goals-context-num {
  width: 48px;
  padding: 0.25rem 0.3rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 5px;
  font-size: 0.72rem;
  text-align: center;
  color: #2d3748;
  background: #fff;
  -moz-appearance: textfield;
}
.goals-context-num::-webkit-inner-spin-button,
.goals-context-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.goals-context-num:focus { border-color: var(--brand-accent, #0fb9a8); outline: none; }

/* THE SLIDER — thin gray track, white thumb with subtle shadow */
.goals-tuner-slider,
.goals-ms-slider {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 3px;
  border-radius: 1.5px;
  background: #e0e0e0;
  outline: none;
}
.goals-tuner-slider::-webkit-slider-thumb,
.goals-ms-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.04);
  transition: box-shadow 0.15s;
}
.goals-tuner-slider::-webkit-slider-thumb:hover,
.goals-ms-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.06);
}
.goals-tuner-slider::-moz-range-thumb,
.goals-ms-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%; border: none;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.04);
}

/* Amount — monospace, aligned */
.goals-tuner-val {
  font-family: var(--font-body, 'Heebo', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-teal, #0b6b63);
  min-width: 50px;
  text-align: left;
  direction: ltr;
}

/* Age range */
.goals-tuner-age {
  display: block;
  font-size: 0.58rem;
  font-weight: 500;
  color: #a0aec0;
  margin-top: 0.05rem;
}

/* Milestone section */
.goals-tuner-title--ms {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.goals-ms-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.03);
  transition: opacity 0.2s;
}
.goals-ms-row:last-child { border-bottom: none; }
.goals-ms-row--off { opacity: 0.25; }
.goals-ms-check {
  width: 15px; height: 15px;
  accent-color: var(--brand-accent, #0fb9a8);
  cursor: pointer; flex-shrink: 0;
}
.goals-ms-monthly {
  font-family: var(--font-body, 'Heebo', sans-serif);
  font-size: 0.62rem;
  font-weight: 600;
  color: #a0aec0;
  white-space: nowrap;
  min-width: 50px;
  text-align: left;
  direction: ltr;
}

/* Child tabs — pill style */
.goals-tuner-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.65rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding-bottom: 0.5rem;
}
.goals-tuner-tabs::-webkit-scrollbar { display: none; }
.goals-tuner-tab {
  flex-shrink: 0;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 58px;
}
.goals-tuner-tab:hover { border-color: rgba(15,185,168,0.3); }
.goals-tuner-tab--active {
  background: var(--brand-teal, #0b6b63);
  border-color: var(--brand-teal, #0b6b63);
  color: #fff;
}
.goals-tuner-tab-name { font-size: 0.68rem; font-weight: 700; line-height: 1.2; }
.goals-tuner-tab-age { font-size: 0.56rem; opacity: 0.6; }
.goals-tuner-tab--active .goals-tuner-tab-name,
.goals-tuner-tab--active .goals-tuner-tab-age { color: #fff; opacity: 1; }

/* ── Per-child panel ── */
.goals-tuner-kid-panel {
  animation: fadeIn 0.15s ease;
}

/* Copy button */
.goals-tuner-copy-wrap {
  text-align: left;
  margin-bottom: 0.4rem;
  position: relative;
}
.goals-tuner-copy-btn {
  font-size: 0.62rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 5px;
  background: #fff;
  color: #718096;
  cursor: pointer;
  transition: all 0.15s;
}
.goals-tuner-copy-btn:hover {
  border-color: var(--brand-accent, #0fb9a8);
  color: var(--brand-accent, #0fb9a8);
}
.goals-tuner-copy-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 100px;
}
.goals-tuner-copy-target {
  padding: 0.35rem 0.6rem;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 0.7rem;
  cursor: pointer;
  text-align: right;
  white-space: nowrap;
  color: #2d3748;
}
.goals-tuner-copy-target:hover {
  background: rgba(15,185,168,0.1);
  color: var(--brand-accent, #0fb9a8);
}

/* Editable age inputs */
.goals-tuner-age-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.58rem;
  color: #a0aec0;
  margin-top: 0.1rem;
  direction: ltr;
}
.goals-age-input {
  width: 26px;
  padding: 0.08rem 0.12rem;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 3px;
  font-size: 0.58rem;
  text-align: center;
  background: rgba(0,0,0,0.02);
  color: #718096;
  -moz-appearance: textfield;
}
.goals-age-input::-webkit-inner-spin-button,
.goals-age-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.goals-age-input:focus {
  border-color: var(--brand-accent, #0fb9a8);
  outline: none;
  background: #fff;
}

/* Past-range row */
.goals-tuner-row--past {
  opacity: 0.25;
}
.goals-tuner-row--past .goals-tuner-val {
  font-style: italic;
  color: #cbd5e0;
}

@media (max-width: 600px) {
  .goals-tuner-label { min-width: 65px; font-size: 0.68rem; }
  .goals-tuner-val { min-width: 40px; font-size: 0.68rem; }
  .goals-ms-row { flex-wrap: wrap; }
  .goals-tuner-tab { min-width: 50px; padding: 0.25rem 0.45rem; }
  .goals-age-input { width: 24px; }
}

/* CTA to reveal deep dive */
.goals-decision-cta {
  display: block;
  width: 100%;
  padding: 0.5rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #a0aec0;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.goals-decision-cta:hover { color: var(--brand-accent, #0fb9a8); }

/* No selection state */
.goals-decision-result--empty {
  background: rgba(0,0,0,0.01);
  border-color: rgba(0,0,0,0.04);
}
.goals-decision-result--empty .goals-decision-hero { color: #cbd5e0; }

@media (max-width: 600px) {
  .goals-decision-q { font-size: 0.9rem; }
  .goals-decision-hero { font-size: 1.6rem; }
  .goals-toggle-editor-row { flex-wrap: wrap; }
}

/* Readonly goal name */
.goal-name--readonly {
  font-size: 0.82rem; font-weight: 600; color: #1a202c;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .goals-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .goals-cat-card { padding: 1.25rem 0.75rem; min-height: 100px; }
  .goals-cat-card-icon { font-size: 1.8rem; }
  .goals-cat-card-title { font-size: 0.78rem; }
  .goals-dd-stage-grid { grid-template-columns: 1fr; }
  .goals-dd-ms-grid { grid-template-columns: 1fr; }
  .goals-dd-field-row { flex-direction: column; }
  .goals-dd-preset-cards { grid-template-columns: 1fr; }
  .goals-dd-toggles { grid-template-columns: 1fr; }
  .goals-dd-savings-row { flex-direction: column; align-items: flex-start; }
  .goals-dd-kid-timeline { overflow-x: auto; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM UX UPGRADE — Steps 1-4
   Typography · Tactile Controls · 3-Layer Diagnostics · Dashboard Grid
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   STEP 1: HERO NUMBERS & TYPOGRAPHY HIERARCHY
   ═══════════════════════════════════════════════════ */

/* Hero Number treatment — for surplus, gap, score, any commanding value */
.hero-number {
  font-family: var(--font-heading);
  font-size: var(--type-data-hero);
  font-weight: var(--fw-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  position: relative;
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Authority glow behind hero numbers */
.hero-number::after {
  content: '';
  position: absolute;
  inset: -12px -16px;
  border-radius: 16px;
  background: currentColor;
  opacity: 0.04;
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}

.hero-number--positive { color: var(--brand-teal); }
.hero-number--negative { color: var(--color-error); }
.hero-number--warning  { color: var(--color-warning); }
.hero-number--gold     { color: var(--gold); }

/* Sticky summary — surplus is now the boss */
.planner-sticky-summary .pss-val {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  position: relative;
}

.planner-sticky-summary .pss-val::after {
  content: '';
  position: absolute;
  inset: -4px -8px;
  border-radius: 8px;
  background: currentColor;
  opacity: 0.06;
  filter: blur(10px);
  z-index: -1;
}

/* Surplus bar hero value upgrade */
.surplus-bar-value {
  font-family: var(--font-heading);
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  position: relative;
}

.surplus-bar-value::after {
  content: '';
  position: absolute;
  inset: -6px -10px;
  border-radius: 10px;
  background: currentColor;
  opacity: 0.04;
  filter: blur(14px);
  z-index: -1;
}

/* Net worth display hero treatment */
.nw-value {
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
  position: relative;
  direction: ltr;
  unicode-bidi: isolate;
}

.nw-total-row .nw-value::after {
  content: '';
  position: absolute;
  inset: -6px -10px;
  border-radius: 10px;
  background: currentColor;
  opacity: 0.04;
  filter: blur(14px);
  z-index: -1;
}

/* NRS mini stat values — tabular, authoritative */
.nrs-mini-stat-value {
  font-size: 1.2rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* NRS snap card values — upgraded */
.nrs-snap-value {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}

/* Section titles — Frank Ruhl for gravitas */
.nrs-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Investment + expense totals */
.dynamic-section-total,
.wizard-total span:last-child,
.investment-total-value,
.osh-remainder-value {
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
}


/* ═══════════════════════════════════════════════════
   STEP 2: TACTILE CONTROLS
   ═══════════════════════════════════════════════════ */

/* ── 2A. Segmented Controls — Employment type ──── */

.employment-type-row {
  display: inline-flex !important;
  background: var(--soft-bg);
  border-radius: var(--radius-full);
  padding: 4px;
  gap: 0 !important;
  border: 1px solid var(--border-light);
  flex-wrap: nowrap !important;
}

.employment-type-btn {
  border: none !important;
  background: transparent !important;
  border-radius: var(--radius-full) !important;
  padding: 0.55rem 1.15rem !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative;
  z-index: 1;
  min-height: auto !important;
  box-shadow: none !important;
  white-space: nowrap;
}

.employment-type-btn:hover:not(.active) {
  color: var(--text-primary) !important;
  background: rgba(0, 0, 0, 0.03) !important;
}

.employment-type-btn.active {
  background: var(--white) !important;
  color: var(--text-primary) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

/* Gold override for step 1 */
#step-1 .employment-type-btn.active {
  background: var(--white) !important;
  color: var(--gold-dark) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 0 0 1px var(--gold-pale) !important;
}

/* ── 2B. Children Count — Stepper Chips ──── */

.children-count-row {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap;
}

.children-count-btn {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  border: 1.5px solid var(--border) !important;
  background: var(--white) !important;
  color: var(--text-secondary) !important;
  transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
  padding: 0 !important;
  min-height: auto !important;
}

.children-count-btn:hover:not(.active) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: var(--brand-accent) !important;
}

.children-count-btn.active {
  border-color: var(--brand-accent) !important;
  background: rgba(15, 185, 168, 0.08) !important;
  color: var(--brand-teal) !important;
  box-shadow: 0 0 0 3px rgba(15, 185, 168, 0.12) !important;
}

.children-count-btn--expecting {
  width: auto !important;
  padding: 0 1rem !important;
  font-size: 0.82rem !important;
}

/* ── 2C. Ownership buttons — Segmented ──── */

.ownership-btns-row {
  display: inline-flex !important;
  background: var(--soft-bg);
  border-radius: var(--radius-full);
  padding: 4px;
  gap: 0 !important;
  border: 1px solid var(--border-light);
  flex-wrap: wrap !important;
}

.ownership-btn {
  border: none !important;
  background: transparent !important;
  border-radius: var(--radius-full) !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: none !important;
  white-space: nowrap;
  min-height: auto !important;
}

.ownership-btn.active {
  background: var(--white) !important;
  color: var(--text-primary) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

/* ── 2D. Enhanced Input Focus ──── */

.planner-panel input[type="number"],
.planner-panel input[type="text"],
.planner-panel select {
  transition:
    border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.22s ease;
}

.planner-panel input[type="number"]:focus,
.planner-panel input[type="text"]:focus,
.planner-panel select:focus {
  border-color: var(--gold) !important;
  box-shadow:
    0 0 0 3px var(--gold-glow),
    0 4px 12px rgba(0, 0, 0, 0.04) !important;
  background: var(--white);
  outline: none;
}

/* Filled input — subtle gold tint */
.planner-panel input[type="number"]:not(:placeholder-shown):not(:focus),
.planner-panel input[type="text"]:not(:placeholder-shown):not(:focus) {
  background: rgba(201, 168, 76, 0.03);
}

/* Value inputs — tabular nums, bold data feel */
.planner-panel input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Input acknowledge animation */
@keyframes inputAck {
  0%   { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.25); }
  70%  { box-shadow: 0 0 0 8px rgba(201, 168, 76, 0); }
  100% { box-shadow: none; }
}

.input-just-changed {
  animation: inputAck 0.5s ease !important;
}

/* ── 2E. Slider Tooltip ──── */

.slider-wrap {
  position: relative;
}

.slider-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--brand-navy);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  z-index: 10;
}

.slider-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--brand-navy);
}

.slider-wrap:active .slider-tooltip,
.slider-wrap:focus-within .slider-tooltip {
  opacity: 1;
}

/* ── 2F. Button Press Depth ──── */

.planner-next:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 1px 4px rgba(201, 168, 76, 0.15) !important;
  transition: all 0.08s ease !important;
}

.calc-btn:active:not(.planner-prev) {
  transform: translateY(1px) scale(0.98);
  transition: all 0.08s ease;
}

/* ── 2G. Progress bar shimmer ──── */

.planner-progress-fill {
  position: relative;
  overflow: hidden;
}

.planner-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: progressShimmer 2.5s infinite;
}

@keyframes progressShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════════
   STEP 3: 3-LAYER DIAGNOSTIC VIEW
   ═══════════════════════════════════════════════════ */

/* ── Layer 1: CLIENT DATA — factual, neutral ──── */

.nrs-layer-data {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 1.125rem 1.375rem;
}

.nrs-layer-data .nrs-snap-label,
.nrs-layer-data .nrs-diag-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
}

.nrs-layer-data .nrs-snap-value {
  color: var(--text-primary);
}

/* ── Layer 2: SYSTEM INSIGHTS — gold intelligence ──── */

.nrs-layer-insight {
  background: linear-gradient(135deg, #faf8f0 0%, #f7f3e6 100%);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Gold left-edge accent */
.nrs-layer-insight::before {
  content: '';
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-light) 100%);
}

.nrs-layer-insight .nrs-snap-label {
  color: var(--gold-dark);
  opacity: 0.7;
}

.nrs-insight-eyebrow {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.75rem;
  opacity: 0.65;
}

/* ── Layer 3: ADVISOR FLAGS — red/orange alerts ──── */

.nrs-layer-flag {
  background: rgba(185, 28, 28, 0.03);
  border: 1px solid rgba(185, 28, 28, 0.12);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
}

.nrs-layer-flag::before {
  content: '';
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-error);
}

.nrs-flag-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-error);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.nrs-flag-body { flex: 1; min-width: 0; }

.nrs-flag-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-error-text);
  margin-bottom: 0.2rem;
}

.nrs-flag-text {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(185, 28, 28, 0.7);
  line-height: 1.5;
}

/* Warning variant (orange) */
.nrs-layer-flag--warning {
  background: rgba(245, 158, 11, 0.04);
  border-color: rgba(245, 158, 11, 0.15);
}

.nrs-layer-flag--warning::before {
  background: var(--color-warning);
}

.nrs-layer-flag--warning .nrs-flag-icon {
  background: var(--color-warning);
}

.nrs-layer-flag--warning .nrs-flag-title {
  color: #78450b;
}

.nrs-layer-flag--warning .nrs-flag-text {
  color: rgba(180, 83, 9, 0.65);
}

/* Story card → insight layer styling */
.nrs-story-card {
  background: linear-gradient(135deg, #faf8f0 0%, #f7f3e6 100%) !important;
  border: 1px solid rgba(201, 168, 76, 0.18) !important;
  position: relative;
  overflow: hidden;
}

.nrs-story-card::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-light) 100%);
}

.nrs-story-eyebrow {
  color: var(--gold-dark) !important;
}

/* Diagnosis rows — upgraded with layer system */
.nrs-diag-row {
  border-radius: 14px;
}

/* Positive row — gold insight layer */
.nrs-diag-row--positive {
  background: linear-gradient(135deg, #faf8f0 0%, #f7f3e6 100%) !important;
  border: 1px solid rgba(201, 168, 76, 0.15) !important;
  position: relative;
  overflow: hidden;
}

.nrs-diag-row--positive::before {
  content: '';
  position: absolute;
  top: 0.75rem;
  bottom: 0.75rem;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
}

.nrs-diag-row--positive .nrs-diag-icon {
  color: var(--gold-dark);
  opacity: 1;
}

/* Snapshot cards → data layer */
.nrs-snap-card {
  background: var(--white) !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nrs-snap-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* Scenario cards — insight layer on hover */
.nrs-scenario-btn {
  border: 1.5px solid rgba(0, 0, 0, 0.06) !important;
  background: var(--white) !important;
}

.nrs-scenario-btn:hover {
  background: linear-gradient(135deg, #faf8f0 0%, #f7f3e6 100%) !important;
  border-color: rgba(201, 168, 76, 0.22) !important;
}

.nrs-scenario-btn.active {
  background: linear-gradient(135deg, #faf8f0 0%, #f7f3e6 100%) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-pale) !important;
}


/* ═══════════════════════════════════════════════════
   STEP 4: DASHBOARD GRID + MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════ */

/* ── 4A. Dashboard Grid for Step 6 ──── */

@media (min-width: 1024px) {
  #step-6 .nrs-card.calc-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 1.75rem;
    padding: 2.5rem;
  }

  /* Navigation dots + momentum + hero chart span full width */
  #step-6 .nrs-dots,
  #step-6 .step-momentum,
  #step-6 .planner-journey-wrap--hero,
  #step-6 .nrs-card > .planner-nav-btns,
  #step-6 .nrs-card > div[style*="display:none"],
  #step-6 #legacy-results-compat {
    grid-column: 1 / -1;
  }

  /* Hero chart negative margins must compensate grid padding */
  #step-6 .planner-journey-wrap--hero {
    margin: -2.5rem -2.5rem 1.5rem;
    padding: 1.5rem 2rem 0.75rem;
  }

  /* Hero spans full width — the big reveal */
  .nrs-screen--hero {
    grid-column: 1 / -1;
  }

  /* Story spans full width (chart hidden) */
  .nrs-screen--story {
    grid-column: 1 / -1;
  }

  /* Insights full width */
  .nrs-screen--insights {
    grid-column: 1 / -1;
  }

  /* Actions left, Score right */
  .nrs-screen--actions {
    grid-column: 1;
    grid-row: auto;
  }

  .nrs-screen--score {
    grid-column: 2;
    grid-row: auto;
  }

  /* Chart + Score get slight stretch */
  .nrs-screen--chart .nrs-chart-wrap {
    height: 280px;
  }

  /* Remove single-column dividers in grid */
  .nrs-screen {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Each grid cell gets card treatment */
  .nrs-screen--story,
  .nrs-screen--chart,
  .nrs-screen--actions,
  .nrs-screen--score {
    background: var(--white);
    border-radius: 20px;
    padding: 1.75rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  /* Hero keeps clean look — no card */
  .nrs-screen--hero {
    background: transparent;
    border: none;
    box-shadow: none;
    padding-bottom: 1rem !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  /* Full-width elements at bottom */
  #step-6 .planner-nav-btns,
  #step-6 .planner-disclaimer-box,
  #step-6 .planner-calc-hub {
    grid-column: 1 / -1;
  }
  #step-6 .planner-nav-btns {
    margin-top: 1rem;
  }
}

/* ── 4B. Stagger Animation for Dashboard Cards ──── */

@keyframes dashboardCardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Each NRS screen stagger-reveals */
.nrs-screen.nrs-revealed {
  animation: dashboardCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nrs-screen--hero.nrs-revealed    { animation-delay: 0s; }
.nrs-screen--story.nrs-revealed   { animation-delay: 0.1s; }
.nrs-screen--insights.nrs-revealed { animation-delay: 0.2s; }
.nrs-screen--actions.nrs-revealed { animation-delay: 0.3s; }
.nrs-screen--score.nrs-revealed   { animation-delay: 0.4s; }

/* ── 4C. Step Transition Enhancement ──── */

/* Outgoing step — quick dissolve */
@keyframes stepCardExit {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
    filter: blur(1px);
  }
}

.planner-panel.step-exiting .calc-card {
  animation: stepCardExit 0.2s ease forwards;
}

/* Incoming step — children stagger */
@keyframes childStaggerIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.planner-panel.active .calc-card > .step1-section,
.planner-panel.active .calc-card > .step2-phase,
.planner-panel.active .calc-card > .assets-phase,
.planner-panel.active .calc-card > h2,
.planner-panel.active .calc-card > .planner-nav-btns {
  animation: childStaggerIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.planner-panel.active .calc-card > *:nth-child(1) { animation-delay: 0.05s; }
.planner-panel.active .calc-card > *:nth-child(2) { animation-delay: 0.1s; }
.planner-panel.active .calc-card > *:nth-child(3) { animation-delay: 0.15s; }
.planner-panel.active .calc-card > *:nth-child(4) { animation-delay: 0.2s; }
.planner-panel.active .calc-card > *:nth-child(5) { animation-delay: 0.25s; }
.planner-panel.active .calc-card > *:nth-child(6) { animation-delay: 0.3s; }
.planner-panel.active .calc-card > *:nth-child(7) { animation-delay: 0.32s; }
.planner-panel.active .calc-card > *:nth-child(8) { animation-delay: 0.34s; }

/* ── 4D. Skeleton Loading States ──── */

@keyframes skeletonShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--soft-bg) 25%,
    rgba(255, 255, 255, 0.6) 50%,
    var(--soft-bg) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
}

/* ── 4E. Number count-up pop — enhanced ──── */

@keyframes heroNumberReveal {
  0%   { opacity: 0; transform: scale(0.7) translateY(8px); filter: blur(4px); }
  60%  { opacity: 1; transform: scale(1.05) translateY(-2px); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

.hero-number-reveal {
  animation: heroNumberReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── 4F. Card surface refinement — frosted glass feel ──── */

.planner-panel .calc-card {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── 4G. Responsive — restore single column on tablet ──── */

@media (max-width: 1023px) {
  #step-6 .nrs-card.calc-card {
    display: block;
  }

  .nrs-screen {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .nrs-screen:last-of-type {
    border-bottom: none;
  }
}

/* ── 4H. Reduced Motion — respect accessibility ──── */

@media (prefers-reduced-motion: reduce) {
  .nrs-screen.nrs-revealed {
    animation: none;
  }

  .planner-panel.step-exiting .calc-card {
    animation: none;
  }

  .planner-panel.active .calc-card > * {
    animation: none !important;
  }

  .planner-progress-fill::after {
    animation: none;
  }

  .hero-number-reveal {
    animation: none;
  }

  .skeleton {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════
   Section Icons & Visual Polish
   ══════════════════════════════════════════════════ */

/* ── Section emoji icons next to titles ──── */
.section-icon {
  display: inline-block;
  font-size: 1.15em;
  margin-left: 0.3rem;
  vertical-align: middle;
  line-height: 1;
}

/* ── Stepper emoji icons ──── */
.step-emoji {
  font-size: 0.85em;
  margin-left: 0.2rem;
  vertical-align: middle;
  line-height: 1;
}

/* Hide stepper emojis on very small screens to save space */
@media (max-width: 480px) {
  .step-emoji { display: none; }
}

/* ── Ownership buttons with icons ──── */
.ownership-btn--with-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.65rem 1rem !important;
  min-width: 0 !important;
}

.ownership-icon {
  font-size: 1.35rem;
  line-height: 1;
  display: block;
}

/* ── Ownership row — card layout for icon buttons ──── */
.ownership-btns-row {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.ownership-btn--with-icon {
  flex: 1 1 0 !important;
  min-width: 90px !important;
  border-radius: var(--radius-lg, 12px) !important;
  border: 1.5px solid var(--border-light, #e5e7eb) !important;
  background: var(--white, #fff) !important;
  padding: 0.85rem 0.5rem !important;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.ownership-btn--with-icon:hover {
  border-color: var(--brand-accent, #0fb9a8) !important;
  box-shadow: 0 2px 8px rgba(15, 185, 168, 0.12) !important;
  transform: translateY(-1px);
}

.ownership-btn--with-icon.active {
  border-color: var(--brand-accent, #0fb9a8) !important;
  background: rgba(15, 185, 168, 0.06) !important;
  box-shadow:
    0 0 0 2px rgba(15, 185, 168, 0.18),
    0 2px 8px rgba(15, 185, 168, 0.1) !important;
}

/* ── Field label with icon (money management question) ──── */
.planner-ownership-section .planner-field-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}