/* ================= r9 (REQ-0070) · 13px type floor, What it is as a story, one idea per screen. Appended after r8.css.
   Frozen and untouched: the hero look, transition C, the buttons, the conductor, palette, fonts, the concierge behaviour,
   the ring and the arc dome. Label voice: 13px mono, tracking <= .08em, colour >= 8:1 (--mute 12.2:1, gold 10.6:1, ice 14:1).
   Supporting text >= 16px. ================= */
:root{--r9-body:#d3d9e2}
/* ---- the type floor: every meaningful label 13px, tracking .08em ---- */
.chap-label .n,.chap-label .t,.chap-label .t .ch,.hero .eyebrow span,.hero-meta,.label,.rec-head .label,.rec-meta,.rec dt,.opt b,
.stn .k,.stn .dr,.tl .hd .k,.tl dt,.proof .pk,.prob-foot p b,.steps .get b,.fut-cols .fk,.keeps li span,
.q-row .who,.foot .c,.foot-brand span,.rail a span,.cue span,.ro-tag,.fut-cap{font-size:13px;letter-spacing:.08em}
.chap-label .t,.prob-foot p b,.steps .get b,.proof .pk,.rec dt{color:var(--mute)}
.tag,#how .tag{font-size:13px;letter-spacing:.08em;padding:6px 10px 5px}
.rail a span{margin-top:-6.5px}
.foot .c{color:var(--mute)}
.foot .c span{white-space:nowrap}
/* supporting text >= 16px */
@media (min-width:821px){.opt{font-size:16px;line-height:1.38}.rec dd{font-size:16px}.rec dt{padding:7px 0}}
.bsec .note,.foot .r{font-size:16px}
.mds dd,.mds-opt{font-size:16px}
.mds-cl .n,.mds-cl .t,.mds-lb,.mds-idx,.mds-n,.mds-s,.mds-tag,.mds dt,.mds-opt .st,.mds-li .k{font-size:13px;letter-spacing:.08em}
/* the concierge: the same label floor (behaviour untouched) */
.cg-steps li,.cg-fl,.cg-kept,.cg-loop li i,.cg-mode,.cg-stepm,.cg-close kbd,.cg-hist p span,.cg-row dt,.cg-clar li span,.cg-rsum dt,.cg-win em,.pv,.cg-ev span,.cg-name,.cg-eye,.cg-uh h2,.cg-lang button,.cg-sig,.cg-help kbd{font-size:13px;letter-spacing:.08em}
.cg-hint,.cg-help,.cf{font-size:14px}
@media (max-width:820px){.cg-stepm{font-size:13px;letter-spacing:.06em}}

/* ---- 02 problem: larger line, support points at 17px sitting close under it ---- */
.prob-text{font-size:clamp(38px,6.1vw,100px);max-width:1320px}
.prob-foot{margin-top:clamp(28px,4vh,40px);gap:clamp(32px,5vw,80px);padding-top:22px;border-top:1px solid var(--rule);max-width:1260px}
.prob-foot p{font-size:17px;line-height:1.55;color:var(--r9-body);max-width:460px}
.prob-foot p b{margin-bottom:8px;color:var(--gold)}

/* ---- 03 who: one person, many lines converging on one gold point ---- */
section.who{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(96px,13vh,140px);padding-bottom:clamp(120px,18vh,190px)}
.nb{white-space:nowrap}
@media (min-width:821px){.who-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(24px,3vw,56px)}}
.who-cue svg{max-height:none;overflow:visible}
.who-cue{--dk:1}
.js .who-cue{--dk:0}
.rm .who-cue{--dk:1}
.who-cue .wl path{stroke-dasharray:1 1;stroke-dashoffset:clamp(0,calc(1 - (var(--dk) * 1.5 - var(--i) * .02)),1)}
.who-cue .wd circle{opacity:clamp(0,calc(var(--dk) * 4 - var(--i) * .1),1)}
.who-cue .wg,.who-cue .wp,.who-cue .wo{opacity:clamp(0,calc(var(--dk) * 3 - 1.9),1)}
.who-roles li{padding-top:24px}
.who-roles span{font:400 16px/1.45 var(--sans);letter-spacing:0;text-transform:none;color:var(--mute)}
.who-roles b{white-space:nowrap}

