/**
 * YNDJ Lesson Components — Stylesheet
 * yndj-theme/assets/css/lesson-components.css
 *
 * Styles every HTML element output by the yndj-lesson-components plugin.
 * Uses BEM-style classes with the `yndj-lc-` prefix to avoid collisions
 * with yndj-surveys (`yndj-`) classes.
 *
 * Depends on: tokens.css (must be enqueued first)
 * No colour values are hardcoded here — all via --yndj-* custom properties.
 *
 * Table of Contents:
 *  1.  Lesson wrapper
 *  2.  Lesson header
 *  3.  Audio player
 *  4.  Intro block
 *  5.  Section header
 *  6.  Fundamentals grid
 *  7.  Fundamental card
 *  8.  Insight callout
 *  9.  STAR framework
 * 10.  Motivators split card
 * 11.  Icon list
 * 12.  Columns layout
 * 13.  Lesson closer (pull quote)
 * 14.  Next lesson button
 * 15.  Responsive
 */


/* ─────────────────────────────────────────────────────────────
   1. LESSON WRAPPER
───────────────────────────────────────────────────────────── */
.yndj-lc-lesson {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--yndj-space-2xl) var(--yndj-space-lg) var(--yndj-space-3xl);

  /* Background — cream in light mode. Dark mode override below. */
  background-color: #f7f3ec;

  /* Explicit font declarations — prevent Masteriyo's cascade from overriding */
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #1a1a2e;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Force display font on all elements that use Playfair Display.
   Masteriyo resets font-family globally so inheritance alone is not reliable. */
.yndj-lc-title,
.yndj-lc-section-title,
.yndj-lc-fund-card__answer,
.yndj-lc-audio-title,
.yndj-lc-closer__text,
.yndj-lc-stat__headline,
.yndj-lc-prose,
.yndj-lc-script,
.yndj-lc-reframe__panel,
.yndj-lc-formula-card__eq,
.yndj-lc-chain__num,
.yndj-lc-step-card__title,
.yndj-lc-story-example__title,
.yndj-lc-story-section__letter,
.yndj-lc-phrase-category__title,
.yndj-lc-quote-block__text,
.yndj-lc-quote-card__text,
.yndj-lc-hook__text {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Force body font on UI elements that must NOT use the display font */
.yndj-lc-eyebrow,
.yndj-lc-section-eyebrow,
.yndj-lc-closer__eyebrow,
.yndj-lc-audio-label,
.yndj-lc-meta-badge,
.yndj-lc-fund-card__question,
.yndj-lc-icon-list__title,
.yndj-lc-list-item,
.yndj-lc-script__label,
.yndj-lc-reframe__label,
.yndj-lc-formula-card__label,
.yndj-lc-resources__eyebrow,
.yndj-lc-resource-item__label,
.yndj-lc-next-btn,
.yndj-lc-chain__text,
.yndj-lc-stat__desc,
.yndj-lc-motivator__label,
.yndj-lc-motivator__sub {
  font-family: 'DM Sans', system-ui, sans-serif;
}


/* ─────────────────────────────────────────────────────────────
   2. LESSON HEADER  (v1.6.0 — two-column flex)
   Left col: .yndj-lc-header__info (eyebrow/title/badges).
   Right col: .yndj-lc-audio-wrap (audio panel).
   Stacks vertically below 680px.
───────────────────────────────────────────────────────────── */
.yndj-lc-header {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  margin-bottom: var(--yndj-space-xl);
}

/* Left column — takes remaining space */
.yndj-lc-header__info {
  flex: 1;
  min-width: 0;
}

.yndj-lc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--yndj-font-body);
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: var(--yndj-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.yndj-lc-eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--yndj-gold);
  border-radius: 2px;
  flex-shrink: 0;
}

.yndj-lc-title {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--yndj-navy);
  line-height: 1.25;
  margin-bottom: var(--yndj-space-md);
}

.yndj-lc-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--yndj-space-md);
}

.yndj-lc-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--yndj-muted);
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-pill);
  padding: 0.3rem 0.85rem;
  line-height: 1;
}

.yndj-lc-meta-badge svg {
  flex-shrink: 0;
  display: block;
}


/* ─────────────────────────────────────────────────────────────
   3. AUDIO PLAYER  (v1.6.0)
   Base: standalone [yndj_audio] shortcode — flex row layout.
   Context override: when inside .yndj-lc-header (rendered by
   [yndj_lesson_header audio="..."]) — becomes the right column,
   flex-direction column, fixed width.
   crm-learn.js selects '.yndj-lc-audio-wrap audio' — class kept.
───────────────────────────────────────────────────────────── */
.yndj-lc-audio-wrap {
  background: var(--yndj-navy);
  border-radius: var(--yndj-radius-lg);
  padding: var(--yndj-space-md) var(--yndj-space-lg);
  margin-bottom: var(--yndj-space-2xl);
  display: flex;
  align-items: center;
  gap: var(--yndj-space-md);
  flex-wrap: wrap;
}

/* ── Inside lesson header — right column panel ── */
.yndj-lc-header .yndj-lc-audio-wrap {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0.5rem;
  flex-shrink: 0;
  width: 280px;
  margin-bottom: 0;
  padding: 1rem 1.25rem 1.1rem;
}

.yndj-lc-audio-meta {
  flex: 1;
  min-width: 180px;
}

.yndj-lc-audio-label {
  display: block;
  font-family: var(--yndj-font-body);
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: var(--yndj-gold-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  padding-bottom: 1.5em;
}

.yndj-lc-audio-title {
  font-family: var(--yndj-font-display);
  font-size: 0.95rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.4;
}

.yndj-lc-audio-wrap audio {
  flex: 1;
  min-width: 200px;
  height: 36px;
  accent-color: var(--yndj-gold);
  border-radius: var(--yndj-radius-sm);
}

/* Inside header the audio fills the column width */
.yndj-lc-header .yndj-lc-audio-wrap audio {
  width: 100%;
  min-width: 0;
  flex: none;
}


/* ─────────────────────────────────────────────────────────────
   4. INTRO BLOCK
───────────────────────────────────────────────────────────── */
.yndj-lc-intro {
  background: var(--yndj-white);
  border-left: 5px solid var(--yndj-gold);
  border-radius: 0 var(--yndj-radius-md) var(--yndj-radius-md) 0;
  padding: var(--yndj-space-lg) 1.75rem;
  margin-bottom: var(--yndj-space-2xl);
  font-size: 1.05rem;
  color: var(--yndj-text);
  line-height: 1.75;
}

.yndj-lc-intro strong {
  color: var(--yndj-navy);
  font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────
   5. SECTION HEADER
───────────────────────────────────────────────────────────── */
.yndj-lc-section-header {
  background: var(--yndj-navy);
  border-radius: var(--yndj-radius-md);
  padding: 1.1rem var(--yndj-space-lg);
  margin-bottom: 1.75rem;
  position: relative;
  overflow: hidden;
}

.yndj-lc-section-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(to bottom, var(--yndj-gold-light), var(--yndj-gold));
}

.yndj-lc-section-eyebrow {
  display: block;
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: var(--yndj-gold-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  padding-left: 4px;
}

.yndj-lc-section-title {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  padding-left: 4px;
  margin: 0;
}

/* Optional description line below section title */
.yndj-lc-section-desc {
  font-size: var(--yndj-text-base);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  padding-left: 4px;
  margin-top: var(--yndj-space-xs);
}


/* ─────────────────────────────────────────────────────────────
   6. FUNDAMENTALS GRID
───────────────────────────────────────────────────────────── */
.yndj-lc-fund-grid {
  display: grid;
  gap: var(--yndj-space-md);
  margin-bottom: var(--yndj-space-xl);
}


/* ─────────────────────────────────────────────────────────────
   7. FUNDAMENTAL CARD
───────────────────────────────────────────────────────────── */
.yndj-lc-fund-card {
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-lg);
  padding: var(--yndj-space-lg);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--yndj-transition-base),
    box-shadow var(--yndj-transition-base);
}

