@font-face{font-family:'Bricolage';src:url(/fonts/BricolageGrotesque.ttf) format('truetype');font-weight:200 800;font-stretch:75% 100%;font-display:swap}
:root{--header-h:76px;--ind:#3B2E8C;--ind-d:#241C5C;--ind-l:#6B5FBF;--lime:#B8D14A;--lime-d:#8FA52E;--lime-t:#66781E;--bg:#F7F7FA;--ink:#1B1830;--mute:#5C5A70;--line:#E2E1EC;--tint:#EFEDF8}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:'Bricolage',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--lime-d);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-weight:600;letter-spacing:-.015em;line-height:1.1}
h1{font-size:48px} h2{font-size:38px} h3{font-size:21px}
p{max-width:62ch}
.btn{display:inline-block;padding:13px 22px;border-radius:8px;font-weight:600;font-size:16px;line-height:1;border:2px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-lime{background:var(--lime);color:var(--ind-d)} .btn-lime:hover{background:#C6DC60}
.btn-ind{background:var(--ind);color:#fff} .btn-ind:hover{background:var(--ind-d)}
.btn-ghost{border-color:var(--ind);color:var(--ind);background:transparent} .btn-ghost:hover{background:var(--tint)}
.btn-ghost-w{border-color:rgba(255,255,255,.6);color:#fff;background:transparent} .btn-ghost-w:hover{background:rgba(255,255,255,.1)}
header.site{position:sticky;top:0;z-index:100;background:rgba(247,247,250,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:14px;height:76px}
.brand{display:flex;align-items:center;gap:13px;font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--ind);white-space:nowrap}
.brand svg{flex:0 0 auto;display:block}
.brand small{display:block;font-size:12px;color:var(--mute);font-weight:500;letter-spacing:0;margin-top:1px;white-space:nowrap}
.links{display:flex;gap:20px;margin-left:auto;font-size:15.5px;font-weight:500}
.links a{color:var(--ink);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap} .links a:hover{border-color:var(--lime)}
.auth{display:flex;gap:10px;align-items:center} .auth .signin{font-weight:600;font-size:15.5px;padding:8px 10px;white-space:nowrap} .auth .btn{padding:10px 16px;font-size:15px}
section{padding:80px 0} section.tight{padding:48px 0}
.lead{font-size:19px;color:var(--mute);margin-top:12px}
.page-head{padding:64px 0 40px} .page-head h1{max-width:18ch}
.hero{padding:72px 0 64px} .hero .wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:center}
.hero h1{font-size:56px;line-height:1.06;max-width:17ch}  /* 17ch, not 11: the headline is a sentence now rather than a phrase, and an 11ch measure broke it into five short stacked lines */ .hero .sub{font-size:21px;color:var(--mute);margin-top:20px;max-width:46ch}
.cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap} .note{margin-top:18px;font-size:14.5px;color:var(--mute)}
.hero-art{width:100%;height:auto;max-width:440px;display:block;margin-left:auto}
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:18px 28px;font-weight:500;font-size:15.5px;color:var(--ind)}
.strip span::before{content:"";display:inline-block;width:9px;height:9px;background:var(--lime);border-radius:2px;margin-right:9px;vertical-align:1px}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px} .four div{border-top:3px solid var(--ind);padding-top:18px} .four div:nth-child(3){border-color:var(--lime)} .four h3{margin-bottom:8px} .four p{font-size:15.5px;color:var(--mute)}
.dark{background:var(--ind-d);color:#fff} .dark h2,.dark h3{color:#fff} .dark .lead{color:#C9C4E6}
.path .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} .steps div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:22px 20px}
.steps div:last-child{background:var(--lime);border-color:var(--lime);color:var(--ind-d)} .steps div:last-child h3{color:var(--ind-d)} .steps h3{font-size:19px;margin-bottom:8px} .steps p{font-size:14.5px;opacity:.85} .steps b{display:block;font-size:13px;font-weight:600;opacity:.7;margin-bottom:10px}
.sechead{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap} .sechead a.more{font-weight:600;color:var(--ind);border-bottom:2px solid var(--lime);padding-bottom:2px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px} .card .kind{font-size:13.5px;font-weight:600;color:var(--ind)} .card h3{font-size:19px} .card p{font-size:15px;color:var(--mute);flex:1} .card a.link{font-weight:600;color:var(--ind);font-size:15px}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px} .tier{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 24px;display:flex;flex-direction:column} .tier ul{flex:1} .tier .plus{font-size:13px;font-weight:600;color:var(--ind);margin:0 0 10px;text-transform:uppercase;letter-spacing:.04em} .tier.hi{border:2px solid var(--ind)}
.tier h3{font-size:20px} .tier .price{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:2px 0 12px;color:var(--ink)} .tier .price small{font-size:14px;font-weight:500;color:var(--mute)} .tier.exec{background:linear-gradient(180deg,#241C5C,#150F3D);color:#fff;border-color:#241C5C} .tier.exec h3,.tier.exec .price{color:#fff} .tier.exec .who,.tier.exec .price small{color:#C9C4E6} .tier.exec .plus{color:var(--lime)} .tier.exec li::before{background:var(--lime)} .tier.exec .btn-ghost{border-color:var(--lime);color:var(--lime)} .tier.exec .btn-ghost:hover{background:rgba(255,255,255,.08)} .tier .who{font-size:14px;color:var(--mute);margin:4px 0 16px} .tier ul{list-style:none;font-size:15px;display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.tier li{padding-left:20px;position:relative} .tier li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;background:var(--lime);border-radius:2px} .tier .btn{width:100%;text-align:center}
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.course{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 0 20px;display:flex;flex-direction:column;gap:12px;overflow:hidden;transition:transform .15s,box-shadow .15s} .course:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(36,28,92,.12)} .course img.tile{width:100%;height:auto;display:block} .course>div{padding:0 22px} .course .code{display:none}
.course .code{font-size:13px;font-weight:600;color:var(--ind);background:var(--tint);padding:4px 8px;border-radius:6px;white-space:nowrap} .course h3{font-size:18px} .course p{font-size:14.5px;color:var(--mute);margin-top:4px}
.course .meta{font-size:13.5px;color:var(--mute);margin-top:10px;display:flex;gap:14px;flex-wrap:wrap} .free{color:var(--lime-t);font-weight:600}
.group{margin-top:44px} .group h2{font-size:26px;margin-bottom:6px;display:flex;align-items:center;gap:12px} .group h2 img{width:34px;height:34px;border-radius:8px} .group .lead{margin-top:4px;font-size:16px}
.list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.workspace{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .workspace .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
ul.marks{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px;font-size:16px} ul.marks li{padding-left:22px;position:relative} ul.marks li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;background:var(--ind);border-radius:2px}
.partner{margin-top:22px;font-size:14px;color:var(--mute)}
.ws-art{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:24px;font-size:14px} .ws-art .bar{display:flex;justify-content:space-between;font-weight:600;color:var(--ind);margin-bottom:14px}
.ws-art .row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 0;border-top:1px solid var(--line)} .ws-art .row span:last-child{font-weight:600} .ws-art .prog{height:8px;background:#E6E4F2;border-radius:4px;overflow:hidden;margin-top:8px} .ws-art .prog i{display:block;height:100%;width:60%;background:var(--lime)}
.join{background:var(--ind);color:#fff;text-align:center} .join h2{color:#fff} .join p{margin:14px auto 0;color:#D7D2F0;font-size:19px} .join .cta{justify-content:center}
.verify{display:flex;gap:10px;max-width:560px;margin:28px auto 0} .verify input{flex:1;padding:13px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:16px} .verify input::placeholder{color:#C9C4E6}
.form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px;max-width:560px} .form label{display:block;font-weight:600;font-size:15px;margin:16px 0 6px}
.form .check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:15px;font-weight:400} .form .check input{margin-top:5px} .form .btn{margin-top:22px} .error{color:#9C2B2B;font-weight:600;margin-top:12px} .success{background:var(--tint);border-left:4px solid var(--lime);padding:16px 18px;border-radius:8px;margin-top:18px}
.result{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px;max-width:640px;margin-top:24px} .result dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:15.5px} .result dt{font-weight:600;color:var(--mute)} .status{display:inline-block;padding:3px 10px;border-radius:6px;font-weight:600;font-size:14px;background:#E8F0C8;color:var(--lime-t)} .status.bad{background:#F6E0E0;color:#9C2B2B}
.detail{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;padding:32px 0 72px} .aside{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;font-size:15px;align-self:start} .aside dt{font-weight:600;color:var(--mute);margin-top:12px;font-size:13px} .aside dd{margin-top:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px} .two div{background:var(--tint);border-radius:10px;padding:18px 20px;font-size:15px} .two b{display:block;color:var(--ind);margin-bottom:6px}
.reqs{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:14px} .reqs li{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:15px} .reqs .code{font-size:13px;font-weight:600;color:var(--ind);background:var(--tint);padding:3px 8px;border-radius:6px;white-space:nowrap}
.badge{display:inline-block;font-size:12.5px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--tint);color:var(--ind);margin-right:6px}
footer.site{padding:56px 0 36px;font-size:14.5px;color:var(--mute)} /* Brand block on the left, link groups in their own grid on the right. The previous rule declared five columns for six groups, so the sixth wrapped under the brand and the footer read as two unrelated blocks. */ footer .cols{display:grid;grid-template-columns:1.5fr 3fr;gap:44px;align-items:start} footer .footnav{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 24px} footer .brandcol p{max-width:38ch;margin-top:14px} footer .fcta{display:flex;align-items:center;gap:16px;margin-top:18px} footer .fcta .btn{padding:9px 16px;font-size:14px} footer .footnav a .ext{margin-left:5px;font-size:11px;color:var(--mute)} footer h4{font-size:14px;color:var(--ink);margin-bottom:12px;font-weight:600} footer ul{list-style:none;display:flex;flex-direction:column;gap:8px} footer a:hover{color:var(--ind)} footer .brand{font-size:17px} footer .brand+p{margin-top:16px;max-width:34ch}
footer .fine{border-top:1px solid var(--line);margin-top:44px;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px}
@media (max-width:980px){.links,.auth .signin{display:none}.hero .wrap,.path .wrap,.workspace .wrap,.detail{grid-template-columns:1fr}.hero h1{font-size:44px;max-width:22ch}h1{font-size:38px}h2{font-size:32px}.four,.tiers{grid-template-columns:1fr 1fr}.cards,.courses,.list,.two{grid-template-columns:1fr}.steps{grid-template-columns:1fr}footer .cols{grid-template-columns:1fr;gap:34px} footer .footnav{grid-template-columns:repeat(3,1fr)}.hero-art{margin:0 auto}section{padding:56px 0}}
@media (max-width:560px){.four,.tiers,footer .cols{grid-template-columns:1fr} footer .footnav{grid-template-columns:repeat(2,1fr);gap:26px 20px}.hero h1{font-size:34px;max-width:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.stats{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap} .stats div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 22px;min-width:150px} .stats b{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--ind)} .stats span{font-size:13px;color:var(--mute)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center} .pill{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:600;color:var(--ink)} .pill small{font-weight:500;color:var(--mute)} .pill.on{background:var(--ind);border-color:var(--ind);color:#fff} .pill.on small{color:#D7D2F0}
.pill.sev::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--mute)} .sev-critical::before{background:#9C2B2B!important} .sev-high::before{background:#E07A5F!important} .sev-medium::before{background:#C98A00!important} .sev-low::before{background:#7CB342!important} .sev-info::before{background:#8E99A3!important}
.pills .count{margin-left:auto;font-size:13.5px;color:var(--mute)}
.intel{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px} .intel .item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:8px} .intel .top{display:flex;align-items:center;gap:8px;font-size:12.5px} .intel .type{font-weight:700;letter-spacing:.06em;color:var(--ind);background:var(--tint);padding:3px 8px;border-radius:6px} .intel .sevdot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--mute)} .intel .sevdot.sev-critical{background:#9C2B2B} .intel .sevdot.sev-high{background:#E07A5F} .intel .sevdot.sev-medium{background:#C98A00} .intel .sevdot.sev-low{background:#7CB342} .intel .sevdot.sev-info{background:#8E99A3} .intel .sevtext{font-weight:600;color:var(--mute)} .intel .when{margin-left:auto;color:var(--mute)}
.intel h3{font-size:17px;line-height:1.3} .intel h3 a{color:var(--ink)} .intel h3 a:hover{color:var(--ind)} .intel p{font-size:14.5px;color:var(--mute);flex:1} .intel .foot{display:flex;justify-content:space-between;font-size:13px;color:var(--mute)} .intel .foot a{font-weight:600;color:var(--ind)}
.pager{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:24px;font-size:14px;color:var(--mute)}
@media (max-width:980px){.intel{grid-template-columns:1fr}}

/* ---- primary navigation: dropdown columns, room to grow ---- */
.nav .links{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.nav .links .item{position:relative;flex:0 0 auto}
/* Nav labels never wrap: a two-word item like "Threat Intelligence" breaking across lines pushes the header taller than the brand block. Tighten padding at narrow widths instead. */
.nav .links .top{background:none;border:0;font:inherit;font-size:15px;font-weight:500;color:var(--ink);padding:10px 9px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav .links .top::after{content:"";width:6px;height:6px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.nav .links .top:hover{color:var(--ind);background:var(--tint)}
.nav .links .item.open .top{color:var(--ind);background:var(--tint)} .nav .links .item.open .top::after{transform:rotate(-135deg) translateY(-2px)}
.nav .links .menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);display:none;gap:28px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 24px;box-shadow:0 18px 40px rgba(36,28,92,.14);z-index:60;min-width:520px}
.nav .links .item.open .menu{display:flex}
/* The panel sits 10px below the button, and that gap used to be dead space: crossing it left both the
   button and the menu, so the menu closed before the pointer arrived. This bridges the gap with a
   transparent strip that belongs to the menu, so the pointer never leaves the item on the way down.
   Opening and closing is handled in nav.js, which adds a short close delay for diagonal movement. */
.nav .links .menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav .links .menu .col{min-width:230px}
.nav .links .menu h5{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.nav .links .menu a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink)}
.nav .links .menu a:hover{background:var(--tint)}
.nav .links .menu a b{display:block;font-size:14.5px;font-weight:600;color:var(--ind)}
.nav .links .menu a span{display:block;font-size:12.5px;color:var(--mute);margin-top:1px}
.navtoggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;font-size:18px;line-height:1;padding:8px 11px;cursor:pointer;color:var(--ink)}
.nav .links .item:last-child .menu{left:auto;right:0;transform:none}
/* The header row is tight even at full width, because the wrap is 1180px and the brand tagline is long. Nothing in
   the row shrinks, so any excess used to land as a wrapped nav label. Tighten first, then drop the tagline. */
@media (max-width:1140px){
  header.site .nav .brand small{display:none}
  header.site .nav .brand{font-size:18px}
  header.site .nav .brand svg{width:38px;height:38px}
}
@media (max-width:1100px){
  .nav .links .menu{min-width:0}
  .nav .links .menu .col{min-width:190px}
}
@media (max-width:1060px){
  .nav{gap:10px}
  .nav .links .top{padding:10px 7px;font-size:14px}
  .auth .signin{padding:8px 6px;font-size:15px}
  .auth .btn{padding:10px 13px}
}
@media (max-width:940px){
  :root{--header-h:64px}
  /* The header wraps to two rows once the mobile menu opens, so a sticky sub-nav underneath would sit on top
     of it. Below this width the sub-nav scrolls with the page instead. */
  .ep-sub{position:static}
  .navtoggle{display:inline-block;order:3;flex:0 0 auto}
  header.site .nav{flex-wrap:wrap;gap:10px;align-items:center;height:auto;min-height:64px;padding:8px 0}
  header.site .nav .brand{order:1;flex:1 1 0;min-width:0;font-size:15px;gap:9px}
  header.site .nav .brand svg{width:34px;height:34px}
  header.site .nav .brand span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  header.site .nav .auth .btn{padding:9px 13px;font-size:13.5px;white-space:nowrap}
  header.site .nav .brand span{overflow:hidden}
  header.site .nav .brand small{display:none}
  header.site .nav .auth{order:2;flex:0 0 auto;margin-left:0}
  header.site .nav .auth .signin{display:none}
  .nav .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 20px 18px;gap:0;max-height:76vh;overflow:auto;z-index:60}
  .nav .links.open{display:flex;order:4;width:100%}
  .nav .links .top{width:100%;justify-content:space-between;font-size:16px;font-weight:600;padding:13px 4px;border-bottom:1px solid var(--line);border-radius:0}
  .nav .links .menu{position:static;display:none;flex-direction:column;gap:6px;border:0;box-shadow:none;padding:6px 0 12px;min-width:0}
  .nav .links .menu::before{display:none}   /* no gap to bridge once the panel is in flow */
  .nav .links .item.open .menu{display:flex}
  .nav .links .item:hover .menu{display:none}
  .nav .links .item.open:hover .menu{display:flex}
  .nav .links .menu .col{min-width:0}
  header.site .nav{position:relative}
}

@media (max-width:380px){
  header.site .nav .brand{font-size:14px}
  header.site .nav .brand svg{width:30px;height:30px}
}

/* ---- DTCF ---- */
.objectives{display:grid;gap:14px;margin-top:22px}
.obj{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.obj .top{display:flex;gap:10px;align-items:center;font-size:12.5px}
.obj .top .code{font-family:ui-monospace,monospace;font-weight:700;color:var(--ind);background:var(--tint);padding:3px 8px;border-radius:6px}
.obj .top .fam{color:var(--mute)}
.obj h3{font-size:18px;margin-top:8px} .obj h3 a{color:var(--ink)} .obj h3 a:hover{color:var(--ind)}
.obj p{font-size:14.5px;color:var(--mute);margin-top:4px}
.grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cell{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:4px 8px;border-radius:6px;border:1px solid var(--line)}
.cell i{font-style:normal;font-size:12px}
.m-full{background:var(--ind);border-color:var(--ind);color:#fff}
.m-partial{background:#E7E3F6;border-color:#CFC7EC;color:var(--ind)}
.m-none{background:transparent;border-style:dashed;color:var(--mute)}

/* ---- legal documents ---- */
.legal h2{font-size:21px;margin:28px 0 8px;letter-spacing:-.01em}
.legal h3{font-size:16px;margin:18px 0 6px;color:var(--ind)}
.legal p, .legal li{font-size:15.5px;line-height:1.68;color:var(--ink)}
.legal ul{margin:8px 0 8px 20px;list-style:disc}
.legal li{margin-bottom:6px}
.legal-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14.5px}
.legal-table th{text-align:left;background:var(--tint);padding:9px 12px;border:1px solid var(--line);font-weight:700}
.legal-table td{padding:9px 12px;border:1px solid var(--line);vertical-align:top}

/* ---- lesson bodies and figures ---- */
.lesson-body{max-width:760px}
.lesson-body p{font-size:16.5px;line-height:1.72;color:var(--ink);margin:0 0 16px}
.lesson-body h3{font-size:20px;margin:28px 0 10px;letter-spacing:-.01em}
.lesson-body h4{font-size:16.5px;margin:20px 0 8px;color:var(--ind)}
.lesson-body ul,.lesson-body ol{margin:0 0 16px 22px}
.lesson-body li{font-size:16px;line-height:1.65;margin-bottom:7px}
.lesson-body blockquote{margin:0 0 16px;padding:12px 18px;background:var(--tint);border-radius:10px;font-size:16px}
.lesson-body code{background:var(--tint);padding:1px 6px;border-radius:5px;font-size:14px}
.lesson-figure{margin:26px 0;max-width:100%}
.lesson-figure img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .15s}
.lesson-figure a:hover img{border-color:var(--ind)}
.lesson-figure figcaption{font-size:12.5px;color:var(--mute);margin-top:8px;text-align:center}
/* On a wide screen a figure may breathe past the measure, but only where there is room on both sides. In the
   lesson player the left of the column is the contents rail, so a symmetric pull put the figure underneath it.
   The player keeps its figures inside the stage; everywhere else the bleed still applies. */
@media (min-width:1500px){
  .lesson-body .lesson-figure{width:calc(100% + 120px);max-width:none;margin-left:-60px}
  .stage .lesson-body .lesson-figure{width:100%;max-width:100%;margin-left:0}
}

/* ---- site search ---- */
.searchbox{display:flex;gap:10px;margin-top:20px;max-width:640px}
.searchbox input[type=search]{flex:1 1 auto;min-width:0;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.searchbox input[type=search]:focus{outline:2px solid var(--ind);outline-offset:1px}
.searchbox .btn{flex:0 0 auto}
ul.results{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:2px}
ul.results li{padding:18px 0;border-bottom:1px solid var(--line)}
ul.results li:first-child{border-top:1px solid var(--line)}
ul.results h3{font-size:19px;margin:6px 0 4px}
ul.results h3 a{color:var(--ind)}
ul.results h3 a:hover{text-decoration:underline}
ul.results p{color:var(--ink);font-size:15px}
ul.results mark{background:rgba(168,198,58,.35);color:inherit;padding:0 1px;border-radius:2px}
ul.results .meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mute);flex-wrap:wrap}
ul.results .meta .kind{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ind)}
ul.results .meta .facet,ul.results .meta .code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media (max-width:560px){.searchbox{flex-direction:column}.searchbox .btn{width:100%}}

