/* ============================================================
   LEAVING EGYPT — public site
   App Style Guide v1.0 "Modern Expedition"
   Dark is the branded default. Light is the reading theme.
   ============================================================ */

/* ---------- 01 TOKENS (§03 colour, §04 type, §05 components) ---------- */
:root {
  /* primary */
  --exodus-black:#080C0C;
  --night-ink:#101616;
  --exodus-green:#B7F000;
  --deep-green:#278C3A;
  /* supporting */
  --charcoal:#1B2321;
  --stone:#59635F;
  --sand:#D7CBAA;
  --gold:#C9A227;
  /* functional */
  --error:#D95852;
  --off-white:#F6F7F2;

  /* semantic — dark theme (branded default) */
  --ground:var(--exodus-black);
  --surface:var(--night-ink);
  --card:var(--charcoal);
  --ink:var(--off-white);
  --ink-dim:#9AA5A0;
  --ink-faint:#949E99;
  --rule:#232C2A;
  --action:var(--exodus-green);
  --on-action:#080C0C;
  --accent:var(--gold);
  --warm:var(--sand);
  --focus:var(--exodus-green);

  /* pillar accents — orientation only (§06) */
  --faith:var(--exodus-green);
  --family:var(--sand);
  --fitness:var(--deep-green);
  --finance:var(--gold);

  /* type */
  --display:"Barlow Condensed","Roboto Condensed","Arial Narrow",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  /* scale §04: 40–48 / 30–34 / 22–24 / 16–18 / 12–14 */
  --t-display:clamp(40px,7.2vw,48px);
  --t-h1:clamp(30px,4.4vw,34px);
  --t-h2:clamp(22px,3vw,24px);
  --t-body:17px;
  --t-label:13px;

  /* spacing 4/8/12/16/24/32/48 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px;
  --s16:64px; --s24:96px;

  /* radius §05 */
  --r:8px; --r-lg:12px; --r-pill:999px;

  /* motion §05: 160–240ms, purposeful, no bounce */
  --fast:160ms; --slow:240ms;
  --ease:cubic-bezier(.2,.6,.3,1);

  --measure:62ch;
  --gutter:clamp(20px,5vw,48px);
  --page:1160px;
}

/* Light reading theme. Exodus Green fails AA as text on off-white,
   so links and accents become Deep Green; #B7F000 survives only as a
   fill behind black type (§03). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:#F6F7F2; --surface:#FFFFFF; --card:#FFFFFF;
    --ink:#0E1412; --ink-dim:#49534E; --ink-faint:#5C645F;
    --rule:#DCE0D6;
    --action:#1F7430; --on-action:#FFFFFF;
    --accent:#8A6D12; --warm:#7D6E48; --focus:var(--deep-green);
    --faith:var(--deep-green); --family:#7D6E48;
    --fitness:var(--deep-green); --finance:#8A6D12;
  }
}
:root[data-theme="light"]{
  --ground:#F6F7F2; --surface:#FFFFFF; --card:#FFFFFF;
  --ink:#0E1412; --ink-dim:#49534E; --ink-faint:#5C645F;
  --rule:#DCE0D6;
  --action:#1F7430; --on-action:#FFFFFF;
  --accent:#8A6D12; --warm:#7D6E48; --focus:var(--deep-green);
  --faith:var(--deep-green); --family:#7D6E48;
  --fitness:var(--deep-green); --finance:#8A6D12;
}

/* ---------- 02 RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--ground);color:var(--ink);
  overflow-x:hidden;
  font-family:var(--body);font-size:var(--t-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--action);color:var(--on-action)}

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:78ch;margin-inline:auto}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--action);color:var(--on-action);
  padding:var(--s3) var(--s4);border-radius:0 0 var(--r) 0;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;
}
.skip:focus{left:0}

/* ---------- 03 TYPE (§04) ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.012em;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:var(--t-display)}
h2{font-size:var(--t-h1)}
h3{font-size:var(--t-h2)}
h4{font-size:19px}
p{margin:0 0 var(--s4);max-width:var(--measure)}
.lede{font-size:clamp(18px,2.2vw,21px);color:var(--ink-dim);line-height:1.55;max-width:56ch}
a{color:var(--action);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
strong{font-weight:600}
em{font-style:italic}

/* Uppercase is for display, tabs, labels, buttons — never paragraphs (§04) */
.eyebrow{
  font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 var(--s3);
}
.eyebrow .num{color:var(--action);font-variant-numeric:tabular-nums}
.section-title{margin-bottom:var(--s4)}
.tabular{font-variant-numeric:tabular-nums}

