/* ==========================================================================
   PRAGYA · GLOBAL CSS  ·  v1
   Shared stylesheet for all 32-lesson mockup files.

   COLOR SYSTEM (corrected traffic-light):
     Foundation   warm taupe   the welcoming ground
     STOP         red          pause, don't move yet
     THINK        amber        proceed with caution
     TRADE        green        now go, you're ready
     REVIEW       blue         calm reflection
     CLIMAX       gold         the warm close (with ceremonial treatment in M6b)

   Backgrounds stay white throughout. Active nav and progress fill stay blue
   as a UI signal (you-are-here) independent of phase identity.
   ========================================================================== */


/* ============ DESIGN TOKENS ============ */
:root {
  /* Page surfaces */
  --bg-page: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-raised: #F8FAFC;
  --bg-hover: #F1F5F9;

  /* Text */
  --text-primary: #111318;
  --text-secondary: #334155;
  --text-muted: #64748B;

  /* Borders */
  --border: #E5E7EB;
  --border-strong: #CBD5E1;

  /* STOP — red (pause first) */
  --red-bg: #FFF5F5;
  --red-border: #FECACA;
  --red-signal: #DC2626;
  --red-text: #7F1D1D;

  /* THINK — amber (caution) */
  --amber-bg: #FFFBEB;
  --amber-border: #FDE68A;
  --amber-signal: #D97706;
  --amber-text: #78350F;

  /* TRADE — green (now go) */
  --green-bg: #F0FBF4;
  --green-border: #86EFAC;
  --green-signal: #16A34A;
  --green-text: #14532D;

  /* REVIEW — blue (calm reflection) */
  --blue-bg: #EFF6FF;
  --blue-border: #BFDBFE;
  --blue-signal: #1D4ED8;
  --blue-text: #1E3A8A;

  /* Foundation — warm taupe (welcoming ground) */
  --foundation-bg: #FAF6F0;
  --foundation-border: #E8DECF;
  --foundation-signal: #8B6F47;
  --foundation-text: #5C4A2F;

  /* CLIMAX — Pragya gold */
  --pragya-gold: #FBBF24;
  --pragya-gold-warm: #F59E0B;
  --pragya-gold-deep: #92400E;
  --pragya-gold-soft: #FEF3C7;
  --pragya-gold-cream: #FFFBEB;

  /* Auxiliary palette (used inside specific lesson components) */
  --steel: #64748B;
  --indigo: #7C3AED;
  --indigo-bg: #F5F3FF;
  --indigo-border: #DDD6FE;
  --orange: #EA580C;
  --orange-bg: #FFF7ED;
  --orange-border: #FED7AA;
  --cyan: #0891B2;
  --cyan-bg: #ECFEFF;
  --cyan-border: #A5F3FC;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.1);
}


/* ============ RESET ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-page);
  color: var(--text-secondary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--blue-signal); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--text-primary); }

::selection { background: #BBEED0; color: var(--green-text); }


/* ============ APP LAYOUT ============ */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 260px; flex-shrink: 0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-right: 1px solid var(--border);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  box-shadow: inset -1px 0 0 rgba(15,23,42,0.02);
  display: flex; flex-direction: column;
}

.app-main { flex: 1; min-width: 0; background: var(--bg-page); }


/* ============ BRAND BLOCK ============ */
.brand { padding: 24px 20px 20px; border-bottom: 1px solid var(--border); }
.brand-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.brand-deva {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 28px; color: var(--pragya-gold);
  font-weight: 700; line-height: 1;
}
.brand-name {
  font-family: 'Inter', sans-serif;
  font-size: 19px; font-weight: 800;
  color: var(--text-primary); letter-spacing: -0.02em;
}
.brand-tagline { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }


/* ============ PROGRESS ============ */
.progress { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.progress-meta { display: flex; justify-content: space-between; margin-bottom: 8px; }
.progress-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--text-muted);
}
.progress-num {
  font-size: 11px; font-weight: 700; color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}
.progress-track { height: 6px; background: var(--bg-raised); border-radius: 3px; overflow: hidden; }
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-signal), #2563eb);
  border-radius: 3px; transition: width 0.5s ease;
}


