/* ==========================================================================
   MIRROR INTERACTIVE SALES ACADEMY — visual system
   Porcelain / espresso / champagne. Marcellus display, Mulish text.
   Mobile first: every layout starts single-column and earns its columns.
   ========================================================================== */
:root{
  --espresso:#241E19; --espresso-2:#2E2620; --espresso-3:#3A3029;
  --ink:#241E19; --ink-2:#5C544C; --ink-3:#94897D; --ink-4:#B6ABA0;
  --line:#E5DED4; --line-2:#EFEAE2; --bg:#F5F1EC; --panel:#fff; --panel-2:#FBF7EF;
  --champagne:#A07E3C; --gold:#C9A45C; --gold-deep:#7E6229; --gold-soft:#F4EDDE;
  --sage:#47725D; --sage-soft:#E6EEE9;
  --rose:#A34D53; --rose-soft:#F6E7E7;
  --amber:#8a5a12; --amber-soft:#F8F1E2;
  --mercury:linear-gradient(90deg,#C8CCD1 0%,#E9E2D4 42%,#B99C56 100%);
  --r:14px; --r-lg:20px;
  --serif:"Marcellus",Georgia,"Times New Roman",serif;
  --sans:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 22px 55px -34px rgba(36,30,25,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.2;font-weight:600}
h1{font-family:var(--serif);font-weight:400;font-size:25px;letter-spacing:.01em}
h2{font-family:var(--serif);font-weight:400;font-size:20px}
h3{font-size:15.5px}
h4{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
p{margin:0 0 .85em}
a{color:var(--gold-deep)}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
@media(min-width:820px){ .wrap{padding:0 28px} body{font-size:15px} h1{font-size:30px} }
.hidden{display:none!important}
.muted{color:var(--ink-3);font-size:13px}
.center{text-align:center}
.sp{flex:1}

button{font-family:inherit;font-size:14px;cursor:pointer;border-radius:10px;border:1px solid var(--line);background:#fff;padding:10px 16px;color:var(--ink);transition:.15s}
button:hover:not(:disabled){border-color:var(--ink-4)}
button.primary{background:var(--espresso);border-color:var(--espresso);color:#fff;font-weight:600}
button.primary:hover:not(:disabled){background:var(--espresso-2)}
button.gold{background:var(--champagne);border-color:var(--champagne);color:#fff;font-weight:600}
button.gold:hover:not(:disabled){background:var(--gold-deep)}
button.ghost{background:transparent;border-color:transparent;color:var(--ink-2);padding:8px 10px}
button.lg{padding:14px 24px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;border-radius:999px}
button:disabled{opacity:.4;cursor:not-allowed}
input,textarea,select{font-family:inherit;font-size:14px;width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gold-soft);border-color:var(--champagne)}
textarea{min-height:88px;resize:vertical}
label{display:block;font-size:13px;font-weight:600;margin:0 0 6px;color:var(--ink-2)}
.field{margin-bottom:14px}
.err{background:var(--rose-soft);color:var(--rose);border-radius:10px;padding:11px 14px;font-size:13.5px;margin-bottom:14px}
.notice{background:var(--amber-soft);color:var(--amber);border-radius:10px;padding:11px 14px;font-size:13.5px}

/* ---------- wordmark ---------- */
.wm{font-family:var(--serif);letter-spacing:.15em;position:relative;display:inline-block;line-height:1}
.wm::after{content:attr(data-wm);position:absolute;left:0;top:100%;transform:scaleY(-1);
  background:linear-gradient(to bottom,currentColor,transparent 60%);opacity:.28;
  -webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}

/* ---------- sign in ---------- */
/* The switch sized to its two buttons, not stretched across the card. */
.formcard .langsw:not(.stowed){width:max-content;margin-bottom:14px}
.signin{min-height:100vh;display:grid;grid-template-columns:1fr}
@media(min-width:900px){.signin{grid-template-columns:1.05fr .95fr}}
.brandside{background:linear-gradient(165deg,#241E19 0%,#2E2620 55%,#3A3029 100%);color:#EFEAE3;padding:38px 26px;display:flex;flex-direction:column}
@media(min-width:900px){.brandside{padding:56px 54px}}
@media(max-width:899px){.brandside{min-height:auto}}
.brandside .wm{font-size:34px;color:#EFEAE3}
@media(min-width:900px){.brandside .wm{font-size:46px}}
.brandside .desc{font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:34px}
.brandside .pitch{margin-top:34px;font-family:var(--serif);font-size:21px;line-height:1.42;max-width:23ch}
@media(min-width:900px){.brandside .pitch{margin-top:auto;font-size:24px}}
.brandside .sub{color:#BCB2A5;font-size:13.5px;margin-top:16px;max-width:38ch}
.endorse{margin-top:26px;padding-top:20px;border-top:1px solid rgba(239,234,227,.14);display:flex;align-items:center;gap:13px}
.endorse .logo{width:46px;height:46px;border-radius:9px;background:rgba(239,234,227,.07);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.endorse .et{font-size:11.5px;line-height:1.55;color:#877D71}
.endorse .et b{color:#BCB2A5;font-weight:600;display:block}
.formside{display:flex;align-items:center;justify-content:center;padding:34px 22px;background:var(--panel)}
.formcard{width:100%;max-width:390px}
.roletabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0 24px}
.roletab{padding:13px 10px;border:1px solid var(--line);border-radius:11px;text-align:center;cursor:pointer;background:#fff}
.roletab .rt{font-weight:600;font-size:14px}
.roletab .rd{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.roletab.on{border-color:var(--espresso);background:var(--espresso);color:#fff}
.roletab.on .rd{color:#BCB2A5}

/* ---------- app shell ---------- */
header.top{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.top-in{display:flex;align-items:center;gap:12px;min-height:56px;padding-top:8px;padding-bottom:8px}
.top-in .brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.top-in .brand .wm{font-size:18px;color:var(--espresso)}
.top-in .brand small{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
@media(max-width:700px){.top-in .brand small{display:none}}
.langsw{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:0 0 auto}
/* 32px minimum, because this is a control people use on a phone with one
   hand between customers and it was 28. */
.langsw button{border:0;border-radius:0;padding:6px 12px;min-height:32px;font-size:11.5px;font-weight:700;letter-spacing:.08em;background:#fff;color:var(--ink-3)}
.langsw button.on{background:var(--espresso);color:#fff}
/* Two lines, each of them ONE line. A clinic called "Clínica Dermoestética
   Castellana" wrapped under the role and pushed the header open by a row, so
   both lines are now cut with an ellipsis instead. */
.whoami{font-size:12px;color:var(--ink-3);text-align:right;line-height:1.3;max-width:190px;min-width:0}
.whoami b,.whoami span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whoami b{color:var(--ink);font-weight:600;font-size:13px}
@media(max-width:860px){.whoami{max-width:140px}}
@media(max-width:560px){.whoami{display:none}}
/* The tab rail scrolls on a phone, and says so. Two champagne shadows sit
   under each edge; two panels of paper sit on top of them and scroll WITH the
   content, so each shadow is covered exactly when there is nothing more to
   see in that direction. No script, and nothing to go stale. */
nav.tabs{border-bottom:1px solid var(--line);position:sticky;top:56px;z-index:55;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scroll-padding-inline:18px;scrollbar-width:none;
  background-color:var(--panel);
  background-image:
    linear-gradient(90deg,var(--panel) 62%,rgba(255,255,255,0)),
    linear-gradient(270deg,var(--panel) 62%,rgba(255,255,255,0)),
    linear-gradient(90deg,var(--gold) 0 1.5px,rgba(126,98,41,.2) 1.5px,rgba(126,98,41,.05) 46%,rgba(126,98,41,0)),
    linear-gradient(270deg,var(--gold) 0 1.5px,rgba(126,98,41,.2) 1.5px,rgba(126,98,41,.05) 46%,rgba(126,98,41,0));
  background-position:0 0,100% 0,0 0,100% 0;
  background-size:32px 100%,32px 100%,22px 100%,22px 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs .tabs-in{display:flex;gap:2px;min-width:max-content}
nav.tabs button{border:0;border-radius:0;background:transparent;padding:13px 14px;font-size:13.5px;color:var(--ink-2);border-bottom:2px solid transparent;white-space:nowrap;scroll-snap-align:center;transition:color .16s}
nav.tabs button:first-child{padding-left:18px}
nav.tabs button:last-child{padding-right:26px}
nav.tabs button.on{color:var(--espresso);font-weight:700;border-bottom-color:var(--champagne)}
@media(max-width:719px){
  nav.tabs button{padding:12px 11px;font-size:13px;letter-spacing:.005em}
  nav.tabs button:first-child{padding-left:18px}
  nav.tabs button:last-child{padding-right:30px}
}
/* A short screen — an empty field journal, a clinic with nothing recorded —
   used to end its footer halfway up the window with bare paper underneath it.
   The shell is a column the height of the viewport and `main` takes the
   slack, so the footer sits on the bottom edge wherever the content stops. */
#app{display:flex;flex-direction:column;min-height:100vh}
#app.hidden{display:none!important}
main{padding:20px 0 90px;flex:1 0 auto}
@media(min-width:820px){main{padding:26px 0 90px}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:16px}
@media(min-width:820px){.card{padding:22px 24px}}
.card.tight{padding:15px 16px}
.card.flat{box-shadow:none}
.grid2{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:940px){.grid2{grid-template-columns:1fr 320px}}
.grid2>*{min-width:0}
.cols{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.cols.two{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.cols.three{grid-template-columns:repeat(3,1fr)}}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,#241E19 0%,#2E2620 100%);color:#EFEAE3;border-radius:var(--r-lg);padding:24px 22px;margin-bottom:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
@media(min-width:820px){.hero{padding:34px 36px}}
.hero:after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(201,164,92,.16),transparent 65%)}
.hero h1{color:#fff;margin-bottom:8px;position:relative}
.hero p{color:#BCB2A5;max-width:62ch;position:relative;margin-bottom:0}
.hero .kicker{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:10px}
.herostats{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid rgba(239,234,227,.14);position:relative}
.herostats div{font-size:11.5px;color:#877D71;letter-spacing:.05em}
.herostats b{display:block;font-family:var(--serif);font-size:23px;color:#EFEAE3;font-weight:400;letter-spacing:0}

/* ---------- module cards ---------- */
.modgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:680px){.modgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.modgrid{grid-template-columns:repeat(3,1fr)}}
.mod{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.16s}
.mod.available{cursor:pointer}
.mod.available:hover{border-color:var(--champagne);transform:translateY(-2px);box-shadow:0 18px 40px -30px rgba(36,30,25,.4)}
.mod .cover{height:104px;position:relative;background:var(--espresso)}
.mod .cover svg{position:absolute;inset:0;width:100%;height:100%}
.mod .cover .num{position:absolute;left:16px;bottom:10px;font-family:var(--serif);font-size:30px;color:rgba(255,255,255,.92);line-height:1}
.mod .cover .ph{position:absolute;right:14px;top:12px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(239,234,227,.62);font-weight:700}
.mod .body{padding:15px 17px;flex:1;display:flex;flex-direction:column}
.mod h3{font-family:var(--serif);font-weight:400;font-size:18px;margin-bottom:6px}
.mod .strap{font-size:13px;color:var(--ink-2);margin-bottom:12px;flex:1}
.mod .meta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink-3);border-top:1px solid var(--line-2);padding-top:11px}
.badge{display:inline-block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:3px 9px;border-radius:999px}
.badge.ready{background:var(--sage-soft);color:var(--sage)}
.badge.prod{background:var(--line-2);color:var(--ink-3)}
.badge.done{background:var(--gold-soft);color:var(--gold-deep)}
.ring{width:34px;height:34px;flex:0 0 auto}

/* ---------- lesson player ---------- */
.lessonhead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.lessonhead .back{flex:0 0 auto}
.progressline{height:4px;background:var(--line-2);border-radius:3px;overflow:hidden;margin:14px 0 18px}
.progressline i{display:block;height:100%;background:var(--mercury);width:0;transition:width .5s cubic-bezier(.3,.7,.3,1)}
.stage{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--champagne);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.stage:before{content:"";width:18px;height:1px;background:var(--champagne);display:block}
.block{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;margin-bottom:16px}
@media(min-width:820px){.block{padding:26px 28px}}
.block.done{opacity:.8}
.block .prompt{font-family:var(--serif);font-size:19px;line-height:1.4;margin-bottom:16px}
.block p.lead{font-size:15px;color:var(--ink-2)}
/* The pull-quote treatment for a passage from the book is set out in full with
   the rest of the lesson player, at the foot of this sheet. */
.insight{color:#EFEAE3;border:0}
.clientline{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--champagne);border-radius:0 var(--r) var(--r) 0;padding:16px 18px;margin-bottom:16px}
.clientline blockquote{margin:0;font-family:var(--serif);font-size:18px;line-height:1.5}
.clientline .who{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:8px}

.opts{display:grid;gap:10px}
.opt{border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;background:#fff;transition:.14s;text-align:left;width:100%;display:block;font-size:14px}
.opt:hover:not(.locked){border-color:var(--champagne);background:#fffdf9}
.opt.locked{cursor:default}
.opt .lab{font-weight:600;margin-bottom:5px;font-size:14.5px;line-height:1.45}
.opt .say{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.opt.sel{border-color:var(--espresso);box-shadow:0 0 0 3px var(--gold-soft)}
.opt.correct{border-color:var(--sage);background:var(--sage-soft)}
.opt.wrong{border-color:var(--rose);background:var(--rose-soft)}
.opt .why{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--ink-2)}
.verdict{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;padding:4px 10px;border-radius:999px;margin-bottom:8px}
.v-best{background:var(--sage-soft);color:var(--sage)}
.v-weak{background:var(--amber-soft);color:var(--amber)}
.v-harmful{background:var(--rose-soft);color:var(--rose)}
.principle{margin-top:14px;background:var(--gold-soft);border-radius:10px;padding:12px 14px;font-size:13.5px;color:var(--gold-deep)}
.principle b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}

.transcript{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tline{display:flex;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line-2);cursor:pointer;background:#fff;transition:.14s}
.tline:last-child{border-bottom:0}
.tline:hover:not(.locked){background:var(--panel-2)}
.tline .who{flex:0 0 54px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-3);padding-top:3px}
.tline.client .who{color:var(--champagne)}
.tline .txt{font-size:14px;line-height:1.5}
.tline.client .txt{font-family:var(--serif);font-size:15px}
.tline.hit{background:var(--rose-soft)}
.tline.miss{opacity:.55}

.sortgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
@media(min-width:760px){.sortgrid{grid-template-columns:repeat(3,1fr)}}
.bucket{border:1px dashed var(--line);border-radius:12px;padding:12px;min-height:96px;background:var(--panel-2)}
.bucket h4{margin-bottom:8px}
.bucket .drop{font-size:12.5px;color:var(--ink-3)}
.frag{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;font-family:var(--serif);font-size:14.5px;margin-bottom:8px;cursor:pointer}
.frag.sel{border-color:var(--espresso);box-shadow:0 0 0 3px var(--gold-soft)}
.frag.ok{border-color:var(--sage);background:var(--sage-soft)}
.frag.no{border-color:var(--rose);background:var(--rose-soft)}
.frag small{display:block;font-family:var(--sans);font-size:11px;color:var(--ink-3);margin-top:4px}

.orderlist{display:grid;gap:9px}
.orderitem{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:#fff;cursor:pointer}
.orderitem .ord{flex:0 0 26px;height:26px;border-radius:50%;background:var(--line-2);color:var(--ink-3);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* The title block takes the slack so anything after it — a lesson's running
   time on the module page — sits on one right-hand margin instead of landing
   wherever that particular title happened to stop. */
.orderitem .txt{flex:1 1 0;min-width:0}
.orderitem.picked .ord{background:var(--espresso);color:#fff}
.orderitem.ok{border-color:var(--sage)}
.orderitem.no{border-color:var(--rose)}
.orderitem .txt{font-size:13.5px;line-height:1.5}

.matchrow{display:grid;grid-template-columns:1fr;gap:8px;padding:11px 0;border-bottom:1px solid var(--line-2)}
@media(min-width:640px){.matchrow{grid-template-columns:1fr 250px;align-items:center;gap:16px}}
.matchrow:last-child{border-bottom:0}
.matchrow .q{font-family:var(--serif);font-size:15px}
.matchrow.ok select{border-color:var(--sage);background:var(--sage-soft)}
.matchrow.no select{border-color:var(--rose);background:var(--rose-soft)}

.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
@media(min-width:700px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gitem{border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center;cursor:pointer;background:#fff;transition:.14s}
.gitem:hover{border-color:var(--champagne)}
.gitem.on{border-color:var(--espresso);background:var(--espresso);color:#fff}
.gitem svg{display:block;margin:0 auto 7px}
.gitem .nm{font-size:12px;font-weight:600;line-height:1.3}
.gpanel{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.gpanel .say{font-family:var(--serif);font-size:16px;color:var(--ink);margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}

.pausebox{background:linear-gradient(150deg,#FBF7EF,#F5F1EC);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
/* The held silence: a rule that crosses the frame in exactly the seconds
   being held (MIRROR-CONTENIDO-v2, three-seconds.css, adapted). Linear, so
   she feels the duration instead of watching an easing curve flatter it. */
.mirror-three{position:relative;height:1px;margin:30px 0 22px;background:var(--line)}
.mirror-three::after{content:'';position:absolute;inset:0 auto 0 0;width:0;height:1px;background:var(--champagne)}
.mirror-three.go::after{animation:mirror-three-travel var(--secs,3s) linear forwards}
.mirror-three-count{position:absolute;right:0;top:-20px;font-size:12px;letter-spacing:.08em;color:var(--muted,#6B6158);font-variant-numeric:tabular-nums}
@keyframes mirror-three-travel{to{width:100%}}
@media (prefers-reduced-motion: reduce){
  .mirror-three.go::after{animation:none;width:100%;opacity:.35}
}
.second{animation:rise .6s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.checklist{display:grid;gap:8px;margin-top:10px}
.chk{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:#fff;cursor:pointer;font-size:13.5px}
.chk input{width:auto;flex:0 0 auto;margin-top:2px}
.chk.ok{border-color:var(--sage);background:var(--sage-soft)}
.chk.no{border-color:var(--rose);background:var(--rose-soft)}
.chk .note{display:block;font-size:12px;color:var(--ink-3);margin-top:4px}

/* ---------- consultation runner ---------- */
.phasebar{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.phasebar .pn{font-family:var(--serif);font-size:22px;color:var(--espresso);line-height:1}
.phasebar .pl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.phasebar .obj{font-size:13px;color:var(--ink-2);flex:1;min-width:200px}
.dots{display:flex;gap:4px;flex-wrap:wrap}
.dot{width:22px;height:5px;border-radius:3px;background:var(--line)}
.dot.done{background:var(--champagne)}.dot.now{background:var(--espresso)}
.moment{background:linear-gradient(155deg,#FFFFFF,#FBF7EF);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px;box-shadow:0 18px 45px -34px rgba(36,30,25,.3)}
.moment .lbl{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--champagne);font-weight:700;margin-bottom:12px}
.clienthead{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.clienthead .avatar{flex:0 0 auto}
.clienthead .nm{font-family:var(--serif);font-size:17px}
.persona{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:4px 12px 4px 7px;font-size:11.5px;font-weight:600;margin-top:4px}
.persona .d{width:8px;height:8px;border-radius:50%}
.persona.open{background:var(--sage-soft);color:var(--sage)}.persona.open .d{background:var(--sage)}
.persona.mid{background:var(--gold-soft);color:var(--gold-deep)}.persona.mid .d{background:var(--champagne)}
.persona.guard{background:var(--rose-soft);color:var(--rose)}.persona.guard .d{background:var(--rose)}
.moment blockquote{margin:0;font-family:var(--serif);font-size:19px;line-height:1.46}
@media(min-width:820px){.moment blockquote{font-size:21px}}
.moment .ctx{font-size:13.5px;color:var(--ink-2);margin-top:12px}
.moment ul{margin:10px 0 0;padding-left:19px;font-size:13.5px;color:var(--ink-2)}
.reaction{background:var(--gold-soft);border:1px solid #E5D9BC;border-radius:var(--r);padding:20px;margin-bottom:16px}
.reaction blockquote{margin:0;font-family:var(--serif);font-size:18px;line-height:1.46}
.trustline{height:6px;border-radius:3px;background:rgba(36,30,25,.09);overflow:hidden;margin-top:14px}
.trustline i{display:block;height:100%;border-radius:3px;background:var(--mercury);width:0;transition:width 1.1s cubic-bezier(.25,.6,.25,1)}
.shift{display:inline-block;font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:999px;margin:8px 6px 0 0}
.shift.up{background:var(--sage-soft);color:var(--sage)}
.shift.down{background:var(--rose-soft);color:var(--rose)}
.shift.neutral{background:var(--line-2);color:var(--ink-2)}
.fb .blk{padding:13px 0;border-bottom:1px solid var(--line-2)}
.fb .blk:last-child{border:0;padding-bottom:0}
.fb .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:5px}
.fb .v{font-size:14.5px;line-height:1.55}
.vd{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:4px 11px;border-radius:999px}
.vd-A{background:var(--sage-soft);color:var(--sage)}.vd-P{background:var(--amber-soft);color:var(--amber)}.vd-N{background:var(--rose-soft);color:var(--rose)}
.changes{list-style:none;margin:8px 0 0;padding:0}
.changes li{padding:7px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.changes li:last-child{border:0}
.st{margin-bottom:13px}
.st .lab{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.bar{height:7px;background:var(--line-2);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;transition:width .6s}
.trustrow{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:12.5px;gap:10px}
.trustrow:last-child{border:0}
.pip{display:flex;gap:3px;flex:0 0 auto}
.pip i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block}
.pip i.f{background:var(--sage)}.pip i.n{background:var(--rose)}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--line-2);color:var(--ink-2);margin:0 5px 5px 0}
.tag.gold{background:var(--gold-soft);color:var(--gold-deep)}
.tag.rose{background:var(--rose-soft);color:var(--rose)}

/* ---------- case picker ---------- */
.casecard{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.casecard .top{display:flex;gap:14px;padding:18px;align-items:flex-start}
.casecard h3{font-family:var(--serif);font-weight:400;font-size:19px;margin-bottom:4px}
.casecard .sub{font-size:13.5px;color:var(--ink-2)}
.casecard .facts{padding:0 18px 16px;font-size:12.5px;color:var(--ink-3)}
.casecard .act{border-top:1px solid var(--line-2);padding:14px 18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.casecard.locked{opacity:.72}

/* ---------- timeline / journal / manager ---------- */
.timeline{position:relative;padding-left:26px}
.timeline:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tp{position:relative;padding:0 0 18px}
.tp:before{content:"";position:absolute;left:-22px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--champagne);border:2px solid var(--panel);box-shadow:0 0 0 2px var(--gold-soft)}
.tp.neg:before{background:var(--rose);box-shadow:0 0 0 2px var(--rose-soft)}
.tp .ph{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.tp .ti{font-size:14px;margin-top:3px}
.evidence{background:var(--panel-2);border-left:3px solid var(--champagne);border-radius:0 10px 10px 0;padding:13px 15px;font-size:14px;line-height:1.55;margin-bottom:10px}
.evidence.rose{border-left-color:var(--rose)}
.evidence.sage{border-left-color:var(--sage)}
.mgrpanel{margin-bottom:18px}
.mgrpanel h4{margin-bottom:10px}
table.people{width:100%;border-collapse:collapse;font-size:13px}
table.people th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:6px 8px 6px 0;border-bottom:1px solid var(--line)}
table.people td{padding:9px 8px 9px 0;border-bottom:1px solid var(--line-2)}
table.people td:first-child{font-weight:600}
@media(max-width:640px){table.people th:nth-child(4),table.people td:nth-child(4){display:none}}

footer.foot{border-top:1px solid var(--line);margin-top:40px;padding:22px 0 40px;color:var(--ink-3);font-size:12px}
footer.foot .fin{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
footer.foot b{color:var(--ink-2)}
.spinner{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--champagne);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:-4px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- manager pattern graphics ---------- */
.pbars{display:grid;gap:12px;margin-top:10px}
.pbar{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pbl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;margin-bottom:7px}
.pbl b{font-family:var(--serif);font-size:19px;font-weight:400}
.pbt{height:8px;background:#EFEAE2;border-radius:4px;overflow:hidden}
.pbt i{display:block;height:100%;border-radius:4px}
.pbn{font-size:12px;color:var(--ink-3);margin-top:7px}

/* ---------- consultation map ---------- */
.dg{width:100%;height:auto;min-width:460px}
.dgwrap{margin:6px 0 18px}
/* A DIAGRAM THAT CONTINUES PAST THE EDGE HAS TO SAY SO.
   The wrapper already scrolls, so nothing was lost — but on a phone the
   figure simply ended mid-word with nothing to suggest there was more, which
   reads as a broken drawing rather than a wide one. Same gold edge the tab
   bar uses, and it disappears the moment the whole figure fits. */
@media(max-width:620px){
  .dgwrap{
    -webkit-overflow-scrolling:touch;
    background-image:
      linear-gradient(90deg,var(--bg) 58%,rgba(255,255,255,0)),
      linear-gradient(270deg,var(--bg) 58%,rgba(255,255,255,0)),
      linear-gradient(270deg,var(--gold) 0 1.5px,rgba(126,98,41,.18) 1.5px,rgba(126,98,41,0) 50%);
    background-position:0 0,100% 0,100% 0;
    background-size:26px 100%,26px 100%,20px 100%;
    background-repeat:no-repeat;
    background-attachment:local,local,scroll;
  }
}
.mapcard{background:linear-gradient(150deg,#FBF7EF,#F5F1EC);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:16px}

/* ---------- toolkit preview strip ---------- */
.tkstrip{display:flex;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel-2);margin-bottom:14px}
.tkstrip .tkm{flex:1;min-width:0}
.tkstrip .tkm b{display:block;font-family:var(--serif);font-weight:400;font-size:16px}
.tkstrip .tkm span{font-size:12.5px;color:var(--ink-3)}

/* ---------- section headers with a rule ---------- */
.secthead{display:flex;align-items:center;gap:14px;margin:28px 0 14px}
.secthead h2{margin:0;white-space:nowrap}
.secthead:after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- dark panel variant, to break up the cream ---------- */
.card.dark{background:linear-gradient(150deg,#2E2620,#241E19);border-color:#241E19;color:#EFEAE3}
.card.dark h4{color:var(--gold)}
.card.dark .muted{color:#BCB2A5}
.card.dark .evidence{background:rgba(239,234,227,.06);border-left-color:var(--gold);color:#EFEAE3}
.ribbon{margin:-18px -18px 16px;border-radius:var(--r) var(--r) 0 0;overflow:hidden}
@media(min-width:820px){.ribbon{margin:-22px -24px 18px}}

/* ---------- two-layer reconciliation panel ---------- */
.layers{display:grid;grid-template-columns:1fr;gap:14px;margin:6px 0 18px}
@media(min-width:760px){.layers{grid-template-columns:1fr 1fr;gap:18px}}
.layer{border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 14px;background:var(--panel);position:relative}
.layer:first-child{background:var(--panel-2)}
.layer:last-child{background:linear-gradient(150deg,#2E2620,#241E19);border-color:#241E19;color:#EFEAE3}
.layer .laytag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--champagne);margin-bottom:8px}
.layer:last-child .laytag{color:var(--gold)}
.layer h3{font-family:var(--serif);font-weight:400;font-size:18px;margin-bottom:4px}
.layer .src{font-size:11.5px;color:var(--ink-3);margin-bottom:12px}
.layer:last-child .src{color:#BCB2A5}
.laylist{list-style:none;margin:0 0 12px;padding:0;counter-reset:lay}
.laylist li{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.layer:last-child .laylist li{border-bottom-color:rgba(239,234,227,.12)}
.laylist li:last-child{border-bottom:0}
.laylist li b{font-family:var(--serif);font-weight:400;min-width:104px;color:var(--champagne)}
.layer:last-child .laylist li b{color:var(--gold)}
.laylist li span{flex:1;color:var(--ink-2)}
.layer:last-child .laylist li span{color:#CFC6BA}
.layer .note{font-size:12.5px;margin:0;color:var(--ink-2)}
.layer:last-child .note{color:#BCB2A5}
.statement{border-left:3px solid var(--gold);background:var(--gold-soft);padding:14px 16px;border-radius:0 var(--r) var(--r) 0;
  font-family:var(--serif);font-size:16px;line-height:1.5;margin-bottom:16px}

/* ---------- canonical mapping table ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:16px}
table.matrix{border-collapse:collapse;width:100%;min-width:720px;font-size:12.5px}
table.matrix th,table.matrix td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line-2)}
table.matrix thead th{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  background:var(--panel-2);border-bottom:1px solid var(--line);position:sticky;top:0}
table.matrix tbody th[scope=row]{white-space:nowrap;font-weight:400}
table.matrix .lt{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;
  background:var(--espresso);color:var(--gold);font-family:var(--serif);font-size:12px;margin-right:8px}
table.matrix .stepn{font-family:var(--serif);font-size:14px}
table.matrix td{color:var(--ink-2)}
table.matrix tr.prov td{background:var(--panel-2);color:var(--ink-3);font-size:11.5px;border-bottom:1px solid var(--line)}
table.matrix tr.prov b{color:var(--champagne);letter-spacing:.1em;text-transform:uppercase;font-size:9.5px;margin-right:6px}
table.matrix tr.mrow:hover td,table.matrix tr.mrow:hover th{background:var(--gold-soft)}

/* ---------- honesty clause: where the layers do not line up ---------- */
.gaps{border:1px dashed var(--line);border-radius:var(--r);padding:16px 18px 8px;background:transparent;margin-bottom:16px}
.gaps h4{margin-bottom:10px}
.gap{padding:8px 0;border-bottom:1px solid var(--line-2)}
.gap:last-child{border-bottom:0}
.gap b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--champagne);display:block;margin-bottom:2px}
.gap p{margin:0;font-size:13px;color:var(--ink-2)}

/* ---------- pattern bars inside the dark panel ----------
   The bars are reused on both the cream and espresso cards. On the dark card
   the inherited ink colours fell to near-invisible, so the panel restates
   every text colour rather than relying on inheritance. */
.card.dark .pbar{background:rgba(239,234,227,.05);border-color:rgba(239,234,227,.14)}
.card.dark .pbar .pbl span{color:#EFEAE3}
.card.dark .pbar .pbl b{color:var(--gold)}
.card.dark .pbar .pbn{color:#BCB2A5}
.card.dark .pbt{background:rgba(239,234,227,.12)}

/* ==========================================================================
   CLINIC — the manager's plan, seats, practitioners and invitations.
   Everything here is a small extension of components that already exist:
   two more badge tones, a second line inside a people cell, and the row that
   carries a generated invitation link next to its copy button.
   ========================================================================== */
.badge.warn{background:var(--amber-soft);color:var(--amber)}
.badge.late{background:var(--rose-soft);color:var(--rose)}
.clinicref{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  letter-spacing:.02em;word-break:break-all;text-align:right}
table.people td .em,.inviterow .em{display:block;font-weight:400;font-size:11.5px;
  color:var(--ink-3);word-break:break-word}
.inviterow{align-items:flex-start;gap:12px}
.inviterow>span:first-child{min-width:0}
.invitemeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}
.invitemeta .muted{font-size:11.5px;white-space:nowrap}
.invitedone{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.invitelink{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.invitelink input{flex:1 1 220px;min-width:0;font-size:12.5px;background:var(--panel-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.invitelink button{flex:0 0 auto}

/* ==========================================================================
   THE BUYER'S PRODUCT
   The login, the practitioner dashboard, and the consultation read as one
   consultation-training system rather than as software with forms.
   ========================================================================== */

/* ---------- one language ----------
   The EN/ES control keeps working for whoever re-enables it, but it carries
   no visible surface: the product ships in English. */
.langsw.stowed{width:4px;height:4px;min-width:4px;flex:0 0 4px;border:0;opacity:0;
  overflow:hidden;border-radius:0;margin:0;padding:0}
.langsw.stowed button{flex:0 0 2px;width:2px;height:2px;padding:0;margin:0;border:0;
  font-size:0;line-height:0;background:transparent;color:transparent}

/* ---------- sign in ---------- */
.formcard .prodname{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--espresso);
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
@media(min-width:900px){.formcard .prodname{font-size:21px}}
.formcard h1{font-size:23px;margin-bottom:6px}
.roletabs{margin:18px 0 22px}
.roletab .rt{font-size:14.5px}
.signfoot{margin-top:22px;font-size:11.5px;letter-spacing:.06em}

/* ---------- my mirror journey ---------- */
.jtitle{font-family:var(--serif);font-size:27px;line-height:1.15;color:var(--espresso);margin:2px 0 14px}
@media(min-width:820px){.jtitle{font-size:34px;margin-bottom:16px}}
.jhero h1{font-size:24px}
@media(min-width:820px){.jhero h1{font-size:30px}}
.lead-note{max-width:74ch;margin:-6px 0 14px}
.secthead{margin:30px 0 10px}

/* the five engines, each drawn by what it owns */
.engines{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:6px}
@media(min-width:620px){.engines{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.engines{grid-template-columns:repeat(5,1fr)}}
.engine{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;
  display:flex;flex-direction:column;gap:8px}
.engine .enm{font-family:var(--serif);font-size:16.5px;line-height:1.25;color:var(--espresso)}
.engine .eown{width:100%;height:auto;display:block}
.engine .eph{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--champagne)}
.engine .epu{font-size:12.5px;line-height:1.5;color:var(--ink-2)}

/* the eight canonical phases as one spine */
.spinecard{padding:18px 10px 6px}
@media(min-width:820px){.spinecard{padding:20px 16px 8px}}
.spinewrap{margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
svg.spine{min-width:600px}

/* the one objective she is working on now */
.objcard{border-left:3px solid var(--champagne)}
.objline{font-family:var(--serif);font-size:20px;line-height:1.42;margin:6px 0 8px;color:var(--espresso)}
@media(min-width:820px){.objline{font-size:22px}}

/* the primary action: her consultation */
.sofiacard{border-color:#E5D9BC;background:linear-gradient(150deg,#FFFDF8,#F4EDDE);
  box-shadow:0 22px 55px -38px rgba(36,30,25,.5)}
.sofiacard .sc-top{display:flex;gap:16px;align-items:flex-start}
.sofiacard .sc-face{flex:0 0 auto}
.sofiacard .sc-kick{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--champagne);margin-bottom:6px}
.sofiacard h2{font-size:21px;margin-bottom:4px}
@media(min-width:820px){.sofiacard h2{font-size:24px}}
.sofiacard .sc-sub{font-size:14px;color:var(--ink-2);line-height:1.5}
.sofiacard .sc-facts{margin-top:6px}
.sofiacard .sc-prog{margin:16px 0 14px;padding-top:14px;border-top:1px solid #E5D9BC}
.sofiacard .pdots{width:100%;max-width:260px;height:14px;display:block;margin-bottom:8px}
.sofiacard .sc-progtext{font-size:13.5px;color:var(--ink-2)}
.sofiacard .sc-progtext b{font-weight:600;color:var(--espresso)}
.sofiacard .sc-act{display:flex;gap:10px;flex-wrap:wrap}

/* the quieter records below */
.quiet .card{background:var(--panel-2)}
.card .herostats{border-top-color:var(--line-2);margin-top:10px;padding-top:12px;gap:20px}
.card .herostats div{color:var(--ink-3)}
.card .herostats b{color:var(--espresso);font-size:21px}
.assignline{font-family:var(--serif);font-size:17px;line-height:1.45;margin-bottom:8px}

/* ---------- the consultation, step by step ---------- */
.runtop{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.phasebar{display:block;padding:0;overflow:hidden}
.phasebar .ribbon{margin:0}
.phasebar .phaseline{display:grid;grid-template-columns:1fr;gap:12px;padding:14px 16px 0}
@media(min-width:700px){.phasebar .phaseline{grid-template-columns:1.1fr 1fr 1.4fr;gap:18px}}
.phasebar .pbcol{min-width:0}
.phasebar .pv{font-size:13.5px;line-height:1.4;color:var(--espresso);font-weight:600;margin-top:2px}
.phasebar .pn{margin-top:1px}
.phasebar .obj{padding:10px 16px 14px;margin-top:10px;border-top:1px solid var(--line-2);
  background:var(--panel-2);font-size:13px;color:var(--ink-2);flex:none}

.cstep{margin-bottom:22px}
.cstep .stepline{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.cstep .stepn{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--espresso);color:var(--gold);
  font-family:var(--serif);font-size:12.5px;display:flex;align-items:center;justify-content:center}
.cstep .stept{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.cstep .stepline:after{content:"";flex:1;height:1px;background:var(--line)}
.cstep>.card,.cstep>.moment,.cstep>section{margin-bottom:0}
.cstep .card+.card{margin-top:14px}
.cstep>section+section{margin-top:14px}

.noticelist{margin:0;padding-left:20px;font-size:14px;color:var(--ink-2);line-height:1.55}
.noticelist li{margin-bottom:7px}
.subtext{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--ink);
  border-left:3px solid var(--champagne);padding-left:13px}
.notice-card .noticelist+.subtext{margin-top:14px}
.decisionprompt{font-family:var(--serif);font-size:19px;line-height:1.42;margin:0 0 14px;color:var(--espresso)}
.chosen .k,.fb .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.chosenlab{font-size:15px;font-weight:600;margin-top:5px;line-height:1.5}
.chosensay{margin:6px 0 0;font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.5;color:var(--ink-2)}
.changecard{background:linear-gradient(150deg,#FBF7EF,#F4EDDE);border-color:#E5D9BC}
.changecard .changes li{border-bottom-color:#E5D9BC;font-size:14px}
.fb .fbhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.fb .fbhead h4{margin:0}
.fb .v.q{font-family:var(--serif);font-size:16.5px;line-height:1.5;color:var(--espresso)}
.nextcard .nextline{font-size:14px;color:var(--ink-2);margin-bottom:14px}
.nextcard .nextline b{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--espresso)}

/* her state, beside everything, moving */
.statepanel{position:relative}
@media(min-width:940px){.statepanel{position:sticky;top:118px}}
.delta{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:2px 8px;
  border-radius:999px;margin-left:6px;vertical-align:1px}
.delta.up{background:var(--sage-soft);color:var(--sage)}
.delta.down{background:var(--rose-soft);color:var(--rose)}
.trustrow.moved{background:var(--gold-soft);border-radius:8px;padding-left:8px;padding-right:8px}
.tag.fresh{box-shadow:0 0 0 2px var(--gold-soft);border:1px solid var(--gold)}

/* the spine reads across on a laptop and down the page on a phone */
.spine-tall{display:none}
svg.spine-wide{display:block}
@media(max-width:719px){
  svg.spine-wide{display:none}
  .spine-tall{display:block;width:100%;height:auto}
  .spinewrap{overflow:visible}
  .spinecard{padding:16px 14px}
}

/* ==========================================================================
   THE CASE LIBRARY
   Nine consultations that are not nine versions of one consultation. The
   library is grouped by what each case trains, and every card carries the two
   things a practitioner needs before she commits ten minutes: the skill it
   teaches, and the state the client is in before a word is said.
   ========================================================================== */
.openingnote{background:linear-gradient(150deg,#FFFDF8,#F4EDDE);border-color:#E5D9BC;margin-bottom:18px}
.openingnote h4{margin-bottom:10px}
.openingnote .onbody{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:860px){.openingnote .onbody{grid-template-columns:1.35fr .9fr;gap:26px}}
.openingnote p{font-size:13.5px;line-height:1.62;color:var(--ink-2);margin:0;max-width:70ch}

/* the nine opening numbers on one rail — the picture is the argument */
.orail{align-self:start}
.orrow{display:grid;grid-template-columns:52px minmax(0,1fr) 26px;align-items:center;gap:9px;margin-bottom:5px}
.orn{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orb{position:relative;height:7px;border-radius:4px;background:#EFEAE2;display:block;overflow:visible}
.orb i{display:block;height:100%;border-radius:4px;background:var(--mercury)}
.orb em{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--champagne);opacity:.75}
.orrow b{font-family:var(--serif);font-weight:400;font-size:14px;text-align:right;color:var(--espresso)}
.orfoot{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne);font-weight:700;margin-top:9px}

/* the track filter */
.libfilter{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:0 0 8px}
.libfilter .lfk{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-right:3px}
.libfilter button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:12.5px;
  font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px}
.libfilter button:hover{border-color:var(--champagne)}
.libfilter button.on{background:var(--espresso);border-color:var(--espresso);color:#fff}
.libfilter .lfn{font-size:10.5px;color:var(--ink-3);font-weight:700}
.libfilter button.on .lfn{color:var(--gold)}

/* a track, and what it trains */
.track{margin-bottom:8px}
.trhead{margin:26px 0 4px}
.trhead .trcount{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700;flex:0 0 auto;order:3}

/* A CONSULTATION THE AUTHOR HAS NOT READ YET.
   Same card, dashed edge, and the word Draft beside the case number — so there
   is no size and no scroll position at which it reads as one of the nine. The
   whole treatment disappears when the status does. */
.draftsec{border-top:1px dashed var(--line);margin-top:30px;padding-top:4px}
.trhead .dr-badge{color:#7A6752;background:#F4EEE3;border:1px dashed #CDBFA6;
  border-radius:4px;padding:4px 9px}
/* The heading is `white-space: nowrap` and the badge sits after the rule, so
   at 390px with the Spanish heading — "Todavía no está entre las nueve" — the
   badge was pushed 29px off the right edge and the page scrolled sideways.
   This one header wraps; the heading keeps its own line and the badge takes
   the next one. */
.draftsec .secthead{flex-wrap:wrap}
.draftsec .secthead h2{white-space:normal}
.casecard.draftcard{border-style:dashed}
.casecard .cc-draft{display:inline-block;margin-left:8px;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:#7A6752;background:#F4EEE3;
  border:1px dashed #CDBFA6;border-radius:4px;padding:3px 7px;vertical-align:middle}
.casecard .cc-note{margin:0;padding:0 18px 14px;font-size:12px;line-height:1.6;color:var(--ink-3)}
.trhead:after{order:2}
.trsub{font-family:var(--serif);font-size:17px;line-height:1.4;color:var(--champagne);margin-bottom:4px}
.trnote{max-width:78ch;margin:0 0 14px}
.libgrid{display:grid;grid-template-columns:1fr;gap:16px}
/* No track holds more than two cases, so two columns fill the row instead of
   leaving a third of the page empty. */
@media(min-width:720px){.libgrid{grid-template-columns:1fr 1fr}}
/* Except a section holding one. The drafted section has a single consultation
   in it, and half a row of card beside half a row of nothing reads as a
   loading state rather than as the one room that is there. */
@media(min-width:720px){.draftsec .libgrid:has(> :only-child){grid-template-columns:minmax(0,1fr)}}
.libfoot{margin:20px 0 0;max-width:80ch}

.casecard{transition:.16s}
.casecard:hover{border-color:var(--champagne);box-shadow:0 20px 44px -34px rgba(36,30,25,.42)}
.casecard .top{padding:16px 16px 10px;gap:13px}
.casecard .cc-face{flex:0 0 auto}
.casecard .cc-id{min-width:0}
.casecard .cc-kick{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--champagne);
  margin-bottom:5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.casecard .cc-tr{color:var(--ink-3);background:var(--line-2);border-radius:999px;padding:2px 8px;letter-spacing:.1em}
.casecard h3{font-size:18px;margin-bottom:3px}
.casecard .sub{font-size:13px;line-height:1.45}
.casecard .facts{padding:0 16px 12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.casecard .cc-sec{padding:12px 16px;border-top:1px solid var(--line-2)}
.casecard .cc-k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-bottom:7px}
.casecard .cc-teach{background:var(--panel-2)}
.casecard .cc-teach p{margin:0;font-family:var(--serif);font-size:14.5px;line-height:1.5;color:var(--espresso)}
.casecard .cc-chips{margin-top:9px}
.casecard .cc-hard{margin-top:9px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--rose);
  background:var(--rose-soft);border-radius:8px;padding:6px 10px;display:inline-block}
.casecard .cc-histtext{font-size:12.5px;color:var(--ink-2);margin-top:6px}
.casecard .cc-histtext b{font-weight:600;color:var(--espresso)}
.casecard .cc-histtext .oc-yes{color:var(--sage)}
.casecard .cc-histtext .oc-no{color:var(--rose)}
.casecard .cc-hist .pdots{width:100%;max-width:190px;height:12px;display:block}
.casecard .act{margin-top:auto;padding:13px 16px}

/* opening willingness, with the YES threshold marked */
.omet{margin-bottom:2px}
.ometbar{position:relative;height:8px;border-radius:4px;background:#EFEAE2;overflow:visible}
.ometbar i{display:block;height:100%;border-radius:4px;background:var(--mercury)}
.ometthr{position:absolute;top:-4px;bottom:-4px;width:1.5px;background:var(--champagne)}
.ometlab{display:flex;align-items:baseline;gap:6px;margin-top:7px;font-size:11.5px;color:var(--ink-3)}
.ometlab b{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--espresso)}
.ometsp{flex:1}
.omethr{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--champagne)}

/* where every decision path in a case ends */
.osbar{display:flex;height:9px;border-radius:5px;overflow:hidden;background:#EFEAE2}
.osbar i{display:block;height:100%}
.osbar i.y{background:var(--sage)}
.osbar i.d{background:var(--champagne)}
.osbar i.n{background:var(--rose)}
.oskey{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.osk{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-3);display:flex;align-items:baseline;gap:5px}
.osk b{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:0}
.osk.y b{color:var(--sage)}.osk.d b{color:var(--champagne)}.osk.n b{color:var(--rose)}
.osfoot{font-size:11.5px;color:var(--ink-2);margin-top:8px;line-height:1.5}

/* ==========================================================================
   TRUST MOVEMENT — seven stages on one rail, and the one that just fell
   ========================================================================== */
.tladder{margin-top:4px}
.tlrow{display:grid;grid-template-columns:14px minmax(0,1fr) 84px 22px 30px;align-items:center;gap:6px;
  padding:5px 6px;border-radius:8px;margin:0 -6px}
.tln{font-size:10px;color:var(--ink-4);font-weight:700;text-align:center}
.tlname{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlsc{width:84px;height:auto;display:block}
.tlv{font-family:var(--serif);font-size:13px;color:var(--espresso);text-align:right}
.tld{font-size:10.5px;font-weight:700;text-align:right;color:transparent}
.tld.up{color:var(--sage)}
.tld.down{color:var(--rose)}
.tld.up:before,.tld.down:before{content:"";display:inline-block;border:4px solid transparent;margin-right:3px;vertical-align:1px}
.tld.up:before{border-bottom-color:currentColor;border-top-width:0}
.tld.down:before{border-top-color:currentColor;border-bottom-width:0}
.tlrow.down{background:var(--rose-soft)}
.tlrow.down .tlname{color:var(--rose);font-weight:600}
.tlrow.up{background:var(--sage-soft)}
.tlrow.up .tlname{color:var(--sage);font-weight:600}
.tlnote{font-size:11px;color:var(--ink-3);margin:9px 0 0;line-height:1.5}

/* ==========================================================================
   BEFORE / AFTER — what one decision did to her
   A short, plain transition: the rail moves from where she was to where she
   is, and the ghost tick stays behind to say where that was.
   ========================================================================== */
.cqp{background:linear-gradient(150deg,#FFFFFF,#FBF7EF);border-color:#E5D9BC}
.cqp-pair{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:10px}
.cqp-side{min-width:0}
.cqp-side.now{text-align:right}
.cqp-k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-bottom:4px}
.cqp-w{font-family:var(--serif);font-size:27px;line-height:1.1;color:var(--espresso)}
.cqp-w small{font-size:12px;color:var(--ink-3);font-family:var(--sans)}
.cqp-side.was .cqp-w,.cqp-side.was .cqp-p{color:var(--ink-3)}
.cqp-p{font-size:12.5px;margin-top:3px;color:var(--ink-2)}
.cqp-arrow{width:34px;height:18px;display:block}
.cqp-track{position:relative;height:9px;border-radius:5px;background:#EFEAE2;margin:18px 0 0}
.cqp-fill{display:block;height:100%;border-radius:5px;background:var(--mercury);width:var(--to)}
.cqp-track.fell .cqp-fill{background:linear-gradient(90deg,#C8CCD1,#C98A8E)}
.cqp-track.rose .cqp-fill{background:linear-gradient(90deg,#C8CCD1,#7FA893)}
.cqp-ghost{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--espresso);opacity:.4;border-radius:2px}
.cqp-thr{position:absolute;top:-5px;bottom:-5px;width:1.5px;background:var(--champagne)}
.cqp-thr b{position:absolute;top:14px;left:-8px;font-size:9.5px;font-weight:700;color:var(--champagne)}
.cqp-thrnote{font-size:11.5px;color:var(--ink-3);margin-top:20px;line-height:1.5}
.cqp-list{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid #E5D9BC}
.cqp-ch{display:grid;grid-template-columns:1fr;gap:2px;padding:6px 0 6px 11px;border-left:3px solid var(--line);margin-bottom:5px}
.cqp-ch:last-child{margin-bottom:0}
.cqp-ch.up{border-left-color:var(--sage)}
.cqp-ch.down{border-left-color:var(--rose)}
.cqp-ck{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.cqp-cv{font-size:14px;line-height:1.5;color:var(--espresso)}
@keyframes cqpfill{from{width:var(--from)}to{width:var(--to)}}
@keyframes cqprise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.cqp-fill{animation:cqpfill .8s cubic-bezier(.3,.7,.3,1) both}
.cqp-side.now{animation:cqprise .45s .12s both}
.cqp-list .cqp-ch{animation:cqprise .45s .2s both}
@media(prefers-reduced-motion:reduce){
  .cqp-fill,.cqp-side.now,.cqp-list .cqp-ch{animation:none;opacity:1;transform:none;width:var(--to)}
  .cqp-side.now,.cqp-list .cqp-ch{width:auto}
}

/* her reaction, before the analysis */
.reaction .rk{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);margin-bottom:8px}
.reaction blockquote{color:var(--espresso)}

/* the words you would actually say */
.optsay .sayk{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-4);margin:9px 0 4px}
.yousaid{border-left:2px solid var(--line);padding:0 0 0 12px;margin-bottom:14px}
.yousaid .ysk{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-4);margin-bottom:3px}
.yousaid q{font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.5;color:var(--ink-3)}

/* ==========================================================================
   THE CONSULTATION MAP — eight phases, the choice made at each, and where
   trust moved. Built to be read on a phone and kept as a picture.
   ========================================================================== */
.cmapcard{background:linear-gradient(150deg,#FBF7EF,#F5F1EC)}
.cmap{margin-top:2px}
.cmrow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:flex-start;
  padding:11px 0;border-bottom:1px solid var(--line)}
.cmrow:last-child{border-bottom:0}
.cmn{position:relative;display:flex;justify-content:center}
.cmn span{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:12px;background:#fff;border:1.5px solid var(--line);color:var(--ink-3);z-index:1}
.cmrow.done .cmn span{background:var(--champagne);border-color:var(--champagne);color:#fff}
.cmrow.now .cmn span{background:var(--espresso);border-color:var(--espresso);color:var(--gold)}
.cmrow:not(:last-child) .cmn:after{content:"";position:absolute;top:24px;bottom:-22px;width:2px;background:var(--line)}
.cmrow.done:not(:last-child) .cmn:after{background:var(--champagne)}
.cmb{min-width:0}
.cmph{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.cmch{font-size:14px;line-height:1.45;margin-top:3px;color:var(--espresso)}
.cmch.none{color:var(--ink-4);font-style:italic}
.cmrow.now .cmch.none{color:var(--champagne);font-style:normal;font-weight:600}
.cmmv{margin-top:6px;display:flex;gap:5px;flex-wrap:wrap}
.cmchip{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px}
.cmchip.up{background:var(--sage-soft);color:var(--sage)}
.cmchip.down{background:var(--rose-soft);color:var(--rose)}
.cmw{text-align:right;flex:0 0 auto;white-space:nowrap}
.cmw b{font-family:var(--serif);font-weight:400;font-size:19px;color:var(--espresso);display:block;line-height:1.1}
.cmw span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.cmw .delta{margin:4px 0 0 0;display:inline-block}

/* ==========================================================================
   MOBILE IS A FIRST-CLASS SURFACE
   Between two clients, on a phone, the order is: where am I, how is she,
   what did she say, what do I do. Her state is never behind the decision.
   ========================================================================== */
.gside{display:none}
/* The room, inline, for the layout that has no column. Exactly one of the two
   is ever displayed, so the practitioner never sees it twice. */
.roommob{display:block}
.statemob{display:block;border-color:#E5D9BC;background:linear-gradient(150deg,#FFFDF8,#F7F2E8);padding:14px 16px}
@media(min-width:940px){
  .gside{display:block}
  .statemob{display:none}
  .roommob{display:none}
}
.smhead{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.smk{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-bottom:2px}
.smw b{font-family:var(--serif);font-weight:400;font-size:25px;color:var(--espresso);line-height:1}
.smw small{font-size:11px;color:var(--ink-3)}
.smp{text-align:right}
.smp b{font-size:14px;font-weight:600;color:var(--espresso)}
.smbar{margin-top:10px}
.smfell{margin-top:9px;display:flex;gap:5px;flex-wrap:wrap}
.smmore{margin-top:11px;border-top:1px solid #E5D9BC;padding-top:10px}
.smmore>summary{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--champagne);cursor:pointer;list-style:none}
.smmore>summary::-webkit-details-marker{display:none}
.smmore>summary:after{content:"";display:inline-block;border:4px solid transparent;border-top-color:currentColor;
  border-bottom-width:0;margin-left:7px;vertical-align:2px}
.smmore[open]>summary:after{border:4px solid transparent;border-bottom-color:currentColor;border-top-width:0}
.smbody{padding-top:12px}
.smbody h4{margin-bottom:8px}

@media(max-width:719px){
  .cstep{margin-bottom:18px}
  .runtop{margin-bottom:10px}
  .phasebar .phaseline{padding:12px 14px 0;gap:9px}
  .phasebar .pn{font-size:19px}
  .moment{padding:16px 15px}
  .moment blockquote{font-size:17.5px}
  .opt{padding:13px 14px}
  .cqp-pair{grid-template-columns:1fr 26px 1fr;gap:6px}
  .cqp-w{font-size:23px}
  .cqp-arrow{width:26px}
  .cmrow{grid-template-columns:26px minmax(0,1fr) auto;gap:10px}
  .cmw b{font-size:16px}
  .tlrow{grid-template-columns:14px minmax(0,1fr) 84px 22px 28px}
  .casecard .top{padding:15px 14px 9px}
  .casecard .facts,.casecard .cc-sec,.casecard .act{padding-left:14px;padding-right:14px}
  .casecard .facts{-webkit-line-clamp:2;padding-bottom:10px}
  .casecard .cc-sec{padding-top:11px;padding-bottom:11px}
  .casecard .cc-teach p{font-size:14px}
  .osfoot{font-size:11px}
  .libfilter{gap:6px}
  .libfilter button{padding:6px 11px;font-size:12px}
  .openingnote p{font-size:13px}
  .trsub{font-size:15.5px}
}

/* ==========================================================================
   THE WALK-IN
   A practitioner signing in for the first time is walked in rather than
   dropped in. It is a stage laid into the top of her first screen, not a
   sheet thrown over it: nothing underneath is ever unreachable, and she can
   leave it at any point through the navigation.
   ========================================================================== */
.walkin{background:linear-gradient(158deg,#241E19 0%,#2E2620 58%,#3A3029 100%);color:#EFEAE3;
  border-radius:var(--r-lg);padding:20px 18px 18px;margin-bottom:22px;box-shadow:var(--shadow);
  position:relative;overflow:hidden}
@media(min-width:820px){.walkin{padding:30px 34px 26px}}
.walkin:after{content:"";position:absolute;right:-110px;top:-130px;width:330px;height:330px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,164,92,.16),transparent 66%);pointer-events:none}
.wi-head{display:flex;align-items:center;gap:12px;position:relative;margin-bottom:18px;flex-wrap:wrap}
.wi-kick{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:700}
.wi-dots{display:flex;gap:6px;align-items:center}
.wi-dots i{width:16px;height:3px;border-radius:2px;background:rgba(239,234,227,.22);display:block;transition:.2s}
.wi-dots i.past{background:rgba(201,164,92,.55)}
.wi-dots i.on{background:var(--gold);width:26px}
.wi-skip{background:transparent;border:0;color:#9C9187;font-size:12px;padding:4px 0}
.wi-skip:hover{color:#EFEAE3;border-color:transparent}
.wi-body{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;position:relative}
@media(min-width:820px){.wi-body{grid-template-columns:1.15fr .85fr;gap:34px}.wi-body.wide{grid-template-columns:1fr}}
.wi-text h2{font-family:var(--serif);font-size:23px;line-height:1.24;color:#fff;margin-bottom:12px;max-width:24ch}
@media(min-width:820px){.wi-text h2{font-size:30px}}
.wi-text p{font-size:14.5px;line-height:1.62;color:#CFC6BA;margin:0;max-width:56ch}
.wi-list{margin:14px 0 0;padding-left:20px;color:#CFC6BA;font-size:13.5px;line-height:1.6}
.wi-list li{margin-bottom:5px}
.wi-list li::marker{color:var(--gold)}
.wi-art{min-width:0}
.obart{width:100%;height:auto;display:block;max-width:360px;margin:0 auto}
.wi-panel{background:var(--bg);border-radius:var(--r);padding:12px 10px 4px;margin-top:20px;position:relative}
@media(min-width:820px){.wi-panel{padding:16px 18px 6px}}
.wi-panel .spinewrap{overflow-x:auto}
.wi-starts{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px;position:relative}
@media(min-width:700px){.wi-starts{grid-template-columns:1fr 1fr}}
.wi-start{border:1px solid rgba(239,234,227,.16);border-radius:12px;padding:12px 14px;background:rgba(239,234,227,.05)}
.wi-start .wi-sk{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:5px}
.wi-start b{font-family:var(--serif);font-weight:400;font-size:15px;line-height:1.4;color:#EFEAE3}
.wi-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:16px;
  border-top:1px solid rgba(239,234,227,.14);position:relative}
.wi-n{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9C9187;font-weight:700}
.walkin .primary{background:var(--gold);border-color:var(--gold);color:#241E19}
.walkin .primary:hover:not(:disabled){background:#D8B771;border-color:#D8B771}
button.wi-alt{background:transparent;border:1px solid var(--line);color:var(--ink-2);border-radius:999px;
  padding:9px 16px;font-size:12.5px;font-weight:600}
button.wi-alt:hover:not(:disabled){border-color:var(--champagne);color:var(--espresso)}
.walkin button.wi-alt{border-color:rgba(239,234,227,.26);color:#CFC6BA}
.walkin button.wi-alt:hover:not(:disabled){border-color:var(--gold);color:#fff}
@media(max-width:719px){
  .wi-text h2{font-size:21px}
  .wi-foot .primary.lg{flex:1 1 100%}
}

/* ==========================================================================
   THE CURRICULUM MAP
   Ten modules as one ascent, the eight canonical phases as the rail a real
   consultation runs, and a line from each module to the phase it is for.
   ========================================================================== */
.curmap{padding-bottom:6px}
.curhead{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:6px}
@media(min-width:860px){.curhead{grid-template-columns:1.5fr .8fr;gap:30px;align-items:start}}
.curnote{max-width:68ch;margin:0}
.curwhere{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
@media(min-width:860px){.curwhere{display:block}}
.cwn b{font-family:var(--serif);font-weight:400;font-size:30px;color:var(--espresso);display:block;line-height:1}
.cwn span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.cwnext{border-left:3px solid var(--champagne);padding-left:12px;margin-top:14px;min-width:0}
.cwk{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:3px}
.cwnext b{font-family:var(--serif);font-weight:400;font-size:17px;color:var(--espresso);display:block}
.cwnext .cwt{font-size:12.5px;color:var(--ink-2);display:block;margin-bottom:9px}
.cmapart{min-width:700px}
.cmap-tall{display:none}
svg.cmap-wide{display:block}
@media(max-width:859px){
  svg.cmap-wide{display:none}
  .cmap-tall{display:block;width:100%;height:auto;min-width:0}
  .cmapwrap{overflow:visible;margin-bottom:2px}
}
.mod .stagek{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--champagne);
  margin-bottom:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mod .stagek .nextk{background:var(--espresso);color:var(--gold);border-radius:999px;padding:2px 9px;letter-spacing:.12em}
.mod.st-done{border-color:#DCD0B4}
.mod.st-next{border-color:var(--espresso);box-shadow:0 20px 48px -34px rgba(36,30,25,.5)}

/* ==========================================================================
   YOUR MATERIALS — a library, not a table
   ========================================================================== */
.libempty{background:var(--panel-2);border-style:dashed}
.libempty p{margin:0;font-size:14px;line-height:1.62;color:var(--ink-2);max-width:74ch}
.libset{margin-bottom:22px}
.libsethead{display:flex;gap:13px;align-items:center;padding:0 2px 12px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.libsethead .lsface{flex:0 0 auto}
.libsethead .lsid{min-width:0;flex:1}
.libsethead .lsk{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--champagne)}
.libsethead h3{font-family:var(--serif);font-weight:400;font-size:18px;margin:2px 0 2px}
.libsethead .lscount{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700;flex:0 0 auto}
.tkdocs{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.tkdocs{grid-template-columns:1fr 1fr}}
.tkdoc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 6px;
  box-shadow:0 18px 44px -38px rgba(36,30,25,.45);position:relative;overflow:hidden}
.tkdoc:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--champagne);opacity:.7}
.tkdhead{display:flex;gap:13px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.tkdmark{flex:0 0 auto;line-height:0}
.tkdid{min-width:0}
.tkdk{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--champagne)}
.tkdoc h3{font-family:var(--serif);font-weight:400;font-size:17px;margin:3px 0 3px}
.tkdsum{font-size:12px;color:var(--ink-3)}
.tkdbody{padding-top:6px}
.dvfield{padding:11px 0;border-bottom:1px dashed var(--line-2)}
.dvfield:last-child{border-bottom:0}
.dvk{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-bottom:5px}
.dvtext{font-family:var(--serif);font-size:14.5px;line-height:1.55;color:var(--espresso)}
.dvticks{display:flex;flex-wrap:wrap;gap:6px}
.dvt{font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--line-2);color:var(--ink-3)}
.dvt.on{background:var(--sage-soft);color:var(--sage);font-weight:600}
.dvtick{font-size:14px;color:var(--sage)}
.dvrows{display:grid;gap:7px}
.dvrow{background:var(--panel-2);border-radius:9px;padding:8px 11px;font-size:13px;display:grid;gap:3px}
.dvrow span{display:block;color:var(--espresso)}
.dvrow em{font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;margin-right:7px}
.jncard .jnk{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--champagne);margin-bottom:8px}
.jncard .jnq{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin:14px 0 6px}
.jncard .jnq:first-of-type{margin-top:0}
.bkgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.bkgrid{grid-template-columns:1fr 1fr}}
.bkcard{background:linear-gradient(152deg,#FFFDF8,#F4EDDE);border:1px solid #E5D9BC;border-radius:var(--r);padding:18px}
.bkcard .bksrc{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);margin-bottom:10px}
.bkcard blockquote{margin:0;font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--espresso);
  padding-left:14px;border-left:2px solid var(--gold)}
.bkcard .bknote{font-size:13px;line-height:1.6;color:var(--ink-2);margin:12px 0 0}
.bkcard .bkfrom{font-size:11.5px;color:var(--ink-3);margin-top:12px;padding-top:10px;border-top:1px solid #E5D9BC}

/* ==========================================================================
   COMPLETION — what the work now enables, and what is next
   ========================================================================== */
.cmphero .kicker{color:var(--gold)}
.cmphero.cmpall{background:linear-gradient(150deg,#241E19,#3A3029 70%,#4A3B26)}
.cmpcard{background:var(--panel-2)}
.cmpline{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--espresso);margin:4px 0 0}
.cmpweek{border-left:3px solid var(--champagne);background:linear-gradient(150deg,#FFFDF8,#F4EDDE);border-color:#E5D9BC}
.cmpacts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 10px}
.cmphonest{margin:0 0 8px}
.cmpconsult{background:linear-gradient(150deg,#FFFDF8,#F7F2E8);border-color:#E5D9BC}
.ccm-kick{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--champagne);margin-bottom:8px}
.ccm-lead{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--espresso);margin-bottom:16px;max-width:62ch}
.cmpweekin{margin-top:16px;padding-top:14px;border-top:1px solid #E5D9BC}

/* ==========================================================================
   THE FIVE QUESTIONS, AND THE CASE EVIDENCE BEHIND THE FIFTH
   ========================================================================== */
.qcard{padding-top:16px}
.qhead{display:flex;gap:13px;align-items:flex-start;margin-bottom:10px}
.qn{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--espresso);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:14px}
.qh{min-width:0}
.qh h2{font-size:19px;margin:0 0 3px;line-height:1.25}
@media(min-width:820px){.qh h2{font-size:21px}}
.qh h4{margin:0}
.qsub{max-width:76ch;margin:0 0 14px}
.qlead{font-size:14px;margin-bottom:12px}
.coachitem{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.coachitem:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.coachitem h3{font-family:var(--serif);font-weight:400;font-size:17px;margin-bottom:8px}
.evlist{display:grid;gap:9px}
.evrow{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;background:var(--panel);cursor:pointer;transition:.15s;flex-wrap:wrap}
.evrow:hover{border-color:var(--champagne);box-shadow:0 16px 36px -32px rgba(36,30,25,.45)}
.evrow .evface{flex:0 0 auto;line-height:0}
.evrow .evmeta{flex:1 1 160px;min-width:0}
.evrow .evmeta b{display:block;font-size:14px;font-weight:600}
.evrow .evmeta span{display:block;font-size:12px}
.evout{font-size:10.5px;letter-spacing:.1em;font-weight:700;padding:4px 10px;border-radius:999px;
  background:var(--line-2);color:var(--ink-2);flex:0 0 auto}
.evout.oc-yes{background:var(--sage-soft);color:var(--sage)}
.evout.oc-defer{background:var(--gold-soft);color:var(--gold-deep)}
.evout.oc-no{background:var(--rose-soft);color:var(--rose)}
.evtl .tp{padding-bottom:24px}
.evtl .ti{font-size:15px;margin-top:4px}
.evk{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-bottom:4px}
.evsaid{border-left:2px solid var(--line);padding-left:12px;margin-top:10px}
.evsaid q{font-family:var(--serif);font-style:italic;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.evverdict{margin-top:12px}
.evverdict .vd{margin-right:8px}
.evverdict .evk{display:inline-block;margin:0 0 6px}
.evverdict p{font-size:13.5px;line-height:1.55;margin:6px 0 0;color:var(--ink-2)}
.evstate{margin-top:13px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:12px;padding:12px 13px}
.evchips{margin-top:9px;display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.evchips .evk{flex:0 0 100%;margin-bottom:2px}
.mtrk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.mtrkbar{position:relative;height:8px;border-radius:4px;background:#EFEAE2;flex:1 1 140px;min-width:110px;overflow:visible;display:block}
.mtrkbar i{display:block;height:100%;border-radius:4px;background:var(--mercury)}
.mtrk.fell .mtrkbar i{background:linear-gradient(90deg,#C8CCD1,#C98A8E)}
.mtrk.rose .mtrkbar i{background:linear-gradient(90deg,#C8CCD1,#7FA893)}
.mtrkbar em{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--espresso);opacity:.4;border-radius:2px}
.mtrkbar s{position:absolute;top:-4px;bottom:-4px;width:1.5px;background:var(--champagne);text-decoration:none}
.mtrkv{font-family:var(--serif);font-size:14px;color:var(--espresso);flex:0 0 auto}
.mtrkk{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);font-weight:700;flex:0 0 auto}
.outcard{border-left:3px solid var(--champagne)}
.outcard.oc-yes{border-left-color:var(--sage)}
.outcard.oc-no{border-left-color:var(--rose)}
.ocbig{font-family:var(--serif);font-size:34px;line-height:1;color:var(--espresso);margin-bottom:10px}
.ocsay{margin:0 0 18px;font-family:var(--serif);font-size:18px;line-height:1.45;color:var(--ink-2);
  padding-left:14px;border-left:2px solid var(--line)}

@media(max-width:719px){
  .tkdoc{padding:14px 14px 4px}
  .tkdoc h3{font-size:16px}
  .bkcard{padding:16px 15px}
  .bkcard blockquote{font-size:15.5px}
  .cmpline{font-size:15.5px}
  .qh h2{font-size:17.5px}
  .ocbig{font-size:28px}
  .evrow{padding:11px 12px}
  .libsethead h3{font-size:16.5px}
}
.evfinal{max-width:520px}
.evfinal .statepanel{position:static}

/* a Toolkit document opens where it is: a shelf first, the document on demand */
details.tkdoc{padding:0}
details.tkdoc>summary{list-style:none;cursor:pointer;padding:16px 16px 13px;margin:0;
  display:flex;gap:13px;align-items:flex-start;border-bottom:1px solid transparent}
details.tkdoc>summary::-webkit-details-marker{display:none}
details.tkdoc[open]>summary{border-bottom-color:var(--line-2)}
details.tkdoc>summary:hover .tkdopen{border-color:var(--champagne);color:var(--espresso)}
.tkdopen{margin-left:auto;flex:0 0 auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap}
details.tkdoc .tkdc{display:none}
details.tkdoc[open] .tkdo{display:none}
details.tkdoc[open] .tkdc{display:inline}
details.tkdoc .tkdbody{padding:4px 16px 8px}
@media(max-width:719px){
  details.tkdoc>summary{padding:14px 14px 12px;flex-wrap:wrap}
  details.tkdoc .tkdbody{padding:4px 14px 6px}
  .tkdopen{margin-left:0}
}

/* the ladder and the willingness rail keep a readable measure on a wide page */
.evstate .tladder{max-width:440px}
.evstate .mtrkbar{flex:0 1 300px;max-width:300px}
.tkdocs{align-items:start}

/* ==========================================================================
   THE LESSON, AS SOMETHING MADE
   A lesson is not a document. It opens on a cover, it runs in beats, the
   passages from the book are set as passages from a book, and the second
   attempt after a missed decision is the moment the whole thing is for.
   Everything here is designed at 390px first: a practitioner reads this
   between clients, one-handed.
   ========================================================================== */

/* ---------- the cover ---------- */
.lcover{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--espresso);
  color:#EFEAE3;margin:0 0 14px;box-shadow:var(--shadow)}
/* THE DECORATION WAS RUNNING THROUGH THE SENTENCES.
   The cover band is a bright line drawing behind the hero, and the scrim over
   it fell from 96% to 18% opacity across the card. The text column reaches
   62ch, so on a desktop two of those lines crossed the objective and the meta
   row, and on a phone — where the column is the whole card — every line
   struck through the copy. It read as a rendering fault, which on the first
   screen of a premium lesson is the most expensive kind.
   The band is now quieter, and the scrim holds nearly full strength across
   the width the text actually occupies before it opens up. */
.cvband{position:absolute;inset:0;opacity:.8;filter:saturate(1.15) brightness(1.2)}
.cvband svg{width:100%;height:100%;display:block}
/* Solid clean across the column the text occupies, then it opens and the
   drawing is allowed to be a drawing. The break is at 60%, which is where the
   62ch text column ends on every width this rule applies to. */
.lcover:after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(36,30,25,.99) 0%,rgba(36,30,25,.985) 55%,
             rgba(36,30,25,.86) 68%,rgba(36,30,25,.22) 100%)}
/* On a phone the text IS the full width, so nothing may show through it. */
@media(max-width:819px){
  .cvband{opacity:.4}
  .lcover:after{background:linear-gradient(170deg,rgba(36,30,25,.99) 0%,rgba(36,30,25,.97) 72%,
                rgba(36,30,25,.86) 100%)}
}
.lcin{position:relative;z-index:2;padding:24px 20px 20px}
@media(min-width:820px){.lcin{padding:38px 40px 32px;max-width:62ch}}
.lckick{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--gold)}
.lckick .lcdot{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.7;display:block;flex:0 0 auto}
.lctitle{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.16;margin:14px 0 0;color:#fff}
@media(min-width:820px){.lctitle{font-size:38px}}
.lcobj{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:#C5BAAC;max-width:52ch}
/* The sentence she can act on, leading. Slightly larger and lighter than the
   apparatus line it replaced, because it is the one thing on this screen that
   tells her what she will be able to do. */
.lcoutlead{font-size:16px;line-height:1.55;color:#E6DCCE;max-width:48ch}
@media(min-width:820px){.lcoutlead{font-size:18px}}
/* The objective, now where the rest of the apparatus lives. */
.pvobj{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-2)}
.pvobj>span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.pvobj p{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:60ch}
.lcmeta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:16px;
  border-top:1px solid rgba(239,234,227,.16)}
.lcm{flex:1 1 118px;min-width:0}
.lcm span{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#8A7F73;font-weight:700}
.lcm b{display:block;font-family:var(--serif);font-weight:400;font-size:15px;color:#EFEAE3;margin-top:4px;line-height:1.3}

/* ---------- where she is in it ---------- */
.lprog{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.lpk{flex:0 0 auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.lpk b{color:var(--champagne);font-size:12px}
.lprog .progressline{flex:1;margin:0;display:block}

/* ---------- the beats ---------- */
.block{position:relative}
.block+.block{margin-top:18px}
.k-passage .pstitle{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.24;margin:0 0 14px}
@media(min-width:820px){.k-passage .pstitle{font-size:25px}}
.plede{font-family:var(--serif);font-size:18.5px;line-height:1.52;color:var(--ink);margin:0 0 6px;max-width:48ch}
@media(min-width:820px){.plede{font-size:21px}}
.pbeats{margin-top:18px;display:grid;gap:16px}
.pbeat{display:flex;gap:14px;align-items:flex-start;padding-top:16px;border-top:1px solid var(--line-2)}
.pbeat .pbn{flex:0 0 22px;height:22px;border-radius:50%;background:var(--gold-soft);color:var(--gold-deep);
  font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.pbeat p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-2);max-width:60ch}
/* a teaching picture is a beat of its own: ruled off top and bottom and run to
   the edges of the block rather than inset inside the prose */
.pfigure{margin:22px -18px 4px;padding:18px 18px 10px;background:var(--panel-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:820px){.pfigure{margin:28px -28px 6px;padding:24px 28px 14px}}
.pfigure .dgwrap{margin:0!important}
/* a passage that ends on its picture ends on the picture, not on a sliver of
   empty card underneath it */
.bi > .pfigure:last-child{margin-bottom:-20px;border-bottom:0}
@media(min-width:820px){.bi > .pfigure:last-child{margin-bottom:-26px}}

/* ---------- the book ---------- */
.block.insight{background:linear-gradient(152deg,#332A23 0%,#241E19 58%,#1C1713 100%);
  border:0;padding:28px 20px 24px;box-shadow:0 30px 70px -44px rgba(36,30,25,.85)}
@media(min-width:820px){.block.insight{padding:44px 46px 36px}}
.block.insight .stage{color:var(--gold)}
.block.insight .stage:before{background:var(--gold)}
.insmark{margin:2px 0 10px;opacity:.95;line-height:0}
.inskick{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:12px}
.inspull{margin:0;font-family:var(--serif);font-weight:400;color:#fff;
  font-size:24px;line-height:1.34;letter-spacing:.005em;max-width:24ch}
@media(min-width:720px){.inspull{font-size:31px;line-height:1.3;max-width:22ch}}
@media(min-width:1100px){.inspull{font-size:35px}}
.insgrid{display:grid;gap:24px;margin-bottom:12px}
@media(min-width:980px){
  .insgrid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:56px;align-items:end}
  .insright{padding-bottom:4px}
}
.insrule{width:56px;height:1px;background:var(--gold);opacity:.6;margin:0 0 12px}
@media(max-width:979px){.insrule{margin-top:22px}}
.inssrc{display:block;font-style:normal;font-size:12.5px;line-height:1.5;color:#BCB2A5;font-family:var(--serif)}
.inssrc .insck{display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:#7E7368;margin-bottom:5px}
.insnote{margin-top:20px;padding-top:18px;border-top:1px solid rgba(239,234,227,.13);max-width:58ch}
.insnk{font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#8A7F73;margin-bottom:7px}
.block.insight .note{font-size:13.5px;line-height:1.66;color:#BCB2A5;margin:0}
.block.insight [data-next]{background:var(--gold);border-color:var(--gold);color:#241E19;font-weight:700}
.block.insight [data-next]:hover{background:#D9B673;border-color:#D9B673}

/* ---------- two ways of saying the same thing ---------- */
.cmpkick{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--champagne);margin-bottom:8px}
.cmpgrid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.cmpgrid{grid-template-columns:1fr 1fr;gap:16px}}
.cmpcol{display:flex;flex-direction:column;text-align:left;width:100%;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer;transition:.16s;font-size:14px}
.cmpcol:hover:not(.locked){border-color:var(--champagne);box-shadow:0 18px 40px -34px rgba(36,30,25,.55)}
.cmpcol.locked{cursor:default}
.cmptag{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 15px;width:100%;
  background:var(--panel-2);border-bottom:1px solid var(--line-2)}
.cmplab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.cmpyours{font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:#fff;background:var(--espresso);padding:3px 8px;border-radius:999px}
.cmpturn{padding:15px 15px 13px;width:100%}
.cmpwho{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-4);margin-bottom:7px}
.cmpturn.you q{display:block;quotes:none;font-family:var(--serif);font-size:16px;line-height:1.52;color:var(--ink)}
@media(min-width:820px){.cmpturn.you q{font-size:17px}}
.cmpjoin{padding:0 15px;height:16px;position:relative}
.cmpjoin i{position:absolute;left:24px;top:0;bottom:0;width:1px;background:var(--line);display:block}
.cmpjoin i:after{content:"";position:absolute;left:-2.5px;bottom:0;width:6px;height:6px;border-radius:50%;background:var(--line)}
.cmpturn.hers{background:var(--panel-2);border-top:1px solid var(--line-2);margin-top:auto;flex:1}
.cmpher{display:flex;gap:12px;align-items:center}
.cmpface{flex:0 0 auto;line-height:0}
.cmpsays{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.cmpsays.wait{color:var(--ink-4);font-style:italic}
.cmpcol.correct{border-color:var(--sage)}
.cmpcol.correct .cmpturn.hers{background:var(--sage-soft)}
.cmpcol.correct .cmpsays{color:var(--sage);font-weight:600}
.cmpcol.wrong{border-color:var(--rose)}
.cmpcol.wrong .cmpturn.hers{background:var(--rose-soft)}
.cmpcol.wrong .cmpsays{color:var(--rose);font-weight:600}
.cmpcol.wrong .cmpturn.you q{color:var(--ink-2)}

/* ---------- the retry stage ----------
   The emotional high point of a lesson. A learner who got it wrong is handed a
   second live moment while the coaching is still on screen, and it is drawn as
   a second chance — sage, marked, named — not as an error state. */
.retry{margin-top:20px;border-radius:var(--r);overflow:hidden;border:1px solid #C9DBD0;
  background:#fff;box-shadow:0 24px 55px -40px rgba(71,114,93,.75)}
.retrytop{display:flex;gap:14px;align-items:flex-start;padding:16px 16px 14px;
  background:linear-gradient(150deg,#E6EEE9,#F2F7F4)}
@media(min-width:820px){.retrytop{padding:20px 22px 18px}}
.rtmark{flex:0 0 auto;line-height:0}
.retryhead{flex:1;min-width:0}
.rtline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.retryhead p{margin:0;font-size:13px;line-height:1.55;color:#3C5A4B}
.rtag{display:inline-block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:#fff;background:var(--sage);padding:4px 10px;border-radius:20px;white-space:nowrap}
.rtstep{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#6D8F7E}
.retrybody{padding:16px}
@media(min-width:820px){.retrybody{padding:20px 22px}}
.retry .prompt{font-family:var(--serif);font-size:17px;line-height:1.45;margin-bottom:14px}
@media(min-width:820px){.retry .prompt{font-size:19px}}
.retry .opt:hover:not(.locked){border-color:var(--sage);background:#F6FAF8}
.retryfoot{margin:0;padding:12px 16px 14px;border-top:1px solid var(--line-2);background:var(--panel-2);
  font-size:12px;line-height:1.55;color:var(--ink-3)}
@media(min-width:820px){.retryfoot{padding:13px 22px 15px}}
.principle.sage{border-left-color:var(--sage);background:var(--sage-soft)}

/* ---------- the end of the lesson ---------- */
.lend{background:linear-gradient(150deg,#FBF7EF,#F2E9D6);border-color:#E5D9BC}
.lend h2{font-size:23px;margin-bottom:8px}
.lendobj{font-size:14.5px;color:var(--ink-2);max-width:56ch;margin-bottom:18px}

/* ==========================================================================
   THE SIXTH ANSWER — what to send each person back to.
   A prescription, drawn: the module in its own cover art, the client as the
   person she is at the door. One card per practitioner, never a league table.
   ========================================================================== */
.rxlist{display:grid;gap:16px}
.rxcard{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:18px 16px;
  box-shadow:0 20px 50px -42px rgba(36,30,25,.6)}
@media(min-width:820px){.rxcard{padding:24px 26px}}
.rxwho{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rxwho h3{margin:0;font-family:var(--serif);font-weight:400;font-size:20px}
.rxline{margin:8px 0 16px;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.rxpair{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.rxpair{grid-template-columns:1fr 1fr;gap:16px}}
.rxslot{border:1px solid var(--line-2);border-radius:12px;padding:14px;background:var(--panel-2);
  display:flex;flex-direction:column}
.rxk{font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink-4);margin-bottom:11px}
.rxcover{position:relative;border-radius:10px;overflow:hidden;height:86px;margin-bottom:12px;background:var(--espresso)}
.rxcover svg{width:100%;height:100%;display:block;filter:saturate(1.35) brightness(1.45)}
.rxnum{position:absolute;right:11px;bottom:6px;font-family:var(--serif);font-size:25px;color:var(--gold);opacity:.92;line-height:1}
.rxclient{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rxface{flex:0 0 auto;line-height:0}
.rxcn{position:static;font-size:25px;color:var(--champagne);opacity:.85}
.rxname{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.25;color:var(--ink);
  letter-spacing:0;text-transform:none;margin:0}
.rxsub{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.rxwhy{margin:11px 0 12px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.rxwhy b{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne);margin-bottom:4px}
.rxgo{margin-top:auto;align-self:flex-start}
.rxnone{margin:0}
.rxfoot{margin-top:16px;display:grid;gap:12px}
@media(min-width:900px){.rxfoot{grid-template-columns:1fr 1fr;gap:18px}}
.rxblk p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.rxtalk p{color:var(--gold-deep)}
.rxbasis{margin-top:14px;padding-top:11px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--ink-4)}
.rxcard.waiting{background:var(--panel-2)}
.rxcard.waiting .rxline{margin-bottom:8px;color:var(--ink)}
.rxwait{margin:0;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:62ch}

/* ==========================================================================
   390px — a practitioner between clients.
   ========================================================================== */
@media(max-width:719px){
  .lcover{border-radius:var(--r)}
  .lcin{padding:20px 16px 18px}
  .lckick{gap:0;flex-direction:column;align-items:flex-start;line-height:1.7}
  .lckick .lcdot{display:none}
  .lctitle{font-size:24px}
  .lcobj{font-size:14px}
  .lcmeta{gap:8px 12px;margin-top:18px;padding-top:13px}
  .lcm{flex:1 1 44%}
  .lcm b{font-size:14px}
  .lprog{gap:10px;margin-bottom:14px}
  .lpk{font-size:9px}
  .block.insight{padding:24px 16px 20px}
  .inspull{font-size:22px}
  .plede{font-size:17.5px}
  .pbeat{gap:11px}
  .pbeat .pbn{flex-basis:20px;height:20px;font-size:10px}
  .pfigure{margin-left:-18px;margin-right:-18px;padding-left:14px;padding-right:14px}
  .cmpturn.you q{font-size:15.5px}
  .cmpjoin{height:12px}
  .cmpjoin i{left:22px}
  .retrytop{padding:14px 14px 12px;gap:11px}
  .retrybody{padding:14px}
  .retryfoot{padding:11px 14px 12px}
  .retry .prompt{font-size:16px}
  .lend h2{font-size:20px}
  .rxcard{padding:16px 14px}
  .rxwho h3{font-size:18px}
  .rxslot{padding:12px}
  .rxcover{height:62px}
  .block [data-next],.lend #fin{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .cmpcol,.rxcard,.retry,.opt,.lcover{transition:none!important}
  .progressline i{transition:none!important}
}

/* ---------- where this lesson comes from ----------
   Folded away by default: a practitioner mid-lesson does not need the citation,
   and a clinic auditing the curriculum needs nothing else. */
.prov{border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);margin:0 0 16px;overflow:hidden}
.prov summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:12px 16px}
.prov summary::-webkit-details-marker{display:none}
.prov summary:after{content:"+";margin-left:auto;color:var(--ink-3);font-size:16px;line-height:1}
.prov[open] summary:after{content:"–"}
.pvtag{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--champagne);white-space:nowrap}
.pvsum{font-size:12.5px;color:var(--ink-3)}
.pvprin{margin:0 16px 14px;padding:12px 16px;border-left:2px solid var(--gold);background:var(--gold-soft);
  border-radius:0 8px 8px 0;font-family:var(--serif);font-size:15.5px;line-height:1.5}
.pvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:0 18px;padding:0 16px 14px}
.pvr{display:flex;flex-direction:column;gap:2px;padding:7px 0;border-top:1px solid var(--line-2)}
.pvr span{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.pvr b{font-size:13px;font-weight:400;color:var(--ink)}

/* ---------- what the retry changed ---------- */
.rchange{margin-top:12px;padding:12px 14px;border:1px dashed var(--sage);border-radius:var(--r);background:transparent}
.rcax{display:inline-block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--sage);margin-bottom:5px}
.rchange p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55}
@media(max-width:719px){.pvgrid{grid-template-columns:1fr 1fr}.pvprin{font-size:14.5px}}

/* ==========================================================================
   WHAT A MODULE BUYS HER
   The strapline says what a module is about. The outcome says what she will
   be able to DO once it is behind her, and it is set as a promise, in the
   module's own gold, wherever she meets the module.
   ========================================================================== */
.modout{margin:12px 0 0;padding:11px 12px;border-radius:10px;background:var(--gold-soft);
  border:1px solid #EADFC6}
.modout .mok{display:block;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold-deep);margin-bottom:5px}
.modout p{margin:0;font-family:var(--serif);font-size:14px;line-height:1.45;color:var(--ink)}
.mod:not(.available) .modout{background:var(--panel-2);border-color:var(--line-2)}
.mod:not(.available) .modout .mok{color:var(--ink-3)}

/* the module's own page: the promise, given a whole band of its own */
.outpromise{margin:0 0 16px;padding:20px 18px;border-radius:var(--r);
  background:linear-gradient(140deg,#FBF4E6 0%,#F6EEDC 60%,#F2E7CE 100%);
  border:1px solid #E8DBBE}
@media(min-width:820px){.outpromise{padding:26px 28px}}
.outpromise .opk{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--gold-deep);margin-bottom:9px}
.outpromise p{margin:0;font-family:var(--serif);font-size:19px;line-height:1.46;color:var(--ink);max-width:56ch}
@media(min-width:820px){.outpromise p{font-size:22px}}

/* the lesson cover: the same promise, named as the thing this lesson feeds */
.lcout{margin:16px 0 0;padding-left:13px;border-left:2px solid var(--gold)}
.lcout .lcoutk{display:block;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold);margin-bottom:5px}
.lcout p{margin:0;font-size:13.5px;line-height:1.55;color:#D6CCBE;max-width:50ch}

/* ==========================================================================
   THE JOURNEY RAIL
   Eight rungs at most, drawn as one line. Past rungs have settled, the current
   one is lit, the ones ahead are waiting, and a RETRY that has not fired yet
   says so rather than pretending to be part of the route.
   ========================================================================== */
.jrail{position:sticky;top:100px;z-index:40;margin:0 0 18px;padding:11px 14px;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(251,247,239,.94);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.jrsteps{list-style:none;display:flex;align-items:center;margin:0;padding:0}
.jst{display:flex;align-items:center;gap:7px;min-width:0;position:relative;padding:2px 0}
.jst+.jst:before{content:"";flex:1 1 10px;height:1px;min-width:8px;background:var(--line);margin:0 9px}
.jst+.jst{flex:1 1 auto}
.jdot{flex:0 0 auto;width:13px;height:13px;border-radius:50%;border:1px solid var(--line);
  background:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.jdot i{width:5px;height:5px;border-radius:50%;background:transparent;display:block}
.jlab{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ink-4);
  white-space:nowrap}
.jmaybe{font-size:9px;color:var(--ink-4);font-style:italic;letter-spacing:0;text-transform:none;white-space:nowrap}
.jnow{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.jst.is-past .jdot{border-color:var(--ink-4);background:var(--ink-4)}
.jst.is-past .jlab{color:var(--ink-3)}
.jst.is-now .jdot{border-color:var(--champagne);background:#fff;box-shadow:0 0 0 3px var(--gold-soft)}
.jst.is-now .jdot i{background:var(--champagne)}
.jst.is-now .jlab{color:var(--espresso)}
.jst.is-ahead .jlab{color:var(--ink-4)}
.jst[data-maybe] .jdot{border-style:dashed}
.jst[data-maybe] .jlab{color:var(--ink-4)}
.jst.is-real .jmaybe{display:none}

/* the loop: a miss sent her back, and the rail says so out loud */
.jst[data-st="retry"].is-real .jdot{border-color:var(--sage);border-style:solid;background:var(--sage)}
.jst[data-st="retry"].is-real .jlab{color:var(--sage)}
.jst.is-again .jdot{border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft)}
.jst.is-again .jlab{color:var(--sage)}
.jst.is-again .jdot:after{content:"2";position:absolute;top:-9px;right:-8px;font-size:8px;
  font-weight:700;color:var(--sage);line-height:1}
.jrail.looped .jst[data-st="choose"]:after,
.jrail.looped .jst[data-st="consequence"]:after,
.jrail.looped .jst[data-st="understand"]:after,
.jrail.looped .jst[data-st="retry"]:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:repeating-linear-gradient(90deg,var(--sage) 0 3px,transparent 3px 7px);opacity:.6}
.jrail.looped .jst[data-st="choose"]:after{left:-4px}
.jloop{display:none}
.jrail.looped .jloop{display:block;margin:11px 4px 1px;padding-top:9px;border-top:1px solid var(--line-2);
  font-size:11.5px;line-height:1.55;color:var(--sage);max-width:76ch}
@keyframes jpulse{0%{box-shadow:0 0 0 3px var(--sage-soft)}50%{box-shadow:0 0 0 8px rgba(71,114,93,.16)}100%{box-shadow:0 0 0 3px var(--sage-soft)}}
.jst.pulse .jdot{animation:jpulse 1.1s ease-in-out 2}

/* ==========================================================================
   THE REASONING UNDER THE LESSON
   Why a careful practitioner walks into the trap, what the client is thinking
   while she does, and the same moment answered three ways. Teaching, not an
   exercise: no stage chip, nothing marked, nothing recorded.
   ========================================================================== */
.depth{margin:0 0 18px}
.depth>*+*{margin-top:16px}
.dpk{font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--champagne);
  margin-bottom:11px}

.dwhy{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px}
@media(min-width:820px){.dwhy{padding:34px 38px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:0 44px;align-items:start}
  .dwhy .dpk{grid-column:1/-1}}
.dwhy h2{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.2;margin:0 0 16px;
  max-width:24ch;position:relative;padding-bottom:15px}
@media(min-width:820px){.dwhy h2{font-size:29px}}
.dwhy h2:after{content:"";position:absolute;left:0;bottom:0;width:46px;height:1px;background:var(--gold)}
.dwhy p{margin:0;font-family:var(--serif);font-size:17px;line-height:1.72;color:var(--ink-2);max-width:64ch}
@media(min-width:820px){.dwhy p{font-size:18.5px}}

/* her interior voice: no rule, no shadow, no edge — quieter than anything
   anyone says out loud in this product */
.dthink{position:relative;border-radius:var(--r);padding:22px 20px 20px;
  background:linear-gradient(158deg,#F2EEE8 0%,#EEE8E0 55%,#EAE3D9 100%);
  display:flex;gap:14px;align-items:flex-start}
@media(min-width:820px){.dthink{padding:28px 34px 26px;margin-left:34px}}
.dtmark{flex:0 0 auto;line-height:0;opacity:.42;margin-top:2px}
.dtbody{min-width:0}
.dtk{font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink-3);
  margin-bottom:10px}
.dthink blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.55;
  color:var(--ink-2);max-width:46ch}
@media(min-width:820px){.dthink blockquote{font-size:22px}}
.dtnote{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--ink-3);max-width:50ch}

/* the ladder: three rungs of one moment, and the difference has to be earned */
.dladder{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px 18px}
@media(min-width:820px){.dladder{padding:28px 30px}}
.dladder h2{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.22;margin:0 0 8px}
@media(min-width:820px){.dladder h2{font-size:25px}}
.dlsub{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:60ch}
.dlrungs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dlrung{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  padding:12px 12px 13px;border-radius:11px;border:1px solid var(--line);background:#fff;
  border-top:3px solid var(--line)}
.dlrung .dlnum{font-size:9px;letter-spacing:.14em;font-weight:700;color:var(--ink-4)}
.dlrung .dlname{font-family:var(--serif);font-size:16px;line-height:1.15;color:var(--ink)}
.dlrung .dllock{display:none;font-size:10px;line-height:1.35;color:var(--ink-4);font-style:italic}
.dlrung.r-weak{border-top-color:#DCC3C4}
.dlrung.r-average{border-top-color:var(--ink-4)}
.dlrung.r-strong{border-top-color:var(--gold)}
.dlrung.read{background:var(--panel-2)}
.dlrung.on{border-color:var(--espresso);background:#fff;box-shadow:0 12px 30px -24px rgba(36,30,25,.8)}
.dlrung.on .dlname{font-weight:600}
.dlrung.shut{opacity:.5;cursor:default;background:var(--panel-2)}
.dlrung.shut .dllock{display:block}
.dlrung.shut .dlname{color:var(--ink-3)}

.dlstage{margin-top:16px;border-radius:12px;padding:18px 16px;background:var(--panel-2);
  border-left:3px solid var(--line)}
@media(min-width:820px){.dlstage{padding:22px 24px}}
.dlstage.r-weak{border-left-color:#C08D90;background:#FAF4F4}
.dlstage.r-average{border-left-color:var(--ink-4);background:#FAFAF8}
.dlstage.r-strong{border-left-color:var(--gold);background:linear-gradient(140deg,#FBF4E6,#F7F0E1)}
.dlempty{margin:0;font-size:13px;color:var(--ink-3)}
.dlhead{margin-bottom:12px}
.dlbadge{display:inline-block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.dlstage.r-strong .dlbadge{color:var(--gold-deep);border-color:#E3D3AE}
.dlk{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-4);
  margin-bottom:6px}
.dlsays q{display:block;quotes:none;font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--ink);max-width:48ch}
@media(min-width:820px){.dlsays q{font-size:21px}}
.dldoes{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.dldoes p{margin:0;font-size:14px;line-height:1.66;color:var(--ink-2);max-width:60ch}
.dlcost{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-2);
  font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:62ch}
.dlgate{margin:12px 0 0;font-size:12px;line-height:1.55;color:var(--gold-deep);max-width:56ch}
@keyframes dnudge{0%,100%{opacity:1}35%{opacity:.25}70%{opacity:1}}
.dlgate.nudge{animation:dnudge .7s ease-in-out 1}
.dlfoot{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--ink-4)}

/* ==========================================================================
   THE SEVENTH ANSWER — what changed after coaching.
   Every state is set in the same type on the same paper. "Too early to say"
   is an answer. "Happening more" is reported as plainly as "happening less":
   no red, no alarm, and nothing anywhere that reads as a score.
   ========================================================================== */
.coachfoot{margin-top:9px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.coachfoot .muted{margin:0}
.cnjump{flex:0 0 auto;font-size:12.5px;padding:7px 13px}

.cnform{border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);
  padding:18px 16px;margin-bottom:18px}
@media(min-width:820px){.cnform{padding:22px 24px}}
.cnfk{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--champagne)}
.cnfsub{margin:8px 0 16px;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:66ch}
.cnrow{display:grid;grid-template-columns:1fr;gap:0 16px}
@media(min-width:760px){.cnrow{grid-template-columns:1fr 1.25fr}}
.cnform textarea{min-height:84px;background:#fff}
.cnacts{display:flex;gap:10px;flex-wrap:wrap}
.cnguide{margin:0 0 14px;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.55;
  background:var(--amber-soft);color:var(--amber);border:1px solid #EADFC6}
.cnguide.good{background:var(--sage-soft);color:var(--sage);border-color:#CFE0D6}

.cnlist{display:grid;gap:14px}
.cneff{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:18px 16px}
@media(min-width:820px){.cneff{padding:22px 24px}}
.cnhd{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cnwho{min-width:0;flex:1 1 auto}
.cnwho h3{margin:0;font-family:var(--serif);font-weight:400;font-size:19px}
.cnwhen{font-size:11.5px;color:var(--ink-4)}
.cnstate{flex:0 0 auto;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.cnsubj{margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.cnsubj span{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink-4);margin-bottom:4px}
.cnsubj b{font-weight:600}
.cnsaid{margin-top:14px;padding:13px 15px;border-radius:10px;background:var(--panel-2)}
.cnsaid q{display:block;quotes:none;font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--ink);max-width:58ch}
.cnhead{margin:16px 0 0;font-family:var(--serif);font-size:17.5px;line-height:1.46;color:var(--ink);max-width:60ch}
@media(min-width:820px){.cnhead{font-size:19px}}
.cnba{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.cnbax{flex:1 1 150px;padding:11px 13px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel-2)}
.cnbax span{display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-4)}
.cnbax b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.1;margin-top:5px;color:var(--ink)}
.cnbax i{font-style:normal;font-size:11px;color:var(--ink-3)}
.cnlines{margin-top:16px;padding-top:13px;border-top:1px solid var(--line-2)}
.cnlines .cnk{margin-bottom:8px}
.cnlines p{margin:0 0 8px;font-size:13.5px;line-height:1.65;color:var(--ink-2);max-width:66ch}
.cnlines p:last-child{margin-bottom:0}
.cndetail{margin:14px 0 0;font-size:13.5px;line-height:1.65;color:var(--ink-2);max-width:66ch}
.cncaution{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-2);
  font-size:11.5px;line-height:1.6;color:var(--ink-4);max-width:70ch}
.cnempty{margin:0;max-width:70ch}
.cneff .cnk{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-4);margin-bottom:6px}

/* ==========================================================================
   A WRITTEN LINE
   The words keep the punctuation their author gave them — "like this" in
   English, «así» in Spanish — so the sheet adds no marks of its own. What it
   does is set a stage direction differently from speech, which is the only
   distinction the screen is entitled to make.
   ========================================================================== */
.say{margin:0;font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink)}
.aside{margin:7px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-3);font-style:italic}
.aside+.say,.say+.say{margin-top:8px}
.aside.lone{margin-top:0;font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--ink-2)}

/* ==========================================================================
   TREATMENT CARDS
   The lesson's own principle, put against treatments a Madrid clinic actually
   sells, at prices it actually quotes. A set of related cards — never a table.
   ========================================================================== */
.trx,.cv{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 18px;margin:0 0 16px}
@media(min-width:820px){.trx,.cv{padding:30px 32px}}
.trx>h2,.cv>h2{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.22;margin:0 0 8px}
@media(min-width:820px){.trx>h2,.cv>h2{font-size:25px}}
.trxsub,.cvsub{margin:0 0 20px;font-size:13.5px;line-height:1.65;color:var(--ink-3);max-width:72ch}
.trxk{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--ink-4);margin-bottom:7px}

.trxset{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.trxset{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A SET OF ONE IS NOT A COLUMN OF A GRID. The retail panel usually carries a
   single example, and a two-column grid gave it half the width and left the
   other half empty — a card of body text at 500px inside a 1280px page, which
   reads as something unfinished rather than as one worked example. */
@media(min-width:760px){.trxset[data-n="1"]{grid-template-columns:minmax(0,1fr)}}
@media(min-width:1060px){.trxset[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trxc{display:flex;flex-direction:column;background:var(--panel-2);
  border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:12px;padding:18px 16px}
.trxh{margin-bottom:12px}
.trxn{display:block;font-size:9px;letter-spacing:.18em;font-weight:700;color:var(--ink-4);margin-bottom:6px}
.trxname{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.22;margin:0 0 9px;color:var(--ink)}
.trxprice{display:inline-block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--gold-deep);background:var(--gold-soft);border:1px solid #E7DBBE;border-radius:999px;padding:4px 11px}
.trxwhy{margin:0 0 14px;font-family:var(--serif);font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.trxmom{background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:13px;margin-bottom:14px}
.trxmom p{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink-2)}
.trxlines{margin-top:auto;display:grid;gap:10px}
.trxl{border-radius:10px;padding:13px;border-left:3px solid var(--line)}
.trxl.weak{background:#FAF4F4;border-left-color:#C08D90}
.trxl.strong{background:linear-gradient(140deg,#FBF4E6,#F7F0E1);border-left-color:var(--gold)}
.trxl .say{font-size:15.5px;line-height:1.48}
.trxeff{margin:11px 0 0;padding-top:9px;border-top:1px solid rgba(36,30,25,.09);
  font-size:12.5px;line-height:1.62;color:var(--ink-2)}
.trxeff span{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--ink-4);margin-bottom:4px}
.trxfoot{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--line-2);
  font-size:11.5px;line-height:1.6;color:var(--ink-4);max-width:72ch}

/* ==========================================================================
   THE SAME PRINCIPLE, AT A COUNTER
   --------------------------------------------------------------------------
   Deliberately the SAME card as a treatment example: a practitioner who works
   a counter on Saturday and a cabin on Tuesday should not have to learn two
   layouts for one idea. Two things set it apart and neither is ornament.

   The gold top rule becomes a dashed one, because every card on this panel is
   a draft and a dashed edge is what a draft looks like in print. And the status
   is stated in a band under the heading rather than in a corner badge, so it
   cannot be mistaken for a decorative tag and cannot be scrolled past.
   Both disappear by themselves the day the material carries no status.
   ========================================================================== */
.trx.rt{border-color:#D8CFC0}
.trxc.rtc{border-top:2px dashed var(--gold)}
.rtdraft{margin:0 0 14px}
.rtdraft span{display:inline-block;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:#7A6752;background:#F4EEE3;border:1px dashed #CDBFA6;
  border-radius:4px;padding:5px 10px}
.rtclaim{margin:0 0 18px;padding:11px 13px;background:#fff;border:1px solid var(--line-2);
  border-radius:10px;font-size:12.5px;line-height:1.62;color:var(--ink-3);max-width:72ch}
.rtnote{margin:11px 0 0;padding-top:9px;border-top:1px dashed var(--line);
  font-size:11.5px;line-height:1.6;color:var(--ink-4)}

/* ==========================================================================
   THE SAME CONVERSATION, RUN TWICE
   The shared opening line is lifted above both columns, because the contract
   guarantees it is identical and the whole comparison rests on that. The turn
   at which the two versions stop agreeing is marked in both.
   ========================================================================== */
.cvset{background:var(--panel-2);border-left:2px solid var(--champagne);border-radius:0 10px 10px 0;
  padding:13px 15px;margin-bottom:18px}
.cvset p{margin:0;font-family:var(--serif);font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.cvshared{border:1px dashed #DCCFA6;background:var(--gold-soft);border-radius:12px;padding:15px}
.cvsharedk,.cvsharednote{text-align:center}
.cvsharedk{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--gold-deep);margin-bottom:10px}
.cvsharednote{margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--gold-deep)}
.cvshared .cvt{align-items:center;margin:0}
.cvshared .cvbub{max-width:54ch;background:#fff}

.cvt{list-style:none;margin:0 0 12px;display:flex;flex-direction:column;gap:5px}
.cvt.cl{align-items:flex-start}
.cvt.pr{align-items:flex-end}
.cvwho{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink-4)}
.cvbub{max-width:94%;border:1px solid var(--line);border-radius:13px;padding:11px 13px}
.cvbub .say{font-size:15px;line-height:1.5}
.cvt.cl .cvbub{background:#fff;border-bottom-left-radius:4px}
.cvt.pr .cvbub{background:var(--espresso);border-color:var(--espresso);border-bottom-right-radius:4px}
.cvt.pr .cvwho{color:var(--champagne)}
.cvt.pr .cvbub .say{color:#F0EAE2}
.cvt.pr .cvbub .aside{color:#B3A899}

.cvcols{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
@media(min-width:880px){.cvcols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cvcol{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:16px 14px}
.cvcol.was{border-top:2px solid #C08D90}
.cvcol.is{border-top:2px solid var(--gold)}
.cvch{margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--line-2)}
.cvtag{display:block;font-family:var(--serif);font-size:17.5px;line-height:1.2;color:var(--ink)}
.cvcol.is .cvtag{color:var(--gold-deep)}
.cvch p{margin:5px 0 0;font-size:12px;line-height:1.55;color:var(--ink-3)}
.cvturns{list-style:none;margin:0;padding:0}
.cvsplit{list-style:none;position:relative;margin:2px 0 13px;text-align:center}
.cvsplit:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.cvsplit span{position:relative;display:inline-block;background:var(--panel-2);padding:0 9px;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--champagne)}
.cvcol.was .cvsplit span{color:var(--rose)}
.cvt.diverge .cvbub{box-shadow:0 0 0 2px #E0CFA4,0 14px 30px -24px rgba(36,30,25,.7)}
.cvcol.was .cvt.diverge .cvbub{box-shadow:0 0 0 2px #E0BFC0,0 14px 30px -24px rgba(36,30,25,.7)}

.cvchanged{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.cvchanged p{margin:0;font-family:var(--serif);font-size:16.5px;line-height:1.7;color:var(--ink-2);max-width:68ch}
@media(min-width:820px){.cvchanged p{font-size:18px}}
.cvcost{display:flex;gap:14px;align-items:flex-start;margin-top:16px;border-radius:14px;padding:20px 18px;
  background:linear-gradient(150deg,var(--espresso),var(--espresso-3))}
@media(min-width:820px){.cvcost{padding:26px 28px;gap:20px}}
.cvcostmark{flex:0 0 auto;line-height:0;opacity:.8}
.cvcostk{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:9px}
.cvcost p{margin:0;font-family:var(--serif);font-size:18px;line-height:1.6;color:#EFEAE3;max-width:58ch}
@media(min-width:820px){.cvcost p{font-size:21px}}

/* ==========================================================================
   THE END OF A LESSON IS NOT THE END OF THE ARC
   Stages seven, eight and nine, named at the point she would otherwise think
   she had finished: the assignment, the write-up, and her manager reading it.
   ========================================================================== */
.cont{margin:18px 0 20px;padding-top:18px;border-top:1px solid #E1D3B4}
.contk{font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--gold-deep);margin-bottom:8px}
.cont h2{font-family:var(--serif);font-weight:400;font-size:20px;margin:0 0 7px}
.contlead{margin:0 0 16px;font-size:13.5px;line-height:1.65;color:var(--ink-2);max-width:68ch}
.contst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media(min-width:900px){.contst{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}}
.contstep{display:flex;align-self:stretch;gap:12px;background:rgba(255,255,255,.74);
  border:1px solid #E7DBBE;border-radius:12px;padding:14px}
.contn{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--gold);
  color:var(--gold-deep);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:13px}
.contbody{min-width:0}
.contbody h3{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin:4px 0 8px}
.contbody p{margin:0 0 7px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.contbody p:last-child{margin-bottom:0}
.contbody .assignline{font-size:15.5px;line-height:1.45;margin-bottom:7px}
.contwhen{font-size:11.5px;line-height:1.5;color:var(--gold-deep);font-weight:600}
.contq{font-size:12.5px;line-height:1.55;font-style:italic;color:var(--ink-3)}
.contacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* the same last stages, restated where a lesson is marked complete */
.cmpon{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line-2);display:grid;gap:11px}
.cmpon li{display:flex;gap:11px;align-items:flex-start}
.cmpon li>span{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--gold);
  color:var(--gold-deep);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:12px}
.cmpon b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:3px;font-weight:700}
.cmpon li>div{font-size:12.5px;line-height:1.6;color:var(--ink-2)}

/* ==========================================================================
   THE NINE-STAGE ARC
   Six stages on the screen, three in the clinic, and a visible break between
   them: the point at which her work leaves the product. A stage nobody has
   reached says "not yet" and carries no number, because an invented zero
   reads as a score and none of this is a score.
   ========================================================================== */
.arcx{margin:0 0 26px}
.arcxband{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 14px}
@media(min-width:820px){.arcxband{padding:22px 24px}}
.arcxband.b-clinic{background:linear-gradient(160deg,#FBF4E6,#FBF7EF 62%);border-color:#E7DBBE}
.arcxbh{margin-bottom:14px}
.arcxbk{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--champagne)}
.arcxband.b-clinic .arcxbk{color:var(--gold-deep)}
.arcxbh p{margin:5px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:72ch}
.arcxset{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:620px){.arcxset{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.arcxset{grid-template-columns:repeat(3,minmax(0,1fr))}}
.arcxst{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px}
.arcxband.b-clinic .arcxst{background:#fff}
.arcxst.ahead{opacity:.72}
.arcxst.done{background:#fff;border-color:#E3D3AE}
.arcxst.now{background:linear-gradient(160deg,var(--espresso-2),var(--espresso));border-color:var(--espresso)}
.arcxtop{display:flex;align-items:baseline;gap:9px;margin-bottom:7px}
.arcxn{font-family:var(--serif);font-size:13px;color:var(--champagne)}
.arcxst.now .arcxn{color:var(--gold)}
.arcxstate{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink-4)}
.arcxst.done .arcxstate{color:var(--champagne)}
.arcxst.now .arcxstate{color:var(--gold)}
.arcxst h4{font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.22;letter-spacing:0;
  text-transform:none;color:var(--ink);margin:0 0 6px}
.arcxst.now h4{color:#fff}
.arcxnum{font-family:var(--serif);font-size:24px;line-height:1.05;color:var(--ink);margin-bottom:5px}
.arcxst.now .arcxnum{color:#EFEAE3}
.arcxnum .arcof{font-family:var(--sans);font-size:11.5px;letter-spacing:.02em;color:var(--ink-3)}
.arcxst.now .arcxnum .arcof{color:#BCB2A5}
.arcxst p{margin:0;font-size:12.5px;line-height:1.58;color:var(--ink-2)}
.arcxst.now p{color:#CFC6BA}
.arcxdetail{margin-top:9px;padding-top:8px;border-top:1px solid var(--line-2);
  font-size:11px;line-height:1.5;color:var(--ink-3)}
.arcxst.now .arcxdetail{color:#BCB2A5;border-top-color:rgba(239,234,227,.17)}
.arcxleave{display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 0}
.arcxleave i{display:block;width:2px;height:8px;border-radius:2px;background:var(--gold);opacity:.75}
.arcxleave i:nth-child(2){opacity:.55}
.arcxleave i:nth-child(3){opacity:.35}
.arcxhonest{margin:14px 0 0;font-size:11.5px;line-height:1.62;color:var(--ink-4);max-width:74ch}

/* ==========================================================================
   390px — the rail compresses to dots and names only where she is standing.
   ========================================================================== */
@media(max-width:719px){
  .trx,.cv{padding:20px 15px;border-radius:12px}
  .trx>h2,.cv>h2{font-size:19px}
  .trxc{padding:16px 14px}
  .trxname{font-size:17.5px}
  .trxwhy{font-size:14.5px}
  .trxl .say,.cvbub .say{font-size:14.5px}
  .cvcol{padding:14px 12px}
  .cvbub{max-width:100%}
  .cvshared{padding:13px 12px}
  .cvchanged p{font-size:15.5px}
  .cvcost{flex-direction:column;gap:10px;padding:18px 15px}
  .cvcost p{font-size:17px}
  .cont h2{font-size:18px}
  .contstep{padding:13px 12px}
  .contacts button{width:100%}
  .arcxband{padding:15px 13px;border-radius:12px}
  .arcxst h4{font-size:15px}
  .jrail{top:96px;padding:9px 12px;border-radius:16px}
  .jst .jlab,.jst .jmaybe{display:none}
  .jst.is-now .jlab{display:inline;font-size:9.5px}
  .jst+.jst:before{margin:0 6px;min-width:6px}
  .jst.is-now{flex:0 0 auto}
  .jrail.looped .jloop{font-size:11px;margin-top:9px}
  .dwhy{padding:22px 17px}
  .dwhy h2{font-size:21px}
  .dwhy p{font-size:16px;line-height:1.7}
  .dthink{padding:20px 17px 18px;gap:11px}
  .dthink blockquote{font-size:18px}
  .dtmark svg{width:28px;height:20px}
  .dladder{padding:20px 16px}
  .dladder h2{font-size:19px}
  .dlrungs{gap:6px}
  .dlrung{padding:10px 9px 11px;border-radius:9px}
  .dlrung .dlname{font-size:14px}
  .dlrung .dllock{font-size:9px}
  .dlstage{padding:16px 14px}
  .dlsays q{font-size:17.5px}
  .lcout p{font-size:13px}
  .outpromise{padding:18px 16px}
  .outpromise p{font-size:17.5px}
  .modout p{font-size:13.5px}
  .cnform{padding:16px 14px}
  .cneff{padding:16px 14px}
  .cnhead{font-size:16.5px}
  .cnbax{flex:1 1 100%}
  .cnjump{width:100%}
  .cnacts button{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .jst.pulse .jdot,.dlgate.nudge{animation:none!important}
  .dlrung,.cneff,.dlstage{transition:none!important}
}

/* ==========================================================================
   MOVEMENT
   Everything below is the same rule twice: a change the practitioner caused
   should be seen to happen, and nothing else should move at all. No bounce,
   no overshoot, no colour that is not already in the palette. Every one of
   these is switched off entirely under prefers-reduced-motion, where the
   change is still legible because the drawing, not the motion, carries it.
   ========================================================================== */

/* ---------- the client, changing state -----------------------------------
   Her portrait is redrawn in both postures and the old one is retired under
   the new one. It is the moment she learns something cost her, so it is a
   cross-fade and not a flicker. */
.portrait .pvwas{animation:pvwas .5s cubic-bezier(.4,0,.2,1) both}
.portrait .pvnow{animation:pvnow .58s cubic-bezier(.4,0,.2,1) both;transform-box:fill-box;transform-origin:50% 62%}
@keyframes pvwas{from{opacity:1}60%{opacity:0}to{opacity:0}}
@keyframes pvnow{from{opacity:0;transform:scale(1.012)}45%{opacity:.55}to{opacity:1;transform:none}}

/* ---------- the trust ledger, moving -------------------------------------
   Seven stages on one rail. The stage that moved lights its new ground cell
   by cell from where she stood, draws the distance underneath, and names it.
   The six that did not move stay completely still. */
.tlrow.up,.tlrow.down{animation:tltint .55s .12s both}
@keyframes tltint{from{background:transparent}}
.tladder.moved .tlrow.flat{opacity:.7;transition:opacity .4s .5s}
.tlc{animation:tlcell .42s both;animation-delay:calc(.14s + var(--i,0) * .085s)}
.tlc.gain{transform-box:fill-box;transform-origin:50% 100%}
@keyframes tlcell{from{fill:#EFEAE2}}
.tlc.loss{animation-name:tlcellout}
@keyframes tlcellout{from{fill:var(--was,#B88C8F)}}
.tlmv{animation:tldraw .5s .18s both}
@keyframes tldraw{to{stroke-dashoffset:0}}
.tlhead{animation:tlhead .3s .62s both}
@keyframes tlhead{from{opacity:0}to{opacity:1}}
.tlrow.up .tlmv,.tlrow.up .tlhead{stroke:var(--sage);fill:var(--sage)}
.tlrow.down .tlmv,.tlrow.down .tlhead{stroke:var(--rose);fill:var(--rose)}
.tlrow.flat .tlmv,.tlrow.flat .tlhead{display:none}
.tlrow .tld{animation:tlchip .38s .5s both}
@keyframes tlchip{from{opacity:0;transform:translateX(-3px)}}
.tlrow.flat .tld{animation:none}

/* ---------- the willingness line, drawing itself ------------------------- */
.tcline{animation:tldraw .9s .1s both}
.tcarea{animation:tlhead .7s .5s both}
.tcpt{animation:tcpt .3s both;animation-delay:calc(.2s + var(--i,0) * .09s)}
@keyframes tcpt{from{opacity:0;r:1.5}}
.tcnow{animation:tcnow .5s .9s both}
@keyframes tcnow{from{opacity:0;r:14}to{opacity:1}}

/* ---------- before / after ---------------------------------------------- */
.cqp-shaft{animation:tldraw .5s .18s both}
.cqp-tip{animation:tlhead .3s .6s both}
.cqp.fell .cqp-shaft,.cqp.fell .cqp-tip{stroke:var(--rose)}
.cqp.rose .cqp-shaft,.cqp.rose .cqp-tip{stroke:var(--sage)}

/* ---------- a rail that fills rather than appearing filled --------------- */
.mtrkbar i{animation:mtfill .7s cubic-bezier(.3,.7,.3,1) both}
@keyframes mtfill{from{width:var(--from,0)}}
.ometbar i{animation:omfill .8s cubic-bezier(.3,.7,.3,1) both}
@keyframes omfill{from{width:0}}
.bar i{animation:omfill .7s cubic-bezier(.3,.7,.3,1) both}
.progressline i{animation:omfill .8s .1s cubic-bezier(.3,.7,.3,1) both}

/* ---------- settling in --------------------------------------------------
   Cards arrive rather than appear. Two hundred milliseconds and four pixels:
   enough to read as arrival, not enough to notice as an effect. */
@keyframes settle{from{opacity:0;transform:translateY(5px)}}
.modgrid>.mod{animation:settle .42s both;animation-delay:calc(var(--n,0) * .045s)}
.modgrid>.mod:nth-child(1){--n:0}.modgrid>.mod:nth-child(2){--n:1}
.modgrid>.mod:nth-child(3){--n:2}.modgrid>.mod:nth-child(4){--n:3}
.modgrid>.mod:nth-child(5){--n:4}.modgrid>.mod:nth-child(6){--n:5}
.modgrid>.mod:nth-child(7){--n:6}.modgrid>.mod:nth-child(8){--n:7}
.modgrid>.mod:nth-child(9){--n:8}.modgrid>.mod:nth-child(n+10){--n:9}
.hero{animation:settle .5s both}
.opts>.opt{animation:settle .36s both;animation-delay:calc(.06s + var(--n,0) * .05s)}
.opts>.opt:nth-child(1){--n:0}.opts>.opt:nth-child(2){--n:1}
.opts>.opt:nth-child(3){--n:2}.opts>.opt:nth-child(4){--n:3}
.opts>.opt:nth-child(n+5){--n:4}

/* ---------- a chosen option acknowledging the hand that chose it --------- */
.opt{transition:border-color .16s,background .16s,box-shadow .22s,transform .12s}
.opt:not(.locked):active{transform:scale(.994)}
.opt.sel,.opt.correct,.opt.wrong{animation:optpick .42s both}
@keyframes optpick{from{box-shadow:0 0 0 0 var(--gold-soft)}}
.opt .why{animation:settle .4s .1s both}

@media(prefers-reduced-motion:reduce){
  .portrait .pvwas{display:none}
  .portrait .pvnow,.tlrow.up,.tlrow.down,.tlc,.tlhead,.tlrow .tld,.tcarea,.tcpt,.tcnow,
  .cqp-tip,.mtrkbar i,.ometbar i,.bar i,.progressline i,
  .modgrid>.mod,.hero,.opts>.opt,.opt.sel,.opt.correct,.opt.wrong,.opt .why{animation:none!important}
  .tladder.moved .tlrow.flat{transition:none}
  .tlmv,.tcline,.cqp-shaft{animation:none!important;stroke-dashoffset:0}
  .opt:not(.locked):active{transform:none}
}

/* the progress ring draws its arc rather than arriving already drawn */
.ringarc{animation:ringdraw .8s .1s cubic-bezier(.3,.7,.3,1) both}
@keyframes ringdraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.ringarc{animation:none!important;stroke-dashoffset:0}}

/* the numbered beats of a consultation arrive in the order they are read */
.cstep{animation:settle .42s both;animation-delay:calc(var(--n,0) * .06s)}
.cstep:nth-of-type(1){--n:0}.cstep:nth-of-type(2){--n:1}.cstep:nth-of-type(3){--n:2}
.cstep:nth-of-type(4){--n:3}.cstep:nth-of-type(5){--n:4}.cstep:nth-of-type(n+6){--n:5}
.block{animation:settle .4s both}
@media(prefers-reduced-motion:reduce){.cstep,.block{animation:none!important}}

/* ==========================================================================
   THE SCREENS THAT ARE EMPTY, LOADING, OR BROKEN
   Three states every surface eventually shows and none of them had a design.
   A blank shelf in a clinic is still a shelf: it says what it holds and how
   it fills, in the same porcelain-and-champagne language as a full one.
   ========================================================================== */
.blank{position:relative;display:flex;gap:18px;align-items:flex-start;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px 22px;margin-bottom:16px;overflow:hidden}
.blank::before{content:"";position:absolute;left:0;top:0;height:2px;width:72px;
  background:linear-gradient(90deg,var(--gold),rgba(201,164,92,0))}
.blank .bkmark{flex:0 0 auto;width:54px;height:54px;border-radius:12px;
  background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.blank .bktext{min-width:0;flex:1 1 auto}
.blank .bkk{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--champagne);margin-bottom:6px}
.blank h3{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.28;
  color:var(--ink);margin:0 0 7px}
.blank p{font-size:13.5px;line-height:1.62;color:var(--ink-2);margin:0;max-width:64ch}
.blank p+p{margin-top:7px}
.blank .bkacts{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.blank .bkacts button{padding:9px 16px;font-size:12.5px}
@media(max-width:560px){
  .blank{padding:20px 17px 18px;gap:14px}
  .blank .bkmark{width:44px;height:44px;border-radius:10px}
  .blank h3{font-size:17px}
}
/* Inside a two-column card the blank is the whole column, so it drops its own
   frame and lets the card it sits in be the frame. */
.card>.blank:only-child,.card>.blank:last-child:first-child{
  background:transparent;border:0;padding:2px 0 0;margin:0}
.card>.blank:only-child::before{display:none}

/* Waiting. Not a spinner alone on a white field: the shape of the screen that
   is coming, so the page does not jump when it arrives. */
.loadpane{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 22px 26px;margin-bottom:16px}
.loadpane .lphead{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.loadpane .lpword{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3)}
.skel{height:12px;border-radius:999px;margin-bottom:11px;
  background:linear-gradient(90deg,var(--line-2) 0%,#F6F1E8 38%,var(--line-2) 72%);
  background-size:280% 100%;animation:skelpan 1.5s linear infinite}
.skel.w1{width:38%;height:20px;margin-bottom:16px}
.skel.w2{width:92%}
.skel.w3{width:76%}
.skel.w4{width:58%;margin-bottom:0}
@keyframes skelpan{from{background-position:120% 0}to{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){
  .skel{animation:none;background:var(--line-2)}
  .spinner{animation-duration:2.4s}
}

/* Something failed. What happened, and the one button that fixes it. */
.failpane{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--rose);
  border-radius:var(--r);padding:22px 24px;margin-bottom:16px}
.failpane .fpk{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--rose);margin-bottom:7px}
.failpane h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:0 0 7px}
.failpane p{font-size:13.5px;line-height:1.62;color:var(--ink-2);margin:0 0 15px;max-width:60ch}

/* ==========================================================================
   THE MODULE PAGE — its lesson list was the only index in the product with
   no right-hand margin and no sign of what had been finished.
   ========================================================================== */
.orderitem.lessonrow{align-items:center;transition:border-color .15s,background .15s}
.orderitem.lessonrow:hover{border-color:var(--ink-4);background:var(--panel-2)}
.orderitem.lessonrow .txt b{font-size:14px}
.orderitem.lessonrow.done .ord{background:var(--sage-soft);color:var(--sage)}
.orderitem.lessonrow .lmin{flex:0 0 auto;font-size:12px;color:var(--ink-3);
  white-space:nowrap;text-align:right;min-width:52px}
.orderitem.lessonrow .lgo{flex:0 0 auto;color:var(--ink-4);font-size:15px;line-height:1;
  margin-left:2px;transition:transform .15s,color .15s}
.orderitem.lessonrow:hover .lgo{color:var(--champagne);transform:translateX(2px)}
.orderitem.lessonrow.locked .lgo{visibility:hidden}
@media(prefers-reduced-motion:reduce){.orderitem.lessonrow:hover .lgo{transform:none}}
@media(max-width:560px){
  /* The row stays one row on a phone: a lesson number stranded on a line of
     its own above its own title is worse than a narrower title. */
  .orderitem.lessonrow{gap:10px;align-items:flex-start}
  .orderitem.lessonrow .ord,.orderitem.lessonrow .lmin{margin-top:1px}
  .orderitem.lessonrow .lmin{min-width:44px;font-size:11.5px}
  .orderitem.lessonrow .lgo{display:none}
}

/* A short card beside a long one was being stretched to match it, which left
   a hand's width of empty paper under "Payment" and under a consultations
   list holding one line. Each card is now the height of what is in it. */
.cols.two>.card,.cols.two>section.card{align-self:start}

/* A row that opens a whole consultation should look like it opens something.
   `cursor:pointer` alone is not a promise anybody can see. */
table.people tr[data-ev]{transition:background .14s}
table.people tr[data-ev]:hover td{background:var(--panel-2)}
table.people tr[data-ev]:hover td:first-child{box-shadow:inset 2px 0 0 var(--champagne)}
table.people tr[data-ev]:focus-visible{outline:2px solid var(--gold-soft)}

/* ==========================================================================
   THE TOOLKIT WORKSPACE — the one place inside a consultation where she
   writes. It is the document that is kept afterwards, so it is laid out as a
   document: numbered entries down a ruled margin, criteria in a grid, and a
   footer that says what submitting settles.
   ========================================================================== */
.tkwork .tkintro{margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.tkwork .tkintro p{font-size:13.5px;line-height:1.62;color:var(--ink-2);margin:0;max-width:74ch}
.tkentry{display:flex;gap:14px;align-items:flex-start;padding:0 0 15px}
.tkentry .tkno{flex:0 0 auto;width:26px;padding-top:2px;font-family:var(--serif);
  font-size:13px;color:var(--gold-deep);letter-spacing:.04em;text-align:right;opacity:.75}
.tkentry .tkfield{flex:1 1 auto;min-width:0;border-left:1px solid var(--line-2);padding-left:15px}
.tkentry label{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.tkentry textarea{min-height:56px}
.tkwork .tkcrit{margin:4px 0 20px;padding:16px 16px 14px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:12px}
.tkwork .tkcrit h4{margin-bottom:11px}
.checklist.crit{gap:8px}
@media(min-width:760px){.checklist.crit{grid-template-columns:1fr 1fr}}
.tkfoot{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  margin-top:6px;padding-top:16px;border-top:1px solid var(--line-2)}
.tkfnote{font-size:12.5px;color:var(--ink-3);flex:1 1 220px;min-width:0}
.tkissues{margin-top:14px;background:var(--rose-soft);border-radius:12px;padding:14px 16px}
.tkissues h4{color:var(--rose);margin-bottom:8px}
.tkissues div{font-size:13.5px;line-height:1.6;color:var(--rose);padding-left:14px;position:relative}
.tkissues div+div{margin-top:6px}
.tkissues div::before{content:"·";position:absolute;left:3px;font-weight:700}
@media(max-width:560px){
  .tkentry{gap:10px}
  .tkentry .tkno{width:20px;font-size:12px}
  .tkentry .tkfield{padding-left:11px}
  .tkfoot button{width:100%}
}

/* The follow-up plan: three intervals, each one a row of the plan rather than
   a nested card, so the shape of the sequence is visible before it is filled. */
.fuplan{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin-bottom:18px}
.furow{background:#fff;padding:15px 16px 16px}
.fuwhen{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:11px;
  padding-bottom:9px;border-bottom:1px solid var(--line-2)}
.fuwhen b{font-family:var(--serif);font-weight:400;font-size:17px;color:var(--ink)}
.fuwhen span{font-size:12.5px;color:var(--ink-3);flex:1 1 200px;min-width:0}
.fufields{gap:12px}
.fufields label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3)}
.tklater{font-size:13.5px;line-height:1.62;color:var(--ink-2);margin:0;max-width:66ch;
  padding-left:14px;border-left:2px solid var(--gold)}

/* ==========================================================================
   THE ROOM
   What she is doing, when there is no ledger on screen. Everything here is a
   sentence about a person, so it is set like speech and not like data: no
   chips, no bars, no colour that means good or bad.

   THE ACCESSIBILITY RULE THIS SECTION EXISTS TO OBEY. Pacing may change;
   information may never disappear. Every line below is at full opacity in the
   stylesheet, and the entrance is a TRANSITION applied by adding .breathe
   after first paint — not an animation running from opacity:0. A rule that
   forgot a class here would cost a little movement; it could not leave a
   practitioner reading a consultation with one of the things the client is
   doing simply absent, which is the failure §21 names.
   ========================================================================== */
.room{padding:20px 22px 18px}
.room .rmgrp+.rmgrp{margin-top:16px}
.room .rmk{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--ink-4);margin-bottom:7px}
.room .rmline{font-family:var(--serif);font-size:15.5px;line-height:1.62;color:var(--ink);
  margin:0 0 6px;opacity:1}
.room .rmline:last-child{margin-bottom:0}
.room .rmgrp.arriving .rmline{color:var(--ink-2);font-style:italic}

/* THE REST. It appears only where the authored state warrants one — the server
   decides, from what she is doing, and sends `beat`. It is a rendered element,
   present from the first frame, and never a setTimeout: a silence produced by
   a timer is a loading state wearing a costume. */
.room .rmrest{display:flex;align-items:center;gap:7px;margin:15px 0;padding-left:1px}
.room .rmrest .rmdot{width:4px;height:4px;border-radius:50%;background:var(--ink-4);opacity:.55}
.room .rmrest .rmrestsay{font-size:12px;color:var(--ink-3);margin-left:6px;letter-spacing:.01em}
.room .rmrest[data-beat="closing"] .rmdot{background:var(--champagne)}

/* The entrance. Off by default; switched on by script after the first paint,
   and never switched on when the practitioner has asked for no motion. */
.room .rmgrp,.room .rmrest{transition:opacity .42s cubic-bezier(.4,0,.2,1),
  transform .42s cubic-bezier(.4,0,.2,1)}
.room.breathe .rmgrp,.room.breathe .rmrest{opacity:0;transform:translateY(4px)}
.room.breathe.settled .rmgrp,.room.breathe.settled .rmrest{opacity:1;transform:none}
.room.breathe .rmgrp:nth-of-type(2){transition-delay:.10s}
.room.breathe .rmgrp:nth-of-type(3){transition-delay:.20s}
.room.breathe .rmrest{transition-delay:.15s}
@media(prefers-reduced-motion:reduce){
  .room .rmgrp,.room .rmrest{transition:none!important;opacity:1!important;transform:none!important}
}
@media(max-width:560px){
  .room{padding:17px 16px 15px}
  .room .rmline{font-size:14.5px}
}

/* ==========================================================================
   NOAM, ENTERING
   One moment, one thing to say, after she has written what she noticed. Set
   apart from the cards around it because he is a person arriving and not
   another panel of findings. The face slot is reserved and empty: a real
   recording occupies it later by id, and nothing about when he speaks lives
   here.
   ========================================================================== */
.noam{border-left:2px solid var(--gold);background:var(--panel-2);padding:20px 22px 18px}
.noam .nmenter{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.noam .nmface{width:46px;height:46px;margin:0;border-radius:50%;flex:0 0 auto;
  background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.noam .nminitial{font-family:var(--serif);font-size:19px;color:var(--gold-deep)}
.noam .nmk{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink-4)}
.noam .nmname{font-family:var(--serif);font-size:16px;color:var(--ink)}
.noam .nmtitle{font-family:var(--serif);font-weight:400;font-size:18px;margin:0 0 8px;color:var(--ink)}
.noam .nmbody{font-size:14.5px;line-height:1.66;color:var(--ink-2);margin:0;max-width:66ch}
.noam .nmev{font-size:12.5px;color:var(--ink-3);margin:10px 0 0}

/* ---------- the replay, and the question that comes first ---------------- */
.refblock{margin:0 0 20px}
.refh{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 6px;color:var(--ink)}
.refsub{max-width:66ch;margin:0 0 16px}
.refstep .refmoment{border-left:2px solid var(--line);padding-left:14px;margin-bottom:14px}
.refstep .refk{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--ink-4);margin-bottom:6px}
.refstep .rmline{font-family:var(--serif);font-size:15px;line-height:1.6;color:var(--ink);margin:0 0 5px}
.refstep .refchose{font-size:14px;color:var(--ink-2);margin:0}
.refstep .refask{font-family:var(--serif);font-size:17.5px;line-height:1.5;color:var(--ink);margin:0 0 12px}
.refstep .refwait{font-size:12px;margin:8px 0 0}
.refstep .refsaid blockquote{font-family:var(--serif);font-size:15.5px;line-height:1.6;
  color:var(--ink);border-left:2px solid var(--gold);padding-left:13px;margin:0}
.refstep .refsaw{margin-top:14px}
.refstep .refcoach{margin-top:14px}
.refstep.answered{border-color:var(--line)}
.nextroom .reflead,.card .reflead{font-family:var(--serif);font-size:16.5px;line-height:1.6;
  color:var(--ink);margin:0;max-width:66ch}
.nextroom .refwhy{font-size:14px;color:var(--ink-2);margin:0;max-width:66ch}
.refstep .rmline.was{color:var(--ink-3)}
.refstep .rmline.now{color:var(--ink);position:relative;padding-left:14px}
.refstep .rmline.now:before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--gold)}

/* ---------- Monday: where each of them is --------------------------------
   Five lines, deliberately not five tiles. A column of the same number down
   the page is a ranking however it is labelled, so there is no column: each
   row is one person's own record, in a sentence. */
.md .mdstand .mdrow{display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--line-2)}
.md .mdstand .mdrow:first-of-type{border-top:0}
.md .mdwho{flex:0 0 auto;min-width:9.5em;font-weight:600;font-size:13.5px;color:var(--ink)}
.md .mdsay{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.md .mdabout{display:block;font-family:var(--serif);font-size:14px;color:var(--ink);margin-top:3px}
.md .mdtodo{display:block;font-size:12.5px;color:var(--ink-3);margin-top:4px}
/* The one state worth a mark: she showed it in a second woman. Nothing else
   is marked, so the mark cannot be read as a position in a list. */
.md .mdrow.mds-transferring .mdwho:after{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--sage);margin-left:7px;vertical-align:middle}
.md .mdcoached .mdans{font-family:var(--serif);font-size:15.5px;line-height:1.6;
  color:var(--ink);margin:0;max-width:66ch}
@media(max-width:560px){
  .md .mdstand .mdrow{flex-direction:column;gap:3px}
  .md .mdwho{min-width:0}
}

/* ==========================================================================
   THE FIGURE
   A photograph when production has delivered one, a drawing when it has not,
   and never a gap between the two. The drawing is underneath from the first
   frame: a photograph that pops in over an empty box moves the first thing a
   practitioner looks at, half a second after she started looking at it.
   ========================================================================== */
/* THE FRAME HOLDS ITS ASPECT WHETHER OR NOT AN ASSET HAS ARRIVED.
   It did not: an empty slot was a 60px square and a delivered one a 4/5
   portrait, so the whole header would have shifted on the day the photography
   landed — and shifted back for any woman still unshot. Both states are the
   same box now, and the drawing simply sits inside it. */
/* THE FRAME IS THREE TO TWO, BECAUSE THAT IS THE SHAPE THE PICTURES ARE.
   It was four to five, specified for photography that did not exist. The
   imagery that arrived is landscape, and forcing it upright threw away two
   thirds of the width and lost the final frame of every consultation
   altogether. The frame now matches the source, and the drawn plate — still
   four to three, still what a learner sees in any state no photograph covers
   — sits inside it at full height, visibly narrower than the frame it is
   standing in. That contrast is the point: a photograph fills the frame, and
   a thing that is not a photograph plainly does not. */
/* WHY 136 AND NOT MORE.
   The narrowest frame delivered is 112px wide — the last frame of a
   consultation, where the source sheet simply ran out of canvas. Every frame
   is rendered at the same width, because a frame that sized itself to its own
   file would tell a learner which state she was looking at from the layout,
   which is the same leak as a state word in the URL. So the narrowest file
   sets the ceiling for all of them: 136 is 1.2x of 112, which reads soft at
   worst, and is a downscale for every other frame in the set. Raising this
   number without raising that 112 is how the photography starts to look
   stretched. */
.figure{position:relative;flex:0 0 auto;width:112px;aspect-ratio:var(--ratio,3/2);
  border-radius:10px;overflow:hidden;background:var(--panel-2)}
.figure .fgdrawn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.figure .fgdrawn svg{max-height:100%;max-width:100%;width:auto;height:auto}
.figure.has-photo .fgdrawn{transform:scale(1.04)}
.figure .fgphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 28%;opacity:0}
/* Shown only once the bitmap has decoded — see showPhotos(). */
.figure.photo-ready .fgphoto{opacity:1}
.figure.photo-fade .fgphoto{transition:opacity .36s cubic-bezier(.4,0,.2,1)}
.figure.photo-fade.photo-ready .fgdrawn{opacity:0;transition:opacity .36s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){
  .figure .fgphoto,.figure .fgdrawn{transition:none!important}
  .figure.photo-ready .fgphoto{opacity:1!important}
}
/* Responsive framing: bigger where there is room to look at her, and the same
   aspect ratio everywhere so the crop a photographer delivered is the crop. */
/* The same widths whether or not the frame is filled, so nothing moves. */
@media(min-width:900px){ .figure{width:132px} }
@media(max-width:560px){ .figure{width:104px;border-radius:8px} }

/* ==========================================================================
   THE ONE PLACE TO WORK
   The practitioner's home. One action, at the top, with the woman's face on
   it — not a product explaining itself above two competing buttons.
   ========================================================================== */
.jhero.slim{padding:30px 34px}
.jhero.slim h1{margin-bottom:4px}
.jhero.slim p{margin:0}

.nowcard{
  display:grid;grid-template-columns:132px 1fr;gap:28px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--champagne);
  border-radius:var(--r-lg);padding:30px 34px;margin:20px 0 26px;box-shadow:var(--shadow);
}
.now-face{display:flex;align-items:center;justify-content:center}
.now-kick{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);font-weight:700}
.nowcard h2{font-family:var(--serif);font-size:30px;line-height:1.15;margin:6px 0 0}
.now-why{color:var(--ink-2);margin:10px 0 0;max-width:56ch}
.now-meta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}
.now-meta span{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  padding:5px 11px;border-radius:999px;background:var(--panel-2);color:var(--ink-3);border:1px solid var(--line-2);
}
.now-meta .now-phase{background:var(--gold-soft);color:var(--gold-deep);border-color:transparent}
.nowcard button.primary.lg{padding:14px 28px;font-size:15px}

.recstrip{
  display:flex;align-items:baseline;gap:34px;flex-wrap:wrap;
  padding:0 34px 22px;border-bottom:1px solid var(--line-2);margin:0 0 28px;
}
.rec-k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;flex:0 0 auto}
.rec-n{display:flex;align-items:baseline;gap:7px}
.rec-n b{font-family:var(--serif);font-size:26px;line-height:1}
.rec-n span{font-size:12.5px;color:var(--ink-3)}

.chiprow{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 30px}
.clientchip{
  display:flex;align-items:center;gap:12px;text-align:left;
  padding:10px 16px 10px 10px;border-radius:999px;background:var(--panel);
}
.clientchip .cc-face{display:flex;flex:0 0 auto}
.clientchip .cc-t{display:flex;flex-direction:column;line-height:1.25}
.clientchip .cc-t b{font-size:14px}
.clientchip .cc-t .muted{font-size:11px}
.clientchip.more{padding:10px 20px;color:var(--gold-deep);font-weight:600}

.methodlink{margin:34px 0 10px;font-size:13px}
.methodlink .muted{font-size:13px}
.backlink{margin:0 0 14px;font-size:13px}

@media (max-width:860px){
  .nowcard{grid-template-columns:1fr;gap:18px;padding:24px;text-align:left}
  .now-face{justify-content:flex-start}
  .nowcard h2{font-size:25px}
  .recstrip{gap:20px;padding:0 4px 18px}
  .jhero.slim{padding:22px 20px}
  .clientchip{flex:1 1 100%}
}

/* --- the waiting room: a person, not a row in a simulation --- */
.cc-brings{margin:4px 0 0;padding-left:18px;color:var(--ink-2);font-size:13.5px}
.cc-brings li{margin:3px 0}
.cc-met{
  margin-top:14px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  padding:6px 12px;border-radius:999px;display:inline-block;
  background:var(--panel-2);color:var(--ink-3);border:1px solid var(--line-2);
}
.cc-met.before{background:var(--gold-soft);color:var(--gold-deep);border-color:transparent}
.cc-met.now{background:var(--sage-soft);color:var(--sage);border-color:transparent}
.casecard .cc-sec p{margin:4px 0 0;color:var(--ink-2)}
.casecard .cc-sec p i{color:var(--ink);font-style:italic}

/* ==========================================================================
   SHE STAYS IN THE ROOM
   The side column used to empty the moment a decision was made. It now holds
   the client for the whole phase, pinned, so the desktop stops being a mobile
   layout with a hole in it.
   ========================================================================== */
@media(min-width:940px){ .grid2{grid-template-columns:1fr 360px} }
.presence{position:sticky;top:96px}
.pr-face{display:flex;justify-content:center;padding:4px 0 10px}
.pr-name{font-family:var(--serif);font-size:20px;text-align:center;line-height:1.2}
.pr-case{
  text-align:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:3px 0 14px;
}
.presence .room{margin:0}

/* --- what she does is the emotional centre of the phase --- */
.cstep.reaction{
  background:linear-gradient(180deg,var(--gold-soft) 0%,var(--panel-2) 100%);
  border:1px solid transparent;border-left:3px solid var(--champagne);
  border-radius:var(--r-lg);padding:22px 26px 24px;margin:22px 0;
}
.cstep.reaction .stepn{background:var(--champagne);color:#fff;border-color:transparent}
.cstep.reaction .stept{color:var(--gold-deep)}
.cstep.reaction .room{background:transparent;border:none;box-shadow:none;padding:0;margin:0}
.cstep.reaction .rmline{font-family:var(--serif);font-size:20px;line-height:1.45;color:var(--ink)}
.cstep.reaction .rmk{color:var(--gold-deep)}
@media(max-width:860px){
  .cstep.reaction{padding:18px 18px 20px}
  .cstep.reaction .rmline{font-size:17px}
}

/* --- what changed in her: observable before → after, no arithmetic --- */
.changed .chg{padding:16px 0;border-top:1px solid var(--line-2)}
.changed .chg:first-of-type{border-top:none;padding-top:4px}
.chg-ph{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne);font-weight:700}
.chg-chose{margin:5px 0 12px;font-size:14px}
.chg-k{
  display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-right:7px;
}
.chg-pair{display:grid;grid-template-columns:1fr 26px 1fr;gap:10px;align-items:start}
.chg-side p{margin:4px 0 0;font-size:14px;color:var(--ink-2);line-height:1.45}
.chg-side.now p{color:var(--ink);font-family:var(--serif);font-size:16px}
.chg-arrow{text-align:center;color:var(--ink-4);padding-top:18px}
.chg-left{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.chg-left p{margin:5px 0 0;font-family:var(--serif);font-size:17px}
.chg-said{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);display:grid;gap:12px}
.chg-said .tag{margin:4px 5px 0 0}
@media(max-width:700px){
  .chg-pair{grid-template-columns:1fr;gap:4px}
  .chg-arrow{text-align:left;padding:4px 0 0}
}

/* --- the manager's one thing: a person's name, and a button that opens on her --- */
.nowcard.mgnow{grid-template-columns:1fr;padding:28px 34px}
.nowcard.mgnow.quiet{border-left-color:var(--line);box-shadow:none;background:var(--panel-2)}
.nowcard.mgnow.quiet .now-kick{color:var(--ink-3)}
@media(max-width:860px){ .nowcard.mgnow{padding:22px 20px} }

/* --- what production still owes: the slots, visible, with their words --- */
.mslots .mslot{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0;border-top:1px solid var(--line-2)}
.mslots .mslot:first-of-type{border-top:none}
.ms-plate{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:92px;border:1px dashed var(--ink-4);border-radius:12px;background:var(--panel-2);
}
.ms-plate .nminitial{font-family:var(--serif);font-size:26px;color:var(--champagne)}
.ms-id{font-size:9.5px;letter-spacing:.06em;color:var(--ink-3);word-break:break-all;text-align:center;padding:0 6px}
.ms-meta{margin-top:6px;font-size:13px;color:var(--ink-2)}
.ms-says{margin:10px 0 0;padding-left:14px;border-left:2px solid var(--gold-soft);font-family:var(--serif);font-size:15px;color:var(--ink-2)}
@media(max-width:700px){ .mslots .mslot{grid-template-columns:1fr} }

/* ==========================================================================
   FOLDED REFERENCE
   A lesson's three reference panels used to sit open above the teaching, so a
   practitioner scrolled nearly six thousand pixels before answering anything.
   Every word is still here, one click from anywhere in the lesson.
   ========================================================================== */
.fold{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  margin:0 0 12px;overflow:hidden;
}
.fold[open]{border-color:var(--ink-4);box-shadow:var(--shadow)}
.foldh{
  display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;
  list-style:none;transition:background .15s;
}
.foldh::-webkit-details-marker{display:none}
.foldh:hover{background:var(--panel-2)}
.foldmark{
  flex:0 0 auto;width:11px;height:11px;border-right:1.5px solid var(--champagne);
  border-bottom:1.5px solid var(--champagne);transform:rotate(-45deg);margin-left:3px;
  transition:transform .18s ease;
}
.fold[open] .foldmark{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){ .foldmark{transition:none} }
.foldt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.foldt b{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.25}
.foldsub{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.foldn{
  flex:0 0 auto;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--gold-deep);background:var(--gold-soft);padding:5px 11px;border-radius:999px;
}
.foldbody{padding:0 20px 18px;border-top:1px solid var(--line-2)}
.foldbody > *:first-child{margin-top:16px}
@media(max-width:640px){
  .foldh{padding:14px 15px;gap:11px}
  .foldt b{font-size:15.5px}
  .foldbody{padding:0 15px 15px}
}

/* --- the two doors beside the sign-in form --- */
.si-doors{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 0;font-size:13.5px}
.si-doors a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid transparent}
.si-doors a:hover{border-bottom-color:var(--gold)}
.si-sep{color:var(--ink-4)}
.fpdone{padding:6px 0 0}
.fpdone p{margin:0 0 10px;font-size:14.5px;line-height:1.6}
.fpdone p.muted{font-size:12.5px}

/* ==========================================================================
   SAY IT IN YOUR OWN WORDS
   A sentence she types, and a reading of what is in it. Deliberately quieter
   than the decision beneath it: this is rehearsal, and the move is the move.
   ========================================================================== */
.sayown .lead{margin:0 0 14px}
.saybox{width:100%;min-height:76px;resize:vertical;font:inherit;font-size:15px;line-height:1.55;
  padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.saybox:focus{outline:none;border-color:var(--ink-3);box-shadow:0 0 0 3px rgba(160,126,60,.14)}
.sayrow{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.saycount{font-size:12.5px;color:var(--ink-3)}
.sayout{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
.sayout.hidden{display:none}
.sayblock{margin-bottom:18px}
.sayblock .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin-bottom:8px}
blockquote.saidit{margin:0;padding:12px 16px;border-left:2px solid var(--line);
  font-style:italic;color:var(--ink-2);background:transparent}
.obslist{list-style:none;margin:0;padding:0}
.obs{position:relative;padding:8px 0 8px 22px;line-height:1.55;border-bottom:1px solid var(--line-2)}
.obs:last-child{border-bottom:0}
.obs .dot{position:absolute;left:2px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.obs.good .dot{background:var(--sage)}
.obs.watch .dot{background:var(--champagne)}
.obs.cost .dot{background:var(--rose)}
.herbit{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.herbit.opens{border-left:3px solid var(--sage)}
.herbit.holds{border-left:3px solid var(--ink-3)}
.herbit.closes{border-left:3px solid var(--rose)}
.herdoes{margin:0;font-size:16px;line-height:1.6}
.onething p{margin:0;font-weight:600}
.sayhonest{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin:18px 0 0;max-width:62ch}
.saynow{margin:12px 0 0;font-weight:600}
.sayerr{color:var(--rose);margin:0}
@media(max-width:560px){
  .saybox{font-size:16px}           /* 16px or iOS zooms the page on focus */
  .sayrow{gap:10px}
  .sayrow .primary{width:100%}
  .herbit{padding:14px}
}

/* ==========================================================================
   SIXTY SECONDS, BETWEEN TWO REAL CLIENTS
   Eleven moments on her own first screen. Quiet in the list, roomy once open:
   the list is something she scans in two seconds, the drill is the whole page.
   ========================================================================== */
.drillsec{margin-top:34px}
.drillgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px;margin-top:4px}
.drillcard{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;
  cursor:pointer;transition:border-color .16s ease,transform .16s ease;font:inherit;color:var(--ink)}
.drillcard:hover{border-color:var(--ink-4);transform:translateY(-1px)}
.drillcard.sug{border-color:var(--champagne);background:var(--gold-soft)}
.dc-flag{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--amber);background:#fff;border-radius:999px;padding:4px 9px}
.dc-said{font-family:var(--serif);font-size:17.5px;line-height:1.3;quotes:none}
.dc-why{color:var(--ink-2);font-size:13.5px;line-height:1.5}
.dc-you{color:var(--amber);font-size:12.5px;line-height:1.5;font-weight:600}
.dc-go{margin-top:4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}

.drillopen{max-width:720px;margin:0 auto;padding:4px 0 40px}
.do-kick{margin-top:18px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3)}
q.do-said{display:block;font-family:var(--serif);font-size:clamp(23px,3.4vw,31px);line-height:1.25;
  margin:10px 0 8px;quotes:none}
.do-why{color:var(--ink-2);margin:0 0 26px;max-width:58ch}
.do-ask{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin-bottom:9px}
.drillopen .sayout{margin-top:26px}
.modelblock{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
blockquote.modelsay{margin:0;font-family:var(--serif);font-size:19px;line-height:1.45;padding:0;border:0}
.modelwhy{margin:0;color:var(--ink-2);line-height:1.6}
.drillfoot{margin-top:30px;font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:62ch}

.notsay{margin-top:28px;border-top:1px solid var(--line);padding-top:22px}
.notsay .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.nsopts{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.nsopt{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:15px 17px;font:inherit;color:var(--ink);cursor:pointer;line-height:1.55}
.nsopt:hover:not([disabled]){border-color:var(--ink-4)}
.nsopt[disabled]{cursor:default;opacity:1}
.nsopt q{quotes:none}
.nsopt.isit{border-color:var(--rose);background:var(--rose-soft)}
.nsopt.mine{box-shadow:0 0 0 2px var(--ink-4) inset}
.nsread{display:block;margin-top:9px;font-size:13px;color:var(--ink-2)}
.nsverdict{margin:14px 0 0;font-weight:700}
.nsverdict.right{color:var(--sage)}
.nsverdict.wrong{color:var(--rose)}

@media(max-width:560px){
  .drillgrid{grid-template-columns:1fr}
  q.do-said{font-size:22px}
  .drillopen{padding-bottom:28px}
}

/* ==========================================================================
   SHE DECIDES BEFORE SHE IS TOLD
   The first block of a lesson is a real moment she answers cold. It is set
   apart so she can see that it is deliberate, and so that being wrong there
   reads as the design rather than as a trap.
   ========================================================================== */
.block.coldopen{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 22px 6px;margin-bottom:26px}
.block.coldopen .stage{color:var(--champagne)}
.coldlead{margin:2px 0 18px;color:var(--ink-2);font-size:14px;line-height:1.6;max-width:62ch}
.coldafter{margin:0 0 14px;font-size:13px;letter-spacing:.02em;color:var(--ink-3);font-style:italic}
@media(max-width:560px){ .block.coldopen{padding:16px 16px 4px} }

/* Whether anything happened between the conversation and the next consultation. */
.cnbax.prac b{color:var(--champagne)}
.cnprac{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:66ch}

/* What she has done, so far: her own behaviour, in order, already seen once. */
.trail{list-style:none;margin:0;padding:0;counter-reset:tr}
.trailrow{padding:14px 0;border-bottom:1px solid var(--line-2)}
.trailrow:last-child{border-bottom:0}
.trailn{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);margin-bottom:6px}
.trailline{margin:0 0 4px;line-height:1.6;font-size:15.5px}
.trailline:last-child{margin-bottom:0}
.trailline.again{color:var(--ink-3);font-style:italic;font-size:14.5px}

/* ==========================================================================
   THE ACADEMY, AS AN ACADEMY
   Where she stands, what to do next, how much is left, and the whole of it.
   Premium education, not an LMS: typographic hierarchy, one accent, and
   restraint everywhere the content is already doing the work.
   ========================================================================== */

/* --- the standing, as a ladder ------------------------------------------- */
.standing{background:linear-gradient(170deg,var(--espresso) 0%,var(--espresso-2) 60%,var(--espresso-3) 100%);
  color:#F3EEE6;border-radius:var(--r-lg);padding:30px 32px 28px;margin:0 0 22px;position:relative;overflow:hidden}
.standing::after{content:"";position:absolute;right:-70px;top:-70px;width:300px;height:300px;
  border-radius:50%;border:1px solid rgba(201,164,92,.16);pointer-events:none}
.st-kick{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.st-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:8px}
.st-name{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,44px);line-height:1.05;margin:0;color:#fff}
.st-n{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#A89C8C}
.rungs{list-style:none;display:flex;align-items:center;gap:0;margin:20px 0 16px;padding:0}
.rung{display:flex;align-items:center;flex:1;position:relative}
.rung::after{content:"";flex:1;height:1px;background:rgba(243,238,230,.18)}
.rung:last-child{flex:0 0 auto}
.rung:last-child::after{display:none}
.rdot{width:11px;height:11px;border-radius:50%;border:1px solid rgba(243,238,230,.4);flex:0 0 11px}
.rung.past .rdot{background:var(--gold);border-color:var(--gold)}
.rung.here .rdot{background:#fff;border-color:#fff;box-shadow:0 0 0 5px rgba(201,164,92,.26)}
.rn{position:absolute;top:18px;left:-1px;font-size:10px;color:#8E8375}
.rung.here .rn{color:var(--gold);font-weight:700}
.st-means{margin:22px 0 0;font-size:16.5px;line-height:1.6;color:#DDD4C7;max-width:56ch}
.st-next{margin-top:22px;padding-top:18px;border-top:1px solid rgba(243,238,230,.14)}
.st-next .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#A89C8C}
.st-next .k b{color:var(--gold);letter-spacing:.14em}
.wants{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.wants li{display:flex;gap:12px;align-items:baseline;font-size:14.5px;color:#DDD4C7}
.wn{font-family:var(--serif);font-size:15px;color:var(--gold);min-width:44px}

/* --- do this next -------------------------------------------------------- */
.donextsec{margin-bottom:30px}
.donextgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.donext{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--champagne);
  border-radius:var(--r);padding:18px;cursor:pointer;font:inherit;color:var(--ink);
  transition:transform .16s ease,border-color .16s ease}
.donext:hover{transform:translateY(-1px);border-color:var(--ink-4);border-left-color:var(--champagne)}
.donext.drill{border-left-color:var(--amber)}
.donext.case{border-left-color:var(--sage)}
.dn-face{display:block;margin-bottom:2px}
.dn-k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.dn-t{font-family:var(--serif);font-size:19px;line-height:1.25}
.dn-t q{quotes:none}
.dn-s{font-size:13px;color:var(--ink-2);line-height:1.5}

/* --- how much is left ---------------------------------------------------- */
.aheadsec{display:flex;gap:28px;align-items:center;flex-wrap:wrap;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 28px;margin-bottom:28px}
.ahead-big{display:flex;flex-direction:column;line-height:1.1}
.ahead-big b{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.4vw,54px);color:var(--ink)}
.ahead-big span{font-size:13.5px;color:var(--ink-2);margin-top:2px}
.ahead-big i{font-size:12px;color:var(--ink-3);font-style:normal;margin-top:4px}
.aheadlist{list-style:none;display:flex;gap:26px;margin:0;padding:0;flex-wrap:wrap}
.aheadlist li{display:flex;flex-direction:column}
.aheadlist b{font-family:var(--serif);font-weight:400;font-size:24px}
.aheadlist span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* --- her record ---------------------------------------------------------- */
.recgrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:16px 10px;margin:4px 0 0;padding:0}
.recgrid li{display:flex;flex-direction:column;padding:12px 0;border-top:1px solid var(--line-2)}
.recgrid b{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1}
.recgrid span{font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.35}

/* --- milestones ---------------------------------------------------------- */
.milesec{margin-bottom:30px}
.milecount{font-family:var(--serif);font-size:17px;color:var(--ink-3);margin-left:auto}
.miles{list-style:none;margin:6px 0 0;padding:0}
.miles li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;line-height:1.55;
  border-bottom:1px solid var(--line-2)}
.miles li:last-child{border-bottom:0}
.miles .mk{width:9px;height:9px;border-radius:50%;flex:0 0 9px;margin-top:7px;border:1px solid var(--ink-4)}
.miles li.done .mk{background:var(--champagne);border-color:var(--champagne)}
.miles li.todo{color:var(--ink-3)}

/* --- the whole programme ------------------------------------------------- */
.progsec{margin-bottom:30px}
.modstrip{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:12px;margin:4px 0 16px;padding:0}
.modchip{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:15px 16px;cursor:pointer;transition:border-color .16s ease}
.modchip:hover{border-color:var(--ink-4)}
.modchip.part{border-color:var(--champagne)}
.modchip.full{border-color:var(--sage);background:var(--sage-soft)}
.mc-n{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.mc-t{font-family:var(--serif);font-size:16px;line-height:1.25;min-height:2.5em}
.mc-bar{display:block;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.mc-bar i{display:block;height:100%;background:var(--champagne)}
.modchip.full .mc-bar i{background:var(--sage)}
.mc-d{font-size:11px;color:var(--ink-3)}

@media(max-width:560px){
  .standing{padding:24px 20px 22px}
  .aheadsec{gap:18px;padding:20px}
  .aheadlist{gap:18px}
  .donextgrid,.modstrip{grid-template-columns:1fr}
  .recgrid{grid-template-columns:repeat(2,1fr)}
}

/* --- an area's own header, so each mode of the Academy announces itself --- */
.areahead{margin:0 0 26px}
.areahead .kicker{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--champagne)}
.areahead h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.2vw,40px);line-height:1.1;margin:8px 0 10px}
.areahead .lead{color:var(--ink-2);max-width:62ch;line-height:1.65;margin:0}
.areastats{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.areastats span{display:flex;flex-direction:column;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.areastats b{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:0;
  text-transform:none;color:var(--ink);line-height:1.1}
.mtrack{margin-bottom:34px}
.casegridlite{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:12px;margin-top:4px}
.mcard{display:flex;gap:14px;align-items:center;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;cursor:pointer;
  font:inherit;color:var(--ink);transition:border-color .16s ease,transform .16s ease}
.mcard:hover{border-color:var(--ink-4);transform:translateY(-1px)}
.mc-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.mc-body b{font-family:var(--serif);font-weight:400;font-size:18px}
.mc-sub{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.mc-go{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--champagne);margin-top:4px}
@media(max-width:560px){ .casegridlite{grid-template-columns:1fr} }
.st-hello{display:flex;flex-direction:column;gap:3px;margin-bottom:22px;padding-bottom:18px;
  border-bottom:1px solid rgba(243,238,230,.14);font-family:var(--serif);font-size:23px;color:#fff}
.st-hello span{font-family:var(--sans);font-size:13px;color:#A89C8C;letter-spacing:.02em}
.recgrid li b{color:var(--ink)}
.recgrid li:has(b:only-child){opacity:1}
.cols.one{display:block}
.cols.one .card{max-width:620px}

/* NUMERALS THAT READ AS NUMERALS.
   Marcellus has no slashed zero and its 0 is a near-perfect circle, so "0/1"
   and a column of zeroes read as letters. Counts use the sans face, which is
   the one place in this product where legibility beats the serif. */
.wn,.recgrid b,.aheadlist b,.ahead-big b,.areastats b,.milecount,.mc-d{
  font-family:var(--sans);font-feature-settings:"tnum" 1;letter-spacing:-.01em}
.ahead-big b{font-weight:300}
.recgrid li b{font-weight:400;font-size:25px}
.recgrid li.zero b{color:var(--ink-4)}

/* ==========================================================================
   THE RESERVED PORTRAIT
   The 3:4 plate the commissioned photograph will occupy. Everywhere a drawn
   face used to sit, so the Academy stops looking finished where it is not.
   ========================================================================== */
.plate{display:block;border-radius:4px;overflow:hidden;box-shadow:0 8px 22px -16px rgba(36,30,25,.55)}
.now-face .plate,.dn-face .plate,.mc-face .plate,.cc-face .plate{border-radius:5px}
.figure{width:136px}
.figure .fgdrawn svg.plate{width:100%;height:auto;border-radius:6px}
.clienthead .avatar{align-self:flex-start}
.clienthead{align-items:flex-start}
.cmpface .plate,.evface .plate,.lsface .plate,.rxface .plate{border-radius:3px}

/* ==========================================================================
   THE WOMAN, AT THE SIZE OF A WOMAN
   The consultation read like a form because the person it is about had less
   of the screen than the navigation did.
   ========================================================================== */
.moment.her{padding-top:0}
.herblock{display:flex;gap:22px;align-items:flex-start;padding:4px 0 20px;
  border-bottom:1px solid var(--line-2);margin-bottom:20px}
.herfig{flex:0 0 auto}
.herfig .figure{width:136px}
.heride{min-width:0;padding-top:4px}
.heride .lbl{margin-bottom:8px}
/* A stage direction ("Noelia has taken the nearer chair; Charo is half a step
   behind her…") is a sentence to read, not a kicker: in spaced capitals it ran
   to five lines on a phone. Short labels keep the kicker style. */
.heride .lbl.lbl-long{text-transform:none;letter-spacing:0;font-size:14px;line-height:1.45;font-weight:500}
.hernm{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.4vw,33px);
  line-height:1.1;margin:0 0 6px}
.hermeta{margin:0 0 10px;font-size:13.5px;color:var(--ink-2);line-height:1.5;max-width:46ch}
.herdoing{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2);
  padding-left:13px;border-left:2px solid var(--champagne);max-width:44ch}
blockquote.hersays{font-family:var(--serif);font-size:clamp(19px,2.5vw,24px);line-height:1.5;
  margin:0;padding:0;border:0;color:var(--ink)}
@media(max-width:620px){
  .herblock{gap:16px}
  .herfig .figure{width:116px}
  .hernm{font-size:24px}
  blockquote.hersays{font-size:19px}
}

/* ==========================================================================
   A DIAGRAM THAT BUILDS ITSELF
   Motion only where a picture is a sequence, at a pace somebody can read,
   and off entirely for anyone who has asked for less of it.
   ========================================================================== */
.pfigure[data-build]{position:relative}
.pfigure[data-build] svg > *{opacity:1}
.pfigure[data-build].playing svg > *{
  opacity:0;
  animation:dgin .52s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(.22s + var(--beat,0) * .22s)}
@keyframes dgin{ from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none} }
.pfigure[data-build] svg > *{transform-box:fill-box;transform-origin:50% 50%}
.dgcap{display:flex;justify-content:flex-end;margin-top:6px}
.dgagain{background:none;border:0;padding:4px 2px;font:inherit;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);cursor:pointer}
.dgagain:hover{color:var(--champagne)}
@media(prefers-reduced-motion:reduce){
  .pfigure[data-build].playing svg > *{opacity:1;animation:none}
  .dgcap{display:none}
}

/* ==========================================================================
   THE MEDIA SLOTS
   A film that has not been shot is a real fact about this product. It is drawn
   as a reserved plate carrying its own brief — the same register as the client
   plates — rather than hidden, faked with stock footage, or handed a broken
   player. Premium and unfinished are not opposites; premium and pretending are.
   ========================================================================== */
.mslot{display:flex;gap:18px;align-items:center;margin:20px 0 0;padding:16px 18px;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:5px}
.mslot.quiet{background:transparent;border-color:var(--line-3,var(--line-2))}
.mslot video{flex:0 0 auto;width:208px;height:117px;border-radius:4px;background:#1a1613;
  display:block;object-fit:cover}
.ms-plate{flex:0 0 auto;width:112px;height:63px;border-radius:4px;position:relative;
  display:grid;place-items:center;
  background:
    radial-gradient(120% 140% at 30% 18%, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(152deg, #3a322b 0%, #2a241f 48%, #1d1915 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),
             0 7px 18px -14px rgba(36,30,25,.6)}
.ms-plate::after{content:"";position:absolute;inset:0;border-radius:4px;
  background-image:radial-gradient(rgba(255,255,255,.055) .5px, transparent .5px);
  background-size:3px 3px;opacity:.7;pointer-events:none}
.ms-mark{font-family:var(--serif);font-size:19px;line-height:1;color:rgba(255,255,255,.52);
  letter-spacing:.02em;position:relative;z-index:1}
.mslot figcaption{min-width:0;display:flex;flex-direction:column;gap:5px}
.ms-who{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3,var(--ink-2));font-weight:600}
.mslot figcaption b{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.3;
  color:var(--ink)}
.ms-meta{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ms-len{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:12px;
  color:var(--ink-2)}
.ms-state{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3,var(--ink-2));padding:2px 7px;border:1px solid var(--line-2);border-radius:2px}
.mile-film{display:block;font-family:var(--sans);font-size:11.5px;color:var(--ink-3,var(--ink-2));
  margin-top:3px;letter-spacing:.01em}

@media (max-width:620px){
  .mslot{gap:14px;padding:13px 14px}
  .ms-plate{width:84px;height:48px}
  .mslot video{width:150px;height:84px}
  .mslot figcaption b{font-size:15.5px}
}

/* ==========================================================================
   WHAT MIRROR READS HER SENTENCE AS
   A proposal, never a verdict. The confident state is the only one that gets a
   filled button; ambiguity and "I cannot tell" are shown in the same register
   as the reading above them, because they are answers and not errors.
   ========================================================================== */
.intentblk{border-top:1px solid var(--line-2);padding-top:14px;margin-top:16px}
.intentblk .k{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.intconf{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:11px;
  letter-spacing:.08em;color:var(--ink-3,var(--ink-2));text-transform:none}
.intsay{margin:6px 0 12px;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.intopt{margin:0 0 10px}
.intgo{display:flex;width:100%;gap:14px;align-items:center;justify-content:space-between;
  text-align:left;padding:13px 15px;border-radius:4px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--panel);font:inherit;color:var(--ink)}
.intgo:hover{border-color:var(--champagne)}
.intgo[disabled]{opacity:.45;cursor:default}
.intgo.one{background:var(--ink);border-color:var(--ink);color:#F7F3EC}
.intgo.one:hover{border-color:var(--ink)}
.intlab{font-family:var(--serif);font-size:16px;line-height:1.3;min-width:0}
.intact{flex:0 0 auto;font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.82}
.intwhy{margin:5px 0 0 2px;font-size:12.5px;line-height:1.5;color:var(--ink-3,var(--ink-2))}
.intno{margin-top:2px}
.intnote{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3,var(--ink-2));
  max-width:64ch}
.intentblk.none .intsay,.intentblk.quiet .intsay{color:var(--ink-2)}
.sayout.spent .intentblk{opacity:.5}

@media (max-width:620px){
  .intgo{flex-direction:column;align-items:flex-start;gap:7px}
  .intact{opacity:.7}
}

/* ==========================================================================
   WHAT HER CONSULTATIONS SHOW
   Six steps, nine women, eleven sentences. Every number on this surface is a
   count of something with a name — three rooms, two women, four times. No
   percentage, no total, no bar that fills, because a number a practitioner can
   watch rise is a number she will start playing to.
   ========================================================================== */
.capsec{margin:4px 0 28px}
.capcount{font-family:var(--sans);font-size:11px;letter-spacing:.08em;
  color:var(--ink-3,var(--ink-2));font-variant-numeric:tabular-nums}
.secthead.sub{margin-top:26px}
.secthead.sub h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:0}

.capsteps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.capstep{border:1px solid var(--line-2);border-radius:5px;padding:16px 17px;
  background:var(--panel)}
.capstep.unseen{opacity:.62}
.capstep.held{border-color:var(--champagne);background:var(--panel-2)}
.caphead{display:flex;gap:12px;align-items:center}
.capl{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-size:16px;border:1px solid var(--line-2);color:var(--ink-2)}
.capstep.held .capl{background:var(--ink);border-color:var(--ink);color:#F7F3EC}
.capnm{min-width:0;display:flex;flex-direction:column;gap:1px}
.capnm b{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.2}
.capstate{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3,var(--ink-2))}
.capstep.held .capstate{color:var(--bronze,var(--ink-2))}
.cappromise{margin:11px 0 0;font-family:var(--serif);font-size:15px;line-height:1.45;
  color:var(--ink-2)}
.capev{margin:10px 0 0;font-size:13.5px;line-height:1.55;padding-left:12px;
  border-left:2px solid var(--champagne)}
.capmeans{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3,var(--ink-2))}
.capmore{margin-top:10px}
.capmore summary{cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3,var(--ink-2))}
.capmore p{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.capbook .k{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3,var(--ink-2));margin-right:6px}

.capwomen{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.capwomen li{display:flex;gap:11px;align-items:center;border:1px solid var(--line-2);
  border-radius:4px;padding:9px 11px;background:var(--panel);flex-wrap:wrap}
.cwface{flex:0 0 auto}
.cwn{font-family:var(--serif);font-size:15.5px}
.cwm{font-family:var(--sans);font-size:11.5px;color:var(--ink-3,var(--ink-2));
  font-variant-numeric:tabular-nums}
.cwo{display:flex;gap:4px;margin-left:auto}
.cwo i{font-style:normal;font-family:var(--sans);font-size:9.5px;letter-spacing:.08em;
  padding:2px 5px;border-radius:2px;border:1px solid var(--line-2);color:var(--ink-2)}
.cwo i.yes{border-color:var(--champagne)}
.capleft{margin:12px 0 0;font-size:13px;color:var(--ink-3,var(--ink-2));line-height:1.55}
.capleft .k{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  margin-right:7px}

.capobj{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.capobj li{display:flex;gap:14px;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--line-2);padding-bottom:7px}
.csaid{font-family:var(--serif);font-size:15.5px}
.con{font-family:var(--sans);font-size:11.5px;color:var(--ink-3,var(--ink-2));
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.capnote{margin:20px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3,var(--ink-2));
  max-width:64ch}

/* The capability count sits beside its heading on a desktop and wraps into a
   four-word-wide column beside it on a phone, which reads as broken. Below
   720px the heading band stacks and the count becomes a line under it. */
@media (max-width:720px){
  .capsec > .secthead{flex-wrap:wrap;row-gap:4px}
  .capsec > .secthead h2{white-space:normal;flex:1 1 100%}
  .capsec > .secthead:after{display:none}
  .capcount{flex:1 1 100%}
}

/* ==========================================================================
   WHAT SHE HAS JOINED
   The walk-in ran three screens of method and then opened a client, so a
   practitioner met one woman and reasonably concluded that was the product.
   Every number on this panel is read from the server's own counts.
   ========================================================================== */
/* COLOURS ARE STATED, NOT INHERITED. The walk-in is a dark hero and it sets
   light text on everything inside it; this panel is a cream card, so every
   token below had to be named or the whole thing rendered cream on cream —
   which is what the first version did, and only a screenshot showed it. */
.wi-scale{margin:18px 0 0;padding:20px 22px;border-radius:5px;
  background:#F7F3EC;color:#241E19;border:1px solid rgba(36,30,25,.12)}
.ws-big{display:flex;align-items:baseline;gap:13px}
.ws-big b{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,58px);line-height:.95;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:#241E19}
.ws-big span{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:#5C544C}
.ws-note{margin:11px 0 0;font-size:13.5px;line-height:1.6;color:#4A443D;max-width:62ch}
.ws-mods{display:flex;flex-wrap:wrap;gap:6px;margin:15px 0 0}
.ws-mod{display:inline-flex;align-items:baseline;gap:7px;padding:5px 10px;border-radius:3px;
  border:1px solid rgba(36,30,25,.14);background:#FFFDF9;font-size:12.5px;line-height:1.3;
  color:#241E19}
.ws-mod i{font-style:normal;font-family:var(--sans);font-variant-numeric:tabular-nums;
  font-size:10px;letter-spacing:.06em;color:#8E8375}
.ws-route{margin:18px 0 0;padding-top:15px;border-top:1px solid rgba(36,30,25,.12)}
.ws-rk{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#8E8375}
.ws-rungs{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 0;padding:0}
.ws-rungs li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:#5C544C}
.ws-rungs li span{width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(36,30,25,.3)}
.ws-rungs li.here{color:#241E19;font-weight:600}
.ws-rungs li.here span{background:var(--gold,#C9A45C);border-color:var(--gold,#C9A45C)}

/* And the standing band names its rungs, instead of only numbering them. The
   rail is a flex row with absolutely positioned labels under each dot, so the
   name joins the number there rather than pushing the rail about. */
.rungs{margin-bottom:34px}
.rname{position:absolute;top:31px;left:-1px;font-family:var(--sans);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#8E8375}
.rung.here .rname{color:var(--gold)}
.rung.ahead .rname{opacity:.55}
.rung:last-child .rname{left:auto;right:-1px}

@media (max-width:620px){
  .wi-scale{padding:15px 15px}
  .ws-rungs{gap:4px 12px}
  /* At phone width six names under a 300px rail is unreadable overlap. Only
     the rung she is standing on keeps its name. */
  .rname{display:none}
  .rung.here .rname{display:block}
}

/* ==========================================================================
   WHAT YOUR CLINIC CAN SEE
   Two columns, visually distinct, and the one that gives something away comes
   first — a privacy statement that opens with the reassuring half reads as
   marketing, and she will discount the rest of it.
   ========================================================================== */
.vissec{margin:34px 0 28px}
.visgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:16px}
.visseen,.vispriv{border:1px solid var(--line-2);border-radius:5px;padding:16px 18px;
  background:var(--panel)}
.vispriv{background:var(--panel-2);border-color:var(--champagne)}
.vish{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3,var(--ink-2));margin-bottom:12px}
.vispriv .vish{color:var(--bronze,var(--ink-2))}
.visseen ul,.vispriv ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:13px}
.visseen li,.vispriv li{display:flex;flex-direction:column;gap:3px}
.visseen li b,.vispriv li b{font-family:var(--serif);font-weight:400;font-size:15.5px;
  line-height:1.35}
.visseen li span,.vispriv li span{font-size:12.5px;line-height:1.55;
  color:var(--ink-3,var(--ink-2))}
.visnote{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3,var(--ink-2));
  max-width:66ch}

/* ==========================================================================
   THE CARDS
   A reference, and it is styled as one: no step rail, no choosing, nothing to
   get wrong. Denser and quieter than a lesson, grouped by the eight phases so
   the deck reads as the consultation rather than as a table of contents.
   ========================================================================== */
.decksec{margin:38px 0 10px}
.deckn{font-family:var(--sans);font-size:11px;letter-spacing:.07em;
  color:var(--ink-3,var(--ink-2));font-variant-numeric:tabular-nums}
.ckphase{margin:22px 0 0}
.ckph{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3,var(--ink-2));
  padding-bottom:8px;border-bottom:1px solid var(--line-2)}
.ckph i{font-style:normal;font-variant-numeric:tabular-nums;width:20px;height:20px;
  border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;
  font-size:10px;flex:0 0 auto}
.ckph span{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.ckgrid{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.ckcard{border:1px solid var(--line-2);border-radius:5px;padding:15px 16px;background:var(--panel);
  display:flex;flex-direction:column;gap:8px}
.ck-k{font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3,var(--ink-2))}
.ckcard h4{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.25;margin:0}
.ck-p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ck-t,.ck-s{display:flex;flex-direction:column;gap:3px;padding-top:9px;
  border-top:1px solid var(--line-2)}
.ck-t span,.ck-s span{font-family:var(--sans);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3,var(--ink-2))}
.ck-t q{font-size:13px;line-height:1.5;color:var(--ink-2);font-style:italic}
.ck-s b{font-family:var(--serif);font-weight:400;font-size:15px;line-height:1.4}
.ck-go{align-self:flex-start;margin-top:4px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bronze,var(--ink-2))}
.ck-go:hover{text-decoration:underline}

/* ==========================================================================
   PHOTOGRAPHY
   --------------------------------------------------------------------------
   Three things arrived at once and they are deliberately not three designs:
   a woman's portrait where her face is being asked for, a clinic frame where a
   lesson is about something you can see, and a strip of six across the Academy
   home. They share the frame, the radius, the caption voice and the load
   behaviour, because the product should read as one place that has been
   photographed rather than three places that each got a picture.

   NOTHING HERE IS FULL BLEED. Every frame is bounded, captioned and sitting in
   the layout rather than behind it. A photograph that runs edge to edge under
   text is a mood; these are evidence of a room, and they are the size of
   evidence.
   ========================================================================== */

/* HER PORTRAIT — the same loading contract as the room's figure: the reserved
   plate is in the DOM first, the photograph fades in over it once it has
   actually decoded, and a file that never arrives simply never reveals. */
.idface{position:relative;display:inline-block;width:var(--w,72px);
  aspect-ratio:var(--ratio,3/2);border-radius:6px;overflow:hidden;
  background:var(--panel-2);vertical-align:middle;line-height:0}
.idface .fgdrawn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.idface .fgdrawn svg{max-height:100%;max-width:100%;width:auto;height:auto}
.idface .fgphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 26%;opacity:0}
.idface.photo-ready .fgphoto{opacity:1}
.idface.photo-fade .fgphoto{transition:opacity .36s cubic-bezier(.4,0,.2,1)}
.idface.photo-fade.photo-ready .fgdrawn{opacity:0;transition:opacity .36s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){
  .idface .fgphoto,.idface .fgdrawn{transition:none!important}
  .idface.photo-ready .fgphoto{opacity:1!important}
}

/* A CLINIC FRAME INSIDE A LESSON.
   The caption is the teaching — what to notice — and the note beneath it is
   the line that has to be there whenever the picture shows a treatment or
   shows skin. The note is set in the caption, not in small print at the foot
   of the page, because a disclaimer nobody reads is a decoration too. */
/* AND THE FIGURE IS NO WIDER THAN IT HAS ANYTHING TO PUT IN IT.
   The picture is capped at its own pixel width, correctly — but the caption
   then took every remaining pixel of a 1160px column, so one short sentence
   sat alone in a half-empty panel and the whole block read as a layout that
   had failed rather than one that had been decided. The figure now sizes to
   its contents, with the caption column bounded at a readable measure. */
.scene{margin:18px 0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);display:flex;align-items:stretch;overflow:hidden;
  width:fit-content;max-width:100%}
/* The picture takes its own width and no more — see --mw, set from the file's
   real pixel width — and the caption takes whatever is left. */
.scene img{display:block;flex:0 0 auto;width:min(var(--mw,320px),46%);height:auto;
  align-self:stretch;object-fit:cover;object-position:50% 42%}
.scene figcaption{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  padding:18px 22px;background:var(--panel-2);border-left:1px solid var(--line-2);
  max-width:42ch}
.scene .sc-cap{display:block;font-family:var(--serif);font-size:16px;line-height:1.45;
  color:var(--ink)}
.scene .sc-note{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-3)}
@media(max-width:620px){
  /* Stacked on a phone, where 46% of the screen is too narrow to be a picture
     of anything. The width cap still holds, so nothing stretches. */
  .scene{display:block;width:auto}
  .scene img{width:min(var(--mw,320px),100%);max-height:190px}
  .scene figcaption{border-left:0;border-top:1px solid var(--line-2)}
}

/* ONE VISIT, ACROSS THE TOP OF THE CURRICULUM.
   Six frames in the order a client moves through a clinic. It scrolls on a
   phone rather than reflowing into a grid: the ORDER is the content, and a
   grid that wraps turns a sequence into a gallery. */
.clinicstrip{margin:26px 0 8px}
.clinicstrip .cs-line{font-family:var(--serif);font-size:16px;color:var(--ink-2);
  margin-bottom:12px}
.clinicstrip .cs-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.clinicstrip .cs-f{margin:0;border-radius:9px;overflow:hidden;background:var(--panel-2);
  border:1px solid var(--line-2)}
.clinicstrip .cs-f img{display:block;width:100%;height:92px;object-fit:cover;
  object-position:50% 44%}
.clinicstrip .cs-f figcaption{padding:7px 9px 9px;font-size:11px;line-height:1.35;
  color:var(--ink-3)}
@media(max-width:900px){
  .clinicstrip .cs-row{grid-auto-flow:column;grid-auto-columns:46%;
    grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .clinicstrip .cs-f{scroll-snap-align:start}
  .clinicstrip .cs-f img{height:112px}
}

/* THE MODULE COVER, WHEN IT IS A PHOTOGRAPH.
   The scrim is not styling: the number and the phase sit on top of the picture
   and they have to stay legible over a bright reception desk and a dark
   treatment room alike. The accent the drawn cover used to carry survives as
   the tint, so the ten modules are still told apart by colour. */
.mod .cover.has-shot .cov-shot{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%}
/* The scrim is sized by what has to stay readable on top of it: the phase
   label at the top right and the module number at the bottom left, over a
   bright reception desk and a dark treatment room alike. Measured against the
   brightest frame in the set, not guessed. */
.mod .cover.has-shot .cov-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,22,17,.62) 0%,rgba(28,22,17,.14) 46%,rgba(28,22,17,.80) 100%),
             linear-gradient(90deg,color-mix(in srgb,var(--accent) 40%,transparent) 0%,transparent 58%)}
.mod .cover.has-shot .ph{color:rgba(255,252,247,.94);text-shadow:0 1px 3px rgba(20,15,11,.7)}
.mod .cover.has-shot .num{color:#fff;text-shadow:0 2px 6px rgba(20,15,11,.6)}
.mod.available:hover .cover.has-shot .cov-shot{transform:scale(1.03);transition:transform .4s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){
  .mod.available:hover .cover.has-shot .cov-shot{transform:none}
}
.prov{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-2);
  font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.prodowed{margin-top:11px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.owedchip{display:inline-block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;padding:3px 8px;border-radius:999px;background:var(--line-2);color:var(--ink-3)}

/* ==========================================================================
   WHAT SHE DID WHEN YOU SAID THAT
   --------------------------------------------------------------------------
   Two faces and two readings, after a choice has landed and never before.
   It is set apart from the cards around it because it is the moment the whole
   method turns on, and it was previously carried by two sentences in a column.

   NEITHER SIDE IS COLOURED FOR OUTCOME. Holding is not failure — several of
   the best moves in this method leave a client exactly where she was — so
   there is no green, no red, and no tick anywhere in here. The only emphasis
   is a slightly stronger border when she moved, because that is the thing
   worth looking twice at, not the thing worth being pleased about.
   ========================================================================== */
.movedcard{padding:16px 18px 14px;border:1px solid var(--line)}
.movedcard.did{border-color:var(--champagne)}
.mv-head{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin-bottom:13px}
.mv-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start}
.mv-arrow{align-self:center;color:var(--ink-3);font-size:17px;padding-top:30px}
.mv-side{min-width:0}
.mv-k{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);margin-bottom:7px}
.mv-face{margin-bottom:9px}
.mv-face .figure{width:100%;max-width:220px}
.mv-line{font-family:var(--serif);font-size:15px;line-height:1.42;color:var(--ink);margin:0 0 4px}
.mv-line.muted{color:var(--ink-3)}
.mv-say{margin:13px 0 0;padding-top:11px;border-top:1px solid var(--line-2);
  font-size:12.5px;letter-spacing:.03em;color:var(--ink-2)}
@media(max-width:620px){
  /* Stacked, with the arrow turned down the page: on a phone two faces side by
     side are two thumbnails, and the comparison stops being readable. */
  .mv-pair{grid-template-columns:1fr;gap:4px}
  .mv-arrow{padding:2px 0;transform:rotate(90deg);justify-self:start}
  .mv-face .figure{max-width:170px}
}

/* Her face in the debrief's before/after, and beside each row of the trail.
   Both are strictly retrospective — the consultation is over in one and every
   row of the other is a moment already lived through — so neither can be read
   ahead of a decision. */
.chg-face{margin:0 0 8px}
.chg-face .figure{width:100%;max-width:150px}
.trailrow.withface{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:start}
.trailface{grid-row:1 / span 2}
.trailface .figure{width:84px}
.trailrow.withface .trailn{align-self:center}
@media(max-width:560px){ .trailface .figure{width:64px} }

/* ==========================================================================
   THE NINE WOMEN
   --------------------------------------------------------------------------
   Progress as nine people rather than as the number three. Met is full
   colour; not yet is held back — dimmed and desaturated rather than hidden,
   because the ones still waiting are the reason to come back and a product
   that hides them is a product that looks finished on day one.

   Not a leaderboard and not a score: there is no order of merit here, no
   percentage, and no badge. The order is the order of the cases.
   ========================================================================== */
.womensec{margin:26px 0 8px}
.womenrow{display:grid;grid-template-columns:repeat(9,1fr);gap:9px;list-style:none;
  margin:12px 0 0;padding:0}
.wmn{margin:0}
.wmn-go{display:block;width:100%;padding:0 0 9px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;
  text-align:left;transition:.16s}
.wmn-go:hover{border-color:var(--champagne);transform:translateY(-2px)}
.wmn-face{display:block;line-height:0}
.wmn-face .idface{width:100%;border-radius:0;display:block}
.wmn-n{display:block;padding:8px 9px 0;font-size:9.5px;letter-spacing:.12em;
  font-weight:700;color:var(--ink-3)}
.wmn-name{display:block;padding:1px 9px 0;font-family:var(--serif);font-size:14.5px;
  color:var(--ink)}
.wmn-state{display:block;padding:3px 9px 0;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.wmn.met .wmn-state{color:var(--sage)}
/* Held back, not hidden. */
.wmn:not(.met) .wmn-face{filter:grayscale(.72) brightness(.94);opacity:.58}
.wmn:not(.met) .wmn-name{color:var(--ink-2)}
@media(max-width:900px){ .womenrow{grid-template-columns:repeat(5,1fr)} }
@media(max-width:560px){ .womenrow{grid-template-columns:repeat(3,1fr);gap:7px} }
@media(prefers-reduced-motion:reduce){ .wmn-go:hover{transform:none} }
/* A woman who is DRAWN in the room is a different kind of outstanding from one
   who is photographed and merely incomplete: the first blocks a whole
   consultation, the second deepens one that already works. */
.owedchip i{font-style:normal;margin-left:6px;opacity:.65}
.owedchip.hard{background:var(--gold-soft);color:var(--gold-deep)}

/* ==========================================================================
   WHAT SHE SELLS
   --------------------------------------------------------------------------
   MIRROR is sold into three selling environments — a skincare counter, a
   treatment room, a clinic front desk — and until now the product could not
   tell them apart. The chips say where a module, a lesson or a consultation's
   worked examples are actually set, classified from the examples themselves.

   `.mine` marks the ones that match her own answer. It MARKS; it never hides.
   Nothing in this product is withheld on the basis of a job title, because
   the method does not change with the price list.
   ========================================================================== */
.envs{display:inline-flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.env{display:inline-block;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;padding:2.5px 7px;border-radius:999px;
  background:var(--line-2);color:var(--ink-3)}
.env.mine{background:var(--sage-soft);color:var(--sage)}

/* The note a learner is owed when her own environment has no examples yet.
   Not a banner, not a warning, not dismissible: a note from the people who
   made it, sitting in the page where she will read it once and move on. */
.sellnote{margin:24px 0 4px;padding:17px 19px 15px;border:1px solid var(--line);
  border-left:3px solid var(--champagne);border-radius:var(--r);background:var(--panel)}
.sellnote .sn-k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);margin-bottom:9px}
.sellnote p{font-family:var(--serif);font-size:16px;line-height:1.52;color:var(--ink);margin:0}
.sellnote .sn-count{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-2);
  font-family:var(--sans,inherit);font-size:12px;line-height:1.5;color:var(--ink-3)}
.sellnote .sn-go{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px}
.sellnote .sn-go .envs{margin:0}

/* ==========================================================================
   EVERY LESSON, ON ONE PAGE
   --------------------------------------------------------------------------
   The index at the back of the book. Sixty-one rows is small enough to search
   in the page and large enough that nobody should have to open ten modules to
   find out whether "I need to ask my husband" is taught.
   ========================================================================== */
.lxsec{margin:32px 0 8px}
.lxbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 4px}
.lxq{flex:1 1 280px;min-width:0;padding:10px 13px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);color:var(--ink);font:inherit;font-size:14px}
.lxq:focus{outline:2px solid var(--champagne);outline-offset:1px}
.lxf{display:flex;gap:5px;flex-wrap:wrap}
.lxchip{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  padding:5px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink-3);cursor:pointer;transition:.14s}
.lxchip:hover{border-color:var(--champagne)}
.lxchip.on{background:var(--espresso);border-color:var(--espresso);color:#fff}
.lxcount{font-size:11.5px;color:var(--ink-3);min-height:16px;margin:6px 0 2px}
.lxlist{list-style:none;margin:6px 0 0;padding:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--panel)}
.lxrow{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;
  padding:12px 15px;border-top:1px solid var(--line-2);cursor:pointer;transition:.12s}
.lxrow:first-child{border-top:0}
.lxrow:hover{background:var(--panel-2)}
.lxrow.hide{display:none}
.lxrow.soon{cursor:default;opacity:.55}
.lxrow.soon:hover{background:transparent}
.lx-n{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.lx-body{min-width:0}
.lx-body b{display:block;font-family:var(--serif);font-weight:400;font-size:16px;color:var(--ink)}
.lx-obj{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.lx-meta{display:block;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);margin-top:5px}
.lx-meta .envs{margin-top:0;margin-left:8px;vertical-align:-1px}
.lx-min{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.lx-go{color:var(--ink-3);font-size:15px}
.lxrow.done .lx-go{color:var(--sage)}
@media(max-width:620px){
  .lxrow{grid-template-columns:auto 1fr auto;gap:9px;padding:11px 12px}
  .lx-min{display:none}
}

/* ==========================================================================
   ONE SKILL, END TO END
   --------------------------------------------------------------------------
   Six threads, each one a method step with its whole chain on it: what
   teaches it, what rehearses it, where it is tested, what she actually did
   when it came up, what she was told, and the single next thing.

   NO SCORE ANYWHERE IN HERE. The state is a word — Not yet, Begun, Uneven,
   Holding, Held — and the evidence under it is a sentence naming the rooms.
   The rail counts things that happened; it is not a progress bar to fill.
   ========================================================================== */
.thsec{margin:28px 0 10px}
.threads{list-style:none;margin:14px 0 14px;padding:0;display:grid;gap:12px}
.th{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:16px 18px 14px}
.th.held{border-color:var(--sage-soft)}
.th.open{border-color:var(--champagne);box-shadow:0 14px 34px -28px rgba(36,30,25,.5)}
.th-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.th-l{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--espresso);color:#fff;font-family:var(--serif);font-size:18px}
.th.held .th-l{background:var(--sage)}
.th-nm b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;color:var(--ink)}
.th-pr{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.th-state{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);white-space:nowrap}
.th.held .th-state{color:var(--sage)}

/* Learn → Rehearse → Use it. The order the thing is actually learned in. */
.th-rail{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;
  margin:14px 0 0;padding:0}
.th-rail li{padding:9px 11px;border-radius:9px;background:var(--panel-2);
  border:1px solid var(--line-2)}
.th-rail li.part{border-color:var(--champagne)}
.th-rail li.full{background:var(--sage-soft);border-color:var(--sage-soft)}
.thr-k{display:block;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3)}
.thr-n{display:block;font-family:var(--serif);font-size:22px;color:var(--ink);line-height:1.1;
  margin-top:3px}
.thr-n i{font-style:normal;font-size:13px;color:var(--ink-3)}
.thr-u{display:block;font-size:10.5px;color:var(--ink-3)}
.th-ev{font-family:var(--serif);font-size:15.5px;line-height:1.5;color:var(--ink);margin:13px 0 0}
.th-ev.muted{color:var(--ink-3)}
.th-did,.th-coach,.th-more{margin-top:11px}
.th-did summary,.th-coach summary,.th-more summary{cursor:pointer;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.th-did summary i,.th-coach summary i{font-style:normal;margin-left:6px;opacity:.7}
.th-moments{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:10px}
.thm{display:grid;grid-template-columns:auto 1fr;gap:11px;padding:10px 0 0;
  border-top:1px solid var(--line-2)}
.thm-face .figure{width:92px}
.thm-who{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3)}
.thm-body b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:3px 0 4px}
.thm-did{display:block;font-family:var(--serif);font-size:14.5px;color:var(--ink-2)}
/* A move that cost her something is marked, not scored: the mark is a reason
   to look again, and the sentence under it is what there is to look at. */
.thm.cost{border-left:2px solid var(--champagne);padding-left:11px}
.th-next{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.thn-k{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);margin-bottom:7px}
.thn-go{display:inline-block;max-width:100%;padding:9px 14px;border-radius:9px;
  border:1px solid var(--espresso);background:var(--espresso);color:#fff;
  font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.thn-go:hover{opacity:.9}
.thn-why{display:block;font-size:12px;color:var(--ink-3);margin-top:7px}
.th-next.done .thn-k{color:var(--sage)}

/* The same thing, once, on her first screen. */
.focusth{margin:22px 0 4px;padding:17px 19px 15px;border:1px solid var(--champagne);
  border-radius:var(--r);background:var(--panel)}
.fth-k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin-bottom:11px}
.fth-row{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.fth-l{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:var(--espresso);color:#fff;font-family:var(--serif);font-size:20px}
.fth-body b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink)}
.fth-pr{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px}
.fth-ev{display:block;font-family:var(--serif);font-size:15px;color:var(--ink-2);margin-top:8px}
.fth-next{margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:620px){
  .th-rail{grid-auto-flow:row;grid-auto-columns:auto}
  .thm{grid-template-columns:1fr}
  .thm-face .figure{width:120px}
}

/* ==========================================================================
   THE DRAFTED MODULES
   --------------------------------------------------------------------------
   Below the ten, never among them. Dashed edges and the word Draft on the
   cover, so there is no size at which an eleventh card reads as the eleventh
   thing you have finished. The verification note sits above the grid because
   the sentence a learner most needs before opening the device module is that
   nothing in it states a technical fact about any device.
   ========================================================================== */
.draftmods{border-top:1px dashed var(--line);margin-top:34px;padding-top:4px}
.draftmods .secthead{flex-wrap:wrap}
.draftmods .secthead h2{white-space:normal}
.mod.draftmod{border-style:dashed}
.mod .cov-draft{position:absolute;right:10px;top:10px;z-index:2;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:#7A6752;background:rgba(244,238,227,.94);border:1px dashed #CDBFA6;
  border-radius:4px;padding:3px 7px}
.mod .badge.draft{background:#F4EEE3;color:#7A6752;border:1px dashed #CDBFA6}
.dmverify{margin:0 0 16px;padding:13px 15px;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid var(--champagne);
  border-radius:var(--r);font-size:12.5px;line-height:1.65;color:var(--ink-2);max-width:78ch}
.dmverify span{display:block;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:var(--ink-4);margin-bottom:6px}
/* A drafted row in the lesson index: listed, last, and never mistakable for
   one of the sixty-one. */
.lxrow.lxdraft{border-left:2px dashed #CDBFA6}
.lx-min .lx-d{display:inline-block;font-style:normal;font-size:8.5px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:#7A6752;background:#F4EEE3;
  border:1px dashed #CDBFA6;border-radius:3px;padding:2px 5px;margin-right:5px}
.milecount .lx-dn{font-style:normal;color:#7A6752}

/* ==========================================================================
   THE EIGHT PIECES OF TRADECRAFT, AND THE EIGHT-RUNG LADDER
   --------------------------------------------------------------------------
   Deliberately not a progress bar. A rung is on or it is off, and the two
   rungs no page can carry are drawn with a dashed edge rather than a lighter
   shade — a lighter shade reads as "nearly", and these are not nearly
   anything, they are somewhere else entirely.
   ========================================================================== */
.tcsec{margin:28px 0 10px}
.tc-draft{display:inline-block;margin:0 0 10px}
.tcs{list-style:none;margin:14px 0;padding:0;display:grid;gap:12px}
.tc{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:16px 18px 14px}
.tc.held{border-color:var(--sage-soft)}
.tc.uneven{border-left:3px solid var(--amber)}
.tc-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start}
.tc-n{width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--espresso);color:#fff;font-family:var(--serif);font-size:16px}
.tc.held .tc-n{background:var(--sage)}
.tc-nm b{display:block;font-family:var(--serif);font-weight:400;font-size:18px;color:var(--ink)}
.tc-is{display:block;font-size:13px;color:var(--ink-2);margin-top:3px;max-width:62ch}
.tc-state{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);white-space:nowrap}
.tc.held .tc-state{color:var(--sage)}

.tc-ladder{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:13px 0 0;padding:0}
.tcr{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:99px;
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink-3)}
.tcr.on{background:var(--sage-soft);border-color:var(--sage-soft);color:var(--ink)}
.tcr-n{font-family:var(--serif);font-size:12px;opacity:.8}
.tcr-k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.tc-ev{font-family:var(--serif);font-size:15.5px;line-height:1.5;color:var(--ink);margin:13px 0 0}
.tc-ev.muted{color:var(--ink-3)}
.tc-more{margin-top:11px}
.tc-more summary{cursor:pointer;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3)}
.tc-bk{font-size:12.5px;color:var(--ink-2);margin:8px 0 0}
.tc-bk .k{font-weight:700;color:var(--ink-3);margin-right:6px}
.tc-lessons{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:5px}
.tc-lessons li{display:flex;align-items:baseline;gap:8px}
.tc-lessons button{background:none;border:0;padding:0;text-align:left;cursor:pointer;
  font:inherit;font-size:13.5px;color:var(--gold-deep);text-decoration:underline;
  text-underline-offset:2px}
.tc-lessons li.done button{color:var(--ink-2);text-decoration:none}
.tc-lessons li.done::before{content:"·";color:var(--sage);font-weight:700}
.tc-lessons li i{font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:#8a6d2f}
.tc-next{margin-top:13px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* The ladder at the foot of a lesson. */
.ladder{margin:26px 0 8px;border-top:1px solid var(--line);padding-top:16px}
.ld-rungs{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.ld-rungs li{display:grid;grid-template-columns:26px 108px 1fr;gap:10px;align-items:baseline;
  padding:8px 10px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line-2);
  color:var(--ink-3)}
.ld-rungs li.on{background:var(--sage-soft);border-color:var(--sage-soft);color:var(--ink)}
.ld-rungs li.room{border-style:dashed;border-color:#CDBFA6;background:transparent}
.ld-n{font-family:var(--serif);font-size:15px;opacity:.75}
.ld-k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.ld-is{font-size:13px;line-height:1.45}
.ld-note{margin-top:11px;max-width:70ch}
@media(max-width:700px){
  .tc-head{grid-template-columns:auto 1fr}
  .tc-state{grid-column:2;margin-top:4px}
  .ld-rungs li{grid-template-columns:22px 1fr}
  .ld-is{grid-column:2}
}

/* What she does when you say that — the fifth rung, inside a lesson. It sits
   above the verdict and reads as a line of the room, not as marking. */
.opt .reacted{display:block;margin:9px 0 2px;padding:9px 11px;border-radius:9px;
  background:var(--panel-2);border-left:2px solid var(--champagne);
  font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink);white-space:normal}
.opt.wrong .reacted{border-left-color:var(--amber)}

/* The Spanish heading is four words longer than the English one, which on a
   390px phone is the difference between a title and a title that pushes the
   whole page sideways — .secthead sets white-space:nowrap for its rule-line
   layout, which is right for two words and wrong for seven. This heading
   wraps, and the rule follows it down. */
.tcsec .secthead{flex-wrap:wrap}
.tcsec .secthead h2{min-width:0;white-space:normal;overflow-wrap:anywhere}

/* ==========================================================================
   PRODUCT KNOWLEDGE — the document, the claims wall, the comparison, the basket
   --------------------------------------------------------------------------
   The document is set like a document and not like a card: tighter leading,
   a rule under each heading, and the gaps marked rather than hidden, because
   the gaps are the honest part of it.
   ========================================================================== */
.doc{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:18px 20px 14px;margin:14px 0}
.docill{font-size:11px;line-height:1.5;letter-spacing:.01em;color:var(--amber);
  background:var(--amber-soft);border-radius:8px;padding:9px 11px;margin-bottom:14px}
.doctitle{font-family:var(--serif);font-weight:400;font-size:17px;margin:0 0 12px}
.docsec{padding:10px 0;border-top:1px solid var(--line-2)}
.docsec h4{margin:0 0 4px}
.docsec p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.docsec.found{background:var(--sage-soft);border-radius:8px;padding:10px 11px;
  border-top-color:transparent}
.docgap{background:#F0E6CE;color:var(--gold-deep);border-radius:4px;padding:0 4px;
  font-style:normal;font-weight:600}
.docfind{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.dfq{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.dfopts{display:flex;flex-wrap:wrap;gap:6px}
.dfo,.clb{font:inherit;font-size:12.5px;padding:6px 11px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2)}
.dfo.sel,.clb.sel{background:var(--espresso);border-color:var(--espresso);color:#fff}

.clitem{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 12px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line-2);
  margin:12px 0 10px;font-family:var(--serif);font-size:16px}
.srckey{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.sk{font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  padding:4px 9px;border-radius:99px;background:var(--line-2);color:var(--ink-3)}
.sk-document{background:var(--sage-soft);color:var(--sage)}
.sk-marketing{background:var(--gold-soft);color:var(--gold-deep)}
.sk-hearsay{background:var(--rose-soft);color:var(--rose)}
.claims{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.clrow{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--panel)}
.clrow.right{border-color:var(--sage-soft)}
.clrow.off{border-left:3px solid var(--amber)}
.clrow blockquote{margin:0 0 9px;font-family:var(--serif);font-size:15.5px;line-height:1.5}
.clpick{display:flex;flex-wrap:wrap;gap:6px}
.clout:not(:empty){margin-top:10px;padding-top:9px;border-top:1px solid var(--line-2)}
.clsrc{display:inline-block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;padding:3px 8px;border-radius:99px;margin-right:8px}
.clcost{font-size:13.5px;color:var(--ink-2);line-height:1.5}

.vs{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
.vs th,.vs td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line-2)}
.vs thead th{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--ink)}
.vs thead th i{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:2px}
.vs tbody th{width:28%;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3)}
.vs tr.unknown td{color:var(--amber);background:var(--amber-soft)}

.shesaid{list-style:none;margin:12px 0;padding:0;display:grid;gap:6px}
.shesaid li{font-family:var(--serif);font-size:15px;line-height:1.5;padding:8px 12px;
  border-left:2px solid var(--champagne);background:var(--panel-2);border-radius:0 8px 8px 0}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:9px;margin:14px 0}
.shelfitem{text-align:left;font:inherit;cursor:pointer;padding:11px 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel);display:grid;gap:3px}
.shelfitem b{font-family:var(--serif);font-weight:400;font-size:14.5px}
.shelfitem .si-p{font-size:12px;color:var(--gold-deep);font-weight:700}
.shelfitem .si-is{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.shelfitem.in{background:var(--sage-soft);border-color:var(--sage)}
.basket{border:1px dashed #CDBFA6;border-radius:var(--r);padding:12px 14px;background:var(--panel-2)}
.bk-k{font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.bk-list{list-style:none;margin:8px 0;padding:0;display:grid;gap:5px}
.bk-list li{display:flex;align-items:baseline;gap:9px;font-family:var(--serif);font-size:15px}
.bk-list li i{font-style:normal;margin-left:auto;font-size:12.5px;color:var(--ink-3)}
.bk-n{width:19px;height:19px;flex:0 0 auto;border-radius:50%;background:var(--espresso);color:#fff;
  font-size:11px;display:flex;align-items:center;justify-content:center;font-family:var(--sans)}
.bk-empty{color:var(--ink-3);font-family:var(--sans);font-size:13px}
.bk-t{font-size:13px;color:var(--ink-2)}
.bk-t b{font-family:var(--serif);font-size:17px;margin:0 6px}
.bk-t b.over{color:var(--rose)}
.bk-t i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.rt-order{margin-top:7px;font-size:13.5px}
.rt-out{margin-top:12px}
.rt-out p,.rt-rest p{font-size:13.5px;line-height:1.55;margin:6px 0}
.rt-rest{margin-top:10px}
.rt-rest summary{cursor:pointer;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3)}
@media(max-width:700px){
  .vs tbody th{width:34%}
  .vs th,.vs td{padding:8px 9px;font-size:12.5px}
  .shelf{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   THE OVERTURE
   --------------------------------------------------------------------------
   One screen, three photographs, an editorial title, one action. The scrim is
   doing the real work: the type sits on a near-solid panel at the bottom and
   the photograph is a room it is standing in, never a background the words
   are fighting. Contrast is measured against the scrim, not against the image.
   ========================================================================== */
.overture{position:relative;min-height:min(78vh,760px);border-radius:var(--r-lg);overflow:hidden;
  margin:10px 0 24px;background:var(--espresso);display:flex;align-items:flex-end;
  box-shadow:var(--shadow)}
.ov-frames{position:absolute;inset:0}
.ov-f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1400ms ease;filter:saturate(.92)}
.overture.still .ov-f{transition:none}
.ov-f.on{opacity:1}
.ov-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(36,30,25,.34) 0%,rgba(36,30,25,.52) 42%,rgba(36,30,25,.93) 100%)}
.ov-skip{position:absolute;top:14px;right:14px;z-index:3;font:inherit;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#F2EBE1;cursor:pointer;
  background:rgba(36,30,25,.42);border:1px solid rgba(242,235,225,.35);border-radius:99px;
  padding:7px 14px;backdrop-filter:blur(4px)}
.ov-skip:hover{background:rgba(36,30,25,.7)}
.ov-body{position:relative;z-index:2;padding:34px 30px 30px;max-width:720px;color:#F6F1E9}
.ov-k{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;
  color:var(--gold);margin:0 0 12px}
.ov-h{font-family:var(--serif);font-weight:400;font-size:clamp(26px,4.4vw,44px);line-height:1.12;
  color:#FFFBF5;margin:0 0 14px;text-wrap:balance}
.ov-lead{font-size:15px;line-height:1.6;color:#E6DCCE;margin:0 0 20px;max-width:58ch}
.ov-three{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.ov-three li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.ov-three b{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  font-weight:700;white-space:nowrap}
.ov-three span{font-size:14px;line-height:1.55;color:#DED3C4}
.ov-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
/* The one action on a dark panel is gold rather than espresso: the default
   primary is a dark pill, which on this background reads as a hole. */
.overture .primary{background:var(--gold);border-color:var(--gold);color:#231C12}
.overture .primary:hover{background:#D8B36C;border-color:#D8B36C}
.ov-mins{font-size:12.5px;color:#C4B7A6}
@media(min-width:900px){
  .ov-body{padding:44px 44px 40px}
  .ov-three{grid-template-columns:1fr;gap:13px}
  /* 176px, and the label wraps inside it. At 150px with nowrap the longest
     label ran straight through the sentence beside it. */
  .ov-three li{grid-template-columns:176px 1fr}
  .ov-three b{white-space:normal;line-height:1.35}
}
@media(max-width:700px){
  .overture{min-height:min(84vh,680px);border-radius:var(--r)}
  .ov-three li{grid-template-columns:1fr;gap:2px}
  .ov-three b{white-space:normal}
  /* The skip chip sits over the top-right corner, and on a phone the kicker
     is long enough in Spanish to run underneath it. */
  .ov-k{padding-right:84px}
}
@media(prefers-reduced-motion:reduce){ .ov-f{transition:none} }

/* ==========================================================================
   THE SLATE — a player with nothing to play, and saying so
   --------------------------------------------------------------------------
   Deliberately NOT a 16:9 black rectangle with a play triangle on it. A
   rectangle that looks like a player is a rectangle somebody waits for. This
   is a slate: the clapperboard diagonal, the words "not filmed yet", and the
   running time it will have when it exists.
   ========================================================================== */
.vid{margin:4px 0}
.vslate{display:grid;gap:16px;align-items:start}
@media(min-width:820px){ .vslate{grid-template-columns:300px 1fr} }
.vframe{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:repeating-linear-gradient(135deg,#2E2620 0 18px,#241E19 18px 36px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:1px solid #241E19;text-align:center;padding:14px}
.vmark{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;
  color:var(--gold);border:1px solid rgba(201,164,92,.5);border-radius:99px;padding:6px 13px}
.vruntime{font-size:12px;color:#C9BDAC;line-height:1.5;max-width:30ch}
.vformat{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.vmeta h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:5px 0 7px}
.vis{font-size:13.5px;color:var(--ink-2);margin:0 0 10px}
.vnotice{font-size:12.5px;line-height:1.55;color:var(--amber);background:var(--amber-soft);
  border-radius:9px;padding:10px 12px;margin:0 0 9px}
.vwho{font-size:12.5px;color:var(--ink-2);margin:0}
.vwho span{font-weight:700;color:var(--ink-3);margin-right:5px}
.vchaps{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 10px}
.vchip{font:inherit;font-size:12px;padding:6px 12px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2)}
.vchip:hover{border-color:var(--champagne)}
.vchip i{font-style:normal;font-family:var(--serif);margin-right:7px;color:var(--ink-3)}
.vscript{display:grid;gap:4px}
.vch{padding:12px 14px;border-radius:var(--r);border:1px solid transparent}
.vch.lit{border-color:var(--champagne);background:var(--panel-2)}
.vch h4{display:flex;align-items:center;gap:9px;margin:0 0 8px}
.vchn{width:19px;height:19px;border-radius:50%;background:var(--espresso);color:#fff;
  font-family:var(--serif);font-size:11px;display:flex;align-items:center;justify-content:center}
.vcard{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0;max-width:72ch}
.vturns{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.vt{display:grid;grid-template-columns:76px 1fr;gap:11px;align-items:baseline}
.vtwho{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.vt.cl .vtwho{color:var(--champagne)}
.vtline{font-family:var(--serif);font-size:15px;line-height:1.5}
.vt.cl .vtline{color:var(--ink)}
.vt.pr .vtline{color:var(--ink-2)}
.vacc{margin-top:12px;max-width:72ch}
@media(max-width:700px){ .vt{grid-template-columns:1fr;gap:1px} }

/* The arc. No axis, no scale, no number — a direction and eight marks. */
.arc{margin-top:14px}
.arcsub{max-width:72ch;margin:0 0 12px}
.arcsvg{width:100%;height:auto;max-height:200px;display:block;overflow:visible}
.arczero{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.arcline{fill:none;stroke:var(--champagne);stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:arcdraw 1800ms ease-out forwards}
@keyframes arcdraw{to{stroke-dashoffset:0}}
.arcpt circle{fill:var(--panel);stroke:var(--ink-3);stroke-width:2;opacity:0;
  animation:arcpop 300ms ease-out forwards;animation-delay:calc(260ms + var(--n) * 190ms)}
.arcpt.up circle{stroke:var(--sage)}
.arcpt.down circle{stroke:var(--rose);fill:var(--rose-soft)}
.arcpt:focus{outline:none}
.arcpt:focus circle{stroke-width:3;r:7}
@keyframes arcpop{to{opacity:1}}
.arclist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.arclist li{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:baseline;
  padding:8px 0 8px 11px;border-left:2px solid var(--line)}
.arclist li.up{border-left-color:var(--sage)}
.arclist li.down{border-left-color:var(--rose)}
.al-ph{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.al-ch{font-size:13.5px;color:var(--ink)}
.al-did{grid-column:2;font-family:var(--serif);font-size:14px;color:var(--ink-2);margin-top:3px}
@media(max-width:700px){ .arclist li{grid-template-columns:1fr;gap:2px} .al-did{grid-column:1} }
@media(prefers-reduced-motion:reduce){
  .arcline{animation:none;stroke-dashoffset:0}
  .arcpt circle{animation:none;opacity:1}
}

/* ===========================================================================
   WHAT SHE CAN NOW DO — the learning-evidence panel.

   Deliberately quieter than the surfaces around it. A verdict here is a
   reading and not a reward, so there is no badge shape, no fill behind the
   positive state and no colour on the negative one; the only chromatic signal
   is a 3px rail on the left of a card, and "not yet shown" is the same grey
   as the body text rather than a red that would read as a telling-off.
   =========================================================================== */
.evsec{margin:28px 0 10px}
/* `.secthead` sets white-space:nowrap for its rule-line layout, which is right
   for two words and two pixels too wide for "What you can now do that you
   could not" on a 390px phone. Same correction the tradecraft panel needed. */
.evsec .secthead{flex-wrap:wrap}
.evsec .secthead h2{min-width:0;white-space:normal;overflow-wrap:anywhere}
.evstages{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
@media(min-width:760px){.evstages{grid-template-columns:repeat(4,1fr)}}
.evs{background:var(--bg-1,#fff);padding:12px 14px;display:grid;grid-template-columns:22px minmax(0,1fr);
  gap:10px;align-items:start;opacity:.5}
.evs.on{opacity:1}
.evs-n{font:600 11px/22px ui-monospace,Menlo,monospace;text-align:center;color:#A07E3C;
  border:1px solid var(--line-2);border-radius:50%;height:22px}
.evs-b{min-width:0}
.evs-b b{display:block;font-weight:600;font-size:13.5px;margin-bottom:2px}
.evs-b span{display:block;font-size:12px;color:var(--muted,#6B6158);line-height:1.45}
.evcs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.evc{border:1px solid var(--line-2);border-left:3px solid var(--line-2);border-radius:5px;
  padding:14px 16px;background:var(--bg-1,#fff)}
.evc.yes{border-left-color:#47725D}
.evc.part{border-left-color:#A07E3C}
.evc-head{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:11px;align-items:start}
.evc-n{font:600 11px/22px ui-monospace,Menlo,monospace;text-align:center;color:#A07E3C}
.evc-nm{min-width:0}
.evc-nm b{display:block;font-size:15px}
.evc-is{display:block;font-size:12.5px;color:var(--muted,#6B6158);line-height:1.5;margin-top:3px}
.evc-v{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6B6158);
  white-space:nowrap;padding-top:4px}
.evc.yes .evc-v{color:#47725D}
.evc-m{font:12px/1.5 ui-monospace,Menlo,monospace;color:var(--muted,#6B6158);margin:9px 0 0 35px}
.evq{margin:8px 0 0 35px;font-size:13px;line-height:1.55;display:grid;gap:2px}
.evq-k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#6B6158)}
.evq-t{overflow-wrap:anywhere}
.evlimits{margin-top:16px;padding:14px 16px;border:1px solid var(--line-2);border-radius:5px}
.evlimits p{margin:0 0 8px;font-size:13px;line-height:1.55;max-width:70ch}
.evlimits p:last-child{margin-bottom:0}
@media(max-width:700px){
  .evc-head{grid-template-columns:24px minmax(0,1fr)}
  .evc-v{grid-column:2;padding-top:6px}
  .evc-m,.evq{margin-left:0}
}

/* ===========================================================================
   HER FIRST TWENTY MINUTES.

   The only panel in the product that is allowed to be the first thing on the
   screen, and it earns that by disappearing: the server stops serving it the
   moment she finishes a consultation. Three rows, each carrying the reason it
   is there, and the honest line about her own environment set apart with a
   rule rather than a warning colour — it is information, not an alarm.
   =========================================================================== */
.f2sec{border:1px solid var(--line-2);border-radius:8px;padding:22px 22px 18px;margin:0 0 22px;
  background:var(--bg-1,#fff)}
.f2-head{max-width:70ch}
.f2-kick{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#A07E3C;
  font-weight:600;margin-bottom:9px}
.f2sec h2{font-size:clamp(19px,2.4vw,23px);line-height:1.3;margin:0 0 9px;font-weight:500}
.f2-obj{margin:0;color:var(--muted,#6B6158);font-size:14.5px;line-height:1.6}
/* ---------------------------------------------------------------------------
   THE PLAN AS A SEQUENCE, NOT AS THREE EQUAL CARDS.
   ---------------------------------------------------------------------------
   Three identical bordered rows with three identical buttons said "pick one".
   The order is the teaching, so the order is now what the screen shows: a
   hairline runs down behind the numerals and joins the three, the step she is
   on is the only one that is raised and the only one that carries a button,
   the steps behind her are ticked and set back, and the ones ahead are legible
   but quiet. Nothing is hidden and nothing moves on its own — the difference
   is weight, which is the only thing a premium surface can spend here.
   ------------------------------------------------------------------------ */
.f2-prog{display:flex;align-items:center;gap:11px;margin:16px 0 0;font-size:12px;
  letter-spacing:.04em;color:var(--muted,#6B6158)}
.f2-bar{flex:0 0 108px;height:3px;border-radius:2px;background:var(--line-2);overflow:hidden}
.f2-bar i{display:block;height:100%;background:#A07E3C;border-radius:2px;
  transition:width .45s cubic-bezier(.22,.61,.36,1)}
.f2-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;position:relative}
/* The rule that makes three rows one sequence. Behind the numerals, stopping
   short of the first and last so it reads as a spine rather than a border. */
.f2-steps::before{content:"";position:absolute;left:13px;top:26px;bottom:26px;width:1px;
  background:var(--line-2)}
.f2-step{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:13px;align-items:center;
  border:1px solid transparent;border-radius:6px;padding:12px 14px;position:relative;
  background:transparent;transition:background .25s ease,border-color .25s ease}
.f2-n{font:600 11px/24px ui-monospace,Menlo,monospace;text-align:center;color:#A07E3C;
  border:1px solid var(--line-2);border-radius:50%;height:24px;position:relative;
  background:var(--bg-1,#fff)}
/* WHERE SHE IS. One raised row, one button, a gold edge down its left side. */
.f2-step[data-state="now"]{background:var(--bg-1,#fff);border-color:var(--line-2);
  box-shadow:0 1px 2px rgba(31,26,21,.05),0 6px 18px -12px rgba(31,26,21,.3)}
.f2-step[data-state="now"]::after{content:"";position:absolute;left:0;top:10px;bottom:10px;
  width:2px;border-radius:2px;background:#A07E3C}
.f2-step[data-state="now"] .f2-n{border-color:#A07E3C;background:#A07E3C;color:#fff}
/* BEHIND HER. Ticked, set back, and the title no longer competing for weight. */
.f2-step[data-state="done"] .f2-n{border-color:#A07E3C;color:#A07E3C}
.f2-step[data-state="done"] .f2-b b{font-weight:500;color:var(--muted,#6B6158)}
.f2-step[data-state="done"] .f2-why{opacity:.72}
.f2-done{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#A07E3C;white-space:nowrap}
/* AHEAD OF HER. Legible, quiet, nothing to press. */
.f2-step[data-state="later"] .f2-b b{color:var(--muted,#6B6158)}
.f2-step[data-state="later"] .f2-why{opacity:.8}
@media(prefers-reduced-motion:reduce){
  .f2-bar i{transition:none}
  .f2-step{transition:none}
}
.f2-step.has-face{grid-template-columns:26px 44px minmax(0,1fr) auto}
.f2-face{width:44px;height:44px;border-radius:5px;overflow:hidden;display:block;
  background:var(--line-2)}
.f2-face img,.f2-face svg{display:block;width:100%;height:100%;object-fit:cover}
.f2-b{min-width:0;display:grid;gap:2px}
.f2-k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#6B6158)}
.f2-b b{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.f2-why{font-size:13px;color:var(--muted,#6B6158);line-height:1.5}
.f2-go{white-space:nowrap}
.f2-standing{margin:16px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted,#6B6158);max-width:70ch}
.f2-honest{margin:12px 0 0;padding:12px 14px;border-left:3px solid #A07E3C;border-radius:0 4px 4px 0;
  font-size:13.5px;line-height:1.6;max-width:70ch;background:rgba(160,126,60,.06)}
.f2-then{margin:14px 0 0;font-size:13.5px;line-height:1.6;max-width:70ch}
.f2-then .f2-k{display:inline;margin-right:6px}
@media(max-width:700px){
  .f2sec{padding:18px 16px 16px}
  .f2-step{grid-template-columns:26px minmax(0,1fr)}
  .f2-step.has-face{grid-template-columns:26px 40px minmax(0,1fr)}
  .f2-face{width:40px;height:40px}
  .f2-go{grid-column:2;justify-self:start;margin-top:6px}
  .f2-done{grid-column:2;justify-self:start;margin-top:4px}
  .f2-prog{flex-wrap:wrap;gap:8px}
}

/* ===========================================================================
   WITH YOUR NEXT CUSTOMER — the last thing on a lesson.

   Set apart from the lesson body by paper rather than by a box: this is what
   she leaves with, and a card with a border around it reads as an aside. The
   sentence is set in the display face at reading size, because it is speech
   and she is going to say it out loud.
   =========================================================================== */
.tmw{margin:30px 0 8px;padding:22px 24px;border-top:2px solid #A07E3C;
  background:linear-gradient(180deg,rgba(160,126,60,.07),rgba(160,126,60,0));border-radius:0 0 6px 6px}
.tmw-k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8A6A2F;
  font-weight:600;margin-bottom:10px}
.tmw-move{margin:0 0 14px;font-size:17px;line-height:1.5;max-width:62ch;font-weight:500}
.tmw-say{margin:0 0 12px;padding:0 0 0 16px;border-left:2px solid rgba(160,126,60,.5);
  font-family:Marcellus,Georgia,serif;font-size:19px;line-height:1.55;max-width:60ch}
.tmw-does{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--muted,#6B6158);max-width:66ch}
.tmw-note{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted,#6B6158);max-width:66ch;opacity:.85}
@media(max-width:700px){ .tmw{padding:18px 16px} .tmw-say{font-size:17px} }

/* ==========================================================================
   SESSION ONE — THE BEGINNER'S FIRST TEN MINUTES
   ==========================================================================
   A different surface from the rest of the Academy on purpose. Everything
   else here is a page of panels on porcelain; this is one dark stage with one
   thing on it, because a woman with ten minutes before her shift should never
   have to decide where to look.

   THE RULES THIS SHEET WORKS TO

   1 · ONE THING PER SCREEN, and the thing is large. The customer's sentence
       is set at display size in the serif, because it is the only sentence on
       the screen that matters and the product should look like it knows that.
   2 · MOTION THAT MEANS SOMETHING. Four animations, each attached to an event
       a person can name: the stage arriving, her sentence landing, her
       behaviour appearing after the choice, and the secret opening. Nothing
       loops, nothing bounces, and every one of them is inside
       prefers-reduced-motion.
   3 · THE DARK STAGE IS FOR THE ROOM, NOT FOR THE WHOLE PRODUCT. It ends when
       the session ends.
   4 · IT WORKS AT 360px. Every rule below starts single-column and earns its
       columns at 760px, which is the width a phone in a shop actually has.
   ========================================================================== */

.s1wrap{
  --stage:#1C1713; --stage-2:#241E19; --stage-3:#2E2620;
  --on-stage:#F3EDE4; --on-stage-2:#C4B8A8; --on-stage-3:#8E8173;
  --stage-line:#3A3029;
  position:relative;margin:-10px -18px 0;padding:18px 18px 56px;
  min-height:calc(100vh - 120px);
  background:
    radial-gradient(130% 70% at 50% -10%, #332A23 0%, transparent 62%),
    linear-gradient(180deg,var(--stage-2) 0%,var(--stage) 100%);
  color:var(--on-stage);
  animation:s1in .5s cubic-bezier(.2,.7,.3,1) both;
}
@media(min-width:820px){ .s1wrap{margin:-10px -28px 0;padding:26px 28px 72px} }
@keyframes s1in{from{opacity:0}to{opacity:1}}

/* The stage has its own gutters so one measure governs every screen: a line
   of prose on a 1180px page is unreadable, and this is all prose. */
.s1wrap > section, .s1wrap > .s1rail, .s1wrap > header{
  max-width:720px;margin-left:auto;margin-right:auto;
}

/* ---------- the bar across the top ---------- */
.s1top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.s1id{display:flex;flex-direction:column;gap:2px;min-width:0}
.s1kick{font-family:var(--serif);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.s1job{font-size:12px;color:var(--on-stage-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s1leave{margin-left:auto;background:transparent;border-color:var(--stage-line);color:var(--on-stage-2);
  padding:7px 14px;font-size:12px}
.s1leave:hover{border-color:var(--on-stage-3);color:var(--on-stage)}

/* ---------- the eight steps ---------- */
.s1rail{display:flex;align-items:center;gap:14px;margin:0 auto 26px;padding-bottom:16px;
  border-bottom:1px solid var(--stage-line)}
.s1dots{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;flex:1;min-width:0}
.s1dots li{display:flex;align-items:center;gap:6px;flex:0 0 auto;position:relative;padding-right:14px}
.s1dots li::after{content:"";position:absolute;right:4px;top:50%;width:6px;height:1px;
  background:var(--stage-line)}
.s1dots li:last-child{padding-right:0}
.s1dots li:last-child::after{display:none}
.s1dot{width:7px;height:7px;border-radius:50%;background:var(--stage-3);
  border:1px solid var(--stage-line);transition:.25s}
.s1dots li.done .s1dot{background:var(--champagne);border-color:var(--champagne)}
.s1dots li.on .s1dot{background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,164,92,.17)}
/* The labels are for the step she is on and the ones she has finished. Eight
   labels at once is a menu, and this is not a menu. */
.s1dl{font-size:11px;letter-spacing:.04em;color:var(--on-stage-3);display:none}
.s1dots li.on .s1dl{display:inline;color:var(--gold)}
@media(min-width:760px){
  .s1dl{display:inline}
  .s1dots li.done .s1dl{color:var(--on-stage-3)}
  .s1dots li{padding-right:18px}
}
.s1left{flex:0 0 auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-stage-3)}

/* ---------- 1 · welcome ---------- */
.s1hero{padding:22px 0 10px;text-align:left}
.s1hero h1{font-size:34px;line-height:1.08;color:var(--on-stage);margin-bottom:14px}
@media(min-width:760px){ .s1hero h1{font-size:46px} .s1hero{padding:40px 0 10px} }
.s1lead{font-size:16px;color:var(--on-stage-2);max-width:40em;margin-bottom:22px}
.s1curious{border-left:2px solid var(--gold);padding:4px 0 4px 18px;margin:0 0 26px}
.s1curious p{font-family:var(--serif);font-size:19px;line-height:1.35;color:var(--on-stage);margin:0}
@media(min-width:760px){ .s1curious p{font-size:23px} }
.s1meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.s1meta span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-stage-3);
  border:1px solid var(--stage-line);border-radius:999px;padding:6px 13px}
.s1honest{font-size:12px;color:var(--on-stage-3);max-width:46em;margin:14px 0 0;line-height:1.5}

/* Every forward action on the stage is the same button in the same place. */
.s1go{margin-top:6px}
.s1wrap button.primary{background:var(--gold);border-color:var(--gold);color:#211B16}
.s1wrap button.primary:hover:not(:disabled){background:#D7B470;border-color:#D7B470}
.s1wrap button.wi-alt{background:transparent;border-color:var(--stage-line);color:var(--on-stage-2)}
.s1wrap button.wi-alt:hover:not(:disabled){border-color:var(--on-stage-3);color:var(--on-stage)}
.s1wrap button.ghost{color:var(--on-stage-2)}

/* ---------- the woman ---------- */
.s1who{display:flex;gap:18px;align-items:flex-start;margin-bottom:24px}
.s1face{margin:0;flex:0 0 auto;line-height:0}
.s1face.drawn svg{border-radius:var(--r);overflow:hidden;filter:saturate(.85) brightness(.95)}
.s1face.has-photo img{width:160px;height:auto;border-radius:var(--r);display:block;
  filter:saturate(.92)}
@media(min-width:760px){ .s1face.has-photo img{width:220px} }
.s1face figcaption{font-size:10.5px;color:var(--on-stage-3);margin-top:7px;max-width:15em;line-height:1.4}
.s1whotext{min-width:0}
.s1whotext h2{font-size:26px;color:var(--on-stage);margin:4px 0 8px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.s1age{font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--on-stage-3)}
.s1where{font-size:14.5px;color:var(--on-stage-2);margin:0}
.s1k{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);font-weight:700}
.s1dr{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  background:rgba(201,164,92,.13);border:1px solid rgba(201,164,92,.3);
  border-radius:999px;padding:2px 8px;font-weight:700;letter-spacing:.12em}

/* ---------- 2 · what she can see ---------- */
.s1sees{border-top:1px solid var(--stage-line);padding-top:16px;margin-bottom:24px}
.s1sees ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:11px}
.s1sees li{position:relative;padding-left:20px;font-size:14.5px;color:var(--on-stage-2);line-height:1.5}
.s1sees li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--champagne)}

/* ---------- her sentence, which is the loudest thing on the stage ---------- */
.s1q{font-family:var(--serif);font-size:19px;line-height:1.42;color:var(--on-stage);
  border:0;margin:0 0 22px;padding:0 0 0 20px;position:relative;font-style:normal}
.s1q::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:2px;
  background:linear-gradient(180deg,var(--gold),transparent)}
.s1q.big{font-size:23px;line-height:1.34;animation:s1land .62s cubic-bezier(.2,.7,.3,1) both}
@media(min-width:760px){ .s1q.big{font-size:30px} }
@keyframes s1land{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---------- 3 · the three moves ---------- */
.s1momenthead{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px}
.s1momenthead .s1k{margin-bottom:8px}
.s1notice{font-size:14.5px;color:var(--gold);border-top:1px solid var(--stage-line);
  padding-top:16px;margin-bottom:20px;max-width:44em}
.s1notice.retrying{color:var(--on-stage-2)}
.s1prompt{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--on-stage);margin-bottom:16px}
.s1moves{display:grid;gap:11px;margin-bottom:26px}
.s1move{display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  background:rgba(243,237,228,.035);border:1px solid var(--stage-line);border-radius:var(--r);
  padding:17px 19px;color:var(--on-stage);transition:.18s}
.s1move:hover:not(:disabled){background:rgba(243,237,228,.075);border-color:var(--champagne);
  transform:translateY(-1px)}
.s1ml{font-size:15px;line-height:1.42;flex:1}
.s1move.tried{opacity:.52}
.s1tried{flex:0 0 auto;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-stage-3);border:1px solid var(--stage-line);border-radius:999px;padding:3px 9px}

/* ---------- her own sentence ---------- */
.s1own{border-top:1px solid var(--stage-line);padding-top:20px}
.s1own label{color:var(--on-stage-3);font-size:12px;font-weight:600;letter-spacing:.02em}
.s1own textarea{background:rgba(243,237,228,.04);border-color:var(--stage-line);color:var(--on-stage);
  min-height:66px;font-size:14.5px}
.s1own textarea::placeholder{color:var(--on-stage-3)}
.s1own textarea:focus{outline:2px solid rgba(201,164,92,.28);border-color:var(--champagne)}
.s1own > button{margin-top:9px}
.s1prop:not(:empty){margin-top:16px;border:1px solid var(--stage-line);border-radius:var(--r);
  padding:16px 18px;background:rgba(243,237,228,.03)}
.s1psay{font-size:14px;color:var(--on-stage-2);margin-bottom:12px}
.s1pnote{font-size:12.5px;color:var(--on-stage-3)}
.s1plist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.s1plist li{display:grid;gap:5px}
.s1pick{text-align:left;background:rgba(243,237,228,.05);border:1px solid var(--stage-line);
  border-radius:10px;padding:12px 15px;color:var(--on-stage)}
.s1pick:hover{border-color:var(--champagne)}
.s1pwhy{font-size:11.5px;color:var(--on-stage-3);padding-left:4px}
.s1pfoot{font-size:11.5px;color:var(--on-stage-3);margin:13px 0 0}

/* ---------- 4 · what she did ---------- */
.s1react{display:grid;gap:22px;margin-bottom:26px;animation:s1land .5s cubic-bezier(.2,.7,.3,1) both}
.s1said blockquote{margin:9px 0 0;padding:15px 18px;border-radius:var(--r);
  background:rgba(243,237,228,.045);border:1px solid var(--stage-line);
  font-size:15px;line-height:1.55;color:var(--on-stage-2)}
.s1did{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
.s1did li{font-family:var(--serif);font-size:19px;line-height:1.4;color:var(--on-stage)}
@media(min-width:760px){ .s1did li{font-size:22px} }
.s1next blockquote{margin-top:10px}
.s1afterroom{display:grid;gap:18px}

/* ---------- the boundary, never folded ---------- */
.s1guard{border-left:2px solid var(--rose);background:rgba(163,77,83,.1);
  border-radius:0 var(--r) var(--r) 0;padding:15px 18px}
.s1guard .s1k{color:#E3A0A4}
.s1guard p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--on-stage-2)}

/* ---------- 5 · the secret ---------- */
.s1secret{padding:8px 0 4px;animation:s1open .6s cubic-bezier(.2,.7,.3,1) both}
@keyframes s1open{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.s1big{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.26;
  color:var(--on-stage);margin:12px 0 16px}
@media(min-width:760px){ .s1big{font-size:33px} }
.s1because{font-size:15px;line-height:1.6;color:var(--on-stage-2);max-width:42em}

.s1coach{border-top:1px solid var(--stage-line);padding-top:22px;margin-top:22px;display:grid;gap:16px}
/* THE MENTOR IS NOT A PERSON, AND THE DESIGN SAYS SO.
   No portrait, no name, no title, no claimed experience — a mark and the
   product's own name. The brief is explicit that the founder must not be
   impersonated and no credentials invented, and a warm face with a name
   beside this prose would be exactly that. */
.s1mentor{display:flex;align-items:center;gap:10px}
.s1mk{font-family:var(--serif);font-size:12px;letter-spacing:.3em;color:var(--gold);
  position:relative;padding-left:26px}
.s1mk::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:15px;height:19px;border:1px solid var(--gold);border-radius:50% 50% 48% 48%;opacity:.75}
.s1coachline{font-size:16.5px;line-height:1.6;color:var(--on-stage);margin:0;max-width:42em}
.s1method{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;margin:0}
.s1method.yes{color:#8FBFA4}
.s1method.no{color:var(--on-stage-3)}
.s1sounds blockquote{margin:9px 0 0;padding:16px 19px;border-radius:var(--r);
  background:rgba(201,164,92,.09);border:1px solid rgba(201,164,92,.26);
  font-family:var(--serif);font-size:16.5px;line-height:1.52;color:var(--on-stage)}
.s1onward{margin-top:26px}

/* ---------- the full reading ---------- */
.s1deep{border:1px solid var(--stage-line);border-radius:var(--r);background:rgba(243,237,228,.025)}
.s1deep summary{padding:14px 18px;cursor:pointer;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--on-stage-2);list-style:none}
.s1deep summary::-webkit-details-marker{display:none}
.s1deep summary::before{content:"+";display:inline-block;width:1.2em;color:var(--gold);font-weight:400;font-size:15px}
.s1deep[open] summary::before{content:"–"}
.s1deep summary:hover{color:var(--on-stage)}
.s1deepbody{padding:4px 18px 20px;border-top:1px solid var(--stage-line);display:grid;gap:14px}
.s1deepbody .blk{display:grid;gap:4px}
.s1deepbody .blk .k{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--on-stage-3);font-weight:700}
.s1deepbody .blk .v{font-size:14px;line-height:1.6;color:var(--on-stage-2)}
.s1dlab{font-size:13px;color:var(--on-stage-2);padding-top:14px}
.s1dlab b{color:var(--on-stage)}
.s1deltas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.s1deltas li{font-size:11.5px;letter-spacing:.04em;border:1px solid var(--stage-line);
  border-radius:999px;padding:5px 11px;color:var(--on-stage-3)}
.s1deltas li.up{color:#8FBFA4;border-color:rgba(143,191,164,.35)}
.s1deltas li.down{color:#E3A0A4;border-color:rgba(227,160,164,.35)}
.s1dfoot{font-size:11px;color:var(--on-stage-3);border-top:1px solid var(--stage-line);padding-top:12px}
.s1deep .vd{font-size:10px}

/* ---------- 8 · what she keeps ---------- */
.s1close{display:grid;gap:26px;padding-top:8px;animation:s1open .6s cubic-bezier(.2,.7,.3,1) both}
.s1evid,.s1shift,.s1nextup,.s1miles{display:grid;gap:10px}
.s1table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:4px}
.s1table th{text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-stage-3);font-weight:700;padding:0 12px 9px 0;border-bottom:1px solid var(--stage-line)}
.s1table td{padding:13px 12px 13px 0;border-bottom:1px solid var(--stage-line);
  vertical-align:top;color:var(--on-stage-2);line-height:1.5}
.s1table .s1cwho{color:var(--on-stage);font-weight:600;white-space:nowrap}
.s1evidnote{font-size:12px;color:var(--on-stage-3);margin:4px 0 0;line-height:1.55}
.s1shift p{font-size:16.5px;line-height:1.58;color:var(--on-stage);margin:0;max-width:40em}
.s1nextup p{font-size:14.5px;color:var(--on-stage-2);margin:0}
.s1mlist{list-style:none;counter-reset:ms;margin:0;padding:0;display:grid;gap:9px}
.s1mlist li{counter-increment:ms;display:grid;gap:2px;padding-left:30px;position:relative;opacity:.46}
.s1mlist li::before{content:counter(ms);position:absolute;left:0;top:0;width:20px;height:20px;
  border:1px solid var(--stage-line);border-radius:50%;font-size:10.5px;display:grid;place-items:center;
  color:var(--on-stage-3)}
.s1mlist li.on{opacity:1}
.s1mlist li.on::before{border-color:var(--gold);color:var(--gold)}
.s1mlist b{font-size:14.5px;color:var(--on-stage);font-weight:600}
.s1mlist span{font-size:12.5px;color:var(--on-stage-3)}
.s1closeacts{display:flex;flex-wrap:wrap;gap:11px}

/* ==========================================================================
   THE INVITATION, on the Academy's own porcelain home screen
   ========================================================================== */
.s1offer{position:relative;overflow:hidden;border-radius:var(--r-lg);margin-bottom:18px;
  background:radial-gradient(120% 120% at 100% 0%, #3A3029 0%, #241E19 58%);
  color:#F3EDE4;box-shadow:var(--shadow)}
.s1offer::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(201,164,92,.13) 50%,transparent 58%)}
.s1obody{position:relative;z-index:1;padding:26px 22px}
@media(min-width:760px){ .s1obody{padding:36px 34px} }
.s1okick{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}
.s1offer h2{font-size:25px;color:#F3EDE4;margin:10px 0 8px}
@media(min-width:760px){ .s1offer h2{font-size:31px} }
.s1offer p{font-size:14.5px;color:#C4B8A8;max-width:40em;margin:0 0 18px}
.s1oask{font-size:12px!important;color:#8E8173!important;display:grid;gap:3px;margin-bottom:12px!important}
.s1oask .muted{color:#8E8173;font-size:11.5px}
.s1orow{display:grid;gap:10px}
@media(min-width:620px){ .s1orow{grid-template-columns:repeat(3,1fr)} }
.s1otrack{text-align:left;display:grid;gap:4px;background:rgba(243,237,228,.055);
  border:1px solid #3A3029;border-radius:var(--r);padding:15px 17px;color:#F3EDE4}
.s1otrack:hover{background:rgba(243,237,228,.1);border-color:var(--champagne)}
.s1otrack b{font-size:14px;font-weight:600}
.s1otrack span{font-size:12px;color:#C4B8A8;line-height:1.45}
.s1otrack.primary{background:var(--gold);border-color:var(--gold);color:#211B16;
  grid-column:1/-1;text-transform:none;letter-spacing:0;border-radius:var(--r)}
.s1otrack.primary span{color:rgba(33,27,22,.72)}
.s1otrack.primary:hover{background:#D7B470;border-color:#D7B470}

/* ==========================================================================
   AND NONE OF IT MOVES FOR SOMEBODY WHO HAS ASKED FOR THAT
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  .s1wrap,.s1q.big,.s1react,.s1secret,.s1close{animation:none}
  .s1move:hover:not(:disabled){transform:none}
  .s1dot{transition:none}
}
.s1dverdict{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:14px}
.s1dverdict .k{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--on-stage-3);font-weight:700}
.s1oelse{margin-top:12px;padding-left:0;font-size:12px;color:#8E8173;text-decoration:underline;
  text-decoration-color:#3A3029;text-underline-offset:3px}
.s1oelse:hover{color:#C4B8A8}

/* The product steps out of the way while she is inside the session. */
body.in-session-one .tabs,
body.in-session-one header.top #hdr-desc,
body.in-session-one header.top .whoami,
body.in-session-one header.top #hdr-out{display:none}
body.in-session-one header.top{border-bottom:0}
body.in-session-one .s1wrap{margin-top:0;min-height:calc(100vh - 62px)}

/* The eight steps scroll rather than collide with the clock beside them. */
.s1dots{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px}
.s1dots::-webkit-scrollbar{display:none}
.s1rail{gap:18px}
.s1left{white-space:nowrap}

/* ---------- the consent screen, and the review ---------- */
.s1consent{padding:18px 0 10px;display:grid;gap:20px}
.s1consent h1{font-size:28px;line-height:1.14;color:var(--on-stage);margin:0}
@media(min-width:760px){ .s1consent h1{font-size:36px} .s1consent{padding:32px 0 10px} }
.s1kept{border:1px solid var(--stage-line);border-radius:var(--r);padding:18px 20px;
  background:rgba(243,237,228,.03)}
.s1kept ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:11px}
.s1kept li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.52;color:var(--on-stage)}
.s1kept li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:1px;background:var(--gold)}
.s1promises{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.s1promises li{font-size:13.5px;line-height:1.5;color:var(--on-stage-2);padding-left:22px;position:relative}
.s1promises li::before{content:"";position:absolute;left:2px;top:.52em;width:6px;height:6px;
  border-radius:50%;border:1px solid var(--on-stage-3)}
.s1consentacts{display:flex;flex-wrap:wrap;gap:11px}

.s1review{display:grid;gap:26px;padding-top:8px;animation:s1open .5s cubic-bezier(.2,.7,.3,1) both}
.s1review h2{font-size:25px;color:var(--on-stage);margin:10px 0 0}
@media(min-width:760px){ .s1review h2{font-size:31px} }
.s1q1{display:grid;gap:10px}
.s1q1 h3{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--on-stage);margin:0}
.s1hint{font-size:12.5px;color:var(--on-stage-3);margin:0}
.s1opts{display:grid;gap:9px}
@media(min-width:620px){ .s1opts{grid-template-columns:repeat(3,1fr)} }
.s1opt{text-align:left;background:rgba(243,237,228,.035);border:1px solid var(--stage-line);
  border-radius:var(--r);padding:13px 15px;color:var(--on-stage);font-size:14px;line-height:1.4}
.s1opt:hover{border-color:var(--champagne);background:rgba(243,237,228,.07)}
.s1opt.on{border-color:var(--gold);background:rgba(201,164,92,.13);color:var(--on-stage)}
.s1review textarea{background:rgba(243,237,228,.04);border-color:var(--stage-line);
  color:var(--on-stage);font-size:14.5px}
.s1review textarea::placeholder{color:var(--on-stage-3)}
.s1review textarea:focus{outline:2px solid rgba(201,164,92,.28);border-color:var(--champagne)}
@media(prefers-reduced-motion:reduce){ .s1review{animation:none} }

/* ==========================================================================
   THE PILOT REVIEW — four columns that must not blend
   ==========================================================================
   The separation is the design. Each column states its own standing in the
   same weight as its content, the simulation column is visually the quietest
   of the four, and the one column about her actual work is the one with a
   gold edge — because it is the only one worth acting on and the only one a
   human has to write.
   ========================================================================== */
.plpick{margin:0 0 16px;display:grid;gap:8px}
.plgrid{display:grid;gap:14px;margin-bottom:18px}
@media(min-width:900px){ .plgrid{grid-template-columns:repeat(2,1fr)} }
.plcol{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;display:grid;gap:14px;align-content:start}
.plcol header{display:grid;gap:7px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.plcol h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:0}
.plstand{font-size:11.5px;line-height:1.5;color:var(--ink-3);margin:0}
.plstand span{display:inline-block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink-4);margin-right:6px}
.pl-inferred{background:var(--panel-2)}
.pl-observed{border-color:var(--champagne);box-shadow:inset 3px 0 0 var(--gold)}
.plfacts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plfacts li{font-size:14px;color:var(--ink-2)}
.plfacts b{font-size:17px;color:var(--ink);font-family:var(--serif);font-weight:400;margin-right:6px}
.plbig{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.plbig b{font-family:var(--serif);font-weight:400;font-size:34px;color:var(--ink)}
.plbig span{font-size:13px;color:var(--ink-3)}
.plnote{font-size:13px;line-height:1.55;color:var(--ink-3);margin:0}
.plentry{display:grid;gap:8px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.plentry:last-of-type{border-bottom:0}
.plqa{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.plqa li{display:grid;gap:2px}
.plqa span{font-size:11.5px;color:var(--ink-3)}
.plqa b{font-size:14px;font-weight:600;color:var(--ink)}
.plsaid blockquote{margin:6px 0 0;padding:12px 15px;border-radius:var(--r);
  background:var(--panel-2);border:1px solid var(--line-2);font-size:14px;line-height:1.55}
.plentry blockquote{margin:0;padding:12px 15px;border-radius:var(--r);background:var(--gold-soft);
  border:1px solid rgba(201,164,92,.35);font-size:14.5px;line-height:1.55}
.plsaid .s1k,.plentry .s1k{color:var(--champagne)}
.plobsform{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--line-2)}
.plprompt{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 4px}
.plobsform input{max-width:90px}
.plmsg:not(:empty){font-size:12.5px;color:var(--rose);padding-top:6px}
.plcaveat{background:var(--amber-soft);border:1px solid rgba(138,90,18,.22);border-radius:var(--r-lg);
  padding:20px 22px}
.plcaveat h4{color:var(--amber);margin-bottom:8px}
.plcaveat p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0;max-width:62em}

/* ==========================================================================
   PACING — motion that enforces a reading order, and nothing else
   ==========================================================================
   One rule, used in three places, and every use has a reason a learner could
   be told: her sentence, then what her body did, then what she said next —
   because reading backwards from the dialogue is the habit this product
   exists to break. The delay is set per element with --d.

   Nothing here loops, nothing moves on hover, and under reduced motion every
   one of them is simply present, with the ordering carried by the layout.
   ========================================================================== */
.s1beat{animation:s1beat .52s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes s1beat{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
/* The customer's reply gets a longer, slower arrival than anything else on
   the screen, because it is the only part she has to sit with. */
.s1next.s1beat{animation-duration:.8s}
.s1next .s1q{font-size:21px}
@media(min-width:760px){ .s1next .s1q{font-size:25px} }

@media(prefers-reduced-motion:reduce){
  .s1beat{animation:none}
}

/* The footing, on the same screen as the choice. Quieter than the list of
   what is kept, because she needs that first — but present, and not folded. */
.s1basis{border-top:1px solid var(--stage-line);padding-top:18px;display:grid;gap:12px}
.s1basis dl{margin:0;display:grid;gap:11px}
@media(min-width:760px){ .s1basis dl{grid-template-columns:auto 1fr;gap:11px 22px;align-items:baseline} }
.s1basis dt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-stage-3);
  font-weight:700;margin:0}
.s1basis dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--on-stage-2)}
.s1bnote{font-size:12.5px;line-height:1.55;color:var(--on-stage-3);margin:0;
  border-left:2px solid var(--stage-line);padding-left:14px}

/* ==========================================================================
   THE TEN STAGES — the path screen (see renderLadderPath in public/app.js)
   --------------------------------------------------------------------------
   A map, not a dashboard. The spine runs down the left so the ten read as one
   route rather than ten cards; a stage that is reached is gold and a stage not
   started is simply quiet — there is no red, no lock and no warning anywhere,
   because the order is advice and every stage opens from the first day.
   ========================================================================== */
.lpwrap{max-width:760px;margin:0 auto;padding:0 0 64px}
.lptop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.lpcount{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.lphero{padding:10px 0 26px;border-bottom:1px solid var(--line)}
.lphero h1{font-size:28px;line-height:1.18;margin:6px 0 10px}
@media(min-width:760px){ .lphero h1{font-size:34px} }
.lplead{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0;max-width:58ch}
.lpwhere{margin:16px 0 0;font-size:14px;color:var(--ink)}
.lpk{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;display:inline-block;margin-right:8px}

.lpstages{list-style:none;margin:0;padding:22px 0 0;display:grid;gap:2px}
.lpstage{display:grid;grid-template-columns:44px 1fr;gap:14px;position:relative;padding:14px 0}
/* The spine. Drawn behind the numbers and stopped at the last stage so the
   route ends rather than trailing off the bottom of the screen. */
.lpstage::before{content:'';position:absolute;left:21px;top:0;bottom:0;width:1px;background:var(--line)}
.lpstage:first-child::before{top:26px}
.lpstage:last-child::before{bottom:auto;height:26px}
.lpnum{position:relative;z-index:1}
.lpnum b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink-3)}
.lp-going .lpnum b{border-color:var(--champagne);color:var(--ink)}
.lp-done .lpnum b{background:var(--gold);border-color:var(--gold);color:#fff}
.lpbody{min-width:0}
.lphead{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:12px;
  background:none;border:0;padding:4px 0;text-align:left}
.lphead:hover:not(:disabled){border-color:transparent}
.lphead h3{font-size:17px;line-height:1.3;margin:0;font-weight:600}
.lpmark{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;white-space:nowrap}
.lp-done .lpmark{color:var(--gold-deep)}
.lpdoing{margin:2px 0 10px;font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:54ch}
.lpbar{height:3px;border-radius:3px;background:var(--line);overflow:hidden;max-width:260px}
.lpbar i{display:block;height:100%;background:var(--champagne)}
.lp-done .lpbar i{background:var(--gold)}

.lpdeep{margin:16px 0 4px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;
  display:grid;gap:12px}
.lplist{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.lplist li{display:flex;align-items:baseline;gap:10px}
.lplist li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--line);flex:0 0 auto}
.lplist li.on::before{background:var(--gold)}
.lpl{background:none;border:0;padding:0;text-align:left;font-size:14px;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.lpl:hover:not(:disabled){border-color:transparent;text-decoration-color:var(--champagne)}
.lplm{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.lpdrafted{display:grid;gap:7px;padding-top:11px;border-top:1px solid var(--line)}
.lpdrow{display:flex;align-items:baseline;gap:9px}
.lptag{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--gold-deep);background:var(--gold-soft);border-radius:4px;padding:2px 6px}
.lproom{margin:0;font-size:13.5px}
.lprm{font-size:11.5px;color:var(--ink-3);margin-left:8px}
.lprm.on{color:var(--gold-deep)}
.lpgo{justify-self:start}

.lpfoot{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:10px}
.lpfoot p{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:62ch}
.st-path{margin-top:8px;padding-left:0;font-size:13px}

@media(max-width:600px){
  .lpstage{grid-template-columns:34px 1fr;gap:11px}
  .lpstage::before{left:16px}
  .lpnum b{width:26px;height:26px;font-size:11.5px}
  .lphead{flex-direction:column;gap:3px}
  .lphead h3{font-size:16px}
  .lpdeep{padding:14px}
}

/* ==========================================================================
   THE THREE SESSIONS — the journey screen (renderJourney in public/app.js)
   --------------------------------------------------------------------------
   Same spine as the ten stages so the two maps in this product read as one
   family, at a larger scale because there are three of them and each carries
   a paragraph. Finished is gold, the one she is on is the only primary button
   on the screen, and nothing ahead of her is dimmed or locked.
   ========================================================================== */
.jnwrap{max-width:720px;margin:0 auto;padding:0 0 64px}
.jntop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.jncount{font-size:11px;letter-spacing:.14em;color:var(--ink-3);font-weight:700}
.jnhero{padding:10px 0 26px;border-bottom:1px solid var(--line)}
.jnhero h1{font-size:28px;line-height:1.18;margin:6px 0 10px}
@media(min-width:760px){ .jnhero h1{font-size:34px} }
.jnintro{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0;max-width:58ch}
.jnwhere{margin:16px 0 0;font-size:14px;color:var(--ink)}
.jnk{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;display:inline-block;margin-right:8px}

.jnlist{list-style:none;margin:0;padding:22px 0 0;display:grid;gap:4px}
.jnrow{display:grid;grid-template-columns:44px 1fr;gap:14px;position:relative;padding:18px 0}
.jnrow::before{content:'';position:absolute;left:21px;top:0;bottom:0;width:1px;background:var(--line)}
.jnrow:first-child::before{top:30px}
.jnrow:last-child::before{bottom:auto;height:30px}
.jnnum{position:relative;z-index:1}
.jnnum b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink-3)}
.jn-now .jnnum b{border-color:var(--champagne);color:var(--ink)}
.jn-done .jnnum b{background:var(--gold);border-color:var(--gold);color:#fff}
.jnbody{min-width:0}
.jnhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.jnkick{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--champagne)}
.jnmeta{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.jn-done .jnmeta{color:var(--gold-deep)}
.jnbody h3{font-size:20px;line-height:1.25;margin:5px 0 8px;font-weight:600}
.jnlead{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:54ch}
.jnq,.jnkeeps{border-left:2px solid var(--line);padding:2px 0 2px 14px;margin:0 0 14px}
.jnkeeps{border-left-color:var(--gold)}
.jnq p,.jnkeeps p{margin:3px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink);max-width:54ch}
.jnq p{font-style:italic;color:var(--ink-2)}
.jnacts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jnstage{font-size:11.5px;color:var(--ink-3)}

.jnafter,.jnfoot{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.jnafter p,.jnfoot p{margin:4px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:62ch}

.st-ways{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.st-ways .st-path{margin-top:0}
.s1ojourney{padding-left:0;font-size:13px;margin-top:10px}
.s1ways{display:flex;gap:10px;flex-wrap:wrap}

/* There is no next line, and the screen says why. See sessionKit endsHere. */
.s1nonext{margin:0;font-size:13.5px;line-height:1.6;color:var(--on-stage-3);
  border-left:2px solid var(--stage-line);padding-left:14px;max-width:52ch}

@media(max-width:600px){
  .jnrow{grid-template-columns:34px 1fr;gap:11px}
  .jnrow::before{left:16px}
  .jnnum b{width:26px;height:26px;font-size:11.5px}
  .jnbody h3{font-size:18px}
}

/* ==========================================================================
   CARRY ON — the band for a learner who was interrupted (see s1Save)
   --------------------------------------------------------------------------
   Above everything on the home screen, because for somebody who was cut off
   mid-session it is the only thing on that screen she wants. Gold edge rather
   than a full gold card: it is an offer, not an alarm. "Start it again
   instead" sits in the same row at a readable size, because an offer she
   cannot decline is a trap.
   ========================================================================== */
.resume{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;
  background:#fff;padding:16px 18px;margin:0 0 18px;display:grid;gap:8px}
.rskick{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.rsbody{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink);max-width:54ch}
.rsacts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:2px}
.rsacts .ghost{padding-left:0;font-size:13.5px}
@media(max-width:600px){
  .resume{padding:14px 15px}
  /* Both choices stay full-width and thumb-sized on a phone. */
  .rsacts{gap:10px}
  .rsacts button{min-height:44px}
}

/* ==========================================================================
   THE PHONE IN HER HAND — tap targets and reading size
   --------------------------------------------------------------------------
   Found by scripts/mobile-walk.js, which measures every control a learner can
   press rather than looking at a screenshot of it. On a 390px phone the
   language switch was 32px tall, "Leave" 31px, "Read my sentence" 36px and
   the tab bar 42px — all under the 44px floor both Apple and Google publish,
   which on a thumb is the difference between pressing a thing and pressing
   near it. The pilot employee uses this on her own phone, once, in the
   evening; a control she misses twice is a product she closes.
   These sizes apply where the pointer is coarse, so a desktop is untouched.
   ========================================================================== */
@media (pointer: coarse), (max-width: 600px) {
  .langsw button{min-height:44px;padding:0 16px}
  .s1leave{min-height:44px;padding:0 16px}
  #tabs button{min-height:44px}
  .top-in button,.whoami + button,#hdr-out{min-height:44px}
  /* And then the general rule, because naming controls one at a time is how
     the next one gets missed: on a touch device everything pressable clears
     the floor. Scoped to coarse pointers, so the desktop keeps its proportions. */
  button,a[href].btn,input,select,textarea{min-height:44px}
  button.ghost{padding-top:10px;padding-bottom:10px}
  /* The honesty lines are not decoration — they are the sentences that say
     which material is a draft and that no film exists. 12px is below the
     floor this product sets for prose anywhere else, and these are the two
     sentences a pilot learner is most entitled to be able to read. */
  .s1honest{font-size:13px;line-height:1.55}
  .lpfoot p,.jnfoot p,.jnafter p,.s1evidnote{font-size:13px}
  /* .sellnote .sn-count wins on specificity, so it is matched the same way. */
  .muted,.sellnote .sn-count{font-size:13px}
  /* An inline link inside a sentence cannot be 44px tall without breaking the
     line it sits in, so it gets a tappable box through padding instead —
     which is what a thumb actually needs. */
  a#go-method,.inlink{display:inline-block;padding:12px 0}
}

/* ===================================================================
   SHE IS STILL ACROSS THE TABLE — the phone's presence strip
   The desktop pins her beside the phase; a phone has no column, so once her
   card scrolls away she returns as a slim strip under the tabs. Phone only.
   ========================================================================== */
.herdock{display:none}
@media(max-width:939px){
  .herdock{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;top:0;z-index:50;
    margin:0;padding:8px 16px;min-height:0;border:0;border-bottom:1px solid var(--line);border-radius:0;
    background:rgba(255,253,248,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:0 6px 18px -12px rgba(36,30,25,.35);text-align:left;color:var(--ink);font:inherit;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
  .herdock.on{opacity:1;transform:none;visibility:visible;pointer-events:auto;
    transition:opacity .22s ease,transform .22s ease,visibility 0s}
  .herdock .hdfig{flex:0 0 auto;width:66px}
  .herdock .hdfig .figure{width:66px;border-radius:9px;overflow:hidden}
  .herdock .hdtxt{min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
  .herdock .hdtxt b{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--espresso)}
  .herdock .hdtxt span{font-size:12.5px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.herdock,.herdock.on{transition:none}}

/* The two ways out of the standing band were ghost buttons in the light
   theme's ink, rgb(92,84,76) on espresso — about 2:1, unreadable on a phone
   in a lit room. They take the band's own light ink now. */
.standing .st-path{color:#E8DFD2;text-decoration:underline;text-decoration-color:rgba(201,169,110,.55);
  text-underline-offset:4px}
.standing .st-path:hover{color:#fff}
/* The alternative route to the same rung reads as an alternative. */
.wants li.or{color:#B9AE9F;font-size:13.5px}

/* ==========================================================================
   SHE TAKES A MOMENT — the reaction, paced like a person
   Side by side on a phone too: this is the one screen whose whole point is a
   comparison, and stacked, the "after" face was below the fold. Each frame is
   ~160px wide at 390, larger than her portrait in the card above.
   ========================================================================== */
.movedcard{scroll-margin-top:118px}
/* On a phone the presence strip sits under the tabs as well. */
@media(max-width:939px){.movedcard{scroll-margin-top:188px}}
/* The strip changes to her new frame with the reaction, not ahead of it. */
.herdock.live .hdfig,.herdock.live .hdtxt span{animation:mvIn .4s ease .95s both}
@media(prefers-reduced-motion:reduce){.herdock.live .hdfig,.herdock.live .hdtxt span{animation:none}}
@media(max-width:620px){
  .mv-pair{grid-template-columns:1fr auto 1fr;gap:10px}
  .mv-arrow{padding:28px 0 0;transform:none;justify-self:center;font-size:15px}
  .mv-face .figure{max-width:none}
  .mv-line{font-size:14px}
}
.mv-one{width:120px;margin:0 0 12px}
.mv-face{position:relative}
.mv-beat{display:none}
.movedcard.live .mv-beat{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;gap:6px;
  background:rgba(250,246,239,.88);border-radius:10px;animation:mvBeatOut .3s ease .85s both}
.movedcard.live .mv-beat i{width:7px;height:7px;border-radius:50%;background:var(--champagne);
  animation:mvDot 1s ease-in-out infinite}
.movedcard.live .mv-beat i:nth-child(2){animation-delay:.15s}
.movedcard.live .mv-beat i:nth-child(3){animation-delay:.3s}
.movedcard.live .mv-side.now .mv-line,
.movedcard.live .mv-say{animation:mvIn .4s ease .95s both}
@keyframes mvBeatOut{to{opacity:0;visibility:hidden}}
@keyframes mvIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes mvDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.movedcard.live .mv-beat{display:none}
  .movedcard.live .mv-side.now .mv-line,.movedcard.live .mv-say{animation:none}}

/* ==========================================================================
   IPHONE, PROPERLY
   Every page declares viewport-fit=cover, and the manifest opens MIRROR
   standalone from the home screen — but nothing anywhere honoured the safe
   areas, so in that mode the header sat under the status bar and the
   Dynamic Island, and in landscape the text ran under the notch.
   ========================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}  /* no landscape font inflation */
body{-webkit-tap-highlight-color:rgba(166,130,64,.14)}
button,a,summary,label,[role=button]{touch-action:manipulation}  /* no double-tap-zoom delay */

/* The notch, the status bar and the Dynamic Island. */
header.top,.lp-top{padding-top:env(safe-area-inset-top,0px)}
nav.tabs{top:calc(56px + env(safe-area-inset-top,0px))}
.signin .brandside{padding-top:calc(38px + env(safe-area-inset-top,0px))}
/* Landscape: the notch is on a side. */
.wrap{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
@media(min-width:820px){.wrap{padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}}
.herdock{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* The home indicator. */
footer.foot{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
.formside{padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))}

/* Safari's toolbars come and go; 100vh is the height without them, so a
   full-height screen scrolled by the height of the toolbar. */
@supports (height:100dvh){
  .signin,#app{min-height:100dvh}
  body.in-session-one .s1wrap{min-height:calc(100dvh - 62px)}
}

/* iOS Safari zooms the whole page into any field under 16px the moment it is
   tapped, and leaves it zoomed. Every field here was 12.5–15px: the login,
   the say-box in the consultation, the journal, the toolkits. */
@media (max-width:820px),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:16px !important}
}

/* 44pt, Apple's minimum, for the few controls that were under it on a phone. */
@media (pointer:coarse),(max-width:620px){
  .capmore summary,.th-did summary,.th-coach summary,.th-more summary,.tc-more summary,
  .rt-rest summary,.smmore>summary,.prov summary{min-height:44px;display:flex;align-items:center;gap:8px}
  .si-doors a{display:inline-flex;align-items:center;min-height:44px}
  .lp-signin,.lp-buy{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
}

/* ---------- the lesson rail: where she is, and how far there is to go ---------- */
.jrail{background:rgba(251,247,239,.985);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px}
.jrail .jrsteps{min-width:0}
.jrail .jloop{grid-column:1/-1}
.jcount{font-family:var(--serif);font-size:14px;color:var(--gold-deep);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.jcount:empty{display:none}
.jrail:after{content:"";position:absolute;left:22px;right:22px;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--champagne) var(--jp,0%),transparent var(--jp,0%));
  transition:background .4s ease}
.jrail{top:calc(100px + env(safe-area-inset-top,0px))}
@media(max-width:719px){.jrail{top:calc(96px + env(safe-area-inset-top,0px))}}

/* ---------- she moved up: said once, on the screen she opens ---------- */
.news{margin:0 0 14px;padding:16px 18px 15px;border-radius:16px;border:1px solid var(--champagne);
  background:linear-gradient(150deg,#FFFDF8,#F6EEDD);box-shadow:0 10px 26px -18px rgba(120,90,40,.55)}
.nwk{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);margin-bottom:8px}
.nwl{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-bottom:2px}
.nwlevel h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 4px;color:var(--espresso)}
.nwlevel p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.nwmiles{margin-top:12px}
.nwlevel + .nwmiles{padding-top:11px;border-top:1px solid rgba(166,130,64,.25)}
.nwmiles ul{margin:4px 0 0;padding:0;list-style:none}
.nwmiles li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.nwmiles li:before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--champagne)}
.rung.here.fresh .rdot{animation:rungFresh 1.6s ease-out .3s 2}
@keyframes rungFresh{0%{box-shadow:0 0 0 0 rgba(201,169,110,.75)}100%{box-shadow:0 0 0 14px rgba(201,169,110,0)}}
@media(prefers-reduced-motion:reduce){.rung.here.fresh .rdot{animation:none}}
=======
/* The caption under her picture — see s1Face. It runs under all three states
   now (her moment, her face, a drawing), so it is sized to be read rather
   than to be a footnote, and the two lines are kept apart. */
.s1face figcaption{display:grid;gap:4px;margin-top:7px}
.s1face figcaption span{font-size:11.5px;line-height:1.45;color:var(--on-stage-3)}
.s1face.is-face img{filter:saturate(.97)}
@media (pointer: coarse), (max-width: 600px){
  .s1face figcaption span{font-size:12.5px}
}

/* ==========================================================================
   A PRIVATE MENTOR'S OPENING — her week and her focus, inside the standing band
   ========================================================================== */
.wk{margin:16px 0 4px;padding:14px 0 12px;border-top:1px solid rgba(243,238,230,.12);border-bottom:1px solid rgba(243,238,230,.12)}
.wk-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.wk-k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#A89C8C}
.wk-n{font-size:12.5px;color:#DDD4C7}
.wk-days{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wk-d{display:flex;flex-direction:column;align-items:center;gap:6px}
.wk-dot{width:26px;height:26px;border-radius:50%;border:1px solid rgba(243,238,230,.28);background:transparent;
  transition:background .4s ease,border-color .4s ease,transform .4s ease}
.wk-d.on .wk-dot{background:radial-gradient(circle at 35% 35%,#E7CF9B,var(--gold) 70%);border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,164,92,.16)}
.wk-d.now .wk-dot{border-color:#fff;border-width:2px}
.wk-l{font-size:11px;letter-spacing:.06em;color:#A89C8C}
.wk-d.now .wk-l{color:#fff;font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .wk-d.on .wk-dot{animation:wkIn .5s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 60ms) both}
}
@keyframes wkIn{from{transform:scale(.6);opacity:.2}to{transform:none;opacity:1}}

.fc{margin-top:20px;padding:16px 16px 14px;border-radius:14px;background:rgba(243,238,230,.06);border:1px solid rgba(201,164,92,.35)}
.fc.quiet{border-color:rgba(243,238,230,.14)}
.fc-k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.fc-label{font-family:var(--serif);font-size:19px;line-height:1.35;color:#fff;margin:8px 0 4px}
.fc-times{font-size:12.5px;color:#BFB3A3;margin:0 0 10px}
.fc-cost{font-size:14px;line-height:1.55;color:#DDD4C7;margin:0}
.fc-cost span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#A89C8C;margin-bottom:2px}
.fc-none{font-size:14px;line-height:1.55;color:#CFC4B5;margin:6px 0 0}
.fc-go{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;margin-top:14px;min-height:44px;
  padding:12px 14px;border-radius:12px;border:0;background:#F3EEE6;color:var(--espresso);text-align:left}
.fc-go span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold-deep)}
.fc-go b{font-family:var(--serif);font-weight:400;font-size:16px}
.fc-go:hover{background:#fff}

/* Screens arrive, they do not snap. A tab change fades the new view up; never
   under reduced motion, and never on the in-place re-renders of a lesson or a
   consultation (see render()). */
@media (prefers-reduced-motion:no-preference){
  #view.v-enter{animation:vIn .32s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes vIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- every way out of the moment: the decision map ---------- */
.dmap{margin:18px 0 6px;padding:16px 14px 6px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.dm-head{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.dm-k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-deep)}
.dm-sub{font-size:12.5px;color:var(--ink-3)}
.dm-list{list-style:none;margin:0;padding:0 0 0 14px;position:relative}
/* the trunk the branches hang from */
.dm-list:before{content:"";position:absolute;left:5px;top:10px;bottom:18px;width:2px;border-radius:2px;
  background:linear-gradient(var(--sage),var(--amber),var(--rose));opacity:.45;transform-origin:top}
.dm-b{position:relative;margin:0 0 10px}
.dm-b details{border:1px solid var(--line-2);border-radius:12px;background:#fff}
.dm-b summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:flex-start;padding:12px 12px;min-height:44px}
.dm-b summary::-webkit-details-marker{display:none}
.dm-dot{flex:0 0 12px;height:12px;margin-top:4px;border-radius:50%;background:var(--ink-4);position:relative;left:-21px;margin-right:-12px;
  box-shadow:0 0 0 3px var(--panel)}
.dm-b.v-best .dm-dot{background:var(--sage)}
.dm-b.v-weak .dm-dot{background:var(--amber)}
.dm-b.v-harmful .dm-dot{background:var(--rose)}
.dm-b.v-best details{border-color:var(--sage)}
.dm-txt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.dm-tag{font-style:normal;font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);border:1px solid var(--line);
  border-radius:999px;padding:2px 8px}
.dm-tag.best{color:var(--sage);border-color:var(--sage)}
.dm-lab{flex-basis:100%;font-size:14.5px;line-height:1.45;color:var(--ink)}
.dm-react{margin:0 12px 6px 34px;font-family:var(--serif);font-style:italic;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.dm-why{margin:0 12px 12px 34px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  .dmap.drawn .dm-list:before{animation:dmTrunk .7s cubic-bezier(.2,.8,.2,1) both}
  .dmap.drawn .dm-b{animation:dmBranch .45s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--n) * .12s) both}
}
@keyframes dmTrunk{from{transform:scaleY(0)}to{transform:none}}
@keyframes dmBranch{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
/* Inside a lesson block the decision map keeps its own scale. */
.dmap,.dmap summary,.dmap p{font-family:var(--sans)}
.dmap .dm-lab{font-size:14.5px;line-height:1.45}
.dmap .dm-why{font-size:13.5px;line-height:1.55;margin:0 12px 12px 34px}
.dmap .dm-react{font-family:var(--serif);font-size:14.5px}
.dmap .verdict{font-size:10px;padding:3px 9px;letter-spacing:.1em}
.dmap .dm-tag{font-size:10.5px}
.dmap .dm-b.v-best,.dmap .dm-b.v-weak,.dmap .dm-b.v-harmful{background:none;color:inherit}

/* ---------- where this lesson sits in a consultation ---------- */
.pj{margin-top:20px;padding-top:16px;border-top:1px solid rgba(239,234,227,.16)}
.pj-k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#A89C8C;margin-bottom:12px}
.pj-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);position:relative}
/* the rail behind the nodes, and the part already walked */
.pj-line:before,.pj-line:after{content:"";position:absolute;top:21px;left:6%;height:2px;border-radius:2px}
.pj-line:before{right:6%;background:rgba(239,234,227,.18)}
.pj-line:after{width:calc((88% / 7) * var(--at));background:var(--gold);transform-origin:left}
.pj-line li{display:flex;justify-content:center;position:relative;z-index:1}
.pj-node{width:40px;height:44px;min-height:44px;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pj-node span{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:12px;color:#CFC4B5;background:#2B2420;border:1px solid rgba(239,234,227,.3);
  transition:transform .25s ease,background .25s ease}
.pj-node.past span{background:#5A4A36;border-color:var(--gold);color:#F3EEE6}
.pj-node.here span{width:30px;height:30px;background:var(--gold);border-color:#F3E2BE;color:#241E19;font-weight:700;
  box-shadow:0 0 0 4px rgba(201,164,92,.22)}
.pj-node[aria-pressed="true"]:not(.here) span{outline:2px solid #F3EEE6;outline-offset:2px}
.pj-say{margin-top:10px;display:flex;flex-direction:column;gap:3px;min-height:44px}
.pj-name{font-family:var(--serif);font-weight:400;font-size:16px;color:#fff}
.pj-obj{font-size:13.5px;line-height:1.5;color:#CFC4B5}
@media (prefers-reduced-motion:no-preference){
  .pj.drawn .pj-line:after{animation:pjWalk .9s cubic-bezier(.2,.8,.2,1) .15s both}
  .pj.drawn .pj-node.here span{animation:pjHere .6s cubic-bezier(.2,.8,.2,1) .9s both}
}
@keyframes pjWalk{from{transform:scaleX(0)}to{transform:none}}
@keyframes pjHere{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:none}}
.pj-row{display:flex;align-items:center;gap:6px;margin-top:8px}
.pj-row .pj-say{flex:1 1 auto;margin-top:0;text-align:center;align-items:center}
.pj-step{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border:1px solid rgba(239,234,227,.28);
  background:transparent;color:#F3EEE6;font-size:22px;line-height:1}
.pj-step:hover{background:rgba(239,234,227,.08)}
.pj-node{cursor:pointer}
.pj-node.looking:not(.here) span{outline:2px solid #F3EEE6;outline-offset:2px}
/* The same focus card on the light Development page. */
.fcwrap{margin:0 0 22px}
.fcwrap .fc{margin-top:0;background:linear-gradient(150deg,#FFFDF8,#F6EEDD);border-color:var(--champagne)}
.fcwrap .fc-label{color:var(--espresso)}
.fcwrap .fc-times{color:var(--ink-3)}
.fcwrap .fc-cost{color:var(--ink-2)}
.fcwrap .fc-cost span{color:var(--ink-3)}
.fcwrap .fc-go{background:var(--espresso);color:#F3EEE6}
.fcwrap .fc-go span{color:var(--gold)}
.fcwrap .fc-go:hover{background:#3A3029}

/* READ-ONLY AFTER THE TERM: the record stays readable; every way to start,
   answer, invite, reset or write is hidden, on every screen size. */
.ro-strip{margin:14px 0 0}
body.read-only #view form,
body.read-only #view textarea,
body.read-only #view input:not([type="search"]),
body.read-only #view select,
body.read-only #view button[type="submit"],
body.read-only #view [data-pw],
body.read-only #view [data-resend],
body.read-only #view [data-revoke-inv],
body.read-only #view .rvask,
body.read-only #view [data-case],
body.read-only #view .pplact,
body.read-only #view .opts{display:none !important}

/* ==========================================================================
   CONVERSATION PRACTICE (public/app.js renderConversation)
   A conversation, not a form: her lines on the left with how she says them,
   yours on the right, the moves under her latest line. Phone first.
   ========================================================================== */
.tk-wrap{max-width:720px;margin:0 auto;padding-bottom:40px}
.tk-back{margin:6px 0 14px;font-size:13px}
.tk-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.tk-hface{flex:0 0 auto}
.tk-kick{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.tk-name{margin:2px 0 2px;font-size:24px}
.tk-sub{color:var(--ink-2);font-size:13.5px;line-height:1.4}
.tk-progress{display:flex;gap:5px;margin:4px 0 16px}
.tk-progress span{flex:1;height:4px;border-radius:4px;background:var(--line)}
.tk-progress span.on{background:var(--champagne)}
.tk-progress span.now{background:var(--gold);animation:tkpulse 1.6s ease-in-out infinite}
@keyframes tkpulse{50%{opacity:.45}}
.tk-intro{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;font-size:13.5px;color:var(--ink-2)}
.tk-thread{display:flex;flex-direction:column;gap:18px}
.tk-turn{display:flex;flex-direction:column;gap:8px}
.tk-phase{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700;text-align:center;margin:4px 0}
.tk-row{display:flex;gap:10px;align-items:flex-end}
.tk-row.you{justify-content:flex-end}
.tk-face{flex:0 0 36px}
.tk-col{display:flex;flex-direction:column;gap:5px;max-width:84%}
.tk-row.you .tk-col{align-items:flex-end}
.tk-bubble{padding:11px 14px;border-radius:18px;font-size:15px;line-height:1.5;box-shadow:0 1px 0 rgba(36,30,25,.04)}
.tk-bubble.her{background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px;font-family:var(--serif);font-size:16px}
.tk-bubble.you{background:var(--espresso);color:#F5F1EC;border-bottom-right-radius:6px}
.tk-who{font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.62;margin-bottom:4px}
.tk-stage{font-style:italic;color:var(--ink-2);font-size:13.5px;line-height:1.45;padding:0 4px}
.tk-after{padding-left:46px}
.tk-choose{margin-top:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.tk-prompt{font-weight:700;font-size:14px;margin-bottom:10px}
.tk-opts{display:grid;gap:9px}
.tk-opt{appearance:none;text-align:left;border:1px solid var(--line);background:#fff;border-radius:14px;padding:13px 15px;font:inherit;font-size:14.5px;line-height:1.45;color:var(--ink);cursor:pointer;min-height:48px;transition:border-color .14s,background .14s,transform .14s}
.tk-opt:hover:not(:disabled){border-color:var(--champagne);background:#fffdf9}
.tk-opt:active:not(:disabled){transform:scale(.99)}
.tk-opt:focus-visible{outline:2px solid var(--champagne);outline-offset:2px}
.tk-opt.sel{border-color:var(--espresso);background:var(--espresso);color:#F5F1EC}
.tk-opt.locked:not(.sel){opacity:.45}
.tk-thinking{font-style:italic;color:var(--ink-3);font-size:13px;margin:10px 4px 0}
.fresh{animation:tkin .45s ease-out both}
.tk-after.fresh{animation-delay:.35s}
.tk-turn.now.fresh{animation:tkin .5s ease-out .7s both}
@keyframes tkin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fresh,.tk-turn.now.fresh,.tk-progress span.now{animation:none}}
.tk-end{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.tk-outcome{border-radius:var(--r-lg);padding:18px;background:#fff;border:1px solid var(--line)}
.tk-outcome.o-yes{border-color:var(--sage);background:var(--sage-soft)}
.tk-outcome.o-defer{border-color:var(--gold);background:var(--gold-soft)}
.tk-outcome.o-no{border-color:var(--rose);background:var(--rose-soft)}
.tk-k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:6px}
.tk-big{font-family:var(--serif);font-size:24px;margin-bottom:8px}
.tk-note{font-size:12.5px;color:var(--ink-3);margin:6px 0 0}
.tk-scorecard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.tk-dots{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.tk-dots li{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:10px;font-size:13.5px;background:var(--line-2)}
.tk-dots li.v-2{background:var(--sage-soft)} .tk-dots li.v-1{background:var(--gold-soft)} .tk-dots li.v-0{background:var(--rose-soft)}
.tk-rec{font-size:13px;color:var(--ink-2);margin:10px 0 0}
.tk-h2{margin-top:10px}
.tk-review{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tk-rv{background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--r);padding:14px}
.tk-rv.v-2{border-left-color:var(--sage)} .tk-rv.v-1{border-left-color:var(--gold)} .tk-rv.v-0{border-left-color:var(--rose)}
.tk-rvhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.tk-rvhead .tk-phase{margin:0;text-align:left}
.tk-chip{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--line-2);white-space:nowrap}
.tk-chip.v-2{background:var(--sage-soft);color:var(--sage)} .tk-chip.v-1{background:var(--gold-soft);color:var(--gold-deep)} .tk-chip.v-0{background:var(--rose-soft);color:var(--rose)}
.tk-chip.cross{background:var(--rose);color:#fff}
.tk-q{margin:0 0 10px;padding:8px 12px;border-left:2px solid var(--line);font-family:var(--serif);color:var(--ink-2);font-size:14.5px}
.tk-co{margin-top:8px} .tk-co p{margin:0;font-size:14px}
.tk-co.next p{font-weight:700}
.tk-pr{margin-top:8px;font-size:13px;color:var(--ink-2)} .tk-pr summary{cursor:pointer;color:var(--gold-deep)}
.tk-rw{margin-top:12px;font-size:13px}
.tk-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.tk-actions button{flex:1 1 220px;min-height:46px}
.tk-record{margin-bottom:18px}
.tk-skills{display:grid;gap:7px}
.tk-skill{display:grid;grid-template-columns:minmax(90px,1.4fr) auto minmax(80px,1fr);gap:10px;align-items:center;font-size:13px}
.tk-bar{height:7px;background:var(--line-2);border-radius:6px;overflow:hidden}
.tk-bar i{display:block;height:100%;background:var(--champagne);border-radius:6px}
.tk-fl{font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap} .tk-fl em{color:var(--sage);font-style:normal;font-weight:700}
.tk-focus{margin:10px 0 0;font-size:13.5px;font-weight:700;color:var(--gold-deep)}
.act .tk-talk{border-color:var(--champagne)}

.tk-again{text-align:center;padding:26px 6px;display:flex;flex-direction:column;align-items:center;gap:10px}
.tk-again .tk-sub{max-width:460px}
.tk-memory{background:var(--gold-soft);border:1px solid var(--gold);border-radius:var(--r);padding:12px 14px}
.tk-memory ul{margin:4px 0 0;padding-left:18px} .tk-memory li{font-size:14px;font-style:italic;color:var(--ink-2);margin:3px 0}
.tk-bubble.her.returning{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}

/* ==========================================================================
   SKILLS, CHALLENGES, ACHIEVEMENTS, DEVELOPMENT OVERVIEW
   ========================================================================== */
.mx-sub{margin:-4px 0 12px}
.mx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.mx-skill{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:6px}
.mx-skill.lv-4{border-color:var(--sage);background:var(--sage-soft)}
.mx-skill.lv-3{border-color:var(--gold)}
.mx-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.mx-top .mx-dots{flex-shrink:0;margin-top:4px}
.mx-name{font-weight:700;font-size:13.5px}
.mx-level{font-family:var(--serif);font-size:17px}
.mx-ev{font-size:12.5px;color:var(--ink-2)}
.mx-dots{display:inline-flex;gap:3px} .mx-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)} .mx-dots i.on{background:var(--champagne)}
.mx-last{display:flex;gap:4px} .mx-last i{width:14px;height:5px;border-radius:3px;background:var(--line)}
.mx-last i.served{background:var(--sage)} .mx-last i.half{background:var(--gold)} .mx-last i.cost{background:var(--rose)} .mx-last i.crossed{background:var(--espresso)}
.mx-ch{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:18px}
.mx-c{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px} .mx-c.done{border-color:var(--sage)}
.mx-c p{font-size:13px;color:var(--ink-2);margin:4px 0 10px}
.mx-ct{font-weight:700;font-size:14px}
.mx-bar{height:6px;background:var(--line-2);border-radius:6px;overflow:hidden} .mx-bar i{display:block;height:100%;background:var(--champagne)}
.mx-c.done .mx-bar i{background:var(--sage)}
.mx-cn{font-size:12.5px;margin-top:6px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mx-ach{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.mx-badge{background:var(--gold-soft);border:1px solid var(--gold);border-radius:20px;padding:6px 12px;font-size:13px} .mx-badge em{font-style:normal;color:var(--ink-3);margin-left:4px}
.mx-basis{font-size:12px;margin-top:6px}
.mx-person{border-top:1px solid var(--line-2);padding:12px 0} .mx-person:first-of-type{border-top:0}
.mx-pt{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.mx-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
.mx-cell{display:flex;justify-content:space-between;align-items:center;gap:6px;background:var(--panel-2);border-radius:8px;padding:6px 8px;font-size:12px}
.mx-cell.lv-4{background:var(--sage-soft)}
.mx-cl{line-height:1.25}
.mx-cell .mx-dots{flex-shrink:0}
.mx-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-2);margin:0 0 10px}
.mx-legend span{display:inline-flex;align-items:center;gap:5px}
.mx-next{font-size:13px;margin-top:8px;color:var(--gold-deep)}

.mx-today{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:18px}
.mx-t{background:var(--panel-2);border:1px solid var(--gold);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:6px}
.mx-t p{font-size:13.5px;color:var(--ink-2);margin:0}
.mx-t button{align-self:flex-start;margin-top:4px;min-height:44px}
.mx-said{font-family:var(--serif);font-size:16px}
.mx-tdone{color:var(--sage);font-weight:700;font-size:13px}

.mx-name{flex:1;min-width:0;overflow-wrap:anywhere}

.tk-outcome.o-right{border-color:var(--sage);background:var(--sage-soft)}
.tk-right{display:inline-block;font-weight:700;font-size:13px;color:var(--sage);margin-bottom:6px}