/* ============================================================
   Nurture landing page: the five skeletons.

   system.css is the funnel pages' design system, inherited verbatim.
   Everything here is either (a) a component the nurture pages need that
   the funnel pages did not, or (b) the structural difference between
   concept A, B, C, D and E.

   Accent is BEIGE (--ember is #CCCABB in the style guide v1.0). No orange
   anywhere. No single edge accent bars. No glow.
   ============================================================ */

/* ---------- shared: the big statement quote ---------- */
.statementq{ max-width:22ch; }
.qsource{ margin-top:26px; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm); opacity:.8; }
.pullq{ margin-top:44px; padding:clamp(30px,4vw,52px) 0; border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); }
.pullq p{ font-family:'Manrope',sans-serif; font-size:clamp(19px,2.5vw,30px); line-height:1.38; font-weight:300; color:var(--white); max-width:34ch; }
.centered .pullq p{ margin-inline:auto; }
.pullq cite{ display:block; margin-top:20px; font-style:normal; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--warm); opacity:.8; }

/* ---------- shared: the two world comparison ---------- */
.worlds{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px; }
@media (max-width:820px){ .worlds{ grid-template-columns:1fr; } }
.world{ border:1px solid var(--line); border-radius:6px; padding:clamp(24px,3vw,34px); background:rgba(255,255,255,.012); display:flex; flex-direction:column; }
.world .wn{ font-family:'Acier Out',sans-serif; font-size:12px; letter-spacing:.06em; color:var(--warm); opacity:.6; }
.world h3{ margin:14px 0 16px; }
.world p{ font-size:15px; line-height:1.6; color:var(--off); font-weight:300; }
.world p + p{ margin-top:14px; }
.world ul{ list-style:none; margin:18px 0 0; }
.world li{ font-size:13.5px; color:var(--warm); line-height:1.5; padding:9px 0; border-bottom:1px solid var(--line2); }
.world li:last-child{ border-bottom:none; }
.world .wtail{ margin-top:auto; padding-top:18px; font-size:13.5px; color:var(--off); }

/* ---------- shared: the ask blocks (the pry) ---------- */
.ask{ margin-top:clamp(38px,5vw,64px); border:1px solid var(--line); border-radius:6px;
  padding:clamp(26px,3.4vw,40px); background:var(--panel); }
.centered .ask{ text-align:left; }
.ask .aq{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white);
  font-size:clamp(20px,2.6vw,32px); line-height:1; letter-spacing:.01em; }
.ask .ah{ margin-top:14px; font-size:14px; color:var(--warm); line-height:1.55; max-width:56ch; }
.opts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.opt{ border:1px solid var(--line); border-radius:3px; padding:13px 18px; font-size:14px; color:var(--off);
  background:rgba(255,255,255,.015); text-align:left; line-height:1.35; font-weight:400;
  transition:border-color .18s, color .18s, background .18s; }
.opt:hover{ border-color:rgba(204,202,187,.5); color:var(--white); }
.opt[aria-pressed="true"]{ background:var(--beige); border-color:var(--beige); color:var(--midblack); font-weight:600; }
.reveal-answer{ margin-top:26px; padding-top:24px; border-top:1px solid var(--line2); display:none; }
.reveal-answer.on{ display:block; }
.reveal-answer p{ font-size:15.5px; line-height:1.65; color:var(--off); font-weight:300; max-width:62ch; }
.reveal-answer p + p{ margin-top:14px; }

