/* ══════════════════════════════════════════════════════════════════════════
   restoration-styles.css
   ──────────────────────────────────────────────────────────────────────────
   Shared stylesheet for the Restoration course.
   Loaded by: restoration.html (landing) and all 6 lesson files in
   /restoration-lessons/0N-*.html.

   ARCHITECTURE NOTE — SELF-CONTAINED DESIGN SYSTEM
   ──────────────────────────────────────────────────────────────────────────
   Restoration intentionally uses its own gold/ink/fog palette and
   DM Serif Display typography rather than importing life-styles.css.
   This is a deliberate aesthetic departure — same pattern as the
   foundations_cases.html microsite. DO NOT "fix" this by importing
   life-styles.css or adopting the shared c-card design system. The
   visual language here is by design.

   This file is the result of Phase B extraction — the six original
   inline <style> blocks were copied out verbatim, preserved in their
   original order so the cascade rules still resolve the same way.
   Block 2 deliberately overrides Block 1 ('v6 final overrides'); do
   not reorder.

   The TTS-pill / A11Y collision in Block 5 is a known issue (carryover)
   and is preserved verbatim for now — fix is queued for a separate
   session.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   Block 1 — Main system (palette, layout, sidebar, hero, cards, sims, accordions)
   (extracted from inline <style> at original lines 30-1533)
   ══════════════════════════════════════════════════════════════════════════ */

  :root {
    --ink: #0a0908; --ink2: #141210;
    --fog: #f5f3ef; --fog2: #edeae4; --fog3: #e5e1d9;
    --gold: #b8922a; --gold2: #c9a03a; --gold-pale: #faf4e4; --gold-deep: #7a5a0a;
    --white: #fff; --muted: #7a746e; --border: #e8e4dd; --border2: #d8d3cb;
    --success-bg: #edf7f0; --success: #1a5c3a;
    --warn-bg: #fff9ec; --warn: #7a5000;
    --red-bg: #fdf1f0; --red: #8b1a1a;
    /* Shadows eliminated — authority from space, not depth */
    --shadow-sm: none;
    --shadow: none;
    --shadow-lg: none;
    --r: 10px; --rl: 14px; --rxl: 18px;
    --dur: .2s; --ease: cubic-bezier(.4,0,.2,1);
    --sidebar-bg: #0d0b08;
    --sidebar-bg2: #111009;
    /* Sidebar borders much dimmer */
    --sidebar-border: rgba(255,255,255,.045);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: "DM Sans", Arial, sans-serif; background: var(--fog); color: var(--ink); line-height: 1.65; overflow-x: hidden; }
  body::before { display: none; }
  a { text-decoration: none; color: inherit; }
  button { font-family: inherit; cursor: pointer; }

  /* ── ANIMATIONS ── */
  @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% { opacity: 1; } 50% { opacity: .65; } }
  @keyframes fillBar { from { width: 0; } to { width: var(--target-width, 16.66%); } }
  @keyframes radarPulse { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }
  @keyframes waveform { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
  @keyframes unlockPop { 0% { transform: scale(.85); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
  @keyframes timelineDot { 0% { transform: scale(0); } 100% { transform: scale(1); } }

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

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

  .sidebar-brand { padding: 24px 20px 18px; border-bottom: 1px solid var(--sidebar-border); }
  .brand-row { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
  .mark { width: 38px; height: 38px; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); display: grid; place-items: center; color: rgba(255,255,255,.7); font-family: "DM Serif Display", serif; font-weight: 700; font-size: 12px; letter-spacing: .5px; transition: background var(--dur); flex-shrink: 0; }
  .mark:hover { background: rgba(255,255,255,.07); }
  .brand-name { font-family: "DM Serif Display", serif; font-size: 17px; font-weight: 400; letter-spacing: .2px; color: rgba(255,255,255,.95); }
  .brand-sub { font-size: 9.5px; color: rgba(255,255,255,.35); letter-spacing: 2.2px; text-transform: uppercase; margin-top: 1px; }
  .back-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,.32); transition: color var(--dur); margin-top: 10px; letter-spacing: .3px; }
  .back-link:hover { color: var(--gold); }

  .status-panel { padding: 16px 20px; border-bottom: 1px solid var(--sidebar-border); background: rgba(255,255,255,.018); }
  .status-label { font-size: 9px; letter-spacing: 2.8px; text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: 12px; font-weight: 500; }
  .status-row { display: flex; justify-content: space-between; align-items: center; padding: 5.5px 0; font-size: 12px; }
  .status-key { color: rgba(255,255,255,.38); font-size: 11.5px; }
  .status-val { color: var(--white); font-weight: 600; font-size: 11.5px; text-align: right; max-width: 140px; letter-spacing: .1px; }
  .status-val.gold { color: var(--gold); font-weight: 700; }
  .status-val.active { color: #6fcf97; }
  .dot-pulse { width: 6px; height: 6px; border-radius: 50%; background: #6fcf97; display: inline-block; margin-right: 5px; animation: pulse 2s infinite; ; }

  .progress-section { padding: 16px 20px; border-bottom: 1px solid var(--sidebar-border); }
  .progress-header { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.38); margin-bottom: 10px; }
  .progress-header strong { color: var(--gold); font-weight: 700; }
  .prog-bar { height: 5px; background: rgba(255,255,255,.07); border-radius: 99px; overflow: hidden; margin-bottom: 15px; }
  .prog-fill { height: 100%; border-radius: 99px; background: var(--gold); width: 0%; transition: width .6s var(--ease); }
  .lesson-steps { display: grid; gap: 3px; }
  .lstep { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 12px; color: rgba(255,255,255,.42); cursor: pointer; transition: background var(--dur), color var(--dur), transform var(--dur); letter-spacing: .1px; }
  .lstep:hover { background: rgba(255,255,255,.04); color: rgba(255,255,255,.8); transform: translateX(2px); }
  .lstep.active { background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); border: none; }
  .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,.15); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex-shrink: 0; transition: background var(--dur), border-color var(--dur); }
  .lstep.active .lnum { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.9); }

  .pattern-section { padding: 16px 20px; border-bottom: 1px solid var(--sidebar-border); }
  .pattern-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 12px; }
  .pattern-title { font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 7px; }
  .pattern-name { font-family: "DM Serif Display", serif; font-size: 16px; color: rgba(255,255,255,.75); margin-bottom: 4px; font-style: italic; }
  .pattern-desc { font-size: 11px; color: rgba(255,255,255,.42); line-height: 1.6; }

  .reset-section { padding: 14px 20px; border-bottom: 1px solid var(--sidebar-border); }
  .reset-card { background: none; border-radius: 0; padding: 10px 0; border-left: none; cursor: pointer; transition: opacity var(--dur); }
  .reset-card:hover { opacity: .75; }
  .reset-quote { font-family: "DM Serif Display", serif; font-style: italic; font-size: 13px; color: rgba(255,255,255,.82); line-height: 1.6; transition: opacity .2s ease, transform .2s ease; }
  .reset-meta { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.28); margin-top: 8px; }
  .reset-arrow { float: right; color: rgba(255,255,255,.24); font-size: 14px; margin-top: -2px; transition: transform var(--dur); }
  .reset-card:hover .reset-arrow { transform: translateX(3px); }

  .map-section { padding: 14px 20px; }
  .map-label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: 11px; }
  .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,.28); transition: all var(--dur); }
  .track-node.current { background: rgba(196,154,46,.1); color: var(--white); border: 1px solid rgba(196,154,46,.2); }
  .track-node-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.12); flex-shrink: 0; }
  .track-node.current .track-node-dot { background: var(--gold);  }
  .track-node.locked { opacity: .3; }
  .track-connector { width: 1px; height: 7px; background: rgba(255,255,255,.06); margin-left: 12px; }

  .portal-cta { margin: 16px; border-radius: 12px; background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%); color: var(--ink); padding: 13px 16px; text-align: center; font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; transition: opacity var(--dur), transform var(--dur), box-shadow var(--dur); display: block;  }
  .portal-cta:hover { opacity: .92; transform: translateY(-1px);  }
  .portal-cta:active { transform: scale(.98); }

  /* ─── SIDEBAR GROUP HEADER (matches life.html convention) ─── */
  .sidebar-group-header { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.35); font-weight: 900; padding: 18px 20px 8px; }

  /* ─── USER BLOCK (signed-in identity) ─── */
  .user-block { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
  .user-name { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.95); margin-bottom: 2px; }
  .user-email { font-size: 10px; color: rgba(255,255,255,.4); word-break: break-all; }
  .user-logout { margin-top: 10px; display: inline-block; font-size: 10px; color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.12); padding: 5px 10px; border-radius: 3px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; background: transparent; font-family: inherit; transition: color var(--dur), border-color var(--dur); }
  .user-logout:hover { color: var(--gold); border-color: var(--gold); }

  /* ─── CREDIT ACCESS WIDGET (entitlement-based; mirrors life.html pattern) ─── */
  .credit-widget { margin: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .credit-widget-inner { padding: 14px 18px; }
  .credit-widget-label { font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 900; margin-bottom: 8px; }
  .credit-widget-label.gold { color: var(--gold); }
  .credit-widget-label.green { color: #6fcf97; }
  .credit-widget-label.muted { color: rgba(255,255,255,.3); }
  /* All non-loading states hidden by default; JS toggles exactly one to display:block. */
  .credit-eligible, .credit-active, .credit-subscribed,
  .credit-expired, .credit-offer-expired, .credit-ineligible { display: none; }
  .credit-loading { font-size: 10px; color: rgba(255,255,255,.25); padding: 4px 0; }

  /* Eligible state (offer available, awaiting activation) */
  .credit-eligible-msg { font-size: 11px; color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: 8px; }
  .credit-eligible-deadline { font-size: 10px; color: rgba(255,255,255,.4); margin-bottom: 10px; line-height: 1.5; font-style: italic; }

  /* Activate button (reused for activation CTA in eligible state) */
  .credit-activate-btn { display: block; width: 100%; padding: 11px 14px; background: var(--gold); color: var(--ink); border: none; border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; cursor: pointer; text-align: center; text-decoration: none; transition: opacity .2s; }
  .credit-activate-btn:hover:not(:disabled) { opacity: .88; }
  .credit-activate-btn:disabled { opacity: .5; cursor: wait; }
  .credit-activate-sub { font-size: 10px; color: rgba(255,255,255,.3); line-height: 1.5; margin-top: 7px; text-align: center; }

  /* Active trial + active subscription share the green badge */
  .credit-active-badge { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .credit-active-dot { width: 7px; height: 7px; border-radius: 50%; background: #6fcf97; flex-shrink: 0; }
  .credit-active-status { font-size: 12px; font-weight: 700; color: #6fcf97; }
  .credit-active-expires { font-size: 10px; color: rgba(255,255,255,.4); margin-bottom: 10px; line-height: 1.5; }
  .credit-enter-btn { display: block; width: 100%; padding: 11px 14px; background: rgba(111,207,151,.12); border: 1px solid rgba(111,207,151,.3); color: #6fcf97; border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; text-align: center; text-decoration: none; }

  /* Expired states (trial ended, offer expired, ineligible) — share styles */
  .credit-expired-msg { font-size: 11px; color: rgba(255,255,255,.45); line-height: 1.6; margin-bottom: 10px; }
  .credit-subscribe-btn { display: block; width: 100%; padding: 11px 14px; background: rgba(196,154,46,.1); border: 1px solid rgba(196,154,46,.3); color: var(--gold); border-radius: 8px; font-size: 11px; font-weight: 900; text-transform: uppercase; text-align: center; text-decoration: none; }

  /* ═════ PILL / EYEBROW ═════ */
  .pill { display: block; background: none; border: none; color: var(--muted); border-radius: 0; padding: 0; font-size: 9.5px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 16px; opacity: .55; }

  /* ═════ HERO ═════ */
  .hero { background: var(--white); border: 1px solid var(--border); border-radius: var(--rxl); padding: 44px; box-shadow: var(--shadow); margin-bottom: 22px; position: relative; overflow: hidden; animation: fadeUp .6s var(--ease); }
  .hero::after { display: none; }
  .hero::before { display: none; }
  .hero-inner { position: relative; z-index: 1; max-width: 820px; }
  .eyebrow { font-size: 11px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; margin-bottom: 12px; }
  .hero h1, .hero h2 { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; font-weight: 400; letter-spacing: -1.2px; margin-bottom: 18px; }
  .lead { font-size: 17px; color: var(--muted); line-height: 1.82; max-width: 760px; }
  .actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 24px; }
  .btn { border: none; border-radius: 12px; padding: 13px 20px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .7px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: opacity .15s, transform var(--dur), box-shadow var(--dur); text-decoration: none; }
  .btn:hover { opacity: .9; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .btn.dark { background: var(--ink); color: white; }
  .btn.gold { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: var(--ink); }
  .btn.light { background: var(--fog); border: 1px solid var(--border); color: var(--ink); }

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

  /* ═════ TAB BAR ═════ */
  .tab-bar { display: flex; gap: 0; margin-bottom: 36px; background: none; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0; flex-wrap: wrap; box-shadow: none; }
  .tab { padding: 10px 16px; border-radius: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); cursor: pointer; transition: color .15s; white-space: nowrap; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; }
  .tab:hover { color: var(--ink); background: none; }
  .tab.active { background: none; color: var(--ink); border-bottom: 2px solid var(--ink); box-shadow: none; }

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

  /* ═════ CARDS ═════ */
  .card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 32px 36px; margin-bottom: 0; box-shadow: none; }
  .section-label { display: block; background: none; color: var(--muted); border-radius: 0; padding: 0; font-size: 9.5px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; margin-bottom: 10px; opacity: .6; }
  .card h2 { font-family: "DM Serif Display", Georgia, serif; font-size: 30px; font-weight: 400; line-height: 1.15; margin-bottom: 12px; }
  .card h3 { font-family: "DM Serif Display", Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1.2; margin: 22px 0 10px; }
  .card p { margin-bottom: 13px; color: #3d3935; line-height: 1.72; }

  /* ═════ QUOTE ═════ */
  .quote { border-left: 3px solid var(--border2); background: none; padding: 4px 0 4px 20px; border-radius: 0; font-family: "DM Serif Display", Georgia, serif; font-size: 19px; line-height: 1.65; color: var(--ink); margin: 24px 0; font-style: italic; }
  .quote-attr { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); font-weight: 700; font-style: normal; margin-top: 10px; display: block; font-family: "DM Sans", sans-serif; opacity: .65; }

  /* ═════ CONTENT GRID ═════ */
  .side-card { background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; position: sticky; top: 24px; }
  .side-card:hover { box-shadow: none; }
  .score-mini { border: none; background: none; border-radius: 0; padding: 0; text-align: left; margin-bottom: 20px; }
  .score-mini:hover { }
  .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); }

  /* ═════ SYSTEM STRIP ═════ */
  .system-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
  .sys-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 15px; transition: transform var(--dur); }
  .sys-card:hover { transform: translateY(-2px); border-color: var(--gold); }
  .sys-card small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 6px; }
  .sys-card strong { font-family: "DM Serif Display", Georgia, serif; font-size: 16px; font-weight: 400; color: var(--ink); }

  /* ═════ TRUTH / WARN / DANGER BOXES ═════ */
  .truth-box { background: none; border: none; border-left: 2px solid var(--success); color: var(--success); border-radius: 0; padding: 2px 0 2px 14px; margin: 16px 0; font-weight: 600; font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; }
  .warn-box { background: none; border: none; border-left: 2px solid var(--border2); border-radius: 0; padding: 2px 0 2px 14px; margin: 16px 0; color: var(--muted); font-size: 13.5px; }
  .warn-box strong { color: #3d2c00; }
  .danger-box { background: none; border: none; border-left: 2px solid #e8b4b4; border-radius: 0; padding: 2px 0 2px 14px; margin: 16px 0; color: var(--muted); font-size: 13.5px; }
  .danger-box strong { color: #6a0a0a; }
  .ink-box { background: #0d0b08; color: white; border-radius: 10px; padding: 18px 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: none; border: none; border-radius: 0; padding: 0; }
  .cc-label { display: block; background: none; color: var(--muted); border-radius: 0; padding: 0; font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.8px; font-weight: 700; margin-bottom: 6px; opacity: .6; }
  .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; }

  /* ═════ TRANSLATION TABLE ═════ */
  .translation-table { width: 100%; border-collapse: collapse; font-size: 13px; background: white; border-radius: 10px; overflow: hidden; margin: 14px 0; border: 1px solid var(--border); }
  .translation-table th { background: var(--ink); color: var(--gold); padding: 11px 12px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 900; }
  .translation-table td { padding: 12px; border-bottom: 1px solid var(--fog2); color: #3d3935; vertical-align: top; }
  .translation-table tr:last-child td { border-bottom: none; }
  .translation-table td:first-child { font-style: italic; color: var(--muted); }
  .translation-table td:last-child { color: var(--ink); font-weight: 700; }

  /* ═════ FIVE-STEP / NUMBERED LIST ═════ */
  .step-list { display: grid; gap: 10px; margin: 14px 0; }
  .step-item { background: var(--fog); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
  .step-num { width: 24px; height: 24px; border-radius: 0; background: none; color: var(--muted); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; font-family: "DM Serif Display", serif; }
  .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(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 4px; opacity: .65; }
  .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: 20px 22px; margin: 0 0 20px; 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: 22px; margin: 12px 0 14px; }
  .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);  }
  .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); }
  .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; align-items: center; gap: 10px; 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); }

  /* ═════ PORTAL PANEL ═════ */
  .portal-panel { background: var(--ink); color: var(--white); border-radius: var(--rl); padding: 26px; margin-top: 18px; }
  .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 { background: none; border: none; border-top: 1px solid var(--border); padding: 28px 0; margin: 20px 0; text-align: left; position: relative; overflow: hidden; }
  .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: block; background: none; border: none; padding: 0; margin-bottom: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); opacity: .6; }
  .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: var(--muted); font-size: 14px; max-width: 560px; }
  .milestone.show { animation: unlockPop .6s var(--ease) both; }

  /* ═════ THE RESET ═════ */
  .identity-reset { background: none; border: none; border-top: 1px solid var(--border); padding: 40px 0; margin-top: 40px; text-align: center; }
  .ir-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; }
  .identity-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; }
  .identity-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: none; border: none; border-radius: 0; padding: 7px 0; font-weight: 400; color: var(--muted); font-size: 15px; font-family: "DM Serif Display", serif; font-style: italic; transition: color var(--dur); }
  .reset-line:hover { color: var(--ink); }

  /* ═════ NEXT LESSON ═════ */
  .next-lesson-card { background: none; color: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; margin-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; cursor: pointer; transition: background var(--dur); }
  .next-lesson-card:hover { background: var(--fog); transform: none; box-shadow: none; }
  .nl-eyebrow { color: var(--muted); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; opacity: .6; }
  .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; }

  /* ═════ CRISIS NOTE (quiet, calm — care scales with load) ═════ */
  .crisis-note { font-size: 12.5px; color: var(--muted); background: var(--paper, #faf8f5); border: 1px solid var(--border); border-left: 3px solid var(--gold-deep, #b08a3e); border-radius: var(--r); padding: 12px 14px; margin: 14px 0; line-height: 1.7; }

  /* ═════ SENSITIVE DATA BOUNDARY ═════ */
  .sdb { display: flex; align-items: flex-start; gap: 12px; background: #f5f3ef; border: 1.5px solid #c8b97a; border-left: 4px solid var(--gold); border-radius: var(--r); padding: 13px 16px; margin-bottom: 18px; }
  .sdb-icon { font-size: 16px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
  .sdb-text { font-size: 12px; color: #4a3c0a; line-height: 1.65; }
  .sdb-text strong { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gold-deep); font-weight: 900; display: block; margin-bottom: 4px; }

  /* ═════ OVERVIEW: LESSON GRID ═════ */
  .lesson-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 22px; }
  .lesson-overview-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 20px; box-shadow: none; transition: border-color .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 — bottom-right notification. Positioned at bottom: 144px to
     clear BOTH the /foundations-a11y.css "Aa" trigger (top edge at 72px)
     AND the TTS pill above it (top edge ~122px when in default state at
     bottom: 80px). See block 5 (restoration-tts-overrides) for the A11Y
     coexistence math; toast = TTS top + ~22px gap. Toasts are 3s
     transient, so the higher position is fine visually. */
  .toast { position: fixed; bottom: 144px; 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; }

  /* ═══════════════════════════════════
     MOBILE SIDEBAR REDESIGN
  ═══════════════════════════════════ */

  /* ── Hero State Card (mobile primary) ── */
  .mobile-hero-state {
    display: none; /* shown only on mobile */
    margin: 0 16px 0;
    background: linear-gradient(135deg, rgba(196,154,46,.1) 0%, rgba(196,154,46,.04) 100%);
    border: 1px solid rgba(196,154,46,.25);
    border-radius: 18px;
    padding: 20px;
    position: relative;
    overflow: hidden;
  }
  .mobile-hero-state::before {
    content: ""; position: absolute;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(196,154,46,.15), transparent 70%);
    right: -40px; top: -40px; pointer-events: none;
  }
  .mhs-label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: 10px; }
  .mhs-state { font-family: "DM Serif Display", serif; font-size: 28px; font-style: italic; color: var(--white); line-height: 1.1; margin-bottom: 6px; }
  .mhs-tagline { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.55; margin-bottom: 14px; font-style: italic; }
  .mhs-meta { display: flex; gap: 10px; flex-wrap: wrap; }
  .mhs-chip { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 99px; padding: 5px 11px; font-size: 10px; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 5px; }
  .mhs-chip.live { border-color: rgba(111,207,151,.3); color: #6fcf97; }
  .mhs-chip.live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #6fcf97; ; }

  /* ── Mobile Progress Ring ── */
  .mobile-progress-ring {
    display: none;
    margin: 14px 16px 0;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--sidebar-border);
    border-radius: 16px;
    padding: 18px 20px;
  }
  .mpr-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
  .mpr-label { font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(255,255,255,.32); }
  .mpr-pct { font-family: "DM Serif Display", serif; font-size: 22px; color: var(--gold); line-height: 1; }
  .mpr-bar-wrap { height: 4px; background: rgba(255,255,255,.07); border-radius: 99px; overflow: hidden; margin-bottom: 10px; }
  .mpr-bar-fill { height: 100%; border-radius: 99px; background: var(--gold); width: 0%; transition: width .6s var(--ease); }
  .mpr-stage { font-size: 11px; color: rgba(255,255,255,.42); }
  .mpr-stage strong { color: var(--gold); }

  /* ── Horizontal Lesson Chips ── */
  .mobile-lesson-chips {
    display: none;
    padding: 0 16px;
    margin: 14px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    flex-direction: row;
    padding-bottom: 4px;
  }
  .mobile-lesson-chips::-webkit-scrollbar { display: none; }
  .mlc-chip {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all var(--dur);
    min-width: 72px;
    text-align: center;
  }
  .mlc-chip:hover { background: rgba(255,255,255,.07); border-color: rgba(196,154,46,.25); }
  .mlc-chip.active { background: rgba(196,154,46,.12); border-color: rgba(196,154,46,.3); }
  .mlc-num { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.15); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.45); transition: all var(--dur); }
  .mlc-chip.active .mlc-num { background: var(--gold); border-color: var(--gold); color: var(--ink); }
  .mlc-chip.done .mlc-num { background: var(--success); border-color: var(--success); color: white; font-size: 0; }
  .mlc-chip.done .mlc-num::after { content: "✓"; font-size: 11px; }
  .mlc-label { font-size: 9.5px; color: rgba(255,255,255,.38); font-weight: 500; line-height: 1.3; }
  .mlc-chip.active .mlc-label { color: var(--gold); }

  /* ── Accordion Sections ── */
  .mobile-accordion {
    display: none;
    margin: 14px 16px 0;
  }
  .mac-item {
    border: 1px solid var(--sidebar-border);
    border-radius: 14px;
    margin-bottom: 6px;
    overflow: hidden;
    background: rgba(255,255,255,.02);
  }
  .mac-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
    transition: color var(--dur);
    text-align: left;
  }
  .mac-trigger:hover { color: var(--white); }
  .mac-trigger-left { display: flex; align-items: center; gap: 10px; }
  .mac-icon { font-size: 14px; }
  .mac-arrow { font-size: 11px; color: rgba(255,255,255,.3); transition: transform var(--dur); }
  .mac-item.open .mac-arrow { transform: rotate(180deg); }
  .mac-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease);
  }
  .mac-item.open .mac-body { max-height: 600px; }
  .mac-inner { padding: 0 16px 14px; }

  /* ═════ RESPONSIVE ═════ */
  @media (max-width: 1050px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { position: relative; height: auto; }
    .side-card { position: relative; top: auto; }
    .system-strip { grid-template-columns: repeat(2, 1fr); }
    .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: 20px; }
    .hero { padding: 28px 24px; }
    .system-strip, .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; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab { padding: 9px 13px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }
  }

  /* ── Full Mobile Sidebar Restructure ── */
  @media (max-width: 1050px) {
    /* Hide desktop-only sidebar sections */
    .status-panel,
    .observer-panel,
    .progress-section,
    .pattern-section,
    .reset-section,
    .map-section,
    .victory-mini,
    .timeline-mini,
    .sidebar-brand .back-link { display: none; }

    /* Show mobile-specific components */
    .mobile-hero-state,
    .mobile-progress-ring,
    .mobile-lesson-chips,
    .mobile-accordion { display: flex; }
    .mobile-hero-state { display: block; }
    .mobile-progress-ring { display: block; }
    .mobile-accordion { display: block; }

    /* Sidebar brand: more breathing room */
    .sidebar-brand { padding: 28px 20px 22px; }
    .mark { width: 46px; height: 46px; font-size: 14px; }
    .brand-name { font-size: 19px; }
    .brand-sub { font-size: 10px; letter-spacing: 2.5px; margin-top: 2px; }

    /* Portal CTA: make it pop on mobile */
    .portal-cta { margin: 16px; font-size: 12px; padding: 15px 20px; border-radius: 14px; letter-spacing: 1px; }

    /* Scope box: hide on mobile (moved to accordion) */
    .sidebar > div[style*="margin:10px 16px"] { display: none; }
  }

  /* ════════════════════════════════════════════
     ADDITIONS · v2.5
  ════════════════════════════════════════════ */

  /* ═════ PATTERN INTERRUPT CARD ═════ */
  .pattern-interrupt { 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; }
  .pattern-interrupt::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; }
  .pattern-interrupt h3 { font-family: "DM Serif Display", serif; font-size: 22px; font-weight: 400; color: var(--white); margin-bottom: 12px; line-height: 1.25; }
  .pattern-interrupt p { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; margin-bottom: 10px; }
  .pattern-interrupt p:last-of-type { margin-bottom: 0; }
  .pattern-interrupt 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; }

  /* ═════ STRATEGIC STATE INDICATOR (sidebar) ═════ */
  .strategic-state-row { padding: 6px 0; display: flex; justify-content: space-between; align-items: center; }
  .ss-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; }
  .ss-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
  .ss-pill.reactive { background: rgba(139,26,26,.18); color: #ff9d9d; }
  .ss-pill.reactive::before { background: #ff6b6b; }
  .ss-pill.overwhelmed { background: rgba(184,80,42,.18); color: #ffba8a; }
  .ss-pill.overwhelmed::before { background: #ff9555; }
  .ss-pill.avoiding { background: rgba(122,80,0,.22); color: #ffd082; }
  .ss-pill.avoiding::before { background: #d4a83c; }
  .ss-pill.stabilizing { background: rgba(184,146,42,.22); color: var(--gold); }
  .ss-pill.stabilizing::before { background: var(--gold); animation: pulse 2s infinite; }
  .ss-pill.strategic { background: rgba(26,92,58,.22); color: #6fcf97; }
  .ss-pill.strategic::before { background: #6fcf97; }
  .ss-pill.steady { background: rgba(26,92,58,.28); color: #8fdfaf; }
  .ss-pill.steady::before { background: #8fdfaf; animation: pulse 2.5s infinite; }

  /* ═════ STRATEGIC STATE · per-lesson detail card ═════ */
  .ss-card { background: linear-gradient(135deg, var(--ink) 0%, #1c1814 100%); border: 1px solid rgba(184,146,42,.2); border-radius: var(--r); padding: 16px; margin-top: 14px; }
  .ss-card-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; font-weight: 900; }
  .ss-card-current { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 10px; }
  .ss-card-current span { font-size: 11px; color: rgba(255,255,255,.5); }
  .ss-states { display: grid; gap: 4px; }
  .ss-state-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; color: rgba(255,255,255,.4); }
  .ss-state-row.active { color: var(--gold); font-weight: 700; }
  .ss-state-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.15); flex-shrink: 0; }
  .ss-state-row.active .ss-state-dot { background: var(--gold); animation: pulse 2s infinite; }

  /* ═════ COLLECTION COMMUNICATION SIGNALS (sticky panel) ═════ */
  .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-body { padding: 0; }
  .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: "\201C"; color: var(--gold); margin-right: 2px; }
  .tm-said::after { content: "\201D"; 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); }

  /* ═════ REACTIVE ENVIRONMENT / 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; }

  /* ═════ VICTORY TRACKER ═════ */
  .victory-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 22px; margin-top: 14px; }
  .victory-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
  .victory-title { font-family: "DM Serif Display", serif; font-size: 20px; font-weight: 400; color: var(--ink); }
  .victory-count { background: var(--gold); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 900; letter-spacing: .5px; }
  .victory-list { display: grid; gap: 8px; }
  .victory-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--fog); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all var(--dur); }
  .victory-item:hover { border-color: var(--gold); background: var(--gold-pale); }
  .victory-item.claimed { background: var(--success-bg); border-color: #b4d4b4; }
  .victory-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; font-size: 11px; flex-shrink: 0; transition: all var(--dur); }
  .victory-item:hover .victory-check { border-color: var(--gold); }
  .victory-item.claimed .victory-check { background: var(--success); border-color: var(--success); color: white; }
  .victory-item.claimed .victory-check::before { content: "✓"; font-weight: 900; }
  .victory-text { font-size: 13px; color: #3d3935; flex: 1; }
  .victory-item.claimed .victory-text { color: var(--success); text-decoration: line-through; text-decoration-color: rgba(26,92,58,.4); }
  .victory-cat { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 900; }
  .victory-item.claimed .victory-cat { color: var(--success); }

  /* Sidebar victory mini */
  .victory-mini { padding: 14px 20px; border-bottom: 1px solid var(--sidebar-border); }
  .vm-row { display: flex; justify-content: space-between; align-items: center; }
  .vm-count { font-family: "DM Serif Display", serif; font-size: 24px; color: var(--gold); line-height: 1; }
  .vm-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.35); }

  /* ═════ TIMELINE VISUALIZATION ═════ */
  .timeline-viz { background: var(--white); border: 1px solid var(--border); border-radius: var(--rl); padding: 28px; margin: 18px 0; }
  .timeline-title { font-family: "DM Serif Display", serif; font-size: 24px; font-weight: 400; margin-bottom: 6px; }
  .timeline-sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
  .timeline-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; position: relative; }
  .timeline-track::before { content: ""; position: absolute; top: 22px; left: 7%; right: 7%; height: 2px; background: var(--fog2); border-radius: 99px; z-index: 0; }
  .timeline-track .tl-fill { position: absolute; top: 22px; left: 7%; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold2)); border-radius: 99px; z-index: 1; transition: width .8s var(--ease); width: 0%; }
  .tl-node { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .tl-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--white); border: 2px solid var(--fog2); display: grid; place-items: center; font-family: "DM Serif Display", serif; font-size: 14px; color: var(--muted); transition: all var(--dur); margin-bottom: 8px; }
  .tl-node.done .tl-dot { background: var(--success); border-color: var(--success); color: white; }
  .tl-node.done .tl-dot::before { content: "✓"; font-weight: 900; }
  .tl-node.done .tl-dot-num { display: none; }
  .tl-node.current .tl-dot { background: var(--gold); border-color: var(--gold); color: var(--ink); animation: pulse 2s infinite; }
  .tl-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 900; }
  .tl-node.done .tl-label { color: var(--success); }
  .tl-node.current .tl-label { color: var(--gold); }
  @media (max-width: 900px) {
    .timeline-track { grid-template-columns: repeat(4, 1fr); row-gap: 18px; }
    .timeline-track::before, .timeline-track .tl-fill { display: none; }
  }
  @media (max-width: 540px) {
    .timeline-track { grid-template-columns: repeat(2, 1fr); }
  }

  /* Sidebar timeline mini */
  .timeline-mini { padding: 14px 20px; border-bottom: 1px solid var(--sidebar-border); }
  .tm-mini-label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: 10px; }
  .tm-mini-track { display: flex; gap: 4px; align-items: center; }
  .tm-mini-seg { flex: 1; height: 3px; border-radius: 99px; background: rgba(255,255,255,.08); transition: background var(--dur); }
  .tm-mini-seg.done { background: var(--gold); }
  .tm-mini-seg.current { background: var(--gold);  }
  .tm-mini-caption { font-size: 11px; color: rgba(255,255,255,.42); margin-top: 9px; }
  .tm-mini-caption strong { color: var(--gold); }

  /* ═════ 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; } }

  /* ── PERSISTENT FOOTER STRIP ── */
  .restoration-footer {
    margin-top: 40px;
    border-top: 1px solid var(--border);
    padding-top: 22px;
    padding-bottom: 10px;
  }
  .restoration-footer-inner {
    background: var(--fog2);
    border: 1px solid var(--border2);
    border-radius: var(--r);
    padding: 18px 22px;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.8;
  }
  .restoration-footer-inner p { margin-bottom: 6px; }
  .restoration-footer-inner p:last-child { margin-bottom: 0; }
  .restoration-footer-inner strong { color: var(--ink); font-size: 11px; }
  .restoration-footer-inner .footer-row {
    display: flex; gap: 24px; flex-wrap: wrap; margin-top: 12px;
    padding-top: 12px; border-top: 1px solid var(--border);
    font-size: 10px; letter-spacing: .5px;
  }
  .restoration-footer-inner .footer-row span { display: flex; align-items: center; gap: 5px; }
  .restoration-footer-inner .footer-row span::before { content: "×"; color: var(--red); font-weight: 900; font-size: 11px; }
  @media (max-width: 640px) { .restoration-footer-inner .footer-row { gap: 10px; } }

  /* ════════════════════════════════════════════
     ADDITIONS · v3 — OBSERVER MODE · RADAR · METHODOLOGY · SIMULATION
  ════════════════════════════════════════════ */

  /* ─── animations ─── */
  @keyframes radarSweep {
    0% { transform: rotate(0deg); opacity: .35; }
    50% { opacity: .55; }
    100% { transform: rotate(360deg); opacity: .35; }
  }
  @keyframes signalTick {
    0% { transform: translateX(-110%); opacity: 0; }
    8% { opacity: 1; }
    50% { opacity: .9; }
    92% { opacity: 1; }
    100% { transform: translateX(110%); opacity: 0; }
  }
  @keyframes scanShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  @keyframes signalDetected {
    0% { box-shadow: none; }
    60% { box-shadow: none; }
    100% { box-shadow: 0 0 0 0 rgba(184,146,42,0), 0 0 0 0 rgba(184,146,42,0); }
  }
  @keyframes observeBlink {
    0%, 92%, 100% { opacity: 1; }
    96% { opacity: .35; }
  }
  @keyframes incomingRing {
    0% { transform: rotate(-6deg); }
    8% { transform: rotate(6deg); }
    16% { transform: rotate(-6deg); }
    24% { transform: rotate(6deg); }
    32%, 100% { transform: rotate(0deg); }
  }

  /* ─── sidebar: signal tick across top of brand ─── */
  .sidebar-brand { position: relative; overflow: hidden; }
  .sidebar-brand::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold2) 50%, var(--gold) 70%, transparent 100%);
    animation: signalTick 9s ease-in-out infinite;
    pointer-events: none;
  }

  /* ─── LANGUAGE SWITCHER (Restoration gold/ink palette; not imported from life-styles) ─── */
  .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-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(196,154,46,.35); }
  .lang-btn.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }

  /* ─── brand mark: radar sweep underlay ─── */
  /* The "CC" text is a bare text node inside .mark. Without an explicit
     stacking context it paints at the same level as ::after, and since
     ::after comes later in paint order the gold sweep covered the text
     on viewports >640px (the <640px block disables ::after, which is why
     the bug only showed on the wide sidebar). Fix per the codebase's
     established content-over-underlay pattern: isolate .mark and push the
     decorative sweep to z-index:0 so the text (auto > 0) sits above it. */
  .mark { position: relative; overflow: hidden; isolation: isolate; }
  .mark::after {
    content: ""; position: absolute; inset: -50%; z-index: 0;
    background: conic-gradient(from 0deg, transparent 0deg, transparent 320deg, rgba(184,146,42,.5) 350deg, transparent 360deg);
    animation: radarSweep 6s linear infinite;
    pointer-events: none;
    opacity: .55;
  }

  /* ─── OBSERVER MODE panel ─── */
  .observer-panel {
    padding: 14px 20px;
    border-bottom: 1px solid var(--sidebar-border);
    background: linear-gradient(180deg, rgba(111,207,151,.035), rgba(255,255,255,.01));
    position: relative;
  }
  .observer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .observer-left { display: flex; align-items: center; gap: 9px; }
  .observer-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #6fcf97;
    
    animation: observeBlink 4s ease-in-out infinite;
    flex-shrink: 0;
  }
  .observer-title {
    font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase;
    color: rgba(255,255,255,.42); font-weight: 900;
  }
  .observer-status {
    font-size: 10px; font-weight: 900; letter-spacing: 1.2px;
    color: #6fcf97; text-transform: uppercase;
  }
  .observer-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;
  }

  /* ─── strategic-state pill: scanning glow ─── */
  .ss-pill.stabilizing::after,
  .ss-pill.strategic::after,
  .ss-pill.steady::after {
    content: ""; position: absolute; inset: -3px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(184,146,42,.18), transparent 70%);
    opacity: 0; transition: opacity .4s ease;
    pointer-events: none;
  }
  .ss-pill { position: relative; }

  /* ─── timeline mini: signal-detected pulse on stage change ─── */
  .tm-mini-seg.current { position: relative; }
  .tm-mini-seg.current::after {
    content: ""; position: absolute; inset: -3px;
    border-radius: 99px;
    pointer-events: none;
  }
  .tm-mini-seg.signal { animation: signalDetected 1.6s ease-out 1; }

  /* ─── audio card: subtle scanline shimmer during playback ─── */
  .audio-card.playing::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(184,146,42,.08) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: scanShimmer 5s linear infinite;
    pointer-events: none;
    z-index: 0;
  }
  .audio-card { position: relative; }

  /* ─── METHODOLOGY card (Overview) ─── */
  .methodology-card {
    background: linear-gradient(135deg, var(--ink) 0%, #14110d 100%);
    border: 1px solid rgba(184,146,42,.25);
    border-radius: var(--rxl);
    padding: 32px 30px;
    margin: 22px 0;
    position: relative; overflow: hidden;
    color: var(--white);
  }
  .methodology-card::before {
    content: ""; position: absolute;
    width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(184,146,42,.12), transparent 65%);
    right: -180px; top: -180px; pointer-events: none;
  }
  .methodology-card::after {
    content: ""; position: absolute;
    width: 280px; height: 280px; border-radius: 50%;
    border: 1px solid rgba(184,146,42,.08);
    right: -110px; top: -110px; pointer-events: none;
  }
  .meth-eyebrow {
    font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--gold); font-weight: 900; margin-bottom: 14px;
    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);
    ;
  }
  .methodology-card h2 {
    font-family: "DM Serif Display", serif;
    font-size: clamp(28px, 4vw, 38px); font-weight: 400;
    line-height: 1.1; letter-spacing: -.5px; margin-bottom: 8px;
    color: var(--white); position: relative; z-index: 1;
  }
  .meth-tm {
    font-size: 14px; color: var(--gold); font-weight: 900;
    vertical-align: super; margin-left: 2px;
  }
  .meth-sub {
    font-family: "DM Serif Display", serif; font-style: italic;
    font-size: 16px; color: rgba(255,255,255,.7);
    margin-bottom: 18px; position: relative; z-index: 1;
  }
  .meth-body { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; max-width: 680px; position: relative; z-index: 1; }
  .meth-body strong { color: var(--gold); }
  .meth-pillars {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin-top: 20px;
    position: relative; z-index: 1;
  }
  .meth-pillar {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(184,146,42,.18);
    border-radius: var(--r); padding: 14px;
  }
  .meth-pillar-num {
    font-family: "DM Serif Display", serif;
    font-size: 22px; color: var(--gold); line-height: 1;
    margin-bottom: 6px;
  }
  .meth-pillar-name {
    font-family: "DM Serif Display", serif;
    font-size: 15px; color: var(--white); font-weight: 400; margin-bottom: 4px;
  }
  .meth-pillar-desc {
    font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.5;
  }
  @media (max-width: 760px) {
    .meth-pillars { grid-template-columns: 1fr; }
  }

  /* ─── PRESSURE EVENT SIMULATION ─── */
  .sim-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--rxl);
    padding: 28px;
    margin: 20px 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));
    background-size: 200% 100%;
    animation: scanShimmer 4s linear infinite;
  }
  .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); ;
  }

  /* round counter */
  .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; }

  /* incoming-call card */
  .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-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;
    animation: incomingRing 3.5s ease-in-out infinite;
  }
  .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;
  }

  /* response options */
  .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);
  }

  /* feedback panel */
  .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); }

  /* between-round strategic pause */
  .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 */
  .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); }

  /* action row at bottom of round */
  .sim-actions {
    display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap;
  }

  /* documentation step */
  .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);
  }

  /* completion */
  .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; }
  }


  /* ══ COGNITIVE DENSITY REDUCTION ══ */
  .track-accordion {
    margin: 0 0 22px; border: 1px solid var(--border);
    border-radius: var(--rl); overflow: hidden;
    background: var(--white); box-shadow: var(--shadow-sm);
  }
  .track-accordion-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px; background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 600;
    color: var(--ink); text-align: left; gap: 12px; transition: background var(--dur);
  }
  .track-accordion-btn:hover { background: var(--fog); }
  .track-accordion-body { padding: 0 4px 4px; }
  .track-accordion-body[hidden] { display: none; }

  .reflect-accordion {
    margin: 0 0 18px; border: 1px solid var(--border);
    border-radius: var(--r); overflow: hidden; background: var(--white);
  }
  .reflect-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 13px 18px; background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 13px; color: var(--muted);
    text-align: left; gap: 12px; transition: background var(--dur), color var(--dur);
  }
  .reflect-btn:hover { background: var(--fog); color: var(--ink); }
  .reflect-body { padding: 4px; }
  .reflect-body[hidden] { display: none; }
  .reflect-body .identity-reset { margin-top: 0; border-radius: var(--r); }
  .ta-chevron {
    font-size: 18px; color: var(--muted); transition: transform var(--dur);
    flex-shrink: 0; line-height: 1; display: inline-block;
  }
  [aria-expanded="true"] .ta-chevron { transform: rotate(90deg); }

  /* ═══════════════════════════════════════════════════════
     PROGRESSIVE DISCLOSURE SYSTEM — v4
     All content preserved. Revealed in sequence.
  ═══════════════════════════════════════════════════════ */
  /* ── COLLAPSIBLE ALERTS / DISCLAIMERS ── */
  .collapsible-alert {
    border-radius: var(--r);
    margin: 12px 0;
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .ca-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    cursor: pointer;
    background: var(--fog);
    transition: background 0.15s;
    user-select: none;
  }
  .ca-trigger:hover { background: var(--fog2); }
  .ca-icon { font-size: 14px; flex-shrink: 0; }
  .ca-label { 
    flex: 1; 
    font-size: 12px; 
    font-weight: 700; 
    color: var(--ink); 
    letter-spacing: 0.2px;
  }
  .ca-chevron {
    font-size: 12px;
    color: var(--muted);
    transition: transform 0.2s;
  }
  .ca-trigger[aria-expanded="true"] .ca-chevron { transform: rotate(90deg); }
  .ca-body { display: none; padding: 14px 16px; background: var(--white); font-size: 13px; line-height: 1.72; color: var(--muted); }
  .ca-trigger[aria-expanded="true"] + .ca-body { display: block; }

  /* ── COLLAPSIBLE TRANSLATION SYSTEM ── */
  .translation-drawer {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r);
    overflow: hidden;
    margin: 12px 0;
  }
  .td-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    cursor: pointer;
    background: rgba(255,255,255,.04);
    transition: background 0.15s;
    user-select: none;
  }
  .td-trigger:hover { background: rgba(255,255,255,.07); }
  .td-trigger-left { display: flex; align-items: center; gap: 10px; }
  .td-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
  .td-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 900; }
  .td-sub { font-size: 11px; color: rgba(255,255,255,.35); margin-left: 4px; }
  .td-chevron { color: rgba(255,255,255,.3); font-size: 13px; transition: transform 0.2s; }
  .td-trigger[aria-expanded="true"] .td-chevron { transform: rotate(90deg); }
  .td-body { display: none; }
  .td-trigger[aria-expanded="true"] + .td-body { display: block; }

  /* ── COLLAPSIBLE SYSTEM-VS ── */
  .system-vs-drawer {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    margin: 12px 0;
  }
  .svd-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    cursor: pointer;
    background: var(--fog);
    user-select: none;
    transition: background 0.15s;
  }
  .svd-trigger:hover { background: var(--fog2); }
  .svd-label { font-size: 12px; font-weight: 700; color: var(--ink); }
  .svd-chevron { font-size: 13px; color: var(--muted); transition: transform 0.2s; }
  .svd-trigger[aria-expanded="true"] .svd-chevron { transform: rotate(90deg); }
  .svd-body { display: none; }
  .svd-trigger[aria-expanded="true"] + .svd-body { display: block; padding: 4px; }

  /* ── LESSON READING PROGRESS BAR ── */
  .lesson-read-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 3px;
    background: var(--fog2);
    margin: -6px -36px 18px;
    border-radius: 0;
  }
  .lesson-read-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold2));
    transition: width 0.4s ease;
    width: 0%;
    box-shadow: 0 0 8px rgba(196,154,46,.5);
  }

  /* ── BEATS COUNTER EYEBROW ── */
  .lesson-beats-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }
  .lbn-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-right: 4px;
  }
  .lbn-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fog2);
    border: 1.5px solid var(--border);
    transition: all 0.3s;
    flex-shrink: 0;
  }
  .lbn-dot.done { background: var(--gold); border-color: var(--gold); }
  .lbn-dot.active { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,154,46,.2); }

  /* ── SIDEBAR DEPTH TOGGLE ── */
  .sidebar-depth-toggle {
    padding: 8px 20px;
    border-bottom: 1px solid var(--sidebar-border);
  }
  .sdt-btn {
    width: 100%;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
    padding: 8px 12px;
    color: rgba(255,255,255,.38);
    font-size: 10px;
    font-family: inherit;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.15s;
  }
  .sdt-btn:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.65); }
  .sidebar-deep-content { display: none; }
  .sidebar-deep-content.show { display: block; }


  /* ── REFLECT CARD (replaces former audio-pause popup) ──
     Static reflective prompt between the lesson hero/system-strip and
     the Book Anchor. Gold left rule, fog-pale background, italic serif
     heading. Calmer than a card, more present than plain prose. */
  .reflect-card {
    background: var(--gold-pale);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--r) var(--r) 0;
    padding: 22px 26px;
    margin: 28px 0;
  }
  .reflect-eyebrow {
    font-size: 10px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 700;
    margin-bottom: 10px;
  }
  .reflect-heading {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 19px;
    font-weight: 400;
    color: var(--ink);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 10px;
  }
  .reflect-body {
    font-size: 14px;
    line-height: 1.75;
    color: #3b3327;
    margin: 0;
  }
  .reflect-body em { color: var(--gold-deep); font-style: italic; }