/* ---- glossary ---- */
.azrail{display:flex;gap:10px;flex-wrap:wrap}
.azrail a{font-weight:700;color:var(--ind)}
.azhead{font-size:22px;margin:28px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--line);color:var(--mute)}
dl.glossary{display:flex;flex-direction:column}
dl.glossary .term{padding:16px 0;border-bottom:1px solid var(--line);scroll-margin-top:96px}
dl.glossary dt{font-size:18px;font-weight:700;color:var(--ink)}
dl.glossary dt .aka{font-weight:500;font-size:13.5px;color:var(--mute);margin-left:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
dl.glossary dd{margin:6px 0 0}
dl.glossary dd p{font-size:15px}
dl.glossary dd .why{color:var(--mute);margin-top:6px}
dl.glossary dd .note{margin-top:8px}
dl.glossary .term:target{background:var(--tint);border-radius:10px;padding-left:14px;padding-right:14px}

/* ---- profile form ---- */
label.check{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:15px;cursor:pointer}
label.check input{margin-top:3px;width:16px;height:16px;flex:0 0 auto}
label.field{display:block;margin-top:14px}
label.field span{display:block;font-size:13px;font-weight:600;color:var(--mute);margin-bottom:5px}
label.field input,label.field textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
label.field input:focus,label.field textarea:focus{outline:2px solid var(--ind);outline-offset:1px}

/* ---- catalogue: domain jump rail and concept cards ---- */
.domainrail{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.domainrail a{display:flex;align-items:center;gap:9px;padding:8px 13px 8px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13.5px;font-weight:600;color:var(--ink);transition:border-color .15s,transform .15s}
.domainrail a:hover{border-color:var(--ind);transform:translateY(-1px)}
.domainrail img{width:26px;height:26px;border-radius:7px;display:block}
.domainrail small{color:var(--mute);font-weight:600}
.list .card.concept{display:flex;flex-direction:row;gap:13px;align-items:flex-start;padding:15px 17px;transition:border-color .15s,transform .15s}
.list .card.concept:hover{border-color:var(--ind);transform:translateY(-1px)}
.list .card.concept .glyph{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:block}
.list .card.concept h3{font-size:15.5px;margin:0}
.list .card.concept p{font-size:13.5px;margin-top:4px;color:var(--ink)}
.list .card.concept .meta{display:block;margin-top:7px;font-size:12px;color:var(--mute);letter-spacing:.04em;text-transform:uppercase;font-weight:700}
section[id^="d-"]{scroll-margin-top:24px}   /* the group inside already carries a 44px top margin, and the header is 77px */

/* Reserve space for lazily loaded art. Without an intrinsic size the SVGs load as the page scrolls, the layout grows
   underneath the reader, and an anchor jump lands hundreds of pixels short of its section. */
.course .tile{display:block;width:100%;aspect-ratio:16/10;background:var(--tint)}
.domainrail img,.group h2 img,.card.concept .glyph{background:var(--tint)}
@media (max-width:700px){
  /* Eleven stacked pills would push the catalogue itself off a phone screen, so the rail becomes one swipeable row. */
  .domainrail{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:6px;margin-bottom:26px}
  .domainrail a{flex:0 0 auto;scroll-snap-align:start}
  .domainrail::-webkit-scrollbar{height:4px}
  .domainrail::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
  .list .card.concept{padding:14px}
}
footer .fine .cookie-prefs{background:none;border:0;padding:0;font:inherit;font-size:13.5px;color:var(--mute);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
footer .fine .cookie-prefs:hover{color:var(--ind)}

/* ---- staff: mail health ---- */
.mailhealth{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.mailhealth .problems{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.mailhealth .problems li{background:#FDF2F2;border-left:3px solid #9C2B2B;padding:9px 12px;border-radius:0 8px 8px 0;font-size:13.5px;color:#6E1F1F}
.mailhealth .ok{background:#F2F8EC;border-left:3px solid #7CB342;padding:9px 12px;border-radius:0 8px 8px 0;font-size:13.5px;margin-bottom:12px}
.mailhealth dl{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 22px;font-size:13px}
.mailhealth dl div{display:flex;gap:8px;justify-content:space-between;border-bottom:1px dotted var(--line);padding-bottom:5px}
.mailhealth dt{color:var(--mute)}
.mailhealth dd{margin:0;text-align:right;word-break:break-word}
.mailhealth .lasterr{margin-top:12px;font-size:13px;color:#9C2B2B;word-break:break-word}
@media (max-width:700px){.mailhealth dl{grid-template-columns:1fr}}

/* ---- status page ---- */
ul.components{list-style:none;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
/* Grid rather than flex: the name, the detail and the state are three columns that should line up down the list, and a wrapping flex row put them at different heights per component. */
ul.components li{display:grid;grid-template-columns:12px minmax(150px,auto) 1fr auto;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.4}
ul.components li:last-child{border-bottom:0}
ul.components .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:var(--mute)}
ul.components .name{font-weight:600}
/* Named .note-line rather than .detail: a global .detail rule elsewhere is a grid, and inheriting it made every
   component row 149px tall with the text floating above its own name. */
ul.components .note-line{color:var(--mute);font-size:13px;min-width:0}
ul.components .state{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
ul.components li.s-operational .dot{background:#6FA82E} ul.components li.s-operational .state{color:#4E7A1E}
ul.components li.s-degraded .dot{background:#C98A1B} ul.components li.s-degraded .state{color:#8A5E0F}
ul.components li.s-outage .dot{background:#9C2B2B} ul.components li.s-outage .state{color:#9C2B2B}
.card.incident .meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--mute);margin-bottom:4px}
.card.incident .meta .kind{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A5E0F}
.card.incident .update{font-size:14px;margin-top:10px;padding-left:12px;border-left:2px solid var(--line)}
/* ---- events ---- */
.cards a.card .when{font-weight:600;color:var(--ind);font-size:14px;margin-top:2px}
@media (max-width:700px){ul.components li{grid-template-columns:12px 1fr auto;row-gap:4px}ul.components .note-line{grid-column:2 / -1}}

/* ---- build stamp ---- */
footer .fine .legal-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
@media (max-width:560px){footer .fine{flex-direction:column;align-items:flex-start;gap:10px}footer .fine .legal-links{gap:12px}}
footer .fine .buildstamp{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--mute);text-decoration:none;border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:#fff;white-space:nowrap}
footer .fine .buildstamp:hover{border-color:var(--ind);color:var(--ind)}

/* ---- about page ---- */
/* Wider prose column than the default even split, and set in the stylesheet rather than inline so the responsive
   rule that collapses .two on a phone still wins. An inline grid-template-columns silently beat it. */
.two.about{grid-template-columns:1.45fr .85fr;gap:42px}
.two.about h2{font-size:24px;margin-top:30px}
.two.about h2:first-child{margin-top:0}
.two.about p{font-size:16px;line-height:1.66}
@media (max-width:940px){.two.about{grid-template-columns:1fr;gap:26px}}

/* The header brand must not wrap, but the footer's copy of it sits in a column and its tagline is long enough to push
   the page wider than a phone. Same markup, different context, so the footer gets its own rule. */
footer .brand{white-space:normal}
footer .brand small{white-space:normal;display:block}
@media (max-width:700px){
  .hero .wrap{grid-template-columns:1fr;gap:32px}
  /* The hero art is a fixed-width drawing; on a phone it is scaled to the column rather than allowed to set the
     page width, which is what pushed the whole document to 488px on a 430px screen. */
  .hero .wrap > *:last-child{min-width:0;max-width:100%;overflow:hidden}
  .hero .wrap svg, .hero .wrap img, .hero-art{max-width:100%;height:auto}
  .hero .wrap > *{min-width:0}
}

/* ---- footer social ---- */
footer .social{margin-top:16px}
footer .social a{display:inline-flex;align-items:center;gap:9px;color:var(--mute);font-size:14px;font-weight:600;
  border:1px solid var(--line);border-radius:999px;padding:7px 15px 7px 12px;background:#fff;transition:color .15s,border-color .15s}
footer .social a:hover{color:#0A66C2;border-color:#0A66C2}
footer .social svg{display:block}

/* ---------------------------------------------------------------------------
   Homepage components.

   The institutional argument is long, and long arguments read as walls of text
   unless the structure carries part of the meaning. Each of these exists because
   the idea underneath it already has a shape: convergence is a many-to-one,
   practice is a sequence, recognition is a ladder. Drawing the shape lets the
   prose get shorter rather than louder.

   The stepped-block motif from the mark is reused as the connective tissue
   throughout, so the page reads as one system rather than a set of widgets.
--------------------------------------------------------------------------- */

/* Many disciplines, one desk. */
.converge{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.converge .cv{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px}
.converge .who{font-size:14px;font-weight:600;color:var(--mute);letter-spacing:.01em}
.converge .arrow{display:flex;align-items:center;gap:4px;height:10px}
.converge .arrow i{display:block;width:8px;border-radius:2px;background:var(--ind-l)}
.converge .arrow i:nth-child(1){height:4px}
.converge .arrow i:nth-child(2){height:7px}
.converge .arrow i:nth-child(3){height:10px;background:var(--lime)}
.converge .lands{font-size:17px;font-weight:600;line-height:1.25;color:var(--ink)}
.converge .cv p{font-size:14.5px;color:var(--mute);margin:0}

/* A sentence that should stop the eye. */
.statement{background:var(--ind);color:#fff;border-radius:16px;padding:44px 46px;margin-top:44px}
.statement.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.statement.split svg{width:100%;height:auto}
.statement p{font-size:28px;line-height:1.3;font-weight:600;letter-spacing:-.015em;max-width:24ch;color:#fff}
.statement .sub{font-size:17px;font-weight:400;color:rgba(255,255,255,.78);margin-top:14px;max-width:56ch;letter-spacing:0}
.statement.lime{background:var(--lime);color:var(--ind-d)}
.statement.lime p{color:var(--ind-d)}
.statement.lime .sub{color:rgba(36,28,92,.8)}

/* Practice is a sequence, so it is drawn as one. */
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;border-top:3px solid var(--line)}
.chain .lk{padding:22px 22px 24px 0;position:relative}
.chain .lk::before{content:"";position:absolute;top:-3px;left:0;width:60%;height:3px;background:var(--ind)}
.chain .lk:nth-child(2)::before{background:var(--ind-l)}
.chain .lk:nth-child(3)::before{background:var(--lime-d)}
.chain .lk:nth-child(4)::before{background:var(--lime)}
.chain .n{font-size:13px;font-weight:600;color:var(--mute);display:block;margin-bottom:10px}
.chain h3{font-size:19px;margin-bottom:8px}
.chain p{font-size:15px;color:var(--mute)}

/* The seven strands, as tiles rather than a sentence. */
.pillars{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:34px}
.pillars span{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 12px;font-size:15px;font-weight:600;color:var(--ind);text-align:center;line-height:1.25}
.pillars span::before{content:"";display:block;width:12px;height:12px;background:var(--lime);border-radius:2px;margin:0 auto 10px}

/* Recognition is a ladder: four things, deliberately not the same thing. */
.ladder{margin-top:40px;border-top:1px solid var(--line)}
.ladder .rung{display:grid;grid-template-columns:170px 1fr 200px;gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.ladder .rung .name{font-size:19px;font-weight:600;color:var(--ink)}
.ladder .rung p{font-size:15.5px;color:var(--mute);margin:0}
.ladder .rung .how{font-size:14px;font-weight:600;color:var(--ind);text-align:right}
.ladder .rung:last-child{border-bottom:3px solid var(--lime)}
.ladder .rung:last-child .how{color:var(--lime-t)}

/* Frameworks converging into a common control language. */
.dtcf{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:16px}
.dtcf svg{width:100%;height:auto}

@media (max-width:980px){
  .converge{grid-template-columns:1fr 1fr}
  .chain{grid-template-columns:1fr 1fr}
  .pillars{grid-template-columns:repeat(4,1fr)}
  .dtcf{grid-template-columns:1fr;gap:28px}
  .ladder .rung{grid-template-columns:1fr;gap:6px}
  .ladder .rung .how{text-align:left}
  .statement{padding:32px 28px}
  .statement.split{grid-template-columns:1fr;gap:28px}
  .statement p{font-size:23px}
}
@media (max-width:560px){
  .converge,.chain{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr 1fr}
}

/* The three silhouettes, shown together. The recognition ladder argues that membership, completed
   learning and an examined credential are different things; the badge system already says so in
   shape, so showing them side by side lets the artwork make the argument instead of the prose. */
.shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.shapes figure{margin:0;text-align:center}
.shapes img{width:112px;height:112px}
.shapes figcaption{margin-top:12px}
.shapes .what{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.shapes .how{display:block;font-size:14px;color:var(--mute);margin-top:4px}
@media (max-width:560px){.shapes{grid-template-columns:1fr;gap:22px}}

/* Staff tabs. Counts live on the tab itself so a queue that needs attention is visible without opening it. */
/* Scrollable, because a settings page with twenty groups put most of its tabs off the right edge with no
   way to reach them. flex-wrap would work on desktop and stack four rows deep on a laptop, so the tab strip
   scrolls horizontally instead and keeps its single line. */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.tabs::-webkit-scrollbar{height:6px}
.tabs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.tabs .tab{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
/* Fading edge so it is visible that there is more to the right. */
.tabs-wrap{position:relative}
.tabs-wrap::after{content:"";position:absolute;right:0;top:0;bottom:6px;width:36px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bg,#F7F6FC))}
.tabs .tab{display:flex;align-items:center;gap:8px;padding:11px 16px;font-size:15px;font-weight:600;color:var(--mute);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab.on{color:var(--ind);border-bottom-color:var(--ind)}
.tabs .tab .n{font-size:12.5px;font-weight:600;color:var(--mute);background:var(--tint);border-radius:999px;padding:2px 9px}
.tabs .tab .n.live{background:var(--lime);color:var(--ind-d)}

/* List price, always shown, struck through. A member pays nothing; the price is what a non-member pays and what
   a partner licenses at. Showing both is how membership states its worth rather than asserting it. */
.courses .meta .price,.catalog .meta .price{display:inline-flex;align-items:baseline;gap:6px}
.meta .price s{color:var(--mute);text-decoration-thickness:1.5px}
.meta .price em{font-style:normal;font-weight:600;color:var(--ind)}
.incl{font-weight:600;color:var(--ind);margin-left:6px}

/* Health bands on the campaign screen. Colour only ever restates a number that is already on screen. */
h3.warn{color:#B06A00}
h3.bad{color:#B3261E}

/* Campaign control strip. Deliberately loud: it is the one thing on the page that must be findable in a hurry. */
.sendbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:16px 20px;border-radius:12px;margin-top:6px;border:1px solid var(--line);background:#fff}
.sendbar .state{display:block;font-size:17px}
.sendbar .muted{font-size:14.5px}
.sendbar .acts{display:flex;gap:10px}
.sendbar.sending{border-left:6px solid var(--lime)}
.sendbar.sending .state{color:var(--ind)}
.sendbar.paused{border-left:6px solid #B06A00;background:#FFF9EF}
.sendbar.paused .state{color:#8A5200}
.sendbar.stopped{border-left:6px solid #B3261E;background:#FFF5F4}
.sendbar.stopped .state{color:#8C1D18}
.btn-pause{background:#8A5200;color:#fff;border-color:#8A5200}
.btn-stop{background:#B3261E;color:#fff;border-color:#B3261E}

/* Mode selector. All four visible, because the three you did not pick are exactly what you need in order to
   choose between them. The selected one is filled rather than outlined so state survives a glance. */
.modes{display:flex;gap:8px;flex-wrap:wrap}
.modes .mode{position:relative;flex:1 1 150px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;background:#fff}
/* Hidden but still a real radio: focusable, keyboard-operable, and announced by a screen reader. A zero-size
   absolutely positioned input escapes its card and behaves unpredictably for both. */
.modes .mode input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.modes .mode b{display:block;font-size:15px;color:var(--ink)}
.modes .mode span{display:block;font-size:13px;color:var(--mute);margin-top:2px}
.modes .mode:hover{border-color:var(--ind-l)}
/* Selected state comes from the radio itself as well as the server-rendered class, so the card responds the
   instant it is clicked rather than only after the form comes back. Without this, choosing a mode looks like
   nothing happened and reads as the control refusing. */
.modes .mode.on,.modes .mode:has(input:checked){background:var(--ind);border-color:var(--ind)}
.modes .mode.on b,.modes .mode:has(input:checked) b{color:#fff}
.modes .mode.on span,.modes .mode:has(input:checked) span{color:rgba(255,255,255,.8)}
.modes .mode.on.live,.modes .mode.live:has(input:checked){background:#B3261E;border-color:#B3261E}
.modes .mode:focus-within{outline:2px solid var(--ind-l);outline-offset:2px}

/* What pressing Run would actually do, stated rather than inferred. */
.outcome{margin-top:14px;padding:13px 16px;border-radius:10px;border-left:5px solid var(--line);background:#F7F7FB}
.outcome strong{display:block;font-size:15.5px}
.outcome span{display:block;font-size:14px;color:var(--mute);margin-top:2px}
.outcome.blocked{border-left-color:#8A8A97}
.outcome.blocked strong{color:#5C5A70}
.outcome.safe{border-left-color:var(--lime)}
.outcome.safe strong{color:var(--ind)}
.outcome.live{border-left-color:#B3261E;background:#FFF5F4}
.outcome.live strong{color:#8C1D18}

/* Progress while the server works. Creeps and waits rather than completing, because a bar that finishes before the
   page changes teaches people to distrust it. */
.working-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--lime);z-index:9999;
  transition:width .12s linear;box-shadow:0 0 8px rgba(184,209,74,.7)}
.btn.is-working{opacity:.75;cursor:progress}
.file-note{display:block;margin-top:6px;font-size:13px;color:var(--mute)}

/* A row of numbers, not a row of cards. */
.statline{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;padding:14px 16px;margin-top:6px;
  background:#fff;border:1px solid var(--line);border-radius:10px;font-size:14.5px;color:var(--mute)}
.statline b{font-size:20px;color:var(--ink);margin-right:5px}
.statline .warn b{color:#B06A00}
.statline .bad b{color:#B3261E}

/* Reference material that belongs on the page but not above the controls. */
.explain{border:1px solid var(--line);border-radius:10px;background:#FAFAFD;padding:0 14px}
.explain>summary{cursor:pointer;padding:11px 0;font-size:14.5px;font-weight:600;color:var(--ind)}
.explain>summary::marker{color:var(--ind-l)}
.explain p{font-size:14.5px;margin:0 0 10px}
.explain[open]{padding-bottom:6px}

/* ---------------------------------------------------------------------------
   Course player.
   
   A course is a sequence, so the interface is built around position rather than
   length: one unit on screen, the contents always visible, and a spine down the
   rail that fills as units complete. The spine reuses the stepped-blocks idea
   from the mark, which is the one place boldness is spent here; everything else
   stays quiet so the lesson text is the loudest thing on the page.
--------------------------------------------------------------------------- */
.player{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.player-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;
  padding:12px 22px;background:var(--ind-d);color:#fff}
.player-top .code{font-family:Georgia,serif;font-size:13px;color:var(--lime)}
.player-top h1{font-size:16.5px;font-weight:600;color:#fff;margin:0;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-top .meta{font-size:13.5px;color:rgba(255,255,255,.72);white-space:nowrap}
.player-top a.leave{color:#fff;font-size:14px;text-decoration:none;border:1px solid rgba(255,255,255,.35);
  border-radius:8px;padding:6px 12px}
.player-top a.leave:hover{background:rgba(255,255,255,.12)}

.player-body{flex:1;display:grid;grid-template-columns:288px 1fr;align-items:start}

.rail{position:sticky;top:53px;max-height:calc(100vh - 53px);overflow-y:auto;
  border-right:1px solid var(--line);padding:20px 0 40px}
.rail h2{font-size:12.5px;font-weight:700;color:var(--mute);padding:0 20px 10px}
.rail .mod{font-size:13.5px;font-weight:700;color:var(--ink);padding:16px 20px 6px}
.rail a{display:flex;gap:10px;align-items:flex-start;padding:8px 20px 8px 18px;
  font-size:14.5px;line-height:1.35;color:var(--ink);text-decoration:none;border-left:3px solid transparent}
.rail a:hover{background:var(--tint)}
.rail a.on{border-left-color:var(--ind);background:var(--tint);font-weight:600}
.rail a.done{color:var(--mute)}
.rail a .tick{flex:none;width:16px;height:16px;margin-top:2px}
.rail a .tick .ring{fill:#fff;stroke:#C9C6DA;stroke-width:1.5}
.rail a .tick .core,.rail a .tick .fill,.rail a .tick .check{display:none}
.rail a.on .tick .ring{stroke:var(--ind);stroke-width:1.8}
.rail a.on .tick .core{display:block;fill:var(--ind)}
.rail a.done .tick .ring,.rail a.done .tick .core{display:none}
.rail a.done .tick .fill{display:block;fill:#2E9E5B}
.rail a.done .tick .check{display:block;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rail a.optional .tick .ring{stroke-dasharray:2.5 2.2}
.player-top .brand{display:flex;align-items:center;margin-right:-4px}
.player-top .brand svg rect{fill:#fff}
.player-top .brand svg rect:last-child{fill:var(--lime)}
.rail a.locked{opacity:.5;pointer-events:none}

/* The spine: a column of blocks, one per unit, filling as they complete. */
.spine{display:flex;gap:3px;padding:14px 20px 0}
.spine i{flex:1;height:5px;border-radius:2px;background:var(--line)}
.spine i.done{background:var(--lime)}
.spine i.on{background:var(--ind)}

.stage{padding:34px 40px 120px;max-width:760px}
.stage .step{display:none}
.stage .step.on{display:block}
.stage .eyebrow{font-size:13.5px;color:var(--mute)}
.stage h2{font-size:28px;line-height:1.2;margin:6px 0 18px}
.stage .lesson-body{font-size:16.5px;line-height:1.65}
.stage .lesson-body p{margin:0 0 16px}
.stage .lesson-body h3{font-size:19px;margin:26px 0 10px}
.stage .lesson-body ul,.stage .lesson-body ol{margin:0 0 16px 20px}
.stage .lesson-body li{margin-bottom:7px}

.player-foot{position:fixed;bottom:0;left:288px;right:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:12px 40px;background:#fff;border-top:1px solid var(--line)}
.player-foot .count{font-size:14px;color:var(--mute)}

@media (max-width:900px){
  .player-body{grid-template-columns:1fr}
  .rail{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line)}
  .stage{padding:24px 20px 120px}
  .player-foot{left:0;padding:12px 20px}
}

/* The result of a run, stated where the button was pressed. */
.runresult{margin-top:14px;padding:18px 20px;border-radius:12px;border:1px solid var(--line);background:#fff;border-left:6px solid var(--line)}
.runresult h3{font-size:19px;margin:0}
.runresult p{font-size:15px;color:var(--mute);margin:8px 0 0}
.runresult p.next{color:var(--ink);font-weight:600}
.runresult.good{border-left-color:var(--lime)}
.runresult.good h3{color:var(--ind)}
.runresult.none{border-left-color:#B06A00;background:#FFF9EF}
.runresult.none h3{color:#8A5200}
.runresult.bad{border-left-color:#B3261E;background:#FFF5F4}
.runresult.bad h3{color:#8C1D18}
.runresult .counts{display:flex;flex-wrap:wrap;gap:6px 26px;margin:14px 0 0}
.runresult .counts div{display:flex;gap:7px;align-items:baseline}
.runresult .counts dt{font-size:13.5px;color:var(--mute)}
.runresult .counts dd{margin:0;font-size:16px;font-weight:700;color:var(--ink)}

/* The account of a run, on the page that started it. Monospace because it is a sequence of events rather than
   prose, and scrollable because a live run can produce a hundred lines. */
.trace{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:#1B1733}
.trace>summary{cursor:pointer;padding:10px 14px;font-size:14px;font-weight:600;color:#fff}
.trace>summary::marker{color:var(--lime)}
.trace pre{margin:0;padding:12px 14px;max-height:340px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font:12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;color:#D8D5E8;border-top:1px solid #2E2850}

/* Settings rows. One line each, so a group is scannable rather than a column of cards. */
.setting{display:grid;grid-template-columns:minmax(240px,2fr) minmax(200px,3fr) auto;gap:14px;align-items:center;
  margin-top:8px;padding:14px 16px}
.setting .meta b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:var(--ind)}
.setting .meta p{font-size:13px;color:var(--mute);margin:3px 0 0}
.setting select.val,.setting textarea.val{width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.setting-toggle{display:flex;align-items:center;gap:10px}.setting-toggle em{font-style:normal;font-size:13px;color:var(--mute)}
.setting .meta p.state{font-size:12.5px;color:var(--mute);opacity:.85}
.setting input.val{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit}
.setting .act{display:flex;gap:8px;align-items:center}
.setting .said{font-size:13px;color:var(--lime-t);white-space:nowrap}
.setting .said.bad{color:#B3261E}
.setting.dirty input.val{border-color:var(--ind-l);box-shadow:0 0 0 3px var(--tint)}
.tabs .n.bad{background:#FFE9E7;color:#8C1D18}
@media (max-width:860px){.setting{grid-template-columns:1fr}}

/* Preview control on staff course pages: the verb leads, the track qualifies. */
.preview{margin-top:14px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--tint)}
.preview-lead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ind)}
.preview-lead b{font-size:16px;color:var(--ink)}
.preview-lead span{font-size:14px;color:var(--mute)}
.preview-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.preview .note{margin-top:10px;font-size:13px}

/* ---- Player: one idea per screen ---- */
.player-top .tools{display:flex;align-items:center;gap:6px}
.player-top .tool{display:inline-flex;align-items:center;gap:6px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;line-height:1}
.player-top .tool:hover{background:rgba(255,255,255,.12)}
.player-top .tool.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.player-top .tool.rate{padding:6px 8px;appearance:none;-webkit-appearance:none}
.player-top .tool.rate option{color:var(--ink)}
.stage{padding:28px 48px 140px;max-width:820px;min-height:calc(100vh - 53px);display:flex;flex-direction:column}
.stage .step.on{display:flex;flex-direction:column;flex:1}
.beats{flex:1;display:flex;flex-direction:column}
.beat-bar{display:flex;gap:5px;margin:4px 0 22px}
.beat-bar i{display:block;height:4px;flex:1;border-radius:2px;background:var(--line)}
.beat-bar i.done{background:var(--ind);opacity:.45}
.beat-bar i.on{background:var(--ind)}
.beat{display:none;max-width:680px}
.beat.on{display:block;animation:beat-in .28s ease-out}
@keyframes beat-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.beat.on{animation:none}}
.beat-head{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ind);font-weight:700;margin:0 0 10px}
.beat-tag{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:0 0 8px}
.beat .lesson-body p{font-size:19px;line-height:1.62;margin:0 0 18px;color:var(--ink)}
.beat .lesson-body li{font-size:17.5px;line-height:1.6}
.beat-example{border-left:4px solid var(--lime);padding:18px 22px;background:var(--tint);border-radius:0 14px 14px 0}
.beat-example .lesson-body p{font-size:17.5px;color:var(--ink)}
.beat-visual img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.beat-widget{max-width:100%}
/* Nothing in the stage may reach past its padding. The rail sits immediately to the left, so an element that
   escapes the column lands underneath the contents list rather than off the edge of the page, where it would
   at least be obvious. */
.stage>*,.stage .beat,.stage .beat>*{max-width:100%;min-width:0}
.stage{overflow-x:clip}
.beat-list .lesson-body ul,.beat-list .lesson-body ol{margin-left:22px}
.skim ol{margin:0 0 0 22px;padding:0}
.skim li{font-size:16.5px;line-height:1.55;margin-bottom:12px}
.skim li a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--mute)}
.skim li a:hover{color:var(--ind);border-bottom-color:var(--ind)}
.notes{margin-top:auto;padding-top:22px}
.notes summary{cursor:pointer;font-size:14px;color:var(--mute)}
.notes textarea{width:100%;margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;background:#fff}
.player-foot .left{font-size:13.5px;color:var(--mute);margin-left:6px}
body.focus .rail{display:none}
body.focus .player-body{grid-template-columns:1fr}
body.focus .player-foot{left:0}
body.focus .stage{margin:0 auto}
.player-top .tool.contents-btn{display:none}
@media (max-width:900px){
  .player-top{gap:8px;padding-left:12px;padding-right:12px}
  .player-top h1{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .player-top .meta{display:none}
  .player-top .tools .tool span,.player-top .tool.rate,.player-top [data-focus]{display:none}
  .player-top a.leave{padding:6px 10px;font-size:13px;white-space:nowrap}
  .player-top .tool.contents-btn{display:inline-flex}
  .player-body{grid-template-columns:1fr}
  .rail{display:none;position:fixed;top:53px;left:0;right:0;bottom:0;z-index:40;max-height:none;background:var(--bg);border-right:0;padding-bottom:40px}
  body.drawer .rail{display:block}
  .stage{padding:18px 18px 130px;min-height:calc(100vh - 53px)}
  .beat .lesson-body p{font-size:17.5px}
  .player-foot{left:0;padding:10px 12px}
  .player-foot .left{display:none}
  .player-foot .count{font-size:12.5px}
}

/* Assessment: one question per screen */
.quiz{margin-top:18px}
.beat-question{border:0;padding:0;margin:0;max-width:720px}
.beat-question legend{padding:0;margin:0 0 16px}
.beat-question .stem{display:block;font-size:21px;line-height:1.45;font-weight:600;color:var(--ink);margin-top:4px}
.beat-question .option{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;cursor:pointer;font-size:16.5px;background:#fff}
.beat-question .option:hover{border-color:var(--ind)}
.beat-question .option:has(input:checked){border-color:var(--ind);background:var(--tint)}
.beat-question .option input{margin-top:5px}
.beat-review .skim-list{margin:0 0 18px 22px}
.beat-review .skim-list li{margin-bottom:8px}
.beat-review .skim-list a{color:var(--ind)}

/* ---- Form controls, site-wide ----
   Every control gets the same treatment wherever it appears, so a form looks designed by default rather than only
   when someone remembered a class. Written with :where() so it has no specificity at all: any rule a page already
   has for its own controls (the dark verify box on the home page, the search boxes) still wins. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]),select,textarea){
  width:100%;box-sizing:border-box;font:inherit;font-size:16px;line-height:1.4;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;
  transition:border-color .12s,box-shadow .12s;appearance:none;-webkit-appearance:none}
:where(input,textarea)::placeholder{color:#9A97B3;opacity:1}
:where(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{
  outline:none;border-color:var(--ind);box-shadow:0 0 0 3px rgba(59,46,140,.16)}
:where(input,select,textarea):disabled{background:var(--tint);color:var(--mute);cursor:not-allowed}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true],.input-validation-error{border-color:#9C2B2B}
:where(textarea){min-height:96px;resize:vertical}
:where(select){
  padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233B2E8C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
select[multiple]{background-image:none;padding-right:14px}
:where(input[type=number]){max-width:160px}
:where(input[type=date],input[type=time],input[type=datetime-local]){max-width:240px}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--ind);cursor:pointer;flex:0 0 auto}
input[type=file]{font:inherit;font-size:15px}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
/* Labels in any form: a clear heading over its control. */
form label:not(.check):not(.field):not(.inline){display:block;font-weight:600;font-size:15px;color:var(--ink);margin:18px 0 7px}
form label:first-of-type{margin-top:0}
form .note,form small.note{font-size:13.5px;color:var(--mute);margin-top:6px;line-height:1.5}
/* Compact controls inside staff tables and toolbars keep their own scale. */
table input:not([type=checkbox]):not([type=radio]),table select,.toolbar input,.toolbar select,.searchbox input{padding:8px 11px;font-size:14.5px;border-radius:8px}
table select{padding-right:34px;background-position:right 10px center}
.player-top .tool.voice{max-width:190px;text-overflow:ellipsis}

/* ---- Beat kinds: the seven directions ---- */
.beat-keyline .big{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:32px;line-height:1.22;letter-spacing:-.01em;margin:0 0 18px;color:var(--ink)}
.beat-keyline .after{font-size:17.5px;line-height:1.6;color:var(--ink);margin:0;max-width:60ch}
.beat-strata,.beat-trace,.beat-split,.beat-cast,.beat-artefact,.beat-checkin{max-width:820px}
.strata{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center}
.strata svg{width:100%;height:auto}
.strata .layer{transition:opacity .35s ease-out,transform .35s ease-out;transform-origin:center bottom}
.strata.armed .layer{opacity:0;transform:translateY(8px)}
.strata ol{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.strata li{padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:15px;transition:background .2s,border-color .2s}
.strata li.on{background:var(--tint);border-color:var(--violet)}
.strata li b{display:block;font-weight:600}
.strata li span{color:var(--mute);font-size:14px}
.trace{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.trace .story{border-left:4px solid var(--lime);padding:14px 20px;background:var(--tint);border-radius:0 14px 14px 0}
.trace .story p{font-size:17px;line-height:1.6;margin:0 0 10px}
.trace .chips{display:grid;gap:10px;margin-bottom:12px}
.trace .chip{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;opacity:.4;transition:opacity .25s,border-color .25s,background .25s}
.trace .chip.lit{opacity:1;border-color:var(--ind);background:var(--tint)}
.trace .chip .dot{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.trace .chip.lit .dot{background:var(--lime)}
.trace .chip b{font-weight:600;font-size:14.5px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.split .half{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--bg)}
.split .half h4{margin:0 0 10px;font-size:17px;font-weight:600;color:var(--ind)}
.split .half p{font-size:15.5px;line-height:1.6;margin:0}
.cast{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cast .fig{text-align:left;font:inherit;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--bg);cursor:pointer;transition:border-color .15s,transform .15s;color:var(--ink)}
.cast .fig:hover,.cast .fig.on,.cast .fig:focus-visible{border-color:var(--ind);transform:translateY(-2px);outline:none}
.cast .fig b{display:block;font-size:15.5px;font-weight:600}
.cast .fig span{display:block;font-size:14px;color:var(--mute);margin-top:3px}
.cast .fig em{display:block;font-style:normal;font-size:13.5px;color:var(--ind);margin-top:8px;opacity:0;transition:opacity .2s}
.cast .fig:hover em,.cast .fig.on em,.cast .fig:focus-visible em{opacity:1}
.checkin{max-width:640px;display:grid;gap:14px}
.checkin .q{font-family:Georgia,"Times New Roman",serif;font-size:24px;font-weight:500;margin:0;line-height:1.28}
.checkin .opts{display:grid;gap:8px}
.checkin .opt{text-align:left;font:inherit;font-size:15.5px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;transition:border-color .15s}
.checkin .opt:hover{border-color:var(--ind)}
.checkin .opt.yes{border-color:#2E9E5B;background:#EAF6EE}
.checkin .opt.no{border-color:#C98A8A;background:#FBEFEF}
.checkin .why{font-size:14.5px;color:var(--mute);min-height:24px;margin:0}
.art .lead{font-size:17px;line-height:1.6;margin:0 0 14px;max-width:64ch}
.art .tablewrap{overflow-x:auto}
.art table{width:100%;border-collapse:collapse;font-size:14px}
.art th{text-align:left;font-weight:600;color:var(--mute);font-size:12.5px;padding:8px 10px;border-bottom:1px solid var(--line)}
.art td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.art tr.you td{background:var(--tint)}
.art td input{padding:8px 10px;font-size:14px;border-radius:8px}
.btn.small{padding:8px 14px;font-size:13.5px}
@media (max-width:820px){.strata,.trace,.split{grid-template-columns:1fr}.cast{grid-template-columns:1fr}.beat-keyline .big{font-size:26px}}
.beats-panel{margin-top:28px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:#fff}
.beats-panel h2{margin:0 0 6px;font-size:20px}
.beats-panel .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}
.beat-cov{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.beat-cov li{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.beat-cov li small{display:block;color:var(--mute)}
.beat-cov .status{flex:none;min-width:92px;text-align:center}
.draft{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg)}
.draft header{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.draft pre{white-space:pre-wrap;font-size:13.5px;line-height:1.5;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;margin:0}
.notes textarea.unsaved,.art td input.unsaved{border-color:#C98A8A;box-shadow:0 0 0 3px rgba(201,138,138,.18)}
.player-bottom .leave-now{margin-left:8px}
@media (max-width:560px){.player-top a.leave{display:none}}
.beat-step{max-width:720px}
.beat-step .rail{display:flex;gap:6px;margin-bottom:22px}
.beat-step .rail i{height:4px;flex:1;border-radius:2px;background:var(--line)}
.beat-step .rail i.done{background:var(--ind-300)}
.beat-step .rail i.on{background:var(--ind-600)}
.beat-step .head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.beat-step .num{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:16px;background:var(--ind-600);color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:24px;font-weight:600}
.beat-step .of{margin:0 0 2px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.beat-step .head h3{margin:0;font-size:24px;line-height:1.25}
.beat-step .instr{font-size:17.5px;line-height:1.65;border-left:3px solid var(--lime);padding-left:18px}
.beat-step .instr p{margin:0 0 12px}
.beat-side{max-width:700px;border-left:4px solid var(--ind-600);padding:4px 0 4px 20px}
.beat-side.large{border-left-color:var(--violet,#6B5FBF)}
.beat-side .tag{margin:0 0 10px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ind-600)}
.beat-side.large .tag{color:var(--violet,#6B5FBF)}
.beat-side .body{font-size:17.5px;line-height:1.65}
.beat-side .body p{margin:0 0 12px}

/* ------------------------------------------------------------------ *
 * Exam Pathways
 *
 * Two surfaces, deliberately different. The catalogue and detail pages
 * are ordinary site pages. The card session and the check are dark and
 * chromeless: they are worked for an hour at a time, and site furniture
 * competes with the only two things that matter there, the item and the
 * decision about it.
 * ------------------------------------------------------------------ */

.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}

.pw-search{display:flex;gap:10px;margin-bottom:8px}
.pw-search input[type=search]{flex:1;height:52px;padding:0 16px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.pw-search button{height:52px}

.pw-layout{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
.pw-filters-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.pw-filters-head h2{font-size:17px;margin:0}
.pw-facet{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.pw-facet:last-child{border-bottom:0}
.pw-facet h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5B5872;margin:0 0 10px}
.pw-check{display:flex;align-items:center;gap:10px;padding:6px 0;text-decoration:none;color:inherit;font-size:14px}
.pw-check .box{width:16px;height:16px;border:1.5px solid var(--line);border-radius:4px;flex:none}
.pw-check.on .box{background:var(--ind);border-color:var(--ind);box-shadow:inset 0 0 0 2px #fff}
.pw-check .lbl{flex:1}
.pw-check .n{font-size:12px;color:#8A87A0;font-variant-numeric:tabular-nums}
.pw-pills{display:flex;flex-wrap:wrap;gap:6px}
.pw-pill{padding:7px 13px;border:1px solid var(--line);border-radius:999px;font-size:13px;text-decoration:none;color:inherit;background:#fff}
.pw-pill.on{background:var(--ind);border-color:var(--ind);color:#fff;font-weight:600}

.pw-results-head{margin-bottom:14px}
.pw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.pw-card{display:flex;flex-direction:column;gap:9px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;min-height:200px}
.pw-card:hover{border-color:var(--ind)}
.pw-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pw-mark{width:42px;height:42px;border-radius:10px;background:var(--ind);color:#fff;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:13px}
.pw-card h3{margin:0;font-size:17px}
.pw-owner{margin:0;font-size:13px;color:#5B5872}
.pw-sum{margin:0;font-size:13px;line-height:1.45;flex:1}
.pw-meta{display:flex;gap:12px;font-size:11px;color:#6E6A85;font-family:ui-monospace,monospace;border-top:1px solid #F0EEF6;padding-top:9px}

.pw-state{border-radius:999px;padding:5px 10px;font-size:11px;font-weight:700;white-space:nowrap}
.pw-state.s-full{background:#E7F0D9;color:#3F5410}
.pw-state.s-depth{background:var(--tint,#EDEAF8);color:var(--ind)}
.pw-state.s-breadth{background:#F2F1F5;color:#5B5872}
.pw-state.s-held{background:#F7E9D4;color:#7A4A10}
.pw-state.s-planned{background:#F2F1F5;color:#6E6A85}

.pw-empty{padding:34px;background:#fff;border:1px dashed var(--line);border-radius:14px;text-align:center}
.pw-empty h3{margin:0 0 8px}

.pw-hero{background:#241B5E;color:#fff;padding:32px 0 30px}
.pw-back{color:#C9C3E8;text-decoration:none;font-size:13px;font-weight:600}
.pw-hero-row{display:grid;grid-template-columns:1fr 280px;gap:32px;align-items:start;margin-top:16px}
.pw-hero-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pw-hero-title h1{margin:0;color:#fff;font-size:34px}
.pw-hero-meta{margin:8px 0 0;color:#C9C3E8;font-size:14px}
.pw-hero-sum{margin:12px 0 0;color:#E5E2F4;font-size:16px;line-height:1.55;max-width:66ch}
.pw-held{margin:14px 0 0;padding:12px 14px;background:#3B2E8C;border-radius:10px;font-size:14px;color:#F3E7D2}
.pw-hero-card{background:#fff;color:var(--ink);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px}
.pw-hero-card h2{margin:0;font-size:17px}
.pw-hero-card p{margin:0;font-size:14px}
.pw-band{font-size:24px;font-weight:800}
.pw-notice{margin:16px 0 0;padding:12px 14px;background:#F7E9D4;border-radius:10px;font-size:14px}

.pw-detail{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}
.pw-detail-main h2{font-size:21px;margin:28px 0 12px}
.pw-detail-main h2:first-child{margin-top:0}
.pw-domains{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px}
.pw-domain{display:grid;grid-template-columns:34px 1fr 150px 56px 96px;gap:12px;align-items:center;font-size:14px}
.pw-domain .ord{font-family:ui-monospace,monospace;font-size:12px;color:#8A87A0}
.pw-domain .nm{font-weight:600}
.pw-domain .bar{height:9px;background:#F0EEF6;border-radius:999px;overflow:hidden}
.pw-domain .bar span{display:block;height:9px;background:var(--ind)}
.pw-domain .bar.low span{background:#C06010}
.pw-domain .pct{font-family:ui-monospace,monospace;font-size:12px;text-align:right}
.pw-domain .band{font-size:12px;font-weight:700;text-align:right}
.pw-domain .band .muted{color:#8A87A0;font-weight:400}
.pw-domain form{margin:0}

.pw-assets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pw-assets > div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.pw-assets strong{display:block;font-family:ui-monospace,monospace;font-size:24px;color:var(--ind)}
.pw-assets span{display:block;font-weight:700;margin:4px 0 6px}
.pw-assets p{margin:0;font-size:13px;line-height:1.45;color:#3A3652}
.pw-after{background:var(--tint,#EDEAF8);border-radius:14px;padding:20px}
.pw-after p{margin:0 0 14px}
.pw-legal{margin-top:26px;font-size:12px;color:#6E6A85;line-height:1.6}
.pw-warn{padding:12px 14px;background:#F7E9D4;border-radius:10px;font-size:14px}

.pw-side-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:16px}
.pw-side-card h3{margin:0 0 10px;font-size:15px}
.pw-side-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 10px;font-size:13px}
.pw-side-card dt{color:#5B5872}
.pw-side-card dd{margin:0;text-align:right;font-weight:600}
.pw-cond ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.pw-cond li{position:relative;padding-left:26px;font-size:13px;line-height:1.4;color:#5B5872}
.pw-cond li:before{content:"";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:5px;background:#EFEDF5}
.pw-cond li.met{color:var(--ink)}
.pw-cond li.met:before{content:"✓";background:var(--lime,#C7D92E);color:#171429;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}

.pw-result-head{display:grid;grid-template-columns:132px 1fr 240px;gap:26px;align-items:center}
.pw-score{width:132px;height:132px;border-radius:20px;background:var(--tint,#EDEAF8);display:flex;flex-direction:column;align-items:center;justify-content:center}
.pw-score strong{font-family:ui-monospace,monospace;font-size:38px;color:var(--ind)}
.pw-score span{font-size:12px;color:#5B5872}
.pw-result-actions{display:flex;flex-direction:column;gap:9px}

.pw-review{display:flex;flex-direction:column;gap:12px}
.pw-review-item{background:#fff;border:1px solid var(--line);border-left:4px solid #7FB04A;border-radius:12px;padding:18px}
.pw-review-item.no{border-left-color:#C0501A}
.pw-review-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.pw-review-head .ref{font-family:ui-monospace,monospace;font-size:12px;color:#6E6A85}
.pw-review-head .verdict{border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;background:#E7F0D9;color:#3F5410}
.pw-review-item.no .verdict{background:#F7DED4;color:#8A2B12}
.pw-review-head .obj{font-size:12px;color:#6E6A85}
.pw-review-item .stem{font-weight:700;margin:0 0 10px;line-height:1.45}
.pw-review-item .key,.pw-review-item .chose{margin:0 0 6px;font-size:14px}
.pw-review-item .chose{color:#8A2B12}
.pw-review-item .why{background:#F7F6F3;border-radius:10px;padding:13px;font-size:14px;line-height:1.5;margin-top:8px}

.pw-week{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden}
.pw-week.now{border-color:var(--ind)}
.pw-week-head{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#FBFAF8;flex-wrap:wrap}
.pw-week.now .pw-week-head{background:var(--tint,#EDEAF8)}
.pw-week-head h3{margin:0;font-size:16px}
.pw-week-head .dates,.pw-week-head .mins{font-size:13px;color:#5B5872}
.pw-week-head .mins{margin-left:auto;font-family:ui-monospace,monospace;font-size:12px}
.pw-tasks{list-style:none;margin:0;padding:6px 18px 14px}
.pw-tasks li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #F0EEF6;font-size:14px}
.pw-tasks li:last-child{border-bottom:0}
.pw-tasks li.done .title{text-decoration:line-through;color:#8A87A0}
.pw-tasks form{margin:0}
.pw-tick{width:22px;height:22px;border:2px solid var(--line);border-radius:7px;background:#fff;cursor:pointer;font-size:12px;font-weight:800;color:#fff;line-height:1}
.pw-tasks li.done .pw-tick{background:var(--ind);border-color:var(--ind)}
.pw-tasks .kind{width:92px;font-family:ui-monospace,monospace;font-size:10px;color:#6E6A85}
.pw-tasks .title{flex:1}
.pw-tasks .detail{font-size:12px;color:#6E6A85;max-width:30ch}
.pw-tasks .mins{font-size:12px;color:#6E6A85}
.pw-plan-form{display:flex;flex-direction:column;gap:8px}
.pw-plan-form label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#5B5872}
.pw-plan-form input,.pw-plan-form select{height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}

/* ---- Card session: dark, chromeless ---- */
.fc-body{margin:0;background:#241B5E}
.fc{min-height:100vh;display:flex;flex-direction:column;color:#fff;font-family:inherit}
.fc-head{display:flex;align-items:center;gap:18px;padding:0 28px;height:62px;border-bottom:1px solid #3B2E8C;flex-wrap:wrap}
.fc-back,.fc-end{color:#C9C3E8;text-decoration:none;font-size:14px;font-weight:600}
.fc-deck{font-weight:700}
.fc-count{margin-left:auto;font-family:ui-monospace,monospace;color:#C9C3E8;font-size:13px}
.fc-progress{height:4px;background:#3B2E8C}
.fc-progress span{display:block;height:4px;background:#C7D92E;width:0;transition:width .2s}
.fc-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:30px}
.fc-card{display:none;width:min(760px,100%);background:#fff;color:#171429;border-radius:18px;padding:40px}
.fc-card.on{display:block}
.fc-tags{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.fc-tags span{border-radius:999px;padding:5px 11px;font-size:11px;font-weight:700;background:#F0EEF6;color:#5B5872}
.fc-tags .ref{font-family:ui-monospace,monospace;font-weight:400}
.fc-side{margin:0 0 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8A87A0;font-weight:800}
.fc-card h2{margin:0;font-size:28px;line-height:1.3}
.fc-answer{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.fc-back-text{margin:0;font-size:19px;line-height:1.5;color:#2E2B45}
.fc-source{margin:10px 0 0;font-family:ui-monospace,monospace;font-size:11px;color:#8A87A0}
.fc-actions{display:flex;flex-direction:column;align-items:center;gap:12px}
.fc-ask{margin:0;font-size:13px;color:#C9C3E8;text-align:center}
.fc-grade-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.fc-grade{min-width:142px;border:0;border-radius:12px;padding:15px 22px;background:#fff;font:inherit;font-weight:700;cursor:pointer}
.fc-grade small{display:block;font-family:ui-monospace,monospace;font-size:10px;font-weight:400;color:#6E6A85;margin-top:3px}
.fc-grade.g1{color:#8A2B12}.fc-grade.g2{color:#8A4B12}
.fc-grade.g3{background:#C7D92E;color:#171429;font-weight:800}
.fc-grade.g3 small{color:#3F4A10}
.fc-grade.g4{color:#3F5410}
.fc-done{text-align:center;max-width:520px}
.fc-done h2{margin:0 0 10px}
.fc-done p{color:#C9C3E8}
.fc-done-actions{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:16px}
.fc-foot{display:flex;align-items:center;gap:16px;padding:0 28px 24px;flex-wrap:wrap}
.fc-tally{display:flex;gap:18px}
.fc-tally span{display:flex;align-items:center;gap:7px;font-size:13px;color:#C9C3E8}
.fc-tally i{width:10px;height:10px;border-radius:3px;display:block}
.fc-tally .d1{background:#D8663F}.fc-tally .d2{background:#D89A3F}
.fc-tally .d3{background:#C7D92E}.fc-tally .d4{background:#7FB04A}
.fc-tally b{color:#fff;font-family:ui-monospace,monospace}
.fc-keys{margin-left:auto;font-size:12px;color:#9A93C8}

/* ---- Check delivery ---- */
.ck-body{margin:0;background:#F7F6F3}
.ck-head{display:flex;align-items:center;gap:16px;height:62px;padding:0 28px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ck-title{font-weight:800}
.ck-badge{background:var(--tint,#EDEAF8);color:var(--ind);border-radius:999px;padding:5px 11px;font-size:11px;font-weight:700}
.ck-spacer{flex:1}
.ck-clock{font-family:ui-monospace,monospace;font-size:15px}
.ck-clock.low{color:#B23A10;font-weight:700}
.ck-main{max-width:1180px;margin:0 auto;padding:26px 28px}
.ck-item form{display:grid;grid-template-columns:1fr 290px;grid-template-areas:"card side" "nav side" "report side" "note side";gap:18px 28px;align-items:start}
.ck-progress-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;max-width:calc(100% - 318px)}
.ck-n{font-family:ui-monospace,monospace;font-size:13px;color:#6E6A85}
.ck-progress{flex:1;height:6px;background:#E8E5F0;border-radius:999px;overflow:hidden}
.ck-progress span{display:block;height:6px;background:var(--ind)}
.ck-flag{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 13px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ck-flag.on{background:#F4E6B8;border-color:#D6BE6A;color:#6B5310}
.ck-card{grid-area:card;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px}
.ck-domain{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6E6A85;font-weight:700}
.ck-stem{margin:0 0 20px;font-size:21px;line-height:1.45}
.ck-options{display:flex;flex-direction:column;gap:10px}
.ck-option{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;border:2px solid var(--line);border-radius:12px;cursor:pointer;background:#fff}
.ck-option:hover{border-color:#C3BBE4}
.ck-option.on{border-color:var(--ind);background:var(--tint,#EDEAF8)}
.ck-option input{position:absolute;opacity:0;width:0;height:0}
.ck-option .mark{flex:none;width:27px;height:27px;border-radius:8px;background:#F0EEF6;color:#5B5872;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:13px}
.ck-option.on .mark{background:var(--ind);color:#fff}
.ck-option .txt{font-size:15px;line-height:1.45}
.ck-nav{grid-area:nav;display:flex;gap:12px;align-items:center}
.ck-note{grid-area:note;font-size:12px;color:#6E6A85;line-height:1.6;margin:0}
.ck-side{grid-area:side;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.ck-side h2{margin:0 0 12px;font-size:15px}
.ck-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:14px}
.ck-cell{height:38px;border:1px solid var(--line);border-radius:8px;background:#fff;font-family:ui-monospace,monospace;font-size:13px;cursor:pointer}
.ck-cell.done{background:var(--ind);border-color:var(--ind);color:#fff}
.ck-cell.flag{background:#F4E6B8;border-color:#D6BE6A;color:#6B5310}
.ck-cell.cur{background:#241B5E;border-color:#241B5E;color:#fff}
.ck-legend{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13px;color:#3A3652}
.ck-legend li{display:flex;align-items:center;gap:9px}
.ck-legend i{width:17px;height:17px;border-radius:5px;border:1px solid var(--line);display:block}
.ck-legend .done{background:var(--ind);border-color:var(--ind)}
.ck-legend .flag{background:#F4E6B8;border-color:#D6BE6A}
.ck-submit{width:100%;margin:6px 0 8px}

/* ---- Academy hub ---- */
.ac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.ac-card{display:flex;flex-direction:column;gap:9px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:16px;text-decoration:none;color:inherit}
.ac-card:hover{border-color:var(--ind)}
.ac-lead{grid-column:span 2;background:var(--tint,#EDEAF8)}
.ac-step{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ind)}
.ac-card h2{margin:0;font-size:22px}
.ac-card p{margin:0;font-size:14px;line-height:1.5;color:#3A3652;flex:1}
.ac-more{font-size:14px;font-weight:700;color:var(--ind)}
.ac-how{margin-top:10px}
.ac-how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:16px}
.ac-how-grid h3{font-size:17px;margin:0 0 8px}
.ac-how-grid p{margin:0;font-size:14px;line-height:1.55;color:#3A3652}

@media (max-width:900px){
  .pw-layout,.pw-detail,.pw-hero-row,.pw-result-head{grid-template-columns:1fr}
  .ck-item form{grid-template-columns:1fr;grid-template-areas:"card" "nav" "side" "report" "note"}
  .ck-progress-row{max-width:100%}
  .pw-assets,.ac-how-grid{grid-template-columns:1fr}
  .ac-lead{grid-column:span 1}
  .pw-domain{grid-template-columns:28px 1fr 60px;grid-template-areas:"ord nm nm" "bar bar pct"}
  .pw-domain .band{display:none}
}

/* Validation mode */
.pw-validating{background:#F7E9D4;border-bottom:1px solid #E0C89A}
.pw-validating .wrap{padding:13px 0;font-size:14px;line-height:1.5;color:#5A3C0C}
.ck-report{grid-area:report;margin-top:0;border:1px solid var(--line);border-radius:10px;background:#fff}
.ck-report summary{padding:12px 16px;cursor:pointer;font-size:13px;font-weight:700;color:#5B5872}
.ck-report-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px}
.ck-report-body label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#5B5872}
.ck-report-body select,.ck-report-body textarea{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit}
.fc-report{margin-top:14px}
.fc-report button{background:transparent;border:1px solid #5A4CB0;color:#C9C3E8;border-radius:8px;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer}
.stat-bad{color:#8A2B12;font-weight:700}
.stat-warn{color:#8A4B12;font-weight:600}

/* Pathways on the homepage */
.pw-home{display:grid;grid-template-columns:1.25fr 1fr;gap:32px;margin-top:20px;align-items:start}
.pw-home h3{font-size:18px;margin:0 0 14px}
.pw-home-what ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pw-home-what li{display:grid;grid-template-columns:160px 1fr;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:14px}
.pw-home-what li:last-child{border-bottom:0}
.pw-home-what b{color:var(--ind)}
.pw-home-what span{color:#3A3652;line-height:1.5}
.pw-home-honest{background:var(--tint,#EDEAF8);border-radius:14px;padding:22px}
.pw-home-honest p{font-size:14px;line-height:1.55;margin:0 0 12px}
@media (max-width:900px){.pw-home{grid-template-columns:1fr}.pw-home-what li{grid-template-columns:1fr;gap:4px}}


/* Exam Pathways home */
.ep-sub{position:sticky;top:var(--header-h);z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.ep-sub .wrap{display:flex;align-items:center;gap:22px;padding:12px 0;font-size:14px;flex-wrap:wrap}
.ep-sub a{text-decoration:none;color:#3A3652;font-weight:600}
.ep-sub a:hover{color:var(--ind)}
.ep-sub-mark{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.14em;color:var(--ind)}
.ep-sub-cta{margin-left:auto;padding:9px 16px;font-size:14px}
.ep-hero{background:#241B5E;color:#fff;padding:52px 0}
.ep-hero .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center}
.ep-hero h1{color:#fff;font-size:44px;line-height:1.1;margin:10px 0 14px;letter-spacing:-.8px}
.ep-hero .sub{color:#D7D2EE;font-size:17px;line-height:1.6;max-width:56ch}
.ep-hero .eyebrow{color:#C7D92E;font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.16em;margin:0}
.ep-hero .cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.ep-card{background:#fff;color:var(--ink);border-radius:16px;padding:22px}
.ep-card-head{display:flex;justify-content:space-between;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.1em;color:#6E6A85;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.ep-card-row{display:grid;grid-template-columns:1fr 92px 28px;gap:12px;align-items:center;margin-bottom:11px;font-size:13px}
.ep-card-row .bar{height:8px;background:#F0EEF6;border-radius:999px;overflow:hidden}
.ep-card-row .bar span{display:block;height:8px;background:var(--ind)}
.ep-card-row .bar.warn span{background:#C06010}
.ep-card-row .val{font-family:ui-monospace,monospace;font-size:12px;text-align:right}
.ep-card-note{margin:14px 0 0;font-size:11px;line-height:1.5;color:#6E6A85}
.eyebrow{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.16em;color:var(--ind);margin:0 0 8px}
.ep-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;border-top:3px solid var(--ind);padding-top:20px;margin-top:16px}
.ep-steps .no{font-family:ui-monospace,monospace;font-size:12px;color:var(--ind)}
.ep-steps h3{margin:6px 0 6px;font-size:18px}
.ep-steps p{margin:0;font-size:14px;line-height:1.5;color:#3A3652}
.ep-filters{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 18px}
.ep-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.ep-tile{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:inherit}
.ep-tile:hover{border-color:var(--ind)}
.ep-tile .pillar{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.12em;color:#6E6A85}
.ep-tile h3{margin:0;font-size:19px}
.ep-tile p{margin:0;font-size:13px;line-height:1.45;color:#3A3652;flex:1}
.ep-tile-foot{display:flex;gap:7px;align-items:center}
.ep-validating{background:#F7E9D4;color:#7A4A10;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:700}
.ep-later{margin-top:18px}
.ep-standards{display:grid;grid-template-columns:1fr 1.3fr;gap:36px;align-items:start}
.ep-standards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ep-standards-grid h3{margin:0 0 6px;font-size:17px}
.ep-standards-grid p{margin:0;font-size:14px;line-height:1.5;color:#3A3652}
.ep-access{background:#241B5E;color:#fff;padding:46px 0}
.ep-access h2{color:#fff;margin:0 0 10px}
.ep-access .sub{color:#D7D2EE;font-size:16px;max-width:60ch}
.ep-access .eyebrow{color:#C7D92E}
.ep-access .cta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.ep-disclaimer{background:#F2F1F5;border-top:1px solid var(--line)}
.ep-disclaimer p{margin:0;padding:18px 0;font-size:12px;line-height:1.6;color:#5B5872}
@media (max-width:900px){
  .stages,.ep-steps,.ep-standards-grid{grid-template-columns:1fr}
  .ep-hero .wrap,.ep-standards{grid-template-columns:1fr}
  .ep-hero h1{font-size:34px}
  .ep-sub-cta{margin-left:0}
}

/* Exam Pathways: inline browse */
.ep-none{margin:18px 0 0;font-size:14px;color:#5B5872}
.ep-none .link{background:none;border:0;padding:0;font:inherit;color:var(--ind);cursor:pointer;text-decoration:underline}

/* Homepage: exam-to-practice, from the Academy v2.0 prototype */
.xsplit{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.xr{background:#fff;color:var(--ink);border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.xr .xh{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--tint);padding:14px 20px;font-size:13.5px;font-weight:600;color:var(--ind)}
.xr .xb{display:grid;grid-template-columns:1fr 1fr}
.xr .xb>div{padding:20px}
.xr .xb>div:first-child{border-right:1px solid var(--line)}
.xr .xb>div:last-child{background:#FBFCF4}
.xr .lbl{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:700}
.xr .q{font-size:18px;font-weight:600;line-height:1.3;margin-top:10px;color:var(--ink)}
.xr .xf{border-top:1px solid var(--line);padding:14px 20px;font-size:15px;color:var(--ink)}
.pairs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.pairs div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:22px 20px}
.pairs b{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;opacity:.7;margin-bottom:8px}
.pairs .cert{font-size:20px;font-weight:600;color:#fff}
.pairs hr{border:0;border-top:1px solid rgba(255,255,255,.18);margin:14px 0}
.pairs .prac{font-size:15.5px;color:#E7E4F6;line-height:1.35}
.pairs b.lime{color:var(--lime);opacity:1}
.fineprint{font-size:13.5px;color:#C9C4E6;margin-top:26px;max-width:80ch}
@media (max-width:980px){.xsplit{grid-template-columns:1fr}.pairs{grid-template-columns:1fr 1fr}.xr .xb{grid-template-columns:1fr}.xr .xb>div:first-child{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:560px){.pairs{grid-template-columns:1fr}}
.ep-tile .owner{font-size:12px;color:#6E6A85}

/* Exam Pathways home: the facet rail, matching the browse page */
.ep-layout{margin-top:20px}
.pw-filters .pw-check{width:100%;text-align:left;background:none;border:0;font:inherit;cursor:pointer}
.pw-filters .pw-filters-head h3{font-size:15px;font-weight:800;margin:0;letter-spacing:0;text-transform:none;color:var(--ink)}
.pw-filters .pw-filters-head .link{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--ind);cursor:pointer;text-decoration:underline}
.pw-filters input[type=search]{width:100%;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
.pw-filters .pw-pill{cursor:pointer;font:inherit;font-size:13px}

/* Staff settings: readiness and filtering */
.ready{margin-top:8px}
.ready-ok{background:#EEF6E2;border:1px solid #C7DDA0;border-radius:10px;padding:14px 16px;font-size:14px;color:#3D5518}
.ready-head h2{font-size:20px;margin:0 0 4px}
.ready-head .muted{font-size:13px;margin:0 0 12px}
.ready-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.ready-item{border:1px solid var(--line);border-left-width:4px;border-radius:10px;padding:14px 16px;background:#fff}
.ready-item p{margin:0 0 8px;font-size:14px;line-height:1.5;color:#3A3652}
.ready-item .fix{color:#5C5A70;font-style:normal;font-size:13px}
.ready-top{display:flex;gap:9px;align-items:center;margin-bottom:7px}
.ready-top .lvl{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.09em;padding:3px 7px;border-radius:5px}
.ready-item.lvl-blocking{border-left-color:#B03A1A}
.ready-item.lvl-blocking .lvl{background:#F8E4DE;color:#8A2B12}
.ready-item.lvl-degraded{border-left-color:#C08010}
.ready-item.lvl-degraded .lvl{background:#F9EEDA;color:#7A4A10}
.ready-item.lvl-off{border-left-color:#5C5A70}
.ready-item.lvl-off .lvl{background:#EDECF2;color:#4A4860}
.ready-item .keys{display:flex;gap:6px;flex-wrap:wrap}
.keyjump{font-family:ui-monospace,monospace;font-size:11px;background:#EFEDF8;color:#3B2E8C;border:1px solid #DCD8F0;border-radius:6px;padding:4px 8px;cursor:pointer}
.keyjump:hover{background:#E2DEF5}
.tabs .tab{font:inherit;cursor:pointer}
.setting.found{outline:2px solid var(--ind);outline-offset:3px}

/* Staff: campaign switches */
.switch{width:44px;height:25px;border-radius:999px;background:#D9D7E4;border:0;padding:0;cursor:pointer;position:relative;transition:background .15s}
.switch span{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch.on{background:var(--lime-d)}
.switch.on span{left:22px}

/* Staff navigation, grouped */
.snav{background:#241C5C;position:sticky;top:var(--header-h);z-index:35}
.snav .wrap{display:flex;align-items:stretch;gap:2px;flex-wrap:wrap}
.snav a,.snav button{font:inherit;font-size:14px;font-weight:600;color:#C9C4E6;background:none;border:0;padding:13px 15px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.snav a:hover,.snav button:hover{color:#fff;background:rgba(255,255,255,.08)}
.snav-home{font-weight:800;color:#fff !important;padding-left:0 !important}
.snav-settings{margin-left:auto}
.snav .on>button,.snav a.on{color:#B8D14A !important;box-shadow:inset 0 -3px 0 #B8D14A}
.snav-group{position:relative}
.snav-group>button::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.snav-menu{display:none;position:absolute;top:100%;left:0;min-width:236px;background:#fff;border:1px solid var(--line);border-radius:0 0 12px 12px;box-shadow:0 16px 36px rgba(36,28,92,.18);padding:6px 0;z-index:40}
.snav-group:hover .snav-menu,.snav-group:focus-within .snav-menu{display:block}
.snav-menu a{display:block;color:#1B1830;padding:11px 16px;font-weight:600;font-size:14px}
.snav-menu a:hover{background:#EFEDF8;color:var(--ind)}
@media (max-width:940px){
  .snav{position:static}
  .snav .wrap{gap:0}
  .snav-settings{margin-left:0}
  .snav-menu{position:static;box-shadow:none;border:0;border-radius:0;background:rgba(255,255,255,.06);padding:0}
  .snav-menu a{color:#C9C4E6;padding-left:30px}
  .snav-group:hover .snav-menu,.snav-group:focus-within .snav-menu{display:block}
}

/* Homepage: what is free, said once and plainly */
.freebar{display:flex;align-items:stretch;gap:0;margin-top:26px;border:1px solid #DCE5B8;background:#FBFCF4;border-radius:14px;overflow:hidden;flex-wrap:wrap}
.freebar-label{display:flex;align-items:center;padding:16px 18px;background:#B8D14A;color:#1B1830;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.11em;font-weight:700;flex-shrink:0}
.freebar a{flex:1 1 0;min-width:150px;display:flex;flex-direction:column;gap:3px;padding:15px 18px;text-decoration:none;color:inherit;border-left:1px solid #E4EBCA}
.freebar a:hover{background:#F4F7E4}
.freebar b{font-size:15px;color:var(--ind)}
.freebar span{font-size:12.5px;line-height:1.4;color:#4A5518}
@media (max-width:900px){.freebar a{flex:1 1 46%}.freebar-label{width:100%}}

/* Member dashboard */
.dash-head{padding:30px 0 18px}
.dash-greet{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.dash-day{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:1.4px;color:var(--mute)}
.dash-greet h1{margin:6px 0 4px;font-size:34px;letter-spacing:-.6px}
.dash-greet .lead{margin:0;font-size:16px}
.dash-counts{display:flex;gap:12px}
.dash-count{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;min-width:120px;display:flex;flex-direction:column;gap:2px}
.dash-count .k{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.8px;color:#6E6A85}
.dash-count b{font-size:26px;font-weight:800}
.dash-count .n{font-size:12px;color:var(--mute)}
.eyebrow-lime{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:1.2px;color:var(--lime)}
.dash-next{background:var(--ind-d);border-radius:16px;padding:26px 30px;display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.dash-next h2{margin:9px 0 6px;font-size:25px;color:#fff;line-height:1.25}
.dash-next p{margin:0;font-size:15px;line-height:1.55;color:#C9C4E6;max-width:62ch}
.dash-next>div:first-child{flex:1 1 400px}
.dash-next-act{display:flex;flex-direction:column;gap:9px;min-width:216px}
.dash-next-act .btn{text-align:center}
.dash-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-top:20px}
.dash-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px;display:flex;flex-direction:column;gap:14px}
.dash-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.dash-panel-head h3{margin:0;font-size:19px;font-weight:800}
.dash-mono{font-family:ui-monospace,monospace;font-size:11px;color:#6E6A85}
.dash-ring-row{display:flex;gap:22px;align-items:center}
.dash-ring{flex-shrink:0;width:102px;height:102px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.dash-ring-in{width:80px;height:80px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dash-ring-in b{font-size:23px;line-height:1}
.dash-ring-in small{font-size:11px;color:#6E6A85}
.dash-route-note{margin:0 0 10px;font-size:14px;line-height:1.55;color:#3A3652}
.dash-steps{display:flex;flex-direction:column;gap:7px}
.dash-step{display:flex;gap:11px;align-items:center;font-size:14px;padding:8px 0;border-top:1px solid #F0EFF5}
.dash-step .m{flex-shrink:0;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.dash-step.done .m{background:var(--lime);color:var(--ink)}
.dash-step.todo .m{background:#F7F7FA;border:1.5px solid var(--line);color:#8A87A0}
.dash-step .t{flex:1}
.dash-step.todo .t{color:#3A3652}
.dash-step .v{font-family:ui-monospace,monospace;font-size:12px;color:#6E6A85}
.dash-doms{display:flex;flex-direction:column;gap:8px}
.dash-dom{display:flex;align-items:center;gap:10px;font-size:13px}
.dash-dom .n{flex:1;color:#3A3652}
.dash-dom .bar{width:76px;height:7px;background:#EFEDF8;border-radius:4px;overflow:hidden}
.dash-dom .bar span{display:block;height:7px}
.dash-dom .v{font-family:ui-monospace,monospace;font-size:11px;width:24px;text-align:right}
.dash-miles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.dash-mile{border:1px solid var(--line);border-radius:12px;padding:15px;display:flex;flex-direction:column;gap:6px;min-height:112px}
.dash-mile .b{width:32px;height:32px;border-radius:9px;background:#EFEDF8;color:#6E6A85;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-size:12px;font-weight:700}
.dash-mile .t{font-size:14px;font-weight:800;color:#3A3652}
.dash-mile .n{font-size:12px;line-height:1.4;color:var(--mute)}
.dash-mile.got{border-color:#DCE5B8;background:#FBFCF4}
.dash-mile.got .b{background:var(--lime);color:var(--ink)}
.dash-mile.got .t{color:var(--ink)}
.reqmark{flex-shrink:0;width:21px;height:21px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.reqmark.done{background:var(--lime);color:var(--ink)}
.reqmark.todo{background:#F7F7FA;border:1.5px solid var(--line);color:#8A87A0}
@media (max-width:980px){.dash-grid{grid-template-columns:1fr}.dash-miles{grid-template-columns:1fr 1fr}.dash-next-act{min-width:0;width:100%}}
.academy-mark{height:56px;width:auto;display:block}
.academy-mark-sm{height:38px}

/* Staff pages, modernised: the shared shell every screen inherits */
.page-head h1{letter-spacing:-.7px}
.legal-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:14px}
.legal-table thead th{background:#FBFBFD;text-align:left;padding:13px 16px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5C5A70;font-weight:800;border-bottom:1px solid var(--line)}
.legal-table tbody td{padding:15px 16px;border-top:1px solid #F0EFF5;vertical-align:top}
.legal-table tbody tr:first-child td{border-top:0}
.legal-table tbody tr:hover{background:#FBFBFD}
.legal-table .link{background:none;border:0;padding:0;font:inherit;font-size:13.5px;font-weight:700;color:var(--ind);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.legal-table .link:hover{color:var(--ind-d)}
.success{background:#EEF6E2;border:1px solid #C7DDA0;color:#3D5518;border-radius:10px;padding:13px 16px;font-size:14px;margin-top:14px}
.error{background:#F8E4DE;border:1px solid #E7BCAE;color:#8A2B12;border-radius:10px;padding:13px 16px;font-size:14px;margin-top:14px}

/* Dashboard: score and certificate beside a finished requirement */
.req-acts{display:inline-flex;gap:8px;align-items:center;margin-left:10px}
.score-pop{position:relative;display:inline-block}
.score-pop summary{list-style:none;cursor:pointer;background:#EEF6E2;border:1px solid #C7DDA0;color:#3D5518;border-radius:999px;padding:5px 11px;font-size:13px}
.score-pop summary::-webkit-details-marker{display:none}
.score-pop summary:hover{background:#E4F0D2}
.score-body{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(36,28,92,.16);padding:12px 14px;display:flex;flex-direction:column;gap:7px}
.score-body .row{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:#3A3652;white-space:nowrap}

/* Dashboard: pathways panel */
.pw-mine{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:6px}
.pw-mine-card{text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:7px}
.pw-mine-card:hover{border-color:var(--ind)}
.pw-mine-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pw-mine-card .top b{font-size:16px}
.pw-mine-card .due{font-size:12px;color:var(--ind);font-weight:700;white-space:nowrap}
.pw-mine-card .bar{display:block;height:7px;background:#EFEDF8;border-radius:4px;overflow:hidden}
.pw-mine-card .bar span{display:block;height:7px;background:var(--lime-d)}
.pw-mine-card .note{font-size:12px;color:var(--mute)}
.pw-find{display:flex;align-items:center;gap:12px;margin-top:6px}
.pw-find input{flex:1;height:46px;padding:0 15px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.pw-find-n{font-size:12.5px;color:var(--mute);white-space:nowrap}
.pw-find-list{display:flex;flex-direction:column}
.pw-find-row{display:flex;align-items:center;gap:14px;padding:12px 4px;border-top:1px solid #F0EFF5;text-decoration:none;color:inherit}
.pw-find-row:hover{background:#FBFBFD}
.pw-find-row .n{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pw-find-row .n b{font-size:15px}
.pw-find-row .n small{font-size:12.5px;color:var(--mute)}
.pw-find-row .o{font-size:12.5px;color:var(--mute);white-space:nowrap}
.pw-find-row .go{font-size:13px;font-weight:700;color:var(--ind);white-space:nowrap}
@media (max-width:640px){.pw-find-row .o{display:none}}

/* Account avatar menu. Sign-out lives here, which is where people look for it. */
.avatar-menu{position:relative;margin-left:4px}
.avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--ind);color:#fff;font:inherit;font-size:13px;font-weight:800;letter-spacing:.02em;cursor:pointer;display:flex;align-items:center;justify-content:center}
.avatar:hover{background:var(--ind-d)}
.avatar-pop{display:none;position:absolute;top:calc(100% + 9px);right:0;min-width:246px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(36,28,92,.16);padding:6px;z-index:70}
.avatar-menu.open .avatar-pop{display:block}
.avatar-head{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;display:flex;flex-direction:column;gap:2px}
.avatar-head b{font-size:14.5px}
.avatar-head small{font-size:12px;color:var(--mute);font-family:ui-monospace,monospace}
.avatar-pop a,.avatar-pop button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer}
.avatar-pop a:hover,.avatar-pop button:hover{background:#EFEDF8;color:var(--ind)}
.avatar-sep{height:1px;background:var(--line);margin:6px 0}
.avatar-pop form button{color:#8A2B12}
.avatar-pop form button:hover{background:#F8E4DE;color:#8A2B12}

/* A member's own certificate */
.cert-award{margin:2px 0 14px;font-size:13px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.cert-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.cert-score{display:flex;align-items:center;gap:24px}
.cert-score .big{font-size:52px;font-weight:800;line-height:1;color:var(--mute)}
.cert-score .big.pass{color:var(--ind)}
.cert-score .big small{font-size:22px}
@media print{.nav,.player-foot,.cert-acts,.dash-panel,footer,header{display:none !important}.cert-sheet{border:0}}

/* Dashboard tabs for the lower half */
.dtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-top:10px}
.dtabs button{font:inherit;font-size:14.5px;font-weight:700;color:var(--mute);background:none;border:0;padding:12px 16px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.dtabs button:hover{color:var(--ink)}
.dtabs button[aria-selected="true"]{color:var(--ind);border-bottom-color:var(--lime)}
.dtab-panel>section{padding-top:22px}
.dtab-panel>section:first-child{padding-top:22px}

/* Dashboard: things not yet started get one line each, not a panel */
.dash-start{display:flex;align-items:stretch;margin-top:20px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;flex-wrap:wrap}
.dash-start-label{display:flex;align-items:center;padding:0 16px;background:#F7F7FA;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.11em;color:#6E6A85;flex-shrink:0}
.dash-start a{flex:1 1 0;min-width:190px;display:flex;flex-direction:column;gap:3px;padding:16px 18px;text-decoration:none;color:inherit;border-left:1px solid var(--line)}
.dash-start a:hover{background:#FBFBFD}
.dash-start b{font-size:15px;color:var(--ind)}
.dash-start span{font-size:12.5px;line-height:1.45;color:var(--mute)}
@media (max-width:820px){.dash-start-label{width:100%;padding:10px 16px}.dash-start a{flex:1 1 100%;border-left:0;border-top:1px solid var(--line)}}

/* Courses under way */
.dash-inflight{display:flex;flex-direction:column}
.dash-inflight-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #F0EFF5;text-decoration:none;color:inherit;font-size:14px}
.dash-inflight-row:first-child{border-top:0}
.dash-inflight-row:hover .n{color:var(--ind)}
.dash-inflight-row .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-inflight-row .bar{width:80px;height:7px;background:#EFEDF8;border-radius:4px;overflow:hidden;flex-shrink:0}
.dash-inflight-row .bar span{display:block;height:7px;background:var(--lime-d)}
.dash-inflight-row .v{font-family:ui-monospace,monospace;font-size:12px;width:34px;text-align:right;color:#6E6A85}

/* Streak and week line */
.dash-count.streak{background:#FBFCF4;border-color:#DCE5B8}
.dash-count.streak .k{color:#66781E}
.dash-count.streak b{color:#3D5518}
.dash-count b small{font-size:15px;font-weight:700;margin-left:1px}
.dash-week{margin:6px 0 0;font-size:13.5px;color:var(--mute)}
.dash-week b{color:var(--ind);font-weight:700}

/* The reward moment */
.dash-win{display:flex;align-items:center;gap:16px;background:linear-gradient(90deg,#3D5518,#66781E);border-radius:14px;padding:16px 20px;margin-bottom:14px;flex-wrap:wrap}
.dash-win-mark{width:36px;height:36px;border-radius:50%;background:var(--lime);color:#1B1830;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.dash-win>div{flex:1;display:flex;flex-direction:column;gap:2px;min-width:200px}
.dash-win .k{font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;color:#D6E6A8}
.dash-win b{font-size:17px;color:#fff}

/* Milestone progress */
.dash-mile{position:relative}
.dash-mile .mbar{display:block;height:5px;background:#EFEDF8;border-radius:3px;overflow:hidden;margin-top:auto}
.dash-mile .mbar span{display:block;height:5px;background:var(--ind);opacity:.5}

/* ---- The certificate ------------------------------------------------------------------------
   Landscape, bordered, sealed and signed. Sized to print on A4 or Letter in one page with the
   frame intact, which is the whole point of the thing. */
.cert-sheet{background:#fff;padding:0;margin:0 auto;max-width:1040px;
  box-shadow:0 10px 40px rgba(27,24,48,.13);border-radius:4px}
.cert-frame{border:2px solid var(--ind);margin:14px;padding:3px}
.cert-inner{border:1px solid var(--lime-d);padding:46px 56px 38px;text-align:center;
  background:
    radial-gradient(circle at 12% 8%, rgba(190,214,74,.07), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(61,44,122,.06), transparent 42%),
    #fff}

.cert-head{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:18px}
.cert-logo{height:42px;width:auto}
.cert-org{margin:0;font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ind)}

.cert-award{margin:0 0 26px;font-size:15px;letter-spacing:.16em;text-transform:uppercase;
  color:#6E6A85;font-weight:600}
.cert-presented{margin:0;font-size:14.5px;color:var(--mute);font-style:italic}

.cert-name{margin:10px 0 12px;font-size:46px;line-height:1.1;color:var(--ind);font-weight:800;
  letter-spacing:-.01em}
.cert-name::after{content:"";display:block;width:220px;height:2px;margin:16px auto 0;
  background:linear-gradient(90deg,transparent,var(--lime-d),transparent)}

.cert-course{margin:12px 0 2px;font-size:24px;font-weight:700;color:#1B1830;line-height:1.25}
.cert-code{margin:0 0 20px;font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.12em;
  color:var(--lime-d)}
.cert-statement{margin:0 auto 34px;max-width:660px;font-size:14.5px;line-height:1.65;color:#3A3652}
.cert-statement b{color:var(--ind)}

.cert-sign{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-top:8px}
.cert-sign-block{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.cert-sign-line{width:100%;max-width:230px;border-bottom:1.5px solid #B9B4CE;height:26px}
.cert-sign-role{font-size:12.5px;font-weight:700;color:#1B1830}
.cert-sign-org{font-size:11px;color:var(--mute)}

.cert-seal{flex-shrink:0}

.cert-verify{margin:24px 0 0;font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.1em;
  color:#8B86A3}

.cert-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;justify-content:center}

@media (max-width:820px){
  .cert-inner{padding:30px 22px 26px}
  .cert-name{font-size:32px}
  .cert-course{font-size:19px}
  .cert-sign{flex-direction:column;align-items:center;gap:22px}
  .cert-sign-line{max-width:200px}
}

/* Print: the certificate alone, landscape, nothing else on the page. */
@media print{
  @page{size:landscape;margin:10mm}
  body *{visibility:hidden}
  #cert, #cert *{visibility:visible}
  #cert{position:absolute;left:0;top:0;width:100%;box-shadow:none;max-width:none}
  .cert-inner{padding:34px 44px}
  .cert-acts,.dash-panel,.site-header,.site-footer{display:none!important}
}

/* Staff context menu: right-click anywhere to reach any staff screen. */
.sctx{position:fixed;z-index:4000;min-width:232px;max-height:calc(100vh - 16px);overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 14px 44px rgba(27,24,48,.20)}
.sctx-head{font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#8B86A3;padding:7px 10px 4px}
.sctx-sep{height:1px;background:var(--line);margin:5px 4px}
.sctx-item{display:block;padding:7px 10px;border-radius:7px;font-size:13.5px;color:#1B1830;
  text-decoration:none;outline:none}
.sctx-item:hover,.sctx-item:focus{background:#F4F2FB;color:var(--ind)}
.sctx-item.on{color:var(--ind);font-weight:700}
.sctx-item.on::after{content:" ·";color:var(--lime-d)}
@media print{.sctx{display:none!important}}

/* A credential sheet is distinguished from a course certificate by its border, so the two are not
   mistaken for each other at a glance on a wall. */
.cert-frame-cred{border-width:3px}
.cert-frame-cred .cert-inner{border-color:var(--ind)}

/* Public verification result: a verdict first, then the facts behind it. */
.vr{margin-top:26px;border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:#fff;max-width:680px}
.vr-good{border-color:#BCD46A;background:linear-gradient(180deg,#FBFDF5,#fff)}
.vr-warn{border-color:#E4C36A;background:linear-gradient(180deg,#FFFCF4,#fff)}
.vr-bad{border-color:#E4A0A0;background:linear-gradient(180deg,#FFF6F6,#fff)}

.vr-verdict{display:flex;align-items:center;gap:11px;font-size:18px;color:#1B1830}
.vr-mark{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;color:#fff;flex-shrink:0}
.vr-good .vr-mark{background:#6E8C1E}
.vr-warn .vr-mark{background:#B58A1C}
.vr-bad .vr-mark{background:#B44A4A}

.vr-say{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:#3A3652}
.vr-say b{color:var(--ind)}
.vr-note{margin:12px 0 0;font-size:14px;line-height:1.6;color:#3A3652}

.vr-what{margin-top:16px;padding:14px 16px;border-radius:10px;background:#F7F6FC;display:flex;
  flex-direction:column;gap:3px}
.vr-title{font-size:16.5px;font-weight:700;color:var(--ind)}
.vr-kind{font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6E6A85}

.vr-facts{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:16px 0 0;font-size:13.5px}
.vr-facts dt{color:var(--mute)}
.vr-facts dd{margin:0;color:#1B1830}
.vr-facts dd.mono{font-family:ui-monospace,monospace;font-size:12.5px}
@media (max-width:560px){.vr-facts{grid-template-columns:1fr;gap:2px 0}.vr-facts dd{margin-bottom:8px}}

/* Readiness banner: a service that is off because a key was never set has to say so where staff will see it. */
.snag{background:#FFF7E9;border-bottom:1px solid #E8CF9A}
.snag .wrap{display:flex;align-items:center;gap:14px;padding:11px 0;flex-wrap:wrap}
.snag-mark{width:24px;height:24px;border-radius:50%;background:#B58A1C;color:#fff;font-weight:800;
  font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.snag-body{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}
.snag-body b{font-size:14px;color:#5C4408}
.snag-list{font-size:12.5px;color:#7A5F17;line-height:1.5}
.snag-act{font-size:13px;font-weight:700;color:#5C4408;text-decoration:underline;white-space:nowrap}
.snag-act:hover{color:#B58A1C}
@media print{.snag{display:none!important}}

/* Campaign schedule editor */
.cs-edit td{background:#FAF9FD;border-top:0}
.cs-form{padding:6px 2px 10px}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 18px}
.cs-grid label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:#3A3652}
.cs-grid input,.cs-grid select{padding:7px 9px;border:1px solid var(--line);border-radius:7px;
  font-size:13.5px;font-weight:400;background:#fff}
.cs-grid input:focus,.cs-grid select:focus{outline:2px solid var(--ind);outline-offset:-1px}
.cs-grid small{font-weight:400;color:var(--mute);font-size:11.5px;line-height:1.4}
.cs-actions{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.cs-actions small{color:var(--mute);font-size:11.5px}

/* Settings: what cannot run, on arrival */
.set-alert{display:flex;gap:14px;align-items:flex-start;margin:18px 0 6px;padding:16px 18px;
  border:1px solid #E8CF9A;border-left:4px solid #B58A1C;border-radius:12px;background:#FFF7E9;max-width:920px}
.set-alert-mark{width:26px;height:26px;border-radius:50%;background:#B58A1C;color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.set-alert b{color:#5C4408}
.set-alert-list{margin:10px 0 0;padding-left:18px;font-size:13.5px;line-height:1.65;color:#5C4408}
.set-alert-list li{margin-bottom:7px}
.set-alert-keys{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:6px}
.set-jump{font-family:ui-monospace,monospace;font-size:11.5px;padding:2px 8px;border-radius:6px;
  border:1px solid #D8BE85;background:#fff;color:#5C4408;cursor:pointer}
.set-jump:hover{background:#B58A1C;color:#fff;border-color:#B58A1C}
.set-ok{margin:18px 0 6px;max-width:920px}
.setting.just-jumped{outline:2px solid var(--ind);outline-offset:3px;transition:outline-color .4s}
.sync-bad{border-left:3px solid #B44A4A;padding-left:12px;background:#FFF6F6;border-radius:0 8px 8px 0;padding:10px 14px;max-width:860px}
.sync-ok{border-left:3px solid var(--lime-d);padding-left:12px;background:#FBFDF5;border-radius:0 8px 8px 0;padding:10px 14px;max-width:860px}

/* Log selection and export */
.log-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding:10px 14px;
  background:var(--tint);border-radius:10px}
.log-all{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#1B1830;cursor:pointer}
.log-count{font-size:12.5px;color:var(--mute);min-width:82px}
.log-note{font-size:12.5px;color:var(--mute);margin-left:auto}
.btn.small{padding:6px 12px;font-size:13px}
.log-list .log-pick{margin-right:10px;flex-shrink:0}
.log-list .log-row{align-items:flex-start}

/* Read-before-you-attest links, wherever staff are asked to approve something */
.review-open{display:inline-flex;gap:8px;align-items:center;margin-bottom:6px}
.review-open a{font-size:12px;font-weight:600;padding:3px 9px;border:1px solid var(--line);border-radius:999px;
  color:var(--ind);text-decoration:none;background:#fff;white-space:nowrap}
.review-open a:hover{background:var(--ind);color:#fff;border-color:var(--ind)}
.review-open a::after{content:" \2197";font-weight:400;opacity:.65}
.run-error{margin:8px 0 0;padding:10px 12px;background:#FFF6F6;border:1px solid #E4A0A0;border-radius:8px;
  font-family:ui-monospace,monospace;font-size:12px;white-space:pre-wrap;word-break:break-word;color:#7A2E2E}
.status.ok{background:var(--lime);color:var(--ind-d)}

/* Blueprint domain expander, so "mark verified" has something to read */
.bp-detail{margin-bottom:8px}
.bp-detail summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ind)}
.bp-domains{width:100%;max-width:520px;margin-top:8px;border-collapse:collapse;font-size:12.5px;white-space:normal}
.bp-domains th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
  padding:4px 8px;border-bottom:1px solid var(--line)}
.bp-domains td{padding:4px 8px;border-bottom:1px solid var(--line)}
.bp-domains tfoot td{border-bottom:0;border-top:2px solid var(--line)}
.bp-ok{color:#5C7A15}
.bp-bad{color:#B44A4A}

/* Social: campaign against page, and the LinkedIn preview */
.sp-matrix td{vertical-align:top;font-size:12.5px;text-align:center}
.sp-matrix td:first-child{text-align:left}
.sp-on{background:#FBFDF5}
.sp-off{background:#FAFAFC}
.sp-panel{margin-top:22px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:#fff}

.sp-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:22px;margin-top:20px}
@media (max-width:860px){.sp-preview{grid-template-columns:1fr}}

/* A plain approximation of the LinkedIn card, enough to judge the copy and the fold. */
.sp-li{border:1px solid #D6D9DE;border-radius:10px;overflow:hidden;background:#fff;max-width:560px}
.sp-li-head{display:flex;gap:10px;align-items:center;padding:12px 14px}
.sp-li-avatar{width:42px;height:42px;border-radius:50%;background:var(--ind);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sp-li-head b{display:block;font-size:14px;color:#1B1830}
.sp-li-head small{display:block;font-size:11.5px;color:#6E6A85}
.sp-li-body{padding:0 14px 12px;font-size:14px;line-height:1.5;white-space:pre-wrap;color:#1B1830}
.sp-li-card{display:block;width:100%;border-top:1px solid #E6E8EB}

.sp-meta{font-size:12.5px;color:#3A3652}
.sp-meta p{margin:0 0 8px}
.sp-warn{margin:8px 0 0;padding-left:16px;color:#7A5F17;line-height:1.6}
.sp-warn li{margin-bottom:6px}
.sp-ok{color:#5C7A15;font-weight:600}

/* The seal. Engraved rather than a coloured ring: arc-set type, a guilloche rosette and a toothed rim, which
   is what makes a seal read as struck rather than drawn in a browser. */
.cert-seal{flex-shrink:0;filter:drop-shadow(0 1px 1px rgba(27,24,48,.12))}
.seal-arc{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10.5px;letter-spacing:.235em;font-weight:600}
.seal-arc-sm{font-size:8px;letter-spacing:.16em;font-weight:500}
.seal-year{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;letter-spacing:.18em;font-weight:600}
.cert-logo{display:inline-flex;align-items:center;justify-content:center}
.cert-logo svg{display:block}

/* Inline content review: the content is the page, the decision sits under it */
.rv-card{margin-top:22px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid var(--line);background:var(--tint)}
.rv-head small{color:var(--mute);font-size:12.5px;white-space:nowrap}
.rv-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media (max-width:820px){.rv-body{grid-template-columns:1fr}}
.rv-side{padding:20px 22px}
.rv-side + .rv-side{border-left:1px solid var(--line)}
@media (max-width:820px){.rv-side + .rv-side{border-left:0;border-top:1px solid var(--line)}}
.rv-side h4{margin:0 0 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.rv-text{font-size:15.5px;line-height:1.65;color:#1B1830;white-space:pre-wrap}
.rv-note{margin:0;padding:10px 22px;border-top:1px solid var(--line);font-size:13px;color:#3A3652}
.rv-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:16px 22px;border-top:1px solid var(--line)}
.rv-input{flex:1;min-width:200px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13.5px}
.rv-blocked{margin:0;padding:14px 22px;border-top:1px solid var(--line);background:#FFF7E9;color:#5C4408;
  font-size:13.5px;font-weight:600}

/* Alert preferences */
.al-warn{margin-top:18px;padding:16px 18px;border:1px solid #E8CF9A;border-left:4px solid #B58A1C;
  border-radius:12px;background:#FFF7E9;max-width:820px;color:#5C4408;font-size:13.5px}
.al-warn ul{margin:8px 0;padding-left:18px;line-height:1.7}
.al-warn p{margin:8px 0 0}
.al-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:20px;padding:12px 16px;
  background:var(--tint);border-radius:10px;font-size:13px;font-weight:600;color:#3A3652}
.al-cat{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  margin:26px 0 8px;font-weight:700}
.al-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;
  border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fff}
.al-what{flex:1;min-width:260px}
.al-what b{display:block;font-size:14.5px;color:#1B1830}
.al-what small{display:block;color:var(--mute);font-size:12.5px;line-height:1.5;margin-top:3px}
.al-urgent{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#B44A4A;background:#FFF1F1;padding:2px 7px;border-radius:999px;vertical-align:middle}
.al-min{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mute)}
.al-min input{width:88px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:13px}
.al-pick{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13.5px;background:#fff}

/* Social: choose a campaign to test on a page */
.sp-test{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sp-test select{padding:6px 8px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:12.5px;
  background:#fff;max-width:170px}
.avatar-head .avatar-email{display:block;font-size:12.5px;color:#3A3652;margin-top:2px;word-break:break-all}
.avatar-head .avatar-meta{display:block;font-size:11.5px;color:var(--mute);margin-top:2px}
.sp-submit{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.sp-submit small{font-size:11.5px;color:var(--mute);line-height:1.5}
.sp-warn-inline{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:#7A5F17;font-weight:600}

/* Load pathway content */
.cl-banner{margin-top:18px;padding:14px 18px;border:1px solid #E8CF9A;border-left:4px solid #B58A1C;border-radius:12px;
  background:#FFF7E9;color:#5C4408;font-size:13.5px;max-width:880px;line-height:1.55}
.cl-all{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.cl-all span{font-size:12.5px;color:var(--mute);max-width:520px;line-height:1.5}
.cl-verify{margin-top:14px;max-width:880px}
.cl-results{margin-top:22px;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:#fff;max-width:880px}
.cl-results h2{font-size:17px;margin:0 0 4px}
.cl-sum{margin:0 0 10px;font-size:13px;color:var(--mute)}
.cl-results > ul{list-style:none;margin:0;padding:0}
.cl-results > ul > li{padding:8px 0 8px 12px;border-left:3px solid var(--line);margin-bottom:6px;font-size:13px}
.cl-results > ul > li b{font-family:ui-monospace,monospace;font-size:12.5px;margin-right:8px}
.cl-ok{border-left-color:#8FB02E !important}
.cl-part{border-left-color:#B58A1C !important}
.cl-bad{border-left-color:#B44A4A !important}
.cl-results details{margin-top:4px}
.cl-results details summary{cursor:pointer;font-size:12px;color:var(--ind);font-weight:600}
.cl-results details ul{margin:6px 0 0;padding-left:18px;font-size:12px;color:#3A3652;line-height:1.55}
.cl-muted td{color:var(--mute)}
.cl-warn{color:#B44A4A;font-weight:600}

/* ===== Academy home (acd-) and Exam Pathways home (epx-) =====
   Both use the site's own Bricolage at its normal width. The prototypes set headlines condensed, which the rest
   of the site never does, and that is what made the type look wrong. */
.acd-hero{padding:72px 0 64px;background:radial-gradient(900px 420px at 88% 20%,rgba(107,95,191,.10),transparent 70%)}
.acd-hero-grid,.epx-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}
.acd-hero h1{font-size:clamp(36px,4.6vw,54px);font-weight:700;letter-spacing:-.025em;line-height:1.05;margin-top:18px;max-width:20ch}
.acd-hero .lead,.epx-hero .lead{margin-top:22px;font-size:19px;line-height:1.55;max-width:52ch}
.acd-cta,.epx-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

.acd-stack{position:relative;height:470px}
.acd-sheet{position:absolute;width:74%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px 20px;
  box-shadow:0 1px 0 rgba(27,24,48,.04),0 18px 40px -22px rgba(36,28,92,.35)}
.acd-sheet span{display:block;font-size:12px;font-weight:600;color:var(--lime-t)}
.acd-sheet b{display:block;font-size:18px;font-weight:650;margin-top:4px;letter-spacing:-.01em}
.acd-rows{margin-top:14px;display:grid;gap:7px}
.acd-rows i{display:block;height:7px;border-radius:4px;background:var(--tint)}
.acd-rows i:nth-child(2){width:86%}.acd-rows i:nth-child(3){width:64%}.acd-rows i:nth-child(4){width:78%}
.acd-grid{margin-top:14px;display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:6px}
.acd-grid i{display:block;height:18px;border-radius:5px;background:var(--tint)}
.acd-grid i.h{background:#E4E1F4}.acd-grid i.f{background:#EEF3D2}
.acd-s1{top:0;left:2%;transform:rotate(-3deg)}
.acd-s2{top:84px;left:20%;transform:rotate(1.5deg)}
.acd-s3{top:168px;left:6%;transform:rotate(-1.5deg)}
.acd-s4{top:252px;left:22%;transform:rotate(2deg);z-index:3;border-color:#CFC9EC}
.acd-stack figcaption{position:absolute;bottom:-6px;left:2%;font-size:13px;color:var(--mute);max-width:34ch}

.acd-sec,.epx-sec{padding:76px 0}
.acd-sec h2,.epx-sec h2,.epx-access h2{font-size:clamp(28px,3.2vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.1;max-width:24ch}
.acd-intro,.epx-intro{margin-top:16px;max-width:64ch;color:#3A3652;font-size:18px}
.acd-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.acd-thesis{margin-top:20px;font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.25;letter-spacing:-.012em;color:var(--ind-d);
  border-left:4px solid var(--lime);padding-left:20px}
.acd-prose p{max-width:64ch;color:#2E2A48}
.acd-prose p + p{margin-top:16px}

.acd-pillars{margin-top:32px;display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;list-style:none;padding:0}
.acd-pillars li{padding:18px 14px;font-size:14.5px;font-weight:600;line-height:1.25;border-right:1px solid var(--line)}
.acd-pillars li:last-child{border-right:0}
.acd-pillars li::before{content:"";display:block;width:22px;height:4px;border-radius:2px;background:var(--ind-l);margin-bottom:12px}
.acd-pillars li:last-child::before{background:var(--lime)}
.acd-principles{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.acd-principles h3,.acd-outcomes h3,.epx-problems h3,.epx-steps h3,.epx-std h3{font-size:20px;font-weight:650;letter-spacing:-.012em;line-height:1.2}
.acd-principles p,.acd-outcomes p,.epx-problems p,.epx-steps p,.epx-std p{margin-top:9px;color:#3A3652;font-size:16px}
.acd-split{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13px;background:#fff}
.acd-split div{padding:10px 12px}
.acd-split div + div{border-left:1px solid var(--line);background:var(--tint)}
.acd-split b{display:block;font-size:12.5px;color:var(--ind)}
.acd-split span{color:var(--mute)}

.acd-band,.epx-band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.acd-outcomes{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr)}
.acd-outcomes div{padding:4px 32px 4px 0}
.acd-outcomes div + div{padding-left:32px;border-left:1px solid var(--line)}
.acd-verify{margin-top:14px;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;
  padding:6px 14px 6px 8px;font-size:13px;font-weight:600;color:var(--ind);background:var(--bg);text-decoration:none}
.acd-verify i{width:22px;height:22px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-style:normal;color:var(--ind-d);font-size:13px;font-weight:800}

.acd-fit{margin-top:32px;border-top:1px solid var(--line)}
.acd-fit div{display:grid;grid-template-columns:220px 1fr;gap:28px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.acd-fit dt{font-size:19px;font-weight:650;letter-spacing:-.01em}
.acd-fit dd{color:#3A3652;max-width:64ch;margin:0}
.acd-fit dd a{margin-left:6px}
.acd-apart{background:linear-gradient(90deg,var(--tint),transparent 70%);padding-left:16px!important;margin-left:-16px;border-radius:8px}

.acd-tiers{margin-top:32px;display:grid;grid-template-columns:1fr 1.25fr;gap:24px}
.acd-tier{border-radius:16px;padding:28px}
.acd-tier h3{font-size:20px;font-weight:650}
.acd-tier ul{margin-top:16px;list-style:none;padding:0;display:grid;gap:11px}
.acd-tier li{padding-left:26px;position:relative;font-size:16px}
.acd-tier li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:3px;background:var(--ind-l)}
.acd-t1{background:#fff;border:1px solid var(--line)}
.acd-t2{background:var(--ind-d);color:#fff}
.acd-t2 h3{color:#fff}
.acd-t2 li::before{background:var(--lime)}

.acd-close{background:var(--ind-d);color:#fff;padding:88px 0}
.acd-close p{font-size:clamp(28px,3.8vw,46px);font-weight:700;letter-spacing:-.02em;line-height:1.08;max-width:22ch;margin-bottom:30px}
.acd-close p span{display:block;color:var(--lime)}

/* Exam Pathways home */
.epx-hero{background:var(--ind-d);color:#fff;padding:72px 0 80px}
.epx-hero h1{font-size:clamp(36px,4.6vw,54px);font-weight:700;letter-spacing:-.025em;line-height:1.05;max-width:16ch;color:#fff}
.epx-hero .lead{color:#D9D5F2}
.epx-btn-light{border:2px solid #fff;color:#fff;background:transparent}
.epx-btn-light:hover{background:rgba(255,255,255,.08)}
.epx-readout{background:#fff;color:var(--ink);border-radius:18px;padding:24px 26px 20px;box-shadow:0 30px 60px -30px rgba(0,0,0,.55);margin:0}
.epx-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.epx-top b{font-size:17px;font-weight:650}
.epx-top span{font-size:13px;color:var(--mute)}
.epx-readout ol{list-style:none;margin-top:16px;display:grid;gap:9px;padding:0}
.epx-readout li{display:grid;grid-template-columns:1fr 104px 44px;gap:12px;align-items:center;font-size:13.5px}
.epx-bar{height:8px;border-radius:5px;background:var(--tint);overflow:hidden}
.epx-bar i{display:block;height:100%;border-radius:5px;background:var(--ind);width:0;animation:epx-fill 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.epx-readout li.weak .epx-bar i{background:#C9A24A}
.epx-readout li.weak span:first-child{font-weight:600}
.epx-v{font-size:12.5px;text-align:right;color:var(--mute);font-variant-numeric:tabular-nums}
.epx-readout li.weak .epx-v{color:#8A6516;font-weight:600}
@keyframes epx-fill{to{width:var(--w)}}
@media (prefers-reduced-motion:reduce){.epx-bar i{animation:none;width:var(--w)}}
.epx-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute);line-height:1.5}
.epx-note b{color:#8A6516}
.epx-problems{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.epx-problems div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px}
.epx-answer{margin-top:28px;font-size:19px;font-weight:600;color:var(--ind-d);max-width:60ch;border-left:4px solid var(--lime);padding-left:20px}
.epx-steps{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);counter-reset:s;list-style:none;padding:0}
.epx-steps li{counter-increment:s;padding:0 26px 0 0}
.epx-steps li + li{padding-left:26px;border-left:1px solid var(--line)}
.epx-steps li::before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ind);color:#fff;font-weight:700;font-size:16px;margin-bottom:16px}
.epx-std{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.epx-std h3{display:flex;gap:10px;align-items:center}
.epx-std h3::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--lime);flex-shrink:0}
.epx-isnot{margin-top:44px;border:1px solid var(--line);border-left:4px solid var(--ind);border-radius:12px;background:var(--bg);padding:22px 26px;max-width:880px}
.epx-isnot h3{font-size:18px;font-weight:650}
.epx-isnot p{margin-top:8px;color:#3A3652;font-size:15.5px}
.epx-after{padding:72px 0}
.epx-after .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.epx-after p{font-size:clamp(22px,2.6vw,30px);font-weight:650;line-height:1.22;letter-spacing:-.015em;max-width:30ch}
.epx-access{background:var(--ind);color:#fff;padding:80px 0}
.epx-access h2{color:#fff}
.epx-access p{margin-top:16px;color:#E3E0F7;max-width:60ch;font-size:18px}

@media (max-width:960px){
  .acd-hero-grid,.epx-hero-grid,.acd-why{grid-template-columns:1fr}
  .acd-stack{height:450px;max-width:520px}
  .acd-pillars{grid-template-columns:repeat(2,1fr)}
  .acd-pillars li{border-bottom:1px solid var(--line)}
  .acd-pillars li:nth-child(2n){border-right:0}
  .acd-principles,.acd-outcomes,.acd-tiers,.epx-problems,.epx-std{grid-template-columns:1fr}
  .acd-outcomes div,.acd-outcomes div + div{padding:18px 0;border-left:0;border-top:1px solid var(--line)}
  .acd-fit div{grid-template-columns:1fr;gap:6px}
  .epx-steps{grid-template-columns:1fr 1fr;row-gap:32px}
  .epx-steps li:nth-child(3){padding-left:0;border-left:0}
  .acd-sec,.epx-sec{padding:56px 0}
}
@media (max-width:560px){
  .epx-steps{grid-template-columns:1fr}
  .epx-steps li,.epx-steps li + li{padding:0;border-left:0}
  .epx-readout li{grid-template-columns:1fr 70px 38px}
}

/* Review content: a page of cards with the decision on each. Paragraphs here are not held to reading width:
   the site-wide cap on paragraph width is what clipped the notices to half the card. */
.rv-notice{margin-top:14px;max-width:none}
.rv-current td{background:var(--tint)}
.rv-muted{color:var(--mute)}
.rv-bar{margin-top:28px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.rv-bar h2{font-size:22px;font-weight:650;letter-spacing:-.01em}
.rv-bar small{color:var(--mute);font-size:13.5px}
.rv-views{display:flex;gap:4px;background:var(--tint);border-radius:10px;padding:4px}
.rv-views a{padding:7px 14px;border-radius:7px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--ink)}
.rv-views a.on{background:#fff;color:var(--ind);box-shadow:0 1px 2px rgba(27,24,48,.08)}
.rv-list{margin-top:16px;display:grid;gap:12px}
.rv-item{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rv-item header{display:flex;gap:10px;align-items:center;padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--line);font-size:12.5px}
.rv-ref{font-family:ui-monospace,monospace;font-weight:600;color:var(--ind)}
.rv-tag{padding:2px 8px;border-radius:999px;background:var(--tint);font-weight:600}
.rv-by{margin-left:auto;color:var(--mute)}
.rv-pair{display:grid;grid-template-columns:1fr 1fr}
.rv-pair > div{padding:14px 16px}
.rv-pair > div + div{border-left:1px solid var(--line)}
.rv-pair h4{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.rv-pair p{margin:0;max-width:none;font-size:15px;line-height:1.55;white-space:pre-wrap}
.rv-source{margin:0;max-width:none;padding:9px 16px;border-top:1px solid var(--line);font-size:12.5px;color:#3A3652}
.rv-item footer{padding:10px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.rv-dec{display:flex;gap:8px}
.rv-why{font-size:12.5px;font-weight:600;color:#7A5F17}
.rv-bottom{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.rv-pager{display:flex;gap:16px;align-items:center;font-size:14px}
@media (max-width:720px){
  .rv-pair{grid-template-columns:1fr}
  .rv-pair > div + div{border-left:0;border-top:1px solid var(--line)}
}

/* Blueprints: enter by hand */
.bp-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.bp-meta label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:#3A3652}
.bp-meta input,.bp-meta select{padding:9px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-weight:400;min-width:170px}
.bp-meta .bp-wide{flex:1;min-width:260px}
.bp-grid{width:100%;border-collapse:collapse;font-size:13.5px}
.bp-grid th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:6px 6px;border-bottom:1px solid var(--line)}
.bp-grid td{padding:5px 6px;border-bottom:1px solid var(--line)}
.bp-grid td:first-child{color:var(--mute);width:28px}
.bp-grid input{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:7px;font:inherit}
.bp-grid td:nth-child(n+3) input{max-width:110px}

/* Public question page */
.qn{padding:56px 0 72px}
.qn-wrap{max-width:760px}
.qn-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--mute);margin:0 0 14px}
.qn-meta a{font-weight:700;color:var(--ind);text-decoration:none}
.qn-meta span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--line);margin:0 10px 3px 0;vertical-align:middle}
.qn-stem{font-size:clamp(22px,2.6vw,28px);font-weight:650;line-height:1.35;letter-spacing:-.01em;max-width:none}
.qn-form{margin-top:24px;display:grid;gap:10px}
.qn-opt{display:grid;grid-template-columns:auto 28px 1fr;gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;background:#fff;cursor:pointer;font-size:16px;line-height:1.5}
.qn-opt input{margin-top:5px;accent-color:var(--ind)}
.qn-opt b{color:var(--ind)}
.qn-opt:hover{border-color:var(--ind-l)}
.qn-opt.is-key{border-color:#8FB02E;background:#F4F8E4}
.qn-opt.is-wrong{border-color:#C98A8A;background:#FBEFEF}
.qn-opt.is-dim{opacity:.6}
.qn-form .btn{justify-self:start;margin-top:8px}
.qn-result{margin-top:22px;padding:18px 20px;border-radius:12px;border-left:4px solid}
.qn-result.ok{background:#F4F8E4;border-color:#8FB02E}
.qn-result.no{background:#FBF3E2;border-color:#C9A24A}
.qn-result h2{font-size:19px;font-weight:700;margin:0}
.qn-result p{margin:8px 0 0;max-width:none;line-height:1.6}
.qn-next{margin-top:28px;padding:22px 24px;border-radius:14px;background:var(--ind-d);color:#fff}
.qn-next h3{font-size:18px;font-weight:650;color:#fff;margin:0}
.qn-next p{margin:8px 0 0;color:#E3E0F7;max-width:none}
.qn-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.qn-next .btn-ghost{border-color:#fff;color:#fff}
.qn-note{margin-top:26px;font-size:12.5px;color:var(--mute);max-width:none}
/* The site's general label rules made each option a bold block with the letter run into the text. Held here with
   enough specificity to keep the three-column layout and ordinary weight. */
.qn .qn-form label.qn-opt{display:grid;grid-template-columns:18px 22px 1fr;column-gap:10px;font-weight:400;margin:0}
.qn .qn-form label.qn-opt b{font-weight:700}
.qn .qn-form label.qn-opt span{font-weight:400}
.qn-stem{white-space:pre-line}   /* the question's own paragraphs, kept apart */
/* Load everything: progress of the background run */
.cl-run{margin-top:18px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;max-width:880px}
.cl-run.on{border-color:#CFC9EC}
.cl-run-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.cl-run-top span{color:var(--mute);font-size:13px}
.cl-bar{margin:10px 0 6px;height:8px;border-radius:5px;background:var(--tint);overflow:hidden}
.cl-bar i{display:block;height:100%;background:var(--ind);border-radius:5px;transition:width .4s}
.cl-run.done .cl-bar i{background:#8FB02E}
.cl-run small{font-size:12.5px;color:var(--mute)}

/* ===== Join wizard (jz-) and checkout (co-) ===== */
.jz{padding:40px 0 72px}
.jz-wrap{max-width:860px}
.jz-head h1{font-size:clamp(32px,4vw,44px);font-weight:700;letter-spacing:-.02em}
.jz-head .lead{margin-top:10px;max-width:60ch}
.jz-steps{list-style:none;padding:0;margin:24px 0 0;display:flex;gap:6px;flex-wrap:wrap;counter-reset:none}
.jz-steps li{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--mute)}
.jz-steps li span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tint);color:var(--ind);font-size:12.5px}
.jz-steps li.on{border-color:var(--ind);color:var(--ind)}
.jz-steps li.on span{background:var(--ind);color:#fff}
.jz-steps li.done span{background:var(--lime);color:var(--ind-d)}
.jz-card{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 30px}
.jz-card h2{font-size:22px;font-weight:650;letter-spacing:-.01em;margin:0 0 18px}
.jz-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.jz-wide{grid-column:1 / -1}
.jz .jz-f{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink);margin:0}
.jz .jz-f em{font-style:normal;font-weight:400;color:var(--mute);font-size:12.5px}
.jz .jz-f input,.jz .jz-f select{padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:400;font-size:15.5px;background:#fff;width:100%}
.jz .jz-f input:focus,.jz .jz-f select:focus{outline:none;border-color:var(--ind-l);box-shadow:0 0 0 3px var(--tint)}
.jz .jz-f small{font-weight:400;color:var(--mute);font-size:12.5px}
.jz-privacy{margin:18px 0 0;font-size:13px;color:var(--mute);max-width:none;line-height:1.55}
.jz-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.jz-errors{margin-top:18px;padding:12px 16px;border-radius:12px;background:#FBEFEF;border:1px solid #E6C3C3;color:#7A2E2E;font-size:14px}
.jz-errors p{margin:2px 0;max-width:none}
.jz-info{margin:0 0 16px;padding:12px 14px;border-radius:10px;background:var(--tint);font-size:14px}
.jz-set{border:0;padding:0;margin:0 0 22px}
.jz-set legend{font-size:14.5px;font-weight:650;margin-bottom:10px;padding:0}
.jz-set legend em{font-style:normal;font-weight:400;color:var(--mute);font-size:12.5px}
.jz-chips{display:flex;flex-wrap:wrap;gap:8px}
.jz form label.jz-chip{position:relative;display:inline-flex;margin:0;font-weight:500}
.jz-chip input{position:absolute;opacity:0;pointer-events:none}
.jz-chip span{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;background:#fff;cursor:pointer;transition:all .12s}
.jz-chip:hover span{border-color:var(--ind-l)}
.jz-chip input:checked + span{background:var(--ind);border-color:var(--ind);color:#fff}
.jz-chip input:focus-visible + span{outline:3px solid var(--ind-l);outline-offset:2px}
.jz-other{margin-top:12px !important;max-width:360px}
.jz-heard{max-width:360px}
.jz-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.jz form label.jz-plan{display:flex;flex-direction:column;gap:4px;padding:18px;border:2px solid var(--line);border-radius:14px;cursor:pointer;margin:0;font-weight:400;position:relative}
.jz-plan input{position:absolute;opacity:0;pointer-events:none}
.jz-plan b{font-size:18px}
.jz-plan small{color:var(--mute);font-size:13px}
.jz-plan ul{margin:10px 0 0;padding-left:18px;font-size:13.5px;line-height:1.5;color:#3A3652}
.jz-plan:has(input:checked){border-color:var(--ind);background:var(--tint)}
.jz-plan:has(input:focus-visible){outline:3px solid var(--ind-l);outline-offset:2px}
.jz-sum{margin:0;border-top:1px solid var(--line)}
.jz-sum div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.jz-sum dt{color:var(--mute);font-size:14px}
.jz-sum dd{margin:0;font-weight:600}
.jz-edit{display:flex;gap:18px;margin:12px 0 20px;font-size:14px}
.jz-edit .link{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.jz form label.jz-check{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;margin:10px 0 0;font-weight:400;font-size:15px}
.jz-check input{margin-top:3px;accent-color:var(--ind)}
.jz-welcome h1{font-size:32px;font-weight:700}
.jz-next{margin:18px 0 0;padding-left:20px;display:grid;gap:12px;line-height:1.55}
@media (max-width:720px){
  .jz-grid,.jz-plans{grid-template-columns:1fr}
  .jz-card{padding:22px 18px}
  .jz-sum div{grid-template-columns:1fr;gap:2px}
  .jz-steps li{font-size:12.5px;padding:6px 10px 6px 6px}
}
.co-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:start}
.co-price{font-size:40px;font-weight:700;letter-spacing:-.02em;margin:0}
.co-price span{font-size:15px;font-weight:500;color:var(--mute);letter-spacing:0}
.co-price-note,.co-disc{margin:6px 0 0;color:var(--mute);font-size:14px;max-width:none}
.co-btn{width:100%;margin-top:18px;padding:15px 20px;font-size:16.5px}
.co-facts{margin:16px 0 0;padding-left:18px;font-size:13.5px;color:#3A3652;line-height:1.55;display:grid;gap:6px}
.co-code{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.co-code summary{cursor:pointer;font-weight:600;color:var(--ind)}
.co-code p{margin:8px 0 0;max-width:none;color:#3A3652}
.co-code-form{display:flex;gap:8px;margin-top:10px}
.co-code-form input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit}
.co-err{color:#7A2E2E !important}
.co-later{margin:18px 0 0;font-size:13px;color:var(--mute);max-width:none}
.co-inc h3{font-size:16px;font-weight:650;margin:0 0 10px}
.co-inc ul{margin:0;padding-left:18px;font-size:14px;line-height:1.55;display:grid;gap:6px}
.co-inc details{margin-top:12px;font-size:14px}
.co-inc summary{cursor:pointer;font-weight:600;color:var(--ind)}
.co-inc details ul{margin-top:10px}
@media (max-width:860px){.co-grid{grid-template-columns:1fr}}
.su-table td{vertical-align:top;font-size:13.5px}
.su-table small{color:var(--mute)}
.su-where{font-weight:600}
.su-where.paid{color:#4F6B12}
.su-where.stopped{color:#8A6516}
.qn-meta .qn-exam{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--tint);font-size:13px}
.qn-another{margin-top:18px;padding:18px 22px;border:1px dashed #CFC9EC;border-radius:14px;background:#fff;display:flex;
  justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.qn-another p{margin:0;max-width:none;font-weight:600}
.cs-testto{display:flex;gap:6px;margin-top:8px}
.cs-testto input{width:180px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:12.5px}

/* Sign in on phones. Two rules hid it below 980px and the menu never offered it, so a member on a phone had no way
   to sign in except typing the address. It now stays in the header; the join button shortens to "Join" to make room. */
.auth .lbl-sm{display:none}
@media (max-width:980px){ header.site .nav .auth .signin, .auth .signin{display:inline-block;font-weight:600;font-size:14px;margin-right:10px;white-space:nowrap} }
@media (max-width:560px){ .auth .lbl-lg{display:none} .auth .lbl-sm{display:inline} header.site .nav .auth .signin{margin-right:8px} }
.menu-signin{display:none}
@media (max-width:980px){ .nav .links.open .menu-signin{display:block;padding:14px 20px;font-weight:700;border-top:1px solid var(--line);color:var(--ind)} }
.jz-name{display:grid;grid-template-columns:1fr 90px 1fr;gap:12px;align-items:end}
.jz-name small{grid-column:1 / -1;color:var(--mute);font-size:12.5px;margin-top:-6px}
@media (max-width:720px){.jz-name{grid-template-columns:1fr 80px}.jz-name label:last-of-type{grid-column:1 / -1}}
.sp-sched{margin-top:16px;padding:14px 18px;border-radius:12px;border:1px solid var(--line);border-left:4px solid #C9A24A;background:#FFF9EC;font-size:14px;max-width:none}
.sp-sched.on{border-left-color:#8FB02E;background:#F4F8E4}
.sp-sched span{margin-left:6px}
.sp-sched ul{margin:8px 0 0;padding-left:18px;font-size:13px}
.sp-sched small{display:block;margin-top:6px;color:var(--mute)}
.cs-link{display:flex;gap:6px;align-items:center}
.cs-link select{max-width:170px;padding:5px 6px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:12.5px}
.cs-none{display:block;margin-top:4px;color:#8A6516;font-size:11.5px}
.cs-mode{display:block;margin-top:4px;color:var(--mute);font-size:11.5px}
/* Review: practice questions shown as the candidate sees them, with the answer marked */
.rv-q{padding:14px 16px}
.rv-stem{margin:0 0 10px;max-width:none;font-size:15.5px;line-height:1.55;white-space:pre-line}
.rv-opts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rv-opts li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:start;padding:8px 12px;border:1px solid var(--line);border-radius:9px;font-size:14.5px}
.rv-opts li b{color:var(--ind)}
.rv-opts li.key{border-color:#8FB02E;background:#F4F8E4}
.rv-opts li em{font-style:normal;font-size:11.5px;font-weight:700;color:#4F6B12;text-transform:uppercase;letter-spacing:.05em}
.rv-rat{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.rv-rat h4{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 4px}
.rv-rat p{margin:0;max-width:none;font-size:14px;line-height:1.55}
.rv-warn{margin:10px 0 0;max-width:none;padding:8px 12px;border-radius:8px;background:#FFF7E9;border:1px solid #E8CF9A;color:#7A5F17;font-size:13px;font-weight:600}

/* Campaigns: master state and the Speak to It programme panel */
.cs-master{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;padding:14px 18px;border-radius:10px;border:1px solid var(--line);background:#fff}
.cs-master.sending{border-color:#C7DDA0;background:#F6FAEC}.cs-master.paused{background:#FFF8E6;border-color:#F0D48A}.cs-master.stopped{background:#FBECEC;border-color:#E6B4B4}
.cs-master b{display:block;font-size:16px}.cs-master span{font-size:14px;color:var(--mute)}
.cs-master-acts{display:flex;gap:8px}.cs-master-acts form{margin:0}.cs-stop{color:#9C2B2B;border-color:#E6B4B4}
.cs-programme{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.cs-programme h4{margin:0 0 10px;font-size:15px}.cs-programme h4 small{font-weight:400;color:var(--mute);margin-left:8px}
.cs-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.cs-mode{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#fff}.cs-mode input{display:none}.cs-mode b{display:block;font-size:14px}.cs-mode span{font-size:12.5px;color:var(--mute)}
.cs-mode.on{border-color:var(--ind);box-shadow:0 0 0 2px rgba(59,46,140,.12)}.cs-mode.live.on{border-color:#4F8A10;background:#F0F8E6}
.cs-wide{grid-column:1/-1}
.cs-policy{margin-top:14px;padding:14px 18px;border-radius:10px;border:1px solid var(--line);background:#fff}
.cs-policy.live{background:#F0F8E6;border-color:#B9D48A}.cs-policy.test,.cs-policy.dry_run{background:#FFF6E5;border-color:#F0CF86}.cs-policy.draft{background:#FBECEC;border-color:#E6B4B4}.cs-policy.stopped{background:#F3DADA;border-color:#C98A8A}
.cs-policy-head b::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:#9C2B2B}.cs-policy.live .cs-policy-head b::before{background:#4F8A10}.cs-policy.test .cs-policy-head b::before,.cs-policy.dry_run .cs-policy-head b::before{background:#D28B0C}
.cs-policy-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.cs-policy-head b{display:block;font-size:16px}.cs-policy-head span{font-size:14px;color:var(--mute)}

/* Every console table looks the same: .table is the brand table */
.table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:14px}
.table thead th{background:#FBFBFD;text-align:left;padding:13px 16px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5C5A70;font-weight:800;border-bottom:1px solid var(--line)}
.table tbody td{padding:13px 16px;border-top:1px solid #F0EFF5;vertical-align:top}
.table tbody tr:first-child td{border-top:0}.table tbody tr:hover{background:#FBFBFD}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}
.table .link{background:none;border:0;padding:0;font:inherit;font-size:13.5px;font-weight:700;color:var(--ind);cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* Analytics dashboard */
.an-status{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.an-pill{display:inline-block;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;border:1px solid var(--line);background:#fff}
.an-pill::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;background:#9C2B2B;vertical-align:1px}
.an-pill.live::before{background:#4F8A10}.an-pill.test::before,.an-pill.dry_run::before{background:#D28B0C}.an-pill.running{border-color:#B9D48A;background:#F0F8E6}.an-pill.running::before{background:#4F8A10;animation:an-blink 1.2s infinite}.an-pill.quiet::before{background:#C9C7D6}
@keyframes an-blink{50%{opacity:.25}}
.an-taken{margin-left:auto;font-size:12.5px;color:var(--mute)}
.an-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:16px}
.an-kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.an-kpi-label{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#5C5A70;font-weight:800}
.an-kpi b{display:block;font-size:30px;line-height:1.15;margin-top:6px;color:var(--ink);font-variant-numeric:tabular-nums}
.an-kpi small{display:block;font-size:12.5px;color:var(--mute);margin-top:4px}
.an-kpi.good b{color:#4F8A10}.an-kpi.warn b{color:#B06A00}.an-kpi.bad b{color:#B3261E}
.an-chart{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:16px}
.an-chart-head{display:flex;justify-content:space-between;align-items:center;font-size:14px}.an-chart-head span{color:var(--mute);font-size:12.5px}
.an-chart .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 10px;vertical-align:-1px}.sw.email{background:var(--ind)}.sw.posts{background:var(--lime)}.sw.failed{background:#B3261E}
.an-chart .bar.email{fill:var(--ind)}.an-chart .bar.posts{fill:var(--lime)}.an-chart .bar.failed{fill:#B3261E}.an-chart .lbl{font-size:11px;fill:#8A889A}
.tablewrap{overflow-x:auto;margin-top:12px}.table td.warn{color:#B06A00;font-weight:700}
.an-events{list-style:none;padding:0;margin:10px 0 0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.an-events li{display:grid;grid-template-columns:52px 84px 1fr;gap:12px;padding:9px 14px;border-top:1px solid #F0EFF5;font-size:13.5px;align-items:baseline}.an-events li:first-child{border-top:0}
.an-events time{color:var(--mute);font-variant-numeric:tabular-nums}.an-events .cat{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#5C5A70;font-weight:800}
.an-events li.warning{background:#FFF8E6}.an-events li.error{background:#FBECEC}
.al-cat-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.al-bulk-cat{font-size:13px;color:var(--mute);display:flex;gap:8px;align-items:baseline;margin:0}
.al-bulk-cat .link{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:700;color:var(--ind);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.al-saved{font-size:12.5px;color:var(--mute);min-width:60px}
.coe-text h2{font-size:18px;margin:18px 0 6px}.coe-text h2:first-child{margin-top:0}.coe-text h3{font-size:15.5px;margin:14px 0 4px}.coe-text p,.coe-text li{font-size:14.5px;line-height:1.55}
.tr-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}@media(max-width:900px){.tr-two{grid-template-columns:1fr}}

/* Traffic breakdowns */
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:24px}
.tr-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tr-card h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#5C5A70;font-weight:800;margin:0 0 10px}
.tr-bars{list-style:none;margin:0;padding:0}
.tr-bars li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 44px;gap:10px;align-items:center;padding:4px 0;font-size:13px}
.tr-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-bar{position:relative;height:10px;background:#F0EFF5;border-radius:5px;overflow:hidden}
.tr-bar i{position:absolute;left:0;top:0;bottom:0;background:#C9C2EC;border-radius:5px}
.tr-bar b{position:absolute;left:0;top:0;bottom:0;background:var(--ind);border-radius:5px}
.tr-n{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.tr-heat{border-collapse:separate;border-spacing:2px;font-size:10.5px;margin-top:8px}
.tr-heat th{color:#8A889A;font-weight:600;padding:2px 4px;text-align:center}
.tr-heat td{width:30px;height:24px;text-align:center;color:#fff;border-radius:4px;background:#F4F3F8;font-variant-numeric:tabular-nums}
.jz-split{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}@media(max-width:820px){.jz-split{grid-template-columns:1fr}}
.jz-includes h3{font-size:16px;margin:0 0 8px}.jz-includes ul{margin:0;padding-left:18px}.jz-includes li{margin:6px 0;font-size:14.5px}

/* Membership picker */
.mp{padding:40px 0 70px}
.mp-head{max-width:760px}.mp-head h1{font-size:clamp(32px,4.4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.02}.mp-head .lead{margin-top:12px}
.mp-stay{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding:16px 18px;background:#fff;border:2px solid var(--lime);border-radius:14px}
.mp-stay-btn{padding:14px 22px;font-size:17px}
.mp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px;max-width:980px}
@media (max-width:760px){.mp-grid{grid-template-columns:1fr}}
.mp-plan{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:22px 20px 20px;display:flex;flex-direction:column}
.mp-plan.hi{border-color:var(--ind);box-shadow:0 0 0 3px rgba(59,46,140,.12)}
.mp-plan.mine{border-color:var(--lime)}
.mp-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.mp-plate{width:112px;height:112px;flex:0 0 auto}
.mp-top h3{font-size:21px}.mp-top .who{color:var(--mute);font-size:14px;margin:4px 0 0;min-height:44px}
.mp-top .price{font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.025em;margin:8px 0 0}.mp-top .price small{font-size:14px;font-weight:500;color:var(--mute);letter-spacing:0}
.mp-plan .btn{width:100%;min-height:48px}
.mp-current{display:block;text-align:center;padding:12px;border-radius:8px;background:var(--tint);font-weight:700}
.mp-plan .plus{font-size:13.5px;font-weight:700;color:var(--ind);margin:16px 0 0}
.mp-plan ul{list-style:none;margin:10px 0 0;padding:0;font-size:14.5px}
.mp-plan li{padding:7px 0 7px 24px;border-top:1px solid var(--line);position:relative}.mp-plan li:first-child{border-top:0}
.mp-plan li::before{content:"";position:absolute;left:2px;top:13px;width:10px;height:10px;border-radius:2px;background:var(--lime)}
.mp-how{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}@media (max-width:760px){.mp-how{grid-template-columns:1fr}}
.mp-how div{border-top:3px solid var(--ind);padding-top:12px}.mp-how h3{font-size:16px}.mp-how p{font-size:14px;margin:6px 0 0}

/* Dashboard: membership strip, work card, lock tags */
.dm-strip{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:14px 0 0}
.dm-strip img{width:48px;height:48px}.dm-strip b{color:var(--ink)}.dm-strip small{display:block;color:var(--mute);font-size:13px}
.dm-strip .btn{margin-left:auto}
.dm-free{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}@media (max-width:900px){.dm-free{grid-template-columns:1fr 1fr}}@media (max-width:560px){.dm-free{grid-template-columns:1fr}}
.dm-free a{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px;text-decoration:none;background:#fff}
.dm-free .code{font-size:12.5px;font-weight:700;color:var(--ind)}.dm-free b{color:var(--ink);font-size:15px;line-height:1.3}
.lock-tag{margin-left:10px;font-size:12px;font-weight:700;color:var(--ind);background:rgba(59,46,140,.08);border-radius:999px;padding:4px 10px;white-space:nowrap;text-decoration:none}

/* One-page join at /membership */
.jn{padding:56px 0 30px}
.jn-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
@media (max-width:920px){.jn-wrap{grid-template-columns:1fr;gap:30px}.jn{padding-top:34px}}
.jn-hero h1{font-size:clamp(44px,6.4vw,82px);line-height:.95;font-weight:800;letter-spacing:-.035em}
.jn-hero .lead{font-size:19px;margin-top:18px;max-width:34ch}
.jn-mark{margin-top:40px;display:flex;align-items:flex-end;gap:22px}
.jn-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;width:132px;aspect-ratio:1;flex:0 0 auto}
.jn-blocks i{border-radius:11px;background:var(--ind)}.jn-blocks i.o{visibility:hidden}.jn-blocks i.l{background:var(--lime)}
.jn-mark ul{list-style:none;margin:0;padding:0;font-size:15.5px;max-width:32ch}
.jn-mark li{padding:7px 0;border-top:1px solid var(--line)}.jn-mark li:first-child{border-top:0}
@media (max-width:560px){.jn-mark{flex-direction:column;align-items:flex-start}.jn-blocks{width:84px;gap:6px}}
.jn-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 30px 26px}
.jn-form h2{font-size:24px}.jn-form .sub{color:var(--mute);font-size:14.5px;margin:4px 0 20px}
.jn-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width:520px){.jn-row{grid-template-columns:1fr}}
.jn-f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-weight:600;color:var(--ink);font-size:14.5px}
.jn-f input,.jn-f select{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;padding:12px 13px;font-size:16px;font-weight:400}
.jn-f input:focus,.jn-f select:focus{border-color:var(--ind);outline:none;box-shadow:0 0 0 3px rgba(59,46,140,.15)}
.jn-check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;margin:6px 0 12px}
.jn-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--ind)}
.jn-submit{width:100%;margin-top:8px;padding:15px 18px;font-size:17px}
.jn-after{display:flex;justify-content:space-between;margin-top:16px;font-size:14px;color:var(--mute)}
.jn-banner{border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:14.5px}
.jn-banner.warn{background:#FBECEC;color:#9C2B2B}.jn-banner.info{background:#EEF5D2;color:var(--ink)}
.jn-org{color:var(--mute);font-size:14.5px;padding-top:26px}

/* Join funnel */
.fn{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 18px;margin-top:10px}
.fn-row{display:grid;grid-template-columns:minmax(180px,1.2fr) 2fr 150px;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.fn-row:first-child{border-top:0}
.fn-label b{display:block;color:var(--ink);font-size:14.5px}.fn-label small,.fn-n small{display:block;color:var(--mute);font-size:12.5px}
.fn-bar{height:14px;background:#F0EFF5;border-radius:7px;overflow:hidden}.fn-bar i{display:block;height:100%;background:var(--ind);border-radius:7px}
.fn-n{text-align:right}.fn-n b{font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:700px){.fn-row{grid-template-columns:1fr 90px}.fn-bar{display:none}}