/* ============================================================
   styles.css : ALL FORMA & FUNCTION SITE STYLES (shared)

   WHAT THIS IS:
   Every style rule for the site. Design tokens sit at the very
   top. Change a color or font there once and it updates
   everywhere. Below the tokens, each block is labeled: header,
   base, the page sections, the PRAXXIS player, and the footer.

   SAFE TO EDIT:
   Edit any rule here. To recolor or re-font the whole site,
   change a token under :root at the top. The PRAXXIS player
   rules are a self-contained labeled section near the middle;
   every one of them is scoped under .praxxis-player so they
   cannot affect the rest of the page.

   This file is linked by header.php as /styles.css, so it loads
   on every page that uses the shared header.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS  —  change a color or font here once.
   ============================================================ */
:root{
  --bg:#fdf9f0;
  --ink:#3b0d68;
  --ink-soft:#3b0d68cc;
  --ink-faint:#3b0d6822;
  --ink-line:#3b0d6840;
  --berry:#70163f;
  --terracotta:#b04a2a;
  --teal:#1a4248;
  --pink:#c4256b;
  --chartreuse:#a8cf72;
  --bright-purple:#771ad9;
  --black:#111111;
  --charcoal:#1b1822;

  --serif:'Instrument Serif', Georgia, serif;
  --display:'Archivo', system-ui, sans-serif;
  --body:'Instrument Sans', system-ui, sans-serif;
  --mono:'Archivo', system-ui, sans-serif;

  --maxw:1300px;
  --pad:56px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,ol{margin:0;padding:0}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}

.shell{max-width:none;margin:0 auto}
.shell>section,.shell>header,.shell>footer{padding-inline:max(var(--pad),calc((100% - var(--maxw))/2 + var(--pad)))}
.sec{padding:72px var(--pad)}
.mono-meta{font-family:var(--mono);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;font-weight:700}

/* ============================================================
   HEADER  (on cream, does not stick)
   Logo wordmark is Archivo per the brand sheet, black, with a
   bright-purple ampersand. Dissolving-dot icon (deep purple) drops
   in to the left of the wordmark once the real logo is made.
   ============================================================ */
.site-header{background:var(--charcoal);color:var(--bg);padding:22px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-bottom:0}
.logo{font-family:'Archivo Black',var(--display);font-weight:400;font-size:24px;line-height:1;letter-spacing:-0.01em;text-transform:uppercase;white-space:nowrap}
.logo .amp{color:var(--chartreuse)}
.site-header .logo{color:var(--bg)}
.site-header .logo .amp{color:var(--chartreuse)}
.nav{display:flex;gap:30px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav a{cursor:pointer;color:var(--bg)}
.nav .cta{background:var(--chartreuse);color:var(--teal);padding:9px 17px;font-weight:700}
.nav .signin{margin-left:16px}

/* ============================================================
   HERO  —  THE PAGE IS THE PROOF
   ============================================================ */
.hero{padding:72px var(--pad);background:var(--ink);color:var(--bg)}
.hero .mono-meta{color:var(--chartreuse);margin-bottom:28px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(50px,9vw,124px);line-height:0.94;letter-spacing:-0.01em;text-transform:none;margin-bottom:16px}
.hero h1 .strike{position:relative;opacity:.82}
.hero h1 .strike::after{content:"";position:absolute;left:-2%;top:55%;height:2px;width:0;background:var(--bg);border-radius:2px;animation:heroStrike .5s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.95s}
.hero h1 .fix{color:var(--chartreuse);font-style:italic;opacity:0;margin-left:.2em;display:inline-block;transform:translateY(.1em);animation:heroFix .45s ease forwards;animation-delay:1.4s}
@keyframes heroStrike{to{width:104%}}
@keyframes heroFix{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.hero h1 .strike::after{animation:none;width:104%}.hero h1 .fix{animation:none;opacity:1;transform:none}}
.hero p{font-size:clamp(17px,1.8vw,23px);line-height:1.45;color:var(--bg)}
.hero .hero-tagline{font-family:var(--mono);font-weight:700;font-size:clamp(17px,1.8vw,23px);line-height:1.3;letter-spacing:0.08em;text-transform:uppercase;color:var(--chartreuse);margin-bottom:24px}

/* ============================================================
   REFRAME  (full-bleed ink, hover scoreboard)
   ============================================================ */
.reframe{background:var(--bg);color:var(--ink);padding:72px var(--pad)}
.reframe > .mono-meta{color:var(--bright-purple);margin-bottom:20px}
.big-serif{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5.2vw,74px);line-height:0.98;letter-spacing:-0.02em}
.big-serif .em{font-style:italic;color:var(--chartreuse)}
.reframe .big-serif{margin-bottom:24px}
.reframe-lead{font-family:var(--body);font-size:clamp(16px,1.7vw,20px);line-height:1.55;color:var(--ink);margin-bottom:44px}
.reframe .big-serif .em{color:var(--bright-purple)}
.reframe .big-serif .hl-blank{position:relative;display:inline-block;border-bottom:2px solid var(--ink);cursor:pointer;text-align:center;vertical-align:baseline}
.reframe .big-serif .hl-word{font-style:italic;color:var(--bright-purple);opacity:0;transition:opacity .4s ease}
.reframe .big-serif .hl-blank:hover .hl-word,.reframe .big-serif .hl-blank:focus-visible .hl-word,.reframe .big-serif .hl-blank.show .hl-word{opacity:1}
.reframe .big-serif .hl-blank:focus{outline:none}
@media (prefers-reduced-motion:reduce){.reframe .big-serif .hl-word{transition:none}}