/* ---------- 04 BUTTONS (§05: 52–56px primary, 44×44 minimum) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:54px;padding:0 var(--s8);border-radius:var(--r);
  font-family:var(--display);font-weight:800;font-size:17px;
  text-transform:uppercase;letter-spacing:.05em;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--fast) var(--ease),background var(--fast) var(--ease),
             border-color var(--fast) var(--ease),color var(--fast) var(--ease);
}
.btn-primary{background:var(--action);color:var(--on-action)}
.btn-primary:hover{transform:translateY(-1px);background:var(--action);filter:brightness(1.06)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-secondary:hover{border-color:var(--action);color:var(--action)}
.btn-sm{min-height:44px;padding:0 var(--s4);font-size:15px}

/* ---------- 05 NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;
  transition:border-color var(--fast) var(--ease),padding var(--slow) var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--rule)}
.nav-in{display:flex;align-items:center;gap:var(--s6);
  min-height:76px;transition:min-height var(--slow) var(--ease)}
.nav.is-stuck .nav-in{min-height:60px}
.wordmark{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:21px;letter-spacing:.05em;line-height:1;color:var(--ink);
  text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:10px;
}
/* the simplified icon: the full badge is never used under 160 px (§02) */
.wordmark .mark{width:40px;height:40px;flex:none;display:block}
.wordmark small{display:block;font-family:var(--body);font-weight:600;font-size:9px;
  letter-spacing:.2em;color:var(--ink-faint);margin-top:3px}
.nav-links{display:flex;gap:var(--s6);margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav-links a{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:15px;letter-spacing:.07em;color:var(--ink-dim);text-decoration:none;
  display:flex;align-items:center;min-height:44px;
  transition:color var(--fast) var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--action)}
.nav-actions{display:flex;align-items:center;gap:var(--s2)}
.icon-btn{
  width:44px;height:44px;display:grid;place-items:center;background:none;
  border:1px solid var(--rule);border-radius:var(--r);color:var(--ink-dim);cursor:pointer;
  transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.icon-btn:hover{color:var(--action);border-color:var(--action)}
.nav-toggle{display:none}
.nav-cta{display:none}
@media (max-width:620px){
  /* "Start the Conversation" cannot share a 390px bar with the wordmark
     and two icon buttons without forcing the page to scroll sideways. */
  .nav-actions .btn{display:none}
  .nav-cta{display:block}
  .nav-cta a{color:var(--action)!important}
  .wordmark small{display:none}
  .wordmark{font-size:19px}
}
@media (max-width:900px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--surface);
    border-bottom:1px solid var(--rule);padding:var(--s2) var(--gutter) var(--s6);
  }
  .nav-links.is-open{display:flex}
  .nav-links a{min-height:52px;font-size:17px;border-bottom:1px solid var(--rule)}
  .nav-toggle{display:grid}
  .nav-in{gap:var(--s3)}
  .nav-actions{margin-left:auto}
}

/* ---------- 06 SECTIONS ---------- */
section{padding-block:var(--s24)}
section+section{border-top:1px solid var(--rule)}
@media (max-width:700px){section{padding-block:var(--s16)}}
.section-head{margin-bottom:var(--s12);max-width:64ch}

/* ---------- 07 HERO ---------- */
.hero{
  padding-block:clamp(var(--s16),14vh,var(--s24)) var(--s24);
  border-top:none;position:relative;overflow:hidden;
}
/* §07 progress motif: a single line moving out of darkness toward light.
   No photography yet, so the motif carries the hero on its own. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(to right,transparent,var(--stone) 30%,var(--action) 100%);
  opacity:.5;
}
.hero h1{margin-bottom:var(--s6);max-width:16ch}
.hero .creed{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(19px,2.6vw,24px);letter-spacing:.06em;color:var(--action);
  margin:0 0 var(--s8);
}
.hero .lede{margin-bottom:var(--s12)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.hero-note{font-size:14px;color:var(--ink-faint);margin:var(--s6) 0 0}
/* the full badge beside the hero copy; on narrow screens the nav icon carries
   the mark and the question stays first */
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s12);align-items:center}
.hero-badge{display:block;width:clamp(220px,26vw,340px);height:auto}
@media (max-width:820px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero-badge{display:none}
}

