/* ============================================================================
   Why Buy Challenge toolbox, course player. A fork of course.css.
   Used only by challenge/toolbox/index.html. Shares nothing with style.css: the
   toolbox sits behind a client sign-in and has its own chrome, and mixing the
   two stylesheets is how the marketing nav ends up on a learning page.

   Design intent, so nobody flattens it by accident:
   the left rail is a progress SPINE, not a menu. The nodes fill as lessons
   complete, and the connector between them is the only thing on the page that
   reports how far through the topic you are. Everything else is a reading
   column at a measured width, because this is a document people study, not an
   app they operate.
   ========================================================================= */

:root{
  --b900:#143058; --b800:#185182; --b700:#2277AA; --b500:#7D9CBB;
  --b300:#E1E9F2; --b100:#F4F7FB; --b050:#FAFCFE;
  --gold:#FF8A3D; --gold6:#C94F12; --gold1:#FFF1E8; --gold3:#F7D3BD; /* Oct 2026: accent is signal orange; names kept to avoid a 60-line rename */
  --red:#C70B16; --green:#4DB363; --grey:#5F6B7A;
  --ink:#0C2E4C;
  --rail:290px;
  --r:14px;
  --meas:64ch;
  --sh1:0 1px 2px rgba(16,62,103,.05),0 8px 24px rgba(16,62,103,.06);
  --sh2:0 18px 48px rgba(16,62,103,.16);
  --ease:cubic-bezier(.22,.7,.24,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--b900);
  font-family:"Source Sans 3",system-ui,-apple-system,sans-serif;
  font-size:17.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Poppins,system-ui,sans-serif;font-weight:700;color:var(--b800);margin:0;letter-spacing:-.018em;line-height:1.16}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--b700);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------------- chrome -- */
.top{
  position:fixed; inset:0 0 auto 0; z-index:60; height:60px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--b300);
  display:flex; align-items:center; gap:14px; padding:0 20px;
}
.logo{font-family:Poppins;font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--b800);flex:none}
.logo span{color:var(--gold)}
.top .sep{width:1px;height:24px;background:var(--b300);flex:none}
.crumb{
  display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--b700);
  padding:7px 12px 7px 9px;border-radius:99px;border:1px solid transparent;flex:none;
}
.crumb:hover{background:var(--b100);border-color:var(--b300)}
.crumb svg{flex:none}
.top .title{
  font-family:Poppins;font-weight:700;font-size:14px;color:var(--b500);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.top .spacer{flex:1}
.pill{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--b700);
  background:var(--b100);border:1px solid var(--b300);padding:6px 12px;border-radius:99px;flex:none;
}
.pill img{height:20px;width:auto}
.pill.sel{cursor:pointer}
.pill.sel:hover{border-color:var(--b500)}
.scrollbar{position:fixed;top:60px;left:0;z-index:61;height:2px;background:var(--gold);width:0;transition:width .08s linear}

.railbtn{display:none}

/* ------------------------------------------------------------------ rail -- */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh;padding-top:60px}