/* ---------- shared: the session board ---------- */
.boardwrap{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(20px,3vw,40px); margin-top:40px; align-items:start; }
@media (max-width:900px){ .boardwrap{ grid-template-columns:1fr; } }
.board{ border:1px solid var(--line); border-radius:6px; background:var(--black2); padding:clamp(22px,2.6vw,30px); }
.board .bh{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-bottom:16px; border-bottom:1px solid var(--line); }
.board .bt{ font-family:'Acier',sans-serif; text-transform:uppercase; font-size:clamp(20px,2.4vw,28px); color:var(--white); line-height:1; }
.board .bclock{ font-size:15px; letter-spacing:.14em; color:var(--grey); font-variant-numeric:tabular-nums; }
.board .bblock{ margin-top:22px; }
.board .blab{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm); opacity:.8; margin-bottom:11px; }
.board .brow{ font-size:14px; line-height:1.9; color:var(--off); font-weight:300; }
.board .brow .n{ color:var(--grey); opacity:.55; font-variant-numeric:tabular-nums; transition:color .18s, opacity .18s; }
.board .brow .n.lit{ color:var(--white); opacity:1; font-weight:700; }
.board .bnote{ font-size:12.5px; color:var(--warm); opacity:.75; margin-top:8px; }
.tiers{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.tierbtn{ border:1px solid var(--line); border-radius:3px; padding:11px 18px; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--off); background:rgba(255,255,255,.015); font-weight:600;
  transition:border-color .18s, color .18s, background .18s; }
.tierbtn:hover{ border-color:rgba(204,202,187,.5); color:var(--white); }
.tierbtn[aria-pressed="true"]{ background:var(--beige); border-color:var(--beige); color:var(--midblack); }
.tiernote{ margin-top:20px; font-size:14.5px; line-height:1.6; color:var(--warm); min-height:3em; }
.boardproof{ border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.boardproof img{ width:100%; height:auto; filter:grayscale(1) contrast(1.06) brightness(.78); }
.proofcap{ margin-top:14px; font-size:12.5px; line-height:1.6; color:var(--grey); }

/* ---------- shared: full bleed photo band between sections ---------- */
.band{ position:relative; height:clamp(300px,46vh,520px); overflow:hidden; }
.band img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.42); }
.band .bandscrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.25) 45%, rgba(10,10,10,.9) 100%); }
.band .bandcap{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(24px,4vh,44px);
  max-width:var(--maxw); margin-inline:auto; }
.band .bandcap p{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white);
  font-size:clamp(22px,3.4vw,48px); line-height:1; max-width:24ch; }
.band .bandcap span{ display:block; margin-top:14px; font-size:13px; color:var(--warm); font-family:'Manrope',sans-serif; text-transform:none; letter-spacing:0; }

/* ---------- shared: the legal foot ---------- */
.legalfoot{ padding:clamp(40px,6vh,72px) var(--gutter) clamp(56px,8vh,96px); border-top:1px solid var(--line2); }
.legalfoot .wrap{ max-width:var(--maxw); }
.legalfoot p{ font-size:12px; line-height:1.75; color:var(--grey); opacity:.8; max-width:80ch; }
.legalfoot p + p{ margin-top:14px; }

