/* ClarityCommand Legacy — shared styles (cloned from life-styles.css; identical design system) */
/*
 * ClarityCommand Life — shared CSS
 *
 * Extracted from per-lesson HTML files. All six Life lessons reference this
 * via <link rel="stylesheet" href="/life-styles.css"> in their <head>.
 *
 * Editing this file changes the look of every Life lesson at once.
 *
 * v1.8 — May 2026 (hotfix: button-element .lstep reset)
 *   ! The room-router sidebar replaced legacy <a class="lstep"> anchors
 *     with <button class="lstep"> elements. The base .lstep rule sets
 *     `color` but never reset `background`/`border`, so on lessons
 *     using the new button form the sidebar rows rendered as
 *     white-on-white browser-default buttons — labels invisible.
 *     Reset is added to `body[data-room-router] .lstep` so legacy
 *     anchor-based lessons are unaffected.
 *
 * v1.7 — May 2026 (hierarchy tightening — quiet the labels)
 *   ~ .eyebrow letter-spacing 3px → 2.2px. Less theatrical. AFFECTS EVERY
 *     LIFE LESSON EYEBROW EVERYWHERE (legacy long-scroll lessons too).
 *   ~ .system-strip labels (.sys-card small): letter-spacing 1.6 → 1.2,
 *     font-weight 500 → 400, color slightly softer. Labels recede so
 *     the values clearly lead.
 *   ~ .lpills-label: letter-spacing 2 → 1.5, font-weight 500 → 400.
 *     Same logic — section markers, not announcements.
 *   ~ .lpill-time: 11px → 10.5px, opacity .7. The "~3 min" reads as a
 *     tail-end annotation rather than co-equal to the pill title.
 *   Net effect: metadata stops climbing into level-2/level-3 visual
 *   weight. The hierarchy is clearer: title leads, metadata serves.
 *
 * v1.6 — May 2026 (arrival note + pill energy variants)
 *   + .arrival-note — calm grounding band that sits below the hero lead
 *     on the home room. Lowers cognitive pressure for dyslexic, ADHD,
 *     hypervigilant, and financially-shamed students by giving explicit
 *     permission to take the lesson in small pieces. Track-level
 *     decision: appropriate for Life / Restoration / Foundations;
 *     should be omitted or rewritten for Expansion / Operations.
 *   + Pill energy variants (two-tier scheme):
 *       .lpill                 → base (white, quiet)              — reading
 *       .lpill.lpill--worksheet → sage-tinted, fills the hand        — practice
 *       .lpill.lpill--case      → warm paper + serif title           — story
 *       .lpill.lpill--complete  → gold-edged, the destination         — wrap up
 *     Compound .lpill.lpill--X selectors so the base styles still
 *     apply and variants only override what's different.
 *
 * v1.5 — May 2026 (room-router prep + Life's emotional accent)
 *   + --accent / --accent-soft / --accent-deep / --accent-tint tokens.
 *     Life's value is muted sage (#6b8b6e). The same variable name will
 *     hold different values per track (Foundations gold, Restoration amber,
 *     Expansion navy, Operations brass) — that's the per-track emotional
 *     accent system. Old --gold* tokens are UNCHANGED; legacy chrome that
 *     uses them stays gold until each lesson is migrated to the room
 *     router. Only opt-in selectors point at --accent-*.
 *   + .eyebrow now uses --accent-deep (was --gold-deep). This is the one
 *     legacy selector that DOES migrate now, because eyebrows are the
 *     cheapest visual signal of per-track identity. The existing 6
 *     lesson HTMLs will display sage eyebrows immediately.
 *   + Room-router component family (still inactive in production until
 *     life-engine.js gains a router and lesson HTMLs are refactored):
 *       .lroom / .lroom-head / .lroom-foot / .lroom-back / .lroom-next /
 *       .lroom-crumb / .lpills-block / .lpills-group / .lpills-label /
 *       .lpills-row / .lpill / .lpill-num / .lpill-time /
 *       .hero.lhero-compact / .system-strip / .sys-card
 *   + Breath Sequence components (also inactive until lessons migrate):
 *       .authority-lead with .beat-diagnosis / .beat-axiom / .beat-assignment
 *       .silent-moment / .silent-text
 *       .conviction-box (NEW name; the existing .truth-box is a green
 *         success callout and is preserved)
 *       .reflect-card / .reflect-eyebrow / .reflect-heading / .reflect-body
 *       .structure / .structure-eyebrow
 *       .soft-divider
 *   + Sidebar softening: .lstep contrast/padding tuned, .lang-switcher
 *     divider faded. Existing legacy sidebar rules retained for the
 *     pre-migration lessons.
 *
 * v1.2 — May 2026
 *   * Specificity upgrade: all c-card system rules now use .c-card.c-card--X
 *     compound selectors (was .c-card--X). This lets the system outspecify
 *     legacy single-class rules (.truth-box, .warn-box, etc.) so converted
 *     elements (class="c-card c-card--insight truth-box") render with the
 *     new system while un-converted elements (class="truth-box" alone) keep
 *     their legacy styling. Bridge state during the rollout.
 *   - Stripped legacy .portal-panel and .milestone base rules (now provided
 *     by c-card c-card--ink + the milestone-specific extras kept inline).
 *
 * v1.1 — May 2026
 *   + c-card system: 1 primitive · 6 intents · 5 modifiers · density scale
 *   + Embedded mode: nested cards auto-strip chrome but keep intent voice
 *     (c-card--full escape hatch when full elevation is genuinely needed)
 *   + c-tag system: replaces pill / save-badge / sec-label / eyebrow
 *   + Namespace discipline: c-* shared, op-* Operations, life-* lesson-specific
 *   Old class definitions retained until Phase 5 cleanup — see consolidation spec.
 *
 * v1.0 — May 2026
 *   Initial extraction from per-lesson HTML <style> blocks.
 */

