/* Machina Institute. Style 10: Spatial.
   Isometric depth, one aligned grid, a measured colour sequence.
   Every colour pair in here was computed, not eyeballed. Numbers in NOTES.md. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}

:root{
  color-scheme: light;

  /* ground and ink */
  --bs:#F7F5FA;   /* page ground */
  --fr:#FBFAFD;   /* far plane */
  --nr:#FFFFFF;   /* near plane, cards */
  --md:#EAEDF5;   /* recessed plane */
  --sl:#CFD6E4;   /* neutral hard shadow */
  --ru:#DDE2EC;   /* hairline, decoration only */
  --ed:#8A94A6;   /* border, 3.06:1 on white */
  --ink:#0E1116;  /* 18.91:1 on white */
  --k2:#333B4A;   /* 11.26:1 on white */
  --mu:#525C70;   /* 6.72:1 on white */
  --onk:#D3D9E6;  /* body text on ink, 13.36:1 */
  --onk2:#A9B2C4; /* quiet text on ink, 8.87:1 */

  /* the ten course colours. fill + text colour that sits on it + deep for type + tint for shadow */
  --c1:#E00025;--c1f:#fff;--c1d:#E00025;--c1t:#FFD1CD;--c1p:#FFF1EF;
  --c2:#FF7401;--c2f:var(--ink);--c2d:#B85100;--c2t:#FFD3BE;--c2p:#FFF1EA;
  --c3:#F5A100;--c3f:var(--ink);--c3d:#9B6400;--c3t:#FFD6A5;--c3p:#FFF2E3;
  --c4:#D3B100;--c4f:var(--ink);--c4d:#846E00;--c4t:#F4DE8C;--c4p:#FDF5D7;
  --c5:#82C600;--c5f:var(--ink);--c5d:#507B00;--c5t:#C7EDA2;--c5p:#ECFADE;
  --c6:#00CC81;--c6f:var(--ink);--c6d:#00804E;--c6t:#A1F4C4;--c6p:#DFFDEA;
  --c7:#00C8BB;--c7f:var(--ink);--c7d:#007E74;--c7t:#85F5E8;--c7p:#D8FEF8;
  --c8:#00C3EB;--c8f:var(--ink);--c8d:#007A94;--c8t:#A8EAFF;--c8p:#E5F8FF;
  --c9:#006AE5;--c9f:#fff;--c9d:#006AE5;--c9t:#CAE0FF;--c9p:#EEF5FF;
  --c10:#9306FF;--c10f:#fff;--c10d:#9830FF;--c10t:#E3D6FF;--c10p:#F6F2FF;

  /* action and the eight node states */
  --pk:#D40091;--pkt:#FFCEE5;--pkp:#FFF0F7;--pkl:#FFA3D2;
  --gr:#008140;--grt:#A9F3BC;--grp:#E2FDE8;--grl:#59E48A;
  --te:#007D78;--tet:#83F5ED;--tep:#D7FEFA;--tel:#00E1D8;
  --am:#986500;--amt:#FFD7A0;--amp:#FFF2E2;--aml:#FFB333;
  --rd:#E00025;--rdt:#FFD1CD;--rdp:#FFF1EF;--rdl:#FFAAA3;
  --bl:#0072C4;--blt:#C5E1FF;--blp:#EDF6FF;--bll:#95C9FF;

  --sa: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mo: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --pd:14px;
  --mx:1100px;
  --r:14px;
  --dock:0px;
}