/* ---- 04 what it is (r9 default; ?what=r8 keeps the strike-through version) ---- */
html:not(.what-r8) .w8{display:none}
.what-r8 .w9{display:none}
.w8{display:flex;flex-direction:column}
.w9{max-width:1240px}
.w9-def{margin:0;font:300 clamp(44px,5.6vw,96px)/1.02 var(--serif);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.w9-def em{color:var(--gold)}
.w9-sub{margin:clamp(18px,2.6vh,28px) 0 0;max-width:900px;font:400 clamp(19px,1.55vw,23px)/1.5 var(--sans);color:var(--ink)}
.w9-quiet{margin:10px 0 0;max-width:900px;font:400 17px/1.55 var(--sans);color:var(--mute)}
.w9-keeps{list-style:none;margin:clamp(26px,4vh,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,3.4vw,56px)}
.w9-keeps li{border-top:1px solid var(--rule2);padding-top:16px;position:relative}
.w9-keeps li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--bg);border:1px solid var(--gold);box-shadow:0 0 10px rgba(230,192,123,.45)}
.w9-keeps li{min-height:132px}
.w9-keeps .k{font:500 13px/1 var(--mono);letter-spacing:.08em;color:var(--gold)}
.w9-keeps h3{margin:10px 0 6px;font:400 clamp(24px,2.1vw,32px)/1.12 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.w9-keeps p{margin:0;font-size:17px;line-height:1.5;color:var(--r9-body)}
.w9-rn{margin:clamp(24px,3.4vh,36px) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:17px;color:var(--r9-body)}
.w9-rn .tag:last-of-type{margin-left:18px}
.js:not(.rm) .w9 .w9-def,.js:not(.rm) .w9 .w9-sub,.js:not(.rm) .w9 .w9-quiet,.js:not(.rm) .w9 .w9-keeps li,.js:not(.rm) .w9 .w9-rn{opacity:0}

/* ---- 06 architecture: the line, then a five-step rail, then one ledger sentence ---- */
.arch .lead{max-width:760px;margin-top:20px;font-size:19px;line-height:1.5;color:var(--r9-body)}
.flow{margin-top:clamp(48px,7vh,76px)}
.node h3{font-size:clamp(22px,1.9vw,30px);line-height:1.12;margin-bottom:10px}
.node p{font-size:17px;line-height:1.5;color:var(--r9-body);margin-bottom:16px}
@media (min-width:821px){.arch{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(100px,13vh,140px);padding-bottom:clamp(80px,11vh,120px)}
  .arch h2{font-size:clamp(60px,7.4vw,128px)}
  .flow{margin-top:clamp(64px,10vh,110px)}
  .node h3{font-size:clamp(24px,2.15vw,34px)}
  .node p{font-size:18px}}
p.ledger{display:block;margin:clamp(40px,6vh,64px) 0 0;padding-top:22px;max-width:none;font:300 clamp(21px,1.7vw,26px)/1.35 var(--serif);color:var(--ink)}

/* ---- 07 enterprise: four questions, two by two ---- */
.ent-sub{margin:18px 0 0;font-size:18px;line-height:1.5;color:var(--mute);max-width:760px}
.ent-list{margin-top:clamp(36px,5vh,56px);border-top:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,5vw,96px)}
.q-row{display:block;padding:clamp(26px,3.6vh,38px) 0 clamp(30px,4vh,44px);border-bottom:0;border-top:1px solid var(--rule2)}
.q-row .who{padding:0;font:500 14px/1 var(--mono);letter-spacing:.08em;color:var(--gold);text-transform:uppercase}
.q-row h3{margin:14px 0 12px;font-size:clamp(28px,2.55vw,42px);line-height:1.08;letter-spacing:-.025em}
.q-row .a{margin:0;font-size:18px;line-height:1.5;color:var(--ink)}
.q-row .src{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--mute)}