/* ============ NAV ============ */
.nav-section { padding: 12px 12px; }
.nav-list { list-style: none; display: flex; flex-direction: column; gap: 1px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: all 0.15s;
  border-left: 3px solid transparent;
  padding-left: 9px;
}
.nav-item:hover { background: var(--bg-raised); color: var(--text-primary); }
.nav-item.active {
  background: var(--blue-bg); color: var(--blue-signal);
  font-weight: 700; border-left-color: var(--blue-signal);
}
.nav-item.disabled { color: #cbd5e1; cursor: not-allowed; }
.nav-item.disabled:hover { background: transparent; color: #cbd5e1; }

.nav-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  background: var(--bg-raised); color: var(--text-muted);
  padding: 2px 6px; border-radius: 4px;
  min-width: 28px; text-align: center; flex-shrink: 0;
}
.nav-item.active .nav-num { background: var(--blue-signal); color: white; }


/* ============ PHASE LABELS (sidebar section dividers) ============ */
.phase-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; padding: 12px 12px 6px;
  display: flex; align-items: center; gap: 8px;
}
.phase-label .phase-dot { width: 8px; height: 8px; border-radius: 50%; }

.phase-label.foundation { color: var(--foundation-signal); }
.phase-label.foundation .phase-dot { background: var(--foundation-signal); }

.phase-label.stop { color: var(--red-signal); }
.phase-label.stop .phase-dot { background: var(--red-signal); }

.phase-label.think { color: var(--amber-signal); }
.phase-label.think .phase-dot { background: var(--amber-signal); }

.phase-label.trade { color: var(--green-signal); }
.phase-label.trade .phase-dot { background: var(--green-signal); }

.phase-label.review { color: var(--blue-signal); }
.phase-label.review .phase-dot { background: var(--blue-signal); }

.phase-label.climax { color: var(--pragya-gold-deep); }
.phase-label.climax .phase-dot { background: var(--pragya-gold); }


