/* ══════════════════════════════════════════════
   OIG PATHWAY TEMPLATE — shared structure for all "problem
   pathway" pages (Carry Growth, Stop Relearning, and any future
   ones). Every pathway page uses this SAME set of classes with
   different content, so a future adaptive engine only needs to
   swap content, not rebuild structure per pathway.

   Depends on theme.css for color tokens — link that first.

   Section order matches the reusable structure agreed for every
   pathway page:
   1. pathway-hero          — the executive condition
   2. pathway-observation    — the OIG Observation
   3. pathway-visual         — one construction-specific diagram
   4. pathway-question       — the Executive Question
   5. pathway-brief          — related Intelligence Brief (real link)
   6. pathway-cta            — starting CTA
══════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); background: var(--cream); color: var(--charcoal); -webkit-font-smoothing: antialiased; }

/* ── Minimal nav shared across pathway pages ── */
.pathway-nav { padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; background: var(--cream); border-bottom: 1px solid var(--rule); }
.pathway-nav-logo { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--charcoal); text-decoration: none; }
.pathway-nav-back { font-family: var(--mono); font-size: 11px; color: var(--slate); text-decoration: none; }

/* ── 1. Hero ── */
.pathway-hero { background: var(--navy); padding: 90px 40px 80px; text-align: center; }
.pathway-hero-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #D98055; margin-bottom: 24px; }
.pathway-hero-headline { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 5vw, 58px); line-height: 1.1; color: var(--white); max-width: 780px; margin: 0 auto 28px; }
.pathway-hero-condition { font-size: 15px; line-height: 1.8; color: var(--on-dark-dim); max-width: 560px; margin: 0 auto; }

/* ── 2. OIG Observation ── */
.pathway-observation { padding: 70px 40px; max-width: 720px; margin: 0 auto; }
.pathway-observation-card { background: rgba(184,75,42,0.06); border-left: 2px solid var(--burnt); padding: 28px 32px; }
.pathway-observation-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--burnt-text); margin-bottom: 10px; font-weight: 600; }
.pathway-observation-text { font-family: var(--serif); font-size: 19px; font-style: italic; color: var(--charcoal); line-height: 1.55; }

/* ── 3. Intelligence Visual ── */
.pathway-visual { background: var(--navy); padding: 80px 40px; }
.pathway-visual-inner { max-width: 900px; margin: 0 auto; }
.pathway-visual-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-dim); text-align: center; margin-bottom: 40px; }
.pathway-flow-svg { width: 100%; height: auto; }
.pathway-flow-node-label { font-family: var(--mono); font-size: 11px; fill: var(--on-dark); text-transform: uppercase; letter-spacing: 0.04em; }
.pathway-flow-annotation { font-family: var(--serif); font-size: 12px; font-style: italic; fill: #D98055; }
.pathway-flow-line { stroke: rgba(255,255,255,0.25); stroke-width: 1.5; fill: none; }
.pathway-flow-line-accent { stroke: var(--burnt); stroke-width: 2; fill: none; }
.pathway-flow-dot { fill: var(--on-dark); }

/* ── 4. Executive Question ── */
.pathway-question { padding: 70px 40px; max-width: 720px; margin: 0 auto; text-align: center; }
.pathway-question-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-bottom: 18px; }
.pathway-question-text { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 3vw, 34px); line-height: 1.35; color: var(--charcoal); }

/* ── 5. Related Intelligence Brief ── */
.pathway-brief { background: var(--cream-dark); padding: 60px 40px; }
.pathway-brief-card { max-width: 640px; margin: 0 auto; background: var(--white); border: 1px solid var(--rule); padding: 32px 36px; }
.pathway-brief-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--burnt-text); margin-bottom: 12px; }
.pathway-brief-title { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--charcoal); margin-bottom: 14px; line-height: 1.3; }
.pathway-brief-link { font-family: var(--mono); font-size: 12px; color: var(--slate); text-decoration: none; border-bottom: 1px solid var(--rule); }
.pathway-brief-link:hover { color: var(--burnt-text); border-color: var(--burnt-text); }

/* ── 6. Starting CTA ── */
.pathway-cta { background: var(--navy); padding: 90px 40px; text-align: center; }
.pathway-cta-text { font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); color: var(--white); max-width: 560px; margin: 0 auto 32px; line-height: 1.4; }
.btn-primary { display: inline-block; background: var(--burnt); color: var(--white); font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; padding: 18px 36px; transition: background 0.2s; }
.btn-primary:hover { background: var(--burnt-hover); }
.pathway-cta-secondary { display: block; margin-top: 20px; font-family: var(--mono); font-size: 11px; color: var(--on-dark-dim); text-decoration: none; }
.pathway-cta-secondary:hover { color: var(--on-dark); }

.pathway-footer-note { background: var(--navy); padding: 30px 40px; text-align: center; }
.pathway-footer-note p { font-family: var(--mono); font-size: 10px; color: var(--on-dark-dim); max-width: 640px; margin: 0 auto; line-height: 1.7; }

@media (max-width: 640px) {
  .pathway-nav, .pathway-hero, .pathway-observation, .pathway-visual, .pathway-question, .pathway-brief, .pathway-cta { padding-left: 24px; padding-right: 24px; }
}