:root {
    --ink: #0f0f0f; --ink2: #1c1c1c;
    --fog: #f5f3ef; --fog2: #edeae4; --fog3: #e5e1d9;
    --gold: #b8922a; --gold2: #d4a83c; --gold-pale: #f7f0e0; --gold-deep: #7a5a0a;
    --white: #fff; --muted: #5a544e; --border: #ddd9d2; --border2: #ccc6bc;
    --success-bg: #edf7f0; --success: #1a5c3a;
    --warn-bg: #fff9ec; --warn: #7a5000;
    --red-bg: #fdf1f0; --red: #8b1a1a;
    --shadow-sm: 0 4px 16px rgba(15,15,15,.06);
    --shadow: 0 12px 40px rgba(15,15,15,.10);
    --shadow-lg: 0 24px 70px rgba(15,15,15,.14);
    --r: 14px; --rl: 20px; --rxl: 26px;
    --dur: .22s; --ease: cubic-bezier(.4,0,.2,1);

    /* ── PER-TRACK EMOTIONAL ACCENT (v1.5) ──
       Same variable name across all courses; only the VALUE changes per
       track. Life is muted sage. Foundations would override to gold,
       Restoration to amber, Expansion to navy, Operations to brass.
       The override happens via the parent stylesheet for that course
       (e.g. /foundations-styles.css would redefine these in its :root). */
    --accent: #6b8b6e;          /* muted sage — stability / growth */
    --accent-soft: #93b395;     /* sage at ~70% — for muted highlights */
    --accent-deep: #4f6a52;     /* sage darkened — for text and hover */
    --accent-tint: #eef2eb;     /* sage at ~6% — for backgrounds */
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: "DM Sans", Arial, sans-serif;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.75;
    overflow-x: hidden;
    background:
      radial-gradient(1100px 600px at 85% -10%, rgba(212,168,60,.07), transparent 60%),
      radial-gradient(900px 700px at -10% 30%, rgba(184,146,42,.045), transparent 65%),
      linear-gradient(180deg, #faf7f1 0%, var(--fog) 55%, var(--fog2) 100%);
    background-attachment: fixed;
  }
  /* faint paper grain — restoration-journal feel */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .35;
    background-image:
      radial-gradient(rgba(120,100,70,.05) 1px, transparent 1px),
      radial-gradient(rgba(120,100,70,.04) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
    mix-blend-mode: multiply;
  }
  .shell, .main { position: relative; z-index: 1; }
  .sidebar { z-index: 1; }
  a { text-decoration: none; color: inherit; }
  button { font-family: inherit; cursor: pointer; }

  /* ── ANIMATIONS (calmed down for Life: only what aids comprehension) ── */
  @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(184,146,42,.35); } 50% { box-shadow: 0 0 0 8px rgba(184,146,42,0); } }
  @keyframes fillBar { from { width: 0; } to { width: var(--target-width, 16.66%); } }
  /* Removed: radarPulse, waveform, unlockPop, timelineDot, radarSweep, signalTick, scanShimmer, signalDetected, insightPulse, incomingRing — surveillance-software vibe didn't fit the Life track */

  /* ── LAYOUT ── */
  .shell { display: grid; grid-template-columns: 270px 1fr; min-height: 100vh; }
  .main { padding: 48px 44px; max-width: 1180px; width: 100%; margin: 0 auto; animation: fadeIn .5s var(--ease); }

  /* ═════ SIDEBAR ═════ */
  .sidebar { background: var(--ink2); color: var(--white); padding: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; display: flex; flex-direction: column; animation: fadeIn .5s var(--ease); }
  .sidebar::-webkit-scrollbar { width: 4px; }
  .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 99px; }

  /* Language switcher (EN/ES, persistent via localStorage) */
  .lang-switcher { padding: 14px 20px 12px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.015); }
  .lang-switcher-label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.50); margin-bottom: 9px; font-weight: 900; }
  .lang-buttons { display: flex; gap: 6px; }
  .lang-btn { flex: 1; padding: 8px 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: transparent; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; transition: all var(--dur) var(--ease); white-space: nowrap; font-family: inherit; }
  .lang-btn:hover { color: rgba(255,255,255,.9); border-color: rgba(184,146,42,.35); }
  .lang-btn.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }

  .sidebar-brand { padding: 28px 24px 22px; border-bottom: 1px solid rgba(255,255,255,.06); position: relative; }
  .brand-row { display: flex; gap: 11px; align-items: center; margin-bottom: 6px; min-width: 0; }
  .mark { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--gold); display: grid; place-items: center; color: var(--gold); font-family: "DM Serif Display", serif; font-weight: 700; font-size: 14px; transition: box-shadow var(--dur) var(--ease); flex-shrink: 0; position: relative; overflow: hidden; }
  .mark:hover { animation: pulse 1.5s infinite; }
  .brand-name { font-family: "DM Serif Display", serif; font-size: 16px; font-weight: 400; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-tm { font-size: 9px; vertical-align: super; margin-left: 1px; color: var(--gold); font-family: "DM Sans", Arial, sans-serif; font-weight: 700; }
  .brand-sub { font-size: 10px; color: rgba(255,255,255,.42); letter-spacing: 1.8px; text-transform: uppercase; }
  .back-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,.4); transition: color var(--dur); margin-top: 10px; letter-spacing: .3px; }
  .back-link:hover { color: var(--gold); }

  .status-panel { padding: 22px 24px 18px; border-bottom: 1px solid rgba(255,255,255,.04); background: transparent; }
  .status-label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.32); margin-bottom: 10px; }
  .status-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12px; }
  .status-key { color: rgba(255,255,255,.45); }
  .status-val { color: var(--white); font-weight: 700; font-size: 11px; text-align: right; max-width: 130px; }
  .status-val.gold { color: var(--gold); }
  .status-val.active { color: #6fcf97; }
  .dot-pulse { width: 7px; height: 7px; border-radius: 50%; background: #6fcf97; display: inline-block; margin-right: 5px; animation: pulse 2s infinite; }

  .insight-panel { padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(111,207,151,.04), rgba(255,255,255,.015)); }
  .insight-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .insight-left { display: flex; align-items: center; gap: 9px; }
  .insight-dot { width: 8px; height: 8px; border-radius: 50%; background: #6fcf97; box-shadow: 0 0 8px rgba(111,207,151,.7), 0 0 16px rgba(111,207,151,.35); flex-shrink: 0; }
  .insight-title { font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(255,255,255,.42); font-weight: 900; }
  .insight-status { font-size: 10px; font-weight: 900; letter-spacing: 1.2px; color: #6fcf97; text-transform: uppercase; }
  .insight-tagline { font-family: "DM Serif Display", serif; font-style: italic; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.65); margin-top: 8px; }

  .progress-section { padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.04); }
  .progress-header { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.45); margin-bottom: 9px; }
  .progress-header strong { color: var(--gold); }
  .prog-bar { height: 6px; background: rgba(255,255,255,.09); border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
  .prog-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--gold2)); width: 0%; transition: width .6s var(--ease); }
  .lesson-steps { display: grid; gap: 4px; }
  .lstep { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; font-size: 12px; color: rgba(255,255,255,.5); cursor: pointer; transition: background var(--dur), color var(--dur), transform var(--dur); }
  .lstep:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); transform: translateX(2px); }
  .lstep.active { background: rgba(184,146,42,.14); color: var(--gold); }
  .lstep.done .lnum { background: var(--success); border-color: var(--success); color: var(--white); }
  .lnum { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); display: grid; place-items: center; font-size: 10px; font-weight: 900; flex-shrink: 0; transition: background var(--dur), border-color var(--dur); }
  .lstep.active .lnum { background: var(--gold); border-color: var(--gold); color: var(--ink); }

  /* ═════ ARCHITECTURE MAP (v37) ═════
     Six-layer architectural frame · replaces the linear lesson list.
     Three states: untouched (default), active (current panel), stabilized
     (worksheet or case complete). Active row pulses; stabilized rows show
     a solid gold dot.
  */
  .arch-section { padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.04); }
  .arch-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 12px; font-weight: 700; }
  .arch-map { display: flex; flex-direction: column; gap: 6px; }
  .arch-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: background var(--dur), border-color var(--dur), transform var(--dur); }
  .arch-row:hover { background: rgba(255,255,255,.04); transform: translateX(2px); }
  .arch-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.12); flex-shrink: 0; transition: background var(--dur), box-shadow var(--dur); }
  .arch-body { flex: 1; min-width: 0; }
  .arch-name { font-size: 12px; color: rgba(255,255,255,.5); font-weight: 500; transition: color var(--dur); }
  .arch-meta { font-size: 10px; color: rgba(255,255,255,.3); margin-top: 1px; transition: color var(--dur); }
  .arch-tag { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.35); font-weight: 500; }

  /* Stabilized state */
  .arch-row.stabilized .arch-dot { background: var(--gold); }
  .arch-row.stabilized .arch-name { color: rgba(255,255,255,.92); }
  .arch-row.stabilized .arch-meta { color: var(--gold); }

  /* Active state — pulses, gold accent */
  .arch-row.active { background: rgba(184,146,42,.08); border-color: rgba(184,146,42,.2); }
  .arch-row.active .arch-dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(184,146,42,.18); animation: pulse 2s infinite; }
  .arch-row.active .arch-name { color: rgba(255,255,255,.95); }
  .arch-row.active .arch-meta { color: rgba(255,255,255,.55); }
  .arch-row.active .arch-tag { color: var(--gold); font-weight: 500; }

  .arch-footer { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); font-size: 10px; color: rgba(255,255,255,.4); line-height: 1.5; transition: color var(--dur); }
  .arch-footer.complete { color: rgba(255,255,255,.7); font-family: "DM Serif Display", Georgia, serif; font-style: italic; }

  .pattern-section { padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.04); }
  .pattern-card { background: rgba(184,146,42,.09); border: 1px solid rgba(184,146,42,.18); border-radius: 12px; padding: 13px; }
  .pattern-title { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 6px; }
  .pattern-name { font-family: "DM Serif Display", serif; font-size: 18px; color: var(--gold); margin-bottom: 4px; font-style: italic; }
  .pattern-desc { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.55; }

  .reset-section { padding: 22px 24px; }
  .reset-card { background: rgba(255,255,255,.04); border-radius: 12px; padding: 13px; border-left: 3px solid var(--gold); cursor: pointer; transition: background var(--dur); }
  .reset-card:hover { background: rgba(255,255,255,.07); }
  .reset-quote { font-family: "DM Serif Display", serif; font-style: italic; font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.55; transition: opacity .2s ease, transform .2s ease; }
  .reset-meta { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-top: 7px; }
  .reset-arrow { float: right; color: rgba(255,255,255,.28); font-size: 14px; margin-top: -2px; transition: transform var(--dur); }
  .reset-card:hover .reset-arrow { transform: translateX(3px); color: var(--gold); }

  .map-section { padding: 18px 24px; }
  .map-label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 10px; }
  .track-map { display: flex; flex-direction: column; gap: 4px; }
  .track-node { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; font-size: 11px; color: rgba(255,255,255,.32); transition: all var(--dur); }
  .track-node.current { background: rgba(184,146,42,.12); color: var(--white); border: 1px solid rgba(184,146,42,.25); }
  .track-node-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.15); flex-shrink: 0; }
  .track-node.current .track-node-dot { background: var(--gold); animation: pulse 2s infinite; }
  .track-node.locked { opacity: .38; }
  .track-node.done { opacity: .85; }
  .track-node.done .track-node-dot { background: var(--success); }
  .track-connector { width: 1px; height: 8px; background: rgba(255,255,255,.08); margin-left: 12px; }

  .portal-cta { margin: 20px 20px 24px; border-radius: 12px; background: var(--gold); color: var(--ink); padding: 14px 16px; text-align: center; font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; transition: background var(--dur), transform var(--dur), box-shadow var(--dur); display: block; }
  .portal-cta:hover { background: var(--gold2); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(184,146,42,.35); }
  .portal-cta:active { transform: scale(.98); }

  .habit-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; position: relative; }
  .habit-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
  .habit-pill.early { background: rgba(139,26,26,.18); color: #ff9d9d; }
  .habit-pill.early::before { background: #ff6b6b; }
  .habit-pill.foundation { background: rgba(184,146,42,.22); color: var(--gold); }
  .habit-pill.foundation::before { background: var(--gold); animation: pulse 2s infinite; }
  .habit-pill.building { background: rgba(26,92,58,.22); color: #6fcf97; }
  .habit-pill.building::before { background: #6fcf97; }
  .habit-pill.applying { background: rgba(26,92,58,.28); color: #8fdfaf; }
  .habit-pill.applying::before { background: #8fdfaf; animation: pulse 2.5s infinite; }
  .habit-view-row { padding: 6px 0; display: flex; justify-content: space-between; align-items: center; }

  /* ═════ MORE SIGNALS — collapsible nested section ═════ */
  .more-section { border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); margin: 0; }
  .more-section summary { list-style: none; cursor: pointer; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; transition: background var(--dur); }
  .more-section summary::-webkit-details-marker { display: none; }
  .more-section summary:hover { background: rgba(255,255,255,.02); }
  .more-label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 700; }
  .more-chev { color: rgba(255,255,255,.4); font-size: 16px; font-weight: 400; transition: transform var(--dur); width: 16px; text-align: center; }
  .more-section[open] .more-chev { content: "−"; }
  .more-section[open] .more-chev::before { content: "−"; }
  .more-section[open] .more-chev { font-size: 0; }
  .more-section[open] .more-chev::before { font-size: 16px; }
  .more-body { animation: fadeIn .3s var(--ease); }

  /* Inner versions of the dashboard widgets — same look but no outer borders so they sit nicely inside <details> */
  .insight-panel-inner { padding: 14px 24px; background: linear-gradient(180deg, rgba(111,207,151,.04), rgba(255,255,255,.015)); }
  .insight-panel-inner + * { border-top: 1px solid rgba(255,255,255,.05); }
  .map-section-inner { padding: 14px 24px; }
  .status-panel-inner { padding: 12px 24px 16px; }

  /* ═════ PILL / EYEBROW ═════ */
  .pill {
    display: inline-flex;
    background: linear-gradient(180deg, #f7f0e0 0%, #efe4c8 100%);
    border: 1px solid rgba(216,180,120,.5);
    color: var(--gold-deep);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    margin-bottom: 22px;
    animation: fadeUp .5s var(--ease);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
  }

  /* ═════ HERO ═════ */
  .hero {
    background:
      radial-gradient(420px 320px at 88% 12%, rgba(247,240,224,.85), transparent 70%),
      radial-gradient(520px 360px at 5% 100%, rgba(237,234,228,.6), transparent 65%),
      linear-gradient(180deg, #fdfaf3 0%, #f9f5ec 60%, #f5f0e3 100%);
    border: 1px solid rgba(216,200,160,.45);
    border-radius: 28px;
    padding: 84px 64px 76px;
    box-shadow:
      0 1px 0 rgba(255,255,255,.7) inset,
      0 30px 80px -30px rgba(122,90,10,.18),
      0 8px 24px -12px rgba(15,15,15,.05);
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
    animation: fadeUp .7s var(--ease);
  }
  /* soft gold glow, no longer a hard circle */
  .hero::before {
    content: "";
    position: absolute;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(212,168,60,.22), rgba(212,168,60,.06) 45%, transparent 70%);
    right: -180px; top: -200px;
    pointer-events: none;
    filter: blur(8px);
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(rgba(120,100,70,.045) 1px, transparent 1px);
    background-size: 4px 4px;
    opacity: .5;
    mix-blend-mode: multiply;
  }
  .hero-inner { position: relative; z-index: 1; max-width: 760px; text-align: left; }
  /* serif divider above headline */
  .hero-rule {
    width: 56px; height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
    margin-bottom: 28px;
  }
  .eyebrow {
    font-size: 11px;
    color: var(--accent-deep);   /* v1.5: was var(--gold-deep) — Life's emotional accent */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.2px;       /* v1.7: was 3px — less theatrical opener */
    margin-bottom: 18px;
  }
  .hero h1, .hero h2 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(42px, 5.6vw, 68px);
    line-height: 1.02;
    font-weight: 400;
    letter-spacing: -1.4px;
    margin-bottom: 24px;
    color: #1a1814;
  }
  .hero h1 em { font-style: italic; color: var(--gold-deep); font-weight: 400; }
  .lead {
    font-size: 18px;
    color: #4a443e;
    line-height: 1.85;
    max-width: 640px;
    font-weight: 400;
  }
  .lead.lead-stanza {
    font-family: "DM Serif Display", Georgia, serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1.55;
    color: #2d2924;
    max-width: 560px;
    margin-bottom: 8px;
  }
  .lead.lead-stanza + .lead {
    font-size: 15.5px;
    margin-top: 18px;
    max-width: 580px;
  }
  .actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 40px;
    align-items: center;
  }
  .btn { border: none; border-radius: 14px; padding: 15px 22px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: all var(--dur); text-decoration: none; }
  .btn:hover { transform: translateY(-1px); }
  .btn.dark { background: #1a1814; color: #f7f0e0; box-shadow: 0 8px 20px -8px rgba(15,15,15,.35); }
  .btn.dark:hover { background: #2a261f; box-shadow: 0 12px 28px -8px rgba(15,15,15,.4); }
  .btn.gold { background: var(--gold); color: var(--ink); box-shadow: 0 8px 20px -8px rgba(184,146,42,.45); }
  .btn.gold:hover { background: var(--gold2); }
  .btn.light { background: rgba(255,255,255,.6); border: 1px solid rgba(216,200,160,.6); color: var(--ink); backdrop-filter: blur(6px); }
  .btn.light:hover { background: rgba(255,255,255,.85); }
  /* quiet text-link for tertiary actions in the Life hero */
  .btn-link { background: transparent; border: none; color: var(--gold-deep); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; padding: 8px 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; transition: color var(--dur), gap var(--dur); }
  .btn-link::after { content: "→"; transition: transform var(--dur); }
  .btn-link:hover { color: var(--gold); }
  .btn-link:hover::after { transform: translateX(3px); }

  /* ═════ CURRENT FOCUS CARD ═════ */
  .focus-card {
    background: linear-gradient(180deg, #fdfaf3 0%, #f7f1e1 100%);
    border: 1px solid rgba(216,200,160,.55);
    border-radius: 22px;
    padding: 36px 40px;
    margin-bottom: 36px;
    position: relative;
    box-shadow: 0 14px 36px -22px rgba(122,90,10,.18);
    animation: fadeUp .7s var(--ease) .05s both;
  }
  .focus-card::before {
    content: "";
    position: absolute;
    left: 0; top: 28px; bottom: 28px;
    width: 3px;
    background: linear-gradient(180deg, var(--gold), rgba(184,146,42,0));
    border-radius: 0 3px 3px 0;
  }
  .focus-card small {
    display: block;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    margin-bottom: 12px;
  }
  .focus-card h3 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.15;
    color: #1a1814;
    margin-bottom: 14px;
    letter-spacing: -.6px;
  }
  .focus-card p {
    font-size: 16px;
    line-height: 1.75;
    color: #4a443e;
    max-width: 620px;
    margin: 0;
  }
  .focus-card .focus-meta {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed rgba(184,146,42,.28);
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #6b6560;
  }
  .focus-card .focus-meta span { display: inline-flex; align-items: center; gap: 8px; }
  .focus-card .focus-meta strong { color: #1a1814; font-weight: 700; }

  /* ═════ PAUSE HERE — emotional checkpoint ═════ */
  .pause-here {
    text-align: center;
    padding: 56px 32px;
    margin: 40px 0;
    position: relative;
  }
  .pause-here::before,
  .pause-here::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184,146,42,.5), transparent);
  }
  .pause-here::before { top: 0; }
  .pause-here::after { bottom: 0; }
  .pause-here .pause-label {
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    margin-bottom: 18px;
  }
  .pause-here h4 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.25;
    color: #1a1814;
    margin-bottom: 14px;
    letter-spacing: -.4px;
  }
  .pause-here p {
    font-size: 15.5px;
    line-height: 1.85;
    color: #5a544e;
    max-width: 480px;
    margin: 0 auto;
  }

  /* ═════ METRICS ═════ */
  .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
  .metric { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 22px 20px; transition: transform var(--dur), box-shadow var(--dur); }
  .metric:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .metric small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.6px; }
  .metric strong { display: block; font-family: "DM Serif Display", Georgia, serif; font-size: 22px; font-weight: 400; margin-top: 5px; color: var(--ink); }

  /* ═════ TAB BAR ═════ */
  .tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 36px;
    background: rgba(255,255,255,.45);
    border: 1px solid rgba(216,200,160,.45);
    border-radius: 18px;
    padding: 6px;
    flex-wrap: wrap;
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
  }
  .tab { padding: 10px 16px; border-radius: 12px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; color: var(--muted); cursor: pointer; transition: all .25s; white-space: nowrap; border: none; background: transparent; }
  .tab:hover { background: rgba(255,255,255,.5); color: var(--ink); }
  .tab.active { background: #1a1814; color: var(--gold); box-shadow: 0 6px 18px -8px rgba(15,15,15,.3); }

  /* ═════ PANEL ═════ */
  .lesson-panel { display: none; animation: fadeUp .4s var(--ease); }
  .lesson-panel.active { display: block; }

  /* ═════ CARDS ═════ */
  .card { background: rgba(255,255,255,.78); border: 1px solid rgba(216,200,160,.4); border-radius: 22px; padding: 44px 44px; margin-bottom: 28px; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -28px rgba(122,90,10,.18); backdrop-filter: blur(4px); }
  .section-label { display: inline-flex; background: var(--ink); color: var(--gold); border-radius: 999px; padding: 7px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 900; margin-bottom: 14px; }
  .card h2 { font-family: "DM Serif Display", Georgia, serif; font-size: 30px; font-weight: 400; line-height: 1.15; margin-bottom: 16px; }
  .card h3 { font-family: "DM Serif Display", Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1.2; margin: 28px 0 14px; }
  .card p { margin-bottom: 16px; color: #3d3935; }

  /* ═════════════════════════════════════════════════════════════════════
     CARD SYSTEM v1 (shared: Life + Operations)
     One primitive · six intents · eight modifiers · density scale · tags
     See foundations-ui-consolidation.md for the full spec and mapping.
     ═════════════════════════════════════════════════════════════════════ */

  /* ───── The primitive ───── */
  .c-card {
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(216, 200, 160, .4);
    border-radius: var(--rxl);
    padding: 44px;
    margin-bottom: 28px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .6) inset,
      0 18px 40px -28px rgba(122, 90, 10, .18);
    backdrop-filter: blur(4px);
    position: relative;
    transition: box-shadow var(--dur) var(--ease);
  }
  .c-card > .c-tag:first-child { margin-bottom: 14px; }
  .c-card h2 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 30px; font-weight: 400; line-height: 1.15;
    margin-bottom: 16px;
  }
  .c-card h3 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 22px; font-weight: 400; line-height: 1.2;
    margin: 28px 0 14px;
  }
  .c-card p { margin-bottom: 16px; color: #3d3935; }
  .c-card > *:last-child { margin-bottom: 0; }

  /* ───── Intent: insight (gold) ───── */
  .c-card.c-card--insight {
    background: var(--gold-pale);
    border-color: rgba(184, 146, 42, .28);
    border-left: 3px solid var(--gold);
    color: var(--ink);
  }
  .c-card.c-card--insight strong { color: var(--gold-deep); }
  .c-card.c-card--insight h2,
  .c-card.c-card--insight h3 { color: var(--gold-deep); }

  /* ───── Intent: risk (warm) + severe (red escalator) ───── */
  .c-card.c-card--risk {
    background: var(--warn-bg);
    border-color: #ead49a;
    border-left: 3px solid var(--warn);
    color: var(--warn);
  }
  .c-card.c-card--risk strong { color: #3d2c00; }
  .c-card.c-card--risk h2,
  .c-card.c-card--risk h3 { color: #3d2c00; }
  .c-card.c-card--risk.c-card--severe {
    background: var(--red-bg);
    border-color: #e8b4b4;
    border-left-color: var(--red);
    color: var(--red);
  }
  .c-card--risk.c-card--severe strong,
  .c-card--risk.c-card--severe h2,
  .c-card--risk.c-card--severe h3 { color: #6a0a0a; }

  /* ───── Intent: worksheet (user input zone) ───── */
  .c-card.c-card--worksheet {
    background: var(--fog);
    border: 1px dashed var(--border2);
    border-radius: var(--rl);
  }
  .c-card.c-card--worksheet h2,
  .c-card.c-card--worksheet h3 { color: var(--ink); }

  /* ───── Intent: do (teach by example) ───── */
  .c-card.c-card--do {
    background: var(--success-bg);
    border-color: #b4d4b4;
    border-left: 3px solid var(--success);
    color: #1a3a28;
  }
  .c-card.c-card--do h3,
  .c-card.c-card--do h4 {
    color: var(--success);
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
  }
  .c-card.c-card--do ul { list-style: none; padding: 0; }
  .c-card.c-card--do ul li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(26, 92, 58, .12);
    font-size: 13px;
  }
  .c-card.c-card--do ul li:last-child { border-bottom: none; }

  /* ───── Intent: dont (teach by counterexample) ───── */
  .c-card.c-card--dont {
    background: var(--red-bg);
    border-color: #e8b4b4;
    border-left: 3px solid var(--red);
    color: #5a0000;
  }
  .c-card.c-card--dont h3,
  .c-card.c-card--dont h4 {
    color: var(--red);
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
  }
  .c-card.c-card--dont ul { list-style: none; padding: 0; }
  .c-card.c-card--dont ul li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(139, 26, 26, .12);
    font-size: 13px;
  }
  .c-card.c-card--dont ul li:last-child { border-bottom: none; }

  /* ───── Modifier: ink (dark surface) ───── */
  .c-card.c-card--ink {
    background: var(--ink);
    color: rgba(255, 255, 255, .82);
    border-color: transparent;
    border-left: none;
  }
  .c-card.c-card--ink h2,
  .c-card.c-card--ink h3,
  .c-card.c-card--ink h4 { color: var(--white); }
  .c-card.c-card--ink p  { color: rgba(255, 255, 255, .78); }
  .c-card.c-card--ink strong { color: var(--gold); }
  /* Insight + ink: dark surface with gold rail */
  .c-card.c-card--insight.c-card--ink {
    background: linear-gradient(135deg, var(--ink), #1e1a14);
    border-left: 3px solid var(--gold);
  }

  /* ───── Modifier: scene (narrative treatment) ───── */
  .c-card.c-card--scene {
    border-left: 3px solid var(--gold);
    line-height: 1.7;
  }
  .c-card.c-card--scene p {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 18px;
    line-height: 1.65;
  }

  /* ───── Modifier: protagonist (portrait intro) ───── */
  .c-card.c-card--protagonist {
    text-align: center;
    padding: 56px 44px;
  }

  /* ───── Modifier: milestone (timeline beat) ───── */
  .c-card.c-card--milestone { padding-left: 64px; }
  .c-card.c-card--milestone::before {
    content: "";
    position: absolute;
    left: 28px; top: 48px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px var(--gold-pale);
  }

  /* ───── Modifier: compare (paired half-width) ───── */
  .c-card-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 14px 0 28px;
  }
  .c-card.c-card--compare {
    padding: 20px 22px;
    margin-bottom: 0;
    border-radius: var(--r);
  }

  /* ───── Density scale ─────
     Default is "comfortable" (44px). Authors only declare density when
     changing it. --cinematic is for moments meant to be slowed down for;
     --compact is for scan-able reference content. */
  .c-card.c-card--compact {
    padding: 18px 20px;
    border-radius: var(--r);
  }
  .c-card.c-card--cinematic {
    padding: 72px 64px;
    border-radius: var(--rxl);
    margin-bottom: 40px;
  }
  .c-card.c-card--cinematic h2 {
    font-size: 38px;
    line-height: 1.1;
    margin-bottom: 22px;
  }
  .c-card.c-card--cinematic p {
    font-size: 17px;
    line-height: 1.7;
  }

  /* ───── Modifier: clickable (navigation affordance) ─────
     For cards that are themselves links / "open this lesson" tiles.
     Adds cursor + lift-on-hover without changing chrome at rest. */
  .c-card.c-card--clickable {
    cursor: pointer;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  .c-card.c-card--clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--border2);
  }
  .c-card.c-card--clickable:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  /* When the clickable card is embedded, suppress the hover shadow
     (we already stripped shadow for nested cards) */
  .c-card .c-card--clickable:hover {
    box-shadow: none;
  }

  /* ───── Embedded mode (auto for nested cards) ─────
     Nesting strips chrome (shadow + blur), keeps voice (intent color).
     Stops the "Russian-nesting-doll" stack when a worksheet contains an
     insight, an insight contains a compare pair, etc.

     Three selectors:
       1. .c-card .c-card           → auto-lighten any nested card
       2. .c-card--embedded         → manual modifier (same effect, explicit)
       3. .c-card .c-card--full     → escape hatch: restore full elevation
                                      when a nested card genuinely needs it
     Intent backgrounds (--insight, --risk, --do, --dont, --worksheet, --ink)
     are NOT touched — voice always survives nesting. */

  .c-card .c-card,
  .c-card.c-card--embedded {
    box-shadow: none;
    backdrop-filter: none;
    margin-bottom: 16px;
  }
  /* Neutral nested card (no intent) gets a softer translucent surface
     so it reads as embedded rather than as a forgotten paragraph */
  .c-card > .c-card:not([class*="c-card--insight"]):not([class*="c-card--risk"]):not([class*="c-card--worksheet"]):not([class*="c-card--do"]):not([class*="c-card--dont"]):not([class*="c-card--ink"]) {
    background: rgba(255, 255, 255, .55);
    border-color: rgba(216, 200, 160, .3);
  }
  .c-card .c-card:last-child { margin-bottom: 0; }

  /* Escape hatch: keep full elevation even when nested */
  .c-card .c-card--full {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .6) inset,
      0 18px 40px -28px rgba(122, 90, 10, .18);
    backdrop-filter: blur(4px);
    margin-bottom: 28px;
  }

  /* ───── Mobile ───── */
  @media (max-width: 640px) {
    .c-card { padding: 24px 20px; border-radius: var(--rl); }
    .c-card.c-card--compact { padding: 14px 16px; }
    .c-card.c-card--cinematic { padding: 40px 24px; margin-bottom: 28px; }
    .c-card.c-card--cinematic h2 { font-size: 28px; }
    .c-card.c-card--cinematic p { font-size: 15px; }
    .c-card.c-card--protagonist { padding: 36px 24px; }
    .c-card.c-card--milestone { padding-left: 48px; }
    .c-card.c-card--milestone::before { left: 20px; top: 32px; }
    .c-card-pair { grid-template-columns: 1fr; }
  }

  /* ═════════════════════════════════════════════════════════════════════
     TAG SYSTEM v1
     Replaces: pill, save-badge, sec-label, cc-label, dm-eyebrow, bc-tag,
     ct-tag, ms-badge, eyebrow, scene-label, track-pill.
     ═════════════════════════════════════════════════════════════════════ */

  .c-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: var(--gold);
    border-radius: 999px;
    padding: 7px 12px;
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
  }
  .c-tag--ghost {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
  }
  .c-tag--gold  { background: var(--gold); color: var(--ink); }
  .c-tag--muted { background: var(--fog2); color: var(--muted); }

  /* Save badge: standardized top-right inside any worksheet card */
  .c-tag--save {
    background: var(--success-bg);
    color: var(--success);
  }
  .c-card.c-card--worksheet > .c-tag--save {
    position: absolute;
    top: 16px;
    right: 16px;
    margin-bottom: 0;
  }
  @media (max-width: 640px) {
    .c-card.c-card--worksheet > .c-tag--save {
      top: 12px;
      right: 12px;
    }
  }

  /* ───── End card system v1 ───── */

  /* ═════ QUOTE ═════ */
  .quote { border-left: 3px solid var(--gold); background: var(--gold-pale); padding: 22px 26px; border-radius: 0 12px 12px 0; font-family: "DM Serif Display", Georgia, serif; font-size: 19px; line-height: 1.6; color: var(--ink); margin: 22px 0; font-style: italic; }
  .quote-attr { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); font-weight: 900; font-style: normal; margin-top: 10px; display: block; font-family: "DM Sans", sans-serif; }

  /* ═════ CONTENT GRID ═════ */
  /* Was `1fr 320px` for a main + side-card layout. Side-cards are now hidden
     globally (see `.side-card { display: none !important }`), leaving the
     right column empty across every lesson. Collapsed to a single column so
     the main content actually uses the full width. */
  .content-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .side-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 28px; box-shadow: var(--shadow-sm); position: sticky; top: 24px; transition: box-shadow var(--dur); }
  .side-card:hover { box-shadow: var(--shadow); }
  .score-mini { border: 1px solid var(--border); background: var(--fog); border-radius: var(--r); padding: 16px; text-align: center; margin-bottom: 14px; transition: all var(--dur); }
  .score-mini:hover { border-color: var(--gold); background: var(--gold-pale); }
  .score-mini small { display: block; text-transform: uppercase; letter-spacing: 1.3px; color: var(--muted); font-size: 10px; margin-bottom: 6px; }
  .score-number { font-family: "DM Serif Display", Georgia, serif; font-size: 44px; line-height: 1; color: var(--gold); }
  .score-note { font-size: 11px; color: var(--muted); margin-top: 6px; }
  .mini-list { list-style: none; margin-top: 12px; }
  .mini-list li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--fog2); padding: 10px 0; font-size: 13px; color: var(--muted); gap: 10px; }
  .mini-list li:last-child { border-bottom: none; }
  .mini-list strong { color: var(--ink); }

  /* ═════ TRUTH / WARN / DANGER BOXES ═════ */
  .truth-box { background: var(--success-bg); border: 1px solid #b4d4b4; color: var(--success); border-radius: var(--r); padding: 16px 18px; margin: 20px 0; font-weight: 700; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
  .warn-box { background: var(--warn-bg); border: 1px solid #ead49a; border-radius: var(--r); padding: 16px 18px; margin: 20px 0; color: var(--warn); font-size: 14px; }
  .warn-box strong { color: #3d2c00; }
  .danger-box { background: var(--red-bg); border: 1px solid #e8b4b4; border-radius: var(--r); padding: 16px 18px; margin: 20px 0; color: var(--red); font-size: 14px; }
  .danger-box strong { color: #6a0a0a; }
  .ink-box { background: var(--ink); color: white; border-radius: var(--r); padding: 20px 22px; margin: 20px 0; }
  .ink-box strong { color: var(--gold); }
  .ink-box p { color: rgba(255,255,255,.78); margin: 6px 0 0; font-size: 14px; }

  /* ═════ COMPARE GRID ═════ */
  .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
  .compare-card { background: var(--fog); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; }
  .cc-label { display: inline-flex; background: var(--ink); color: var(--gold); border-radius: 999px; padding: 5px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 900; margin-bottom: 10px; }
  .compare-card h4 { font-family: "DM Serif Display", Georgia, serif; font-size: 18px; font-weight: 400; margin-bottom: 8px; }
  .compare-card p { font-size: 13px; color: var(--muted); margin: 0; }

  /* ═════ DO / DONT ═════ */
  .do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
  .do-card { background: var(--success-bg); border: 1px solid #b4d4b4; border-radius: var(--r); padding: 16px; }
  .do-card h4 { font-family: "DM Serif Display", Georgia, serif; font-size: 17px; font-weight: 400; color: var(--success); margin-bottom: 8px; }
  .dont-card { background: var(--red-bg); border: 1px solid #e8b4b4; border-radius: var(--r); padding: 16px; }
  .dont-card h4 { font-family: "DM Serif Display", Georgia, serif; font-size: 17px; font-weight: 400; color: var(--red); margin-bottom: 8px; }
  .do-card ul, .dont-card ul { list-style: none; font-size: 13px; }
  .do-card ul li { padding: 5px 0; border-bottom: 1px solid rgba(26,92,58,.12); color: #1a3a28; }
  .dont-card ul li { padding: 5px 0; border-bottom: 1px solid rgba(139,26,26,.12); color: #5a0000; }
  .do-card ul li:last-child, .dont-card ul li:last-child { border-bottom: none; }

  /* ═════ FIVE-STEP / NUMBERED LIST ═════ */
  .step-list { display: grid; gap: 14px; margin: 18px 0; }
  .step-item { background: var(--fog); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start; }
  .step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--gold); display: grid; place-items: center; font-weight: 900; font-size: 14px; flex-shrink: 0; }
  .step-item strong { display: block; font-family: "DM Serif Display", serif; font-size: 17px; font-weight: 400; margin-bottom: 4px; }
  .step-item .tr { display: block; color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 900; margin-bottom: 6px; }
  .step-item span { font-size: 13px; color: var(--muted); line-height: 1.6; }

  /* ═════ AUDIO PLAYER ═════ */
  .audio-card { background: var(--ink); border-radius: var(--rl); padding: 22px 26px; margin: 0 0 28px; display: flex; align-items: center; gap: 18px; transition: all var(--dur); cursor: pointer; position: relative; overflow: hidden; }
  .audio-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(184,146,42,.1) 0%, transparent 60%); pointer-events: none; }
  .audio-play-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--gold); border: none; display: grid; place-items: center; flex-shrink: 0; cursor: pointer; transition: all var(--dur); position: relative; font-size: 17px; color: var(--ink); z-index: 1; }
  .audio-play-btn:hover { background: var(--gold2); transform: scale(1.08); }
  .audio-info { flex: 1; position: relative; z-index: 1; }
  .audio-tag { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 4px; }
  .audio-title { color: var(--white); font-weight: 700; font-size: 14px; margin-bottom: 6px; }
  .audio-duration { font-size: 11px; color: rgba(255,255,255,.5); }
  .waveform { display: flex; gap: 2.5px; align-items: center; height: 28px; position: relative; z-index: 1; }
  .wave-bar { width: 3px; border-radius: 99px; background: rgba(255,255,255,.22); transition: background var(--dur); }
  .audio-card.playing .wave-bar { background: var(--gold); animation: waveform .8s ease-in-out infinite; }
  .wave-bar:nth-child(1) { height: 40%; animation-delay: 0s; }
  .wave-bar:nth-child(2) { height: 70%; animation-delay: .1s; }
  .wave-bar:nth-child(3) { height: 55%; animation-delay: .2s; }
  .wave-bar:nth-child(4) { height: 90%; animation-delay: .05s; }
  .wave-bar:nth-child(5) { height: 65%; animation-delay: .15s; }
  .wave-bar:nth-child(6) { height: 45%; animation-delay: .25s; }
  .wave-bar:nth-child(7) { height: 80%; animation-delay: .08s; }
  .wave-bar:nth-child(8) { height: 55%; animation-delay: .18s; }
  .wave-bar:nth-child(9) { height: 35%; animation-delay: .12s; }
  .wave-bar:nth-child(10) { height: 70%; animation-delay: .22s; }

  /* ═════ WORKSHEET ═════ */
  .worksheet { background: var(--fog); border: 1px solid var(--border); border-radius: var(--rl); padding: 28px; margin: 16px 0 20px; }
  .worksheet-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 13px; margin-bottom: 17px; flex-wrap: wrap; }
  .worksheet-title h3 { margin: 0; font-family: "DM Serif Display", Georgia, serif; font-size: 20px; font-weight: 400; }
  .save-badge { background: var(--gold); color: var(--ink); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 900; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
  .field-group { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; margin-bottom: 11px; transition: border-color var(--dur), box-shadow var(--dur); }
  .field-group:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,146,42,.1); }
  .field-group label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 900; margin-bottom: 8px; }
  .input-field { width: 100%; height: 42px; border: 1px dashed #c6bcae; background: #fbfaf7; border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--ink); padding: 0 12px; transition: border-color var(--dur), background var(--dur); outline: none; }
  .input-field:focus { border-color: var(--gold); background: var(--gold-pale); }
  .textarea-field { width: 100%; min-height: 80px; border: 1px dashed #c6bcae; background: #fbfaf7; border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--ink); padding: 10px 12px; transition: border-color var(--dur), background var(--dur); outline: none; resize: vertical; line-height: 1.6; }
  .textarea-field:focus { border-color: var(--gold); background: var(--gold-pale); }
  .textarea-privacy-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 10.5px; color: var(--muted); line-height: 1.5; letter-spacing: .1px; opacity: .8; }
  .textarea-privacy-note::before { content: "🔒"; font-size: 10px; flex-shrink: 0; margin-top: 1px; }
  .checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .check-option { background: var(--white); border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 13px; font-size: 13px; color: #3d3935; cursor: pointer; transition: all var(--dur); display: flex; align-items: center; gap: 8px; user-select: none; }
  .check-option:hover { border-color: var(--gold); background: var(--gold-pale); color: var(--gold-deep); }
  .check-option.selected { border-color: var(--gold); background: var(--gold-pale); color: var(--gold-deep); font-weight: 700; }
  .check-option.selected::before { content: "✓"; font-weight: 900; color: var(--gold); }
  .save-reflection-btn { display: flex; flex-direction: column; align-items: center; gap: 0; background: none; border: 1px solid var(--border); border-radius: var(--r); padding: 12px 16px; font-size: 13px; color: var(--muted); transition: all var(--dur); width: 100%; margin-top: 12px; font-family: inherit; justify-content: center; }
  .save-reflection-btn:hover { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-pale); }
  .save-reflection-btn.saved { background: var(--success-bg); border-color: #b4d4b4; color: var(--success); }
  .save-reflection-btn::before { content: "Educational reflection exercise only. Not therapy, counseling, legal, tax, or financial advisory services."; display: block; font-size: 10px; color: var(--muted); opacity: .7; letter-spacing: .2px; line-height: 1.5; margin-bottom: 10px; text-align: center; font-weight: 400; text-transform: none; width: 100%; }

  /* ═════ PORTAL PANEL ═════ */
  /* .portal-panel base rule removed in v1.2 — replaced by c-card c-card--ink */
  .portal-panel h2 { font-family: "DM Serif Display", Georgia, serif; font-size: 28px; font-weight: 400; color: var(--white); margin-bottom: 8px; }
  .portal-panel > p { color: rgba(255,255,255,.65); margin-bottom: 0; font-size: 15px; }
  .portal-steps { display: grid; gap: 10px; margin-top: 14px; }
  .portal-step { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: var(--r); padding: 14px; transition: all var(--dur); }
  .portal-step:hover { background: rgba(255,255,255,.08); border-color: rgba(184,146,42,.25); }
  .ps-num { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; font-weight: 900; flex-shrink: 0; font-size: 12px; }
  .portal-step strong { color: var(--white); display: block; margin-bottom: 3px; }
  .portal-step p { color: rgba(255,255,255,.6); margin: 0; font-size: 13px; }

  /* ═════ MILESTONE ═════ */
  /* .milestone base rule removed in v1.2 — replaced by c-card c-card--ink. Inner element rules preserved. */
  .milestone { text-align: center; overflow: hidden; border: 1px solid rgba(184,146,42,.3); }
  .milestone-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(184,146,42,.12), transparent 65%); pointer-events: none; }
  .milestone-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(184,146,42,.15); border: 1px solid rgba(184,146,42,.3); border-radius: 99px; padding: 8px 14px; margin-bottom: 14px; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); position: relative; z-index: 1; }
  .milestone h3 { font-family: "DM Serif Display", Georgia, serif; font-size: 24px; font-weight: 400; color: var(--white); margin-bottom: 8px; line-height: 1.2; position: relative; z-index: 1; }
  .milestone p { color: rgba(255,255,255,.65); font-size: 14px; max-width: 460px; margin: 0 auto; position: relative; z-index: 1; }
  .milestone.show { animation: unlockPop .6s var(--ease) both; }

  /* ═════ THE RESET ═════ */
  .clarity-reset { background: var(--gold-pale); border: 1px solid #e8d5a3; border-radius: var(--rl); padding: 40px; margin-top: 28px; text-align: center; position: relative; overflow: hidden; }
  .cr-orb { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(184,146,42,.13), transparent); right: -80px; bottom: -80px; pointer-events: none; }
  .clarity-reset h2 { font-family: "DM Serif Display", Georgia, serif; font-size: 28px; font-weight: 400; margin-bottom: 10px; color: var(--ink); position: relative; z-index: 1; }
  .clarity-reset > p { color: #3b3327; font-size: 15px; position: relative; z-index: 1; }
  .reset-lines { display: grid; gap: 8px; margin-top: 14px; max-width: 520px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
  .reset-line { background: var(--white); border: 1px solid #eadfc8; border-radius: 999px; padding: 11px 18px; font-weight: 700; color: #33281a; font-size: 14px; transition: all var(--dur); }
  .reset-line:hover { background: #fff8e6; border-color: #d4a83c; transform: scale(1.01); }

  /* ═════ NEXT LESSON ═════ */
  .next-lesson-card { background: var(--ink); color: white; border-radius: var(--rl); padding: 32px; margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; cursor: pointer; transition: all var(--dur); }
  .next-lesson-card:hover { background: var(--ink2); transform: translateY(-2px); box-shadow: var(--shadow); }
  .nl-eyebrow { color: rgba(255,255,255,.5); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
  .nl-title { font-family: "DM Serif Display", Georgia, serif; font-size: 21px; color: white; }

  /* ═════ DISCLAIMER ═════ */
  .disclaimer { font-size: 12px; color: var(--muted); background: white; border: 1px solid var(--border); border-radius: var(--r); padding: 16px; margin-top: 18px; line-height: 1.75; }
  .disclaimer strong { color: var(--ink); display: block; margin-bottom: 4px; }

  /* ═════ OVERVIEW: LESSON GRID ═════ */
  .lesson-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 30px; }
  .lesson-overview-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 28px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; cursor: pointer; }
  .lesson-overview-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #cbc4b6; }
  .loc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; flex-wrap: wrap; gap: 8px; }
  .badge { background: var(--ink); color: var(--gold); border-radius: 999px; padding: 6px 10px; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }
  .status-pill { background: var(--gold-pale); color: #6e500c; border: 1px solid #e8d5a3; border-radius: 999px; padding: 6px 10px; font-size: 10px; font-weight: 900; text-transform: uppercase; }
  .lesson-overview-card h4 { font-family: "DM Serif Display", Georgia, serif; font-size: 22px; line-height: 1.15; font-weight: 400; margin-bottom: 7px; }
  .lesson-overview-card .sub { color: var(--muted); font-style: italic; font-size: 13px; margin-bottom: 13px; }
  .flow { display: grid; gap: 8px; margin-top: 14px; }
  .flow-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; background: var(--fog); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
  .flow-row span { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); font-weight: 900; }
  .flow-row strong { font-size: 13px; }
  .loc-cta { margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--gold); font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
  .loc-cta::after { content: " →"; }

  /* ═════ WORKSHEET CENTER ═════ */
  .worksheet-center { background: var(--ink); color: white; border-radius: var(--rxl); padding: 28px; margin-top: 18px; }
  .worksheet-center h3 { font-family: "DM Serif Display", Georgia, serif; font-size: 30px; font-weight: 400; margin-bottom: 8px; color: white; }
  .worksheet-center > p { color: rgba(255,255,255,.65); max-width: 780px; }
  .ws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
  .ws { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 15px; padding: 16px; transition: all var(--dur); }
  .ws:hover { background: rgba(255,255,255,.1); border-color: rgba(184,146,42,.3); }
  .ws small { color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 900; }
  .ws strong { display: block; color: white; margin: 6px 0 5px; font-family: "DM Serif Display", Georgia, serif; font-size: 17px; font-weight: 400; }
  .ws span { color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.5; }

  /* ═════ TOAST ═════ */
  .toast { position: fixed; bottom: 24px; right: 24px; z-index: 100; background: var(--ink); color: var(--white); border-radius: var(--r); padding: 14px 18px; font-size: 13px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); border: 1px solid rgba(184,146,42,.3); transform: translateY(80px); opacity: 0; transition: all .3s var(--ease); pointer-events: none; max-width: 320px; }
  .toast.show { transform: translateY(0); opacity: 1; }
  .toast-gold { color: var(--gold); font-size: 16px; }

  /* ═════ CLARITY PAUSE ═════ */
  .clarity-pause { background: linear-gradient(135deg, var(--ink) 0%, #1e1a14 100%); border: 1px solid rgba(184,146,42,.3); border-radius: var(--rl); padding: 24px; margin: 18px 0; position: relative; overflow: hidden; }
  .clarity-pause::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); }
  .pi-eyebrow { color: var(--gold); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 900; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
  .pi-eyebrow::before { content: "⏸"; font-size: 14px; }
  .clarity-pause h3 { font-family: "DM Serif Display", serif; font-size: 22px; font-weight: 400; color: var(--white); margin-bottom: 12px; line-height: 1.25; }
  .clarity-pause p { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; margin-bottom: 10px; }
  .clarity-pause p:last-of-type { margin-bottom: 0; }
  .clarity-pause em { color: var(--gold); font-style: italic; }
  .pi-behaviors { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r); padding: 14px; margin: 12px 0; }
  .pi-behaviors ul { list-style: none; }
  .pi-behaviors li { color: rgba(255,255,255,.7); font-size: 13px; padding: 5px 0; padding-left: 18px; position: relative; }
  .pi-behaviors li::before { content: "→"; position: absolute; left: 0; color: var(--gold); }
  .pi-why { color: var(--gold); font-family: "DM Serif Display", serif; font-style: italic; font-size: 16px; margin-top: 14px; }

  /* ═════ FINANCIAL REFRAMING ═════ */
  .translation-mode { background: var(--ink); border: 1px solid rgba(184,146,42,.25); border-radius: var(--rl); margin: 18px 0; overflow: hidden; }
  .tm-header { background: rgba(184,146,42,.08); padding: 14px 18px; border-bottom: 1px solid rgba(184,146,42,.18); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
  .tm-title { color: var(--gold); font-family: "DM Serif Display", serif; font-size: 18px; font-weight: 400; font-style: italic; }
  .tm-sub { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 900; }
  .tm-row { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.06); gap: 14px; transition: background var(--dur); }
  .tm-row:last-child { border-bottom: none; }
  .tm-row:hover { background: rgba(184,146,42,.04); }
  .tm-said { color: rgba(255,255,255,.5); font-style: italic; font-size: 13px; line-height: 1.5; }
  .tm-said::before { content: "“"; color: var(--gold); margin-right: 2px; }
  .tm-said::after { content: "”"; color: var(--gold); margin-left: 2px; }
  .tm-means { color: var(--white); font-weight: 700; font-size: 13px; line-height: 1.5; position: relative; padding-left: 16px; }
  .tm-means::before { content: "→"; position: absolute; left: 0; color: var(--gold); }

  /* ═════ SYSTEM WANTS / YOU ARE BUILDING ═════ */
  .system-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
  .sv-col { border-radius: var(--rl); padding: 20px; }
  .sv-col.wants { background: var(--red-bg); border: 1px solid #e8b4b4; }
  .sv-col.wants .sv-label { color: var(--red); }
  .sv-col.wants ul li { color: #5a0000; }
  .sv-col.wants ul li::before { content: "✕"; color: var(--red); font-weight: 900; }
  .sv-col.building { background: var(--success-bg); border: 1px solid #b4d4b4; }
  .sv-col.building .sv-label { color: var(--success); }
  .sv-col.building ul li { color: #1a3a28; }
  .sv-col.building ul li::before { content: "✓"; color: var(--success); font-weight: 900; }
  .sv-label { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 900; margin-bottom: 8px; }
  .sv-col h4 { font-family: "DM Serif Display", serif; font-size: 18px; font-weight: 400; margin-bottom: 12px; color: var(--ink); }
  .sv-col ul { list-style: none; }
  .sv-col ul li { padding: 6px 0; padding-left: 22px; position: relative; font-size: 13px; line-height: 1.5; }
  .sv-col ul li::before { position: absolute; left: 0; }

  /* ═════ AUDIO REFLECTION PAUSE ═════ */
  .audio-pause-prompt { background: var(--gold-pale); border: 1px solid #e8d5a3; border-left: 4px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; padding: 18px 22px; margin: 16px 0; display: none; animation: fadeUp .5s var(--ease); }
  .audio-pause-prompt.show { display: block; }
  .app-eyebrow { color: var(--gold-deep); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 900; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
  .app-eyebrow::before { content: "⏸"; }
  .audio-pause-prompt h4 { font-family: "DM Serif Display", serif; font-size: 19px; font-weight: 400; color: var(--ink); margin-bottom: 10px; font-style: italic; line-height: 1.4; }
  .audio-pause-prompt p { color: #3b3327; font-size: 14px; line-height: 1.7; margin: 0; }
  .audio-pause-prompt .app-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
  .app-btn { background: none; border: 1px solid var(--gold); color: var(--gold-deep); padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; cursor: pointer; transition: all var(--dur); font-family: inherit; }
  .app-btn:hover { background: var(--gold); color: var(--ink); }
  .app-btn.dark { background: var(--ink); border-color: var(--ink); color: white; }
  .app-btn.dark:hover { background: var(--ink2); }

  /* ═════ TIGHTENED DISCLAIMER ═════ */
  .disclaimer-v2 { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; margin-top: 18px; font-size: 12px; color: var(--muted); line-height: 1.75; }
  .disclaimer-v2 strong { color: var(--ink); display: block; margin-bottom: 6px; font-size: 13px; }
  .disclaimer-v2 .scope-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
  .scope-pill { background: var(--fog); border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; }
  .scope-pill.is { background: var(--success-bg); border-color: #b4d4b4; }
  .scope-pill.is-not { background: var(--red-bg); border-color: #e8b4b4; }
  .scope-pill small { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 900; display: block; margin-bottom: 4px; }
  .scope-pill.is small { color: var(--success); }
  .scope-pill.is-not small { color: var(--red); }
  .scope-pill strong { font-family: "DM Serif Display", serif; font-size: 13px; font-weight: 400; margin: 0; }
  @media (max-width: 640px) { .disclaimer-v2 .scope-grid { grid-template-columns: 1fr 1fr; } }

  /* ═════ METHODOLOGY & SCOPE PAGE ═════ */

  /* Escalation banner — top-of-page emergency callout */
  .meth-escalation-banner { background: linear-gradient(135deg, #1a0a0a 0%, #2a0e0e 100%); border: 1px solid rgba(220,80,80,.3); border-left: 5px solid #c0392b; border-radius: var(--rl); padding: 40px 44px; margin-bottom: 28px; position: relative; overflow: hidden; color: var(--white); }
  .meth-escalation-banner::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(192,57,43,.12), transparent 65%); right: -140px; top: -140px; pointer-events: none; }
  .meb-eyebrow { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: #ff9d9d; font-weight: 900; margin-bottom: 12px; }
  .meb-title { font-family: "DM Serif Display", serif; font-size: clamp(20px, 3vw, 28px); font-weight: 400; color: var(--white); margin-bottom: 14px; line-height: 1.2; }
  .meb-body { font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.75; max-width: 800px; margin-bottom: 28px; }
  .meb-body strong { color: #ff9d9d; }
  .meb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; position: relative; z-index: 1; }
  .meb-item { background: rgba(255,255,255,.04); border: 1px solid rgba(220,80,80,.2); border-radius: var(--r); padding: 18px; }
  .meb-icon { font-size: 22px; margin-bottom: 8px; }
  .meb-label { font-weight: 900; font-size: 13px; color: var(--white); margin-bottom: 6px; }
  .meb-action { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.65; }
  @media (max-width: 640px) { .meb-grid { grid-template-columns: 1fr; } }

  /* Scope grid — is / is-not two column */
  .meth-scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
  .meth-scope-item { border-radius: var(--r); padding: 22px; }
  .meth-scope-item.is { background: var(--success-bg); border: 1px solid #b4d4b4; }
  .meth-scope-item.is-not { background: var(--red-bg); border: 1px solid #e8b4b4; }
  .msi-label { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 900; margin-bottom: 14px; }
  .msi-label.is { color: var(--success); }
  .msi-label.is-not { color: var(--red); }
  .msi-list { display: grid; gap: 8px; }
  .msi-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; }
  .meth-scope-item.is .msi-row span:first-child { color: var(--success); font-weight: 900; flex-shrink: 0; }
  .meth-scope-item.is-not .msi-row span:first-child { color: var(--red); font-weight: 900; flex-shrink: 0; }
  @media (max-width: 680px) { .meth-scope-grid { grid-template-columns: 1fr; } }

  /* Not-grid — 4 tile explanation */
  .meth-not-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
  .meth-not-item { background: var(--fog); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; }
  .mni-icon { font-size: 24px; margin-bottom: 10px; }
  .mni-title { font-family: "DM Serif Display", serif; font-size: 18px; font-weight: 400; color: var(--ink); margin-bottom: 10px; }
  .mni-body { font-size: 13px; color: #3d3935; line-height: 1.7; }
  @media (max-width: 680px) { .meth-not-grid { grid-template-columns: 1fr; } }

  /* Escalation table */
  .meth-escalation-table { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-top: 20px; }
  .met-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .met-row > div { padding: 14px 18px; border-bottom: 1px solid var(--border2); font-size: 13px; line-height: 1.6; }
  .met-row > div:first-child { border-right: 1px solid var(--border2); }
  .met-row.header { background: var(--ink); }
  .met-row.header > div { color: var(--gold); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 900; border-color: rgba(255,255,255,.1); }
  .met-row:last-child > div { border-bottom: none; }
  .met-row > div span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
  @media (max-width: 600px) { .met-row { grid-template-columns: 1fr; } .met-row > div:first-child { border-right: none; } }

  /* ═════ END METHODOLOGY CSS ═════ */


  .methodology-card {
    background: linear-gradient(135deg, #221e18 0%, #181410 100%);
    border: 1px solid rgba(184,146,42,.18);
    border-radius: 26px;
    padding: 52px 48px;
    margin: 36px 0;
    position: relative;
    overflow: hidden;
    color: var(--white);
    box-shadow:
      0 1px 0 rgba(184,146,42,.08) inset,
      0 30px 80px -30px rgba(15,15,15,.4),
      0 0 0 1px rgba(0,0,0,.02);
  }
  .methodology-card::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(184,146,42,.16), rgba(184,146,42,.04) 40%, transparent 70%); right: -200px; top: -220px; pointer-events: none; filter: blur(4px); }
  .methodology-card::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(184,146,42,.06); right: -130px; top: -130px; pointer-events: none; }
  .meth-eyebrow { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
  .meth-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(184,146,42,.6); }
  .methodology-card h2 { font-family: "DM Serif Display", serif; font-size: clamp(30px, 4.2vw, 42px); font-weight: 400; line-height: 1.1; letter-spacing: -.6px; margin-bottom: 10px; color: #f7f0e0; position: relative; z-index: 1; }
  .meth-tm { font-size: 14px; color: var(--gold); font-weight: 700; vertical-align: super; margin-left: 2px; }
  .meth-sub { font-family: "DM Serif Display", serif; font-style: italic; font-size: 17px; color: rgba(255,240,210,.65); margin-bottom: 22px; position: relative; z-index: 1; max-width: 620px; line-height: 1.5; }
  .meth-body { color: rgba(255,240,210,.72); font-size: 15px; line-height: 1.8; max-width: 680px; position: relative; z-index: 1; }
  .meth-body strong { color: var(--gold2); font-weight: 700; }
  .meth-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; position: relative; z-index: 1; }
  .meth-pillar { background: rgba(255,255,255,.025); border: 1px solid rgba(184,146,42,.14); border-radius: 16px; padding: 22px; transition: all var(--dur); }
  .meth-pillar:hover { background: rgba(184,146,42,.05); border-color: rgba(184,146,42,.25); }
  .meth-pillar-num { font-family: "DM Serif Display", serif; font-size: 24px; color: var(--gold); line-height: 1; margin-bottom: 8px; }
  .meth-pillar-name { font-family: "DM Serif Display", serif; font-size: 16px; color: #f7f0e0; font-weight: 400; margin-bottom: 6px; }
  .meth-pillar-desc { font-size: 12.5px; color: rgba(255,240,210,.55); line-height: 1.6; }
  @media (max-width: 760px) { .meth-pillars { grid-template-columns: 1fr; } }

  /* ═════ MASTER BRAND CALLOUT ═════ */
  .master-brand-callout { background: rgba(255,255,255,.04); border: 1px solid rgba(184,146,42,.18); border-radius: var(--r); padding: 14px 16px; margin-top: 16px; position: relative; z-index: 1; }
  .mbc-eyebrow { font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 900; margin-bottom: 8px; }
  .mbc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .mbc-item { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 9px 8px; text-align: center; transition: all var(--dur); }
  .mbc-item.current { background: rgba(184,146,42,.14); border-color: rgba(184,146,42,.35); }
  .mbc-item.done { background: rgba(26,92,58,.12); border-color: rgba(26,92,58,.3); }
  .mbc-num { font-family: "DM Serif Display", serif; font-size: 16px; color: var(--gold); line-height: 1; margin-bottom: 3px; }
  .mbc-item.done .mbc-num { color: #6fcf97; }
  .mbc-name { font-size: 9px; color: rgba(255,255,255,.55); letter-spacing: .5px; text-transform: uppercase; font-weight: 900; }
  .mbc-item.current .mbc-name { color: var(--gold); }
  @media (max-width: 760px) { .mbc-grid { grid-template-columns: repeat(2, 1fr); } }

  /* ═════ LIFE MAP DIAGRAM ═════ */
  .life-map {
    background: linear-gradient(135deg, #221e18 0%, #181410 100%);
    border: 1px solid rgba(184,146,42,.16);
    border-radius: 26px;
    padding: 48px;
    margin: 36px 0;
    position: relative;
    overflow: hidden;
    color: var(--white);
    box-shadow:
      0 1px 0 rgba(184,146,42,.08) inset,
      0 30px 80px -30px rgba(15,15,15,.4);
  }
  .life-map::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(184,146,42,.08), transparent 60%); pointer-events: none; }
  .life-map-eyebrow { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); font-weight: 900; margin-bottom: 10px; position: relative; z-index: 1; }
  .life-map h3 { font-family: "DM Serif Display", serif; font-size: 28px; font-weight: 400; line-height: 1.15; margin-bottom: 6px; color: var(--white); position: relative; z-index: 1; }
  .life-map > p { color: rgba(255,255,255,.6); font-size: 14px; margin-bottom: 22px; position: relative; z-index: 1; }
  .lm-rings { display: grid; place-items: center; padding: 18px 0; position: relative; z-index: 1; min-height: 380px; }
  .lm-ring { position: absolute; border: 1px dashed rgba(184,146,42,.2); border-radius: 50%; pointer-events: none; }
  .lm-ring.r1 { width: 360px; height: 360px; }
  .lm-ring.r2 { width: 260px; height: 260px; }
  .lm-ring.r3 { width: 160px; height: 160px; }
  .lm-core { position: relative; z-index: 2; width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold2)); display: grid; place-items: center; text-align: center; color: var(--ink); box-shadow: 0 0 30px rgba(184,146,42,.4); }
  .lm-core-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-weight: 900; margin-bottom: 4px; }
  .lm-core-name { font-family: "DM Serif Display", serif; font-size: 17px; line-height: 1.1; padding: 0 8px; }
  .lm-node { position: absolute; background: rgba(255,255,255,.06); border: 1px solid rgba(184,146,42,.3); border-radius: 12px; padding: 9px 12px; text-align: center; min-width: 110px; backdrop-filter: blur(4px); transition: all var(--dur); }
  .lm-node:hover { background: rgba(184,146,42,.12); border-color: var(--gold); transform: scale(1.04); }
  .lm-node small { display: block; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 2px; }
  .lm-node strong { font-family: "DM Serif Display", serif; font-size: 13px; color: var(--white); font-weight: 400; }
  .lm-node.pos-n { top: 30px; left: 50%; transform: translateX(-50%); }
  .lm-node.pos-ne { top: 90px; right: 30px; }
  .lm-node.pos-e { top: 50%; right: 0; transform: translateY(-50%); }
  .lm-node.pos-se { bottom: 90px; right: 30px; }
  .lm-node.pos-s { bottom: 30px; left: 50%; transform: translateX(-50%); }
  .lm-node.pos-sw { bottom: 90px; left: 30px; }
  .lm-node.pos-w { top: 50%; left: 0; transform: translateY(-50%); }
  .lm-node.pos-nw { top: 90px; left: 30px; }
  @media (max-width: 720px) {
    .lm-rings { min-height: auto; flex-direction: column; display: flex; padding: 0; }
    .lm-ring { display: none; }
    .lm-core { margin-bottom: 16px; }
    .lm-node { position: relative; top: auto; right: auto; bottom: auto; left: auto; transform: none; margin: 5px 0; width: 100%; }
  }

  /* ═════ PRESSURE EVENT SIMULATION ═════ */
  .sim-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rxl); padding: 36px; margin: 28px 0; position: relative; box-shadow: var(--shadow); overflow: hidden; }
  .sim-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold2), var(--gold)); }
  .sim-eyebrow { display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: var(--gold); border-radius: 999px; padding: 8px 14px; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; }
  .sim-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(184,146,42,.7); animation: pulse 2s infinite; }
  .sim-card h3 { font-family: "DM Serif Display", serif; font-size: 26px; font-weight: 400; line-height: 1.2; margin-bottom: 8px; }
  .sim-card > p { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
  .sim-disclaimer { background: var(--gold-pale); border: 1px dashed #d4a83c; border-radius: var(--r); padding: 11px 14px; font-size: 12px; color: var(--gold-deep); margin-bottom: 18px; display: flex; align-items: flex-start; gap: 8px; }
  .sim-disclaimer strong { color: var(--gold-deep); }
  .sim-stage { display: none; animation: fadeUp .4s var(--ease); }
  .sim-stage.active { display: block; }
  .sim-intro { background: var(--fog); border: 1px solid var(--border); border-radius: var(--rl); padding: 22px; }
  .sim-intro h4 { font-family: "DM Serif Display", serif; font-size: 19px; font-weight: 400; margin-bottom: 10px; }
  .sim-intro ul { list-style: none; margin: 12px 0 14px; }
  .sim-intro ul li { padding: 7px 0 7px 22px; font-size: 13px; color: #3d3935; position: relative; }
  .sim-intro ul li::before { content: "→"; position: absolute; left: 0; color: var(--gold); font-weight: 900; }
  .sim-start-btn { background: var(--ink); color: var(--gold); border: none; border-radius: 12px; padding: 14px 22px; font-family: inherit; font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all var(--dur); display: inline-flex; align-items: center; gap: 9px; }
  .sim-start-btn:hover { background: var(--ink2); transform: translateY(-1px); }
  .sim-start-btn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(184,146,42,.6); }
  .sim-round-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
  .sim-round-pill { background: var(--ink); color: var(--gold); border-radius: 999px; padding: 5px 12px; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; }
  .sim-round-segs { display: flex; gap: 4px; flex: 1; }
  .sim-round-seg { flex: 1; height: 4px; border-radius: 99px; background: var(--fog2); transition: background var(--dur); }
  .sim-round-seg.done { background: var(--success); }
  .sim-round-seg.current { background: var(--gold); animation: pulse 2s infinite; }
  .sim-incoming { background: linear-gradient(135deg, var(--ink) 0%, #1c1814 100%); border-radius: var(--rl); padding: 22px; position: relative; overflow: hidden; margin-bottom: 14px; }
  .sim-incoming::before { content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(139,26,26,.22), transparent 65%); pointer-events: none; }
  .sim-incoming.calm::before { background: radial-gradient(circle, rgba(184,146,42,.16), transparent 65%); }
  .sim-incoming-header { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; position: relative; z-index: 1; }
  .sim-incoming-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,107,107,.18); border: 1px solid rgba(255,107,107,.35); display: grid; place-items: center; font-size: 16px; color: #ff9d9d; }
  .sim-incoming.calm .sim-incoming-icon { background: rgba(184,146,42,.16); border-color: rgba(184,146,42,.35); color: var(--gold); }
  .sim-incoming-meta { flex: 1; }
  .sim-incoming-tag { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.4); font-weight: 900; }
  .sim-incoming-caller { font-family: "DM Serif Display", serif; font-size: 17px; color: var(--white); margin-top: 2px; }
  .sim-script { background: rgba(255,255,255,.04); border-left: 3px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; padding: 16px 18px; font-family: "DM Serif Display", serif; font-style: italic; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.92); position: relative; z-index: 1; }
  .sim-script::before { content: "“"; color: var(--gold); font-size: 28px; line-height: 0; vertical-align: -10px; margin-right: 4px; }
  .sim-question { font-size: 13px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 16px 0 10px; }
  .sim-options { display: grid; gap: 9px; }
  .sim-option { background: var(--fog); border: 1.5px solid var(--border); border-radius: var(--r); padding: 13px 16px; cursor: pointer; transition: all var(--dur); font-family: inherit; text-align: left; color: var(--ink); font-size: 13px; line-height: 1.5; display: flex; gap: 12px; align-items: flex-start; width: 100%; }
  .sim-option-letter { width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--border); display: grid; place-items: center; font-weight: 900; font-size: 11px; color: var(--muted); flex-shrink: 0; transition: all var(--dur); }
  .sim-option:hover { border-color: var(--gold); background: var(--gold-pale); }
  .sim-option:hover .sim-option-letter { border-color: var(--gold); color: var(--gold-deep); }
  .sim-option.picked { border-color: var(--gold); background: var(--gold-pale); }
  .sim-option.picked .sim-option-letter { background: var(--gold); border-color: var(--gold); color: var(--ink); }
  .sim-option:disabled { opacity: .55; cursor: not-allowed; }
  .sim-option:disabled:hover { border-color: var(--border); background: var(--fog); }
  .sim-feedback { background: var(--fog); border-radius: var(--rl); padding: 20px; margin-top: 16px; border-left: 4px solid var(--gold); display: none; animation: fadeUp .4s var(--ease); }
  .sim-feedback.show { display: block; }
  .sim-feedback-row { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 13px; }
  .sim-feedback-row:last-child { border-bottom: none; }
  .sim-feedback-row strong { color: var(--gold-deep); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 900; }
  .sim-feedback-row span { color: #3d3935; line-height: 1.6; }
  .sim-feedback-verdict { display: inline-flex; align-items: center; gap: 7px; background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 12px; }
  .sim-feedback-verdict.protects { background: var(--success-bg); border-color: #b4d4b4; color: var(--success); }
  .sim-feedback-verdict.costs { background: var(--red-bg); border-color: #e8b4b4; color: var(--red); }
  .sim-feedback-verdict.mixed { background: var(--warn-bg); border-color: #ead49a; color: var(--warn); }
  .sim-pause { background: var(--gold-pale); border: 1px solid #e8d5a3; border-left: 4px solid var(--gold); border-radius: 0 var(--rl) var(--rl) 0; padding: 18px 22px; margin: 14px 0; text-align: center; }
  .sim-pause h5 { font-family: "DM Serif Display", serif; font-style: italic; font-size: 17px; font-weight: 400; color: var(--ink); margin-bottom: 8px; }
  .sim-pause p { font-size: 13px; color: #3b3327; line-height: 1.6; margin: 0; }
  .pause-dot { width: 50px; height: 50px; border-radius: 50%; background: var(--gold); margin: 10px auto 12px; transition: transform 4s ease-in-out; opacity: .9; }
  .pause-dot.expand { transform: scale(1.5); }
  .sim-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
  .sim-doc { background: var(--ink); color: var(--white); border-radius: var(--rl); padding: 24px; margin-top: 16px; }
  .sim-doc h4 { font-family: "DM Serif Display", serif; font-size: 22px; font-weight: 400; color: var(--white); margin-bottom: 8px; }
  .sim-doc > p { color: rgba(255,255,255,.65); font-size: 14px; margin-bottom: 14px; }
  .sim-doc-field { background: rgba(255,255,255,.04); border: 1px dashed rgba(184,146,42,.35); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
  .sim-doc-field label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 900; display: block; margin-bottom: 6px; }
  .sim-doc-field textarea, .sim-doc-field input { width: 100%; background: transparent; border: none; color: var(--white); font-family: inherit; font-size: 13px; outline: none; resize: vertical; min-height: 36px; }
  .sim-doc-field textarea::placeholder, .sim-doc-field input::placeholder { color: rgba(255,255,255,.3); }
  .sim-complete { background: linear-gradient(135deg, var(--success-bg), #d5ead9); border: 1px solid #b4d4b4; border-radius: var(--rl); padding: 24px; text-align: center; }
  .sim-complete h4 { font-family: "DM Serif Display", serif; font-size: 22px; font-weight: 400; color: var(--success); margin-bottom: 8px; }
  .sim-complete p { color: #1a3a28; font-size: 14px; margin-bottom: 14px; }
  @media (max-width: 640px) {
    .sim-feedback-row { grid-template-columns: 1fr; gap: 4px; }
    .sim-feedback-row strong { font-size: 9px; }
  }

  /* ═════ RESPONSIVE ═════ */
  @media (max-width: 1050px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { position: relative; height: auto; }
    .side-card { position: relative; top: auto; }
    .metrics { grid-template-columns: repeat(2, 1fr); }
    .lesson-overview-grid { grid-template-columns: 1fr; }
    .ws-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .main { padding: 18px; }
    .hero { padding: 26px; }
    .metrics, .ws-grid { grid-template-columns: 1fr; }
    .checkbox-grid, .compare-grid, .do-dont { grid-template-columns: 1fr; }
    .next-lesson-card { flex-direction: column; align-items: flex-start; }
    .tab-bar { gap: 4px; }
    .tab { padding: 8px 12px; font-size: 11px; }
  }

  /* ═════ GLOBAL FOOTER DISCLAIMER ═════ */
  .global-footer { background: var(--ink2); color: rgba(255,255,255,.45); font-size: 11px; line-height: 1.8; padding: 28px 44px; border-top: 1px solid rgba(255,255,255,.07); }
  .global-footer strong { color: rgba(255,255,255,.7); display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .3px; }
  .global-footer a { color: rgba(255,255,255,.4); text-decoration: underline; }
  .global-footer a:hover { color: var(--gold); }
  .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 20px; }
  .footer-col strong { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.5); }
  .footer-divider { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 20px 0; }
  .footer-legal { font-size: 10px; color: rgba(255,255,255,.28); line-height: 1.7; }
  @media (max-width: 768px) { .footer-cols { grid-template-columns: 1fr; gap: 16px; } .global-footer { padding: 24px 20px; } }

  /* ═════ ONBOARDING DISCLAIMER MODAL ═════ */
  .onboard-overlay { position: fixed; inset: 0; background: rgba(15,15,15,.72); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn .3s var(--ease); backdrop-filter: blur(4px); }
  .onboard-overlay.hidden { display: none; }
  .onboard-modal { background: var(--white); border-radius: var(--rxl); padding: 40px; max-width: 580px; width: 100%; box-shadow: var(--shadow-lg); position: relative; max-height: 90vh; overflow-y: auto; }
  .onboard-modal h2 { font-family: "DM Serif Display", serif; font-size: 26px; font-weight: 400; margin-bottom: 6px; color: var(--ink); }
  .onboard-modal .onboard-sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
  .onboard-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 20px; }
  .onboard-pill { border-radius: 10px; padding: 10px 12px; font-size: 12px; }
  .onboard-pill.is { background: var(--success-bg); border: 1px solid #b4d4b4; }
  .onboard-pill.is-not { background: var(--red-bg); border: 1px solid #e8b4b4; }
  .onboard-pill small { display: block; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 900; margin-bottom: 2px; }
  .onboard-pill.is small { color: var(--success); }
  .onboard-pill.is-not small { color: var(--red); }
  .onboard-pill strong { font-size: 12px; font-weight: 700; color: var(--ink); }
  .onboard-body { font-size: 13px; color: #3d3935; line-height: 1.75; }
  .onboard-body p { margin-bottom: 10px; }
  .onboard-body strong { color: var(--ink); }
  .onboard-ack { display: flex; align-items: flex-start; gap: 10px; background: var(--fog); border: 1px solid var(--border); border-radius: 10px; padding: 13px; margin: 20px 0 16px; font-size: 12px; color: #3d3935; cursor: pointer; transition: border-color var(--dur), background var(--dur); }
  .onboard-ack:hover { border-color: var(--gold); background: var(--gold-pale); }
  .onboard-ack.checked { background: var(--success-bg); border-color: #b4d4b4; }
  .onboard-check { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--border); flex-shrink: 0; margin-top: 1px; display: grid; place-items: center; transition: all var(--dur); }
  .onboard-ack.checked .onboard-check { background: var(--success); border-color: var(--success); color: white; font-size: 11px; }
  .onboard-continue { width: 100%; background: var(--ink); color: var(--gold); border: none; border-radius: 12px; padding: 15px; font-family: inherit; font-size: 13px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; cursor: not-allowed; opacity: .45; transition: all var(--dur); }
  .onboard-continue.ready { opacity: 1; cursor: pointer; }
  .onboard-continue.ready:hover { background: var(--ink2); }
  .onboard-terms { font-size: 11px; color: var(--muted); text-align: center; margin-top: 10px; }
  .onboard-terms a { color: var(--gold-deep); text-decoration: underline; }

  /* ═════ WORKSHEET INLINE DISCLAIMER ═════ */
  .ws-disclaimer { background: var(--fog2); border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 0 var(--r) var(--r) 0; padding: 10px 14px; font-size: 11px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
  .ws-disclaimer strong { color: var(--ink); }

  /* ═══════════════════════════════════════════════════════════════════
     LESSON 4 QUANT LAB
  ═══════════════════════════════════════════════════════════════════ */
  :root { --academic: #2a3f5f; --academic-pale: #eef2f8; }

  .quant-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--rxl);
    padding: 36px 34px;
    box-shadow: var(--shadow);
    margin: 28px 0;
    position: relative;
    overflow: hidden;
  }
  .quant-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--academic), var(--gold) 60%, var(--gold2));
  }
  .quant-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--academic); font-weight: 900; margin-bottom: 14px;
    padding: 5px 10px; border: 1px solid rgba(42,63,95,.2);
    border-radius: 99px; background: var(--academic-pale);
  }
  .quant-eyebrow::before {
    content: "Σ"; font-family: "DM Serif Display", serif;
    font-size: 13px; font-style: italic;
  }
  .quant-title {
    font-family: "DM Serif Display", serif;
    font-size: 30px; line-height: 1.15;
    margin-bottom: 12px;
  }
  .quant-title em { font-style: italic; color: var(--gold-deep); }
  .quant-lead {
    color: var(--muted); font-size: 15px; line-height: 1.65;
    max-width: 680px; margin-bottom: 22px;
  }
  .quant-gate {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; margin-bottom: 20px;
    background: linear-gradient(135deg, var(--academic-pale), #fff);
    border: 1px solid rgba(42,63,95,.18);
    border-left: 3px solid var(--academic);
    border-radius: var(--r);
    font-size: 13px;
  }
  .quant-gate-icon {
    width: 30px; height: 30px; border-radius: 7px;
    background: var(--academic); color: #fff;
    display: grid; place-items: center;
    font-family: "DM Serif Display", serif; font-size: 13px;
    flex-shrink: 0;
  }
  .quant-gate strong { display: block; font-size: 11.5px; letter-spacing: .3px; margin-bottom: 2px; }
  .quant-gate span { color: var(--muted); font-size: 12.5px; }

  .quant-outcomes {
    background: var(--fog);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 16px 22px;
    margin-bottom: 26px;
  }
  .quant-outcomes-label {
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold-deep); font-weight: 900; margin-bottom: 9px;
  }
  .quant-outcomes ul { list-style: none; display: grid; gap: 6px; }
  .quant-outcomes li {
    font-size: 13.5px; line-height: 1.55; padding-left: 20px; position: relative;
    color: #2a2520;
  }
  .quant-outcomes li::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 12px; height: 2px; background: var(--gold);
  }

  .calc {
    background: linear-gradient(180deg, #fcfbf8, var(--white));
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 24px;
    margin-bottom: 22px;
  }
  .calc-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; padding-bottom: 13px;
    border-bottom: 1px dashed var(--border);
    flex-wrap: wrap; gap: 8px;
  }
  .calc-name { font-family: "DM Serif Display", serif; font-size: 18px; }
  .calc-name-num {
    display: inline-block;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--ink); color: var(--gold);
    font-family: "DM Serif Display", serif; font-size: 12px;
    text-align: center; line-height: 24px;
    margin-right: 9px; vertical-align: 2px;
  }
  .calc-tag {
    font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--gold-deep); font-weight: 900;
    padding: 4px 9px; border-radius: 99px;
    background: var(--gold-pale); border: 1px solid rgba(184,146,42,.25);
  }
  .calc-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-bottom: 18px;
  }
  .calc-field { display: flex; flex-direction: column; gap: 5px; }
  .calc-field label {
    font-size: 11px; font-weight: 900; letter-spacing: .8px;
    text-transform: uppercase; color: #3d3935;
  }
  .calc-field .hint {
    font-size: 11px; color: var(--muted); font-style: italic;
    line-height: 1.4;
  }
  .calc-input-wrap { position: relative; }
  .calc-input-wrap .prefix, .calc-input-wrap .suffix {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-family: monospace; font-size: 13px; color: var(--muted); pointer-events: none;
  }
  .calc-input-wrap .prefix { left: 12px; }
  .calc-input-wrap .suffix { right: 12px; }
  .calc-input-wrap.has-prefix input { padding-left: 26px; }
  .calc-input-wrap.has-suffix input { padding-right: 30px; }
  .calc input[type="number"] {
    width: 100%; padding: 10px 13px;
    border: 1px solid var(--border); border-radius: 9px;
    font-family: monospace; font-size: 14px;
    background: #fff; color: var(--ink);
    transition: all var(--dur) var(--ease);
  }
  .calc input[type="number"]:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,146,42,.12);
  }

  .calc-output {
    background: var(--ink2);
    color: var(--white);
    border-radius: var(--r);
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
  }
  .calc-output::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  }
  .calc-output-label {
    font-size: 9.5px; letter-spacing: 2.5px; text-transform: uppercase;
    color: rgba(255,255,255,.5); margin-bottom: 14px; font-weight: 900;
  }
  .calc-output-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
  }
  .calc-output-item-label {
    font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255,255,255,.45); margin-bottom: 4px;
  }
  .calc-output-item-val {
    font-family: monospace; font-size: 21px; font-weight: 700;
    color: var(--gold); letter-spacing: -.5px;
  }
  .calc-output-item-val.small { font-size: 15px; }
  .calc-output-item-sub {
    font-size: 10px; color: rgba(255,255,255,.55);
    margin-top: 3px; line-height: 1.4;
  }
  .calc-verdict {
    margin-top: 16px; padding: 13px 16px;
    border-radius: 9px;
    font-size: 13px; line-height: 1.55;
    display: flex; align-items: flex-start; gap: 11px;
  }
  .calc-verdict.ready { background: var(--success-bg); color: var(--success); border: 1px solid rgba(26,92,58,.2); }
  .calc-verdict.caution { background: var(--warn-bg); color: var(--warn); border: 1px solid rgba(122,80,0,.2); }
  .calc-verdict.stretch { background: var(--red-bg); color: var(--red); border: 1px solid rgba(139,26,26,.2); }
  .calc-verdict-icon {
    flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 900; font-size: 10.5px; margin-top: 1px;
  }
  .calc-verdict.ready .calc-verdict-icon { background: var(--success); color: #fff; }
  .calc-verdict.caution .calc-verdict-icon { background: var(--warn); color: #fff; }
  .calc-verdict.stretch .calc-verdict-icon { background: var(--red); color: #fff; }
  .calc-verdict strong { display: block; margin-bottom: 2px; }

  .amort-table {
    width: 100%; border-collapse: collapse; margin-top: 12px;
    background: #fff; border-radius: var(--r); overflow: hidden;
    border: 1px solid var(--border);
    font-family: monospace; font-size: 12.5px;
  }
  .amort-table th {
    background: var(--ink); color: var(--gold);
    text-align: left; padding: 10px 13px;
    font-size: 10px; letter-spacing: 1.5px;
    text-transform: uppercase; font-weight: 900;
    font-family: "DM Sans", sans-serif;
  }
  .amort-table td {
    padding: 9px 13px;
    border-top: 1px solid var(--border);
    color: var(--ink);
  }
  .amort-table tr.highlight td { background: var(--gold-pale); font-weight: 700; }
  .amort-table td.delta { color: var(--success); font-weight: 700; }
  .amort-table td.delta.neg { color: var(--red); }

  .bridge-card {
    background: linear-gradient(135deg, var(--gold-pale) 0%, #fff 100%);
    border: 1px solid rgba(184,146,42,.3);
    border-radius: var(--rl);
    padding: 24px 26px;
    margin-top: 20px;
  }
  .bridge-eyebrow {
    font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--gold-deep); font-weight: 900; margin-bottom: 7px;
  }
  .bridge-card h3 {
    font-family: "DM Serif Display", serif;
    font-size: 21px; line-height: 1.25; margin-bottom: 9px;
  }
  .bridge-card p { color: #3d3935; font-size: 14px; line-height: 1.7; margin-bottom: 10px; }
  .bridge-card textarea {
    width: 100%; min-height: 90px;
    padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 9px;
    font-family: inherit; font-size: 13.5px;
    background: #fff; resize: vertical;
  }
  .bridge-card textarea:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,146,42,.12);
  }

  .rubric {
    margin-top: 22px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    background: #fff;
  }
  .rubric-header {
    background: var(--academic); color: #fff;
    padding: 11px 17px;
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    font-weight: 900;
    display: flex; justify-content: space-between; align-items: center;
  }
  .rubric-header span:last-child { font-size: 10px; color: rgba(255,255,255,.7); letter-spacing: 1.5px; }
  .rubric-row {
    display: grid; grid-template-columns: 110px 1fr 70px;
    gap: 14px; padding: 11px 17px;
    border-top: 1px solid var(--border);
    font-size: 13px;
  }
  .rubric-row:first-of-type { border-top: 0; }
  .rubric-row strong { color: var(--academic); font-size: 11.5px; letter-spacing: .5px; }
  .rubric-row .pts {
    text-align: right; font-family: monospace;
    font-size: 13px; color: var(--gold-deep); font-weight: 700;
  }

  .readings {
    margin-top: 20px;
    background: var(--fog); border: 1px solid var(--border);
    border-radius: var(--r); padding: 20px 24px;
  }
  .readings-label {
    font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--academic); font-weight: 900; margin-bottom: 11px;
    display: flex; align-items: center; gap: 8px;
  }
  .readings-label::before { content: "§"; font-family: "DM Serif Display", serif; font-size: 14px; }
  .readings ul { list-style: none; display: grid; gap: 9px; }
  .readings li {
    font-size: 12.5px; line-height: 1.55;
    padding-left: 18px; position: relative; color: #2a2520;
  }
  .readings li::before {
    content: "→"; position: absolute; left: 0; top: 0;
    color: var(--gold-deep); font-weight: 700;
  }
  .readings li em { color: var(--ink); font-style: italic; }

  @media (max-width: 700px) {
    .calc-grid { grid-template-columns: 1fr; }
    .calc-output-grid { grid-template-columns: 1fr; gap: 12px; }
    .rubric-row { grid-template-columns: 1fr; gap: 4px; }
    .rubric-row .pts { text-align: left; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     CASE STUDY LAUNCH CARD (lives inside Lesson 1)
  ═══════════════════════════════════════════════════════════════════ */
  .case-launch {
    background: linear-gradient(135deg, #0a0906 0%, #1c1815 100%);
    color: #fff;
    border-radius: var(--rxl);
    padding: 38px 36px;
    margin: 28px 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    border: 1px solid rgba(255,255,255,.06);
  }
  .case-launch:hover { transform: translateY(-2px); box-shadow: 0 20px 50px rgba(15,15,15,.25); }
  .case-launch::before {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 40px),
                repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 40px);
    pointer-events: none;
  }
  .case-launch-eyebrow {
    font-family: monospace; font-size: 10px;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(255,255,255,.45); margin-bottom: 18px;
    position: relative; z-index: 1;
  }
  .case-launch-grid {
    display: grid; grid-template-columns: 110px 1fr auto; gap: 26px; align-items: center;
    position: relative; z-index: 1;
  }
  .case-launch-num {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 64px; line-height: 1; font-style: italic;
    color: var(--gold);
  }
  .case-launch-body {}
  .case-launch-title {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 24px; line-height: 1.25; font-weight: 400;
    margin-bottom: 8px; color: #fff;
  }
  .case-launch-sub {
    font-size: 13.5px; color: rgba(255,255,255,.6);
    line-height: 1.55; max-width: 540px;
  }
  .case-launch-cta {
    background: var(--gold); color: var(--ink);
    padding: 14px 22px; border-radius: 8px;
    font-weight: 900; font-size: 12px;
    letter-spacing: 1.2px; text-transform: uppercase;
    border: none; cursor: pointer; white-space: nowrap;
    font-family: inherit;
  }
  .case-launch-meta {
    display: flex; gap: 22px; margin-top: 18px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.08);
    position: relative; z-index: 1; flex-wrap: wrap;
  }
  .case-launch-meta-item { display: flex; flex-direction: column; gap: 2px; }
  .case-launch-meta-label {
    font-family: monospace; font-size: 9px;
    letter-spacing: 1.8px; text-transform: uppercase;
    color: rgba(255,255,255,.4);
  }
  .case-launch-meta-val {
    font-size: 12px; color: rgba(255,255,255,.78); font-weight: 500;
  }
  @media (max-width: 700px) {
    .case-launch-grid { grid-template-columns: 1fr; gap: 14px; }
    .case-launch-num { font-size: 48px; }
    .case-launch-cta { width: 100%; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     CASE STUDY OVERLAY (full-screen, namespaced under .case-shell)
  ═══════════════════════════════════════════════════════════════════ */
  .case-shell {
    display: none;
    position: fixed; inset: 0;
    z-index: 9999;
    background: #f7f5f0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .case-shell.active { display: block; }
  body.case-open { overflow: hidden; }

  /* Case-internal type system — loaded only when overlay is active.
     Imported fonts (Playfair Display, IBM Plex Mono, DM Sans) come from
     a <link> in <head> which we'll add. */
  .case-shell {
    --c-ink:#0a0906; --c-fog:#f7f5f0; --c-fog2:#edeae3; --c-border:#e0dbd0;
    --c-gold:#b8860b; --c-gold-lt:#fdf3d7;
    --c-red:#8b1a1a; --c-red-lt:#fdf1f0;
    --c-green:#1a5c3a; --c-green-lt:#edf7f0;
    --c-muted:#6b6560; --c-white:#fff;
    --c-serif:'Playfair Display', Georgia, serif;
    --c-mono:'IBM Plex Mono', monospace;
    --c-sans:'DM Sans', sans-serif;
    font-family: var(--c-sans);
    color: var(--c-ink);
    line-height: 1.65;
  }
  .case-shell *, .case-shell *::before, .case-shell *::after { box-sizing: border-box; }
  .case-shell .case-close {
    position: fixed; top: 16px; right: 16px;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--c-border);
    color: var(--c-ink);
    display: grid; place-items: center;
    font-size: 18px; cursor: pointer;
    z-index: 10001;
    transition: transform .2s, background .2s;
    font-family: inherit;
  }
  .case-shell .case-close:hover { transform: scale(1.05); background: #fff; }
  .case-shell .c-screen { display: none; animation: cFadeUp .4s ease; }
  .case-shell .c-screen.active { display: block; }
  @keyframes cFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

  .case-shell .c-progress { height: 3px; background: var(--c-fog2); position: sticky; top: 0; z-index: 100; }
  .case-shell .c-progress-fill { height: 100%; background: var(--c-gold); transition: width .5s ease; }

  .case-shell .c-cover { background: var(--c-ink); color: var(--c-white); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 60px 48px; position: relative; overflow: hidden; }
  .case-shell .c-cover::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 40px); pointer-events: none; }
  .case-shell .c-case-label { font-family: var(--c-mono); font-size: 10px; letter-spacing: 3px; color: rgba(255,255,255,.4); text-transform: uppercase; margin-bottom: 32px; }
  .case-shell .c-case-number { font-family: var(--c-serif); font-size: clamp(56px,10vw,96px); line-height: 1; color: var(--c-white); margin-bottom: 8px; font-style: italic; }
  .case-shell .c-case-title { font-family: var(--c-serif); font-size: clamp(20px,3vw,30px); color: rgba(255,255,255,.65); font-weight: 400; margin-bottom: 40px; line-height: 1.3; }
  .case-shell .c-case-meta { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 56px; }
  .case-shell .c-meta-item { display: flex; flex-direction: column; gap: 4px; }
  .case-shell .c-meta-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.35); font-family: var(--c-mono); }
  .case-shell .c-meta-val { font-size: 13px; color: rgba(255,255,255,.8); font-weight: 500; }
  .case-shell .c-cover-quote { border-left: 2px solid rgba(255,255,255,.2); padding-left: 20px; font-family: var(--c-serif); font-style: italic; font-size: 16px; color: rgba(255,255,255,.55); max-width: 480px; line-height: 1.7; margin-bottom: 48px; }
  .case-shell .c-begin-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--c-white); color: var(--c-ink); padding: 16px 32px; border: none; font-family: var(--c-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; transition: opacity .2s; border-radius: 2px; }
  .case-shell .c-begin-btn:hover { opacity: .85; }

  .case-shell .c-body { max-width: 760px; margin: 0 auto; padding: 48px 32px; }
  .case-shell .c-eyebrow { font-family: var(--c-mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--c-muted); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
  .case-shell .c-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }

  .case-shell .c-scene { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 4px; padding: 32px; margin-bottom: 28px; position: relative; }
  .case-shell .c-scene::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-ink); border-radius: 4px 0 0 4px; }
  .case-shell .c-scene-time { font-family: var(--c-mono); font-size: 10px; letter-spacing: 2px; color: var(--c-muted); text-transform: uppercase; margin-bottom: 12px; }
  .case-shell .c-scene-text { font-family: var(--c-serif); font-size: 17px; line-height: 1.85; color: var(--c-ink); }
  .case-shell .c-scene-text em { font-style: italic; color: var(--c-muted); }

  .case-shell .c-data { background: var(--c-ink); color: var(--c-white); border-radius: 4px; padding: 24px 28px; margin: 24px 0; font-family: var(--c-mono); font-size: 12px; }
  .case-shell .c-data-title { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 16px; }
  .case-shell .c-data-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .case-shell .c-data-row:last-child { border-bottom: none; }
  .case-shell .c-data-key { color: rgba(255,255,255,.6); }
  .case-shell .c-data-val { color: var(--c-white); font-weight: 500; }
  .case-shell .c-data-val.warn { color: #f0b429; }
  .case-shell .c-data-val.danger { color: #ff9d9d; }
  .case-shell .c-data-val.ok { color: #6fcf97; }

  .case-shell .c-decision { background: var(--c-gold-lt); border: 1px solid #e8d5a3; border-radius: 4px; padding: 28px 32px; margin: 28px 0; }
  .case-shell .c-dp-label { font-family: var(--c-mono); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--c-gold); margin-bottom: 12px; }
  .case-shell .c-dp-question { font-family: var(--c-serif); font-size: 21px; line-height: 1.45; color: var(--c-ink); margin-bottom: 24px; font-weight: 700; }
  .case-shell .c-options { display: flex; flex-direction: column; gap: 10px; }
  .case-shell .c-option { background: var(--c-white); border: 1.5px solid var(--c-border); border-radius: 4px; padding: 15px 18px; cursor: pointer; transition: all .2s; display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--c-ink); text-align: left; width: 100%; font-family: var(--c-sans); }
  .case-shell .c-option:hover { border-color: var(--c-ink); background: var(--c-fog); }
  .case-shell .c-option.correct { border-color: var(--c-green); background: var(--c-green-lt); color: var(--c-green); }
  .case-shell .c-option.wrong { border-color: var(--c-red); background: var(--c-red-lt); color: var(--c-red); }
  .case-shell .c-option-letter { font-family: var(--c-mono); font-size: 11px; font-weight: 500; flex-shrink: 0; width: 20px; margin-top: 1px; }

  .case-shell .c-journal { border: 1px solid var(--c-border); border-radius: 4px; overflow: hidden; margin: 24px 0; }
  .case-shell .c-journal-header { background: var(--c-fog2); padding: 12px 18px; font-family: var(--c-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-muted); }
  .case-shell .c-journal textarea { width: 100%; border: none; padding: 18px; font-family: var(--c-serif); font-size: 15px; line-height: 1.7; background: var(--c-white); resize: vertical; min-height: 110px; color: var(--c-ink); outline: none; }
  .case-shell .c-journal textarea::placeholder { color: #bbb; font-style: italic; }

  .case-shell .c-reveal { border: 1px solid var(--c-border); border-radius: 4px; overflow: hidden; margin: 24px 0; }
  .case-shell .c-reveal-trigger { width: 100%; padding: 16px 20px; background: var(--c-fog2); border: none; font-family: var(--c-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-muted); cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background .2s; }
  .case-shell .c-reveal-trigger:hover { background: #e0dbd2; }
  .case-shell .c-chevron { font-size: 18px; transition: transform .3s; display: inline-block; }
  .case-shell .c-reveal-trigger.open .c-chevron { transform: rotate(180deg); }
  .case-shell .c-reveal-content { display: none; padding: 24px; background: var(--c-white); border-top: 1px solid var(--c-border); }
  .case-shell .c-reveal-content.open { display: block; }
  .case-shell .c-reveal-content p { margin-bottom: 12px; }

  .case-shell .c-principle { background: var(--c-ink); color: var(--c-white); border-radius: 4px; padding: 32px; margin: 28px 0; }
  .case-shell .c-principle-label { font-family: var(--c-mono); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 14px; }
  .case-shell .c-principle-text { font-family: var(--c-serif); font-size: 23px; line-height: 1.45; color: var(--c-white); font-style: italic; margin-bottom: 10px; }
  .case-shell .c-principle-attr { font-size: 12px; color: rgba(255,255,255,.45); font-family: var(--c-mono); }

  .case-shell .c-math { width: 100%; font-family: var(--c-mono); font-size: 13px; border-collapse: collapse; }
  .case-shell .c-math tr { border-bottom: 1px solid var(--c-border); }
  .case-shell .c-math td { padding: 11px 0; }
  .case-shell .c-math td:last-child { text-align: right; font-weight: 500; }
  .case-shell .c-math tr.subtotal td { color: var(--c-muted); font-size: 12px; }
  .case-shell .c-math tr.total td { color: var(--c-red); font-size: 16px; border-top: 2px solid var(--c-ink); padding-top: 14px; border-bottom: none; }
  .case-shell .c-math tr.margin-row td { font-size: 12px; color: var(--c-muted); }
  .case-shell .c-math-row { opacity: 0; transform: translateY(5px); transition: opacity .4s, transform .4s; }
  .case-shell .c-math-row.shown { opacity: 1; transform: none; }

  .case-shell .c-debrief { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--c-border); }
  .case-shell .c-debrief:last-child { border-bottom: none; }
  .case-shell .c-debrief-num { font-family: var(--c-mono); font-size: 11px; font-weight: 500; color: var(--c-gold); flex-shrink: 0; width: 24px; margin-top: 3px; }
  .case-shell .c-debrief-title { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
  .case-shell .c-debrief-body { font-size: 13px; color: var(--c-muted); line-height: 1.7; }

  .case-shell .c-nav { display: flex; justify-content: space-between; align-items: center; padding: 32px 0; margin-top: 16px; border-top: 1px solid var(--c-border); }
  .case-shell .c-nav-btn { padding: 13px 26px; border-radius: 4px; font-family: var(--c-sans); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: all .2s; border: 1.5px solid var(--c-border); background: transparent; color: var(--c-muted); }
  .case-shell .c-nav-btn:hover:not(:disabled) { border-color: var(--c-ink); color: var(--c-ink); }
  .case-shell .c-nav-btn.primary { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
  .case-shell .c-nav-btn.primary:hover { opacity: .85; color: var(--c-white); }
  .case-shell .c-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
  .case-shell .c-nav-step { font-family: var(--c-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-muted); }

  .case-shell .c-complete { text-align: center; padding: 60px 20px; }
  .case-shell .c-complete-mark { font-family: var(--c-serif); font-size: 80px; font-style: italic; color: var(--c-gold); margin-bottom: 18px; line-height: 1; }
  .case-shell .c-complete-title { font-family: var(--c-serif); font-size: 36px; margin-bottom: 14px; font-weight: 400; }
  .case-shell .c-complete-sub { color: var(--c-muted); max-width: 520px; margin: 0 auto 36px; font-size: 15px; line-height: 1.75; }
  .case-shell .c-takeaways { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 4px; padding: 30px; margin: 36px auto; text-align: left; max-width: 560px; }
  .case-shell .c-takeaway { display: flex; gap: 14px; padding: 12px 0; font-size: 14px; align-items: flex-start; line-height: 1.6; }
  .case-shell .c-check { color: var(--c-green); font-weight: 700; flex-shrink: 0; font-family: var(--c-mono); margin-top: 1px; }
  .case-shell .c-disc { background: var(--c-fog2); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: 14px 28px; font-size: 11px; color: var(--c-muted); text-align: center; line-height: 1.6; margin-top: 48px; }
  .case-shell .c-disc strong { color: var(--c-ink); }

  .case-shell .c-hidden { display: none; }
  .case-shell ul { padding-left: 20px; }
  .case-shell strong { font-weight: 700; }

  /* ═══════════════════════════════════════════════════════════════════
     LESSON STAGE NAVIGATOR (chunked lesson flow)
     Splits a long lesson panel into discrete stages with prev/next nav.
  ═══════════════════════════════════════════════════════════════════ */
  .stage-nav-top {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 18px 22px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 12px;
    z-index: 50;
  }
  .stage-nav-label {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 900;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .stage-nav-counter {
    color: var(--muted);
    letter-spacing: 1.5px;
  }
  .stage-nav-track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
  }
  .stage-dot {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    text-align: left;
  }
  .stage-dot-bar {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    transition: background var(--dur) var(--ease);
  }
  .stage-dot-label {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .8px;
    text-transform: uppercase;
    font-weight: 700;
    transition: color var(--dur) var(--ease);
    line-height: 1.3;
  }
  .stage-dot:hover .stage-dot-bar { background: var(--gold-pale); }
  .stage-dot:hover .stage-dot-label { color: var(--ink); }
  .stage-dot.done .stage-dot-bar { background: var(--gold); }
  .stage-dot.done .stage-dot-label { color: var(--gold-deep); }
  .stage-dot.active .stage-dot-bar { background: var(--ink); height: 5px; }
  .stage-dot.active .stage-dot-label { color: var(--ink); }

  .stage {
    display: none;
    animation: stageFadeIn .3s var(--ease);
  }
  .stage.active { display: block; }
  @keyframes stageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }

  .stage-nav-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 24px 0 8px;
    margin-top: 28px;
    border-top: 1px solid var(--border);
  }
  .stage-nav-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    border: 1.5px solid var(--border);
    background: var(--white);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .stage-nav-btn:hover:not(:disabled) {
    border-color: var(--ink);
    color: var(--ink);
    transform: translateY(-1px);
  }
  .stage-nav-btn.primary {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
  }
  .stage-nav-btn.primary:hover:not(:disabled) {
    background: var(--ink2);
    color: var(--white);
  }
  .stage-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
  .stage-nav-step {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--muted);
    text-transform: uppercase;
  }
  @media (max-width: 720px) {
    .stage-nav-top { padding: 14px 16px; top: 6px; }
    .stage-nav-track { grid-template-columns: repeat(6, 1fr); gap: 4px; }
    .stage-dot-label { font-size: 0; } /* hide labels on mobile, keep bars */
    .stage-dot-bar { height: 6px; }
    .stage-dot.active .stage-dot-bar { height: 8px; }
    .stage-nav-bottom { flex-direction: column-reverse; gap: 10px; }
    .stage-nav-btn { width: 100%; justify-content: center; }
    .stage-nav-step { order: -1; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     STUDENT-FRIENDLY OVERRIDES
     Eight readability improvements layered on top of the existing design.
     To revert any one of these, just delete its block below.
  ═══════════════════════════════════════════════════════════════════ */

  /* ═══════════════════════════════════════════════════════════════════
     ITEM D · DISSOLVE NESTED CARDS AND BORDERS
     The accordion now provides the outer container. Inside it, drop the
     interior box chrome so white space carries the structure instead of
     borders. Scoped to .lesson-panel so the overview is unaffected.
  ═══════════════════════════════════════════════════════════════════ */

  /* Callout boxes — strip the rectangular border, keep a colored left bar */
  .lesson-panel .truth-box,
  .lesson-panel .warn-box {
    background: transparent;
    border: none;
    border-left: 3px solid var(--success);
    border-radius: 0;
    padding: 4px 0 4px 16px;
    margin: 22px 0;
  }
  .lesson-panel .warn-box {
    border-left-color: var(--warn);
  }
  /* The ink-box used to be a black slab — make it a quieter pull-quote */
  .lesson-panel .ink-box {
    background: transparent;
    color: var(--ink);
    border: none;
    border-left: 3px solid var(--ink);
    border-radius: 0;
    padding: 4px 0 4px 16px;
    margin: 22px 0;
  }
  .lesson-panel .ink-box strong { color: var(--ink); }
  .lesson-panel .ink-box p {
    color: #3d3935;
    font-size: 15.5px;
  }

  /* Quote — keep the gold left-bar but drop the background tint inside cards */
  .lesson-panel .quote {
    background: transparent;
    padding: 4px 0 4px 18px;
    border-radius: 0;
    border-left-width: 3px;
  }

  /* Worksheet container — the accordion is the box now */
  .lesson-panel .worksheet {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 8px 0 32px;
    border-top: 1px solid var(--border);
    padding-top: 24px;
  }
  .lesson-panel .worksheet:first-of-type {
    border-top: none;
    padding-top: 0;
  }
  .lesson-panel .worksheet-title {
    border-bottom: none;
    padding-bottom: 8px;
    margin-bottom: 14px;
  }

  /* Field groups — drop the inner box, keep label + input */
  .lesson-panel .field-group {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 18px;
    box-shadow: none !important;
  }
  .lesson-panel .field-group:focus-within {
    border: none;
    box-shadow: none;
  }
  /* The input itself keeps a visible border so it's still clearly a field */
  .lesson-panel .input-field {
    border: 1.5px solid var(--border);
    background: var(--white);
  }

  /* Compare-card — drop background, use spacing + a leading rule */
  .lesson-panel .compare-card {
    background: transparent;
    border: none;
    border-top: 2px solid var(--gold);
    border-radius: 0;
    padding: 14px 0 0;
  }
  .lesson-panel .compare-card p {
    color: #3d3935;
    font-size: 15px;
    line-height: 1.7;
  }

  /* Do/Don't cards — keep the colored tint as a left bar instead of a full box */
  .lesson-panel .do-card,
  .lesson-panel .dont-card {
    background: transparent;
    border: none;
    border-left: 3px solid var(--success);
    border-radius: 0;
    padding: 4px 0 4px 16px;
  }
  .lesson-panel .dont-card {
    border-left-color: var(--red);
  }
  .lesson-panel .do-card ul li,
  .lesson-panel .dont-card ul li {
    border-bottom: none;
    padding: 4px 0;
  }

  /* pi-behaviors (inside clarity-pause) — drop the inner box too */
  .lesson-panel .pi-behaviors {
    background: transparent;
    border: none;
    padding: 0;
  }

  /* Section-label pills inside cards are now redundant with the accordion
     header's eyebrow — hide them when collapsibleCard moves them up there.
     (collapsibleCard already removes them, this is for any that remain.) */
  .acc-card-body > .section-label { display: none; }


  /* ═══════════════════════════════════════════════════════════════════
     COLLAPSIBLE CARDS
     Wraps the existing <section class="card"> elements so each becomes
     a click-to-expand accordion. Applied via a tiny script at load time:
     it reads the first <h2> as the header and tucks the rest into a
     hidden body. Collapsed by default; one tap opens.
  ═══════════════════════════════════════════════════════════════════ */
  .acc-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .2s ease;
  }
  .acc-card:hover { box-shadow: var(--shadow-sm); }
  .acc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 26px;
    cursor: pointer;
    user-select: none;
    transition: background var(--dur);
    background: var(--white);
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
  }
  .acc-card-header:hover { background: var(--fog); }
  .acc-card-header.open {
    background: var(--fog);
    border-bottom: 1px solid var(--border);
  }
  .acc-card-header-left { flex: 1; min-width: 0; }
  .acc-card-eyebrow {
    display: inline-block;
    background: var(--ink);
    color: var(--gold);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 900;
    margin-bottom: 8px;
  }
  .acc-card-title {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--ink);
    margin: 0;
  }
  .acc-card-chevron {
    color: var(--muted);
    font-size: 16px;
    transition: transform var(--dur);
    width: 28px;
    flex-shrink: 0;
    text-align: center;
  }
  .acc-card-header.open .acc-card-chevron {
    transform: rotate(180deg);
    color: var(--gold);
  }
  .acc-card-body {
    display: none;
    padding: 4px 26px 26px;
  }
  .acc-card-body.open {
    display: block;
    animation: fadeUp .25s var(--ease);
  }
  /* Inside the body, give the prose a calmer top margin */
  .acc-card-body > *:first-child { margin-top: 16px; }
  .acc-card-body p,
  .acc-card-body li { font-size: 16.5px; line-height: 1.8; }
  .acc-card-body h3 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    margin: 24px 0 12px;
    color: var(--ink);
  }
  /* v38: when the Life Map is wrapped by collapsibleBlock(), it lives inside
     .acc-card-body, which sets h3 color to dark ink. The Life Map's own
     background is dark, so its h3 needs to be white. Higher specificity wins. */
  .acc-card-body .life-map h3 { color: var(--white); }

  @media (max-width: 720px) {
    .acc-card-header { padding: 16px 18px; }
    .acc-card-title { font-size: 18px; }
    .acc-card-body { padding: 4px 18px 22px; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     OPERATIONS-STYLE OVERVIEW PAGE
     Ported from Operations: hero status bar, metrics strip, accordion cards.
     Animations from the original (observeBlink, threatBlink) are intentionally
     left out — Life uses calmer static dots.
  ═══════════════════════════════════════════════════════════════════ */

  /* Hero status bar */
  .hero-status-bar {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px; flex-wrap: wrap;
  }
  .hero-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--gold); font-weight: 900;
  }
  .hero-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold); flex-shrink: 0;
  }
  .hero-status-div {
    width: 1px; height: 12px; background: rgba(255,255,255,.15);
  }
  .hero-coord {
    font-size: 9px; letter-spacing: 1.5px;
    color: rgba(255,255,255,.3); font-family: "IBM Plex Mono", monospace;
  }
  /* The hero ITSELF in the Life file is white background; for the overview
     we want it dark like Operations. Scope to the overview panel only. */
  #panel-overview .hero {
    background: linear-gradient(135deg, #1a1814 0%, #0f0e0c 100%);
    color: #f7f0e0;
    border-radius: 22px;
    padding: 42px 48px;
    margin-bottom: 14px;
  }
  #panel-overview .hero .eyebrow { color: var(--gold); }
  #panel-overview .hero h1 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 56px; font-weight: 400; line-height: 1.05;
    color: #f7f0e0; letter-spacing: -1px;
    margin: 8px 0 0;
  }
  #panel-overview .hero h1 em {
    font-style: italic; color: var(--gold);
  }
  #panel-overview .hero .actions { margin-top: 24px; }

  /* Hero "threat list" — renamed visually as signals; calm static dots */
  .hero-threat-list {
    margin: 22px 0 0; display: grid; gap: 8px;
  }
  .hero-threat-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px; color: rgba(247,240,224,.72);
    font-family: "IBM Plex Mono", monospace; letter-spacing: .3px;
  }
  .hero-threat-marker {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  }
  .hero-threat-marker.red { background: #ff6b6b; }
  .hero-threat-marker.gold { background: var(--gold); }
  .hero-threat-marker.green { background: #6fcf97; }

  /* Metrics strip */
  .cmd-metrics {
    display: flex; align-items: center;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 18px; padding: 18px 26px;
    margin-bottom: 14px; gap: 0;
  }
  .cmd-metric { flex: 1; text-align: center; }
  .cmd-metric-val {
    display: block; font-family: "DM Serif Display", Georgia, serif;
    font-size: 30px; font-weight: 400; color: var(--gold); line-height: 1;
  }
  .cmd-metric-lbl {
    display: block; font-size: 11px;
    text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--muted); margin-top: 4px;
  }
  .cmd-metric-div {
    width: 1px; background: var(--border);
    align-self: stretch; margin: 0 4px;
  }

  /* Accordion */
  .cmd-accordion {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 16px; margin-bottom: 10px; overflow: hidden;
    transition: box-shadow .2s ease;
  }
  .cmd-accordion:hover { box-shadow: var(--shadow-sm); }
  .cmd-acc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; cursor: pointer;
    transition: background var(--dur); user-select: none;
  }
  .cmd-acc-header:hover { background: var(--fog); }
  .cmd-acc-header.open {
    background: var(--fog); border-bottom: 1px solid var(--border);
  }
  .cmd-acc-left {
    display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0;
  }
  .cmd-acc-icon { font-size: 20px; flex-shrink: 0; }
  .cmd-acc-title {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 18px; font-weight: 400; color: var(--ink);
  }
  .cmd-acc-sub {
    font-size: 12px; color: var(--muted); margin-top: 2px;
  }
  .cmd-acc-right {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  }
  .cmd-acc-badge {
    font-size: 10px; font-weight: 900; letter-spacing: 1px;
    text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
  }
  .cmd-acc-badge.danger { background: var(--red-bg); color: var(--red); }
  .cmd-acc-badge.warn { background: var(--warn-bg); color: var(--warn); }
  .cmd-acc-badge.neutral { background: var(--fog2); color: var(--muted); }
  .cmd-acc-chevron {
    color: var(--muted); font-size: 14px;
    transition: transform var(--dur);
    width: 24px; text-align: center;
  }
  .cmd-acc-header.open .cmd-acc-chevron {
    transform: rotate(180deg); color: var(--gold);
  }
  .cmd-acc-body { display: none; }
  .cmd-acc-body.open { display: block; animation: fadeUp .25s var(--ease); }
  .cmd-acc-inner { padding: 20px 22px; }

  /* Lesson compact grid (inside the "Six Lessons" accordion) */
  .lesson-compact-grid { display: flex; flex-direction: column; }
  .lcg-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 22px; border-bottom: 1px solid var(--fog2);
    cursor: pointer; transition: background var(--dur);
  }
  .lcg-row:last-child { border-bottom: none; }
  .lcg-row:hover { background: var(--fog); }
  .lcg-num {
    font-size: 11px; font-weight: 900; color: var(--muted);
    width: 24px; flex-shrink: 0;
  }
  .lcg-info { flex: 1; }
  .lcg-info strong {
    display: block; font-size: 14px; font-weight: 700; color: var(--ink);
  }
  .lcg-info small {
    font-size: 12px; color: var(--muted); line-height: 1.5;
  }
  .lcg-tag {
    font-size: 9px; font-weight: 900; letter-spacing: 1px;
    text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
    background: var(--fog2); color: var(--muted);
    white-space: nowrap; flex-shrink: 0;
  }
  .lcg-tag.start { background: var(--gold-pale); color: var(--gold-deep); }

  /* Win list (inside "Practice Moments" accordion) */
  .win-list { display: flex; flex-direction: column; }
  .win-item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 22px; border-bottom: 1px solid var(--fog2);
    cursor: pointer; font-size: 14px; color: var(--ink);
    transition: background var(--dur);
  }
  .win-item:last-child { border-bottom: none; }
  .win-item:hover { background: var(--fog); }
  .win-item.claimed { color: var(--muted); background: var(--success-bg); }
  .win-check {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--border2); flex-shrink: 0;
    transition: all .2s; display: grid; place-items: center;
  }
  .win-item.claimed .win-check {
    background: var(--success); border-color: var(--success);
  }
  .win-item.claimed .win-check::after {
    content: "✓"; font-size: 11px; color: white; font-weight: 900;
  }

  @media (max-width: 720px) {
    #panel-overview .hero { padding: 28px 24px; }
    #panel-overview .hero h1 { font-size: 38px; }
    .cmd-metrics { padding: 14px 16px; flex-wrap: wrap; }
    .cmd-metric { min-width: 50%; padding: 8px 0; }
    .cmd-metric-div { display: none; }
    .cmd-acc-header { padding: 14px 16px; }
    .cmd-acc-title { font-size: 16px; }
  }

  /* Methodology pillars look fine on the original dark methodology-card,
     but here they sit inside a WHITE accordion body — so the cream text
     was washing out. Re-style them for a light background, scoped only
     to the overview panel. */
  #panel-overview .meth-pillar {
    background: var(--fog);
    border: 1px solid var(--border);
  }
  #panel-overview .meth-pillar:hover {
    background: var(--gold-pale);
    border-color: rgba(184,146,42,.4);
  }
  #panel-overview .meth-pillar-num { color: var(--gold-deep); }
  #panel-overview .meth-pillar-name {
    color: var(--ink);
    font-weight: 700;
    font-size: 16px;
  }
  #panel-overview .meth-pillar-desc {
    color: #3d3935;
    font-size: 13.5px;
    line-height: 1.65;
  }
  /* Wallace quote inside the accordion: ensure dark text on the gold-pale bg */
  #panel-overview .cmd-acc-inner .quote {
    color: var(--ink);
  }
  #panel-overview .cmd-acc-inner .quote-attr {
    color: var(--gold-deep);
  }

  /* ═══════════════════════════════════════════════════════════════════
     OVERVIEW PAGE · QUIET REPLACEMENTS
     - Learning Path: simple numbered list, replaces the tracker visualization
     - Practice Moments: dissolved card replaces Victory Tracker
  ═══════════════════════════════════════════════════════════════════ */

  /* Hide the leftover side-cards on Lessons 2-6 — they were designed for a
     narrow right column that no longer exists, so they render full-width
     and dominate the page. The info they show ("This Lesson · 04 / Of 6")
     is already conveyed by the sidebar's lesson list. */
  .side-card { display: none !important; }

  /* ── Learning Path: a calm numbered list ── */
  .learning-path {
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(216,200,160,.4);
    border-radius: 20px;
    padding: 32px;
    margin: 32px 0;
  }
  .learning-path-title {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 26px;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.2;
  }
  .learning-path-sub {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 22px;
    line-height: 1.55;
  }
  .learning-path-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: lp;
  }
  .lp-item {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    counter-increment: lp;
  }
  .lp-item:last-child { border-bottom: none; }
  .lp-item::before {
    content: counter(lp);
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 22px;
    color: var(--muted);
    width: 30px;
    flex-shrink: 0;
  }
  .lp-item.current::before { color: var(--gold-deep); }
  .lp-name {
    flex: 1;
    font-size: 17px;
    color: var(--ink);
    font-weight: 500;
  }
  .lp-item.current .lp-name { font-weight: 700; }
  .lp-hint {
    font-size: 12px;
    color: var(--gold-deep);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
  }

  /* ── Practice Moments: dissolved list, no heavy card chrome ── */
  .progress-reflection {
    margin: 40px 0;
  }
  .pr-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .pr-header h3 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
  }
  .pr-count {
    font-size: 13px;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .5px;
  }
  .pr-intro {
    font-size: 15px;
    line-height: 1.7;
    color: #3d3935;
    margin-bottom: 18px;
    max-width: 640px;
  }
  .pr-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .pr-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .2s ease;
  }
  .pr-item:last-child { border-bottom: none; }
  .pr-item:hover { background: rgba(184,146,42,.04); }
  .pr-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    flex-shrink: 0;
    transition: all .2s ease;
  }
  .pr-item.claimed .pr-dot {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(184,146,42,.15);
  }
  .pr-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
  }
  .pr-item.claimed .pr-text {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: rgba(107,101,96,.4);
  }

  @media (max-width: 720px) {
    .learning-path { padding: 22px 18px; }
    .learning-path-title { font-size: 22px; }
    .lp-item { gap: 12px; padding: 12px 0; }
    .lp-name { font-size: 15px; }
  }

  /* The "playing" waveform bars: keep bars but stop them dancing */
  .audio-card.playing .wave-bar {
    animation: none !important;
    background: var(--gold) !important;
  }
  /* Milestone unlock — fade in instead of pop */
  .milestone.show { animation: fadeIn .5s var(--ease) both !important; }
  .ws2-done-icon { animation: fadeIn .4s var(--ease) !important; }

  /* Change #3 — Bigger, easier-to-read body text inside lesson cards */
  .card p, .card li {
    font-size: 17px;
    line-height: 1.8;
    color: #2d2924;
  }

  /* Change #4 — Larger, clearer headings inside lessons */
  .card h2 { font-size: 34px; line-height: 1.2; }
  .card h3 { font-size: 24px; line-height: 1.3; margin-top: 36px; }

  /* Change #5 — Stronger contrast for darker backgrounds (sidebar text) */
  .status-key, .progress-header, .insight-title {
    color: rgba(255,255,255,.72) !important;
  }
  .brand-sub, .lang-switcher-label {
    color: rgba(255,255,255,.65) !important;
  }

  /* Change #6 — Bigger tap targets for buttons (students often use phones) */
  .btn {
    padding: 16px 26px;
    font-size: 14px;
    min-height: 48px;
  }
  .tab {
    padding: 12px 18px;
    font-size: 13px;
    min-height: 44px;
  }

  /* Change #7 — Easier-to-read form fields (worksheets) */
  .input-field {
    font-size: 16px !important;   /* prevents iPhone zoom-on-focus */
    padding: 14px 16px !important;
    min-height: 48px;
  }
  .field-group label {
    font-size: 15px !important;
    font-weight: 700;
    color: #2d2924 !important;
    margin-bottom: 8px;
  }

  /* Change #8 — Visible keyboard focus rings (accessibility) */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  .tab:focus-visible,
  .check-option:focus-visible,
  .stage-dot:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 6px;
  }

  /* Change #9 — Reduce visual noise: dim the paper-grain & disable
     constantly-moving animations that distract from reading */
  body::before { opacity: .15; }
  .mark::after { animation: none; opacity: 0; }       /* stops radar sweep on brand */
  .sidebar-brand::after { animation: none; opacity: 0; }  /* stops the moving gold line */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0s !important;
    }
  }

  /* Change #10 — Mobile-friendly: cards breathe on small screens,
     metrics stack into 2 columns instead of cramped 4 */
  @media (max-width: 720px) {
    body { font-size: 17px; }
    .main { padding: 24px 18px; }
    .card { padding: 24px 20px; border-radius: 16px; }
    .card h2 { font-size: 26px; }
    .card h3 { font-size: 20px; }
    .card p, .card li { font-size: 16px; line-height: 1.75; }
    .metrics { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .side-card { position: static !important; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     LESSON 2 WORKSHEET — STUDENT-FRIENDLY STEP FLOW
     One decision per screen. Saves progress to localStorage.
  ═══════════════════════════════════════════════════════════════════ */
  .ws2-container {
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(216,200,160,.5);
    border-radius: 22px;
    padding: 36px;
    margin-bottom: 28px;
    box-shadow: 0 18px 40px -28px rgba(122,90,10,.18);
  }
  @media (max-width: 720px) {
    .ws2-container { padding: 22px 18px; border-radius: 16px; }
  }

  /* Progress header */
  .ws2-progress { margin-bottom: 28px; }
  .ws2-progress-label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; color: var(--muted); margin-bottom: 10px;
    font-weight: 700; letter-spacing: .5px;
  }
  .ws2-progress-label strong { color: var(--gold-deep); font-size: 16px; }
  .ws2-progress-bar {
    height: 8px; background: var(--fog2); border-radius: 99px;
    overflow: hidden; position: relative;
  }
  .ws2-progress-fill {
    height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold2));
    border-radius: 99px; transition: width .4s var(--ease);
  }

  /* Step dots */
  .ws2-dots {
    display: flex; gap: 8px; justify-content: center;
    margin: 16px 0 28px; flex-wrap: wrap;
  }
  .ws2-dot {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--fog2); border: 2px solid var(--border);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 900; color: var(--muted);
    transition: all .25s var(--ease);
  }
  .ws2-dot.done {
    background: var(--gold); border-color: var(--gold);
    color: var(--ink);
  }
  .ws2-dot.done::before { content: "✓"; font-size: 16px; }
  .ws2-dot.done span { display: none; }
  .ws2-dot.current {
    background: var(--ink); border-color: var(--ink);
    color: var(--gold); transform: scale(1.15);
    box-shadow: 0 4px 16px rgba(15,15,15,.2);
  }

  /* Individual step */
  .ws2-step { display: none; animation: fadeUp .35s var(--ease); }
  .ws2-step.active { display: block; }

  .ws2-step-header { margin-bottom: 24px; }
  .ws2-step-eyebrow {
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold-deep); font-weight: 900; margin-bottom: 8px;
  }
  .ws2-step h3 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 28px; line-height: 1.2; margin-bottom: 12px;
    color: var(--ink);
  }
  .ws2-step .ws2-intro {
    font-size: 16px; line-height: 1.7; color: #3d3935;
    margin-bottom: 20px;
  }
  .ws2-step .ws2-tip {
    background: var(--gold-pale); border-left: 3px solid var(--gold);
    padding: 14px 18px; border-radius: 0 10px 10px 0;
    font-size: 14px; color: #2d2924; margin-bottom: 20px;
    line-height: 1.6;
  }

  /* Inputs in the new flow */
  .ws2-field { margin-bottom: 18px; }
  .ws2-field label {
    display: block; font-size: 15px; font-weight: 700;
    color: var(--ink); margin-bottom: 8px;
  }
  .ws2-field input, .ws2-field select {
    width: 100%; padding: 14px 16px; font-size: 16px;
    border: 2px solid var(--border); border-radius: 10px;
    background: #fff; color: var(--ink); font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
  }
  .ws2-field input:focus, .ws2-field select:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,146,42,.18);
  }
  .ws2-field-hint {
    font-size: 13px; color: var(--muted); margin-top: 6px;
    line-height: 1.5;
  }

  /* The live math box (Step 3: sinking funds) */
  .ws2-math {
    background: linear-gradient(135deg, #f7f0e0, #fdfaf3);
    border: 1px solid rgba(184,146,42,.3);
    border-radius: 14px; padding: 18px 22px;
    margin: 18px 0;
  }
  .ws2-math-label {
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--gold-deep); font-weight: 900; margin-bottom: 6px;
  }
  .ws2-math-value {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 32px; color: var(--ink); line-height: 1.1;
  }
  .ws2-math-explain {
    font-size: 13px; color: #4a443e; margin-top: 6px; line-height: 1.5;
  }

  /* Choice cards (checkboxes that feel like buttons) */
  .ws2-choices { display: grid; gap: 10px; margin-bottom: 20px; }
  .ws2-choice {
    background: #fff; border: 2px solid var(--border);
    border-radius: 12px; padding: 16px 18px;
    cursor: pointer; transition: all .2s var(--ease);
    display: flex; align-items: center; gap: 12px;
    font-size: 15px; font-weight: 500; color: var(--ink);
    line-height: 1.5;
  }
  .ws2-choice:hover {
    border-color: var(--gold); background: var(--gold-pale);
  }
  .ws2-choice.checked {
    border-color: var(--gold); background: var(--gold-pale);
    box-shadow: 0 4px 12px rgba(184,146,42,.15);
  }
  .ws2-choice .ws2-check-icon {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--border); flex-shrink: 0;
    display: grid; place-items: center;
    font-size: 14px; color: transparent; transition: all .2s;
  }
  .ws2-choice.checked .ws2-check-icon {
    background: var(--gold); border-color: var(--gold);
    color: var(--ink);
  }
  .ws2-choice.checked .ws2-check-icon::before { content: "✓"; font-weight: 900; }

  /* Navigation buttons */
  .ws2-nav {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 28px; padding-top: 24px;
    border-top: 1px solid var(--border);
  }
  .ws2-btn {
    padding: 14px 24px; border-radius: 10px; border: none;
    font-family: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all .2s var(--ease);
    min-height: 48px; display: inline-flex; align-items: center; gap: 8px;
  }
  .ws2-btn-primary {
    background: var(--ink); color: var(--gold);
    box-shadow: 0 6px 18px -8px rgba(15,15,15,.3);
  }
  .ws2-btn-primary:hover { background: #2a261f; transform: translateY(-1px); }
  .ws2-btn-primary:disabled {
    background: var(--border); color: var(--muted);
    cursor: not-allowed; transform: none;
  }
  .ws2-btn-secondary {
    background: transparent; color: var(--ink);
    border: 2px solid var(--border);
  }
  .ws2-btn-secondary:hover { border-color: var(--ink); }
  .ws2-btn-secondary:disabled {
    opacity: .4; cursor: not-allowed;
  }

  /* The "done" celebration screen */
  .ws2-done {
    text-align: center; padding: 30px 20px;
  }
  .ws2-done-icon {
    font-size: 56px; margin-bottom: 16px;
    animation: unlockPop .6s var(--ease);
  }
  .ws2-done h3 {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 30px; margin-bottom: 12px;
  }
  .ws2-done p {
    font-size: 16px; color: #3d3935; max-width: 460px;
    margin: 0 auto 24px; line-height: 1.7;
  }
  .ws2-summary {
    background: var(--fog); border-radius: 14px;
    padding: 20px; text-align: left; margin: 0 auto 24px;
    max-width: 500px;
  }
  .ws2-summary-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 0; font-size: 14px;
    border-bottom: 1px dashed var(--border);
  }
  .ws2-summary-row:last-child { border-bottom: none; }
  .ws2-summary-row span:first-child { color: var(--muted); }
  .ws2-summary-row span:last-child { font-weight: 700; color: var(--ink); text-align: right; }

  /* ═══════════════════════════════════════════════════════════════════
     AUDIO PLAYER — STUDENT-FRIENDLY SHRINK
     Original card dominated the Learn tab. Cut its vertical footprint
     by ~35%, simplified the waveform, and removed dead animation refs.
  ═══════════════════════════════════════════════════════════════════ */
  .audio-card {
    padding: 14px 18px;
    margin: 0 0 18px;
    gap: 14px;
    border-radius: 14px;
  }
  .audio-play-btn {
    width: 40px; height: 40px; font-size: 14px;
  }
  .audio-tag {
    font-size: 9px;
    margin-bottom: 3px;
  }
  .audio-title {
    font-size: 13px;
    margin-bottom: 3px;
  }
  .audio-duration { font-size: 10.5px; }
  .waveform { height: 20px; gap: 2px; }
  .wave-bar { width: 2.5px; }
  /* The waveform keyframe was removed in the animation cleanup.
     Instead of a per-bar animation, use a calmer collective opacity pulse
     on the whole row when playing. */
  .audio-card.playing .wave-bar {
    background: var(--gold);
    animation: pulse 1.6s ease-in-out infinite;
    transform-origin: bottom center;
  }
  @media (max-width: 720px) {
    .audio-card { padding: 12px 14px; gap: 10px; }
    .audio-tag { display: none; }  /* redundant on mobile, save space */
    .audio-title { font-size: 12.5px; }
    .audio-duration { font-size: 10px; }
    .waveform { display: none; }  /* save horizontal room */
  }

  /* ═══════════════════════════════════════════════════════════════════
     DEAD ANIMATION REFERENCE FIXES (worksheet finish icon)
     unlockPop was removed in the cleanup. Use fadeIn instead so the
     "🎉" still has a soft entrance.
  ═══════════════════════════════════════════════════════════════════ */
  .ws2-done-icon { animation: fadeIn .5s var(--ease) !important; }

  /* ═══════════════════════════════════════════════════════════════════
     OPERATIONS-STYLE 4-STEP LESSON LAYOUT
     Tab strip at top: Brief · Learn · Apply · Next Steps
     Only the active step's content is visible.
  ═══════════════════════════════════════════════════════════════════ */
  .l-step-nav {
    display: flex; align-items: center; gap: 0;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 16px; margin-bottom: 24px; overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .l-step {
    flex: 1; padding: 14px 10px; text-align: center; cursor: pointer;
    border-right: 1px solid var(--border);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    position: relative; background: transparent; border-top: none;
    border-bottom: none; border-left: none;
    font-family: inherit;
  }
  .l-step:last-child { border-right: none; }
  .l-step:hover { background: var(--fog); }
  .l-step.active { background: var(--ink); }
  .l-step.done { background: var(--fog); }
  .l-step-num {
    font-size: 10px; font-weight: 900; letter-spacing: 1.5px;
    color: var(--muted); text-transform: uppercase; display: block;
  }
  .l-step.active .l-step-num { color: var(--gold); }
  .l-step.done .l-step-num { color: var(--success); }
  .l-step-label {
    font-size: 13px; font-weight: 700; color: var(--ink);
    display: block; margin-top: 3px;
  }
  .l-step.active .l-step-label { color: var(--white); }
  .l-step.done .l-step-label { color: var(--muted); }

  .l-step-panel { display: none; }
  .l-step-panel.active { display: block; animation: fadeUp .3s var(--ease); }

  /* Top/bottom step navigation buttons inside each panel */
  .l-step-footer {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 28px; padding-top: 22px;
    border-top: 1px solid var(--border);
  }
  .l-step-btn {
    padding: 14px 22px; border-radius: 12px; border: 2px solid var(--border);
    font-family: inherit; font-size: 13px; font-weight: 700;
    letter-spacing: .4px; cursor: pointer; transition: all .2s var(--ease);
    min-height: 48px; background: var(--white); color: var(--ink);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .l-step-btn:hover { border-color: var(--ink); transform: translateY(-1px); }
  .l-step-btn.primary {
    background: var(--ink); color: var(--gold); border-color: var(--ink);
  }
  .l-step-btn.primary:hover { background: #2a261f; }
  .l-step-btn:disabled {
    opacity: .35; cursor: not-allowed; transform: none;
  }
  .l-step-counter {
    font-size: 12px; color: var(--muted); font-weight: 700;
    letter-spacing: .5px;
  }

  /* Tighten on mobile */
  @media (max-width: 720px) {
    .l-step { padding: 10px 6px; }
    .l-step-num { font-size: 9px; }
    .l-step-label { font-size: 11px; }
    .l-step-footer { flex-direction: column-reverse; gap: 10px; }
    .l-step-btn { width: 100%; justify-content: center; }
    .l-step-counter { order: -1; }
  }

  /* Hide the old 6-stage navigator inside Lesson 1 — the 4-step tabs replace it.
     Other lessons still use the 6-stage nav. */
  #panel-l1 .stage-nav-top { display: none; }
  /* Inside Lesson 1, force every stage to be visible (the 4-step tabs control visibility now) */
  #panel-l1 .stage { display: block !important; }
  /* But keep the bottom stage-nav buttons hidden so we don't have double navigation */
  #panel-l1 .stage-nav-bottom { display: none; }


  /* ── DEFENSIVE FALLBACK: SCREEN VISIBILITY ──
     If /auth-gate.css fails to load (file missing, wrong path, served
     without a CSS MIME type, etc.), every <div class="screen"> would
     otherwise render as a normal block — stacking all the auth/MFA/legal/
     paywall screens on top of the lesson content. This minimal rule keeps
     them hidden. /auth-gate.css has the same rule plus full screen styling;
     this is just the floor so the page never disintegrates. */
  .screen { display: none; }
  .screen.active { display: flex; }
  /* Also hide the life-app wrapper until auth-gate.js shows it — prevents
     a flash of the lesson before the session check completes. auth-gate.css
     does this too; this is the floor. */
  #life-app { display: none; }
  #life-app.active { display: block; }

  /* ── LESSON-01 AUDIO PLAYER ── */
  /* Sticky bar at top of lesson with 8-section navigation. Pattern adapted
     from Operations lesson-01-final, retargeted to Life lesson 1 sections. */
  .lesson-audio-bar { position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: 1px solid rgba(196,154,46,.25); padding: 12px 18px 10px; }
  .lesson-audio-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .lesson-audio-info { flex: 1; min-width: 0; }
  .lesson-audio-eyebrow { font-size: 9px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
  .lesson-audio-section-name { font-family: "DM Serif Display", Georgia, serif; font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lesson-audio-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .la-btn { background: transparent; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.9); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: all .15s; padding: 0; }
  .la-btn:hover { border-color: var(--gold); color: var(--gold); }
  .la-btn.primary { background: var(--gold); color: var(--ink); border-color: var(--gold); width: 44px; height: 44px; font-size: 16px; }
  .la-btn.primary:hover { background: var(--gold2); }
  .la-speed { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.9); border-radius: 14px; padding: 4px 10px; font-size: 11px; font-family: inherit; cursor: pointer; }

  /* Language switcher (sits inline with audio controls in the top-right) */
  .la-lang { display: inline-flex; gap: 4px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 3px; margin-right: 4px; }
  .la-lang-btn { background: transparent; border: none; color: rgba(255,255,255,.55); padding: 4px 10px; border-radius: 11px; font-size: 11px; font-weight: 900; letter-spacing: .6px; cursor: pointer; font-family: inherit; transition: all .15s; }
  .la-lang-btn:hover { color: rgba(255,255,255,.9); }
  .la-lang-btn.active { background: var(--gold); color: var(--ink); }

  .la-time { font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .5px; min-width: 100px; text-align: right; }
  .la-scrub-wrap { display: flex; align-items: center; gap: 8px; }
  .la-scrub { flex: 1; height: 4px; background: rgba(255,255,255,.12); border-radius: 2px; cursor: pointer; position: relative; overflow: hidden; }
  .la-scrub-fill { position: absolute; inset: 0; right: auto; background: var(--gold); transition: width .1s linear; width: 0%; }
  .la-sections { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 10px; }
  .la-section { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.5); padding: 8px 4px; border-radius: 6px; cursor: pointer; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; text-align: center; transition: all .15s; line-height: 1.25; font-family: inherit; }
  .la-section:hover { border-color: rgba(196,154,46,.3); color: rgba(255,255,255,.8); }
  .la-section.active { background: rgba(196,154,46,.18); border-color: var(--gold); color: var(--gold); }
  .la-section.done { color: rgba(111,207,151,.7); border-color: rgba(111,207,151,.25); }
  .la-section-num { display: block; font-size: 10px; opacity: .65; margin-bottom: 2px; }
  @media (max-width: 720px) {
    .la-sections { grid-template-columns: repeat(4, 1fr); gap: 3px; }
    .la-section { font-size: 8px; padding: 6px 3px; }
    .la-time { display: none; }
    .lesson-audio-section-name { font-size: 13px; }
  }

  /* ── LESSON SECTION SCAFFOLDING ── */
  /* Each of the 8 content sections is wrapped in a div with id="sec1"..."sec8"
     and class "lesson-section". The audio player highlights the section
     currently playing; sections themselves are always visible (no tab gating). */
  .lesson-section { padding: 28px 0 48px; border-bottom: 1px solid var(--border); }
  .lesson-section:last-of-type { border-bottom: none; }
  .lesson-section-header { margin-bottom: 18px; }
  .lesson-section-num { font-size: 10px; font-weight: 900; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
  .lesson-section-name { font-family: "DM Serif Display", Georgia, serif; font-size: 28px; font-weight: 400; color: var(--ink); line-height: 1.2; }
  @media (max-width: 720px) {
    .lesson-section-name { font-size: 22px; }
  }

  /* ════════════════════════════════════════════════════════════════
     v1.5 — ROOM ROUTER + BREATH SEQUENCE COMPONENTS
     ════════════════════════════════════════════════════════════════

     These components are inactive in production until two things happen:
       1. life-engine.js gains a [data-open] / [data-room] router
       2. Each lesson HTML is refactored from 8 stacked .lesson-section
          blocks into a .lroom[data-room="home"] (pill grid) plus N
          .lroom[data-room="..."] (one per content section).

     Until then, the existing long-scroll lesson layout continues to work
     unmodified. These rules only activate on elements that opt in by
     using the new classes.

     The visual language is borrowed from Restoration (single-page room
     router, generous whitespace, breath sequence rhythm) but adapted
     to Life's emotional accent (sage on the existing warm-gold paper
     canvas — not the cream canvas Restoration uses).

     Component families:
       · Room router:    .lroom, .lpills-*, .lpill, .system-strip, .sys-card,
                         .lroom-head, .lroom-foot, .lroom-back, .lroom-next,
                         .lroom-crumb, .hero.lhero-compact
       · Breath Sequence: .authority-lead (+ .beat-diagnosis, .beat-axiom,
                          .beat-assignment), .silent-moment, .silent-text,
                          .conviction-box, .reflect-card (+ .reflect-eyebrow,
                          .reflect-heading, .reflect-body), .structure
                          (+ .structure-eyebrow), .soft-divider

     The existing .truth-box is a green success callout and is preserved
     as-is. The new dark-ink conviction-statement component is named
     .conviction-box to avoid the name collision.
     ════════════════════════════════════════════════════════════════ */

  /* ── ROOMS — only one visible at a time ── */
  .lroom { display: none; animation: roomFade .28s var(--ease); }
  .lroom.active { display: block; }
  @keyframes roomFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── HERO (compact variant for room-router home) ──
     Namespace .lhero-compact deliberately so it does NOT inherit the
     existing .hero's gold-gradient + box-shadow chrome. The home room
     in a room-router lesson is intentionally flat against the page. */
  .hero.lhero-compact {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 38px;
  }
  .hero.lhero-compact .hero-inner { max-width: 700px; }
  .hero.lhero-compact h1,
  .hero.lhero-compact h2 {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.05;
    letter-spacing: -.5px;
    margin: 0 0 22px;
    color: var(--ink);
  }
  .hero.lhero-compact .lead {
    font-size: 17px;
    line-height: 1.65;
    color: #2a2622;
    margin: 0;
    max-width: 620px;
  }

  /* ── SYSTEM STRIP — the "Book Anchor · Pattern · Worksheet · Tool" row ── */
  .system-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 28px 0;
    margin: 36px 0 12px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .sys-card { padding: 0 22px; border-right: 1px solid var(--fog2); }
  .sys-card:last-child { border-right: none; }
  .sys-card small {
    font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;  /* v1.7: was 1.6px */
    color: var(--border2); font-weight: 400;                            /* v1.7: was --muted / 500 */
    display: block; margin-bottom: 8px;
  }
  .sys-card strong {
    font-size: 14px; font-weight: 700;
    color: var(--ink);
    display: block; line-height: 1.4;
  }
  @media (max-width: 720px) {
    .system-strip { grid-template-columns: repeat(2, 1fr); gap: 14px 0; padding: 22px 0; }
    .sys-card { padding: 8px 14px; border-right: none; border-bottom: 1px solid var(--fog2); padding-bottom: 14px; }
    .sys-card:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
  }

  /* ── PILLS — the heart of the home room ── */
  .lpills-block { padding: 36px 0 12px; }
  .lpills-group { margin-bottom: 28px; }
  .lpills-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;  /* v1.7: was 2px */
    color: var(--muted); font-weight: 400;                              /* v1.7: was 500 */
    margin-bottom: 14px;
  }
  .lpills-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .lpill {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 14px; font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
  }
  .lpill:hover {
    border-color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px -8px rgba(0,0,0,.18);
  }
  .lpill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .lpill-num {
    font-family: "IBM Plex Mono", "Courier New", monospace;
    font-size: 11px; color: var(--accent-deep);
    font-weight: 500;
  }
  .lpill-time {
    font-size: 10.5px; color: var(--muted);      /* v1.7: was 11px */
    font-weight: 400; letter-spacing: .2px;
    opacity: .7;                                  /* v1.7: tail-end annotation */
  }

  /* ── ROOM CHROME (head/foot bars when inside a non-home room) ── */
  .lroom-head, .lroom-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 36px;
  }
  .lroom-foot { border-bottom: none; border-top: 1px solid var(--border); margin: 56px 0 0; padding-top: 22px; }
  .lroom-back, .lroom-next {
    background: none;
    border: 1px solid var(--border);
    color: var(--ink);
    padding: 10px 18px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur), background var(--dur);
  }
  .lroom-back:hover { border-color: var(--ink); background: var(--white); }
  .lroom-next { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .lroom-next:hover { background: #000; }
  .lroom-next:focus-visible,
  .lroom-back:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .lroom-crumb {
    font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
    color: var(--muted);
  }

  /* ════════════════════════════════════════════════════════════════
     BREATH SEQUENCE COMPONENTS
     Order inside a reading room:
       1. .authority-lead   (Instruction — diagnosis → axiom → assignment)
       2. .c-card / .card   (the core teaching)
       3. .silent-moment    (the pause)
       4. .conviction-box   (the insight / truth statement)
       5. .reflect-card     (the look inward)
       6. .structure        (the takeaway list)
     Not every reading uses all 6 beats. The rule of thumb: every reading
     gets at least one Silent Moment, and the heavier readings (the lesson
     opener and the framework reading) get the full sequence.
     ════════════════════════════════════════════════════════════════ */

  /* ── AUTHORITY LEAD — three-beat opening at the top of a reading ── */
  .authority-lead { margin: 0 0 36px; padding: 0; }
  .authority-lead p {
    font-family: "DM Serif Display", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.45;
    color: #2a2622;
    margin: 0 0 12px;
    max-width: 640px;
  }
  .authority-lead p:last-child { margin-bottom: 0; }
  .authority-lead .beat-axiom {
    font-style: normal;
    color: var(--ink);
    font-size: 28px;
    line-height: 1.25;
    margin-top: 4px;
  }
  .authority-lead .beat-assignment {
    font-family: "DM Sans", Arial, sans-serif;
    font-style: normal;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin-top: 22px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
  }
  @media (max-width: 720px) {
    .authority-lead p { font-size: 18px; }
    .authority-lead .beat-axiom { font-size: 22px; }
  }

  /* ── SILENT MOMENT — the pause ── */
  .silent-moment {
    padding: 64px 0;
    text-align: center;
    margin: 28px 0;
  }
  .silent-text {
    font-family: "DM Serif Display", Georgia, serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
    letter-spacing: .2px;
  }
  @media (max-width: 720px) {
    .silent-moment { padding: 44px 0; }
    .silent-text { font-size: 18px; }
  }

  /* ── SOFT DIVIDER — between beats when no Silent Moment fits ── */
  .soft-divider {
    display: flex; align-items: center; justify-content: center;
    margin: 40px 0;
    color: var(--accent-soft);
    font-size: 14px;
    letter-spacing: 8px;
  }
  .soft-divider::before, .soft-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
    margin: 0 22px;
    max-width: 80px;
  }

  /* ── CONVICTION BOX — the insight statement (dark, accent-soft check) ──
     Distinct from the legacy .truth-box (green success callout).
     This is the "translation" / "conviction" / "what's really happening"
     box that should feel like the lesson speaking with authority. */
  .conviction-box {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--ink);
    color: #fdfbf6;
    padding: 20px 24px;
    border-radius: 10px;
    margin: 22px 0;
    font-size: 14px;
    line-height: 1.6;
  }
  .conviction-box > :first-child {
    color: var(--accent-soft);
    font-weight: 700;
    flex-shrink: 0;
  }
  .conviction-box strong { color: var(--accent-soft); font-weight: 700; }
  @media (max-width: 720px) {
    .conviction-box { padding: 16px 18px; font-size: 13px; }
  }

  /* ── REFLECT CARD — the look inward ── */
  .reflect-card {
    background: var(--accent-tint);
    border: 1px solid #d9e2d6;
    border-left: 3px solid var(--accent);
    border-radius: 12px;
    padding: 28px 34px;
    margin: 0 0 32px;
  }
  .reflect-eyebrow {
    font-size: 10px; text-transform: uppercase; letter-spacing: 1.8px;
    color: var(--accent-deep);
    margin-bottom: 10px;
    font-weight: 500;
  }
  .reflect-heading {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 10px;
  }
  .reflect-body {
    font-size: 14px;
    line-height: 1.65;
    color: #2a2622;
    margin: 0;
    font-style: italic;
  }
  @media (max-width: 720px) {
    .reflect-card { padding: 22px 22px; }
    .reflect-heading { font-size: 18px; }
  }

  /* ── STRUCTURE — the takeaway list (numbered, calm) ── */
  .structure {
    margin: 0 0 28px;
    padding: 24px 28px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .structure-eyebrow {
    font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
    color: var(--accent-deep);
    font-weight: 500;
    margin-bottom: 14px;
  }
  .structure ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: structureCount;
  }
  .structure li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--fog2);
    counter-increment: structureCount;
    align-items: baseline;
    font-size: 15px;
    line-height: 1.6;
    color: #2a2622;
  }
  .structure li:first-child { border-top: none; }
  .structure li::before {
    content: counter(structureCount, decimal-leading-zero);
    font-family: "IBM Plex Mono", "Courier New", monospace;
    font-size: 11px;
    color: var(--accent);
    font-weight: 500;
    letter-spacing: .3px;
  }
  @media (max-width: 720px) {
    .structure { padding: 18px 20px; }
    .structure li { font-size: 14px; gap: 10px; grid-template-columns: 26px 1fr; }
  }

  /* ════════════════════════════════════════════════════════════════
     SIDEBAR SOFTENING (v1.5)
     The existing .sidebar / .lstep rules above keep their behavior for
     the long-scroll lessons. These overrides activate only on a body
     with data-room-router (set on lessons that have been migrated).
     ════════════════════════════════════════════════════════════════ */
  body[data-room-router] .lstep {
    /* v1.8 hotfix: zero out browser-default <button> chrome so the
       sidebar row renders against the dark sidebar like the legacy
       <a class="lstep"> did. Only the visual reset — flex layout,
       cursor, font come from the base .lstep rule above. */
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;

    padding: 11px 10px;          /* was 8px 10px */
    color: rgba(255,255,255,.45); /* was .5 */
    font-size: 12.5px;
    gap: 14px;                   /* was 9px */
    line-height: 1.3;
  }
  body[data-room-router] .lstep:hover {
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.85);
  }
  body[data-room-router] .lstep.active {
    background: rgba(107,139,110,.14);  /* sage tint */
    color: var(--accent-soft);
  }
  body[data-room-router] .lstep .lnum {
    font-size: 9px;                /* was bigger */
    color: rgba(255,255,255,.28);
    letter-spacing: .4px;
  }
  body[data-room-router] .lstep.active .lnum { color: var(--accent-soft); }
  body[data-room-router] .lang-switcher {
    border-bottom: 1px solid rgba(255,255,255,.04);  /* softer than the legacy .06 */
  }


  /* ════════════════════════════════════════════════════════════════
     v1.6 — ARRIVAL NOTE + PILL ENERGY VARIANTS
     ════════════════════════════════════════════════════════════════ */

  /* ── ARRIVAL NOTE ──
     Sits below the hero lead, above the system-strip. The lesson has just
     spoken (eyebrow diagnosis → headline → lead). Now the system speaks:
     "Here's how this works. You're safe. Take your time."
     This is not a card. It's a low-contrast band with one accent mark, so
     it reads as voice-of-the-system rather than just another module. */
  .arrival-note {
    display: grid;
    grid-template-columns: 2px 1fr;
    gap: 18px;
    align-items: start;
    margin: 28px 0 36px;
    padding: 4px 0;
  }
  .arrival-note::before {
    content: '';
    align-self: stretch;
    background: var(--accent);
    border-radius: 1px;
    opacity: .55;
  }
  .arrival-note-body {
    max-width: 580px;
  }
  .arrival-note strong {
    display: block;
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 17px;
    line-height: 1.4;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: .1px;
  }
  .arrival-note p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
  }
  @media (max-width: 720px) {
    .arrival-note { gap: 14px; margin: 22px 0 28px; }
    .arrival-note strong { font-size: 15px; }
    .arrival-note p { font-size: 13px; }
  }

  /* ── PILL ENERGY VARIANTS ──
     Compound selectors (.lpill.lpill--X) so the base styles defined in
     v1.5 still apply; only what's different gets overridden. The two-tier
     scheme: readings stay quiet (base .lpill), the three non-reading pills
     get scaled visual upgrades. Energy increases left-to-right:
       Reading (white)  <  Worksheet (sage)  <  Case (warm paper, serif)  <  Complete (gold) */

  /* Worksheet — sage-tinted. Substantive but routine. */
  .lpill.lpill--worksheet {
    background: var(--accent-tint);
    border-color: #d9e2d6;
    color: var(--ink);
  }
  .lpill.lpill--worksheet:hover {
    border-color: var(--accent);
    background: #e5ebe1;     /* slightly deeper sage tint */
  }
  .lpill.lpill--worksheet .lpill-time {
    color: var(--accent-deep);
  }

  /* Case — warm paper, slight serif treatment on the title. It's a story,
     not a task; the typography signals that. */
  .lpill.lpill--case {
    background: #f6efde;       /* warm paper, same family as gold-pale */
    border-color: rgba(216,180,120,.45);
    color: var(--gold-deep);
    /* Serif on the title text inside the pill */
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    letter-spacing: .1px;
    font-size: 15px;
  }
  .lpill.lpill--case:hover {
    border-color: var(--gold-deep);
    background: #f0e6cc;
  }
  .lpill.lpill--case .lpill-time {
    /* Time chip stays sans + quiet inside the case pill */
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 11px;
    color: var(--gold-deep);
    opacity: .7;
  }

  /* Complete — gold, the destination. The only place gold appears in the
     home pill grid (eyebrows have migrated to sage; pill numerals are sage).
     When the student sees gold, they know they've arrived. */
  .lpill.lpill--complete {
    background: linear-gradient(180deg, #f7eed1 0%, #ecdfa8 100%);
    border-color: var(--gold);
    color: var(--gold-deep);
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
  }
  .lpill.lpill--complete:hover {
    border-color: var(--gold-deep);
    background: linear-gradient(180deg, #f0e2b7 0%, #e3d28a 100%);
    transform: translateY(-1px);
  }