.rail{
  position:sticky;top:60px;align-self:start;height:calc(100vh - 60px);
  background:linear-gradient(178deg,#0E3557,#103E67 42%,#0B2C49);
  color:#CBDAEA;padding:26px 22px 22px;overflow-y:auto;
  display:flex;flex-direction:column;gap:20px;
}
.rail .kicker{
  font-family:Poppins;font-weight:700;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}
.rail h2{color:#fff;font-size:19px;margin-top:9px;line-height:1.22}
.rail .lead{font-size:13.5px;line-height:1.5;color:#9FB8D0;margin-top:9px}

/* the progress ring, drawn with a conic gradient so it needs no SVG */
.ring{display:flex;align-items:center;gap:12px;padding-top:2px}
.ring .dial{
  width:44px;height:44px;border-radius:50%;flex:none;position:relative;
  background:conic-gradient(var(--gold) calc(var(--pct) * 1%), rgba(255,255,255,.14) 0);
  display:grid;place-items:center;
}
.ring .dial::after{content:"";position:absolute;inset:4.5px;border-radius:50%;background:#0E3557}
.ring .dial b{position:relative;z-index:1;font-family:Poppins;font-size:12px;color:#fff}
.ring .lab{font-size:12.5px;line-height:1.35;color:#9FB8D0}
.ring .lab b{display:block;color:#fff;font-family:Poppins;font-size:13px}

/* the spine */
.toc{list-style:none;margin:0;padding:0;position:relative}
.toc::before{
  content:"";position:absolute;left:12.5px;top:14px;bottom:26px;width:2px;
  background:rgba(255,255,255,.13);border-radius:2px;
}
.toc .fill{
  position:absolute;left:12.5px;top:14px;width:2px;background:var(--gold);border-radius:2px;
  height:0;transition:height .5s var(--ease);
}
.toc li{position:relative;margin:0 0 4px}
.toc button{
  display:grid;grid-template-columns:27px 1fr;gap:11px;align-items:start;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;padding:9px 10px 10px 0;border-radius:10px;
  color:#B9CCDF;
}
.toc button:hover{color:#fff}
.toc .node{
  width:27px;height:27px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#12406A;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);
  font-family:Poppins;font-weight:700;font-size:12px;color:#8FAAC5;
  transition:.22s var(--ease);position:relative;z-index:1;
}
.toc .tx{min-width:0}
.toc .tx b{display:block;font-family:Poppins;font-weight:700;font-size:14px;line-height:1.28;color:inherit}
.toc .tx small{display:block;margin-top:3px;font-size:11.5px;color:#7F9BB6;letter-spacing:.02em}
.toc li.on button{color:#fff}
.toc li.on .node{background:var(--gold);color:#22303d;box-shadow:0 0 0 4px rgba(95,115,136,.2)}
.toc li.done .node{background:var(--green);color:#fff;box-shadow:none}
.toc li.done.on .node{background:var(--gold);color:#22303d;box-shadow:0 0 0 4px rgba(95,115,136,.2)}
.toc li.done .node .num{display:none}
.toc li.done .node .tick{display:block}
.toc .node .tick{display:none}

.rail .foot{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:11.5px;color:#7F9BB6}
.rail .foot button{background:none;border:0;padding:0;color:#9FB8D0;cursor:pointer;font-size:11.5px;text-decoration:underline}
.rail .foot button:hover{color:#fff}

/* ----------------------------------------------------------------- stage -- */
.stage{min-width:0;background:#fff}
/* The reading measure stays at 64ch on .blk; this only widens the frame the
   wide blocks (diagnose, sort, funnel, paths) get to use, and closes the gap
   between the rail and the text. */
.pad{max-width:calc(var(--meas) + 300px);margin:0 auto;padding:0 46px 90px}

/* lesson header */
.lhead{padding:56px 0 34px;border-bottom:1px solid var(--b300);margin-bottom:12px}
.lhead .eye{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.tag{
  display:inline-flex;align-items:center;gap:7px;font-family:Poppins;font-weight:700;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold6);background:var(--gold1);border:1px solid var(--gold3);
  padding:5px 11px;border-radius:6px;
}
.tag.plain{color:var(--b700);background:var(--b100);border-color:var(--b300)}
.lhead h1{font-size:clamp(30px,4.4vw,44px);line-height:1.05;max-width:22ch}
.lhead .sum{margin-top:16px;font-size:19px;line-height:1.55;color:var(--b500);max-width:56ch}

/* block rhythm and the scroll reveal */
.blk{max-width:var(--meas);margin:38px 0}
.blk.wide{max-width:none}
.rv{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001s !important}
}

/* text */
.blk h2{font-size:27px;margin-bottom:14px;max-width:26ch}
.blk h3{font-size:20px;margin-bottom:10px}
.blk p+p{margin-top:15px}
.blk .p{color:#1c3c58}

/* impact */
.impact{max-width:var(--meas);margin:46px 0;position:relative}
.impact.quote{padding-left:26px;border-left:4px solid var(--gold)}
.impact.quote p{font-family:Poppins;font-weight:800;font-size:clamp(21px,2.7vw,28px);line-height:1.26;color:var(--b800);letter-spacing:-.018em}
.impact.quote .attrib{margin-top:14px;font-size:14px;color:var(--b500);font-weight:600}
.impact.solid{
  background:linear-gradient(150deg,#0E3557,#103E67 60%,#0B2C49);color:#fff;
  border-radius:var(--r);padding:34px 36px;overflow:hidden;
}
.impact.solid::before{
  content:"";position:absolute;right:-40px;top:-70px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,119,170,.5),transparent 68%);pointer-events:none;
}
.impact.solid p{position:relative;font-family:Poppins;font-weight:700;font-size:clamp(19px,2.3vw,23px);line-height:1.34;color:#fff}

/* ----------------------------------------------------------------- image -- */
.fig{margin:40px 0;max-width:calc(var(--meas) + 170px)}
.fig figure{margin:0}
.fig img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r);background:var(--b100);box-shadow:var(--sh1);
}
.fig figcaption{
  margin-top:11px;font-size:14px;line-height:1.5;color:var(--b500);max-width:var(--meas);
}
/* The plate directly under a lesson header. Pulled up tight against the header
   rule so it reads as part of the title block rather than as the first
   paragraph's illustration. */
.fig.hero{margin:22px 0 42px;max-width:none}
.fig.hero img{box-shadow:var(--sh2)}

/* video */
.vid{max-width:none;margin:44px 0}
.vframe{
  position:relative;border-radius:var(--r);overflow:hidden;background:#08182A;
  aspect-ratio:16/9;box-shadow:var(--sh2);cursor:pointer;border:0;padding:0;width:100%;display:block;
}
.vframe img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .3s}
.vframe:hover img{transform:scale(1.035);filter:brightness(.86)}
.vframe .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,24,42,.72),rgba(8,24,42,.05) 62%)}
.vframe .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:var(--gold);color:#22303d;
  display:grid;place-items:center;box-shadow:0 12px 34px rgba(0,0,0,.36);transition:.2s var(--ease);
}
.vframe:hover .play{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.vframe .meta{position:absolute;left:24px;right:24px;bottom:20px;text-align:left;color:#fff}
.vframe .meta b{display:block;font-family:Poppins;font-weight:700;font-size:19px}
.vframe .meta small{display:block;margin-top:5px;font-size:13.5px;color:#C6D8E9}
.vcap{margin-top:12px;font-size:14px;color:var(--b500);max-width:var(--meas)}

/* -------------------------------------------------------------- diagnose -- */
.diag{max-width:none;margin:40px 0}
.diag .grid{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);gap:22px;align-items:start}
.symlist{display:flex;flex-direction:column;gap:8px}
.sym{
  display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:center;text-align:left;
  background:#fff;border:1.5px solid var(--b300);border-radius:11px;padding:13px 15px;cursor:pointer;
  font-size:15px;font-weight:600;line-height:1.32;color:var(--b800);transition:.16s var(--ease);
}
.sym:hover{border-color:var(--b500);transform:translateX(2px)}
.sym i{
  width:26px;height:26px;border-radius:7px;background:var(--b100);color:var(--b700);
  font-family:Poppins;font-weight:700;font-size:12.5px;font-style:normal;
  display:grid;place-items:center;flex:none;transition:.16s;
}
.sym.seen i{background:#E9F6EC;color:#2E7D46}
.sym.on{border-color:var(--gold);background:var(--gold1);box-shadow:0 6px 18px rgba(95,115,136,.22)}
.sym.on i{background:var(--gold);color:#22303d}
.dpanel{
  background:var(--b050);border:1px solid var(--b300);border-radius:var(--r);
  padding:26px 28px;min-height:280px;box-shadow:var(--sh1);
}
.dpanel .empty{color:var(--b500);font-size:16px;display:flex;gap:12px;align-items:center;height:100%;min-height:230px}
.dpanel .empty svg{flex:none;color:var(--b300)}
.dpanel h4{font-size:20px;margin-bottom:18px;max-width:30ch}
.drow{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:14px 0;border-top:1px dashed var(--b300)}
.drow:first-of-type{border-top:0;padding-top:0}
.drow .k{
  font-family:Poppins;font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--b500);padding-top:4px;
}
.drow .v{font-size:15.5px;line-height:1.55}
.drow.fix{background:var(--gold1);margin:12px -12px -6px;padding:14px 12px;border-radius:10px;border-top:0}
.drow.fix .k{color:var(--gold6)}
.drow.fix .v{color:#5C4319;font-weight:600}
.dfade{animation:dfade .32s var(--ease)}
@keyframes dfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.counter{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
  font-size:13px;font-weight:600;color:var(--b500);
}
.counter .bar{width:74px;height:5px;border-radius:3px;background:var(--b300);overflow:hidden}
.counter .bar i{display:block;height:100%;background:var(--green);width:0;transition:width .35s var(--ease)}

/* ---------------------------------------------------------------- funnel -- */
.funnel{max-width:none;margin:40px 0}
.fband{
  position:relative;width:100%;border:0;cursor:pointer;display:block;text-align:left;
  padding:20px 30px;color:#fff;transition:.22s var(--ease);
  font-family:inherit;margin-bottom:6px;
}
/* Each band carries its own level class. :nth-child cannot be used here: the
   bands and their drop panels are siblings, so the bands are children 1, 3 and
   5, and a rule for nth-child(3) styles the second band while the third gets
   no background at all and renders white on white. */
.fband.lv1{clip-path:polygon(0 0,100% 0,94% 100%,6% 100%);background:linear-gradient(100deg,#2277AA,#185182)}
.fband.lv2{clip-path:polygon(6% 0,94% 0,86% 100%,14% 100%);background:linear-gradient(100deg,#1C6693,#153F66)}
.fband.lv3{clip-path:polygon(14% 0,86% 0,76% 100%,24% 100%);background:linear-gradient(100deg,#BF8F4D,#8A6635)}
.fband:hover{filter:brightness(1.09)}
.fband .in{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-left:2%}
.fband.lv2 .in{padding-left:9%}
.fband.lv3 .in{padding-left:17%}
.fband b{font-family:Poppins;font-weight:800;font-size:21px;letter-spacing:-.015em}
.fband span{font-size:15.5px;color:rgba(255,255,255,.84)}
.fband em{
  margin-left:auto;font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;opacity:.7;padding-right:2%;
}
.fband.on em{opacity:1}
.fdrop{
  overflow:hidden;max-height:0;transition:max-height .4s var(--ease);
  margin:-2px 0 8px;
}
.fdrop.on{max-height:520px}
.fdrop .inner{
  background:var(--b050);border:1px solid var(--b300);border-left:4px solid var(--gold);
  border-radius:0 12px 12px 0;padding:20px 24px;margin:8px 4% 4px;
}
.fdrop .note{font-size:15.5px;line-height:1.55;color:#1c3c58;margin-bottom:16px}
.fdrop ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fdrop li{
  display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:16px;line-height:1.45;
  color:var(--b800);font-weight:600;
}
.fdrop li svg{margin-top:5px;color:var(--gold6);flex:none}

/* ------------------------------------------------------------------ sort -- */
/* One question, three level buttons, immediate feedback. No dragging: touch
   fires no drag events at all, so the old version was dead on every phone and
   the browser's text selection took over instead. The card and its buttons are
   sized to sit inside one phone screen with nothing to scroll for, which is the
   other half of what was wrong: the source cards used to sit above three target
   columns that stack on a narrow screen. */
.sort{max-width:calc(var(--meas) + 170px);margin:40px 0}
.sorthint{font-size:14px;color:var(--b500);margin-bottom:14px}

.sortprog{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sortprog .c{font-family:Poppins;font-weight:700;font-size:13px;color:var(--b500);flex:none}
.sortprog .bar{flex:1;height:5px;border-radius:3px;background:var(--b300);overflow:hidden}
.sortprog .bar i{display:block;height:100%;background:var(--gold);width:0;transition:width .3s var(--ease)}

.sortcard{
  background:var(--b050);border:1px solid var(--b300);border-radius:var(--r);
  padding:26px 26px 22px;box-shadow:var(--sh1);
}
.sortcard .q{
  font-family:Poppins;font-weight:800;font-size:clamp(19px,2.4vw,23px);line-height:1.3;
  color:var(--b800);letter-spacing:-.015em;
}
.sortcard .ask{
  margin:18px 0 12px;font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--b500);
}
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lvl{
  background:#fff;border:1.5px solid var(--b300);border-radius:11px;padding:15px 12px;
  font-family:Poppins;font-weight:700;font-size:16px;color:var(--b800);cursor:pointer;
  transition:.15s var(--ease);
}
.lvl:hover:not(:disabled){border-color:var(--b700);color:var(--b700);transform:translateY(-2px)}
.lvl:disabled{cursor:default;opacity:.5}
.lvl.right{border-color:var(--green);background:#F1FAF3;color:#25603A;opacity:1}
.lvl.wrong{border-color:var(--red);background:#FDF2F2;color:#8E2A2F;opacity:1}
/* The one it should have been, on a wrong answer. */
.lvl.was{border-color:var(--green);border-style:dashed;color:#25603A;opacity:1}
.sfb{
  display:flex;align-items:flex-start;gap:9px;margin:16px 0 4px;font-size:15.5px;
  line-height:1.5;font-weight:600;animation:dfade .28s var(--ease);
}
.sfb svg{margin-top:4px;flex:none}
.sfb.good{color:#25603A}
.sfb.bad{color:#8E2A2F}
.sortcard .btn{margin-top:14px}

.sortsum .zones{margin-top:16px}
.sortsum > .btn{margin-top:16px}
.sortres{
  font-size:15px;line-height:1.5;font-weight:600;color:var(--b800);
  background:var(--b100);border-radius:10px;padding:13px 16px;display:none;
}
.sortres.on{display:block;animation:dfade .3s var(--ease)}
.sortres.good{background:#F1FAF3;color:#25603A}
.sortres b{font-family:Poppins}

.zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.zone{
  background:#fff;border:1.5px solid var(--b300);border-radius:12px;padding:0 0 12px;
  display:flex;flex-direction:column;
}
.zone > h4{
  font-family:Poppins;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--b700);padding:13px 15px;border-bottom:1px solid var(--b300);
}
.zone .drop{display:flex;flex-direction:column;gap:8px;padding:12px 12px 0;flex:1}
.qchip{
  display:flex;align-items:flex-start;gap:8px;background:#fff;border:1.5px solid var(--b300);
  border-radius:9px;padding:9px 12px;font-size:14.5px;line-height:1.35;font-weight:600;
  color:var(--b800);
}
.qchip .mk{flex:none;margin-top:3px}
.qchip.right{border-color:var(--green);background:#F5FBF7}
.qchip.right .mk{color:#2E7D46}
.qchip.wrong{border-color:var(--red);background:#FDF6F6}
.qchip.wrong .mk{color:var(--red)}

/* ----------------------------------------------------------------- split -- */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:center;
  margin:44px 0;max-width:calc(var(--meas) + 170px);
}
.split.flip .sx{order:2}
.split .sx h2{font-size:24px;margin-bottom:12px}
.split .sx p+p{margin-top:13px}
.split .sf img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;
 border-radius:var(--r);box-shadow:var(--sh1);background:var(--b100)}
@media(max-width:760px){
  /* Stacked, and the text always leads. An image first on a phone turns a
     lesson into a photo album. */
  .split{grid-template-columns:1fr;gap:18px}
  .split.flip .sx{order:0}
}

/* ------------------------------------------------------------------ note -- */
.note-b{
  max-width:var(--meas);margin:34px 0;padding:18px 20px 18px 22px;border-radius:12px;
  border-left:4px solid var(--b500);background:var(--b100);
}
.note-b .nh{font-family:Poppins;font-weight:800;font-size:16px;color:var(--b800);margin-bottom:6px}
.note-b p{font-size:16px;line-height:1.58;color:#1c3c58}
.note-b p+p{margin-top:10px}
.note-b.info{border-left-color:var(--b700);background:var(--b100)}
.note-b.warn{border-left-color:var(--gold);background:var(--gold1)}
.note-b.warn .nh{color:#5C4319}
.note-b.good{border-left-color:var(--green);background:#F1FAF3}
.note-b.good .nh{color:#25603A}
.note-b.bad{border-left-color:var(--red);background:#FDF2F2}
.note-b.bad .nh{color:#8E2A2F}

/* ------------------------------------------------------------- accordion -- */
.acc{max-width:var(--meas);margin:38px 0}
.accstack{border:1px solid var(--b300);border-radius:var(--r);overflow:hidden;background:#fff}
.accrow+.accrow{border-top:1px solid var(--b300)}
.acchead{
  display:grid;grid-template-columns:30px 1fr 20px;gap:14px;align-items:center;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;padding:17px 18px;
  font-family:Poppins;font-weight:700;font-size:17px;color:var(--b800);line-height:1.3;
  transition:background .15s var(--ease);
}
.acchead:hover{background:var(--b050)}
.acchead .n{
  width:30px;height:30px;border-radius:8px;background:var(--b100);border:1px solid var(--b300);
  display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--b700);
}
.acchead .chev{color:var(--b500);display:grid;transition:transform .25s var(--ease)}
.accrow.on .acchead{background:var(--gold1)}
.accrow.on .acchead .n{background:var(--gold);border-color:var(--gold);color:#22303d}
.accrow.on .acchead .chev{transform:rotate(180deg);color:var(--gold6)}
.accbody{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.accrow.on .accbody{max-height:900px}
.accinner{padding:2px 18px 20px 62px}
.accinner p{font-size:16.5px;line-height:1.6;color:#1c3c58}
.accinner p+p{margin-top:12px}
@media(max-width:880px){.accinner{padding:2px 18px 18px 18px}}

/* the draft preview banner, admin only */
.draftbar{
  position:fixed;left:0;right:0;top:0;z-index:80;height:44px;
  background:var(--gold);color:#22303d;display:flex;align-items:center;gap:12px;
  padding:0 18px;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.16);
}
.draftbar b{font-family:Poppins;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.draftbar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draftbar .btn{padding:7px 13px;font-size:13.5px}
body.has-draftbar .top{top:44px}
body.has-draftbar .scrollbar{top:104px}
body.has-draftbar .shell{padding-top:104px}
body.has-draftbar .rail{top:104px;height:calc(100vh - 104px)}

/* ----------------------------------------------------------------- steps -- */
.steps{max-width:var(--meas);margin:38px 0}
.step{
  display:grid;grid-template-columns:46px 1fr;gap:18px;padding:20px 0;
  border-top:1px solid var(--b300);
}
.step:first-child{border-top:0;padding-top:4px}
.step .n{
  width:46px;height:46px;border-radius:12px;background:var(--b100);border:1px solid var(--b300);
  display:grid;place-items:center;font-family:Poppins;font-weight:800;font-size:17px;
  color:var(--b700);line-height:1;
}
.step h4{font-size:18px;margin-bottom:6px}
.step p{font-size:16px;line-height:1.55;color:#1c3c58}

/* ----------------------------------------------------------------- paths -- */
.paths{max-width:none;margin:40px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.path{
  background:#fff;border:1px solid var(--b300);border-radius:var(--r);padding:24px 24px 20px;
  box-shadow:var(--sh1);
}
.path:first-child{border-top:3px solid var(--b700)}
.path:last-child{border-top:3px solid var(--gold)}
.path h4{font-size:19px}
.path .note{margin:8px 0 18px;font-size:15px;line-height:1.5;color:var(--b500)}
.chain{list-style:none;margin:0;padding:0;position:relative}
.chain::before{content:"";position:absolute;left:11px;top:12px;bottom:12px;width:2px;background:var(--b300)}
.chain li{
  position:relative;display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;
  padding:7px 0;font-size:15.5px;line-height:1.4;font-weight:600;color:var(--b800);
}
.chain li i{
  width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--b500);
  display:grid;place-items:center;font-style:normal;font-family:Poppins;font-size:11px;
  font-weight:700;color:var(--b700);position:relative;z-index:1;flex:none;
}
.path:last-child .chain li i{border-color:var(--gold6);color:var(--gold6)}
.path:last-child .chain::before{background:var(--gold3)}

/* ------------------------------------------------------------- checklist -- */
.check{max-width:var(--meas);margin:38px 0}
.check .hd{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.check .score{font-family:Poppins;font-weight:700;font-size:13px;color:var(--b500)}
.citem{
  display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;width:100%;text-align:left;
  background:#fff;border:1.5px solid var(--b300);border-radius:11px;padding:14px 16px;margin-bottom:9px;
  cursor:pointer;font-size:16.5px;line-height:1.45;font-weight:600;color:var(--b800);
  transition:.15s var(--ease);
}
.citem:hover{border-color:var(--b500)}
.citem i{
  width:26px;height:26px;border-radius:7px;border:2px solid var(--b500);background:#fff;flex:none;
  display:grid;place-items:center;color:#fff;transition:.15s var(--ease);
}
.citem i svg{opacity:0;transform:scale(.5);transition:.18s var(--ease)}
.citem.on{border-color:var(--green);background:#F5FBF7}
.citem.on i{background:var(--green);border-color:var(--green)}
.citem.on i svg{opacity:1;transform:none}
.citem.on span{color:#2E7D46}
.check .note{margin-top:10px;font-size:13px;color:var(--grey)}

/* ------------------------------------------------------------------ quiz -- */
.quiz{
  max-width:var(--meas);margin:42px 0;background:var(--b050);border:1px solid var(--b300);
  border-radius:var(--r);padding:28px 28px 24px;box-shadow:var(--sh1);
}
.quiz .tag{margin-bottom:14px}
.quiz h3{font-size:21px;margin-bottom:18px;max-width:38ch}
.opt{
  display:grid;grid-template-columns:26px 1fr;gap:13px;align-items:start;width:100%;text-align:left;
  background:#fff;border:1.5px solid var(--b300);border-radius:11px;padding:14px 16px;margin-bottom:9px;
  cursor:pointer;font-size:16.5px;line-height:1.42;font-weight:600;color:var(--b800);
  transition:.15s var(--ease);
}
.opt:hover:not(:disabled){border-color:var(--b500);transform:translateX(2px)}
.opt i{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--b500);flex:none;
  display:grid;place-items:center;font-family:Poppins;font-size:11.5px;font-weight:700;
  color:var(--b700);font-style:normal;transition:.15s;
}
.opt.right{border-color:var(--green);background:#F5FBF7}
.opt.right i{background:var(--green);border-color:var(--green);color:#fff}
.opt.wrong{border-color:#E7A0A5;background:#FDF6F6}
.opt.wrong i{background:var(--red);border-color:var(--red);color:#fff}
.opt:disabled{cursor:default;opacity:.62}
.opt.right:disabled,.opt.wrong:disabled{opacity:1}
.fb{
  margin:2px 0 12px;padding:14px 16px 14px 18px;border-radius:10px;font-size:15.5px;line-height:1.55;
  background:#fff;border-left:4px solid var(--b500);color:#1c3c58;animation:dfade .3s var(--ease);
}
.fb.good{border-left-color:var(--green);background:#F5FBF7}
.fb.bad{border-left-color:var(--gold);background:var(--gold1)}

/* -------------------------------------------------------------- download -- */
.dl{
  max-width:calc(var(--meas) + 170px);margin:44px 0;display:grid;
  grid-template-columns:auto minmax(240px,1fr) auto;gap:24px;
  align-items:center;background:#fff;border:1px solid var(--b300);border-radius:var(--r);
  padding:22px 26px;box-shadow:var(--sh1);
}
.dl > div{min-width:0}
.dl .sheet{
  width:62px;height:80px;border-radius:6px;flex:none;position:relative;
  background:linear-gradient(160deg,#fff,#EEF3F9);border:1px solid var(--b300);
  box-shadow:0 8px 20px rgba(16,62,103,.14);overflow:hidden;
}
.dl .sheet::before{content:"";position:absolute;left:0;top:0;width:100%;height:12px;background:var(--b900)}
.dl .sheet::after{
  content:"PDF";position:absolute;left:0;right:0;bottom:8px;text-align:center;
  font-family:Poppins;font-weight:800;font-size:10px;letter-spacing:.1em;color:var(--gold6);
}
.dl .sheet i{
  position:absolute;left:9px;right:9px;top:22px;height:2px;background:var(--b300);border-radius:2px;
  box-shadow:0 7px 0 var(--b300),0 14px 0 var(--b300),0 21px 0 var(--b300),0 28px 0 #EDF2F8;
}
.dl h4{font-size:18px;margin-bottom:6px}
.dl p{font-size:15px;line-height:1.5;color:var(--b500)}

/* -------------------------------------------------------------- complete -- */
/* Named .wrapup, not .done. .gatehint.done is a different state on a different
   element, and a bare .done rule styled both: the "Lesson complete" hint next
   to the Next button inherited a navy gradient and 44px of padding and shipped
   as a mystery box. */
.wrapup{
  max-width:none;margin:52px 0 0;border-radius:18px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,#0E3557,#103E67 58%,#0B2C49);color:#fff;padding:44px 40px 40px;
}
.wrapup::before{
  content:"";position:absolute;right:-60px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(77,179,99,.34),transparent 68%);
}
.wrapup > *{position:relative}
.wrapup .mark{
  width:60px;height:60px;border-radius:50%;background:var(--green);display:grid;place-items:center;
  margin-bottom:22px;box-shadow:0 10px 30px rgba(77,179,99,.4);
}
.wrapup h2{color:#fff;font-size:32px;max-width:20ch}
.wrapup .p{margin-top:14px;font-size:18px;line-height:1.55;color:#CBDAEA;max-width:52ch}
.wrapup .rc{
  margin:28px 0 0;padding:22px 24px;background:rgba(255,255,255,.06);border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
}
.wrapup .rc .k{
  font-family:Poppins;font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
}
.wrapup .rc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.wrapup .rc li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:16px;line-height:1.45;color:#DCE7F2}
.wrapup .rc li svg{margin-top:4px;color:var(--green);flex:none}
.wrapup .row{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  font-weight:700;font-size:15.5px;padding:13px 22px;border-radius:11px;
  background:var(--gold);color:#22303d;transition:.16s var(--ease);
}
.btn:hover{background:var(--gold6);color:#fff;transform:translateY(-1px)}
.btn:disabled{background:var(--b300);color:#9AABBD;cursor:not-allowed;transform:none}
.btn.line{background:#fff;color:var(--b700);box-shadow:inset 0 0 0 1.5px var(--b300)}
.btn.line:hover{background:var(--b100);color:var(--b800)}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.sm{padding:10px 16px;font-size:14.5px;border-radius:9px}

/* ------------------------------------------------------------- lesson nav */
.lnav{
  max-width:none;margin:56px 0 0;padding-top:26px;border-top:1px solid var(--b300);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.lnav .spacer{flex:1}
.lnav .left{font-size:14px;color:var(--b500);line-height:1.4}
.lnav .left b{display:block;font-family:Poppins;font-size:15px;color:var(--b800)}
.gatehint{font-size:13.5px;color:var(--gold6);font-weight:600;display:flex;align-items:center;gap:7px}
.gatehint.done{color:#2E7D46}

/* ---------------------------------------------------------------- mobile -- */
@media(max-width:1040px){
  :root{--rail:250px}
  .pad{padding:0 30px 80px}
}
@media(max-width:880px){
  body{font-size:17px}
  .shell{grid-template-columns:1fr}
  .railbtn{
    display:inline-flex;align-items:center;gap:8px;background:var(--b100);border:1px solid var(--b300);
    border-radius:99px;padding:7px 13px;font-size:13.5px;font-weight:700;color:var(--b700);cursor:pointer;
  }
  .rail{
    position:fixed;inset:60px 0 auto 0;height:auto;max-height:calc(100vh - 60px);z-index:55;
    transform:translateY(-102%);transition:transform .3s var(--ease);box-shadow:0 20px 50px rgba(0,0,0,.3);
  }
  .rail.open{transform:none}
  .top .title{display:none}
  .pad{padding:0 22px 70px;max-width:none}
  .lhead{padding:36px 0 26px}
  .diag .grid{grid-template-columns:1fr}
  .dpanel{min-height:0}
  .zones{grid-template-columns:1fr}
  /* Three stacked, full width buttons: a thumb target rather than three
     cramped columns, and still one screen with no scrolling. */
  .levels{grid-template-columns:1fr}
  .sortcard{padding:20px 20px 18px}
  .paths{grid-template-columns:1fr}
  .impact.solid{padding:26px 24px}
  .wrapup{padding:34px 24px 30px;border-radius:14px}
  .fband .in{padding-left:0 !important;gap:8px}
  .fband em{margin-left:0;padding-right:0}
  .fband{clip-path:none !important;border-radius:10px;padding:16px 20px}
  .fdrop .inner{margin:8px 0 4px;border-radius:0 10px 10px 0}
  .dl{grid-template-columns:1fr;gap:14px}
  .drow{grid-template-columns:1fr;gap:4px}
}

/* ----------------------------------------------------------------- print -- */
@media print{
  .top,.rail,.scrollbar,.lnav,.railbtn{display:none !important}
  .shell{grid-template-columns:1fr;padding-top:0}
  .pad{max-width:none;padding:0}
  .rv{opacity:1;transform:none}
  .fdrop{max-height:none !important}
  .impact.solid,.wrapup{background:var(--b100) !important;color:var(--b900) !important}
  .impact.solid p,.wrapup h2,.wrapup .p,.wrapup .rc li{color:var(--b900) !important}
}

/* ============================================================================
   Why Buy Challenge additions. Everything above is course.css as shipped for
   the Scania toolbox; everything below is what the public toolbox adds.
   ========================================================================= */

/* rail: a locked lesson shows a padlock instead of its number */
.toc .node .lk{display:none}
.toc li.locked .node{background:#0F3555;color:#6C89A6;box-shadow:inset 0 0 0 2px rgba(255,255,255,.1)}
.toc li.locked .node .num{display:none}
.toc li.locked .node .lk{display:block}
.toc li.locked.on .node{background:var(--gold);color:#22303d}
.toc li.locked .tx b{color:#8FAAC5}
.top .pill{color:var(--gold6);background:var(--gold1);border-color:var(--gold3)}

/* text lists */
.tlist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.tlist li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:16.5px;line-height:1.5;color:#1c3c58}
.tlist li svg{margin-top:9px;color:var(--gold6)}
.accintro{margin-bottom:14px;color:#1c3c58}
.acchead .t small{display:block;font-family:"Source Sans 3",system-ui,sans-serif;font-weight:600;font-size:13px;color:var(--b500);margin-top:2px}
.step .ex{
  margin:10px 0 0;padding:10px 14px;border-left:3px solid var(--gold);background:var(--gold1);
  border-radius:0 8px 8px 0;font-size:15px;line-height:1.5;color:#3d2f18;font-style:italic;
}

/* planned film */
.vplan{
  display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start;
  border:1.5px dashed var(--b500);border-radius:var(--r);padding:22px 24px;background:var(--b050);
}
.vplan__ic{
  width:54px;height:54px;border-radius:14px;background:#fff;border:1px solid var(--b300);
  display:grid;place-items:center;color:var(--b700);
}
.vplan__k{font-family:Poppins;font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold6);margin-bottom:6px}
.vplan h4{font-size:18px;margin-bottom:6px}
.vplan p{font-size:15.5px;line-height:1.55;color:#1c3c58}
.vplan small{display:block;margin-top:8px;font-size:13px;color:var(--b500)}
.vplan__list{margin:10px 0 0;padding-left:18px;font-size:15px;line-height:1.5;color:#1c3c58}
.vplan__list li{margin:4px 0}
/* the placeholder frame: where the film will sit, and what it should say */
.vplan--frame{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px;align-items:center}
.vplan__box{
  position:relative;aspect-ratio:16/9;border-radius:10px;
  background:repeating-linear-gradient(135deg,#E6EDF5 0 14px,#EEF3F9 14px 28px);
  border:1px solid var(--b300);display:grid;place-items:center;color:var(--b500);
}
.vplan__box .play{
  width:58px;height:58px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 4px 16px rgba(16,62,103,.12);color:var(--b500);
}
.vplan__len{
  position:absolute;right:12px;bottom:10px;font-size:12.5px;font-weight:700;
  background:#fff;border-radius:99px;padding:3px 9px;color:var(--b700);
}
@media (max-width:720px){.vplan--frame{grid-template-columns:1fr;gap:16px}}
.vframe .vopt{
  position:absolute;left:18px;top:16px;padding:5px 10px;border-radius:99px;
  background:rgba(255,255,255,.92);color:var(--b800);font-family:Poppins;font-weight:700;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}

/* sort drill with 4 zones */
.levels{grid-template-columns:repeat(var(--z,3),minmax(0,1fr))}
.zones{grid-template-columns:repeat(var(--z,3),minmax(0,1fr))}
.lvl{font-size:15px;padding:13px 10px}
@media(max-width:880px){.levels,.zones{grid-template-columns:1fr}}

/* flashcards */
.fc{max-width:calc(var(--meas) + 60px);margin:42px 0}
.fcdeck{margin-top:18px}
.fcard{
  position:relative;width:100%;min-height:230px;border:0;padding:0;background:none;cursor:pointer;
  perspective:1400px;text-align:left;display:block;
}
.fcard .face{
  position:absolute;inset:0;border-radius:var(--r);padding:28px 30px;display:flex;flex-direction:column;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .55s var(--ease);
  box-shadow:var(--sh1);
}
.fcard .front{background:#fff;border:1.5px solid var(--b300)}
.fcard .back{background:linear-gradient(150deg,#0E3557,#103E67 60%,#0B2C49);color:#fff;transform:rotateY(180deg)}
.fcard.flipped .front{transform:rotateY(-180deg)}
.fcard.flipped .back{transform:rotateY(0)}
.fcard .fk{font-family:Poppins;font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold6);margin-bottom:12px}
.fcard .back .fk{color:var(--gold)}
.fcard .ft{font-family:Poppins;font-weight:800;font-size:clamp(20px,2.6vw,26px);line-height:1.25;color:var(--b800);letter-spacing:-.015em}
.fcard .fb2{font-size:17px;line-height:1.55;color:#DCE7F2}
.fcard .fh{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--b500)}
.fcard:hover .front{border-color:var(--b500)}
.fcard::before{content:"";display:block;min-height:230px}
.fcnav{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.fcprog{flex:1;display:flex;align-items:center;gap:5px;justify-content:center;font-size:13px;color:var(--b500);font-weight:600}
.fcprog i{width:8px;height:8px;border-radius:50%;background:var(--b300)}
.fcprog i.seen{background:var(--green)}
.fcprog i.on{background:var(--gold);transform:scale(1.25)}
.fcprog span{margin-left:8px;font-family:Poppins}

/* compare */
.cmp{max-width:calc(var(--meas) + 170px);margin:42px 0}
.cmpgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.cmpcol{border-radius:var(--r);padding:22px 24px;border:1.5px solid var(--b300);background:#fff}
.cmpcol.bad{border-color:#E7A0A5;background:#FDF6F6}
.cmpcol.good{border-color:#B7E3C3;background:#F5FBF7}
.cmpcol .ck{display:flex;align-items:center;gap:8px;font-family:Poppins;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.cmpcol.bad .ck{color:#8E2A2F}
.cmpcol.good .ck{color:#25603A}
.cmpcol p{font-size:17px;line-height:1.5;color:var(--b900);font-weight:600}
.cmpcol.bad p{font-family:Poppins;font-size:20px;font-weight:800;color:#5a2a2d}
.cmpcol small{display:block;margin-top:12px;font-size:14px;line-height:1.5;color:var(--b500)}
@media(max-width:760px){.cmpgrid{grid-template-columns:1fr}}

/* reflection */
.refl{max-width:var(--meas);margin:42px 0;background:var(--gold1);border:1px solid var(--gold3);border-radius:var(--r);padding:24px 26px}
.refl h3{font-size:20px;margin:12px 0 8px}
.refl .p{font-size:15.5px;color:#4a3a20;margin-bottom:12px}
.refl textarea{
  width:100%;border:1.5px solid var(--gold3);border-radius:10px;padding:12px 14px;font:inherit;font-size:16px;
  line-height:1.5;color:var(--b900);background:#fff;resize:vertical;min-height:110px;
}
.refl textarea:focus{outline:none;border-color:var(--gold6);box-shadow:0 0 0 4px rgba(95,115,136,.22)}
.reflst{margin-top:8px;font-size:12.5px;color:#8a6e42}

/* scorer */
.scorer{max-width:calc(var(--meas) + 170px);margin:42px 0}
.scbox{margin-top:16px;border:1px solid var(--b300);border-radius:var(--r);background:#fff;box-shadow:var(--sh1);overflow:hidden}
.scrow{display:grid;grid-template-columns:minmax(180px,.9fr) minmax(0,2fr);gap:16px;padding:16px 20px;border-top:1px solid var(--b300)}
.scrow:first-child{border-top:0}
.sck b{display:block;font-family:Poppins;font-size:15px;color:var(--b800);line-height:1.3}
.sck small{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--b500)}
.scopts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.scopt{
  display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;text-align:left;
  background:var(--b050);border:1.5px solid var(--b300);border-radius:10px;padding:9px 10px;cursor:pointer;
  font-size:13px;line-height:1.4;color:#1c3c58;transition:.15s var(--ease);
}
.scopt i{
  width:22px;height:22px;border-radius:6px;background:#fff;border:1px solid var(--b300);
  display:grid;place-items:center;font-style:normal;font-family:Poppins;font-weight:800;font-size:12px;color:var(--b700);
}
.scopt:hover{border-color:var(--b500)}
.scopt.on{border-color:var(--gold);background:var(--gold1)}
.scopt.on i{background:var(--gold);border-color:var(--gold);color:#22303d}
.scfoot{display:flex;align-items:center;gap:18px;padding:18px 20px;background:var(--b050);border-top:1px solid var(--b300);flex-wrap:wrap}
.sctot{flex:1;display:flex;align-items:center;gap:18px;min-width:0}
.scnum{font-family:Poppins;font-weight:800;color:var(--b800);white-space:nowrap}
.scnum b{font-size:34px;letter-spacing:-.03em}
.scnum span{font-size:14px;color:var(--b500);margin-left:4px}
.scband p{font-size:14px;line-height:1.45;color:var(--b500)}
.scband b{display:block;font-family:Poppins;font-size:15px;margin-bottom:2px}
.scband.good b{color:#25603A}
.scband.mid b{color:#3F5570}
.scband.low b{color:#8E2A2F}
.scnote{margin-top:10px;font-size:13.5px;color:var(--b500)}
@media(max-width:880px){.scrow{grid-template-columns:1fr;gap:10px}.scopts{grid-template-columns:1fr}}

/* download: kind badge */
.dl .sheet::after{content:attr(data-kind)}

/* cta panel */
.ctab{
  max-width:none;margin:48px 0;border-radius:18px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,#0E3557,#103E67 58%,#0B2C49);color:#fff;padding:36px 38px;
}
.ctab::before{content:"";position:absolute;right:-60px;top:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(95,115,136,.25),transparent 68%)}
.ctab > *{position:relative}
.ctab .k{font-family:Poppins;font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.ctab h2{color:#fff;font-size:26px;max-width:24ch}
.ctab .p{margin-top:12px;font-size:16.5px;line-height:1.55;color:#CBDAEA;max-width:56ch}
.ctab .row{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
@media(max-width:880px){.ctab{padding:28px 22px}}

/* the gate */
.gate{max-width:none;margin:30px 0 0}
.gatecard{
  border:1px solid var(--b300);border-radius:18px;background:#fff;box-shadow:var(--sh2);
  padding:34px 36px;max-width:calc(var(--meas) + 170px);
}
.gatehead{display:grid;grid-template-columns:60px 1fr;gap:20px;align-items:start}
.gatehead .gl{width:60px;height:60px;border-radius:16px;background:var(--gold1);border:1px solid var(--gold3);display:grid;place-items:center;color:var(--gold6)}
.gatehead h2{font-size:26px;margin:10px 0 10px}
.gatehead .p{font-size:16.5px;line-height:1.55;color:#1c3c58}
.gatepts{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px dashed var(--b300);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 18px}
.gatepts li{display:grid;grid-template-columns:16px 1fr;gap:9px;font-size:14.5px;line-height:1.45;color:var(--b800);font-weight:600}
.gatepts li svg{margin-top:5px;color:var(--green)}
.gateform{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:24px}
.gf{display:flex;flex-direction:column;gap:6px}
.gf.wide{grid-column:1 / -1}
.gf.hp{position:absolute;left:-9999px}
.gf label{font-size:13.5px;font-weight:700;color:var(--b800)}
.gf input,.gf select{
  width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--b300);background:#fff;
  font:inherit;font-size:16px;color:var(--b900);
}
.gf input:focus,.gf select:focus{outline:none;border-color:var(--b700);box-shadow:0 0 0 4px rgba(34,119,170,.14)}
.gf.consent{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:14px;line-height:1.5;color:#1c3c58;font-weight:400}
.gf.consent input{width:19px;height:19px;margin-top:2px;accent-color:var(--b700)}
.gf.consent a{color:var(--b700);text-decoration:underline}
.gerr{font-size:14px;font-weight:600;color:var(--red);min-height:0}
.gerr:empty{display:none}
.gnote{display:block;margin-top:12px;font-size:13px;line-height:1.5;color:var(--b500)}
@media(max-width:760px){.gateform{grid-template-columns:1fr}.gatecard{padding:24px 20px}.gatehead{grid-template-columns:1fr}}

/* figures strip */
.figs{max-width:calc(var(--meas) + 170px);margin:34px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fig1{background:var(--b050);border:1px solid var(--b300);border-radius:var(--r);padding:20px 22px}
.fig1 b{display:block;font-family:Poppins;font-weight:800;font-size:clamp(26px,3vw,34px);letter-spacing:-.03em;color:var(--b800);line-height:1}
.fig1 span{display:block;margin-top:8px;font-size:14.5px;line-height:1.4;color:var(--b500)}
@media(max-width:760px){.figs{grid-template-columns:1fr}}

/* diagrams: an SVG keeps its own proportions, no 16:9 crop, no shadow */
.fig.diagram img{aspect-ratio:auto;object-fit:contain;box-shadow:none;border:1px solid var(--b300)}
.fig.diagram.hero img{box-shadow:none}

/* ---------- Oct 2026: gate preview, weekly opt-in and thank-you step ----------
   PLAN.md §5.2. The preview is built from the lessons after the gate, so it
   always matches the real content. Ruled rows, no cards. */
.gateteaser{margin:18px 0 6px;padding-top:16px;border-top:1px solid var(--b300)}
.gateteaser .k{font:700 11px/1.2 "Source Sans 3",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5F6B7A;margin-bottom:6px}
.gtlist{list-style:none;margin:0;padding:0}
.gtlist li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--b300);font-variant-numeric:tabular-nums}
.gtlist .n{font-weight:700;color:#5F6B7A}
.gtlist .t b{display:block;color:var(--b900);font-weight:700;line-height:1.35}
.gtlist .t span{display:block;font-size:14.5px;line-height:1.45;color:#34506E;margin-top:2px}
.gtlist .m{font-size:13.5px;color:#5F6B7A;white-space:nowrap}
.gtfiles{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gtfiles li{font-size:14px;padding:5px 10px;border:1px solid var(--b300);border-radius:6px;color:var(--b900);background:#fff}
.gateform .weekly span{color:#34506E}
.gatedone{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.gatedone .gl{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--b900);color:#fff}
.gatedone .gl svg{width:22px;height:22px}
.gatedone h2{font-size:24px}
.gatedone .ask{padding:12px 14px;border-left:3px solid var(--b900);background:#F2EDE4}
.gatedone .ask a{font-weight:700;color:var(--b900);text-decoration:underline;text-underline-offset:3px}
.gatedone .share{color:#5F6B7A}

/* ---------- Oct 2026: orange means "do this", nothing else ----------
   The --gold names above now hold the orange family. These overrides keep the
   accent on actions: buttons on white are dark orange with a white label
   (4.6:1), buttons inside the navy CTA blocks are bright orange with a navy
   label (5.6:1). Labels, the lock and the logo go back to navy and slate.
   Progress in the rail still uses the orange family; revisit in the visual pass. */
.btn{background:var(--gold6);color:#fff}
.btn:hover{background:#AE430F;color:#fff}
.ctab .btn{background:var(--gold);color:var(--b900)}
.ctab .btn:hover{background:#FF9F5E;color:var(--b900)}
.ctab .btn.ghost{background:transparent;color:#fff}
.tag{color:var(--b900);background:#F2EDE4;border-color:#E2DACB}
.ctab .k{color:#B8C2CF}
.gatehead .gl{background:#F2EDE4;border-color:#E2DACB;color:var(--b900)}
.logo span{color:var(--b700)}

/* the learner's own answer, assembled from earlier notes */
.asmbox{border:1px solid var(--b300);border-radius:var(--r);background:#fff;overflow:hidden;margin:14px 0}
.asmrow{display:grid;grid-template-columns:220px 1fr;gap:18px;padding:16px 20px;border-top:1px solid var(--b300)}
.asmrow:first-child{border-top:0}
.asmk{display:flex;gap:10px;align-items:flex-start}
.asmk i{flex:none;width:24px;height:24px;border-radius:7px;background:var(--b100);color:var(--b700);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px}
.asmk b{font-family:Poppins;font-size:15px;color:var(--b800);line-height:1.35}
.asmv{font-size:16px;line-height:1.55;color:#1c3c58}
.asmrow.empty .asmv{color:var(--b500);font-style:italic}
@media (max-width:720px){.asmrow{grid-template-columns:1fr;gap:8px}}

/* ==========================================================================
   Diagrams, built in HTML (BUILD.diagram in js/wbc-course.js). They replace
   SVG pictures whose text overflowed wherever the web fonts were missing.
   Laid out with container queries, so each one fits the width it is given:
   one column on a phone, two in the reading column, four when there is room.
   ========================================================================== */
.dg{container-type:inline-size; margin:40px 0}
.dg-in{border:1px solid var(--b300); border-radius:3px; background:#fff; padding:clamp(18px, 3.4cqi, 30px)}
.dg-t{font:600 13px/1.35 "IBM Plex Mono", ui-monospace, Consolas, monospace; letter-spacing:.02em; color:#5F6B7A; margin-bottom:18px}
.dg-cap{margin-top:10px; font-size:14.5px; color:#5F6B7A}
.dg-items{list-style:none; margin:0; padding:0; display:grid; gap:20px 22px}
.dg-it{min-width:0}
.dg-k{font:600 12px/1.3 "IBM Plex Mono", ui-monospace, Consolas, monospace; color:#5F6B7A; margin-bottom:5px}
.dg-name{font:700 17px/1.2 Poppins, system-ui, sans-serif; color:var(--b900); margin-bottom:6px; letter-spacing:-.01em}
.dg-it p{font-size:15px; line-height:1.48; color:#34506E; margin:0 0 6px}
.dg-it p:last-child{margin-bottom:0}
.dg-it p.dg-note{font-weight:700; font-size:14.5px; color:var(--b900); margin-top:8px}
.dg-it p.dg-note.bad{color:#8E2A2F}
.dg-it p.dg-note.good{color:#256B37}
.dg-foot{margin:20px 0 0; padding-top:14px; border-top:1px solid var(--b300); font-size:14.5px; color:#5F6B7A}

/* segment colours, shared by bars and item rules */
.dg{--c1:var(--b700); --c2:var(--b500); --c3:var(--b800); --c4:#7CC4FF; --c5:var(--b900); --c6:#2A5586}
.dg .s1{--c:var(--c1)} .dg .s2{--c:var(--c2)} .dg .s3{--c:var(--c3)}
.dg .s4{--c:var(--c4)} .dg .s5{--c:var(--c5)} .dg .s6{--c:var(--c6)} .dg .s7{--c:var(--c1)}

/* a bar above the items: time, or a score */
.dg-scale{margin:0 0 18px}
.dg-bar{display:flex; gap:4px; height:6px}
.dg-seg{display:block; border-radius:3px; background:var(--c)}
.dg-ends, .dg-marks{display:flex; justify-content:space-between; margin-top:6px;
  font:600 12px/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; color:#5F6B7A}
.dg-marks{position:relative; height:14px}
.dg-marks span{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap}
.dg-marks span:first-child{transform:none}
.dg-marks span:last-child{transform:translateX(-100%)}

/* a strip under the items */
.dg-band{margin-top:18px; padding:11px 14px; border:1px dashed var(--b500); border-radius:3px;
  display:grid; gap:2px; font-size:14.5px; line-height:1.45; color:#34506E}
.dg-band b{font:600 12.5px/1.3 "IBM Plex Mono", ui-monospace, Consolas, monospace; color:var(--b900)}

/* the closing list */
.dg-rules{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:6px 22px}
.dg-rules li{display:flex; gap:9px; align-items:flex-start; font-size:15px; line-height:1.4; color:#34506E}
.dg-rules svg{flex:none; margin-top:3px; color:var(--green)}
@container (min-width:560px){ .dg-rules{grid-template-columns:1fr 1fr} }

/* ---- steps, flow, ladder: a rule in the stage's colour on top of each ---- */
.dg--steps .dg-it, .dg--flow .dg-it, .dg--ladder .dg-it{border-top:3px solid var(--c); padding-top:12px}
.dg--steps .dg-it.key .dg-name{color:#1F6FD1}
.dg--flow .dg-it{--c:var(--b900)}
@container (min-width:440px){
  .dg--steps .dg-items, .dg--flow .dg-items, .dg--ladder .dg-items{grid-template-columns:1fr 1fr}
}
@container (min-width:640px){
  .dg--flow.n3 .dg-items{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@container (min-width:820px){
  .dg--steps .dg-items, .dg--ladder .dg-items, .dg--flow .dg-items{grid-template-columns:repeat(var(--n), minmax(0,1fr))}
  .dg--steps .dg-band{margin-inline:calc(25% + 5px)}
  /* ladder: each week one step higher */
  .dg--ladder .s1{margin-top:84px} .dg--ladder .s2{margin-top:56px}
  .dg--ladder .s3{margin-top:28px}
}

/* ---- chain: boxes joined by a question, product side to customer side ---- */
.dg--chain .dg-items{display:flex; flex-direction:column; gap:0}
.dg--chain .dg-it{border:1px solid var(--b300); border-radius:3px; padding:12px 14px; background:#fff;
  display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:baseline}
.dg--chain .dg-it .dg-k, .dg--chain .dg-it .dg-name{margin:0}
.dg--chain .dg-it .dg-name{font-size:16px}
.dg--chain .dg-it.bad .dg-name{color:#5F6B7A; font-style:italic}
.dg--chain .dg-it.good{border:2px solid #1F6FD1}
.dg--chain .dg-it.good .dg-name{color:#1F6FD1}
.dg-join{display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 0;
  font:600 12.5px/1 "IBM Plex Mono", ui-monospace, Consolas, monospace; color:var(--b700)}
.dg-join::before{content:""; width:2px; height:16px; background:var(--b500)}
.dg-sides{display:none}
@container (min-width:900px){
  .dg--chain .dg-items{flex-direction:row; align-items:stretch}
  .dg--chain .dg-it{flex:1 1 0; min-width:0; display:block}
  .dg--chain .dg-it .dg-k{margin-bottom:5px}
  .dg-join{flex:none; flex-direction:column; justify-content:center; width:72px; padding:0 4px; gap:6px; text-align:center; line-height:1.2}
  .dg-join::before{width:100%; height:2px; order:2; background:var(--b500)}
  .dg-sides{display:flex; justify-content:space-between; gap:12px; margin-top:12px; padding-top:8px;
    border-top:1px solid var(--b300); font:600 12px/1.3 "IBM Plex Mono", ui-monospace, Consolas, monospace; color:#5F6B7A}
}

/* ---- timeline: one row per stage, the minutes on the left ---- */
.dg--timeline .dg-scale{display:none}
.dg--timeline .dg-items{gap:0}
.dg--timeline .dg-it{display:grid; grid-template-columns:92px 1fr; gap:4px 16px; padding:12px 0;
  border-top:1px solid var(--b300)}
.dg--timeline .dg-it:first-child{border-top:3px solid var(--b900)}
.dg--timeline .dg-it .dg-k{grid-row:1 / span 2; margin:2px 0 0; color:var(--b700)}
.dg--timeline .dg-it .dg-name{margin:0}
@container (max-width:380px){
  .dg--timeline .dg-it{grid-template-columns:1fr}
  .dg--timeline .dg-it .dg-k{grid-row:auto}
}

/* ---- scale: a score bar in bands, and the rows that add up to it ---- */
.dg--scale .dg-bar{height:auto; gap:3px}
.dg--scale .dg-seg{padding:8px 10px; font:600 12.5px/1.25 "IBM Plex Mono", ui-monospace, Consolas, monospace; color:#fff; min-width:0}
.dg--scale .dg-seg.low{background:#8E2A2F}
.dg--scale .dg-seg.mid{background:#9A6A1E}
.dg--scale .dg-seg.good{background:#2F7D45}
.dg--scale .dg-items{gap:0 26px}
.dg--scale .dg-it{display:flex; gap:12px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--b300)}
.dg--scale .dg-it .dg-k{flex:none; width:18px; margin:0; color:var(--b700)}
.dg--scale .dg-it .dg-name{font-size:15.5px; margin:0}
@container (min-width:520px){ .dg--scale .dg-items{grid-template-columns:1fr 1fr; grid-template-rows:repeat(4, auto); grid-auto-flow:column} }

/* ---- track: negative, neutral, positive ---- */
.dg-track{margin-top:22px; padding-top:16px; border-top:1px solid var(--b300)}
.dg-line{position:relative; display:flex; justify-content:space-between; margin:10px 0 0; padding-top:20px;
  font:600 13px/1.2 Poppins, system-ui, sans-serif; color:var(--b900)}
.dg-line::before{content:""; position:absolute; left:6px; right:6px; top:5px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, #C9545B, #B7C3D0 50%, #3E9A57)}
.dg-line span{position:relative; display:flex; flex-direction:column; align-items:center}
.dg-line span:first-child{align-items:flex-start}
.dg-line span:last-child{align-items:flex-end}
.dg-line i{position:absolute; top:-20px; width:13px; height:13px; border-radius:50%; background:#fff; border:3px solid var(--b900)}
.dg-line span:first-child i{left:0}
.dg-line span:last-child i{right:0}
.dg-track p{margin:12px 0 0; font-size:14.5px; color:#5F6B7A}