.yndj-lc-fund-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--yndj-gold), var(--yndj-gold-light));
  opacity: 0;
  transition: opacity var(--yndj-transition-base);
}

.yndj-lc-fund-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--yndj-shadow-card);
}

.yndj-lc-fund-card:hover::before {
  opacity: 1;
}

/* Two-column inner layout: number badge + body */
.yndj-lc-fund-card__inner {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 var(--yndj-space-md);
  align-items: start;
}

/* Number badge */
.yndj-lc-fund-card__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--yndj-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--yndj-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--yndj-gold-light);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Question label */
.yndj-lc-fund-card__question {
  font-family: var(--yndj-font-body);
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: var(--yndj-gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* Answer headline */
.yndj-lc-fund-card__answer {
  font-family: var(--yndj-font-display);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  font-weight: 700;
  color: var(--yndj-navy);
  line-height: 1.35;
  margin-bottom: var(--yndj-space-sm);
}

/* Body content (description text) */
.yndj-lc-fund-card__content {
  font-size: var(--yndj-text-base);
  color: var(--yndj-muted);
  line-height: 1.65;
}

/* Bold highlight inside answer text */
.yndj-lc-highlight {
  background: var(--yndj-bold-bg);
  padding: 0 4px;
  border-radius: 3px;
}

/* Italic gold emphasis */
.yndj-lc-emphasis {
  color: var(--yndj-gold);
  font-style: italic;
}


/* ─────────────────────────────────────────────────────────────
   8. INSIGHT CALLOUT
───────────────────────────────────────────────────────────── */
.yndj-lc-insight {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--yndj-highlight-bg);
  border-radius: var(--yndj-radius-sm);
  padding: 0.75rem var(--yndj-space-md);
  margin-top: var(--yndj-space-sm);
  font-size: var(--yndj-text-base);
  color: var(--yndj-text);
  line-height: 1.6;
}

.yndj-lc-insight__icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--yndj-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.yndj-lc-insight__icon svg {
  display: block;
}

.yndj-lc-insight__text {
  flex: 1;
}


/* ─────────────────────────────────────────────────────────────
   9. STAR FRAMEWORK
───────────────────────────────────────────────────────────── */
.yndj-lc-star-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-top: var(--yndj-space-md);
}

.yndj-lc-star-item {
  background: var(--yndj-white);
  border-radius: var(--yndj-radius-sm);
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--yndj-gold);
}

.yndj-lc-star-item__letter {
  font-family: var(--yndj-font-display);
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--yndj-navy);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.yndj-lc-star-item__word {
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: var(--yndj-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.yndj-lc-star-item__desc {
  font-size: 0.8rem;
  color: var(--yndj-muted);
  line-height: 1.5;
}

/* Full-width STAR item (for Feedback row that spans) */
.yndj-lc-star-item--full {
  grid-column: 1 / -1;
  background: var(--yndj-navy);
  border-left-color: var(--yndj-gold-light);
}

.yndj-lc-star-item--full .yndj-lc-star-item__letter {
  color: var(--yndj-gold-light);
}

.yndj-lc-star-item--full .yndj-lc-star-item__word {
  color: var(--yndj-gold-light);
}

.yndj-lc-star-item--full .yndj-lc-star-item__desc {
  color: rgba(255, 255, 255, 0.7);
}


/* ─────────────────────────────────────────────────────────────
   10. MOTIVATORS SPLIT CARD
───────────────────────────────────────────────────────────── */
.yndj-lc-motivators {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: var(--yndj-space-sm);
}

.yndj-lc-motivator {
  border-radius: var(--yndj-radius-md);
  padding: var(--yndj-space-md) 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.yndj-lc-motivator--gain {
  background: linear-gradient(135deg, var(--yndj-navy) 0%, var(--yndj-navy-mid) 100%);
  border: 1px solid var(--yndj-navy-light);
}

.yndj-lc-motivator--fear {
  background: linear-gradient(135deg, #2c1a08 0%, #3d2410 100%);
  border: 1px solid rgba(201, 147, 58, 0.3);
}

.yndj-lc-motivator__icon-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.yndj-lc-motivator__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--yndj-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.yndj-lc-motivator--gain .yndj-lc-motivator__icon {
  background: rgba(232, 185, 106, 0.2);
}

.yndj-lc-motivator--fear .yndj-lc-motivator__icon {
  background: rgba(201, 147, 58, 0.15);
}

.yndj-lc-motivator__label {
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yndj-gold-light);
}

.yndj-lc-motivator__headline {
  font-family: var(--yndj-font-display);
  font-size: var(--yndj-text-md);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.yndj-lc-motivator__sub {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────────
   11. ICON LIST
───────────────────────────────────────────────────────────── */
.yndj-lc-icon-list {
  background: #ffffff;
  border-radius: var(--yndj-radius-md);
  border: 1px solid var(--yndj-cream-dark);
  margin-top: var(--yndj-space-sm);
  overflow: hidden;
}

.yndj-lc-icon-list__header {
  background: var(--yndj-navy);
  padding: 0.55rem 0.9rem;
}

.yndj-lc-icon-list__title {
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: var(--yndj-gold-light);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.yndj-lc-icon-list__items {
  display: flex;
  flex-direction: column;
}

.yndj-lc-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--yndj-text-base);
  color: var(--yndj-text);
  font-weight: 500;
  line-height: 1.55;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--yndj-cream-dark);
}

.yndj-lc-list-item:last-child {
  border-bottom: none;
}

/* Rank badge (navy circle with number) */
.yndj-lc-list-item__rank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--yndj-navy);
  color: var(--yndj-gold-light);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--yndj-font-display);
}

/* Check badge (gold-pale circle with checkmark) */
.yndj-lc-list-item__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--yndj-gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.yndj-lc-list-item__check svg {
  display: block;
}

/* Two icon-lists side by side */
.yndj-lc-icon-list-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--yndj-space-md);
  margin-top: var(--yndj-space-sm);
}


/* ─────────────────────────────────────────────────────────────
   12. COLUMNS LAYOUT
───────────────────────────────────────────────────────────── */
.yndj-lc-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--yndj-space-md);
  margin-bottom: var(--yndj-space-xl);
}

.yndj-lc-columns--thirds {
  grid-template-columns: 1fr 1fr 1fr;
}

.yndj-lc-column {
  /* Column is unstyled by default — content inside it provides its own style.
     Columns wrapping fund-cards, icon-lists etc. all get their component styles. */
}


/* ─────────────────────────────────────────────────────────────
   13. LESSON CLOSER (PULL QUOTE)
───────────────────────────────────────────────────────────── */
.yndj-lc-closer {
  background: var(--yndj-navy);
  border-radius: var(--yndj-radius-lg);
  padding: var(--yndj-space-xl) var(--yndj-space-xl) var(--yndj-space-xl) 2.5rem;
  margin-top: var(--yndj-space-xl);
  position: relative;
  overflow: hidden;
}

.yndj-lc-closer::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(to bottom, var(--yndj-gold-light), var(--yndj-gold));
}

.yndj-lc-closer__eyebrow {
  display: block;
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: var(--yndj-gold-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.yndj-lc-closer__text {
  font-family: var(--yndj-font-display);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.65;
  margin: 0;
}

/* Gold emphasis inside closer text — use <em> in shortcode content */
.yndj-lc-closer__text em {
  color: var(--yndj-gold-light);
  font-style: normal;
  font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────
   14. NEXT LESSON BUTTON
───────────────────────────────────────────────────────────── */
.yndj-lc-footer {
  margin-top: var(--yndj-space-lg);
  display: flex;
  justify-content: flex-end;
}

.yndj-lc-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--yndj-gold);
  color: #ffffff;
  font-family: var(--yndj-font-body);
  font-size: var(--yndj-text-base);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--yndj-radius-md);
  padding: 0.75rem 1.4rem;
  transition:
    background var(--yndj-transition-base),
    transform var(--yndj-transition-fast);
  letter-spacing: 0.01em;
}

