/* NoGuru Academy — eye-catcher components (operator design review,
 * 2026-07-31: "the eye-catchers are missing"). ALL new academy CSS lives
 * here; site.css (shared across the whole site) is untouched.
 *
 * Every colour below resolves through the custom properties defined in
 * site.css :root — no hardcoded hex, per assets/brand/BRAND.md. Dark only,
 * monochrome: no gradient, glow, bevel or shadow anywhere in this file.
 * --signal is reserved for live-state elsewhere on the site and is not
 * used here. --positive / --negative are data-only and are deliberately
 * NOT used for the key-number callouts below — those numbers are
 * arithmetic bills or frequencies (a recovery bill, a loss frequency),
 * not a trading outcome, so colour-coding them green/red would imply a
 * result this academy does not claim. Everything here is a typographic or
 * structural anchor: pull quotes, one big number, a rule, a module
 * numeral — never an icon, gradient, or gamified progress bar.
 */

/* ---- lesson meta: reading time + position in the curriculum ------------
 * Sits under the H1 on every lesson page. Mono/uppercase, matches the
 * .eyebrow treatment in site.css but stays its own class so the eyebrow
 * (module/lesson-of-module) and this line (curriculum-wide position +
 * reading time) can both exist without one crowding the other. */
.lesson-meta {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  color: var(--ink-faint);
  margin: 0 0 22px;
}

/* ---- key-number: one number, made large --------------------------------
 * The single-metric callout the operator asked for by name ("+100%" for
 * the 50%-drawdown recovery, "38.2%" for the ten-trade variance figure).
 * Every number placed in .key-number .num must already be established in
 * that lesson's own verified text — this component only re-typesets it,
 * never introduces it. */
.key-number {
  margin: 22px 0 28px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.key-number .num {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 7vw, 60px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.key-number .label {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-dim);
  max-width: 48ch;
}

/* ---- pull-quote: a sentence already in the lesson, enlarged -------------
 * Every pull-quote reuses a sentence verbatim from that lesson's own free
 * teaser text (never pulled from the gated full body) — it is emphasis on
 * existing public copy, not new claims and not gated content surfaced
 * early. */
.pullquote {
  margin: 30px 0;
  padding-left: 20px;
  border-left: 2px solid var(--ink-faint);
  font-size: clamp(19px, 2.6vw, 24px);
  line-height: 1.4;
  color: var(--ink);
  max-width: 640px;
}

/* ---- section rule: marks a hard break -----------------------------------
 * Used once per lesson page to mark the free/gated boundary before the
 * paywall card, and available generally as a plain hairline anchor. */
hr.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 34px 0;
}

/* ---- lesson figure: wrapper for figures newly surfaced into the free
 * teaser (moved or duplicated up from mid-lesson so they work as a hook,
 * not just an illustration read at the end). ------------------------- */
.lesson-figure { margin: 18px 0 28px; }
.lesson-figure img {
  display: block;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.lesson-figure figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-dim);
}

/* ---- academy index: module rail + progression meta ----------------------
 * A typographic module numeral (mono, muted) plus "Module N of 5 · K
 * lessons" — progression made scannable without a progress bar. */
.mod-rail {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 6px;
}
.mod-num {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: -0.01em;
}
.mod-meta {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  color: var(--ink-faint);
}

/* ---- lesson card meta (academy index cards) ------------------------------
 * "Lesson 1.1 · ~4 min read" — the module.lesson numbering already used
 * throughout the lesson prose for cross-references (e.g. "lesson 5.1"),
 * reused here for the index instead of inventing a second scheme. */
.lesson-card-meta {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
  color: var(--ink-faint);
  margin: 0 0 8px;
}

@media (max-width: 640px) {
  .key-number { padding: 16px 18px; }
  .pullquote { padding-left: 16px; }
}