/* ============ HEADER ============ */
.course-header {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 14px 32px;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 10;
}
.header-phase {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.header-phase strong { color: var(--text-primary); }
.header-divider { width: 1px; height: 14px; background: var(--border); }

.numbers-pill {
  background: var(--blue-bg); color: var(--blue-signal);
  border: 1px solid var(--blue-border);
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.numbers-pill:hover { background: #DBEAFE; border-color: #93C5FD; }


/* ============ PAGE BODY ============ */
.page-body { padding: 0 32px; max-width: 920px; margin: 0 auto; }
.page { padding: 40px 0 80px; border-bottom: 1px solid var(--border); display: none; }
.page.active { display: block; }
.page:last-child { border-bottom: none; }


/* ============ LESSON META + TAGS ============ */
.lesson-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}

.lesson-tag, .phase-tag {
  padding: 6px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.08em;
}
.lesson-tag {
  background: var(--bg-raised); color: var(--text-primary);
  border: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
}
.lesson-tag.new {
  background: var(--amber-bg); color: var(--amber-text);
  border-color: var(--amber-border);
}

/* Phase tags — solid pills, traffic-light system. White text on coloured bg
   so they read as a confident header, not a whisper. */
.phase-tag.foundation { background: #8B6F47; color: #fff; border: 1px solid #8B6F47; }
.phase-tag.stop       { background: #DC2626; color: #fff; border: 1px solid #DC2626; }
.phase-tag.think      { background: #D97706; color: #fff; border: 1px solid #D97706; }
.phase-tag.trade      { background: #16A34A; color: #fff; border: 1px solid #16A34A; }
.phase-tag.review     { background: #1D4ED8; color: #fff; border: 1px solid #1D4ED8; }
.phase-tag.climax {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  color: #78350F;
  border: 1px solid #FBBF24;
}


/* ============ LESSON TYPOGRAPHY ============ */
.lesson-title {
  font-size: 36px; font-weight: 900; color: var(--text-primary);
  letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 12px;
}
.lesson-subtitle {
  font-size: 17px; color: var(--text-secondary);
  line-height: 1.55; font-weight: 400; margin-bottom: 24px;
}
.lesson-body { margin-top: 8px; }
.lesson-body p {
  margin-bottom: 16px; color: var(--text-secondary);
  font-size: 16px; line-height: 1.7;
}
.lesson-body strong { color: var(--text-primary); font-weight: 700; }
.lesson-body em { font-style: italic; color: var(--text-secondary); }
.lesson-body h2 {
  font-size: 22px; font-weight: 800; color: var(--text-primary);
  letter-spacing: -0.01em; margin: 32px 0 14px;
}
.lesson-body h3 {
  font-size: 17px; font-weight: 700; color: var(--text-primary);
  margin: 24px 0 10px;
}
.lesson-body ul, .lesson-body ol { margin: 12px 0 16px 0; padding-left: 24px; }
.lesson-body li { margin-bottom: 8px; color: var(--text-secondary); line-height: 1.65; }
.lesson-body li strong { color: var(--text-primary); }


/* ============ HERO PLACEHOLDER ============ */
.hero {
  margin: 16px 0 28px;
  border: 2px dashed var(--border-strong);
  background: var(--bg-raised);
  border-radius: 16px; aspect-ratio: 16/9;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 8px;
  text-align: center; padding: 24px;
}
.hero-icon { font-size: 32px; opacity: 0.5; }
.hero-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted);
}
.hero-desc {
  font-size: 13px; color: var(--text-muted); font-style: italic;
  max-width: 520px; line-height: 1.5;
}
.hero-prompt-ref {
  font-size: 11px; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  background: white; padding: 4px 10px;
  border-radius: 6px; border: 1px solid var(--border);
}


/* ============ SUMMARY CARD (slate, 30-second hook) ============ */
/* Deliberately non-framework colour so it never clashes with the phase tag
   on the same page (REVIEW = blue, etc). */
.summary-card {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-left: 4px solid #475569;
  border-radius: 12px; padding: 18px 20px; margin: 16px 0 28px;
}
.summary-text { font-size: 16px; color: #334155; line-height: 1.65; }
.summary-text strong { color: #0F172A; font-weight: 700; }


/* ============ CALLOUTS (traffic-light reused for emotional weight) ============ */
.callout { border-radius: 12px; padding: 16px 20px; margin: 20px 0; }
.callout-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.callout-icon { font-size: 14px; }
.callout p { margin-bottom: 6px; line-height: 1.65; }
.callout p:last-child { margin-bottom: 0; }

.callout-pause {
  background: var(--red-bg); border: 1px solid var(--red-border);
  border-left: 4px solid var(--red-signal);
}
.callout-pause .callout-label, .callout-pause p { color: var(--red-text); }

.callout-think {
  background: var(--amber-bg); border: 1px solid var(--amber-border);
  border-left: 4px solid var(--amber-signal);
}
.callout-think .callout-label, .callout-think p { color: var(--amber-text); }

.callout-action {
  background: var(--green-bg); border: 1px solid var(--green-border);
  border-left: 4px solid var(--green-signal);
}
.callout-action .callout-label, .callout-action p { color: var(--green-text); }


/* ============ PRAGYA NOTE (gold, founder voice) ============ */
.pragya-note {
  background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%);
  border: 1px solid #FDE68A;
  border-left: 4px solid var(--pragya-gold);
  border-radius: 12px; padding: 18px 20px; margin: 24px 0;
}
.pragya-note-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pragya-avatar {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #FDE68A 0%, #FBBF24 50%, #F97316 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.20);
}
.pragya-note-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--pragya-gold-deep);
  display: flex; align-items: center; gap: 4px;
}
.pragya-note-label .deva,
.deva {
  font-family: 'Noto Sans Devanagari', sans-serif;
  color: var(--pragya-gold); font-size: 14px;
}
.pragya-note-body { color: var(--text-primary); font-size: 15px; line-height: 1.65; }
.pragya-note-body strong { color: var(--text-primary); }
.pragya-note-body em { font-style: italic; }


/* ============ UNLOCK BOX (green, what you just learned) ============ */
.unlock-box {
  background: var(--green-bg); border: 1px solid var(--green-border);
  border-left: 4px solid var(--green-signal);
  border-radius: 12px; padding: 18px 20px; margin: 28px 0 20px;
}
.unlock-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--green-text); margin-bottom: 8px;
}
.unlock-box ul { margin: 0; padding-left: 20px; }
.unlock-box li { color: var(--green-text); margin-bottom: 6px; font-size: 14px; }


/* ============ LESSON NAV (prev/next buttons) ============ */
.lesson-nav {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border);
}
.nav-btn {
  background: white; border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 10px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.nav-btn:hover:not(:disabled) {
  border-color: var(--border-strong); color: var(--text-primary);
  background: var(--bg-raised);
}
.nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.nav-btn.next {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: white; border: none; font-weight: 700;
}
.nav-btn.next:hover:not(:disabled) {
  background: linear-gradient(180deg, #2563eb 0%, #1e40af 100%);
  box-shadow: 0 8px 18px rgba(29,78,216,0.24);
}
/* Special gold next-button for entering CLIMAX */
.nav-btn.next.gold {
  background: linear-gradient(180deg, var(--pragya-gold-warm) 0%, #d97706 100%);
}
.nav-btn.next.gold:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--pragya-gold) 0%, var(--pragya-gold-warm) 100%);
  box-shadow: 0 8px 18px rgba(251,191,36,0.4);
}


/* ============ PHASE STRIP (sticky, below header, every page) ============ */
.phase-strip {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 10px 32px;
  position: sticky; top: 51px; z-index: 9;
  display: flex; justify-content: center;
}
.phase-strip-inner {
  display: flex; align-items: center; gap: 0;
  max-width: 920px; width: 100%;
}
.phase-step {
  display: flex; align-items: center; gap: 8px;
  flex: 1; padding: 6px 10px; border-radius: 8px;
  transition: background 0.2s;
}
.phase-step-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg-raised); border: 2px solid var(--border-strong);
  flex-shrink: 0; transition: all 0.2s;
}
.phase-step-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); white-space: nowrap;
}
.phase-step-line {
  flex: 0 0 16px; height: 1px; background: var(--border); margin: 0 -4px;
}

