/* /coaching — B2 Refined Light variant
   Overrides the light-mode defaults from shared/brand.css + shared/components.css.
   All rules are scoped to .page-coaching (or coaching-only classes) to avoid bleeding.
   Do NOT add /neubie styles here — Bundle 2 owns those.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Base light surface ───────────────────────────────────────────────────── */
body.page-coaching {
  background: var(--light-bg);
  color: var(--text-dark);
}

/* ── Dark strip header band — mirrors live site visual continuity ─────────── */
.strip-header {
  background: var(--dark-bg);
  padding: 0.7rem 0;
  border-bottom: 2px solid var(--brand-red);
}
.strip-header .wordmark {
  color: #fff;
  font-size: 1rem;
}
.strip-header .wordmark__accent {
  color: var(--brand-red-hover);
}

/* ── 01. HERO — softened-dark wash over hero-intensity image ─────────────── */
/* Same source image as /neubie, slightly lifted overlay (62%→82% vs neubie's 78%→92%)
   so the photo reads more clearly. Hero text inverts to light variants;
   light surfaces resume at .section--reframe below. */
.page-coaching .hero {
  background:
    linear-gradient(rgba(10, 10, 10, 0.62), rgba(10, 10, 10, 0.82)),
    url('../assets/hero-intensity.webp') center / cover no-repeat,
    var(--dark-bg);
  color: var(--text-light);
  padding: clamp(3rem, 8vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem);
  border-bottom: 2px solid var(--brand-red);
}

/* Tagline above eyebrow — muted uppercase small text */
.page-coaching .hero__tagline {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--text-muted-light);
  opacity: 0.85;
}

/* Eyebrow on dark hero — use brand-red-hover for legibility (same trade-off as .section--system) */
.page-coaching .hero .eyebrow {
  color: var(--brand-red-hover);
}

/* Hero h1 — solid white, italic em in brand-red-hover (reads cleaner on dark than brand-red) */
.page-coaching .hero .head-hero {
  font-style: normal;
  line-height: 0.92;
  margin-bottom: 0.25rem;
  color: var(--text-light);
}
.page-coaching .hero .head-hero em.hero__em {
  font-style: italic;
  color: var(--brand-red-hover);
}

.page-coaching .hero__sub {
  font-size: 1.15rem;
  margin-top: 1rem;
  max-width: 38rem;
  color: var(--text-muted-light);
  line-height: 1.55;
}
.page-coaching .hero .btn {
  margin-top: 1.5rem;
}
.page-coaching .hero__proof {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted-light);
  opacity: 0.65;
  line-height: 1.55;
}

/* ── Section surfaces — explicit modifier classes (no nth-of-type fragility) ─
   Surface rhythm: light → light → DARK → light → RED → light → light → light → DARK */
.page-coaching .section--reframe { background: var(--light-bg); }
.page-coaching .section--story   { background: var(--light-bg-soft); }
.page-coaching .section--offer   { background: var(--light-bg); }
.page-coaching .section--tiers   { background: var(--light-bg-soft); }
/* Section 8 (FAQ) has no modifier class — inherits body default (--light-bg) */

/* ── 03. BLACKBOX SYSTEM — dark accent break ─────────────────────────────── */
.page-coaching .section--system {
  background: var(--dark-bg);
  color: var(--text-light);
}
.page-coaching .section--system .head-section {
  color: var(--text-light);
}
.page-coaching .section--system p {
  color: var(--text-muted-light);
}
/* WCAG note: .eyebrow on dark uses brand-red-hover (#d51a1d, ~3.5:1 on #141414).
   Fails strict AA (needs 4.5:1) but brand-red (#b20000) is even lower at ~2.54:1.
   Eyebrow is decorative/label-scale uppercase text — not body content.
   Accepted trade-off for brand fidelity; documented here for review visibility. */
.page-coaching .section--system .eyebrow {
  color: var(--brand-red-hover);
}
.page-coaching .section--system .rule {
  background: var(--brand-red-hover);
}
.page-coaching .section--system strong {
  color: var(--text-light);
}