/* WHAT WE KNOW (beliefs) */
.beliefs{background:#121b1a;color:var(--bg);padding:72px var(--pad)}
.beliefs > .mono-meta{color:var(--chartreuse);margin-bottom:20px}
.beliefs-title{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.5vw,61px);line-height:0.98;letter-spacing:-0.015em;color:var(--bg);margin-bottom:24px}
.beliefs-title .anyway{font-style:italic;color:var(--chartreuse)}
.beliefs-intro{font-family:var(--body);font-size:clamp(16px,1.7vw,20px);line-height:1.55;color:var(--bg);margin-bottom:40px}
.belief-list{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(253,249,240,.34)}
.belief{padding:30px 28px;background:transparent;transition:background-color .2s ease,color .2s ease}
.belief:nth-child(odd){border-right:1px solid rgba(253,249,240,.34)}
.belief:nth-child(-n+2){border-bottom:1px solid rgba(253,249,240,.34)}
.belief-title{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.6vw,32px);line-height:1.08;letter-spacing:-0.01em;color:var(--chartreuse);margin-bottom:9px}
.belief-body{font-family:var(--body);font-size:18px;line-height:1.5;color:var(--bg)}
.belief .key{padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-color .2s ease,color .2s ease}
.belief:hover{background:rgba(253,249,240,0.05)}
.belief:hover .key{background:var(--chartreuse);color:var(--teal)}
@media (prefers-reduced-motion:reduce){.belief,.belief .key{transition:none}}
@media (max-width:760px){.belief-list{grid-template-columns:1fr}.belief:nth-child(odd){border-right:0}.belief{border-bottom:1px solid rgba(253,249,240,.34)}.belief:last-child{border-bottom:0}}

/* ============================================================
   SEVEN STEPS  —  PRAXXIS player ("Design a course in seven steps")
   Every rule scoped under .praxxis-player. Its tokens live on the
   wrapper (not :root), and .nav is renamed .px-nav so the homepage
   header's bare .nav rule cannot leak in.
   ============================================================ */
.praxxis-player{
  --band:#e8e5ef;
  --cream:#fdf9f0; --side:#f7f3ea; --card:#ffffff;
  --ink:#3b0d68; --violet:#771ad9; --green:#a8cf72; --greendark:#6f8f3e;
  --greenbg:#eaf2da; --teal:#1a4248; --black:#1b1822;
  --muted:#6f6388;
  --hair:rgba(59,13,104,.14); --hair2:rgba(59,13,104,.24);
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,Arial,sans-serif;
  --arch:"Archivo",var(--sans);
  box-sizing:border-box;
  background:var(--cream); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  padding-block:64px;
}
.praxxis-player *{box-sizing:border-box; margin:0; padding:0}
.praxxis-player .lab{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase}

.praxxis-player .eyebrow{max-width:1300px; margin:0 auto 18px; color:var(--muted)}
.praxxis-player .app{width:100%; max-width:1300px; margin:0 auto; background:var(--cream); border:1px solid var(--hair2); border-radius:10px; overflow:hidden; display:flex}

.praxxis-player .side{width:288px; flex:0 0 288px; background:var(--side); border-right:1px solid var(--hair); padding:30px 24px; display:flex; flex-direction:column}
.praxxis-player .ctitle{font-family:var(--serif); font-size:29px; line-height:1.08; text-wrap:balance; color:var(--ink)}
.praxxis-player .cmod{color:var(--muted); margin-top:5px; margin-bottom:22px}
.praxxis-player .lessons{display:flex; flex-direction:column; gap:2px}
.praxxis-player .grp{color:var(--muted); margin:14px 0 6px; padding:0 2px}
.praxxis-player .grp:first-child{margin-top:0}
.praxxis-player .les{display:flex; align-items:center; gap:12px; padding:10px 12px; margin:0 -10px; border-radius:8px; cursor:pointer}
.praxxis-player .les .mk{width:20px; height:20px; border-radius:50%; border:1.5px solid var(--hair2); flex:0 0 auto; display:grid; place-items:center; font-size:11px; color:transparent; font-family:var(--arch); font-weight:800}
.praxxis-player .les.done .mk{background:var(--violet); border-color:var(--violet); color:#fff}
.praxxis-player .les.cur .mk{border-color:var(--violet); border-width:2.5px; color:var(--violet)}
.praxxis-player .les .t{font-size:14.5px; color:var(--muted); line-height:1.3}
.praxxis-player .les:hover .t{color:var(--ink)}
.praxxis-player .les.cur{background:rgba(119,26,217,.10)}
.praxxis-player .les.cur .t{color:var(--ink); font-weight:700}
.praxxis-player .les.start .mk{font-size:13px}
.praxxis-player .foot{margin-top:auto; padding-top:26px}
.praxxis-player .ring{display:flex; align-items:center; gap:14px}
.praxxis-player .dial{width:56px; height:56px; border-radius:50%; display:grid; place-items:center}
.praxxis-player .dial span{width:42px; height:42px; border-radius:50%; background:var(--side); display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--ink)}
.praxxis-player .rt{font-size:12.5px; color:var(--muted); line-height:1.3}
.praxxis-player .mark{font-family:var(--arch); font-weight:800; font-size:10.5px; letter-spacing:1.5px; color:var(--muted); margin-top:24px}