/* ══════════════════════════════════════════════════════════════════════════
   Block 2 — v6 final overrides (contrast rhythm refinement)
   (extracted from inline <style> at original lines 1535-1950)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── v6 FINAL OVERRIDES: contrast rhythm ── */

/* Body: white main area, fog as background */
body { background: #f2f0ec; }
.main { background: #f2f0ec; padding: 44px 52px; max-width: 900px; }

/* Tab bar position */
.tab-bar { margin-bottom: 40px; }

/* Hero: typography-first */
.hero { 
  background: none; border: none; border-radius: 0;
  padding: 0 0 44px; margin-bottom: 36px;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.hero::after, .hero::before { display: none; }
.hero-inner { max-width: 660px; }
.hero h1, .hero h2 { font-size: clamp(36px, 4.5vw, 58px); letter-spacing: -1.5px; line-height: 1.04; margin-bottom: 18px; }
.lead { font-size: 16.5px; line-height: 1.85; color: var(--muted); max-width: 580px; }

/* Actions: minimal */
.actions { margin-top: 26px; gap: 10px; }
.btn { border-radius: 7px; padding: 10px 18px; font-size: 11px; letter-spacing: .5px; box-shadow: none; }
.btn:hover { transform: none; box-shadow: none; opacity: .85; }
.btn.dark { background: var(--ink); }
.btn.gold { background: var(--gold); color: #1a0f00; }
.btn.light { background: none; border-color: var(--border); color: var(--muted); }

/* System strip: data row, not cards */
.system-strip {
  display: flex; gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 13px 0; margin-bottom: 36px;
}
.sys-card {
  background: none; border: none; border-right: 1px solid var(--border);
  border-radius: 0; padding: 0 22px; flex: 1; transition: none;
}
.sys-card:first-child { padding-left: 0; }
.sys-card:last-child { border-right: none; }
.sys-card:hover { transform: none; border-color: var(--border); }
.sys-card small { font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; opacity: .6; display: block; }
.sys-card strong { font-size: 12px; font-family: "DM Sans", sans-serif; color: var(--ink); font-weight: 600; }

/* Cards: white panels on fog, no shadow */
.card { 
  background: #fff; border: 1px solid #e8e4dd; border-radius: 10px;
  padding: 32px; margin-bottom: 2px; box-shadow: none;
}
.card h2 { font-size: 26px; margin-bottom: 14px; line-height: 1.15; }
.card h3 { font-size: 18px; margin: 26px 0 10px; font-weight: 400; }
.card p { font-size: 14.5px; line-height: 1.78; color: #3a3532; margin-bottom: 12px; }

/* Consecutive cards: fused document */

/* Step list: clean numbered prose */
.step-list { gap: 0; margin: 18px 0; }
.step-item {
  background: none; border: none; border-radius: 0;
  border-bottom: 1px solid #ede9e3;
  padding: 15px 0; grid-template-columns: 28px 1fr; gap: 16px;
}
.step-item:last-child { border-bottom: none; }
.step-num { 
  background: none; border: none; color: var(--muted); 
  font-size: 12px; font-weight: 700; width: 24px; height: 24px;
  font-family: "DM Serif Display", serif; opacity: .5;
}
.step-item strong { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.step-item span { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.step-item .tr { font-size: 9.5px; letter-spacing: 1.8px; color: var(--muted); opacity: .55; margin-bottom: 3px; }

/* Quote: left-rule only */
.quote { 
  border-left: 2px solid #d8d3cb; background: none;
  padding: 4px 0 4px 20px; border-radius: 0;
  font-size: 18px; line-height: 1.65; margin: 22px 0; color: var(--ink);
}
.quote-attr { font-size: 10px; color: var(--muted); opacity: .6; letter-spacing: 1.8px; margin-top: 8px; }

/* Truth/warn: left bar, no bg */
.truth-box { 
  background: none; border: none; border-left: 2px solid #6fcf97;
  padding: 2px 0 2px 14px; margin: 14px 0;
  color: #1a5c3a; font-size: 13.5px; font-weight: 600; border-radius: 0;
}
.truth-box span:first-child { display: none; }
.warn-box {
  background: none; border: none; border-left: 2px solid #d8d3cb;
  padding: 2px 0 2px 14px; margin: 14px 0;
  color: var(--muted); font-size: 13.5px; border-radius: 0;
}
.warn-box strong { color: var(--ink); }
.danger-box {
  background: none; border: none; border-left: 2px solid #e0b4b4;
  padding: 2px 0 2px 14px; margin: 14px 0;
  color: var(--muted); font-size: 13.5px; border-radius: 0;
}
.ink-box { background: #0d0b08; border-radius: 8px; padding: 18px 22px; margin: 18px 0; }
.ink-box strong { color: rgba(255,255,255,.9); }
.ink-box p { color: rgba(255,255,255,.55); font-size: 13.5px; margin-top: 4px; }

/* Pill: whisper */
.pill { 
  display: block; background: none; border: none; padding: 0;
  font-size: 9.5px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; opacity: .5;
}

/* Section labels: invisible guides */
.section-label {
  display: block; background: none; border: none; padding: 0;
  font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; opacity: .5; font-weight: 700;
}

/* Pattern interrupt: left-rule prose
   NOTE: first-pass design (line ~552) was a dark gradient card with
   white text + gold accents. Second-pass redesigns to plain left-rule
   prose on light background. The text-color resets below are REQUIRED —
   without them, .pattern-interrupt p inherits its first-pass white text
   color (rgba(255,255,255,.78)) and is invisible on fog. */
.pattern-interrupt {
  border: none; border-left: 2px solid #e8e4dd;
  background: none; border-radius: 0; padding: 0 0 0 20px; margin: 32px 0;
}
.pattern-interrupt p { color: #3b3327; font-size: 14.5px; line-height: 1.78; margin-bottom: 12px; }
.pattern-interrupt p:last-of-type { margin-bottom: 0; }
.pattern-interrupt em { color: var(--gold-deep); font-style: italic; font-weight: 600; }
.pi-eyebrow { font-size: 9px; letter-spacing: 2px; color: var(--muted); opacity: .5; margin-bottom: 8px; font-weight: 700; text-transform: uppercase; }
.pattern-interrupt h3 { font-size: 16px; margin-bottom: 12px; color: var(--ink); }
.pi-behaviors { background: none; border: none; padding: 0; }
.pi-behaviors ul { list-style: none; }
.pi-behaviors ul li { padding: 6px 0; border-bottom: 1px solid #ede9e3; font-size: 13.5px; color: var(--muted); display: block; }
.pi-behaviors ul li::before { display: none; }
.pi-behaviors ul li:last-child { border-bottom: none; }
.pi-why { 
  background: none; border: none; border-radius: 0; padding: 14px 0 0;
  color: var(--ink); font-size: 15px; font-family: "DM Serif Display", serif; font-weight: 400;
}

/* System VS: minimal two-col */
.system-vs { 
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 20px 0; margin: 20px 0; background: none; border-radius: 0; box-shadow: none;
}
.sv-col { padding: 0 24px; }
.sv-col:first-child { padding-left: 0; border-right: 1px solid var(--border); }
.sv-col:last-child { border-left: none; }
.sv-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); opacity: .55; margin-bottom: 8px; font-weight: 700; }
.sv-col h4 { font-family: "DM Serif Display", serif; font-size: 17px; margin-bottom: 10px; font-weight: 400; color: var(--ink); }
.sv-col ul { list-style: none; }
.sv-col ul li { font-size: 13px; color: var(--muted); padding: 4px 0; }
.sv-col.wants h4 { color: var(--muted); }
.sv-col.building h4 { color: var(--ink); }

/* Identity reset: centered type, no bg */
.identity-reset {
  background: none; border: none; border-top: 1px solid var(--border);
  border-radius: 0; padding: 44px 0; margin-top: 44px; text-align: center;
}
.ir-orb { display: none; }
.identity-reset h2 { font-size: 26px; margin-bottom: 10px; color: var(--ink); }
.identity-reset > p { color: var(--muted); font-size: 15px; }
.reset-lines { max-width: 460px; margin: 16px auto 0; gap: 0; }
.reset-line { 
  background: none; border: none; border-radius: 0;
  padding: 8px 0; font-weight: 400; color: var(--muted); 
  font-size: 15px; font-family: "DM Serif Display", serif; font-style: italic;
  border-bottom: 1px solid #ede9e3;
}
.reset-line:last-child { border-bottom: none; }
.reset-line:hover { color: var(--ink); transform: none; background: none; border-color: #ede9e3; }

/* Next lesson: subtle */
.next-lesson-card {
  background: none; color: var(--ink); border: 1px solid var(--border);
  border-radius: 8px; padding: 20px 24px; margin-top: 44px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; cursor: pointer; transition: border-color .15s;
}
.next-lesson-card:hover { background: none; border-color: var(--border2); transform: none; box-shadow: none; }
.nl-eyebrow { color: var(--muted); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; opacity: .55; }
.nl-title { font-family: "DM Serif Display", serif; font-size: 18px; color: var(--ink); font-weight: 400; }

/* Milestone: earned left-accent */
.milestone { 
  background: none; border: none; border-top: 1px solid var(--border);
  border-radius: 0; padding: 28px 0; margin: 28px 0; text-align: left;
}
.milestone-glow { display: none; }
.milestone-badge { 
  background: none; border: none; padding: 0; margin-bottom: 6px;
  font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); opacity: .55; font-weight: 700; display: block;
}
.milestone h3 { font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 6px; }
.milestone p { color: var(--muted); font-size: 14px; }
.milestone.show { animation: fadeUp .4s ease both; }

/* Portal panel: the one dark moment per lesson */
.portal-panel { background: #0d0b08; border-radius: 10px; padding: 28px 32px; margin-top: 44px; }
.portal-panel h2 { font-size: 24px; color: #fff; margin-bottom: 8px; }
.portal-panel > p { color: rgba(255,255,255,.5); font-size: 14px; }
.portal-step { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 7px; padding: 13px 16px; }
.portal-step strong { color: rgba(255,255,255,.85); font-size: 13.5px; }
.portal-step p { color: rgba(255,255,255,.4); font-size: 12.5px; }
.ps-num { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); font-size: 11px; width: 24px; height: 24px; }

/* Portal CTA: intentional gold */
.portal-cta { background: var(--gold); color: #1a0f00; margin: 12px; border-radius: 8px; font-size: 11px; padding: 12px 16px; box-shadow: none; }
.portal-cta:hover { opacity: .88; transform: none; box-shadow: none; }

/* Worksheet: quiet form */
.worksheet { background: #faf9f7; border: 1px solid #e8e4dd; border-radius: 8px; padding: 20px; }
.worksheet-title h3 { font-size: 16px; }
.save-badge { background: none; border: 1px solid #e8e4dd; color: var(--muted); font-size: 9px; padding: 3px 8px; }
.input-field { height: 38px; font-size: 13.5px; background: #fff; border-color: #e8e4dd; }
.textarea-field { font-size: 13.5px; background: #fff; border-color: #e8e4dd; }
.check-option { font-size: 12.5px; border-color: #e8e4dd; }
.check-option.selected { border-color: var(--gold); background: #faf4e4; }
.save-reflection-btn { border-color: #e8e4dd; font-size: 12.5px; }

/* Disclaimer: very quiet */
.disclaimer { 
  background: none; border: none; border-top: 1px solid #e8e4dd;
  border-radius: 0; padding: 18px 0 0; margin-top: 36px;
  font-size: 11px; color: rgba(107,101,96,.6); line-height: 1.75;
}
.disclaimer strong { color: rgba(107,101,96,.75); font-size: 11px; }
.disclaimer-v2 { 
  background: none; border: none; border-top: 1px solid #e8e4dd;
  padding: 18px 0 0; margin-top: 36px; font-size: 11px; color: rgba(107,101,96,.6);
}

/* Beat gate: minimal prompt */
.bg-icon { background: none; border: none; font-size: 16px; width: 24px; height: 24px; }
.bg-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); opacity: .55; }
.bg-title { font-family: "DM Serif Display", serif; font-size: 14px; font-style: italic; color: var(--ink); font-weight: 400; }
.bg-arrow { color: var(--muted); font-size: 16px; }

/* Lesson beats nav: dots only */
.lesson-beats-nav {
  background: none; border: none; border-bottom: 1px solid #e8e4dd;
  border-radius: 0; padding: 0 0 10px; box-shadow: none; margin-bottom: 32px; gap: 5px;
}
.lbn-label { font-size: 9px; letter-spacing: 2px; color: var(--muted); opacity: .45; margin-right: 6px; }
.lbn-dot { width: 5px; height: 5px; background: none; border: 1px solid #d8d3cb; }
.lbn-dot.done { background: #d8d3cb; border-color: #d8d3cb; }
.lbn-dot.active { background: var(--ink); border-color: var(--ink); box-shadow: none; }

/* Read bar */
.lesson-read-bar { height: 2px; background: #e8e4dd; margin: 0 0 0; }
.lesson-read-fill { background: var(--ink); box-shadow: none; }

/* Sidebar: quiet navigator */
.sidebar { border-right: 1px solid rgba(255,255,255,.04); }
.sidebar::before { display: none; }
.sidebar-brand { background: none; border-bottom: 1px solid rgba(255,255,255,.04); padding: 30px 20px 16px; }
.sidebar-brand::after { display: none; }
.mark { 
  width: 34px; height: 34px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.08); background: none;
  color: rgba(255,255,255,.6); font-size: 11px;
}
.mark::after { display: none; }
.mark:hover { animation: none; box-shadow: none; background: rgba(255,255,255,.05); }
.brand-name { font-size: 15px; line-height: 1.35; }
.brand-sub { opacity: .4; }
.progress-section { padding: 14px 20px; }
.progress-header strong { color: rgba(255,255,255,.5); font-weight: 600; }
.prog-fill { box-shadow: none; }
.lstep { color: rgba(255,255,255,.35); }
.lstep:hover { transform: none; }
.lstep.active { 
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.8); 
  border: none; border-left: 2px solid rgba(255,255,255,.2);
}
.lstep.active .lnum { background: none; border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
.lnum { border-color: rgba(255,255,255,.1); }
.dot-pulse { animation: none; box-shadow: none; }
.pattern-section { display: none; } /* Remove — too much sidebar content */
.reset-section { display: none; } /* Remove — keep sidebar as navigator only */
.observer-panel { display: none; }
.victory-mini { display: none; }
.timeline-mini { display: none; }
.status-panel { display: none; }
.sidebar-depth-toggle { display: none; }
.sidebar-deep-content { display: none; }
.map-section { padding: 12px 20px 16px; }
.map-label { opacity: .35; font-size: 8.5px; }
.track-node { color: rgba(255,255,255,.22); font-size: 10.5px; }
.track-node.current { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.65); }
.track-node.current .track-node-dot { animation: none; box-shadow: none; }
.track-connector { background: rgba(255,255,255,.04); }

/* Audio card: THE premium moment — keep it */
.audio-card { border-radius: 10px; }
.audio-card::before { display: none; }
.audio-play-btn { width: 44px; height: 44px; font-size: 15px; }
.audio-play-btn:hover { transform: none; }
.wave-bar { background: rgba(255,255,255,.18); }

/* Sim card: quiet */
.sim-card { background: #faf9f7; border-color: #e8e4dd; box-shadow: none; }

/* Lesson overview */
.lesson-overview-card:hover { border-color: var(--border2); box-shadow: none; transform: none; }
.badge { background: none; border: none; color: var(--muted); font-size: 9px; padding: 0; opacity: .55; }
.status-pill { background: none; border: 1px solid #e8e4dd; color: var(--muted); font-size: 9px; }

/* Metrics: flat text row */
.metrics { 
  display: flex; gap: 0; 
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 14px 0; margin-bottom: 36px; background: none;
}
.metric { background: none; border: none; border-right: 1px solid var(--border); padding: 0 22px; flex: 1; box-shadow: none; }
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: none; }
.metric:hover { transform: none; }
.metric small { font-size: 9px; letter-spacing: 1.8px; color: var(--muted); opacity: .55; display: block; margin-bottom: 3px; }
.metric strong { font-size: 13px; font-family: "DM Sans", sans-serif; font-weight: 600; color: var(--ink); }

/* Content grid spacing */
.side-card { background: none; border: none; box-shadow: none; padding: 0; }
.score-mini { background: none; border: none; padding: 0; text-align: left; margin-bottom: 20px; }
.score-number { font-size: 32px; color: var(--muted); }
.mini-list li { font-size: 12.5px; border-bottom-color: #e8e4dd; padding: 8px 0; }

/* SDB: data boundary */
.sdb { background: none; border: none; border-left: 2px solid #e8e4dd; border-radius: 0; padding: 2px 0 2px 14px; margin-bottom: 16px; }
.sdb-text { font-size: 11.5px; color: rgba(107,101,96,.65); }
.sdb-text strong { color: rgba(107,101,96,.75); display: block; margin-bottom: 2px; }

/* Audio pause prompt */
.audio-pause-prompt { background: none; border: none; border-left: 2px solid #e8e4dd; border-radius: 0; padding: 0 0 0 20px; margin: 0 0 22px; }
.audio-pause-prompt h4 { font-size: 17px; }
.audio-pause-prompt p { font-size: 13.5px; }
.app-eyebrow { font-size: 9px; color: var(--muted); opacity: .6; }
.app-eyebrow::before { content: ""; }

/* Track accordion */
.track-accordion-btn { background: none; border: none; border-top: 1px solid var(--border); border-radius: 0; padding: 14px 0; color: var(--muted); font-size: 13px; }
.track-accordion-btn:hover { background: none; color: var(--ink); }
.track-accordion-body { border: none; padding: 8px 0; }

/* Collapsible alert */
.collapsible-alert { border: none; border-left: 2px solid #e8e4dd; border-radius: 0; }
.ca-trigger { background: none; padding: 8px 0 8px 14px; }
.ca-trigger:hover { background: none; opacity: .75; }
.ca-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.ca-body { padding: 8px 0 8px 14px; font-size: 12.5px; color: rgba(107,101,96,.7); }

/* Main animation: very subtle */
.main { animation: none; }
.lesson-panel.active { animation: fadeIn .3s ease; }

/* Scope pills */
.scope-pill { background: none; border-color: #e8e4dd; }
.scope-pill.is { background: none; }
.scope-pill.is-not { background: none; }

/* Victory card */
.victory-card { background: none; border: none; border-top: 1px solid var(--border); border-radius: 0; padding: 24px 0; }
.victory-item { border-color: #ede9e3; }
.victory-check { border-color: #e8e4dd; }

/* Timeline viz */
.timeline-viz { box-shadow: none; border-color: #e8e4dd; }
.tl-dot { border-color: #e8e4dd; }
.tl-node.current .tl-dot { animation: none; }

/* System VS drawer */
.system-vs-drawer { border-color: #e8e4dd; border-radius: 8px; }
.svd-trigger { background: none; padding: 12px 0; }
.svd-trigger:hover { background: none; }
.svd-label { color: var(--muted); font-size: 12px; font-weight: 600; }

/* Translation drawer */
.translation-drawer { border-color: rgba(255,255,255,.07); border-radius: 8px; }

/* Compare grid */
.compare-grid { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 0; gap: 24px; margin: 14px 0; }
.compare-card { background: none; border: none; padding: 0; }
.cc-label { background: none; color: var(--muted); border: none; padding: 0; font-size: 9px; opacity: .55; }

/* Lesson overview grid */
.lesson-overview-grid { gap: 8px; }
.lesson-overview-card { padding: 18px 20px; box-shadow: none; border-color: #e8e4dd; }
.lesson-overview-card h4 { font-size: 15px; margin: 4px 0 2px; }
.loc-cta { color: var(--muted); font-size: 11px; opacity: .65; }
.loc-top { margin-bottom: 4px; }

/* Pattern card in sidebar */
.pattern-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; }
.pattern-name { color: rgba(255,255,255,.65); font-size: 15px; }

/* Reset card */
.reset-card { background: none; border: none; border-radius: 0; padding: 8px 0; }
.reset-card:hover { background: none; }
.reset-quote { font-size: 12px; color: rgba(255,255,255,.6); }
.reset-meta { opacity: .4; font-size: 9px; }
.reset-arrow { color: rgba(255,255,255,.18); }

/* Intro prose */
.intro-prose { background: none !important; border: none !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; box-shadow: none !important; }

/* Content rhythm */
.card + .card { margin-top: 2px; }


/* ══════════════════════════════════════════════════════════════════════════
   Block 3 — Your Progress panel (visual language v6)
   (extracted from inline <style> at original lines 1951-2275)
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   YOUR PROGRESS PANEL — visual language v6
   Typography-first. One emphasis per section.
   No borders stacked on borders.
   No gold on every element.
═══════════════════════════════════════════════════════ */

/* ── Header ── */
.yp-header {
  padding: 0 0 44px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  max-width: 600px;
}
.yp-eyebrow {
  font-size: 9.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .5;
  font-weight: 600;
  margin-bottom: 14px;
}
.yp-title {
  font-family: "DM Serif Display", serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -1px;
  color: var(--ink);
  margin-bottom: 16px;
}
.yp-sub {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 520px;
}

/* ── Sections ── */
.yp-section {
  padding: 44px 0;
  border-bottom: 1px solid var(--border);
}
.yp-section:last-child { border-bottom: none; }
.yp-section-label {
  font-size: 9.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .5;
  font-weight: 700;
  margin-bottom: 22px;
}

/* ── Strategic State ── */
.yp-state-block {
  margin-bottom: 36px;
  max-width: 560px;
}
.yp-state-name {
  font-family: "DM Serif Display", serif;
  font-size: 34px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.5px;
  margin-bottom: 10px;
  line-height: 1.1;
}
.yp-state-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
}

/* ── The Arc ── */
.yp-arc {
  margin-top: 4px;
}
.yp-arc-track {
  position: relative;
  padding: 24px 0 8px;
}
.yp-arc-line {
  position: absolute;
  top: 36px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--border);
}
.yp-arc-stages {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
  z-index: 1;
}
.yp-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.yp-stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border2);
  border: 2px solid var(--border2);
  transition: background .3s, border-color .3s;
  flex-shrink: 0;
}
.yp-stage-label {
  font-size: 10px;
  color: var(--muted);
  opacity: .45;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .3px;
  transition: opacity .3s, color .3s;
}

/* States: past / current / future */
.yp-stage.past .yp-stage-dot {
  background: var(--border2);
  border-color: var(--border2);
}
.yp-stage.past .yp-stage-label { opacity: .55; }

.yp-stage.current .yp-stage-dot {
  background: var(--ink);
  border-color: var(--ink);
  width: 12px;
  height: 12px;
}
.yp-stage.current .yp-stage-label {
  color: var(--ink);
  opacity: 1;
  font-weight: 700;
}

.yp-stage.future .yp-stage-dot {
  background: none;
  border-color: var(--border);
}
.yp-stage.future .yp-stage-label { opacity: .3; }

/* Completed segment line */
.yp-arc-progress {
  position: absolute;
  top: 36px;
  left: 10px;
  height: 1px;
  background: var(--ink);
  transition: width .6s ease;
  z-index: 0;
}

/* ── Milestones ── */
.yp-milestones {
  display: grid;
  gap: 0;
}
.yp-milestone-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  transition: opacity .2s;
}
.yp-milestone-item:last-child { border-bottom: none; }
.yp-milestone-check {
  font-size: 11px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.7;
}
.yp-milestone-text {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
}
.yp-milestone-when {
  font-size: 10px;
  color: var(--muted);
  opacity: .5;
  white-space: nowrap;
  letter-spacing: .5px;
}

/* Locked milestones */
.yp-milestone-item[style*="opacity"] .yp-milestone-text {
  color: var(--muted);
}
.yp-milestone-item[style*="opacity"] .yp-milestone-check {
  color: var(--border2);
}

/* ── Pattern Shift ── */
.yp-pattern-shift {
  max-width: 520px;
}
.yp-ps-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
}
.yp-ps-label {
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .5;
  font-weight: 700;
  padding-top: 2px;
}
.yp-ps-text {
  font-family: "DM Serif Display", serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  font-style: italic;
  color: var(--muted);
}
.yp-ps-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}
.yp-ps-row.yp-ps-now .yp-ps-text {
  color: var(--ink);
  font-style: normal;
  font-weight: 400;
}
.yp-ps-row.yp-ps-now .yp-ps-label {
  opacity: .7;
}

/* ── Moments ── */
.yp-moments {
  display: grid;
  gap: 0;
  max-width: 600px;
}
.yp-moment-row {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.yp-moment-row:last-child { border-bottom: none; }
.yp-moment-row.locked {
  opacity: .28;
}
.yp-moment-when {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .5px;
  font-weight: 600;
  opacity: .6;
  padding-top: 2px;
}
.yp-moment-text {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.65;
}
.yp-moment-row.locked .yp-moment-text { color: var(--muted); }

/* ── What you're measuring ── */
.yp-measuring-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 540px;
  margin-bottom: 32px;
}
.yp-measuring-col {
  padding: 0 32px 0 0;
}
.yp-measuring-col:last-child { padding-right: 0; border-left: 1px solid var(--border); padding-left: 32px; }
.yp-col-head {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .55;
  font-weight: 700;
  margin-bottom: 14px;
}
.yp-col-item {
  font-size: 14px;
  color: var(--muted);
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.yp-col-item:last-child { border-bottom: none; }
.yp-col-you .yp-col-item { color: var(--ink); }
.yp-col-you .yp-col-head { opacity: .8; }
.yp-measuring-conclusion {
  font-family: "DM Serif Display", serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  max-width: 440px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .yp-arc-stages { grid-template-columns: repeat(4, 1fr); gap: 0 4px; }
  .yp-stage:nth-child(n+5) { margin-top: 20px; }
  .yp-measuring-grid { grid-template-columns: 1fr; gap: 24px; }
  .yp-measuring-col:last-child { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Block 4 — Silent sections and supporting blocks
   (extracted from inline <style> at original lines 2276-2498)
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   SILENT SECTIONS — transitional breathing moments
   
   No card. No border. No label. No gold.
   Just the sentence. Just the space.
   
   This is what creates emotional authority.
═══════════════════════════════════════════════════════ */

.silent-moment {
  padding: 52px 0;
  text-align: center;
  position: relative;
}

/* Optional: hairline above and below to mark the space */
.silent-moment::before,
.silent-moment::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--border);
  margin: 0 auto;
  width: 40px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.silent-moment::before { top: 0; }
.silent-moment::after { bottom: 0; }

.silent-text {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  max-width: 480px;
  margin: 0 auto;
  font-style: italic;
  letter-spacing: -.2px;
}

/* At smaller sizes, reduce slightly */
@media (max-width: 700px) {
  .silent-moment { padding: 40px 0; }
  .silent-text { font-size: 18px; }
}

/* In the overview/progress panel: full padding */
#panel-overview .silent-moment,
#panel-progress .silent-moment {
  padding: 56px 0;
}

  /* Persistent footer hidden — disclaimer lives inside each lesson panel */
  .restoration-footer { display: none; }

  /* ── DEFENSIVE FALLBACK: SCREEN VISIBILITY ──────────────────────────────
     If /auth-gate.css fails to load (file missing, wrong MIME type, cache
     issue, build-time path resolution problem, etc.), every <div class="screen">
     would otherwise render as a normal block — stacking the login, forgot,
     MFA enrollment, MFA challenge, legal wizard, and paywall screens on top
     of each other in document order, with no styling and no hiding. That's
     the bug we just observed in production.

     This minimal rule is the floor — keeps inactive screens hidden no
     matter what. /auth-gate.css has the same rule plus full screen
     styling (auth-box card, button polish, inputs); this is purely the
     visibility safety net + minimal card styling for login/forgot screens
     (the MFA/legal/paywall screens have inline styles and don't need this).

     Each .screen also needs `display: flex` when .active because the auth
     screens use flexbox centering. Don't change to display: block.

     Classes below mirror what auth-gate.css defines AND what the login/
     forgot screen markup actually uses (.auth-box, .auth-logo, .auth-mark,
     .auth-label, .auth-input, .auth-btn, .auth-footer, .auth-link,
     .auth-error, .auth-success, .auth-title, .auth-sub). Adding a new
     class to the login HTML? Mirror it here too or you'll get unstyled
     fallback rendering when auth-gate.css fails to load.
  ─────────────────────────────────────────────────────────────────────── */
  .screen {
    display: none;
    min-height: 100vh;
    width: 100%;
    background: var(--fog);
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
  }
  .screen.active { display: flex; }

  .auth-box {
    background: var(--white);
    max-width: 420px;
    width: 100%;
    padding: 36px 32px;
    border-radius: 4px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
  }
  .auth-logo { text-align: center; margin-bottom: 24px; }
  .auth-mark {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-family: 'DM Serif Display', serif;
    font-size: 16px;
    color: var(--gold);
  }
  .auth-logo h1 {
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 4px;
    line-height: 1.3;
  }
  .auth-logo p {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .auth-title {
    font-family: 'DM Serif Display', serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .auth-sub {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 16px;
  }
  .auth-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 14px 0 6px;
    font-weight: 600;
  }
  .auth-input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: var(--white);
    outline: none;
    transition: border-color var(--dur);
  }
  .auth-input:focus { border-color: var(--gold); }
  .auth-btn {
    width: 100%;
    padding: 13px;
    background: var(--ink);
    color: var(--white);
    border: none;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    margin-top: 18px;
    transition: background var(--dur);
  }
  .auth-btn:hover { background: var(--ink2); }
  .auth-footer {
    text-align: center;
    margin-top: 16px;
    font-size: 12px;
    color: var(--muted);
  }
  .auth-link {
    font-size: 12px;
    color: var(--gold);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
  }
  .auth-link:hover { text-decoration: underline; }
  .auth-error {
    display: none;
    background: var(--red-bg);
    border: 1px solid #e8b4b4;
    color: var(--red);
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 3px;
    margin-top: 14px;
  }
  .auth-error:not(:empty) { display: block; }
  .auth-success {
    display: none;
    background: var(--success-bg);
    border: 1px solid #b8d4c0;
    color: var(--success);
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 3px;
    margin-top: 14px;
  }
  .auth-success:not(:empty) { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   Block 5 — TTS overrides (id="restoration-tts-overrides")
   (extracted from inline <style> at original lines 2519-2576)
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
     TTS PILL — restoration-scoped override
     ──────────────────────────────────────────────────────────────────────
     /foundations-tts.css renders .tts-controls as a large bottom-centered
     pill that covers the active content (especially the .sim-card's
     transcript and answer buttons on L1 and L3).

     This override:
       1. Default — bottom-right, ~80% scale, auto-fade after 4s idle
          (mouse-over or hovering restores full opacity)
       2. Docked — when a .sim-card is in viewport, snap to bottom of the
          card so it sits with the drill instead of floating over it
       3. Restoration-only — does NOT touch /foundations-tts.css; the
          shared file is intact and Foundations/Life keep their current
          bottom-center behavior

     The .docked state is toggled by JS at the bottom of this file using
     IntersectionObserver on .sim-card elements.

     A11Y co-existence (the reason for these specific bottom values):
       /foundations-a11y.css renders the "Aa" trigger at
       right: 20px; bottom: 20px (52px tall), so its top edge sits at
       bottom: 72px. To clear it cleanly we sit the TTS pill at
       bottom: 80px (72px + 8px gap), which matches the canonical
       layout Foundations and Life use. The shared /foundations-tts.css
       already uses bottom: 80px — we only override here to switch from
       horizontal-center to right-aligned in the default state.

       On narrow viewports (≤480px) the A11Y trigger shrinks to 46px
       at bottom: 16px (top edge at 62px), so the mobile-docked
       fallback uses bottom: 72px (62px + 10px gap). The non-docked
       default at bottom: 80px is already clear at any viewport width.
══════════════════════════════════════════════════════════════════════ */

  /* Default — bottom-right, shrunk, auto-fade.
     bottom: 80px clears the /foundations-a11y.css "Aa" trigger
     (at bottom: 20px, 52px tall). See big comment above for math. */
  .tts-controls {
    /* override the shared bottom: 80px / left: 50% / transform centering;
       we keep the 80px y-coord but switch x to right-aligned */
    bottom: 80px !important;
    left: auto !important;
    right: 24px !important;
    transform: none !important;
    transform-origin: bottom right;
    /* shrink */
    padding: 7px 10px !important;
    gap: 6px !important;
    /* fade behavior */
    opacity: 0.45;
    transition: opacity 0.25s ease, bottom 0.3s ease, right 0.3s ease, left 0.3s ease, transform 0.3s ease;
  }
  .tts-controls:hover,
  .tts-controls:focus-within,
  .tts-controls.tts-awake {
    opacity: 1;
  }
  /* Shrink inner controls */
  .tts-controls .tts-ctrl-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  .tts-controls .tts-ctrl-speed,
  .tts-controls .tts-ctrl-voice {
    font-size: 10.5px !important;
    padding: 4px 8px !important;
    padding-right: 20px !important;
  }
  .tts-controls .tts-ctrl-status {
    font-size: 10px !important;
    margin-left: 2px !important;
    padding-right: 4px !important;
  }

  /* Docked — when a sim card is in view, snap to its bottom-center.
     Fallback values match the new default (bottom: 80px) so that during
     the brief moment between class toggle and JS positioning the pill
     doesn't visibly snap into the A11Y "Aa" trigger. JS overrides via
     --tts-dock-bottom / --tts-dock-left in restoration-engine.js. */
  .tts-controls.tts-docked {
    bottom: var(--tts-dock-bottom, 80px) !important;
    left: var(--tts-dock-left, 50%) !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    opacity: 1;
  }

  /* On narrow viewports, stay bottom-right (no dock — sim card fills width).
     bottom: 72px clears the mobile A11Y trigger (16px from bottom, 46px
     tall, top edge at 62px) with a 10px gap. */
  @media (max-width: 720px) {
    .tts-controls.tts-docked {
      bottom: 72px !important;
      left: auto !important;
      right: 16px !important;
      transform: none !important;
    }
  }

/* ══════════════════════════════════════════════════════════════════════════
   Block 6 — Lesson-rooms system (id="restoration-lesson-rooms")
   (extracted from inline <style> at original lines 2578-2684)
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   SHARED LESSON-ROOM SYSTEM
   ──────────────────────────────────────────────────────────────────────
   Pill-box navigation pattern, generalized across all 6 lessons.

   Each .lesson-panel[data-lesson] contains multiple .lroom sections.
   Only one .lroom is .active at a time. The "home" room shows the
   compact hero + system-strip + pill grid. Clicking a [data-open]
   pill activates the named room; clicking [data-lroom-back] returns
   to home. State held in sessionStorage per-lesson.

   Pattern proven on L1, then generalized for L2-L6.
   Resist the urge to add complexity (state machines, escape hatches,
   progress chips, "view all" toggles). The win is: pill grid →
   one section visible → back. That is the whole pattern.
   ══════════════════════════════════════════════════════════════════════ */

.lesson-panel[data-lesson] .lroom { display: none; }
.lesson-panel[data-lesson] .lroom.active { display: block; }

/* Compact hero shown on home rooms (vs the full hero of the original
   non-room layout). Smaller, denser, no action buttons. */
.lesson-panel[data-lesson] .lhero-compact { padding: 22px 28px; margin-bottom: 16px; }
.lesson-panel[data-lesson] .lhero-compact h2 { font-size: clamp(28px, 3.5vw, 36px); margin-bottom: 8px; line-height: 1.1; }
.lesson-panel[data-lesson] .lhero-compact .eyebrow { font-size: 10px; margin-bottom: 6px; }
.lesson-panel[data-lesson] .lhero-compact .lead { font-size: 14px; margin-bottom: 0; color: var(--muted); }
.lesson-panel[data-lesson] .lhero-compact .actions { display: none; }

/* Pill grid */
.lesson-panel[data-lesson] .lpills-block { margin-bottom: 26px; }
.lesson-panel[data-lesson] .lpills-group { margin-bottom: 18px; }
.lesson-panel[data-lesson] .lpills-group:last-child { margin-bottom: 0; }
.lesson-panel[data-lesson] .lpills-label {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  margin-bottom: 10px; opacity: .7;
}
.lesson-panel[data-lesson] .lpills-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lesson-panel[data-lesson] .lpill {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 999px; padding: 10px 16px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color .15s, background .15s;
  font-family: inherit; display: inline-flex; align-items: center; gap: 8px;
}
.lesson-panel[data-lesson] .lpill:hover { border-color: var(--ink); background: #fdfbf6; }
.lesson-panel[data-lesson] .lpill-num { color: var(--muted); font-weight: 500; font-size: 12px; }
.lesson-panel[data-lesson] .lpill-time { color: var(--muted); font-weight: 500; font-size: 11px; margin-left: 4px; }
.lesson-panel[data-lesson] .lpill.done { background: #fdfaf3; border-color: var(--gold); }
.lesson-panel[data-lesson] .lpill.done::before {
  content: "✓"; color: var(--gold); font-weight: 700; margin-right: 4px;
}

/* Room header — back link + breadcrumb */
.lesson-panel[data-lesson] .lroom-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid #ece7df;
}
.lesson-panel[data-lesson] .lroom-back {
  background: none; border: none; color: var(--muted);
  font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 4px 0; font-family: inherit;
  transition: color .15s;
}
.lesson-panel[data-lesson] .lroom-back:hover { color: var(--ink); }
.lesson-panel[data-lesson] .lroom-crumb {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); opacity: .7;
}

/* Room footer — back link + (optional) next room link */
.lesson-panel[data-lesson] .lroom-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 28px; padding-top: 18px;
  border-top: 1px solid #ece7df; flex-wrap: wrap;
}
.lesson-panel[data-lesson] .lroom-next {
  background: var(--ink); color: #fff; border: none;
  padding: 10px 20px; border-radius: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.lesson-panel[data-lesson] .lroom-next:hover { background: #000; }

/* CROA disclaimer in every room — quiet but visible */
.lesson-panel[data-lesson] .lroom-disclaimer {
  margin-top: 22px; padding: 14px 16px;
  background: #f5f3ef; border-radius: 6px;
  font-size: 11px; line-height: 1.6; color: var(--muted);
}
.lesson-panel[data-lesson] .lroom-disclaimer strong { color: var(--ink); }

/* Aside hides on non-home rooms — keyed off body-level state added
   by router. We use a class on the panel itself: .lesson-in-room */
.lesson-panel[data-lesson].lesson-in-room aside.side-card { display: none; }

@media (max-width: 640px) {
  .lesson-panel[data-lesson] .lhero-compact { padding: 18px 20px; }
  .lesson-panel[data-lesson] .lpills-row { gap: 6px; }
  .lesson-panel[data-lesson] .lpill { padding: 9px 13px; font-size: 12.5px; }
  .lesson-panel[data-lesson] .lroom-foot { flex-direction: column-reverse; align-items: stretch; }
  .lesson-panel[data-lesson] .lroom-next { width: 100%; }
}