/* ═══ 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.
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠ ADDED 31 Aug 2026 by arc-frontend. These 10 pages linked NO shared
   stylesheet, so they missed the estate-wide focus ring and the placed-imagery
   components, and a lockup placed on one rendered full-bleed instead of 160px.
   🔒 THE IMPORT IS FIRST ON PURPOSE: arc-tokens.css declares :root, then the
      :root below overrides it, so every colour on these pages is UNCHANGED.
      What arrives is the shared COMPONENTS and the keyboard focus ring, not a
      new palette. Verified by measuring computed colour before and after. */
@import url("arc-tokens.css");

: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}
/* ══ READ THIS BEFORE YOU TOUCH .btn-go ════════════════════════════════════
   🚨 THIS FILE IS LINKED BY 10 PAGES AND --accent IS THREE DIFFERENT COLOURS.
      A single hard-coded label ink CANNOT be right for all of them, which is the
      whole reason --accent-ink exists. Do not collapse it back to one value.

   Measured 31 Aug 2026, controls #000/#fff = 21.00 and #fff/#fff = 1.00:
     --accent teal   #2BBFB3 (3 pages) : white 2.28 FAIL | navy 6.49 PASS -> NAVY
     --accent gold   #E8A020 (6 pages) : white 2.22 FAIL | navy 6.69 PASS -> NAVY
     --accent purple #7866d5 (1 page)  : white 4.51 PASS | navy 3.29 FAIL -> WHITE

   🔒 NAVY IS THE DEFAULT because it is right for 9 of the 10 (3 teal + 6 gold).
      Counted 31 Aug 2026 at commit ead848c; control: a nonsense token matched 0 files.
   🔒 program-services-hub-collab.html is the EXCEPTION and sets
      --accent-ink:#fff itself. On its purple the default navy scores 3.29 and
      would FAIL, so a blanket navy makes that one page WORSE while fixing the
      other nine. That is the trap; the token is the way round it.

   ⚠ HOW THE PURPLE GOT HERE: it was #7C6BD6, where white scored 4.26 against a
     4.5 requirement. It was darkened to #7866d5 (4.51) on 31 Aug 2026 - the
     LIGHTEST value on the same hue that clears the bar, 3/255 darker, CIE76
     deltaE 3.08, judged on screen as the same purple. If you change that accent
     again, RE-MEASURE BOTH INKS: which one wins can flip with a small shift.
   ⚠ AND MEASURE, DO NOT PATTERN-MATCH. --accent is set per page, so reading this
     file alone tells you nothing about what any given page renders. */
.btn-go{background:var(--accent);color:var(--accent-ink,var(--navy,#1a2744))}
.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}
}