.praxxis-player .stage{flex:1; min-width:0; padding:38px 48px 34px; display:flex; flex-direction:column; min-height:720px}
.praxxis-player #intro, .praxxis-player #play{flex:1; display:flex; flex-direction:column; max-width:840px}
.praxxis-player .lnum{color:var(--muted); margin-bottom:12px}
.praxxis-player .tbar{height:6px; background:var(--hair); border-radius:99px; margin-bottom:26px; position:relative}
.praxxis-player .tbar i{position:absolute; inset:0; width:0; background:var(--violet); border-radius:99px; transition:width .25s}
.praxxis-player h1{font-family:var(--serif); font-weight:400; font-size:42px; line-height:1.05; letter-spacing:-.3px; text-wrap:balance; color:var(--ink)}
.praxxis-player h1 .it{font-style:italic; color:var(--violet)}
.praxxis-player .lead{font-size:16px; line-height:1.62; color:var(--muted); margin:14px 0 0; text-wrap:pretty; max-width:760px}

.praxxis-player .introbody{margin:20px 0 0}
.praxxis-player .introbody p{font-size:16px; line-height:1.7; color:var(--ink); margin-bottom:16px; text-wrap:pretty; max-width:760px}
.praxxis-player .note{border:1px solid var(--hair2); border-radius:10px; padding:18px 20px; margin:18px 0 8px; background:rgba(119,26,217,.05); max-width:780px}
.praxxis-player .note .lab{color:var(--violet); margin-bottom:9px}
.praxxis-player .note p{font-size:15px; line-height:1.62; color:var(--ink); text-wrap:pretty}
.praxxis-player .intronav{display:flex; justify-content:flex-end; margin-top:auto; padding-top:30px}

.praxxis-player .card{background:var(--card); border:1px solid var(--hair2); border-radius:11px; padding:24px 26px; margin-top:22px}
.praxxis-player .qst{font-family:var(--serif); font-size:23px; line-height:1.15; color:var(--ink); margin-bottom:4px; text-wrap:balance}
.praxxis-player .introline{font-size:14.5px; color:var(--ink); line-height:1.6; margin-top:8px}
.praxxis-player .part{margin-top:18px}
.praxxis-player .subhead{font-family:var(--serif); font-size:19px; color:var(--ink); margin-bottom:8px}
.praxxis-player .prompt{color:var(--ink); margin-bottom:14px; line-height:1.6; font-size:14.5px}

.praxxis-player .chips{display:flex; flex-wrap:wrap; gap:9px}
.praxxis-player .chip{border:1.5px solid var(--hair2); border-radius:100px; padding:10px 16px; font-size:14px; cursor:pointer; background:var(--cream); transition:border-color .12s, background .12s}
.praxxis-player .chip:hover{border-color:var(--violet)}
.praxxis-player .chip.sel{border-color:var(--violet); background:rgba(119,26,217,.10); font-weight:600}
.praxxis-player .chip.ok{border-color:var(--green); background:var(--greenbg); color:var(--greendark); font-weight:700}
.praxxis-player .chip.no{border-color:rgba(59,13,104,.28); background:var(--cream); color:rgba(59,13,104,.5); text-decoration:line-through}
.praxxis-player .chip.skip{color:var(--muted)}
.praxxis-player .locked .chip{cursor:default}

.praxxis-player .confirm{border:1.5px solid var(--hair2); border-radius:10px; padding:16px 18px; cursor:pointer; background:var(--cream); transition:border-color .12s, background .12s}
.praxxis-player .confirm:hover{border-color:var(--violet)}
.praxxis-player .confirm.sel{border-color:var(--violet); background:rgba(119,26,217,.07)}
.praxxis-player .confirm.done{border-color:var(--green); background:var(--greenbg)}
.praxxis-player .confirm .ck{font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:7px; display:block}
.praxxis-player .confirm.sel .ck{color:var(--violet)} .praxxis-player .confirm.done .ck{color:var(--greendark)}
.praxxis-player .confirm p{font-size:15.5px; color:var(--ink); line-height:1.5}
.praxxis-player .locked .confirm{cursor:default}