/* ---------- 08 THE ARC (big idea) ---------- */
.arc{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2);list-style:none;padding:0;
  margin:var(--s12) 0 var(--s8);position:relative}
.arc::before{
  content:"";position:absolute;left:0;right:0;top:21px;height:2px;
  background:linear-gradient(to right,var(--rule),var(--stone) 40%,var(--action));
}
.arc-step{position:relative;padding-top:var(--s12);text-align:left;list-style:none}
.arc-step::before{
  content:"";position:absolute;top:15px;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--ground);border:2px solid var(--stone);
}
.arc-step:last-child::before{border-color:var(--action);background:var(--action)}
.arc-step b{
  display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:19px;letter-spacing:.04em;
}
.arc-step span{display:block;font-size:14px;color:var(--ink-faint);margin-top:2px}
.translation{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,4vw,32px);letter-spacing:.05em;line-height:1.1;
  color:var(--ink);margin:0;
}
@media (max-width:760px){
  .arc{grid-template-columns:1fr;gap:0}
  .arc::before{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto;
    background:linear-gradient(to bottom,var(--rule),var(--stone) 40%,var(--action))}
  .arc-step{padding:0 0 var(--s6) var(--s8)}
  .arc-step::before{top:5px}
}

/* ---------- 09 PILLARS (§06) ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pillars{grid-template-columns:1fr}}
.pillar{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s6);border-top:3px solid var(--c);
  transition:transform var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.pillar:hover{transform:translateY(-2px)}
.pillar .ico{color:var(--c);margin-bottom:var(--s4)}
.pillar h3{margin-bottom:var(--s2);font-size:21px}
.pillar p{font-size:15.5px;color:var(--ink-dim);margin:0}
.pillar .cues{
  margin:var(--s4) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;
}
.pillar .cues li{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:3px 9px;
}

/* ---------- 10 ROADMAP — the path (§07) ---------- */
.route{position:relative;padding-left:var(--s16);list-style:none;padding-right:0;margin:0}
.route::before{
  content:"";position:absolute;left:23px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(to bottom,var(--rule) 0%,var(--stone) 45%,var(--accent) 100%);
}
.stage{position:relative;padding-bottom:var(--s8);display:grid;
  grid-template-columns:150px 1fr 130px;gap:var(--s6);align-items:baseline}
.stage::before{
  content:"";position:absolute;left:calc(var(--s16) * -1 + 17px);top:6px;
  width:14px;height:14px;border-radius:50%;
  background:var(--ground);border:2px solid var(--stone);
}
.stage.is-level::before{border-color:var(--action);background:var(--action)}
.stage.is-guide::before{border-color:var(--accent);background:var(--accent);
  width:18px;height:18px;left:calc(var(--s16) * -1 + 15px);top:4px}
.stage-when{font-family:var(--display);font-weight:800;font-size:17px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink-dim);
  font-variant-numeric:tabular-nums}
.stage.is-guide .stage-when{color:var(--accent)}
.stage-name{font-family:var(--display);font-weight:800;font-size:21px;
  text-transform:uppercase;letter-spacing:.02em;margin:0 0 2px;line-height:1.1}
.stage-focus{font-size:15.5px;color:var(--ink-dim);margin:0;max-width:46ch}
.stage-meta{text-align:right;display:flex;flex-direction:column;gap:2px}
.stage-len{font-size:13px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.stage-act{
  font-family:var(--display);font-weight:800;font-size:15px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--action);
}
.stage.is-guide .stage-act{color:var(--accent)}
@media (max-width:820px){
  /* a five-column table cannot survive 375px — it becomes cards */
  .route{padding-left:var(--s8)}
  .route::before{left:5px}
  .stage{grid-template-columns:1fr;gap:var(--s1);padding-bottom:var(--s6)}
  .stage::before{left:calc(var(--s8) * -1 + 0px);top:5px;width:12px;height:12px}
  .stage.is-guide::before{left:calc(var(--s8) * -1 - 2px);width:16px;height:16px}
  .stage-meta{text-align:left;flex-direction:row;gap:var(--s3);align-items:baseline}
}