.phase-step.past .phase-step-dot {
  background: var(--text-muted); border-color: var(--text-muted); opacity: 0.45;
}
.phase-step.past .phase-step-label {
  color: var(--text-muted); opacity: 0.65;
}

/* Active step — color reflects the phase */
.phase-step.active { font-weight: 800; }
.phase-step.active.foundation .phase-step-dot {
  background: var(--foundation-signal); border-color: var(--foundation-signal);
  box-shadow: 0 0 0 4px rgba(139,111,71,0.18);
}
.phase-step.active.foundation .phase-step-label { color: var(--foundation-signal); }

.phase-step.active.stop .phase-step-dot {
  background: var(--red-signal); border-color: var(--red-signal);
  box-shadow: 0 0 0 4px rgba(220,38,38,0.18);
}
.phase-step.active.stop .phase-step-label { color: var(--red-signal); }

.phase-step.active.think .phase-step-dot {
  background: var(--amber-signal); border-color: var(--amber-signal);
  box-shadow: 0 0 0 4px rgba(217,119,6,0.18);
}
.phase-step.active.think .phase-step-label { color: var(--amber-signal); }

.phase-step.active.trade .phase-step-dot {
  background: var(--green-signal); border-color: var(--green-signal);
  box-shadow: 0 0 0 4px rgba(22,163,74,0.18);
}
.phase-step.active.trade .phase-step-label { color: var(--green-signal); }

.phase-step.active.review .phase-step-dot {
  background: var(--blue-signal); border-color: var(--blue-signal);
  box-shadow: 0 0 0 4px rgba(29,78,216,0.18);
}
.phase-step.active.review .phase-step-label { color: var(--blue-signal); }

.phase-step.active.climax .phase-step-dot {
  background: var(--pragya-gold); border-color: var(--pragya-gold);
  box-shadow: 0 0 0 5px rgba(251,191,36,0.28), 0 0 12px rgba(251,191,36,0.4);
}
.phase-step.active.climax .phase-step-label { color: var(--pragya-gold-deep); }


