/* ═══ PROGRAMME OVERVIEW PAGES ═══════════════════════════════════════════════
   Shared chrome for the three pages task ten (sp-d1) sends people to read:
   program-founders.html · program-build-your-room.html ·
   program-services-hub-collab.html

   🔒 ONE STYLESHEET, NOT THREE COPIES. The three pages are structurally
   identical and differ only in content and accent colour, so the CSS lives in
   one place (§76, one-place-not-N). A fourth programme needs a new HTML file
   and an --accent value, nothing else.

   ⚠ NO BUILD STEP EXISTS IN THIS ESTATE. Plain CSS, no preprocessor, no
   bundler. Palette tokens match the deployed pages (founder-journey.html et al)
   so these do not read as a different product.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --teal:#2BBFB3; --navy:#1a2744; --gold:#E8A020;
  --border:#e3e8ee; --muted:#667085; --dark:#1a2744; --bg:#f7f9fb;
  --accent:var(--teal);            /* each page overrides this one line */
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;color:var(--dark);background:#fff;line-height:1.6}

.hero{background:linear-gradient(160deg,#12203a,#1a2744);color:#fff;padding:52px 24px 40px;text-align:center}
.hero .kicker{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}
.hero h1{font-family:'Cormorant Garamond',serif;font-size:2.5rem;font-weight:600;margin-bottom:12px;line-height:1.15}
.hero p{font-size:1.02rem;max-width:620px;margin:0 auto;color:#c7d0dd}

.wrap{max-width:760px;margin:0 auto;padding:34px 20px 56px}

section{margin-bottom:30px}
h2{font-family:'Cormorant Garamond',serif;font-size:1.72rem;font-weight:600;color:var(--navy);margin-bottom:10px}
h3{font-size:1rem;font-weight:700;color:var(--navy);margin:16px 0 5px}
p{margin-bottom:12px}
p.lead{font-size:1.02rem}

ul.plain{list-style:none;margin:0 0 12px}
ul.plain li{position:relative;padding-left:22px;margin-bottom:8px}
ul.plain li:before{content:'';position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}

.rungs{border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:12px}
.rung{display:flex;gap:14px;padding:13px 16px;border-top:1px solid var(--border);align-items:flex-start}
.rung:first-child{border-top:none}
.rung .r{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex-shrink:0}
.rung .rt{font-weight:700;color:var(--navy);font-size:.93rem}
.rung .rd{font-size:.87rem;color:#43505f}

/* The honesty block. Every page carries one: what the programme ASKS of you.
   A programme page that only lists benefits is a brochure, not an overview. */
.asks{background:var(--bg);border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;padding:18px 20px}
.asks h2{font-size:1.32rem;margin-bottom:8px}

.note{background:#fff8ea;border:1px solid #f0dcb4;border-radius:12px;padding:15px 18px;font-size:.9rem;color:#5c4a24}
.note strong{color:#7a5c15}

.next{border:1px solid var(--accent);border-radius:14px;padding:20px 22px;background:#fff}
.next h2{margin-bottom:6px}

.btn{display:inline-block;border-radius:9px;padding:10px 18px;font-family:inherit;font-size:.88rem;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent}
.btn-go{background:var(--accent);color:#fff}
.btn-out{background:#fff;color:var(--navy);border-color:var(--border)}

.foot{text-align:center;padding:26px 20px;color:var(--muted);font-size:.8rem;border-top:1px solid var(--border)}
.foot a{color:var(--teal);text-decoration:none}

@media(max-width:600px){
  .hero{padding:38px 18px 30px}
  .hero h1{font-size:1.95rem}
  .wrap{padding:26px 16px 44px}
  h2{font-size:1.45rem}
}