/* course.css — ONLY what is specific to this page.
 * Everything shared — typeface, tokens, reset, type scale, .wrap, header.site,
 * footer.site — lives in base.css, which every page loads FIRST. Do not redeclare
 * a token or @font-face here: weblint refuses it, because that is how the site
 * ended up with two greys called --muted and nine copies of one broken font path.
 */
/* courses.html — extracted from the inline <style> so the site can enforce a CSP. */
@layer page {

.dates{font-size:15px;color:var(--muted);margin:14px 0 0;border-top:1px solid var(--line);padding-top:14px}
.dates strong{color:var(--ink)}
h3{font-size:16px;margin:26px 0 6px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:18px 0}
.promise{border-left:2px solid var(--ink);padding:2px 0 2px 18px;margin:26px 0;font-size:17px;line-height:1.55}
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
td.n{color:var(--blue);font-weight:700;width:34px}
.topic{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0;margin:10px 0}
.topic>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 10px;padding:15px 20px;cursor:pointer;list-style:none;font-weight:400}
/* Two deliberate rows. Left to wrap naturally, a long descriptor pushed the topic
   count onto a line by itself, where margin-left:auto stranded it against the
   right edge. Ordering the count onto the title row and forcing a break after it
   keeps [numeral · title ............ N topics] scannable down the whole
   syllabus, with the descriptor beneath. The zero-height full-basis ::before is
   the line break. */