.yndj-lc-next-btn:hover {
  background: var(--yndj-gold-light);
  color: var(--yndj-navy);
  transform: translateY(-1px);
}

.yndj-lc-next-btn svg {
  flex-shrink: 0;
  display: block;
}


/* ─────────────────────────────────────────────────────────────
   15. FUND CARD INNER COLUMN (fixes class name body → col)
───────────────────────────────────────────────────────────── */
/* The right-hand column inside .yndj-lc-fund-card__inner      */
.yndj-lc-fund-card__col {
  min-width: 0;  /* prevent overflow in narrow grid contexts */
}


/* ─────────────────────────────────────────────────────────────
   16. SCRIPT BLOCK
───────────────────────────────────────────────────────────── */
.yndj-lc-script {
  background: var(--yndj-navy);
  border-radius: var(--yndj-radius-md);
  padding: var(--yndj-space-sm) var(--yndj-space-md) var(--yndj-space-sm) 1.1rem;
  margin-top: var(--yndj-space-sm);
  font-family: var(--yndj-font-display);
  font-size: 0.95rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.6;
  position: relative;
  overflow: hidden;
}

.yndj-lc-script::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--yndj-gold);
}

.yndj-lc-script__label {
  display: block;
  font-family: var(--yndj-font-body);
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: var(--yndj-gold-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

/* Bold text inside navy-background blocks — gold-light to remain visible */
.yndj-lc-script strong,
.yndj-lc-closer__text strong,
.yndj-lc-stat__headline strong,
.yndj-lc-stat__desc strong,
.yndj-lc-step-card__header strong,
.yndj-lc-section-title strong,
.yndj-lc-dialogue__q-text strong,
.yndj-lc-law__text strong {
  color: var(--yndj-gold-light);
  font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────
   17. CROSS-REFERENCE PILL
───────────────────────────────────────────────────────────── */
.yndj-lc-xref {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--yndj-gold);
  background: var(--yndj-gold-pale);
  border: 1px solid var(--yndj-border);
  border-radius: var(--yndj-radius-pill);
  padding: 0.15rem 0.55rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 0.3rem;
}


/* ─────────────────────────────────────────────────────────────
   18. STAT CALLOUT
───────────────────────────────────────────────────────────── */
.yndj-lc-stat {
  display: flex;
  align-items: center;
  gap: var(--yndj-space-lg);
  background: var(--yndj-navy);
  border-radius: var(--yndj-radius-lg);
  padding: var(--yndj-space-lg) var(--yndj-space-xl);
  margin-bottom: var(--yndj-space-xl);
  position: relative;
  overflow: hidden;
}

.yndj-lc-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(to bottom, var(--yndj-gold-light), var(--yndj-gold));
}

.yndj-lc-stat__number {
  font-family: var(--yndj-font-display);
  font-size: clamp(2.8rem, 7vw, 4rem);
  font-weight: 900;
  color: var(--yndj-gold-light);
  line-height: 1;
  flex-shrink: 0;
}

.yndj-lc-stat__body {
  flex: 1;
  min-width: 0;
}

.yndj-lc-stat__headline {
  font-family: var(--yndj-font-display);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.yndj-lc-stat__desc {
  font-size: var(--yndj-text-base);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
}


/* ─────────────────────────────────────────────────────────────
   19. PROSE BLOCK
───────────────────────────────────────────────────────────── */
.yndj-lc-prose {
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-lg);
  padding: var(--yndj-space-lg) 1.75rem;
  margin-bottom: var(--yndj-space-md);
  font-size: var(--yndj-text-md);
  color: var(--yndj-text);
  line-height: 1.8;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--yndj-transition-base),
    box-shadow var(--yndj-transition-base);
}

.yndj-lc-prose::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--yndj-gold), var(--yndj-gold-light));
  opacity: 0;
  transition: opacity var(--yndj-transition-base);
}

.yndj-lc-prose:hover {
  transform: translateY(-2px);
  box-shadow: var(--yndj-shadow-card);
}

.yndj-lc-prose:hover::before {
  opacity: 1;
}

.yndj-lc-prose p + p {
  margin-top: 0.85em;
}

.yndj-lc-prose strong {
  color: var(--yndj-navy);
  font-weight: 600;
}


/* ─────────────────────────────────────────────────────────────
   20. FORMULA GRID + CARD
───────────────────────────────────────────────────────────── */
.yndj-lc-formula-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: var(--yndj-space-sm);
}

.yndj-lc-formula-card {
  background: var(--yndj-cream);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-md);
  padding: var(--yndj-space-sm) var(--yndj-space-md);
}

.yndj-lc-formula-card__label {
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: var(--yndj-gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.yndj-lc-formula-card__eq {
  font-family: var(--yndj-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--yndj-navy);
  line-height: 1.5;
}

/* Operator characters highlighted in gold */
.yndj-lc-formula-card__eq span {
  color: var(--yndj-gold);
}

.yndj-lc-formula-card__desc {
  font-size: var(--yndj-text-xs);
  color: var(--yndj-muted);
  line-height: 1.5;
  margin-top: 0.3rem;
}


/* ─────────────────────────────────────────────────────────────
   21. CHAIN
───────────────────────────────────────────────────────────── */
.yndj-lc-chain {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--yndj-space-sm);
}

.yndj-lc-chain__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--yndj-cream);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: 0;
}

.yndj-lc-chain__item:first-of-type {
  border-radius: var(--yndj-radius-md) var(--yndj-radius-md) 0 0;
}

.yndj-lc-chain__item:last-of-type {
  border-radius: 0 0 var(--yndj-radius-md) var(--yndj-radius-md);
}

/* When no arrow follows, make the item fully rounded */
.yndj-lc-chain__item:only-of-type {
  border-radius: var(--yndj-radius-md);
}

.yndj-lc-chain__item + .yndj-lc-chain__item {
  border-top: none;
}

.yndj-lc-chain__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yndj-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--yndj-font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--yndj-gold-light);
  flex-shrink: 0;
}

.yndj-lc-chain__text {
  font-size: var(--yndj-text-base);
  font-weight: 600;
  color: var(--yndj-navy);
  flex: 1;
}

.yndj-lc-chain__arrow {
  display: flex;
  justify-content: center;
  padding: 2px 0;
  color: var(--yndj-gold);
  font-size: 1.1rem;
  line-height: 1;
}


/* ─────────────────────────────────────────────────────────────
   22. RESOURCES BLOCK
───────────────────────────────────────────────────────────── */
.yndj-lc-resources {
  background: #ffffff;
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-lg);
  overflow: hidden;
  margin-top: var(--yndj-space-xl);
}

.yndj-lc-resources__header {
  background: var(--yndj-navy);
  padding: 0.55rem 0.9rem;
}

.yndj-lc-resources__eyebrow {
  display: block;
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: var(--yndj-gold-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.yndj-lc-resources__desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin-top: 0.2rem;
}

.yndj-lc-resources__items {
  display: flex;
  flex-direction: column;
}

.yndj-lc-resource-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #ffffff;
  border-bottom: 1px solid var(--yndj-cream-dark);
  padding: 0.75rem 0.9rem;
  text-decoration: none;
  transition: background var(--yndj-transition-fast);
}

.yndj-lc-resource-item:last-child {
  border-bottom: none;
}

.yndj-lc-resource-item:hover {
  background: var(--yndj-gold-pale);
}

