/* Growth — page-unique material only, loaded after site.css.
   Act I (the three guesses, dark, scrubbed), Act II (the three-layer
   examination, lit, pinned), then the deliverable views (funnel trio,
   six-events stats, the ranked roadmap), two kinds of problem, what you
   keep, the engagement ladder. Shared vocabulary (.decide, .ladder,
   .tm-in, .tm-note, .stats, .pair figures) lives in site.css. */

/* ============ ACT I payoff ============ */

.g-payoff { margin-top: var(--space-6); font-size: var(--text-body); color: var(--slope); max-width: 54ch; font-weight: 500; }
.g-payoff strong { color: var(--paper); font-weight: 800; }

/* ============ ACT II · THE EXAMINATION (lit, pinned) ============ */

.exam { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .exam { grid-template-columns: repeat(3, 1fr); } }
.examcard {
  background: var(--card); border: 1px solid rgba(14,19,24,0.1); border-radius: 16px;
  padding: var(--space-6); display: grid; gap: var(--space-4); align-content: start;
  box-shadow: 0 2px 10px rgba(14,19,24,0.04);
}
.examcard__k { display: flex; align-items: baseline; gap: var(--space-3); }
.examcard__letter { font-family: var(--font-label); font-weight: 800; color: var(--logo);
  font-size: var(--text-h4); }
.examcard__tag { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--label-ink); }
.examcard h3 { font-size: var(--text-h4); color: var(--ink); }
.examview { padding-top: var(--space-3); border-top: 1px solid rgba(14,19,24,0.1);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: baseline; }
.examview__n { font-family: var(--font-label); font-size: var(--text-caption); color: var(--label-ink);
  font-variant-numeric: tabular-nums; }
.examview strong { display: block; color: var(--ink); font-size: var(--text-small); }
.examview p { font-size: var(--text-small); color: var(--body-ink); margin-top: 2px; }

/* ============ THE DELIVERABLE ============ */

.viewhead { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-16); }
.viewhead:first-of-type { margin-top: var(--space-4); }
.viewhead .tm-eyebrow { color: var(--label-ink); }
.viewhead h3 { font-size: var(--text-h3); color: var(--ink); width: 100%; margin-top: var(--space-2); }
.viewhead p { color: var(--body-ink); font-size: var(--text-small); max-width: 64ch; }

/* The funnel trio — the collapse, counted. Reuses .pair figure grammar. */
.funnel3 { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
@media (min-width: 760px) { .funnel3 { grid-template-columns: repeat(3, 1fr); } }
.funnel3 .pair__side { padding-top: var(--space-5); border-top: 1px solid rgba(14,19,24,0.18); }

/* Spend table — record grammar, ranked */
.spendrows { margin-top: var(--space-8); max-width: 860px; display: grid; }
.spendrow { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-6);
  align-items: baseline; padding: var(--space-4) 0; border-top: 1px solid rgba(14,19,24,0.12);
  font-family: var(--font-label); font-size: var(--text-small); }
.spendrow__c { color: var(--body-ink); }
.spendrow__s { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.spendrow__r { color: var(--label-ink); font-variant-numeric: tabular-nums; text-align: right; min-width: 9ch; }
.spendrow--head { border-top: none; padding-bottom: var(--space-2); }
.spendrow--head span { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--label-ink); }

/* The roadmap — ranked, sequenced, tagged */
.roadmap { margin-top: var(--space-8); max-width: 900px; display: grid; }
.rstep { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-5);
  align-items: baseline; padding: var(--space-5) 0; border-top: 1px solid rgba(14,19,24,0.12); }
.rstep__n { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  color: var(--logo); font-variant-numeric: tabular-nums; }
.rstep__t strong { display: block; color: var(--ink); font-size: var(--text-body); font-weight: 700; }
.rstep__t span { display: block; color: var(--body-ink); font-size: var(--text-small); margin-top: 2px; max-width: 52ch; }
.rstep__tag { font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--label-ink);
  border: 1px solid rgba(14,19,24,0.2); border-radius: var(--radius-round);
  padding: 3px var(--space-3); white-space: nowrap; }

/* ============ TWO KINDS OF PROBLEM ============ */

.kinds { display: grid; gap: var(--space-6); margin-top: var(--space-4); }
@media (min-width: 800px) { .kinds { grid-template-columns: 1fr 1fr; } }
.kind {
  background: var(--card); border: 1px solid rgba(14,19,24,0.1); border-radius: 16px;
  padding: var(--space-8); box-shadow: 0 2px 10px rgba(14,19,24,0.04);
}
.kind__k { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--label-ink); }
.kind h3 { margin-top: var(--space-3); font-size: var(--text-h3); color: var(--ink); }
.kind p { margin-top: var(--space-3); font-size: var(--text-small); color: var(--body-ink); }

/* ============ WHAT YOU KEEP ============ */

.keeps { display: grid; gap: var(--space-8); margin-top: var(--space-4); }
@media (min-width: 800px) { .keeps { grid-template-columns: repeat(3, 1fr); } }
.keep { padding-top: var(--space-5); border-top: 1px solid rgba(14,19,24,0.18); }
.keep__n { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  color: var(--logo); font-variant-numeric: tabular-nums; }
.keep h3 { margin-top: var(--space-2); font-size: var(--text-h4); color: var(--ink); }
.keep p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--body-ink); }