.topic .badge{order:1}
.topic .tt{order:2}
.topic .ct{order:3}
.topic>summary::before{content:"";order:4;flex-basis:100%;height:0}
.topic .tq{order:5}
.topic .tc{order:6}
.topic>summary::-webkit-details-marker{display:none}
.topic>summary::marker{content:""}
.topic>summary:hover{background:#fafbfd;border-radius:12px}
.topic[open]>summary{border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
/* The module number is an anchor, not a label — set large enough to scan the
   syllabus by numeral alone, matching the numerals in the principles list. */
.topic .badge{background:none;color:var(--blue);font-size:27px;font-weight:800;padding:0;
  line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;flex:none;
  min-width:26px;text-align:center}
/* OPENING / CLOSING are words, not numbers: same slot, different voice. */
.topic .badge.flat{background:none;color:var(--muted);font-size:10.5px;font-weight:700;
  letter-spacing:.13em;line-height:1;min-width:26px;text-align:left;align-self:center}
.topic .tt{font-weight:700;font-size:16px}
.topic .tq{color:var(--muted);font-size:13.5px;font-style:italic}
/* The consequence line ("An unearned claim cannot ship") is the strongest phrase
   in the summary — it should not read as muted apparatus like the question. */
.topic .tc{color:var(--ink);font-size:13.5px;font-weight:600}
@media(max-width:640px){.topic .tc{flex-basis:100%}}
.topic .ct{margin-left:auto;color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap;flex:none}
.topic .ct::after{content:" \25BE";font-size:11px}
.topic[open] .ct::after{content:" \25B4"}
.topic ul{margin:0;padding:14px 22px 16px 42px}
.topic li{font-size:15px;margin:6px 0}
.econ{width:100%;border-collapse:collapse;margin:16px 0 6px;font-size:15px}
.econ th,.econ td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.econ th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.econ td.n,.econ th.n{text-align:right}
.econ td.n{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
details.note{background:#fff;border:1px solid var(--line);border-radius:10px;padding:0;margin:8px 0 6px}
details.note>summary{padding:11px 16px;cursor:pointer;list-style:none;font-size:13.5px;font-weight:650;color:var(--muted)}
details.note>summary::-webkit-details-marker{display:none}
details.note>summary::marker{content:""}
details.note>summary::after{content:" \25BE";font-size:10px}
details.note[open]>summary::after{content:" \25B4"}
details.note[open]>summary{border-bottom:1px solid var(--line)}
details.note .body{padding:14px 16px 16px;font-size:14px}
details.note p{font-size:14px;margin:0 0 10px}
details.note table{margin:0 0 12px;font-size:13.5px}
details.note .calc{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  white-space:pre;overflow-x:auto;margin:0 0 12px;line-height:1.5}
.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;font-weight:700;font-size:15.5px;padding:13px 26px;border-radius:10px;margin:6px 10px 6px 0}
.btn.alt{background:#fff;color:var(--blue);border:1.5px solid var(--blue)}
.small{font-size:13.5px;color:var(--muted)}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:10px 0}
summary{font-weight:650;cursor:pointer;font-size:15.5px}
details p{margin:10px 0 2px}
/* ── rhythm: sections read as numbered chapters, so 11 screens have a spine ── */
.wrap{counter-reset:sec}
h2{counter-increment:sec;scroll-margin-top:72px}

/* ── full-bleed bands ──────────────────────────────────────────────────────
   The wall-of-text feeling came from one layout — 820px, one background — held
   for eleven screens. Alternating sections now break out of the container to
   the full viewport and sit on white, so the page reads as chapters with
   physical edges rather than as a single scroll of prose.

   The break-out: negative inline margins pull the element out to the viewport,
   matching padding pushes its content back to the column. `overflow-x:clip` on
   <html> is what makes 50vw safe when a scrollbar is present — and unlike
   overflow:hidden it does not break position:sticky, which the bar depends on. */
html{overflow-x:clip}
.band{margin-inline:calc(50% - 50vw);padding:14px calc(50vw - 50%) 34px;
  background:#fff;border-block:1px solid var(--line)}
.band + .band{border-top:0}
.band > h2:first-child{margin-top:30px}
/* Cards already sit on white; on a white band they need their own edge back. */
.band details.note,.band details.topic,
.band details{background:#fbfcfe}
section:not(.band) > h2{margin-top:52px}
h2::before{content:counter(sec,decimal-leading-zero);display:block;font-size:11px;
  letter-spacing:.16em;color:var(--muted);font-weight:700;margin-bottom:7px;
  font-variant-numeric:tabular-nums}
h3{scroll-margin-top:72px}

/* ── the sticky bar: where you are, how far in, and the way to buy ── */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(246,248,251,.88);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);transform:translateY(-101%);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);will-change:transform}
.bar.on{transform:none}
.bar .in{max-width:820px;margin:0 auto;padding:9px 24px;display:flex;align-items:center;gap:16px}
.bar .t{font-size:13.5px;font-weight:650;color:var(--ink);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .t i{font-style:normal;color:var(--blue);font-weight:800;font-variant-numeric:tabular-nums;
  margin-right:8px}
.bar .go{margin-left:auto;flex:none;background:var(--blue);color:#fff;text-decoration:none;
  font-weight:700;font-size:13px;padding:7px 16px;border-radius:8px;white-space:nowrap}
.prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--blue);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}
@media(max-width:520px){.bar .t{font-size:12.5px}}

/* ── reveal on scroll. Gated on .js so the page is whole without JavaScript. ── */
.js .rv{opacity:0;transform:translateY(12px);
  transition:opacity .45s cubic-bezier(.2,.6,.2,1),transform .45s cubic-bezier(.2,.6,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rv,.js .rv.in{opacity:1;transform:none;transition:none}
  .bar{transition:none}
  html{scroll-behavior:auto}
}

/* ── registration: the PRICES are the checkout buttons ─────────────────────
   A row per seat type, a column per cohort, and every cell a link. One glance
   answers "what does my seat cost", and the answer is the thing you click —
   which is why the cohort cards went: they made the reader compare three boxes
   to find one number. */
.tablewrap{overflow-x:auto;margin:18px 0 6px}
.prices,.spec{width:100%;border-collapse:collapse;font-size:15px;margin:0}
.prices th,.prices td{padding:10px;border-bottom:1px solid var(--line);text-align:right;
  white-space:nowrap;vertical-align:middle}
.prices thead th{font-size:12.5px;color:var(--muted);font-weight:700;text-transform:none;
  letter-spacing:0}
.prices thead th:first-child{border-bottom:0}
.prices tbody th{text-align:left;font-weight:700;font-size:14.5px;color:var(--ink);
  text-transform:none;letter-spacing:0;white-space:normal;padding-left:0}
.prices td a{display:inline-block;min-width:84px;text-align:center;padding:6px 12px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--blue);
  font-weight:800;font-variant-numeric:tabular-nums;text-decoration:none;
  transition:background .12s ease,border-color .12s ease,color .12s ease}
.prices td a:hover,.prices td a:focus{background:var(--blue);border-color:var(--blue);color:#fff}

/* ── logistics: a spec sheet, not tiles ── */
.spec th{text-align:left;width:36%;font-weight:700;font-size:14.5px;color:var(--ink);
  text-transform:none;letter-spacing:0;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--line);vertical-align:top}
.spec td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
@media(max-width:560px){.spec th{width:auto}}

/* Layout the pages used to set with inline style= attributes. A CSP with style-src 'self'
   (no 'unsafe-inline') drops a style attribute silently, so these live here instead. */
.cta-row{margin:18px 0 4px}
.cta-row-lg{margin-top:34px}
footer.site .links{margin-top:8px}
footer.site .fineprint{margin-top:10px}

}  /* end @layer page */