.yndj-lc-resource-item__icon {
  width: 32px;
  height: 32px;
  background: var(--yndj-navy);
  border-radius: var(--yndj-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.yndj-lc-resource-item__label {
  font-size: var(--yndj-text-base);
  font-weight: 600;
  color: var(--yndj-navy);
  flex: 1;
}

.yndj-lc-resource-item__type {
  font-size: var(--yndj-text-xs);
  color: var(--yndj-muted);
  font-weight: 400;
  margin-left: 0.4rem;
}

.yndj-lc-resource-item__arrow {
  color: var(--yndj-gold);
  flex-shrink: 0;
  font-size: 0.95rem;
}


/* ─────────────────────────────────────────────────────────────
   23. MOTIVATOR WINNER BADGE  (addition to existing motivators)
───────────────────────────────────────────────────────────── */
.yndj-lc-motivator__winner {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: var(--yndj-navy);
  background: var(--yndj-gold-light);
  border-radius: var(--yndj-radius-pill);
  padding: 0.2rem 0.6rem;
  margin-top: 0.4rem;
  align-self: flex-start;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* ─────────────────────────────────────────────────────────────
   24. REFRAME BLOCK
───────────────────────────────────────────────────────────── */
.yndj-lc-reframe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: var(--yndj-space-sm);
}

.yndj-lc-reframe__panel {
  border-radius: var(--yndj-radius-md);
  padding: var(--yndj-space-sm) var(--yndj-space-md) var(--yndj-space-sm) 1.1rem;
  font-family: var(--yndj-font-display);
  font-size: 0.92rem;
  line-height: 1.6;
  position: relative;
  overflow: hidden;
}

.yndj-lc-reframe__panel::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}

.yndj-lc-reframe__label {
  display: block;
  font-family: var(--yndj-font-body);
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

/* "Before" panel — muted grey */
.yndj-lc-reframe__panel--before {
  background: rgba(90, 100, 120, 0.07);
  color: var(--yndj-muted);
}

.yndj-lc-reframe__panel--before::before {
  background: var(--yndj-muted);
  opacity: 0.4;
}

.yndj-lc-reframe__panel--before .yndj-lc-reframe__label {
  color: var(--yndj-muted);
}

/* "After" panel — navy/gold */
.yndj-lc-reframe__panel--after {
  background: var(--yndj-navy);
  color: #ffffff;
}

.yndj-lc-reframe__panel--after::before {
  background: var(--yndj-gold);
  opacity: 1;
}

.yndj-lc-reframe__panel--after .yndj-lc-reframe__label {
  color: var(--yndj-gold-light);
}


/* ─────────────────────────────────────────────────────────────
   25. RESPONSIVE
───────────────────────────────────────────────────────────── */

/* Tablet: 768px */
@media (max-width: 768px) {
  .yndj-lc-icon-list-pair {
    grid-template-columns: 1fr;
  }

  .yndj-lc-columns {
    grid-template-columns: 1fr;
  }

  .yndj-lc-columns--thirds {
    grid-template-columns: 1fr;
  }
}

/* Mobile: 600px */
@media (max-width: 600px) {
  .yndj-lc-lesson {
    padding: var(--yndj-space-lg) var(--yndj-space-md) var(--yndj-space-3xl);
  }

  .yndj-lc-fund-card__inner {
    grid-template-columns: 44px 1fr;
    gap: 0 0.9rem;
  }

  .yndj-lc-fund-card__number {
    width: 40px;
    height: 40px;
    font-size: var(--yndj-text-md);
  }

  .yndj-lc-audio-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .yndj-lc-audio-wrap audio {
    min-width: 0;
    width: 100%;
  }

  .yndj-lc-motivators {
    grid-template-columns: 1fr;
  }

  .yndj-lc-star-grid {
    grid-template-columns: 1fr 1fr;
  }

  .yndj-lc-closer {
    padding: var(--yndj-space-lg) var(--yndj-space-md) var(--yndj-space-lg) 1.75rem;
  }
}

/* Very small: 380px */
@media (max-width: 380px) {
  .yndj-lc-star-grid {
    grid-template-columns: 1fr;
  }
}

/* New components — Tablet: 768px */
@media (max-width: 768px) {
  .yndj-lc-formula-grid {
    grid-template-columns: 1fr;
  }

  .yndj-lc-reframe {
    grid-template-columns: 1fr;
  }
}

/* New components — Mobile: 600px */
@media (max-width: 600px) {
  .yndj-lc-stat {
    flex-direction: column;
    gap: var(--yndj-space-sm);
    align-items: flex-start;
    padding: var(--yndj-space-lg);
  }

  .yndj-lc-stat__number {
    font-size: 2.8rem;
  }
}

/* ═════════════════════════════════════════════════════════════
   DARK MODE — body.chakra-ui-dark ONLY
   Dark mode is controlled exclusively by Masteriyo's in-app
   toggle (Chakra UI body class). OS/browser prefers-color-scheme
   is intentionally ignored — Masteriyo is the authority.

   --yndj-white is NOT remapped here. It is used as text colour
   on navy-background components (section header, lesson closer,
   audio wrap, motivators, stat). Those components already look
   correct in dark mode without changes. Card backgrounds that
   need to go dark are handled by explicit per-component rules.
═════════════════════════════════════════════════════════════ */

body.chakra-ui-dark .yndj-lc-lesson {
  --yndj-cream:         #1a2535;
  --yndj-cream-dark:    rgba(255, 255, 255, 0.08);
  --yndj-text:          #e8e4dc;
  --yndj-muted:         #8a96aa;
  --yndj-navy:          #0a1525;
  --yndj-navy-mid:      #0f1e38;
  --yndj-navy-light:    #162d52;
  --yndj-highlight-bg:  rgba(201, 147, 58, 0.12);
  --yndj-bold-bg:       rgba(201, 147, 58, 0.25);
  --yndj-border:        rgba(201, 147, 58, 0.2);
  --yndj-shadow-card:   0 8px 28px rgba(0, 0, 0, 0.4);
  background-color:     #0d1118 !important;
  color:                #e8e4dc !important;
}

body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-title { color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-meta-badge { background: #1e2d42 !important; border-color: rgba(255,255,255,0.1) !important; color: #8a96aa !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-intro { background: #162030 !important; color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-intro strong { color: #e8b96a !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-fund-card { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-fund-card__answer { color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-fund-card__content { color: #8a96aa !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-icon-list { background: #1a2535 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-icon-list__header { background: #0a1525 !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-icon-list__title { color: #e8b96a !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-list-item { color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-list-item__sub { color: #8a96aa !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-star-item { background: #1a2535 !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-star-item__letter { color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-insight { background: rgba(201,147,58,0.1) !important; color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-script { background: #0a1525 !important; color: #ffffff !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-formula-card { background: #1a2535 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-formula-card__eq { color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-formula-card__desc { color: #8a96aa !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-chain__item { background: #1a2535 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-chain__text { color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-resources { background: #1a2535 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-resources__eyebrow { color: #e8b96a !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-resources__desc { color: #8a96aa !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-resource-item { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-resource-item__label { color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-prose { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-prose strong { color: #e8b96a !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-reframe__panel--before { background: rgba(255,255,255,0.04) !important; color: #8a96aa !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-stat { background: #0a1525 !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-next-btn { color: #ffffff !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-next-btn:hover { color: #0d1118 !important; }

/* Elements with white text on navy backgrounds */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-audio-title { color: #ffffff !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-section-title { color: #ffffff !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-motivator__headline { color: #ffffff !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-closer__text { color: #ffffff !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-stat__headline { color: #ffffff !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-reframe__panel--after { color: #ffffff !important; }

/* Section header, lesson closer, audio wrap, motivators, stat band —
   already use navy/dark backgrounds with white text via --yndj-white.
   Since we no longer remap --yndj-white, these render correctly
   in dark mode without any additional overrides. */


/* ─────────────────────────────────────────────────────────────
   26. STEP LIST  (v1.6.0 — navy-header card design)
   Previous structure: 64px navy badge column | cream body column.
   New structure: full-width navy .yndj-lc-step-card__header
   (badge + title) above a cream .yndj-lc-step-card__content area.
   [yndj_step_item label=""] controls badge word (default "Step").
───────────────────────────────────────────────────────────── */
.yndj-lc-step-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: var(--yndj-space-xl);
}

.yndj-lc-step-card {
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-lg);
  overflow: hidden;
}

/* Full-width navy header: badge left, title fills rest */
.yndj-lc-step-card__header {
  background: var(--yndj-navy);
  padding: 0.95rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

/* Badge: number + label word stacked */
.yndj-lc-step-card__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: 36px;
}

.yndj-lc-step-card__num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--yndj-gold-light);
  line-height: 1;
}

.yndj-lc-step-card__word {
  font-family: var(--yndj-font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 3px;
}

/* Title in navy header — white text */
.yndj-lc-step-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
}

.yndj-lc-step-card__title em {
  font-style: italic;
  color: var(--yndj-gold-light);
}

/* Content area — cream background, padded */
.yndj-lc-step-card__content {
  padding: 1.35rem;
  font-size: var(--yndj-text-base);
  color: var(--yndj-text);
  line-height: 1.7;
}

/* Paragraphs inside step content — reset margin (wpautop adds them) */
.yndj-lc-step-card__content p {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.yndj-lc-step-card__content p:last-child {
  margin-bottom: 0;
}

/* Nested script blocks */
.yndj-lc-step-card__content .yndj-lc-script {
  margin-top: 0.65rem;
  margin-bottom: 0.75rem;
}

/* Nested icon lists — remove extra margins */
.yndj-lc-step-card__content .yndj-lc-icon-list {
  margin-top: 0.5rem;
  margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────
   27. STORY EXAMPLE  (v1.3.0)
───────────────────────────────────────────────────────────── */
.yndj-lc-story-example {
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-lg);
  overflow: hidden;
  margin-bottom: var(--yndj-space-xl);
}

.yndj-lc-story-example__header {
  background: var(--yndj-navy-mid);
  padding: 0.9rem 1.25rem;
}

.yndj-lc-story-example__eyebrow {
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yndj-gold);
  margin-bottom: 0.2rem;
}

.yndj-lc-story-example__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.yndj-lc-story-example__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.yndj-lc-story-example__skill {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--yndj-navy);
  background: var(--yndj-gold-light);
  border-radius: var(--yndj-radius-pill);
  padding: 0.15rem 0.6rem;
}