/* ============ PHASE OPENER (only on threshold lessons: 0, 5, 10, 22, 28, 31) ============ */
.phase-opener {
  border-radius: 20px; padding: 32px;
  margin: 0 0 28px 0;
  display: flex; align-items: center; gap: 24px;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
.phase-opener.foundation {
  background: linear-gradient(135deg, var(--foundation-bg) 0%, white 60%);
  border: 1px solid var(--foundation-border);
}
.phase-opener.stop {
  background: linear-gradient(135deg, var(--red-bg) 0%, white 60%);
  border: 1px solid var(--red-border);
}
.phase-opener.think {
  background: linear-gradient(135deg, var(--amber-bg) 0%, white 60%);
  border: 1px solid var(--amber-border);
}
.phase-opener.trade {
  background: linear-gradient(135deg, var(--green-bg) 0%, white 60%);
  border: 1px solid var(--green-border);
}
.phase-opener.review {
  background: linear-gradient(135deg, var(--blue-bg) 0%, white 60%);
  border: 1px solid var(--blue-border);
}

/* Climax opener — ceremonial treatment */
.phase-opener.climax {
  border-radius: 24px; padding: 36px; gap: 28px;
  background: linear-gradient(135deg, var(--pragya-gold-cream) 0%, var(--pragya-gold-soft) 50%, white 100%);
  border: 2px solid var(--pragya-gold);
  box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.10), var(--shadow-lg);
}
.phase-opener.climax::before {
  content: '';
  position: absolute; top: -50%; right: -20%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(251,191,36,0.15) 0%, transparent 60%);
  pointer-events: none;
}

.phase-opener-orb {
  width: 100px; height: 100px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 900; color: white;
  letter-spacing: -0.02em; flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.1);
}
.phase-opener.foundation .phase-opener-orb {
  background: linear-gradient(135deg, var(--foundation-signal) 0%, #6b5535 100%);
}
.phase-opener.stop .phase-opener-orb {
  background: linear-gradient(135deg, var(--red-signal) 0%, #991b1b 100%);
}
.phase-opener.think .phase-opener-orb {
  background: linear-gradient(135deg, var(--amber-signal) 0%, #b45309 100%);
}
.phase-opener.trade .phase-opener-orb {
  background: linear-gradient(135deg, var(--green-signal) 0%, #15803d 100%);
}
.phase-opener.review .phase-opener-orb {
  background: linear-gradient(135deg, var(--blue-signal) 0%, #1e3a8a 100%);
}

/* Climax orb — ceremonial */
.phase-opener.climax .phase-opener-orb {
  width: 120px; height: 120px; font-size: 48px;
  background: linear-gradient(135deg, var(--pragya-gold) 0%, var(--pragya-gold-warm) 70%, var(--pragya-gold-deep) 100%);
  box-shadow:
    inset 0 -6px 12px rgba(0,0,0,0.15),
    inset 0 4px 8px rgba(255,255,255,0.3),
    0 8px 24px rgba(251, 191, 36, 0.4),
    0 0 0 4px white,
    0 0 0 6px rgba(251, 191, 36, 0.4);
  position: relative; z-index: 1;
}

.phase-opener-content { flex: 1; position: relative; z-index: 1; }
.phase-opener-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 800; color: var(--text-muted); margin-bottom: 4px;
}
.phase-opener-title {
  font-size: 28px; font-weight: 900; color: var(--text-primary);
  letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 8px;
}
.phase-opener.foundation .phase-opener-title { color: var(--foundation-text); }
.phase-opener.stop .phase-opener-title { color: var(--red-text); }
.phase-opener.think .phase-opener-title { color: var(--amber-text); }
.phase-opener.trade .phase-opener-title { color: var(--green-text); }
.phase-opener.review .phase-opener-title { color: var(--blue-text); }
.phase-opener.climax .phase-opener-title { color: var(--pragya-gold-deep); font-size: 32px; }
.phase-opener.climax .phase-opener-eyebrow { color: var(--pragya-gold-deep); }

.phase-opener-statement {
  font-size: 16px; color: var(--text-secondary);
  line-height: 1.6; max-width: 580px;
}
.phase-opener-statement em { font-style: italic; }


/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .page-body { padding: 0 20px; }
  .lesson-title { font-size: 28px; }

  .phase-strip { padding: 8px 16px; top: 49px; }
  .phase-step-label { font-size: 10px; }
  .phase-step-line { flex: 0 0 8px; }

  .phase-opener {
    flex-direction: column; text-align: center;
    padding: 24px; gap: 16px;
  }
  .phase-opener-orb { width: 80px; height: 80px; font-size: 30px; }
  .phase-opener.climax .phase-opener-orb { width: 90px; height: 90px; font-size: 36px; }
  .phase-opener-title { font-size: 22px; }
  .phase-opener.climax .phase-opener-title { font-size: 24px; }
}