body{
  font-family:var(--sa);
  color:var(--ink);
  font-size:1rem;
  line-height:1.55;
  letter-spacing:-0.004em;
  background-color:var(--bs);
  background-image:
    repeating-linear-gradient(30deg, rgba(14,17,22,.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(-30deg, rgba(212,0,145,.07) 0 1px, transparent 1px 48px);
  background-attachment:fixed;
  padding-bottom:var(--dock);
}
body.lp{--dock:96px}
body.app{--dock:128px}

h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img,svg{max-width:100%}

.mono{font-family:var(--mo);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--pk);outline-offset:2px;border-radius:5px}

.wrap{width:100%;max-width:var(--mx);margin:0 auto;padding:0 var(--pd)}
.sec{padding:40px 0 4px}
.sec-last{padding-bottom:30px}

/* ---------- small parts ---------- */
.ic{width:1.2rem;height:1.2rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic-s{width:1rem;height:1rem}
.kicker{font-family:var(--mo);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--mu);display:flex;align-items:center;gap:9px;line-height:1.3}
.kicker::before{content:"";width:13px;height:13px;background:var(--pk);transform:rotate(45deg) scale(.9);flex:0 0 auto}
.h2{font-size:clamp(1.3rem,5.4vw,2.15rem);line-height:1.16;letter-spacing:-0.03em;font-weight:670;margin:12px 0 10px}
.lede{color:var(--k2);font-size:1rem;line-height:1.55;max-width:58ch}
.note{font-size:1rem;color:var(--mu);margin-top:14px;line-height:1.5}

.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mo);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600;padding:4px 9px;border:1px solid var(--ed);border-radius:999px;color:var(--k2);background:var(--nr);line-height:1.35;overflow-wrap:anywhere}
.tag{display:inline-block;padding:2px 7px;border-radius:3px;background:var(--ink);color:#fff;font-family:var(--mo);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;line-height:1.5}

.btn,.cpy,.jump,.swi{display:inline-flex;align-items:center;gap:8px;min-height:2.9rem;border:1px solid;border-radius:11px;font:inherit;font-weight:650;text-decoration:none;cursor:pointer}
.btn{justify-content:center;padding:0 18px;border-color:var(--pk);background:var(--pk);color:#fff;font-size:1rem;box-shadow:0 6px 0 -1px #8E0061,0 16px 24px -16px rgba(14,17,22,.7)}
.btn:active{transform:translate3d(0,3px,0);box-shadow:0 3px 0 -1px #8E0061}
.btn-2{border-color:var(--ink);background:var(--nr);color:var(--ink);box-shadow:0 5px 0 -1px var(--sl)}
.field{min-height:2.9rem;width:100%;min-width:0;padding:0 11px;border:1px solid var(--ed);border-radius:11px;background:var(--nr);color:var(--ink);font:inherit;font-size:1rem;box-shadow:inset 0 2px 3px rgba(14,17,22,.08)}
.field::placeholder{color:#5A6478;font-size:.9rem;opacity:1}
.form{display:flex;flex-wrap:wrap;gap:9px;align-items:stretch;margin-top:8px}
.form .field{flex:1 1 190px}
.form .btn{flex:1 1 auto;white-space:nowrap}
.micro{font-size:.8rem;color:var(--mu);margin-top:7px;line-height:1.4}

.meter{height:10px;border:1px solid var(--ed);border-radius:999px;background:var(--md);overflow:hidden}
.meter{display:block}
.meter i{display:block;height:100%;background:var(--pk);border-right:2px solid var(--nr)}

/* ---------- header ---------- */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 8px;padding:0}
.wm{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-weight:700;letter-spacing:-0.03em;font-size:.95rem;min-height:2.75rem;padding-right:4px}
.wm .mark{width:1.3rem;height:1.3rem;flex:0 0 auto;stroke:var(--pk);fill:none;stroke-width:1.7;stroke-linejoin:round}
.wm span{color:var(--mu);font-weight:520}
.topnav{display:flex;flex-wrap:wrap;gap:0;font-size:.7rem;font-weight:550;letter-spacing:-0.014em;color:var(--k2)}
.topnav a{text-decoration:none;display:flex;align-items:center;min-height:2.75rem;padding:0 3px;white-space:nowrap;border-radius:8px}
.topnav a:hover{color:var(--pk);background:var(--pkp)}

/* ---------- hero ---------- */
.hero{padding:0 0 22px}
.hero-plate{position:relative;padding:8px 12px 13px;border:1px solid var(--ink);border-radius:var(--r);background:var(--ink);color:#fff;
  box-shadow:10px 10px 0 -1px var(--pkt),0 30px 44px -30px rgba(14,17,22,.85)}
.hero h1{font-size:clamp(1.22rem,5.2vw,3rem);line-height:1.06;letter-spacing:-0.032em;font-weight:680;color:#fff}
.hero .sub{margin-top:7px;font-size:1rem;line-height:1.36;color:var(--onk);max-width:54ch}
.facts{margin-top:8px;display:grid;gap:3px;font-family:var(--mo);font-size:.74rem;letter-spacing:-0.02em;color:var(--onk)}
.facts b{color:#fff;font-weight:650}
.facts .row{display:flex;align-items:center;gap:8px;line-height:1.3}
.facts .meter{flex:1 1 auto;max-width:130px;border-color:#6E7A90;background:#242A36}
.facts .meter i{background:var(--pkl);border-right-color:var(--ink)}
.hero .form{max-width:540px;gap:6px;margin-top:5px}
.hero .form .field{flex:1 1 140px}
.hero .form .btn{flex:0 1 auto;padding:0 12px;font-size:.95rem}
.hero .field{border-color:#8D99B0}
.hero .micro{color:var(--onk2)}

/* ---------- proof strip ---------- */
.proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.proof li{flex:1 1 96px}
.proof li{padding:11px 10px 10px;border:1px solid var(--ed);border-radius:10px;background:var(--nr);box-shadow:5px 5px 0 -1px var(--ct,var(--sl))}
.proof .n,.proof .l{display:block}
.proof .n{font-family:var(--mo);font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1;letter-spacing:-0.05em;color:var(--cd,var(--ink))}
.proof .l{font-size:.82rem;color:var(--k2);margin-top:5px;line-height:1.25}

/* ---------- differentiator ---------- */
.diff{margin-top:8px;padding:20px 17px;border:1px solid var(--ed);border-left:7px solid var(--pk);border-radius:var(--r);background:var(--nr);box-shadow:12px 12px 0 -1px var(--pkt)}
.diff .h2{max-width:24ch}

/* ---------- session anatomy ---------- */
.planes{margin-top:20px;display:grid;gap:12px}
.plane{position:relative;padding:14px 15px;border:1px solid var(--ed);border-left:7px solid var(--cd);border-radius:11px;background:var(--nr);color:var(--k2);box-shadow:8px 8px 0 -1px var(--ct)}
.plane .ph{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.plane .pn{font-family:var(--mo);font-size:.78rem;color:var(--mu);width:1.5em;flex:0 0 auto}
.plane .pt{font-weight:670;font-size:1.05rem;letter-spacing:-0.02em;color:var(--ink)}
.plane .pm{margin-left:auto;font-family:var(--mo);font-size:.9rem;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.plane .pd{font-size:1rem;line-height:1.5;margin-top:6px;padding-left:calc(1.5em + 10px)}
.plane .rail{display:block;margin:10px 0 0 calc(1.5em + 10px);height:7px;background:var(--md);border-radius:999px;overflow:hidden;border:1px solid var(--ed)}
.plane .rail i{display:block;height:100%;width:var(--pct);background:var(--cd)}
.plane.is-now{border-color:var(--pk);border-left-color:var(--pk);background:var(--pkp);box-shadow:8px 8px 0 -1px var(--pkt),0 24px 34px -26px rgba(14,17,22,.8)}
.plane.is-now .rail i{background:var(--pk)}
.plane.is-now .pm{color:var(--pk)}
.plane-total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:12px 16px;border-radius:11px;background:var(--ink);color:#fff;box-shadow:8px 8px 0 -1px var(--sl)}
.plane-total .t{font-family:var(--mo);font-size:1rem;font-weight:600}

/* ---------- the ten courses ---------- */
.cmap{margin-top:20px;display:grid;gap:14px}
.course{position:relative;display:grid;grid-template-columns:auto 1fr;gap:13px;padding:14px 15px;border:1px solid var(--ed);border-left:7px solid var(--cd);border-radius:11px;background:var(--nr);box-shadow:8px 8px 0 -1px var(--ct)}
.course .cn{flex:0 0 auto;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:9px;border:1px solid rgba(14,17,22,.24);background:var(--c);color:var(--cf);font-family:var(--mo);font-weight:700;font-size:1.05rem;letter-spacing:-0.03em}
.course h3{font-size:1.08rem;font-weight:670;letter-spacing:-0.025em;line-height:1.25}
.course .cm{font-family:var(--mo);font-size:.78rem;color:var(--mu);margin-top:6px;line-height:1.5}
.course .cm .tag{margin-right:6px}
.course .cl{font-size:1rem;color:var(--k2);margin-top:7px;line-height:1.45}
.course .cl b{font-weight:650;color:var(--ink)}
.course.is-flag{box-shadow:8px 8px 0 -1px var(--ct),0 0 0 2px var(--cd) inset}

/* ---------- certificates ---------- */
.cert{margin-top:8px;padding:19px 16px;border:1px solid var(--ed);border-radius:var(--r);background:var(--nr);box-shadow:12px 12px 0 -1px var(--sl)}
.honest{margin-top:16px;padding:15px;border:1px solid var(--gr);border-left:7px solid var(--gr);border-radius:11px;background:var(--grp)}
.honest .q{font-family:var(--mo);font-size:1rem;font-weight:650;letter-spacing:-0.02em;display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.honest .q .ic{color:var(--gr)}
.honest p{font-size:1rem;color:var(--k2);margin-top:9px;line-height:1.5}

/* ---------- access ---------- */
.acc-list{margin-top:18px;display:grid;gap:10px}
.acc-list li{display:flex;gap:11px;padding:14px 15px;border:1px solid var(--ed);border-radius:11px;background:var(--nr);font-size:1rem;line-height:1.5;color:var(--k2);box-shadow:6px 6px 0 -1px var(--c7t)}
.acc-list .ic{color:var(--c7d);margin-top:2px}

/* ---------- audience ---------- */
.aud{margin-top:18px;padding:17px 16px;border:1px solid var(--ed);border-radius:var(--r)}
.aud h2,.aud h3{font-size:1.15rem;letter-spacing:-0.025em;font-weight:670;display:flex;align-items:center;gap:9px;line-height:1.3}
.aud ul{margin-top:13px;display:grid;gap:10px;font-size:1rem;line-height:1.5}
.aud li{display:flex;gap:10px}
.aud-for{background:var(--nr);border-left:7px solid var(--gr);box-shadow:10px 10px 0 -1px var(--grt)}
.aud-for h2 .ic,.aud-for li .ic{color:var(--gr)}
.aud-not{background:var(--fr);color:var(--k2);box-shadow:inset 0 2px 4px rgba(14,17,22,.08)}
.aud-not h3 .ic,.aud-not li .ic{color:var(--mu)}

/* ---------- final call, footer ---------- */
.fin{margin-top:10px;padding:22px 17px;border:1px solid var(--ink);border-radius:var(--r);background:var(--ink);color:#fff;box-shadow:12px 12px 0 -1px var(--pkt)}
.fin h2{font-size:clamp(1.3rem,5.2vw,2rem);line-height:1.18;letter-spacing:-0.03em;font-weight:670}
.fin .sub{margin-top:9px;font-family:var(--mo);font-size:.88rem;color:var(--onk);line-height:1.45}
.fin .field{background:#1B2130;color:#fff;border-color:#8D99B0}
.fin .field::placeholder{color:#AEB7C8}
.fin .cond{margin-top:15px;font-size:.9rem;line-height:1.5;color:var(--onk);border-top:1px solid #394152;padding-top:12px}
.foot{margin-top:30px;padding:18px 0 24px;border-top:1px solid var(--ed);font-size:.85rem;color:var(--mu);line-height:1.55}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 10px;margin:6px 0 8px;font-family:var(--mo);font-size:.8rem}
.foot nav a{min-height:2.75rem;display:inline-flex;align-items:center;padding:0 6px;border-radius:8px}
.foot nav a:hover{color:var(--pk);background:var(--pkp)}

/* ---------- sticky call to action, phone only ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));background:var(--nr);border-top:1px solid var(--ed);box-shadow:0 -14px 26px -22px rgba(14,17,22,.9)}
.sticky .s-l{min-width:0;font-family:var(--mo);font-size:.74rem;line-height:1.3;color:var(--k2)}
.sticky .s-l b{display:block;color:var(--ink);font-size:.88rem}
.sticky .btn{padding:0 16px;white-space:nowrap}

/* =========================================================
   path.html
   ========================================================= */
.skip{position:absolute;left:10px;top:-70px;z-index:60;padding:12px 16px;background:var(--ink);color:#fff;border-radius:9px;text-decoration:none;font-size:.95rem;font-weight:650}
.skip:focus{top:10px}

.pbar{padding:12px 0 14px;border-bottom:1px solid var(--ed)}
.pbar .who{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.av{flex:0 0 auto;display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:11px;border:1px solid var(--ed);background:var(--nr);font-family:var(--mo);font-weight:700;font-size:.95rem;box-shadow:4px 4px 0 -1px var(--sl)}
.pbar .nm{font-weight:670;font-size:.95rem;letter-spacing:-0.02em;line-height:1.25}
.pbar .co{font-family:var(--mo);font-size:.76rem;color:var(--mu);margin-top:2px;line-height:1.3}
.ring{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 1 auto}
.ring svg{width:2.8rem;height:2.8rem;flex:0 0 auto}
.ring .rt{font-family:var(--mo);font-size:.68rem;color:var(--k2);line-height:1.3;max-width:5.4em}
.ring .rt b{display:block;color:var(--ink);font-size:.8rem}

/* course switcher */
.swbox{margin-top:14px}
.swi{width:100%;flex-wrap:wrap;justify-content:flex-start;gap:6px 11px;padding:9px 12px;border-color:var(--ed);background:var(--nr);color:var(--ink);box-shadow:5px 5px 0 -1px var(--c1t);list-style:none;text-align:left}
.swi::-webkit-details-marker{display:none}
.swi .cn{flex:0 0 auto;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:8px;border:1px solid rgba(14,17,22,.24);background:var(--c1);color:var(--c1f);font-family:var(--mo);font-weight:700;font-size:.95rem}
.swi .sl1{font-size:.98rem;font-weight:670;letter-spacing:-0.02em;line-height:1.25;display:block}
.swi .sl2{font-family:var(--mo);font-size:.76rem;color:var(--mu);font-weight:500;line-height:1.3;display:block;margin-top:1px}
.swi .chev{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:6px;font-family:var(--mo);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--pk)}
.swi .chev .ic{transition:transform .18s}
details[open] .swi .chev .ic{transform:rotate(180deg)}
details[open] .swi{border-color:var(--pk);box-shadow:5px 5px 0 -1px var(--pkt)}

.sheet{margin-top:12px;padding:16px 14px;border:1px solid var(--ed);border-radius:var(--r);background:var(--nr);box-shadow:10px 10px 0 -1px var(--sl)}
.sheet h2{font-size:1.15rem;letter-spacing:-0.03em;font-weight:670;line-height:1.3}
.sheet .sn{font-size:1rem;color:var(--mu);margin-top:6px;line-height:1.5}
.spectrum{display:flex;margin-top:14px;height:22px;border-radius:6px;overflow:hidden;border:1px solid rgba(14,17,22,.22)}
.spectrum i{display:block;height:100%;background:var(--c);border-right:1px solid rgba(255,255,255,.75)}
.spectrum i:last-child{border-right:0}
.speclab{display:flex;flex-wrap:wrap;gap:2px 8px;justify-content:space-between;font-family:var(--mo);font-size:.72rem;color:var(--mu);margin-top:5px}
.clist{margin-top:16px;display:grid;gap:10px}
.crow{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:11px 12px;border:1px solid var(--ed);border-left:6px solid var(--cd);border-radius:10px;background:var(--nr);text-decoration:none;box-shadow:5px 5px 0 -1px var(--ct)}
a.crow:hover{background:var(--cp)}
.crow .cn{flex:0 0 auto;display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:8px;border:1px solid rgba(14,17,22,.24);background:var(--c);color:var(--cf);font-family:var(--mo);font-weight:700;font-size:.95rem}
.crow .ct,.crow .cmeta,.crow .cst{display:block}
.crow .ct{font-size:1rem;font-weight:660;letter-spacing:-0.02em;line-height:1.3}
.crow .cmeta{font-family:var(--mo);font-size:.75rem;color:var(--mu);margin-top:4px;line-height:1.45}
.crow .cst b{font-weight:680;color:var(--ink)}
.crow .cst{display:flex;gap:8px;align-items:flex-start;font-size:.95rem;line-height:1.5;color:var(--k2);margin-top:7px}
.crow.is-active{border-color:var(--pk);border-left-color:var(--pk);background:var(--pkp);box-shadow:5px 5px 0 -1px var(--pkt)}
.crow.is-locked{background:var(--fr);border-style:dashed;border-left-style:solid;box-shadow:none}
.crow.is-locked .cn{filter:grayscale(1);opacity:.75}
.crow.is-locked .ct{color:var(--k2)}
.paths{margin-top:20px;padding-top:16px;border-top:1px solid var(--ed)}
.paths h3{font-size:1.05rem;letter-spacing:-0.025em;font-weight:670}
.paths ol{margin-top:12px;display:grid;gap:9px}
.paths li{padding:11px 12px;border:1px solid var(--ed);border-radius:10px;background:var(--fr)}
.paths .pn2{font-size:.98rem;font-weight:650;letter-spacing:-0.02em;line-height:1.3}
.paths .pr{font-family:var(--mo);font-size:.78rem;color:var(--mu);margin-top:4px;line-height:1.45}
.paths .pp{font-size:.95rem;color:var(--k2);margin-top:5px;line-height:1.4}

/* resume card, the primary action */
.resume{margin-top:20px;padding:17px 15px;border:1px solid var(--pk);border-radius:var(--r);background:var(--nr);box-shadow:10px 10px 0 -1px var(--pkt),0 28px 40px -30px rgba(14,17,22,.85)}
.resume .rl{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-family:var(--mo);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--pk);font-weight:650}
.resume h2{margin-top:9px;font-size:1.25rem;line-height:1.24;letter-spacing:-0.03em;font-weight:680}
.resume .rid{font-family:var(--mo);font-size:.8rem;color:var(--mu);margin-top:6px;line-height:1.45}
.steps{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
.steps li{flex:1 1 0;min-width:0;padding:7px 4px 8px;border:1px solid var(--ed);border-bottom-width:4px;border-radius:7px;background:var(--fr);text-align:center}
.steps .sn{font-family:var(--mo);font-size:.68rem;color:var(--mu);display:block;line-height:1.3}
.steps .sl{font-size:.68rem;line-height:1.2;color:var(--k2);display:block;margin-top:3px;overflow-wrap:anywhere}
.steps li.done{background:var(--grp);border-color:var(--gr)}
.steps li.done .sn,.steps li.done .sl{color:var(--gr)}
.steps li.now{background:var(--pkp);border-color:var(--pk);border-bottom-color:var(--pk)}
.steps li.now .sl,.steps li.now .sn{color:var(--pk);font-weight:670}
.resume .rmeta{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px}
.resume .btn{margin-top:14px;width:100%}

/* copy block */
.pb{margin-top:18px;padding:15px 14px;border:1px solid var(--ed);border-radius:var(--r);background:var(--nr);box-shadow:8px 8px 0 -1px var(--c8t)}
.pb .pbh{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.pb .pbl{font-family:var(--mo);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mu);line-height:1.4}
.pb pre{margin:11px 0 0;padding:13px;border:1px solid var(--ed);border-radius:9px;background:var(--fr);font-family:var(--mo);font-size:.88rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.cpy{white-space:nowrap;padding:0 14px;border-color:var(--ink);background:var(--nr);color:var(--ink);font-size:.92rem;box-shadow:3px 3px 0 -1px var(--sl)}
.cpy.is-done{background:var(--gr);color:#fff;border-color:var(--gr)}

/* ---------- the path ---------- */
.pathsec{margin-top:26px}
.pathsec>h2{font-size:1.25rem;letter-spacing:-0.03em;font-weight:680}
.pathsec>.pnote{font-size:1rem;color:var(--mu);margin-top:6px;line-height:1.5}
.plist{position:relative;margin-top:16px;padding:20px 16px 24px;border:1px solid var(--ed);border-radius:var(--r);background:
  repeating-linear-gradient(30deg, rgba(14,17,22,.055) 0 1px, transparent 1px 34px),
  repeating-linear-gradient(-30deg, rgba(14,17,22,.055) 0 1px, transparent 1px 34px),
  linear-gradient(var(--fr),var(--bs) 55%,var(--md))}
.plist>li{position:relative;padding-bottom:34px}
.plist>li:last-child{padding-bottom:0}

/* the ribbon between two nodes. decoration, and it takes the colour of the node above it */
.plist>li::after{content:"";position:absolute;left:calc(50% - 15px);top:calc(100% - 34px);width:30px;height:34px;
  background:linear-gradient(var(--bm,var(--sl)) 0 40%, var(--bm2,var(--ed)) 40% 100%);
  transform:skewX(var(--sk,-22deg));border-radius:2px;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.45),inset -1px 0 0 rgba(14,17,22,.16)}
.plist>li:nth-child(even)::after{--sk:22deg}
.plist>li:last-child::after{display:none}
.s-held{--bm:var(--grl);--bm2:var(--gr)}
.s-done{--bm:var(--tel);--bm2:var(--te)}
.s-prog{--bm:var(--pkl);--bm2:var(--pk)}
.s-rev{--bm:var(--aml);--bm2:var(--am)}
.s-retake{--bm:var(--rdl);--bm2:var(--rd)}
.s-sched{--bm:var(--bll);--bm2:var(--bl)}
.s-skip,.s-lock{--bm:var(--ru);--bm2:var(--ed)}

.node{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;min-height:3.6rem;padding:13px 14px;border:1px solid var(--ed);border-left:7px solid var(--nd,var(--ed));border-radius:11px;background:var(--nr);box-shadow:7px 7px 0 -1px var(--ndt,var(--sl))}
.node .badge{flex:0 0 auto;display:grid;place-items:center;min-width:2.6rem;height:2.4rem;padding:0 5px;border-radius:8px;border:1px solid var(--ed);background:var(--fr);font-family:var(--mo);font-weight:700;font-size:.72rem;letter-spacing:-0.04em}
.node .t{font-size:1.02rem;font-weight:660;letter-spacing:-0.02em;line-height:1.3;text-decoration:none;display:flex;align-items:center;min-height:2.75rem;color:var(--ink)}
a.t::before{content:"";position:absolute;inset:-1px;border-radius:5px}
a.t:hover{color:var(--pk)}
.node .meta{font-family:var(--mo);font-size:.75rem;color:var(--mu);margin-top:5px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;line-height:1.45}
.node .st{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;font-size:.95rem;line-height:1.5;color:var(--k2);margin-top:8px}
.node .out{font-size:1rem;line-height:1.5;color:var(--k2);margin-top:9px;padding-top:9px;border-top:1px solid var(--ru)}
.node .sn{font-family:var(--mo);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mu);display:block}
.node .chip{border-color:transparent;background:var(--nd,var(--ed));color:#fff}

/* node states. colour is the third signal, after the icon and the words */
.s-held .node{--nd:var(--gr);--ndt:var(--grt);background:var(--grp)}
.s-done .node{--nd:var(--te);--ndt:var(--tet);background:var(--tep)}
.s-prog .node{--nd:var(--pk);--ndt:var(--pkt);background:var(--nr);border-width:2px;border-left-width:9px;box-shadow:9px 9px 0 -1px var(--pkt),0 30px 44px -26px rgba(14,17,22,.9)}
.s-prog .t{color:var(--pk)}
.s-rev .node{--nd:var(--am);--ndt:var(--amt);background:var(--amp)}
.s-retake .node{--nd:var(--rd);--ndt:var(--rdt);background:var(--rdp)}
.s-sched .node{--nd:var(--bl);--ndt:var(--blt);background:var(--blp)}
.s-skip .node{--nd:var(--mu);--ndt:var(--ru);background:var(--fr);border-style:dashed;border-left-style:solid}
.s-lock .node{--nd:var(--ed);--ndt:var(--ru);background:var(--fr);border-style:dashed;border-left-style:solid;box-shadow:none}
.s-lock .t,.s-skip .t{color:var(--k2)}
.s-lock .badge{background:transparent;border-style:dashed;color:var(--mu)}
.s-lock .chip,.s-skip .chip{background:var(--nr);color:var(--k2);border-color:var(--ed)}

/* node types */
.n-mod{--bm:#4A5468;--bm2:var(--ink)}
.n-mod .node{grid-template-columns:1fr;background:var(--ink);color:#fff;border-color:var(--ink);border-left:7px solid var(--c1);border-radius:11px;box-shadow:8px 8px 0 -1px var(--c1t);min-height:0;padding:13px 15px}
.n-mod .ml{font-family:var(--mo);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--onk2);display:flex;align-items:center;gap:8px;line-height:1.4}
.n-mod h3{font-size:1.1rem;font-weight:670;letter-spacing:-0.025em;margin-top:6px;line-height:1.28;color:#fff}
.n-day5 .node,.n-cert .node,.n-proj .node{border-top:4px solid var(--nd,var(--ed))}
.n-day5 .badge,.n-cert .badge,.n-proj .badge,.n-rev .badge,.n-del .badge{border-radius:999px}
.marker{display:flex;align-items:center;gap:10px;padding:4px 0}
.marker .ln{flex:1 1 auto;height:0;border-top:3px dashed var(--pk)}
.marker .mt{font-family:var(--mo);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--pk);display:flex;align-items:center;gap:7px;font-weight:670;line-height:1.4;background:var(--nr);border:1px solid var(--pk);border-radius:999px;padding:5px 10px}
.n-marker{padding-bottom:34px}

/* ---------- fixed bottom dock: jump plus tabs ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--nr);border-top:1px solid var(--ed);box-shadow:0 -14px 26px -22px rgba(14,17,22,.9);padding-bottom:env(safe-area-inset-bottom)}
.jump{width:calc(100% - 24px);margin:9px 12px 7px;justify-content:center;padding:0 14px;border-color:var(--ink);background:var(--nr);color:var(--ink);font-size:.95rem;box-shadow:0 4px 0 -1px var(--sl)}
.jump:active{transform:translate3d(0,2px,0);box-shadow:0 2px 0 -1px var(--sl)}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ru)}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:3.4rem;text-decoration:none;font-size:.7rem;color:var(--mu);letter-spacing:-0.01em;text-align:center;overflow-wrap:anywhere;padding:4px 2px}
.tabs a[aria-current="page"]{color:var(--pk);box-shadow:inset 0 3px 0 var(--pk);background:var(--pkp)}

@media (max-width:459px){ .wm span{display:none} }

/* ---------- more room ---------- */
@media (min-width:600px){
  :root{--pd:26px}
  .sec{padding:56px 0 6px}
  .hero-plate{padding:26px 24px}
  .hero h1{line-height:1.12}
  .hero .sub{margin-top:12px;line-height:1.5;font-size:1.05rem}
  .facts{margin-top:16px;gap:8px;font-size:.85rem}
  .facts .row{line-height:1.45}
  .hero .form{margin-top:14px;gap:10px}
  .plist{padding:26px 24px 30px}
  .node{padding:16px 18px}
  .resume{padding:22px 20px}
  .resume .btn{width:auto;min-width:240px}
  .sheet{padding:22px 20px}
  .proof li{flex:1 1 0}
}
@media (min-width:760px){
  body.lp{--dock:0px}
  .sticky{display:none}
  .sec{padding:76px 0 8px}
  .hero{padding:26px 0 34px}
  .planes,.acc-list,.aud,.diff,.cert,.fin,.plane-total{max-width:880px}
  body.app{--dock:96px}
  .dock{display:flex;align-items:center;justify-content:center;gap:18px;padding:8px 16px calc(8px + env(safe-area-inset-bottom))}
  .jump{width:auto;margin:0;order:2}
  .tabs{border-top:0;grid-template-columns:repeat(5,auto)}
  .tabs a{min-height:2.9rem;flex-direction:row;gap:8px;padding:0 14px;font-size:.85rem;border-radius:10px}
  .tabs a[aria-current="page"]{box-shadow:inset 0 0 0 1px var(--pk)}
  .cmap{grid-template-columns:1fr 1fr;gap:18px}
  .clist{grid-template-columns:1fr 1fr}
  .paths ol{grid-template-columns:1fr 1fr}
  .fin{padding:38px 32px}
  .cert{padding:30px 26px}
  .diff{padding:30px 26px}
}
@media (min-width:1040px){
  .hero-plate{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
  .hero .form{margin-top:16px}
  .pathgrid{display:grid;grid-template-columns:1fr 1.3fr;gap:32px;align-items:start}
  .pathgrid .side{position:sticky;top:24px}
  .clist{grid-template-columns:1fr 1fr 1fr}
}

/* ---------- reflow at very large text sizes ---------- */
.course>div,.crow>span,.node>div,.pbar .who>div,.plane,.acc-list li>span,.aud li>span{min-width:0}
.course h3,.crow .ct,.node .t,.plane .pt,.resume h2,.pathsec>h2,.sheet h2,.paths .pn2,.swi .sl1{overflow-wrap:anywhere}
.course .cm,.crow .cmeta,.node .meta,.paths .pr,.pbar .co,.facts,.plane .pd{overflow-wrap:anywhere}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .btn:active,.jump:active{transform:none!important}
}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}