.yndj-lc-story-section {
  border-top: 1px solid var(--yndj-cream-dark);
  display: grid;
  grid-template-columns: 56px 1fr;
}

.yndj-lc-story-section:first-of-type {
  border-top: none;
}

.yndj-lc-story-section__badge {
  background: var(--yndj-navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  gap: 0.1rem;
}

.yndj-lc-story-section__letter {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--yndj-gold-light);
  line-height: 1;
}

.yndj-lc-story-section__word {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--yndj-gold);
}

.yndj-lc-story-section__body {
  padding: 1rem 1.25rem;
}

.yndj-lc-story-section__text {
  font-size: var(--yndj-text-base);
  line-height: 1.65;
  color: var(--yndj-text);
}

/* Highlight modifier — for Feedback (F) section */
.yndj-lc-story-section--highlight .yndj-lc-story-section__badge {
  background: var(--yndj-gold);
}

.yndj-lc-story-section--highlight .yndj-lc-story-section__letter {
  color: #ffffff;
}

.yndj-lc-story-section--highlight .yndj-lc-story-section__word {
  color: rgba(255, 255, 255, 0.85);
}

.yndj-lc-story-section--highlight .yndj-lc-story-section__body {
  background: var(--yndj-gold-pale);
}


/* ─────────────────────────────────────────────────────────────
   28. WORD GRID  (v1.3.0)
───────────────────────────────────────────────────────────── */
.yndj-lc-word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: var(--yndj-space-xl);
}

.yndj-lc-word-card {
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-md);
  overflow: hidden;
  transition: box-shadow var(--yndj-transition-base);
}

.yndj-lc-word-card:hover {
  box-shadow: var(--yndj-shadow-card);
}

.yndj-lc-word-card__header {
  background: var(--yndj-navy);
  padding: 0.55rem 0.9rem;
}

.yndj-lc-word-card__category {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yndj-gold-light);
}

.yndj-lc-word-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.75rem 0.9rem;
}

.yndj-lc-word-chip {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--yndj-navy);
  background: var(--yndj-gold-pale);
  border: 1px solid var(--yndj-border);
  border-radius: var(--yndj-radius-pill);
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────
   29. PHRASE CATEGORY  (v1.3.0)
───────────────────────────────────────────────────────────── */
.yndj-lc-phrase-category {
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.yndj-lc-phrase-category__header {
  background: var(--yndj-navy);
  padding: 0.85rem 1.25rem 0.85rem 1.75rem;
  position: relative;
  overflow: hidden;
}

.yndj-lc-phrase-category__header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(to bottom, var(--yndj-gold-light), var(--yndj-gold));
}

.yndj-lc-phrase-category__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yndj-gold);
  margin-bottom: 0.2rem;
}

.yndj-lc-phrase-category__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}

.yndj-lc-phrase-category__desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.15rem;
}

.yndj-lc-phrase-category__body {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}


/* ─────────────────────────────────────────────────────────────
   30. QUOTE BLOCK  (v1.3.0)
───────────────────────────────────────────────────────────── */
.yndj-lc-quote-block {
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.yndj-lc-quote-block__context {
  background: var(--yndj-navy-mid);
  padding: 0.55rem 1.1rem;
}

.yndj-lc-quote-block__context-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yndj-gold-light);
}

.yndj-lc-quote-block__body {
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.yndj-lc-quote-block__quote {
  border-left: 3px solid var(--yndj-gold);
  padding: 0.65rem 1rem;
  background: var(--yndj-navy);
  border-radius: 0 var(--yndj-radius-sm) var(--yndj-radius-sm) 0;
}

.yndj-lc-quote-block__text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: #ffffff;
  line-height: 1.65;
  margin-bottom: 0.4rem;
}

.yndj-lc-quote-block__attribution {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--yndj-gold-light);
  letter-spacing: 0.03em;
}

.yndj-lc-quote-block__coaching {
  font-size: 0.9rem;
  color: var(--yndj-muted);
  line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────────
   31. QUOTE LIBRARY  (v1.3.0)
───────────────────────────────────────────────────────────── */
.yndj-lc-quote-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.875rem;
  margin-bottom: var(--yndj-space-xl);
}

.yndj-lc-quote-card {
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--yndj-transition-base),
    transform var(--yndj-transition-fast);
}

.yndj-lc-quote-card:hover {
  box-shadow: var(--yndj-shadow-card);
  transform: translateY(-2px);
}

.yndj-lc-quote-card__author {
  background: var(--yndj-navy);
  padding: 0.5rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yndj-gold-light);
}

.yndj-lc-quote-card__text {
  padding: 0.75rem 0.85rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--yndj-text);
  line-height: 1.6;
  flex: 1;
}

.yndj-lc-quote-card__text::before {
  content: '\201C';
  color: var(--yndj-gold);
  font-size: 1.1rem;
  line-height: 0;
  vertical-align: -0.25em;
  margin-right: 0.1rem;
}

.yndj-lc-quote-card__text::after {
  content: '\201D';
  color: var(--yndj-gold);
  font-size: 1.1rem;
  line-height: 0;
  vertical-align: -0.25em;
  margin-left: 0.1rem;
}


/* ─────────────────────────────────────────────────────────────
   32. COUNTER-BALANCE TABLE  (v1.3.0)
───────────────────────────────────────────────────────────── */
.yndj-lc-cb-table {
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-lg);
  overflow: hidden;
  margin-bottom: var(--yndj-space-xl);
}

.yndj-lc-cb-table__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.yndj-lc-cb-table__head-cell {
  padding: 0.65rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.yndj-lc-cb-table__head-cell--negative {
  background: #2a0f10;
  color: #e8a0a5;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.yndj-lc-cb-table__head-cell--positive {
  background: var(--yndj-navy);
  color: var(--yndj-gold-light);
}

.yndj-lc-cb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--yndj-cream-dark);
}