.praxxis-player .ordlab{color:var(--muted); margin:0 0 8px}
.praxxis-player .ordlab.second{margin-top:16px}
.praxxis-player .ord{border:1px solid var(--hair2); border-radius:9px; padding:12px 15px; margin-bottom:8px; font-size:14.5px; display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; background:var(--cream); transition:border-color .12s}
.praxxis-player .ord:hover{border-color:var(--violet)}
.praxxis-player .ord.empty{color:var(--muted); border-style:dashed; cursor:default}
.praxxis-player .ord .onum{font-family:var(--arch); font-weight:800; font-size:12px; width:22px; height:22px; border-radius:50%; background:var(--violet); color:#fff; display:grid; place-items:center; flex:0 0 auto}
.praxxis-player .ord.ok{border-color:var(--green); background:var(--greenbg); color:var(--greendark); font-weight:600}
.praxxis-player .ord.ok .onum{background:var(--greendark)}
.praxxis-player .locked .ord{cursor:default}

.praxxis-player .mgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.praxxis-player .mcol{display:flex; flex-direction:column; gap:8px}
.praxxis-player .msrc{border:1px solid var(--hair2); border-radius:9px; padding:12px 15px; font-size:14px; cursor:pointer; background:var(--cream); transition:border-color .12s, opacity .12s}
.praxxis-player .msrc:hover{border-color:var(--violet)}
.praxxis-player .msrc.sel{border-color:var(--violet); background:rgba(119,26,217,.10); font-weight:600}
.praxxis-player .msrc.used{opacity:.32; pointer-events:none}
.praxxis-player .mtgt{border:1.5px dashed var(--hair2); border-radius:9px; padding:12px 15px; font-size:14px; color:var(--muted); cursor:pointer; min-height:48px; display:flex; align-items:center; background:var(--cream); transition:border-color .12s, background .12s}
.praxxis-player .mtgt.filled{border-style:solid; border-color:var(--violet); color:var(--ink); background:rgba(119,26,217,.06)}
.praxxis-player .mtgt.ok{border-color:var(--green); background:var(--greenbg); color:var(--greendark)}
.praxxis-player .mtgt.no{border-style:solid; border-color:rgba(59,13,104,.3); color:var(--muted); background:var(--cream)}
.praxxis-player .locked .msrc, .praxxis-player .locked .mtgt{cursor:default}

.praxxis-player .checklist{display:flex; flex-direction:column; gap:8px}
.praxxis-player .chk{display:flex; align-items:center; gap:13px; border:1px solid var(--hair2); border-radius:9px; padding:12px 15px; cursor:pointer; background:var(--cream); transition:border-color .12s, background .12s}
.praxxis-player .chk:hover{border-color:var(--violet)}
.praxxis-player .chk.sel{border-color:var(--violet); background:rgba(119,26,217,.07)}
.praxxis-player .chk.ok{border-color:var(--green); background:var(--greenbg)}
.praxxis-player .chk .box{width:22px; height:22px; min-width:22px; border-radius:5px; border:2px solid var(--hair2); display:grid; place-items:center; font-size:12px; color:transparent}
.praxxis-player .chk.sel .box{border-color:var(--violet); color:var(--violet)}
.praxxis-player .chk.ok .box{border-color:var(--greendark); background:#dfe9cb; color:var(--greendark)}
.praxxis-player .chk span.t{font-size:14.5px; color:var(--ink); line-height:1.45}
.praxxis-player .locked .chk{cursor:default}

.praxxis-player .carry{border:1px solid var(--hair2); border-radius:10px; padding:14px 16px; margin-top:14px; background:var(--cream)}
.praxxis-player .carry .ck{color:var(--violet); margin-bottom:9px}
.praxxis-player .carry .pills{display:flex; flex-wrap:wrap; gap:6px}
.praxxis-player .pill{font-size:12.5px; padding:5px 12px; border-radius:100px; background:rgba(119,26,217,.07); border:1px solid var(--hair); color:var(--ink)}
.praxxis-player .goalbox{display:block; border:1px solid var(--hair2); border-radius:9px; padding:12px 15px; font-size:14.5px; line-height:1.5; background:rgba(119,26,217,.05); margin-top:14px; color:var(--ink)}
.praxxis-player .goalbox b{color:var(--violet); font-weight:700}

.praxxis-player .notice{display:none; border:1px solid rgba(59,13,104,.3); border-radius:10px; padding:15px 18px; margin-top:16px; background:rgba(119,26,217,.06)}
.praxxis-player .notice.show{display:block}
.praxxis-player .notice .ck{color:var(--violet); margin-bottom:7px}
.praxxis-player .notice p{font-size:14px; line-height:1.7; color:var(--ink); text-wrap:pretty}

.praxxis-player .ordernudge{display:none; color:var(--violet); font-weight:600; font-size:13.5px; line-height:1.6; margin-top:16px}
.praxxis-player .ordernudge.show{display:block}

.praxxis-player .actions{margin-top:18px}
.praxxis-player .btn{font-family:var(--sans); font-size:14px; font-weight:700; padding:12px 26px; border-radius:9px; border:1px solid var(--ink); background:var(--ink); color:var(--cream); cursor:pointer; transition:opacity .15s}
.praxxis-player .btn:hover{opacity:.88}
.praxxis-player .btn[disabled]{opacity:.3; pointer-events:none}

.praxxis-player .reveal{display:none; margin-top:16px; border:1px solid var(--hair2); border-radius:10px; padding:16px 20px; background:rgba(119,26,217,.05)}
.praxxis-player .reveal.show{display:block}
.praxxis-player .reveal .ck{color:var(--violet); margin-bottom:8px}
.praxxis-player .reveal p{font-size:14.5px; line-height:1.72; color:var(--ink); text-wrap:pretty}
.praxxis-player .reveal p + p{margin-top:11px}

.praxxis-player .nudge{display:none; color:var(--violet); font-weight:600; font-size:13px; margin-top:14px}
.praxxis-player .nudge.show{display:block}

.praxxis-player .px-nav{display:flex; justify-content:space-between; gap:14px; margin-top:26px}
.praxxis-player .nb{display:flex; flex-direction:column; gap:3px; padding:12px 18px; border:1px solid var(--hair2); border-radius:9px; min-width:210px; cursor:pointer}
.praxxis-player .nb .k{color:var(--muted)}
.praxxis-player .nb .v{font-family:var(--serif); font-size:17px; color:var(--ink)}
.praxxis-player .nb.next{background:var(--ink); border-color:var(--ink); text-align:right}
.praxxis-player .nb.next .k{color:rgba(253,249,240,.55)} .praxxis-player .nb.next .v{color:var(--cream)}
.praxxis-player .nb.off{opacity:.32}

.praxxis-player .done-wrap{display:none; max-width:1010px}
.praxxis-player .done-wrap.show{display:block}
.praxxis-player .recap{margin:24px 0 28px; display:flex; flex-direction:column; gap:18px}
.praxxis-player .recap .gl{color:var(--muted); margin-bottom:9px}
.praxxis-player .recap-row{display:flex; flex-wrap:wrap; gap:10px}
.praxxis-player .pcard{border:1px solid var(--hair2); border-radius:10px; padding:15px 16px; flex:1 1 220px; min-width:200px; max-width:300px}
.praxxis-player .pcard .pk{font-family:var(--arch); font-weight:800; font-size:14px; letter-spacing:.3px; color:var(--violet); display:block; margin-bottom:4px}
.praxxis-player .pcard .ph{font-family:var(--serif); font-size:16px; display:block; margin-bottom:6px; color:var(--ink)}
.praxxis-player .pcard .pv{font-size:13.5px; color:var(--muted); line-height:1.5}
.praxxis-player .closer{font-size:17px; line-height:1.7; max-width:720px; text-wrap:pretty; color:var(--ink)}
.praxxis-player .praxxis-mark{font-family:var(--arch); font-weight:800; font-size:30px; letter-spacing:1px; color:var(--ink); margin:22px 0 18px}

@media (max-width:840px){
  .praxxis-player{padding-block:30px}
  .praxxis-player .app{flex-direction:column}
  .praxxis-player .side{width:100%; flex:none; border-right:none; border-bottom:1px solid var(--hair); padding:18px 18px 16px}
  .praxxis-player .ctitle{font-size:18px} .praxxis-player .cmod{margin-bottom:12px}
  .praxxis-player .lessons{flex-direction:row; flex-wrap:wrap; gap:8px; margin:4px 0 0; align-items:center}
  .praxxis-player .grp{display:none}
  .praxxis-player .les{margin:0; flex:0 0 auto; padding:0}
  .praxxis-player .les .t{display:none}
  .praxxis-player .les .mk{width:28px; height:28px; font-size:12px; color:var(--muted)}
  .praxxis-player .les.start .mk{font-size:15px} .praxxis-player .les.cur{background:none}
  .praxxis-player .ring, .praxxis-player .mark{display:none} .praxxis-player .foot{margin-top:0; padding-top:0}
  .praxxis-player .stage{padding:24px 20px 26px; min-height:0}
  .praxxis-player #intro, .praxxis-player #play{max-width:none}
  .praxxis-player h1{font-size:28px}
  .praxxis-player .introbody p, .praxxis-player .lead{font-size:15px}
  .praxxis-player .mgrid{grid-template-columns:1fr}
  .praxxis-player .px-nav{flex-direction:column} .praxxis-player .nb{min-width:0} .praxxis-player .nb.next{text-align:left}
  .praxxis-player .praxxis-mark{font-size:24px}
}
.scoreboard-wrap{color:var(--ink)}

.scoreboard{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink-line)}
.score-box{padding:30px 28px;transition:all .2s;cursor:default}
.score-box .lbl{margin-bottom:18px;opacity:.7}
.score-box h3{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.2vw,40px);line-height:0.95;text-transform:uppercase;margin-bottom:16px}
.score-box p{font-size:18px;line-height:1.5;opacity:.85}
.score-box.left{border-right:1px solid var(--ink-line)}
.score-box.left:hover,.score-box.left.held{background:var(--charcoal);color:var(--bg)}
.score-box.left:hover h3,.score-box.left.held h3{text-decoration:line-through;text-decoration-thickness:3px}
.score-box.right:hover,.score-box.right.held{background:var(--ink);color:var(--bg)}
.th-mark{color:var(--berry);font-weight:700}
.reframe-note{margin-top:28px;padding-top:18px;border-top:1px solid var(--ink-line);font-size:13px;line-height:1.5;color:var(--ink);opacity:.7}
.reframe-note .th-mark{margin-right:3px}