/* ---------- 11 CARDS (experiences, generic) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:var(--s4)}
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);
  text-decoration:none;color:inherit;
  transition:transform var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
a.card:hover{transform:translateY(-2px);border-color:var(--stone)}
.card.is-featured{border-left:4px solid var(--action)}
.card-tag{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint)}
.card h3{font-size:21px}
.card .line{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:17px;letter-spacing:.03em;color:var(--warm);line-height:1.15;margin:0}
.card p{font-size:15.5px;color:var(--ink-dim);margin:0}
.card-foot{margin-top:auto;padding-top:var(--s3);display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--s3);border-top:1px solid var(--rule)}
.card-foot span{font-size:13px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.card-foot b{font-family:var(--display);font-weight:800;font-size:14px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--action)}

/* ---------- 12 SPLIT (the gap is the point) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12)}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:var(--s8)}}
.panel{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s8);
}
.panel h3{margin-bottom:var(--s3)}
.panel .stat{
  font-family:var(--display);font-weight:800;font-size:44px;line-height:1;
  color:var(--action);font-variant-numeric:tabular-nums;margin-bottom:var(--s2);
}
.panel p:last-child{margin-bottom:0}
.pull{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(21px,3vw,26px);line-height:1.15;letter-spacing:.03em;
  border-left:3px solid var(--action);padding-left:var(--s6);margin:var(--s12) 0 0;
  max-width:36ch;
}

/* ---------- 13 THE LOOP (multiplication) ---------- */
.loop{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  padding:var(--s8);border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--surface);margin-bottom:var(--s8);
}
.loop li{
  list-style:none;font-family:var(--display);font-weight:800;font-size:15px;
  text-transform:uppercase;letter-spacing:.06em;padding:9px 14px;
  border:1px solid var(--rule);border-radius:var(--r-pill);color:var(--ink-dim);
}
.loop li.is-start{border-color:var(--action);color:var(--action)}
.loop li.is-end{border-color:var(--accent);color:var(--accent)}
.loop .arrow{color:var(--ink-faint);font-size:15px;list-style:none;border:none;padding:0}
.loop .arrow.is-return{color:var(--accent)}

/* ---------- 14 GATES (advancement) ---------- */
.gates{counter-reset:gate;list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s4)}
.gates li{
  position:relative;padding:var(--s6) var(--s6) var(--s6) var(--s12);
  border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--card);
}
.gates li::before{
  counter-increment:gate;content:counter(gate);
  position:absolute;left:var(--s6);top:var(--s6);
  font-family:var(--display);font-weight:800;font-size:17px;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.gates b{display:block;font-family:var(--display);font-weight:800;font-size:16px;
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.gates p{font-size:15px;color:var(--ink-dim);margin:0}

/* ---------- 15 QUESTIONS (the language) ---------- */
.questions{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.loop{list-style:none}
.questions li{border-bottom:1px solid var(--rule);padding:var(--s6) 0;
  display:grid;grid-template-columns:minmax(240px,38%) 1fr;gap:var(--s6);align-items:baseline}
@media (max-width:760px){.questions li{grid-template-columns:1fr;gap:var(--s2)}}
.questions q{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(21px,2.8vw,26px);letter-spacing:.03em;line-height:1.1;quotes:none;
}
.questions p{margin:0;color:var(--ink-dim);font-size:16px}

/* ---------- 16 PRICE (§04 tabular figures, no anchoring tricks) ---------- */
.price{width:100%;border-collapse:collapse;margin-bottom:var(--s6)}
.price caption{text-align:left;font-size:13px;color:var(--ink-faint);padding-bottom:var(--s3)}
.price th{
  text-align:left;font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  padding:0 var(--s4) var(--s3) 0;border-bottom:1px solid var(--rule);
}
.price td{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--rule);
  vertical-align:baseline}
.price .num{text-align:right;padding-right:0;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.price tbody tr:last-child td{border-bottom:none}
.price tfoot td{
  padding-top:var(--s6);font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:21px;letter-spacing:.03em;border:none;
}
.price tfoot .num{font-size:34px;color:var(--action)}
.price-note{color:var(--ink-dim);max-width:54ch}

/* ---------- 17 CLOSE ---------- */
.close{text-align:center;border-top:1px solid var(--rule)}
.close h2{font-size:clamp(34px,6vw,48px);margin-bottom:var(--s6)}
.close .lede{margin-inline:auto;margin-bottom:var(--s8)}
.close .hero-cta{justify-content:center}

/* ---------- 18 FOOTER ---------- */
.foot{background:var(--surface);border-top:1px solid var(--rule);padding-block:var(--s12)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--s8);justify-content:space-between}
.foot-badge{display:block;width:160px;margin-bottom:var(--s4)}
.foot-badge img{display:block;width:160px;height:auto}
.foot .creed{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:17px;letter-spacing:.06em;color:var(--action);margin:var(--s3) 0 0}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);list-style:none;padding:0;margin:0}
.foot-links a{
  font-size:13px;font-weight:500;color:var(--ink-dim);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
}
.foot-links a:hover{color:var(--action);text-decoration:underline}
.foot-legal{width:100%;border-top:1px solid var(--rule);padding-top:var(--s6);
  margin-top:var(--s4);font-size:13px;color:var(--ink-faint)}