.yndj-lc-cb-cell {
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.yndj-lc-cb-cell--negative {
  background: var(--yndj-danger);
  border-right: 1px solid var(--yndj-danger-border);
  color: var(--yndj-danger-text);
  font-weight: 500;
}

.yndj-lc-cb-cell--positive {
  background: var(--yndj-white);
  color: var(--yndj-text);
}


/* ─────────────────────────────────────────────────────────────
   33. RESPONSIVE — new v1.3.0 components
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .yndj-lc-word-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .yndj-lc-quote-library {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .yndj-lc-cb-table__head,
  .yndj-lc-cb-row {
    grid-template-columns: 1fr 1fr;  /* keep side-by-side on tablet */
  }
}

@media (max-width: 600px) {
  .yndj-lc-step-card {
    grid-template-columns: 56px 1fr;
  }

  .yndj-lc-story-section {
    grid-template-columns: 48px 1fr;
  }

  .yndj-lc-story-section__badge {
    padding: 0.75rem 0;
  }

  .yndj-lc-cb-table__head,
  .yndj-lc-cb-row {
    grid-template-columns: 1fr;  /* stack on mobile */
  }

  .yndj-lc-cb-table__head-cell--negative {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .yndj-lc-cb-cell--negative {
    border-right: none;
    border-bottom: 1px solid var(--yndj-danger-border);
  }

  /* Also fix star grid on mobile */
  .yndj-lc-star-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 380px) {
  .yndj-lc-star-grid {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────────────────────
   DARK MODE — v1.3.0 component overrides
   Added to body.chakra-ui-dark .yndj-lc-lesson scope.
───────────────────────────────────────────────────────────── */

/* Step list */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-step-card { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-step-card__title { color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-step-card__content { color: #8a96aa !important; }

/* Story example */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-story-example { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-story-section { border-top-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-story-section__text { color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-story-section--highlight .yndj-lc-story-section__body { background: rgba(201,147,58,0.12) !important; }

/* Word grid */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-word-card { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-word-chip { color: #e8e4dc !important; background: rgba(201,147,58,0.12) !important; border-color: rgba(201,147,58,0.2) !important; }

/* Phrase category */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-phrase-category { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-phrase-category__title { color: #ffffff !important; }

/* Quote block */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-quote-block { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-quote-block__coaching { color: #8a96aa !important; }

/* Quote library */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-quote-card { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-quote-card__text { color: #e8e4dc !important; }

/* Counter-balance table */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-cb-table { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-cb-row { border-top-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-cb-cell--positive { background: #162030 !important; color: #e8e4dc !important; }

/* ─────────────────────────────────────────────────────────────
   34. PIN LIST  (v1.4.0)
───────────────────────────────────────────────────────────── */
.yndj-lc-pin-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: var(--yndj-space-xl);
}

.yndj-lc-pin-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-md);
  padding: 0.85rem 1.1rem;
  font-size: var(--yndj-text-base);
  line-height: 1.65;
}

.yndj-lc-pin-item__icon {
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 2px;
}


/* ─────────────────────────────────────────────────────────────
   35. EXTERNAL LINK BAND  (v1.4.0)
───────────────────────────────────────────────────────────── */
.yndj-lc-external-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--yndj-navy);
  border-radius: var(--yndj-radius-md);
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  margin-bottom: var(--yndj-space-xl);
  transition: background var(--yndj-transition-base);
}

.yndj-lc-external-link:hover {
  background: var(--yndj-navy-light);
}

.yndj-lc-external-link__label {
  display: block;
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yndj-gold);
  margin-bottom: 0.15rem;
}

.yndj-lc-external-link__url {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.95rem;
  color: #ffffff;
}

.yndj-lc-external-link__arrow {
  margin-left: auto;
  color: var(--yndj-gold);
  font-size: 1.1rem;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   36. SOURCE GRID  (v1.4.0)
───────────────────────────────────────────────────────────── */
.yndj-lc-source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: var(--yndj-space-xl);
}

.yndj-lc-source-card {
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-lg);
  overflow: hidden;
}

/* Full-width modifier — span both columns */
.yndj-lc-source-card--full {
  grid-column: 1 / -1;
}

.yndj-lc-source-card__header {
  background: var(--yndj-navy);
  padding: 0.65rem 1rem 0.65rem 1.25rem;
  position: relative;
  overflow: hidden;
}

.yndj-lc-source-card__header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--yndj-gold);
}

.yndj-lc-source-card__eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yndj-gold);
  margin-bottom: 0.1rem;
}

.yndj-lc-source-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
}

.yndj-lc-source-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  font-size: 0.87rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--yndj-cream-dark);
}

.yndj-lc-source-item:last-child {
  border-bottom: none;
}

.yndj-lc-source-item__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yndj-gold);
  margin-top: 7px;
}

.yndj-lc-source-item__name {
  font-weight: 600;
  color: var(--yndj-navy);
}

.yndj-lc-source-item__desc {
  color: var(--yndj-muted);
}


/* ─────────────────────────────────────────────────────────────
   37. METRICS BAND  (v1.4.0)
───────────────────────────────────────────────────────────── */
.yndj-lc-metrics-band {
  background: var(--yndj-navy);
  border-radius: var(--yndj-radius-lg);
  padding: 1.25rem 1.5rem 1.25rem 2rem;
  margin-top: var(--yndj-space-md);
  margin-bottom: var(--yndj-space-md);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
}

.yndj-lc-metrics-band::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(to bottom, var(--yndj-gold-light), var(--yndj-gold));
}

.yndj-lc-metric {
  text-align: center;
}

.yndj-lc-metric__num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 900;
  color: var(--yndj-gold-light);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.yndj-lc-metric__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.35;
  letter-spacing: 0.02em;
}


/* ─────────────────────────────────────────────────────────────
   38. RESPONSIVE — v1.4.0 components
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .yndj-lc-source-grid {
    grid-template-columns: 1fr;
  }

  .yndj-lc-source-card--full {
    grid-column: 1;
  }

  .yndj-lc-metrics-band {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .yndj-lc-metrics-band {
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem 1rem 1rem 1.5rem;
  }
}


/* ─────────────────────────────────────────────────────────────
   DARK MODE — v1.4.0 component overrides
───────────────────────────────────────────────────────────── */

/* Pin list */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-pin-item { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; color: #e8e4dc !important; }

/* Source grid */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-source-card { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-source-item { border-bottom-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-source-item__name { color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-source-item__desc { color: #8a96aa !important; }

/* ─────────────────────────────────────────────────────────────
   39. BLOCK-LEVEL COMPONENT SPACING
   Every block-level lesson component gets a consistent bottom
   margin so components never slam into each other. This is a
   single consolidated rule that's easier to maintain than
   per-component bottom margins scattered throughout the file.
───────────────────────────────────────────────────────────── */
.yndj-lc-section-header,
.yndj-lc-fund-grid,
.yndj-lc-icon-list,
.yndj-lc-icon-list-pair,
.yndj-lc-star-grid,
.yndj-lc-motivators,
.yndj-lc-columns,
.yndj-lc-insight,
.yndj-lc-stat,
.yndj-lc-prose,
.yndj-lc-formula-grid,
.yndj-lc-chain,
.yndj-lc-resources,
.yndj-lc-reframe,
.yndj-lc-step-list,
.yndj-lc-story-example,
.yndj-lc-word-grid,
.yndj-lc-phrase-category,
.yndj-lc-quote-block,
.yndj-lc-quote-library,
.yndj-lc-cb-table,
.yndj-lc-pin-list,
.yndj-lc-source-grid,
.yndj-lc-metrics-band,
.yndj-lc-closer {
  margin-bottom: var(--yndj-space-xl);
}

/* Tighter gap after section headers — they lead directly into
   a component so double-spacing would look too loose */
.yndj-lc-section-header {
  margin-bottom: var(--yndj-space-lg);
}

/* Script and insight blocks nested inside cards/steps are smaller
   sub-elements — use a tighter gap so they don't over-space */
.yndj-lc-fund-card__content .yndj-lc-insight,
.yndj-lc-step-card__content .yndj-lc-insight,
.yndj-lc-phrase-category__body .yndj-lc-insight {
  margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────
   40. STYLE GRID  (v1.5.0)
   2-column icon-led comparison card grid for contrasting
   approaches or attitudes. highlight="true" adds gold treatment.
───────────────────────────────────────────────────────────── */
.yndj-lc-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: var(--yndj-space-xl);
}

.yndj-lc-style-card {
  background: #ffffff;
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-md);
  padding: 1rem 1.1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.yndj-lc-style-card--highlight {
  border-color: var(--yndj-gold);
  background: var(--yndj-highlight-bg);
}

.yndj-lc-style-card__icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}

.yndj-lc-style-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yndj-gold);
  margin-bottom: 0.2rem;
}

.yndj-lc-style-card__desc {
  font-size: 0.88rem;
  color: var(--yndj-muted);
  line-height: 1.55;
}

.yndj-lc-style-card--highlight .yndj-lc-style-card__desc {
  color: var(--yndj-text);
}


/* ─────────────────────────────────────────────────────────────
   41. PILLAR GRID  (v1.5.0)
   3-column overview summary cards with navy icon header.
   Lighter than fund_grid — no numbered badges or Q&A structure.
───────────────────────────────────────────────────────────── */
.yndj-lc-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: var(--yndj-space-xl);
}

.yndj-lc-pillar-card {
  background: #ffffff;
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-lg);
  overflow: hidden;
  text-align: center;
}

.yndj-lc-pillar-card__header {
  background: var(--yndj-navy);
  padding: 1rem 0.75rem 0.75rem;
}

.yndj-lc-pillar-card__icon {
  font-size: 1.6rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.35rem;
}

.yndj-lc-pillar-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yndj-gold-light);
}