/* ---------- shared: the closing CTA ---------- */
.acts{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.centered .acts{ justify-content:center; }
.cta-btn{ border:1px solid var(--beige); background:var(--beige); color:var(--midblack); border-radius:3px;
  padding:17px 32px; font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; display:inline-block; transition:background .18s, border-color .18s, color .18s; }
.cta-btn:hover{ background:var(--white); border-color:var(--white); }
.cta-btn.ghost{ background:transparent; color:var(--beige); }
.cta-btn.ghost:hover{ background:transparent; color:var(--white); border-color:var(--white); }

/* ============================================================
   CONCEPT B: the chaptered read. A fixed chapter rail on the left.
   ============================================================ */
.rail{ position:fixed; left:28px; top:50%; transform:translateY(-50%); z-index:60; display:none; }
@media (min-width:1180px){ body.c-b .rail{ display:block; } }
.rail ol{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.rail a{ display:flex; align-items:center; gap:12px; padding:7px 0; text-decoration:none;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); opacity:.5;
  transition:opacity .2s, color .2s; }
.rail a .rnum{ font-family:'Acier Out',sans-serif; font-size:11px; width:20px; }
.rail a .rtick{ width:14px; height:1px; background:currentColor; flex:0 0 auto; transition:width .2s; }
.rail a:hover{ opacity:.9; color:var(--warm); }
.rail a.on{ opacity:1; color:var(--white); }
.rail a.on .rtick{ width:26px; background:var(--beige); }
@media (min-width:1180px){ body.c-b section.section .wrap{ margin-left:auto; margin-right:auto; } }

/* ============================================================
   CONCEPT C: the split study. Section title sticks while the body scrolls.
   ============================================================ */
body.c-c section.section > .wrap{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(28px,5vw,80px); align-items:start; }
body.c-c section.section > .wrap > .studyhead{ position:sticky; top:clamp(90px,14vh,150px); }
body.c-c section.section > .wrap > .studybody > *:first-child{ margin-top:0; }
body.c-c #hero > .wrap, body.c-c .legalfoot > .wrap, body.c-c .closer > .wrap{ display:block; }
@media (max-width:900px){
  body.c-c section.section > .wrap{ grid-template-columns:1fr; gap:26px; }
  body.c-c section.section > .wrap > .studyhead{ position:static; }
}

/* ============================================================
   CONCEPT D: evidence first. The board is the hero.
   ============================================================ */
body.c-d #hero{ min-height:auto; padding-top:clamp(120px,18vh,200px); padding-bottom:clamp(60px,8vh,100px); }
.evidencehero{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,60px); align-items:center; margin-top:40px; }
@media (max-width:900px){ .evidencehero{ grid-template-columns:1fr; } }
.evidencehero .board{ background:var(--black2); }

/* ============================================================
   CONCEPT E: the interactive explainer. Tighter sections, each ends in a tap.
   ============================================================ */
body.c-e section.section{ padding-top:clamp(70px,9vh,120px); padding-bottom:clamp(70px,9vh,120px); }
body.c-e .lead{ max-width:56ch; }
.steprow{ display:flex; align-items:baseline; gap:16px; margin-bottom:20px; }
.steprow .stepn{ font-family:'Acier Out',sans-serif; font-size:clamp(28px,4vw,46px); color:var(--warm); opacity:.5; line-height:.9; }
.steprow .steplab{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--warm); opacity:.85; }

/* ---------- the signals panel: DEMO ONLY ---------- */
#sigbtn{ position:fixed; right:18px; bottom:18px; z-index:75; border:1px solid var(--line);
  border-radius:3px; padding:12px 16px; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--warm); background:rgba(10,10,10,.9); backdrop-filter:blur(6px); }
#sigbtn:hover{ color:var(--white); border-color:rgba(204,202,187,.5); }
#sigbtn .dot{ color:var(--beige); }
#sig{ position:fixed; right:18px; bottom:70px; z-index:75; width:min(370px,calc(100vw - 36px));
  max-height:min(64vh,540px); overflow-y:auto; background:var(--black2); border:1px solid var(--line);
  border-radius:6px; padding:22px; display:none; }
#sig.on{ display:block; }
#sig h4{ font-family:'Acier',sans-serif; text-transform:uppercase; font-size:15px; color:var(--white); margin-bottom:6px; letter-spacing:.02em; }
#sig .sub{ font-size:11.5px; color:var(--grey); line-height:1.5; margin-bottom:18px; }
#sig .grp{ margin-bottom:18px; }
#sig .gl{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--warm); opacity:.8;
  padding-bottom:8px; border-bottom:1px solid var(--line2); margin-bottom:10px; }
#sig .r{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; padding:3px 0; }
#sig .r span:first-child{ color:var(--off); font-weight:300; }
#sig .r span:last-child{ color:var(--white); white-space:nowrap; font-variant-numeric:tabular-nums; }
#sig .r.mut span:last-child{ color:var(--grey); opacity:.6; }
#sig .none{ font-size:12px; color:var(--grey); opacity:.7; }
@media print{ #sigbtn,#sig,.rail{ display:none !important; } }