/* ── 05. DREW MCINTYRE — full-red horizontal credibility bar ─────────────── */
.page-coaching .section--credibility {
  background: var(--brand-red);
  color: #fff;
  padding: 2rem 0;
}
.page-coaching .section--credibility .cred-line {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.6rem);
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.page-coaching .section--credibility .cred-line strong {
  letter-spacing: 0.08em;
}

/* ── 09. FINAL CTA — dark, mirrors offer commitment weight ───────────────── */
.page-coaching .section--final {
  background: var(--dark-bg);
  color: var(--text-light);
  border-top: 2px solid var(--brand-red);
}
.page-coaching .section--final .head-section {
  color: var(--text-light);
}
.page-coaching .section--final p {
  color: var(--text-muted-light);
}
/* WCAG: same trade-off as system section eyebrow above (brand-red-hover ~3.5:1 on dark) */
.page-coaching .section--final .eyebrow {
  color: var(--brand-red-hover);
}

/* ── Italic emphasis utility — used in hero, story, system, reframe ──────── */
/* Light sections: brand-red italic */
.page-coaching em.text-accent {
  font-style: italic;
  color: var(--brand-red);
}
/* Dark sections override — lighter red reads better on #141414 */
.page-coaching .section--system em.text-accent {
  color: var(--brand-red-hover);
}

/* ── Utility classes — replace inline style="text-align:center" pattern ──── */
.page-coaching .text-center { text-align: center; }
/* Block-level centering: used on eyebrow and head-section in tier + consult sections */
.page-coaching .text-center-block {
  text-align: center;
  display: block;
}

/* ── Text-width utilities ─────────────────────────────────────────────────── */
.page-coaching .text-wide { max-width: 42rem; }
/* Centered narrow paragraph — used in consult section */
.page-coaching .text-wide-narrow {
  max-width: 32rem;
  margin: 0.5rem auto 0;
}

/* Slightly larger strong copy — pain-point reframe quote */
.page-coaching .text-emphasis {
  font-size: 1.1rem;
  margin-top: 1rem;
}

/* ── Credibility line ─────────────────────────────────────────────────────── */
/* .cred-line styles scoped under .section--credibility above */

/* ── 04. STORY GRID — photo left, copy right (stacked on mobile) ─────────── */
.story-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: center;
  margin-top: 1.5rem;
}
@media (min-width: 800px) {
  .story-grid {
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
  }
}
.story-photo {
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
  min-height: 220px;
}
.story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-body p {
  margin-bottom: 0.8rem;
}

/* ── 06. OFFER BULLETS LIST ──────────────────────────────────────────────── */
.page-coaching .bullets {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}
.page-coaching .bullets li {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  line-height: 1.5;
}
.page-coaching .bullets li:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.page-coaching .bullets li strong {
  color: var(--brand-red);
}
.page-coaching .section--offer .btn {
  margin-top: 2rem;
}

/* ── 07. TIER GRID — two-up on wide, single-column mobile ───────────────── */
/* Base grid styles are in shared/components.css (.tier-grid, .tier, .tier--featured).
   Light-variant overrides: cards already match light surface, no background swap needed. */
.page-coaching .section--tiers .divider-rule {
  margin-bottom: 2rem;
}

/* Tier price suffix — inherits shared .tier__price but needs font-size tuning */
.page-coaching .tier__price-suffix {
  font-size: 1rem;
  opacity: 0.7;
  font-family: var(--font-body);
  font-weight: 400;
}

/* ── 08. FAQ — light surface overrides ───────────────────────────────────── */
/* Shared .faq styles use rgba(0,0,0,.1) borders — correct for light; no override needed.
   Summary text uses var(--text-dark) from body — correct. No page-level overrides needed. */

/* ── 09. CALENDLY PLACEHOLDER ────────────────────────────────────────────── */
.page-coaching .calendly-embed {
  margin-top: 2rem;
}
.page-coaching .calendly-placeholder {
  background: rgba(0, 0, 0, 0.04);
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--text-muted-dark);
  font-size: 0.9rem;
  font-style: italic;
}
/* Dark-context override — section--final has dark-bg (#141414); light-themed placeholder is invisible without this */
.page-coaching .section--final .calendly-placeholder {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-muted-light);
}