.yndj-lc-pillar-card__body {
  padding: 0.85rem 0.9rem;
  font-size: 0.88rem;
  color: var(--yndj-muted);
  line-height: 1.55;
}


/* ─────────────────────────────────────────────────────────────
   42. LAW BLOCK  (v1.5.0)
   Full-width navy callout for a named principle or law.
   Gold eyebrow + large Playfair Display statement.
   <em> inside renders as gold-light emphasis.
───────────────────────────────────────────────────────────── */
.yndj-lc-law {
  background: var(--yndj-navy);
  border-radius: var(--yndj-radius-lg);
  padding: 1.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--yndj-space-xl);
}

.yndj-lc-law::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(to bottom, var(--yndj-gold-light), var(--yndj-gold));
}

.yndj-lc-law__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yndj-gold);
  margin-bottom: 0.75rem;
}

.yndj-lc-law__text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.6;
}

.yndj-lc-law__text em {
  font-style: normal;
  color: var(--yndj-gold-light);
}


/* ─────────────────────────────────────────────────────────────
   43. QUESTION GRID  (v1.5.0)
   2-column numbered question card grid with category labels.
   Used for presenting sets of interview questions.
───────────────────────────────────────────────────────────── */
.yndj-lc-q-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: var(--yndj-space-xl);
}

.yndj-lc-q-card {
  background: #ffffff;
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-md);
  overflow: hidden;
}

.yndj-lc-q-card__header {
  background: var(--yndj-navy);
  padding: 0.4rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.yndj-lc-q-card__num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--yndj-gold-light);
  flex-shrink: 0;
}

.yndj-lc-q-card__cat {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.yndj-lc-q-card__text {
  padding: 0.75rem 0.9rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--yndj-text);
  line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────────
   44. ICON LIST — DANGER VARIANT  (v1.5.0)
   style="danger" on [yndj_icon_list] renders red-tinted card
   for highlighting at-risk roles or caution items.
───────────────────────────────────────────────────────────── */
.yndj-lc-icon-list--danger {
  background: rgba(220, 53, 69, 0.06) !important;
  border-color: rgba(220, 53, 69, 0.25) !important;
}

.yndj-lc-icon-list--danger .yndj-lc-icon-list__header {
  background: rgba(192, 57, 43, 0.15) !important;
  border-bottom: 1px solid rgba(220, 53, 69, 0.2);
}

.yndj-lc-icon-list--danger .yndj-lc-icon-list__title {
  color: #c0392b !important;
}

.yndj-lc-icon-list--danger .yndj-lc-list-item {
  color: #c0392b !important;
  border-bottom-color: rgba(220, 53, 69, 0.15) !important;
}

.yndj-lc-list-item__danger-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c0392b;
  margin-top: 8px;
}


/* ─────────────────────────────────────────────────────────────
   45. RESPONSIVE — v1.5.0 components
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .yndj-lc-pillar-grid {
    grid-template-columns: 1fr;
  }

  .yndj-lc-q-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .yndj-lc-style-grid {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────────────────────
   DARK MODE — v1.5.0 component overrides
───────────────────────────────────────────────────────────── */