/* ============================================================
   PRAXXIS  (wordmark + tagline on top; full-width interactive
   box beneath holding the letter row and the phase detail)
   ============================================================ */
.method{background:var(--teal);color:var(--bg);padding:72px var(--pad);--px-accent:var(--chartreuse)}
.px-eyebrow{color:var(--px-accent);margin-bottom:20px}
.method .wordmark{font-family:var(--display);font-weight:900;font-size:clamp(56px,11vw,150px);letter-spacing:-0.04em;line-height:0.82;margin-bottom:24px;margin-left:-0.06em}
.method .wordmark .xx{color:var(--px-accent)}
.method .wordmark .wm-tm{font-size:0.2em;vertical-align:super;font-weight:700;letter-spacing:0;opacity:.85}
.px-bridge{font-family:var(--body);font-size:clamp(16px,1.8vw,21px);line-height:1.5;margin-bottom:30px}
.px-tagline{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,30px);line-height:1.2;margin-bottom:36px}

.px-box{border:1px solid rgba(253,249,240,.34)}
.letter-row{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid rgba(253,249,240,.34)}
.px-col{background:none;border:0;border-right:1px solid rgba(253,249,240,.34);padding:24px 16px;display:flex;flex-direction:column;justify-content:space-between;min-height:168px;color:var(--bg);cursor:pointer;transition:background .12s}
.px-col:last-child{border-right:0}
.px-col:hover{background:rgba(253,249,240,.08)}
.px-col.active{background:var(--chartreuse)}
.px-letter{font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,78px);line-height:0.9}
.px-col.active .px-letter{color:var(--teal)}
.px-foot{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.px-num{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;opacity:.6}
.px-name{font-family:var(--display);font-weight:700;font-size:clamp(13px,1.1vw,16px)}
.px-col.active .px-name{color:var(--teal)}
.px-col.active .px-num{color:var(--teal);opacity:.8}
.px-detail{padding:32px 30px}
.px-detail-lbl{color:var(--px-accent);margin-bottom:16px}
.px-detail-text{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.3vw,32px);line-height:1.2}
@media (max-width:760px){.px-col{min-height:120px;padding:16px 8px}.px-letter{font-size:34px}.px-name{font-size:11px}.px-detail{padding:24px 20px}}