.foot-legal p{max-width:none;margin:0}

/* ---------- 19 UTILITY / LONG-FORM PAGES ---------- */
.page-head{padding-block:var(--s16) var(--s8);border-bottom:1px solid var(--rule)}
.page-head h1{margin-bottom:var(--s4)}
.prose{padding-block:var(--s12);font-size:17px}
.prose h2{font-size:var(--t-h2);margin:var(--s12) 0 var(--s4)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:var(--s8) 0 var(--s3)}
.prose ul,.prose ol{max-width:var(--measure);padding-left:22px;margin:0 0 var(--s4)}
.prose li{margin-bottom:var(--s2)}
.prose li::marker{color:var(--ink-faint)}
.days{list-style:none;padding:0;margin:0;counter-reset:day}
.days li{
  border-top:1px solid var(--rule);padding:var(--s6) 0;
  display:grid;grid-template-columns:130px 1fr;gap:var(--s6);
}
@media (max-width:700px){.days li{grid-template-columns:1fr;gap:var(--s2)}}
.days .d{font-family:var(--display);font-weight:800;font-size:17px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--action);font-variant-numeric:tabular-nums}
.days h3{margin:0 0 var(--s2);font-size:21px}
.days p{margin:0;color:var(--ink-dim)}

/* a visible marker for copy that does not exist yet */
.stub{
  border:1px dashed var(--error);border-radius:var(--r-lg);
  padding:var(--s6);margin-bottom:var(--s8);background:var(--surface);
}
.stub b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--error);margin-bottom:var(--s2);font-size:15px}
.stub p{margin:0;color:var(--ink-dim);font-size:15.5px}

/* ---------- 20 FORM (§05 targets) ---------- */
.form{display:grid;gap:var(--s4);max-width:560px}
.field{display:grid;gap:6px}
.field label{
  font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);
}
.field input,.field textarea,.field select{
  font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:14px var(--s4);min-height:52px;width:100%;
  transition:border-color var(--fast) var(--ease);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--action)}
.field .hint{font-size:13px;color:var(--ink-faint)}
/* contact-form spam trap: off-screen, not display:none, so simple bots still fill it */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- 21 UTILITIES ----------
   These exist only to replace inline style attributes. A strict
   Content-Security-Policy (style-src 'self') blocks every style="..." in the
   markup, which silently killed the four pillar accent colours the first time
   this site was served with real headers. Classes carry the same declarations
   and cost nothing.

   !important is deliberate and confined to this block. Each rule replaces an
   inline style, which outranked every selector in the file; without it a
   utility loses to compound selectors like `.prose h3` and the spacing shifts.
   Add a utility here rather than reaching for style="" — see nginx CSP in
   ../deploy/ledraft.chs.us.conf. */
.u-mb-0{margin-bottom:0!important}
.u-mb-3{margin-bottom:var(--s3)!important}
.u-mb-4{margin-bottom:var(--s4)!important}
.u-mt-2{margin-top:var(--s2)!important}
.u-mt-6{margin-top:var(--s6)!important}
.u-mt-8{margin-top:var(--s8)!important}
.u-pb-0{padding-block:0!important}
.u-list-flush{padding-block:0!important;margin:var(--s4) 0 0!important}
.u-quiet{color:var(--ink-dim)!important}
.u-plain{text-transform:none!important;letter-spacing:0!important;font-weight:400!important}
/* the standfirst paragraph that opens each level page */
.u-intro{font-size:19px!important;max-width:none!important}

/* Pillar accents (§04). Orientation only — Exodus Green stays the action
   colour, and the four always appear together in Faith / Family / Fitness /
   Finance order. */
.pillar--faith{--c:var(--faith)}
.pillar--family{--c:var(--family)}
.pillar--fitness{--c:var(--fitness)}
.pillar--finance{--c:var(--finance)}