/* ---- 08 principles: a headline at the top, side notes at 17px ---- */
.prin h2{margin:0 0 clamp(8px,2vh,24px);font-size:clamp(34px,3.6vw,58px);line-height:1.05;letter-spacing:-.03em}
.pr .n{font:300 clamp(26px,2.2vw,36px)/1 var(--serif);letter-spacing:0;color:var(--gold)}
.pr p{font-size:17px;line-height:1.55;color:var(--r9-body)}
.proof p{color:var(--r9-body)}

/* ---- 09 what's next: the eyebrow clear of the nav ---- */
@media (min-width:821px){.future .top-row{padding-top:clamp(120px,15vh,150px)}.future .top-row{gap:20px}}
.future .fut-cols p{color:var(--r9-body)}

/* ---- 10-13 today, engagement, after, briefing ---- */
.today-grid li{color:var(--r9-body)}
.honest{margin-top:clamp(40px,6vh,64px)}
.steps p{font-size:17px;color:var(--r9-body)}
.loop-now{margin:clamp(30px,4vh,44px) 0 0}
.loop-steps{margin-top:18px}
.loop-steps p{font-size:17px;color:var(--r9-body)}
.foot-brand span b{font-weight:500}

/* ---- phone ---- */
@media (max-width:820px){
  .prob-text{font-size:clamp(34px,9.6vw,44px)}
  .prob-foot{gap:20px;padding-top:18px}
  section.who{min-height:0;padding-bottom:clamp(96px,14vh,140px)}
  .who-cue svg{max-height:230px;margin:0 auto}
  .who-roles{gap:0 20px}
  .who-roles b{font-size:21px}
  .w9-def{font-size:clamp(34px,9.4vw,42px)}
  .w9-sub{font-size:18px;margin-top:16px}
  .w9-quiet{font-size:16px}
  .w9-keeps{grid-template-columns:1fr;margin-top:18px}
  .w9-keeps li{min-height:0;padding:12px 0 10px}
  .w9-keeps .kb{display:grid;grid-template-columns:34px 1fr;align-items:baseline}
  .w9-keeps h3{margin:0;font-size:22px}
  .w9-keeps p{display:none}
  .w9-rn{font-size:16px;margin-top:16px;gap:8px 10px}
  .w9-rn .tag:last-of-type{margin-left:0}
  .arch .lead{font-size:17px}
  .node h3{font-size:22px}
  .ent-list{grid-template-columns:1fr}
  .q-row h3{font-size:28px}
  .prin h2{font-size:32px}
  .foot-brand span b,.foot-brand span i{display:none}
  .foot-brand span{white-space:nowrap}
  .foot .c{font-size:13px}
}
@media (max-width:820px){.future .top-row{padding-top:24px}}
/* r9 fix round 1: What fills the frame (bigger definition, larger keeps); Architecture's rail and ledger take the lower half */
@media (min-width:821px){
  .w9-def{font-size:clamp(52px,6.6vw,116px);line-height:1}
  .w9-sub{font-size:clamp(20px,1.7vw,26px);max-width:1000px}
  .w9-quiet{font-size:18px}
  .w9-keeps{margin-top:clamp(34px,5.4vh,60px)}
  .w9-keeps li{min-height:150px;padding-top:20px}
  .w9-keeps h3{font-size:clamp(28px,2.6vw,42px);margin:12px 0 8px}
  .w9-keeps p{font-size:18px}
  .w9-rn{font-size:18px}
  .arch .flow{margin-top:clamp(80px,13vh,140px)}
  .arch p.ledger{margin-top:clamp(56px,9vh,100px);padding-top:28px}
  .prin{padding-top:clamp(64px,9vh,96px)}
}
@media (max-width:820px){.who-cue{order:0;margin:26px 0 0}.who-cue svg{max-height:210px}}
.mds .mds-lb .mds-idx,.mds-idx.mds-sw{letter-spacing:.08em}