/* ============================================================
   SEAM  (player -> six things)
   ============================================================ */
.seam{ background:var(--charcoal); color:var(--bg); padding:56px var(--pad); }
.seam p{ font-family:var(--serif); font-weight:400; font-size:clamp(21px,2.4vw,30px); line-height:1.34; letter-spacing:-0.01em; text-wrap:pretty; text-align:center; max-width:1000px; margin-inline:auto; }
.seam .px{ font-family:var(--display); font-weight:800; color:var(--chartreuse); font-size:0.92em; letter-spacing:0.01em; }

/* ============================================================
   SIX PRINCIPLES
   ============================================================ */
.principles{padding:72px var(--pad)}
.principles .mono-meta{color:var(--bright-purple);margin-bottom:20px}
.principles h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.5vw,61px);line-height:0.98;letter-spacing:-0.015em;margin-bottom:24px}
.principles h2 .em{font-style:italic;color:var(--bright-purple)}
.p-stack{display:grid;gap:0}

/* Transfer cut interaction */
.p-row{position:relative}
.cut-check{position:absolute;left:-34px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:2px solid var(--ink-line);background:var(--bg);cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;transition:border-color .15s,background .15s}
.cut-check::after{content:"";width:10px;height:10px;background:var(--bright-purple);opacity:0;transition:opacity .12s}
.cut-check:hover{border-color:var(--bright-purple)}
.cut-active .cut-check{display:flex}
.cut-check.on::after{opacity:1}
@media (max-width:900px){.cut-check{left:8px;top:14px;transform:none}}
.p-row.shake{animation:rowShake .4s ease}
.p-row.flash{background:var(--berry) !important;color:var(--bg) !important;border-color:var(--berry) !important}
@keyframes rowShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.p-row.cut-out{opacity:0;transform:scale(.96);max-height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0;overflow:hidden;transition:opacity .35s ease,transform .35s ease,max-height .45s ease .1s,padding .45s ease .1s,margin .45s ease .1s}

/* Transfer box pre/post states */
.tr-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tr-btn{background:var(--chartreuse);color:var(--teal);border:0;padding:10px 18px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;font-weight:700;text-transform:uppercase}
.tr-tell{display:none;background:transparent;color:var(--ink);border:1px solid var(--ink);padding:9px 18px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;font-weight:700;text-transform:uppercase}
.tr-row.armed .tr-tell{display:inline-block}
.tr-hint{display:none;font-size:14px;line-height:1.5;color:var(--ink-soft);margin-top:16px}
.tr-row.armed .tr-hint{display:block}
.tr-post{display:none}
.tr-done{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,28px);line-height:1.25;color:var(--ink)}
#tr-row.solved .tr-pre{display:none}
#tr-row.solved .tr-post{display:block}
.p-row{border:0;border-top:1px solid var(--ink-line);padding:30px 0;display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:start}
.p-row:not(.load-row):not(.invert) > div:first-of-type{border-right:1px dashed var(--ink-line);padding-right:36px;align-self:stretch}
.p-row .p-lbl{margin-bottom:12px}
.p-row h4{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.6vw,32px);line-height:1.08;letter-spacing:-0.01em;margin-bottom:10px}
.p-row .p-desc,.load-noisy,.load-clean{font-size:18px !important;line-height:1.5 !important;color:var(--ink-soft)}

/* P01 engagement */
.ekg{padding:0}
.ekg-top{display:flex;justify-content:flex-start;gap:8px;font-family:var(--mono);font-size:12px;margin-bottom:12px}
.ekg-top .alive{color:var(--bright-purple);font-weight:700}
.ekg-bars{height:40px;display:flex;align-items:center;gap:3px;margin-bottom:16px;overflow:hidden}
.ekg-bars div{flex:1;background:var(--bright-purple)}
.ekg-btn{width:100%;background:var(--chartreuse);color:var(--teal);border:0;padding:10px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;font-weight:700;text-transform:uppercase}
.ekg-result{display:none;justify-content:flex-start;gap:8px;font-family:var(--mono);font-size:12px;padding:12px 0 0;border-top:1px dashed var(--ink-line)}
.ekg-result .unmeasured{color:var(--berry);font-weight:700}
.ekg.checked .ekg-btn{display:none}
.ekg.checked .ekg-result{display:flex}

/* P02 cognitive load */
.load-row{display:block !important}
.load-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:20px}
.load-head h4{margin-bottom:0}
.load-btn{background:var(--chartreuse);color:var(--teal);border:0;padding:10px 18px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;font-weight:700;text-transform:uppercase;white-space:nowrap}
.load-card.reduced .load-btn{background:var(--teal);color:var(--bg)}
.load-noisy{font-size:22px;line-height:1.5;color:var(--ink-soft)}
.load-noisy .chip{background:var(--ink-faint);padding:1px 5px}
.load-noisy .uline{text-decoration:underline}
.load-noisy .rent{color:var(--berry);font-weight:700}
.load-noisy sup{color:var(--bright-purple)}
.load-noisy .paren{border:1px solid var(--ink-line);padding:0 4px}
.load-noisy .green{background:var(--chartreuse);padding:1px 5px}
.load-card.reduced .load-noisy{display:none}
.load-card:not(.reduced) .load-clean{display:none}