/* Style grid */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-style-card { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-style-card--highlight { background: rgba(201,147,58,0.12) !important; border-color: rgba(201,147,58,0.35) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-style-card__desc { color: #8a96aa !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-style-card--highlight .yndj-lc-style-card__desc { color: #e8e4dc !important; }

/* Pillar grid */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-pillar-card { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-pillar-card__body { color: #8a96aa !important; }

/* Question grid */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-q-card { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-q-card__text { color: #e8e4dc !important; }


/* ─────────────────────────────────────────────────────────────
   46. LESSON HOOK  (v1.6.0)
   [yndj_hook] — lesson-opening question. Sits directly beneath
   [yndj_lesson_header] in ALL lessons. White card, gold top
   border, centred Playfair italic. Distinct from [yndj_intro].
───────────────────────────────────────────────────────────── */
.yndj-lc-hook {
  background: var(--yndj-white);
  border-top: 4px solid var(--yndj-gold);
  border-radius: 0 0 var(--yndj-radius-lg) var(--yndj-radius-lg);
  padding: 1.5rem 2.25rem 1.75rem;
  margin-bottom: var(--yndj-space-xl);
  text-align: center;
}

.yndj-lc-hook__mark {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  color: var(--yndj-gold);
  line-height: 1;
  margin-bottom: 0.5rem;
  opacity: 0.65;
}

.yndj-lc-hook__text {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.8vw, 1.45rem);
  font-weight: 700;
  color: var(--yndj-navy);
  line-height: 1.45;
}


/* ─────────────────────────────────────────────────────────────
   48. DIALOGUE  (v1.7.0)
   [yndj_dialogue] — conversation card for interview Q&A exchanges.
   Contains [yndj_dialogue_q] (navy compact bar) and
   [yndj_dialogue_a] (gold-tinted answer area). Supports multi-turn
   dialogues with alternating blocks.
───────────────────────────────────────────────────────────── */
.yndj-lc-dialogue {
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-lg);
  overflow: hidden;
  margin-bottom: var(--yndj-space-xl);
  transition:
    transform var(--yndj-transition-base),
    box-shadow var(--yndj-transition-base);
}

.yndj-lc-dialogue:hover {
  transform: translateY(-2px);
  box-shadow: var(--yndj-shadow-card);
}

/* Question bubble — compact navy bar */
.yndj-lc-dialogue__q {
  background: var(--yndj-navy);
  padding: 0.7rem 1.25rem 0.7rem 1.5rem;
  position: relative;
}

.yndj-lc-dialogue__q::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: rgba(255, 255, 255, 0.2);
}

.yndj-lc-dialogue__q-label {
  display: block;
  font-family: var(--yndj-font-body);
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.yndj-lc-dialogue__q-text {
  font-family: var(--yndj-font-display);
  font-size: var(--yndj-text-md);
  font-style: italic;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.5;
}

/* Ensure bold/em inside question text stays visible on navy */
.yndj-lc-dialogue__q-text strong {
  color: var(--yndj-gold-light);
  font-weight: 700;
}

.yndj-lc-dialogue__q-text em {
  color: #ffffff;
}

/* Answer bubble — warm gold-tinted area */
.yndj-lc-dialogue__a {
  padding: 1rem 1.25rem 1rem 1.5rem;
  position: relative;
  border-left: 4px solid var(--yndj-gold);
  background: var(--yndj-gold-pale);
}

.yndj-lc-dialogue__a + .yndj-lc-dialogue__a {
  border-top: 1px solid rgba(201, 147, 58, 0.15);
}

.yndj-lc-dialogue__a-label {
  display: block;
  font-family: var(--yndj-font-body);
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: var(--yndj-gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.yndj-lc-dialogue__a-text {
  font-family: var(--yndj-font-body);
  font-size: var(--yndj-text-md);
  color: var(--yndj-text);
  line-height: 1.7;
}

.yndj-lc-dialogue__a-text p + p {
  margin-top: 0.6em;
}

.yndj-lc-dialogue__a-text strong {
  color: var(--yndj-navy);
}

/* Nested insight inside dialogue answer */
.yndj-lc-dialogue__a .yndj-lc-insight {
  margin: 0.75rem 0 0 0;
}

/* Dark mode */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-dialogue { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-dialogue__a { background: rgba(201,147,58,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-dialogue__a-text { color: #e8e4dc !important; }

@media (max-width: 680px) {
  .yndj-lc-dialogue__q { padding: 0.6rem 1rem 0.6rem 1.25rem; }
  .yndj-lc-dialogue__a { padding: 0.85rem 1rem 0.85rem 1.25rem; }
}


/* ─────────────────────────────────────────────────────────────
   49. SHOWCASE  (v1.7.0)
   [yndj_showcase] — presentation walkthrough with step badges
   and chat-style speech bubbles. Used for the Master
   Presentation System in Chapter 9.
───────────────────────────────────────────────────────────── */
.yndj-lc-showcase {
  background: var(--yndj-white);
  border: 1px solid var(--yndj-cream-dark);
  border-radius: var(--yndj-radius-lg);
  overflow: hidden;
  margin-bottom: var(--yndj-space-xl);
}

.yndj-lc-showcase__header {
  background: var(--yndj-navy);
  padding: 1rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.yndj-lc-showcase__header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(to bottom, var(--yndj-gold-light), var(--yndj-gold));
}

.yndj-lc-showcase__eyebrow {
  font-family: var(--yndj-font-body);
  font-size: var(--yndj-text-xs);
  font-weight: 700;
  color: var(--yndj-gold-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.yndj-lc-showcase__title {
  font-family: var(--yndj-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.yndj-lc-showcase__body {
  padding: 0;
}

/* Showcase step — badge + chat area */
.yndj-lc-showcase-step {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--yndj-cream-dark);
}

.yndj-lc-showcase-step:first-child {
  border-top: none;
}

/* Badge column */
.yndj-lc-showcase-step__badge {
  flex-shrink: 0;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.1rem 0.5rem 1rem;
  background: var(--yndj-gold-pale);
  border-right: 3px solid var(--yndj-gold);
}

.yndj-lc-showcase-step__number {
  font-family: var(--yndj-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--yndj-gold);
  line-height: 1;
  margin-bottom: 0.2rem;
}

.yndj-lc-showcase-step__label {
  font-family: var(--yndj-font-body);
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--yndj-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

/* Chat area */
.yndj-lc-showcase-step__content {
  flex: 1;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.yndj-lc-showcase-step__content p {
  margin-bottom: 0.3rem;
}

/* Seller bubble — left aligned, gold tint */
.yndj-lc-chat-seller {
  align-self: flex-start;
  max-width: 85%;
  background: var(--yndj-gold-pale);
  border: 1px solid rgba(201, 147, 58, 0.2);
  border-radius: 2px var(--yndj-radius-md) var(--yndj-radius-md) var(--yndj-radius-md);
  padding: 0.65rem 1rem;
}

.yndj-lc-chat-seller__label {
  display: block;
  font-family: var(--yndj-font-body);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--yndj-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.yndj-lc-chat-seller__text {
  font-family: var(--yndj-font-body);
  font-size: var(--yndj-text-base);
  color: var(--yndj-text);
  line-height: 1.6;
}

.yndj-lc-chat-seller__text strong {
  color: var(--yndj-navy);
}

/* Respondent bubble — right aligned, cool blue-grey */
.yndj-lc-chat-respondent {
  align-self: flex-end;
  margin-left: 15%;
  max-width: 85%;
  background: rgba(13, 31, 60, 0.06);
  border: 1px solid rgba(13, 31, 60, 0.1);
  border-radius: var(--yndj-radius-md) 2px var(--yndj-radius-md) var(--yndj-radius-md);
  padding: 0.65rem 1rem;
}

.yndj-lc-chat-respondent__label {
  display: block;
  font-family: var(--yndj-font-body);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--yndj-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.yndj-lc-chat-respondent__text {
  font-family: var(--yndj-font-body);
  font-size: var(--yndj-text-base);
  color: var(--yndj-text);
  line-height: 1.6;
}

/* Stage direction */
.yndj-lc-chat-direction {
  font-family: var(--yndj-font-body);
  font-size: var(--yndj-text-sm);
  color: var(--yndj-muted);
  font-style: italic;
  text-align: center;
  padding: 0.2rem 0;
}

/* Close step — gold badge highlight */
.yndj-lc-showcase-step--close .yndj-lc-showcase-step__badge {
  background: var(--yndj-gold);
}

.yndj-lc-showcase-step--close .yndj-lc-showcase-step__number,
.yndj-lc-showcase-step--close .yndj-lc-showcase-step__label {
  color: #ffffff;
}

.yndj-lc-showcase-step--close .yndj-lc-showcase-step__content {
  background: var(--yndj-highlight-bg);
}

/* Dark mode */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-showcase { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-chat-seller { background: rgba(201,147,58,0.08) !important; border-color: rgba(201,147,58,0.15) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-chat-seller__text { color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-chat-respondent { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-chat-respondent__text { color: #e8e4dc !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-showcase-step--close .yndj-lc-showcase-step__content { background: rgba(201,147,58,0.1) !important; }

@media (max-width: 580px) {
  .yndj-lc-showcase-step { flex-direction: column; }
  .yndj-lc-showcase-step__badge {
    width: 100%;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-right: none;
    border-bottom: 3px solid var(--yndj-gold);
  }
  .yndj-lc-showcase-step__number { margin-bottom: 0; }
  .yndj-lc-chat-seller,
  .yndj-lc-chat-respondent { max-width: 92%; }
}


/* ─────────────────────────────────────────────────────────────
   47. HIGHLIGHT EMPHASIS  (v1.6.0)
   .yndj-em-hl — replaces ALL CAPS word emphasis. Applied as an
   inline <span> in authored content. Physical-highlighter style
   using --yndj-bold-bg. font-style:normal overrides italic context.
───────────────────────────────────────────────────────────── */
.yndj-em-hl {
  background: var(--yndj-bold-bg);
  border-radius: 2px;
  padding: 0.05em 0.25em;
  font-weight: 700;
  font-style: normal;
  color: var(--yndj-navy);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* ─────────────────────────────────────────────────────────────
   48. RESPONSIVE  (v1.6.0)
───────────────────────────────────────────────────────────── */

/* Header: stack info + audio vertically on narrow viewports */
@media (max-width: 680px) {
  .yndj-lc-header {
    flex-direction: column;
  }

  .yndj-lc-header .yndj-lc-audio-wrap {
    width: 100%;
  }
}


/* ─────────────────────────────────────────────────────────────
   DARK MODE — v1.6.0 component overrides
───────────────────────────────────────────────────────────── */

/* Hook */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-hook { background: #162030 !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-hook__text { color: #e8e4dc !important; }

/* Highlight emphasis */
body.chakra-ui-dark .yndj-lc-lesson .yndj-em-hl { background: rgba(201,147,58,0.22) !important; color: #e8e4dc !important; }

/* Step card — header already navy (fine). Content area needs dark bg. */
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-step-card { background: #162030 !important; border-color: rgba(255,255,255,0.08) !important; }
body.chakra-ui-dark .yndj-lc-lesson .yndj-lc-step-card__content { color: #e8e4dc !important; }