/* P03 practice */
.prac-btns{display:flex;gap:12px;margin-bottom:16px}
.prac-btns button{flex:1;padding:10px;font-family:var(--mono);font-size:12px;letter-spacing:0.06em;font-weight:700;text-transform:uppercase}
.prac-read{background:var(--chartreuse);border:0;color:var(--teal)}
.prac-do{background:var(--teal);color:var(--bg);border:0}
.prac-msg{min-height:56px;border:1px dashed var(--ink-line);padding:14px 16px;display:flex;align-items:center}
.prac-msg p{font-family:var(--serif);font-size:20px;font-style:italic;line-height:1.2}
.prac-msg .placeholder{font-family:var(--mono);font-size:12px;opacity:.5;font-style:normal}

/* Thing 04 feedback (fill the blank, receive feedback) */
.fb-row .p-lbl{color:var(--bright-purple)}
.fb-box{padding:0;background:var(--bg);transition:background .25s ease}
.fb-prompt{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--bright-purple);font-weight:700;margin-bottom:14px}
.fb-sentence{font-family:var(--serif);font-size:21px;line-height:1.4;margin-bottom:20px;color:var(--ink)}
.fb-input{font-family:var(--serif);font-size:21px;font-style:italic;color:var(--bright-purple);border:0;border-bottom:2px solid var(--ink);background:transparent;width:120px;text-align:center;padding:0 4px}
.fb-input:focus{outline:none;border-bottom-color:var(--bright-purple)}
.fb-controls{display:flex;gap:10px;flex-wrap:wrap}
.fb-submit{background:var(--chartreuse);color:var(--teal);border:0;padding:10px 18px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;font-weight:700;text-transform:uppercase}
.fb-tell{display:none;background:transparent;color:var(--ink);border:1px solid var(--ink);padding:9px 18px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;font-weight:700;text-transform:uppercase}
.fb-box.attempted .fb-tell{display:inline-block}
.fb-result{font-size:14px;line-height:1.5;margin-top:18px;display:none;color:var(--ink)}
.fb-box.answered .fb-result{display:block}
.fb-box.correct{background:var(--bright-purple);border-color:var(--bright-purple);padding:22px 24px}
.fb-box.correct .fb-prompt{color:var(--chartreuse)}
.fb-box.correct .fb-sentence{color:var(--bg)}
.fb-box.correct .fb-input{color:var(--bg);border-bottom-color:var(--bg)}
.fb-box.correct .fb-result{color:var(--bg)}
.fb-box.correct .fb-controls{display:none}
.fb-box.wrong{background:var(--berry);border-color:var(--berry);padding:22px 24px}
.fb-box.wrong .fb-prompt{color:var(--bg)}
.fb-box.wrong .fb-sentence{color:var(--bg)}
.fb-box.wrong .fb-input{color:var(--bg);border-bottom-color:var(--bg)}
.fb-box.wrong .fb-result{color:var(--bg)}
.fb-box.wrong .fb-tell{color:var(--bg);border-color:var(--bg)}

/* P05 transfer (inverted, single column) */
.p-row.invert{grid-template-columns:1fr}
.p-row.invert .p-lbl{color:var(--bright-purple)}

/* Thing 05 box principle (put the thing in a box) */
.bp-stage{display:flex;flex-direction:column;align-items:flex-start}
.bp-loose{display:flex;gap:36px;justify-content:center;align-items:center;width:100%;padding:18px 10px;transition:padding .3s,gap .3s}
.bp-item{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink);transition:padding .3s,background .3s,color .3s}
.bp-stage.boxed .bp-loose{gap:0;padding:0;border:1px solid var(--ink-line)}
.bp-stage.boxed .bp-item{flex:1;padding:24px 18px;font-family:var(--display);font-weight:900;font-size:17px;text-transform:uppercase;letter-spacing:-0.01em;font-style:normal;text-align:center;line-height:1.1}
.bp-stage.boxed .bp-nice{background:var(--charcoal);color:var(--bg);text-decoration:line-through;text-decoration-thickness:2px;border-right:1px solid rgba(253,249,240,.2)}
.bp-stage.boxed .bp-need{background:var(--ink);color:var(--bg)}
.bp-btn{margin-top:16px;background:var(--bright-purple);color:var(--bg);border:0;padding:10px 18px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;font-weight:700;text-transform:uppercase}
.bp-stage.boxed .bp-btn{display:none}


/* ============================================================
   CALLBACK  (full-bleed BRIGHT PURPLE)
   ============================================================ */
.callback{background:var(--bg);color:var(--ink);padding:96px var(--pad) 100px}
.callback .mono-meta{color:var(--bright-purple);margin-bottom:30px}
.callback h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,6vw,86px);line-height:0.98;letter-spacing:-0.02em;margin-bottom:40px}
.cb-word{position:relative;display:inline-block}
.cb-word .w{font-style:italic;color:var(--bright-purple);opacity:0;filter:blur(8px);transition:opacity .6s ease, filter .6s ease}
.cb-word .blank{position:absolute;left:0;bottom:10px;width:0.9em;min-width:120px;border-bottom:4px solid var(--ink)}
.callback.seen .cb-word .w{opacity:1;filter:blur(0)}
.callback.seen .cb-word .blank{opacity:0}
.cb-body{opacity:0;transform:translateY(12px);transition:opacity .7s ease .4s, transform .7s ease .4s}
.callback.seen .cb-body{opacity:1;transform:translateY(0)}
.cb-body p{font-size:clamp(15px,1.5vw,19px);line-height:1.5;margin-bottom:18px}
.cb-body p:last-child{margin-bottom:0}
.hl{background:var(--bright-purple);color:var(--bg);padding:2px 8px;font-weight:700}

/* ============================================================
   CHANNELS
   ============================================================ */
.channels{padding:72px var(--pad);background:var(--charcoal);color:var(--bg)}
.channels .mono-meta{color:var(--chartreuse);margin-bottom:20px}
.channels h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.5vw,61px);line-height:1.0;letter-spacing:-0.01em;color:var(--bg);margin-bottom:24px}
.channels h2 .em{font-style:italic;color:var(--chartreuse)}
.channels-lead{ font-family:var(--body); font-size:clamp(16px,1.7vw,20px); line-height:1.55; color:var(--bg); margin:18px 0 38px; text-wrap:pretty; }
.channels-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(253,249,240,.34)}
.ch-box{display:flex;flex-direction:column;padding:26px 22px 24px;border-right:1px solid rgba(253,249,240,.34);min-height:262px;cursor:pointer;color:var(--bg);text-decoration:none;transition:background .15s,color .15s}
.ch-box:last-child{border-right:0}
.ch-cat{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;font-weight:600;opacity:.55;margin-bottom:18px}
.ch-name{font-family:var(--display);font-weight:900;font-size:clamp(19px,1.9vw,26px);line-height:0.98;letter-spacing:-0.01em;text-transform:uppercase;margin-bottom:14px}
.ch-box p{font-size:13px;line-height:1.5;opacity:.78;margin-bottom:auto}
.ch-open{margin-top:20px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--chartreuse)}
.ch-box.active{background:var(--chartreuse);color:var(--teal)}
.ch-box.active .ch-cat{opacity:.7}
.ch-box.active p{opacity:.85}
.ch-box.active .ch-open{color:var(--teal)}

/* ============================================================
   CLOSING + FOOTER
   ============================================================ */
.closing{padding:84px var(--pad) 64px;background:var(--bg);color:var(--ink)}
.closing p{font-family:var(--serif);font-size:clamp(30px,4.1vw,58px);line-height:1.04;font-style:normal;margin-bottom:36px}
.closing p .lp{color:var(--bright-purple);font-style:italic}
.closing-btns{display:flex;gap:14px;flex-wrap:wrap}
.closing-btns button{font-family:var(--mono);font-size:13px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700}
.closing-btns .join{background:var(--chartreuse);color:var(--teal);border:0;padding:18px 30px}
.closing-btns .read{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:16px 30px}

.site-footer{background:var(--charcoal);color:var(--bg);padding:60px var(--pad) 34px}
.foot-top{display:grid;grid-template-columns:1.8fr 1.6fr 1fr 1fr;gap:40px;border-top:1px solid rgba(253,249,240,.34);padding-top:46px}
.site-footer .logo{font-size:28px;color:var(--bg);margin-bottom:18px}
.site-footer .logo .amp{color:var(--chartreuse)}
.foot-about{font-size:14px;line-height:1.6;color:rgba(253,249,240,0.72);max-width:46ch}
.foot-col .mono-meta{display:block;margin-bottom:18px}
.foot-links{display:flex;flex-direction:column;gap:11px}
.foot-links.two-col{display:grid;grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:28px;row-gap:11px;width:fit-content}
.foot-links a{font-size:14px;color:rgba(253,249,240,0.72);cursor:pointer;width:fit-content}
.foot-links a:hover{color:var(--chartreuse)}
.foot-social{display:flex;gap:11px}
.foot-social a{width:38px;height:38px;border:1px solid rgba(253,249,240,.34);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--bg);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.foot-social a:hover{background:var(--chartreuse);color:var(--charcoal);border-color:var(--chartreuse)}
.foot-social svg{width:16px;height:16px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(253,249,240,.34);margin-top:44px;padding-top:22px}
.foot-copy{font-size:12.5px;color:rgba(253,249,240,0.6)}
.foot-legal{display:flex;gap:22px}
.foot-legal a{font-size:12.5px;color:rgba(253,249,240,0.6);cursor:pointer}
.foot-legal a:hover{color:var(--chartreuse)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  :root{--pad:28px}
  .praxxis-grid{grid-template-columns:1fr}
  .phase-list{border-right:0;border-bottom:1px solid var(--ink)}
  .p-row{grid-template-columns:1fr}
  .channels-grid{grid-template-columns:1fr 1fr}
  .ch-box:nth-child(2){border-right:0}
  .ch-box:nth-child(-n+2){border-bottom:1px solid var(--ink)}
  .ch-box:nth-child(-n+2){border-bottom-color:rgba(253,249,240,.34)}
  .foot-top{grid-template-columns:1fr;gap:34px}
}
@media (max-width:560px){
  :root{--pad:20px}
  .nav{display:none}
  .scoreboard,.channels-grid{grid-template-columns:1fr}
  .score-box.left{border-right:0;border-bottom:1px solid var(--ink-line)}
  .ch-box{border-right:0;border-bottom:1px solid var(--ink)}
  .ch-box:last-child{border-bottom:0}
  .prac-btns{flex-direction:column}
  .load-head{flex-direction:column;align-items:flex-start;gap:14px}
  .ch-box{border-bottom-color:rgba(253,249,240,.34)}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}