/* ======================================================================================
   Course detail page.

   The design this implements was supplied as a standalone HTML page, and its CSS is
   reproduced here rather than reinterpreted, so the rendered result matches what was
   approved. Two things were changed on the way in, both structural:

   1. EVERY SELECTOR IS SCOPED UNDER .cd.

      The design was written to own a whole document: it styles body, h1, h2, p, table,
      section and a set of very ordinary class names - .card, .box, .nav, .main, .side,
      .btn, .tbl. Dropped into a site with its own theme, that is a collision in every
      direction. Scoped under one wrapper it cannot reach anything outside the course page,
      and the site's stylesheet cannot reach in.

      The consequence to remember when editing: markup for this page must live inside
      <div class="cd" data-page="course"> or none of this applies to it.

   2. THE STICKY SECTION NAV DOCKS UNDER THE SITE HEADER.

      The design assumed it owned the top of the window and used top:0, z-index:50. This
      site has its own sticky header at exactly that position, 96px tall, collapsing to
      60px once you scroll. So the nav offsets by --cd-head, sits at z-index 40 so it
      passes beneath the header rather than fighting it, and section anchors leave room
      for both.

   The theme is switched by the data-page attribute: "course" is emerald, "career" is
   indigo. Careers can reuse this file whenever that page is rebuilt.
   ====================================================================================== */

html { scroll-behavior: smooth; }

/* Course pages are Clay. The neutrals were already warm - #fbfaf8 ground, #e7e5e0
   rules - so they carry a terracotta accent without being touched; only the tint and
   the accent family move. --good, --mid and --bad stay where they are: they are
   semantic states, not brand colour, and a warning that changes hue with the theme
   stops meaning "warning". */
.cd[data-page="course"] { --bg:#fbfaf8; --surface:#fff; --surface-2:#f5f4f1; --tint:#faefe9; --line:#e7e5e0; --line-2:#f0eee9; --accent:#9a4526; --accent-2:#7a351c; --accent-soft:#fbeee7; --accent-line:#ecd0c1; --hero-a:#b4552f; --hero-b:#6b2a1e; --hero-c:#331512; --texture:
      repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 26px),
      repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 26px) }
.cd[data-page="career"] { --bg:#faf9fc; --surface:#fff; --surface-2:#f3f3f7; --tint:#eef1fa; --line:#e4e4ec; --line-2:#eeeef4; --accent:#2b3f7d; --accent-2:#1f2f61; --accent-soft:#eaeef9; --accent-line:#ccd5ee; --hero-a:#3a54a8; --hero-b:#1b2650; --hero-c:#101736; --texture:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 14px) }
.cd { --ink:#101316; --ink-2:#565d64; --ink-3:#8a9198; --ink-4:#b3b8bd; --good:#12735a; --mid:#8a6209; --bad:#a3352a; --c-emerald:#0f5c46; --c-emerald-s:#e6f1ec; --c-teal:#0e7d76; --c-teal-s:#e5f4f2; --c-sky:#1f6f9a; --c-sky-s:#e8f2f8; --c-amber:#9a6a10; --c-amber-s:#fbf2e0; --c-violet:#6d4bb5; --c-violet-s:#f0ebfa; --c-rose:#a83a64; --c-rose-s:#fbe9ef; --c-rust:#a3352a; --c-rust-s:#fbeae7; --c-slate:#5a6472; --c-slate-s:#eef0f3; --c-olive:#5d7014; --c-olive-s:#f1f4e2; --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --wrap:1200px; --r:18px; --ease:cubic-bezier(.2,.8,.25,1); --sh-1:0 1px 2px rgba(16,19,22,.05); --sh-2:0 6px 20px -10px rgba(16,19,22,.18); --sh-3:0 26px 54px -30px rgba(16,19,22,.45) }
.cd * { box-sizing:border-box }
.cd { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15.5px; line-height:1.62; letter-spacing:-.005em; overflow-wrap:break-word; -webkit-font-smoothing:antialiased }
.cd .wrap { max-width:var(--wrap); margin:0 auto; padding:0 26px }
.cd .num { font-variant-numeric:tabular-nums }
.cd .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.cd :focus-visible { outline:2px solid var(--accent); outline-offset:3px }
.cd a { color:var(--accent) }
.cd svg { flex:none }
.cd .kind svg, .cd .pill svg, .cd .btn svg, .cd .nav a svg, .cd .box-h svg { margin-right:7px }
.cd .note .ico { margin-right:13px }
.cd .sec-ico { margin-right:14px }
.cd .pill i { margin-right:7px }
.cd .prog { position:fixed; top:0; left:0; height:3px; width:0; z-index:80; background:linear-gradient(90deg,#7fd8b6,var(--hero-a)); transition:width .1s linear }
.cd .hero { position:relative; overflow:hidden; color:#fff; padding-bottom:26px; background:
      radial-gradient(80% 70% at 82% -6%,rgba(255,255,255,.18),transparent 58%),
      linear-gradient(158deg,var(--hero-a) 0%,var(--hero-b) 55%,var(--hero-c) 100%) }
.cd .hero::before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; opacity:.6; background-image:var(--texture) }
/* 78 -> 46. This padding exists so the spec ribbon can overlap the foot of the hero, but
   the ribbon only ever reached 36px into it - the rest was just gap. */
.cd .hero-in { position:relative; z-index:1; padding-bottom:46px }
.cd .crumbs { padding:14px 0 0; font-size:13px; color:rgba(255,255,255,.6) }
.cd .crumbs a { color:rgba(255,255,255,.74); text-decoration:none }
.cd .crumbs a:hover { color:#fff; text-decoration:underline }
.cd .crumbs span { padding:0 7px; color:rgba(255,255,255,.34) }
.cd .hero-grid { display:flex; gap:52px; align-items:center; padding:16px 0 0 }
.cd .hero-copy { flex:1 1 520px; min-width:0 }
.cd .pills { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.cd .pills > * { margin-right:8px }
.cd .pills > *:last-child { margin-right:0 }
.cd .kind { display:inline-flex; align-items:center; background:#fff; color:var(--accent); font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; border-radius:6px }
.cd .pill { display:inline-flex; align-items:center; font-size:12px; font-weight:600; padding:5px 12px; border-radius:6px; border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.88); background:rgba(255,255,255,.1) }
.cd .pill i { width:6px; height:6px; border-radius:50%; background:#ffd479 }
.cd h1 { font-size:50px; font-size:clamp(33px,4.5vw,54px); font-weight:800; letter-spacing:-.042em; line-height:1.03; margin:0; color:#fff }
.cd h1 small { display:block; font-size:.42em; font-weight:600; letter-spacing:-.02em; color:rgba(255,255,255,.6); margin-top:9px }
.cd .sub { margin:18px 0 0; max-width:54ch; font-size:17.5px; line-height:1.6; color:rgba(255,255,255,.76) }
.cd .sub b { color:#fff; font-weight:700 }
.cd .cta { display:flex; gap:11px; flex-wrap:wrap; margin-top:26px }
.cd .btn { font-family:var(--sans); font-size:14.5px; font-weight:700; letter-spacing:-.01em; cursor:pointer; background:#fff; color:var(--hero-c); border:1px solid #fff; border-radius:10px; padding:13px 22px; text-decoration:none; display:inline-flex; align-items:center; box-shadow:var(--sh-2); transition:transform .16s var(--ease),box-shadow .16s,background .16s }
.cd .btn:hover { transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(0,0,0,.42) }
.cd .btn:active { transform:none }
.cd .btn-glass { background:rgba(255,255,255,.11); color:#fff; border-color:rgba(255,255,255,.26); box-shadow:none; font-weight:600 }
.cd .btn-glass:hover { background:rgba(255,255,255,.2) }
.cd .btn-solid { background:var(--accent); color:#fff; border-color:var(--accent) }
.cd .btn-solid:hover { background:var(--accent-2) }
.cd .btn-sm { font-size:13.5px; padding:9px 15px; border-radius:8px }
.cd .shots { flex:0 0 388px; position:relative }
.cd .shots::before { content:""; position:absolute; left:50%; top:48%; width:120%; height:106%; transform:translate(-50%,-50%); pointer-events:none; background:radial-gradient(closest-side,rgba(255,255,255,.17),rgba(255,255,255,0) 72%) }
.cd .art-wrap { position:relative }
.cd .art { position:relative; display:block; width:100%; height:auto; max-height:400px; object-fit:contain; filter:drop-shadow(0 26px 42px rgba(0,0,0,.44)) }
.cd .shots.noart .art { display:none }
.cd .art-ph { display:none; border:1px dashed rgba(255,255,255,.34); border-radius:14px; padding:34px 20px; text-align:center; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.72) }
.cd .shots.noart .art-ph { display:block }
.cd .art-ph b { display:block; color:#fff; font-size:13.5px; font-weight:700; margin-bottom:5px }
.cd .art-ph code { font-size:11.5px; background:rgba(255,255,255,.15); border-radius:6px; padding:2px 6px }
.cd .stamp { position:absolute; right:0; bottom:-14px; background:#fff; border-radius:10px; padding:10px 14px; box-shadow:0 20px 40px -18px rgba(0,0,0,.5); display:flex; align-items:center }
.cd .stamp b { margin-right:9px; font-size:25px; font-weight:800; letter-spacing:-.03em; color:var(--mid); line-height:1; font-variant-numeric:tabular-nums }
.cd .stamp span { font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); line-height:1.3 }
.cd .ribbon-hold { position:relative; z-index:20; margin-top:-52px }
.cd .ribbon { display:flex; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-3); overflow:hidden }
.cd .ribbon div { flex:1 1 170px; min-width:0; padding:15px 20px; border-left:1px solid var(--line-2) }
.cd .ribbon div:first-child { border-left:0 }
.cd .ribbon dt { margin:0; font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-4); display:flex; align-items:center }
.cd .ribbon dt svg { margin-right:7px; color:var(--accent) }
.cd .ribbon dd { margin:7px 0 0; font-size:17.5px; font-weight:800; letter-spacing:-.03em }
.cd .ribbon dd small { display:block; font-size:12.5px; font-weight:500; color:var(--ink-3); letter-spacing:0; margin-top:2px }
.cd .nav { position:sticky; top:0; z-index:50; background:rgba(251,250,248,.92); border-bottom:1px solid var(--line); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px) }
.cd .nav-in { display:flex; align-items:stretch; padding-top:2px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none }
.cd .nav-in::-webkit-scrollbar { display:none }
.cd .nav a { flex:none; display:inline-flex; align-items:center; font-size:13px; font-weight:700; color:var(--ink-3); text-decoration:none; padding:14px 15px; border-bottom:2px solid transparent; transition:color .16s,border-color .16s }
.cd .nav a:hover { color:var(--ink) }
.cd .nav a.on { color:var(--accent); border-bottom-color:var(--accent) }
.cd .nav a.on svg { color:var(--accent) }
.cd .nav a svg { color:var(--ink-4) }
.cd .nav .spacer { flex:1 1 auto }
.cd .nav .go { flex:none; align-self:center; background:var(--accent); color:#fff; border-radius:8px; font-size:13px; font-weight:700; padding:9px 15px; text-decoration:none; border-bottom:0 }
.cd .nav .go:hover { background:var(--accent-2); color:#fff }
@media (max-width:940px) {
  .cd .nav .go, .cd .nav .spacer { display:none }
}
.cd .cols { display:flex; gap:56px; align-items:flex-start; padding-top:40px }
.cd .main { flex:1 1 auto; min-width:0; max-width:720px }
.cd .side { flex:0 0 312px; position:sticky; top:74px }
@media (max-width:1040px) {
  .cd .cols { flex-direction:column; gap:34px }
  /*  align-items must go back to stretch here, and this is the single most
      important line in the mobile stylesheet.

      The desktop rule above sets align-items:flex-start so the sidebar sits at
      the top of the row instead of stretching to the main column's height.
      Correct there. But flex-start means "do not stretch on the CROSS axis",
      and switching to flex-direction:column swaps which axis that is - so the
      same declaration silently stops both children filling the WIDTH and
      makes them shrink-to-fit instead.

      Measured on a 390px iPhone: .main came out 482px wide and the document
      scrolled sideways by 132px, on every course and career page. Not a
      squeezed layout - a page you can swipe off the edge of. */
  .cd .cols { align-items:stretch }
  .cd .main, .cd .side { width:100%; min-width:0; max-width:none }

  .cd .side { position:static; flex:1 1 auto; width:100% }
}
.cd section { padding:0 0 40px; scroll-margin-top:80px }
.cd section + section { border-top:1px solid var(--line-2); padding-top:38px }
.cd .sec-head { display:flex; align-items:flex-start; margin-bottom:16px }
.cd .sec-ico { width:44px; height:44px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--cs,var(--surface-2)); color:var(--c,var(--accent)); box-shadow:var(--sh-1) }
.cd .sec-no { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--c,var(--accent)) }
.cd h2 { font-size:26px; font-weight:800; letter-spacing:-.034em; margin:4px 0 0; line-height:1.2 }
.cd .sec-head p { margin:4px 0 0; font-size:13.5px; color:var(--ink-3); font-weight:500 }
.cd h3 { font-size:17px; font-weight:700; letter-spacing:-.02em; margin:26px 0 8px }
.cd p { margin:0 0 15px }
.cd .lead { font-size:17px; color:var(--ink-2) }
.cd ul.plain { list-style:none; margin:0 0 16px; padding:0 }
.cd ul.plain li { position:relative; padding:11px 0 11px 30px; border-bottom:1px solid var(--line-2) }
.cd ul.plain li:last-child { border-bottom:0 }
.cd ul.plain li::before { content:""; position:absolute; left:6px; top:19px; width:7px; height:7px; border-radius:2px; background:var(--c,var(--accent)); opacity:.55 }
.cd ul.plain b { font-weight:700 }
.cd .note { border-radius:14px; padding:17px 19px; margin:0 0 18px; font-size:14.5px; color:var(--ink-2); border:1px solid var(--line); background:var(--surface); box-shadow:var(--sh-1); display:flex }
.cd .note b { color:var(--ink); font-weight:700 }
.cd .note .ico { width:24px; height:24px; flex:none; color:var(--accent); margin-top:1px }
.cd .note.accent { background:var(--accent-soft); border-color:var(--accent-line) }
.cd .note.warm { background:#fdf6e7; border-color:#eddfc2 }
.cd .note.warm .ico { color:var(--mid) }
.cd .note.hard { background:#fbeeec; border-color:#eed6d2 }
.cd .note.hard .ico { color:var(--bad) }
.cd .tbl { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--sh-1); margin:0 0 18px }
.cd table { width:100%; border-collapse:collapse; font-size:14.5px }
.cd th, .cd td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--line-2); vertical-align:top }
.cd tbody tr:last-child th, .cd tbody tr:last-child td { border-bottom:0 }
.cd tbody tr { transition:background .14s }
.cd tbody tr:hover { background:var(--surface-2) }
.cd thead th { font-size:11px; font-weight:800; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; background:var(--surface-2) }
.cd tbody th { font-weight:700 }
.cd td.n { font-variant-numeric:tabular-nums; white-space:nowrap }
.cd .check { border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--sh-1); overflow:hidden; margin:0 0 18px }
.cd .check label { display:flex; align-items:flex-start; gap:13px; padding:14px 17px; cursor:pointer; border-bottom:1px solid var(--line-2); transition:background .14s }
.cd .check label:hover { background:var(--surface-2) }
.cd .check input { appearance:none; -webkit-appearance:none; width:21px; height:21px; flex:none; margin:1px 0 0; border:2px solid var(--ink-4); border-radius:6px; cursor:pointer; position:relative; transition:all .16s var(--ease) }
.cd .check input:checked { background:var(--accent); border-color:var(--accent) }
.cd .check input:checked::after { content:""; position:absolute; left:5px; top:1px; width:6px; height:11px; border-right:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(40deg) }
.cd .check .t { font-size:14.5px; font-weight:600 }
.cd .check .d { font-size:13px; color:var(--ink-3); margin-top:2px }
.cd .verdict { padding:15px 17px; font-size:14.5px; background:var(--surface-2); font-weight:600 }
.cd .verdict.ok { background:var(--accent-soft); color:var(--accent) }
.cd .verdict.part { background:#fdf6e7; color:var(--mid) }
.cd .calc { border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--sh-1); overflow:hidden; margin:0 0 18px }
.cd .calc-row { padding:15px 17px; border-bottom:1px solid var(--line-2) }
.cd .calc-row .q { font-size:13px; font-weight:700; color:var(--ink-3); letter-spacing:.03em; text-transform:uppercase; margin-bottom:9px }
.cd .seg { display:flex; flex-wrap:wrap; gap:8px }
.cd .seg button { font-family:var(--sans); font-size:13.5px; font-weight:700; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:9px 15px; color:var(--ink-2); transition:all .16s var(--ease) }
.cd .seg button:hover { border-color:var(--ink-4); color:var(--ink) }
.cd .seg button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff }
.cd .calc-out { padding:17px; background:var(--accent-soft); display:flex; align-items:baseline; flex-wrap:wrap }
.cd .calc-out b { font-size:27px; font-weight:800; letter-spacing:-.03em; color:var(--accent); margin-right:11px; font-variant-numeric:tabular-nums }
.cd .calc-out span { font-size:13.5px; color:var(--ink-2) }
.cd .calc-note { padding:12px 17px; font-size:12.5px; color:var(--ink-4); line-height:1.5 }
.cd .road { position:relative; padding-left:38px; margin-bottom:6px }
.cd .road::before { content:""; position:absolute; left:13px; top:8px; bottom:28px; width:2px; background:linear-gradient(var(--c-teal),var(--line)) }
.cd .step { position:relative; padding:0 0 22px }
.cd .step .dot { position:absolute; left:-32px; top:2px; width:26px; height:26px; border-radius:8px; background:var(--surface); border:2px solid var(--c-teal); color:var(--c-teal); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; box-shadow:0 0 0 4px var(--bg) }
.cd .step.opt .dot { border-color:var(--ink-4); color:var(--ink-4) }
.cd .step .when { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.cd .step h4 { margin:3px 0 5px; font-size:16.5px; font-weight:700; letter-spacing:-.02em }
.cd .step p { margin:0; font-size:14.5px; color:var(--ink-2) }
.cd .tag { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:6px; background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line); margin-left:8px; vertical-align:2px }
.cd .tag.req { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line) }
.cd .cards { display:flex; flex-wrap:wrap; gap:12px }
.cd .card { flex:1 1 214px; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:15px 16px; box-shadow:var(--sh-1); transition:transform .18s var(--ease),box-shadow .18s,border-color .18s }
.cd .card:hover { transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--ink-4) }
.cd .card .t { font-size:15px; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center }
.cd .card .t i { width:9px; height:9px; border-radius:3px; background:var(--c); flex:none; margin-right:9px }
.cd .card .d { font-size:13px; color:var(--ink-2); margin-top:5px }
.cd .card .p { font-size:12px; font-weight:700; color:var(--ink-3); margin-top:9px; font-variant-numeric:tabular-nums }
.cd .tabs { display:flex; gap:7px; flex-wrap:wrap; margin:0 0 14px }
.cd .tabs button { font-family:var(--sans); font-size:13.5px; font-weight:700; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:9px 16px; color:var(--ink-2); transition:all .16s var(--ease) }
.cd .tabs button:hover { border-color:var(--ink-4); color:var(--ink) }
.cd .tabs button[aria-selected="true"] { background:var(--c-teal); border-color:var(--c-teal); color:#fff }
.cd .panel[hidden] { display:none }
.cd .box { border:1px solid var(--line); border-radius:14px; background:var(--surface); margin-bottom:14px; box-shadow:var(--sh-1); overflow:hidden }
.cd .box-h { padding:14px 17px; border-bottom:1px solid var(--line-2); font-size:12.5px; font-weight:800; letter-spacing:.03em; display:flex; align-items:center }
.cd .box-h svg { color:var(--ink-4) }
.cd .box-h em { font-style:normal; font-weight:700; color:var(--ink-4); font-size:11.5px; margin-left:auto }
.cd .ring-row { display:flex; align-items:center; padding:17px }
.cd .ring { position:relative; width:72px; height:72px; flex:none; margin-right:16px }
.cd .ring svg { transform:rotate(-90deg) }
.cd .ring .val { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; font-size:21px; font-weight:800; letter-spacing:-.03em; color:var(--mid); font-variant-numeric:tabular-nums }
.cd .ring-txt { font-size:13.5px; color:var(--ink-2); line-height:1.45 }
.cd .ring-txt b { display:block; color:var(--ink); font-weight:800; font-size:14.5px }
.cd .kv { display:flex; justify-content:space-between; gap:12px; padding:10px 17px; border-bottom:1px solid var(--line-2); font-size:13.5px }
.cd .kv:last-child { border-bottom:0 }
.cd .kv span { color:var(--ink-3); flex:none }
.cd .kv b { font-weight:700; text-align:right }
.cd .meter { padding:11px 17px; border-bottom:1px solid var(--line-2) }
.cd .meter:last-child { border-bottom:0 }
.cd .meter-h { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13.5px; margin-bottom:7px }
.cd .meter-h b { font-weight:700 }
.cd .meter-h em { font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent) }
.cd .meter-h em.soft { color:var(--ink-4) }
.cd .track { height:7px; border-radius:99px; background:var(--line-2); overflow:hidden }
.cd .track i { display:block; height:7px; border-radius:99px; background:var(--accent); width:0; transition:width .9s var(--ease) }
.cd .track i.soft { background:var(--ink-4) }
.cd .track i.warn { background:var(--mid) }
.cd .foot-note { padding:12px 17px; font-size:12px; color:var(--ink-4); line-height:1.5 }
.cd .links { list-style:none; margin:0; padding:0 }
.cd .links li { border-bottom:1px solid var(--line-2) }
.cd .links li:last-child { border-bottom:0 }
.cd .links a { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 17px; font-size:13.5px; font-weight:600; text-decoration:none; color:var(--ink); transition:all .14s }
.cd .links a:hover { background:var(--surface-2); padding-left:21px }
.cd .links em { font-style:normal; color:var(--ink-3); font-weight:700; font-variant-numeric:tabular-nums }
.cd .tags { display:flex; flex-wrap:wrap; gap:7px; padding:15px 17px }
.cd .tags span { font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:7px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2) }
.cd .faq { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--sh-1) }
.cd .faq details { border-top:1px solid var(--line-2) }
.cd .faq details:first-child { border-top:0 }
.cd .faq summary { cursor:pointer; padding:16px 50px 16px 18px; font-weight:700; font-size:15.5px; letter-spacing:-.018em; position:relative; list-style:none }
.cd .faq summary::-webkit-details-marker { display:none }
.cd .faq summary::after { content:""; position:absolute; right:20px; top:23px; width:9px; height:9px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform .2s var(--ease) }
.cd .faq details[open] summary { color:var(--accent) }
.cd .faq details[open] summary::after { transform:rotate(-135deg) }
.cd .faq summary:hover { background:var(--surface-2) }
.cd .faq .a { padding:0 18px 18px; color:var(--ink-2); font-size:14.5px }
.cd .faq .a p:last-child { margin-bottom:0 }
.cd .rel { display:flex; flex-wrap:wrap; gap:13px }
.cd .rel a { flex:1 1 210px; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:16px 17px; text-decoration:none; color:var(--ink); box-shadow:var(--sh-1); transition:transform .18s var(--ease),box-shadow .18s,border-color .18s }
.cd .rel a:hover { transform:translateY(-3px); border-color:var(--ink-4); box-shadow:var(--sh-2) }
.cd .rel .t { font-size:15.5px; font-weight:700; letter-spacing:-.02em }
.cd .rel .m { font-size:13px; color:var(--ink-3); margin-top:4px }
.cd .rel .s { font-size:12.5px; font-weight:700; color:var(--ink-3); margin-top:12px; font-variant-numeric:tabular-nums }
.cd .next { position:relative; overflow:hidden; color:#fff; border-radius:var(--r); padding:30px 32px; margin:10px 0 0; background:linear-gradient(150deg,var(--hero-a),var(--hero-b) 72%) }
.cd .next::before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; opacity:.5; background-image:var(--texture) }
.cd .next > * { position:relative }
.cd .next .eyebrow { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.56) }
.cd .next h2 { color:#fff; margin:11px 0 7px; font-size:25px }
.cd .next p { color:rgba(255,255,255,.7); margin:0 0 20px; max-width:52ch; font-size:15px }
.cd .next-row { display:flex; gap:11px; flex-wrap:wrap }
.cd .next-row a { flex:1 1 200px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.2); border-radius:11px; padding:15px 17px; text-decoration:none; color:#fff; transition:all .16s var(--ease) }
.cd .next-row a:hover { background:rgba(255,255,255,.19); transform:translateY(-2px) }
.cd .next-row .t { font-size:14.5px; font-weight:700 }
.cd .next-row .m { font-size:12.5px; color:rgba(255,255,255,.64); margin-top:3px }
.cd footer.foot { margin-top:32px; border-top:1px solid var(--line); background:var(--surface-2); padding:26px 0 56px; font-size:13.5px; color:var(--ink-3) }
.cd footer.foot b { color:var(--ink-2); font-weight:700 }
.cd .rv { opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease),transform .5s var(--ease) }
.cd .rv.in { opacity:1; transform:none }
@media (max-width:940px) {
  .cd .hero-grid { flex-direction:column; gap:40px; align-items:flex-start }

  /*  The stacking fix belongs HERE, at the breakpoint where the hero actually
      stacks - not at 560 where it was first written.

      .hero-copy carries flex-grow:1 so it takes the spare WIDTH on desktop,
      where the flex axis is horizontal. Turning the container to
      flex-direction:column makes that same declaration take spare HEIGHT
      instead, so the text column silently stretches past its own last child
      and shoves the picture down by ~25px. That happens from 940px down, and
      putting the cure at 560 left every tablet with the symptom.

      The last block in the column also keeps its own bottom margin - on the
      career page that is the .stats row at 15.5px - which is fine between
      siblings and dead space at the end. */
  .cd .hero-grid > * { flex:0 0 auto }
  .cd .hero-copy > :last-child { margin-bottom:0 }

  .cd .shots { flex:1 1 auto; width:100%; max-width:390px; order:2 }
  .cd .art { max-height:310px }
  .cd .stamp { right:2px; bottom:-12px }
  .cd .hero-in { padding-bottom:44px }
}
@media (max-width:760px) {
  .cd .wrap { padding:0 18px }
  .cd h1 { font-size:32px }
  .cd .sub { font-size:16px }
  .cd .ribbon div { flex:1 1 50%; border-left:0; border-top:1px solid var(--line-2) }
  .cd .ribbon div:first-child, .cd .ribbon div:nth-child(2) { border-top:0 }
  .cd .cta .btn { flex:1 1 100%; justify-content:center }
  .cd .sec-ico { width:38px; height:38px; border-radius:10px }
  .cd h2 { font-size:22px }
  .cd table { table-layout:fixed }
  .cd th, .cd td { padding:11px 12px; font-size:13.5px }
  .cd td.n { white-space:normal }
  .cd thead th { font-size:10.5px }
  .cd section { scroll-margin-top:66px }
  .cd .next { padding:24px 20px }
  .cd .calc-out b { font-size:23px }
}
@media (prefers-reduced-motion:reduce) {
  .cd * { transition:none!important; animation:none!important }
  .cd .rv { opacity:1; transform:none }
}
@media print {
  .cd .prog, .cd .nav, .cd .cta, .cd .side, .cd .crumbs, .cd .next { display:none }
  .cd .cols { display:block }
  .cd .main { max-width:none }
  .cd .hero { background:#fff; color:#000 }
  .cd .hero::before { display:none }
  .cd h1, .cd .sub b { color:#000 }
  .cd .sub { color:#333 }
}


/* ======================================================================================
   Site integration. Everything below overrides the design where it assumed it was alone
   on the page - kept separate rather than edited into the rules above, so a future
   re-import of the design does not silently lose them.
   ====================================================================================== */

.cd {
  /* Height of the site header. The nav docks below it and anchors clear both. */
  --cd-head: 96px;
  --cd-nav: 52px;
}

/* The header collapses on scroll; :has lets the nav follow it without any script of its
   own. Browsers without :has simply keep the taller offset, which is the safe direction
   to be wrong in - a gap looks fine, an overlap does not. */
body:has(.icg-top.is-compact) .cd { --cd-head: 60px; }

.cd .nav {
  top: var(--cd-head);
  /* Below the site header's 50, so it slides under rather than over. */
  z-index: 40;
}

.cd section { scroll-margin-top: calc(var(--cd-head) + var(--cd-nav) + 12px); }
.cd .side { top: calc(var(--cd-head) + var(--cd-nav) + 16px); }

@media (max-width: 760px) {
  .cd section { scroll-margin-top: calc(var(--cd-head) + var(--cd-nav)); }
}

/* The design shipped its own progress bar and footer. The site already has both, so the
   elements are never rendered; these rules exist only so a stray copy cannot appear. */
.cd .prog,
.cd footer.foot { display: none; }

/* The design turned smooth scrolling off for reduced-motion users via an html rule, which
   the scoping pass necessarily dropped. Restored here, unscoped, because scroll-behavior
   only has any effect on the scrolling element itself. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================================
   Hero artwork, resized for the generated card.

   The design's slot was 388px wide because it held a small spot illustration. The
   generated card is a drawn scene of four to six objects and it is the only picture in
   the hero, so it takes the right-hand half instead. flex-basis is a share of the row
   with a floor and a ceiling: it holds half on a wide screen, and it stops before it
   starts squeezing the headline on a laptop.

   .cut is the transparent variant. The generated card has its background keyed out, so
   it needs no plate and no border - just the cut-out standing on the hero gradient. The
   older media-library heroes are rectangular photographs and keep the plain .art-wrap.
   ========================================================================== */

.cd .shots { flex: 0 1 46%; min-width: 300px; max-width: 560px; }
.cd .art { max-height: 460px; }

/* The box is reserved here rather than by width/height attributes on the img, because the
   card is cropped to its subject and so has no fixed ratio to declare. min-height keeps the
   hero the same height before and after the picture arrives, which is what stops the layout
   shifting under the reader. Matched to the .art max-height at each breakpoint. */
.cd .art-wrap.cut { display: block; min-height: 380px; }
.cd .art-wrap.cut .art {
  /* 480 -> 380. The picture is what sets the hero's height: the copy column measured
     366px against a 480px image, and align-items:center split the 114px difference into
     57px of dead space above the badges and 57px below the button. Bringing the art close
     to the height of the words it sits beside removes most of that without touching the
     alignment, which is what makes the two columns look deliberate. The card is generated
     at 1024px wide, so it is still downscaled rather than stretched. */
  max-height: 380px;
  /* Two shadows rather than one: a tight dark edge so the line work separates from the
     gradient behind it, and a wide soft one so the group reads as sitting on the page
     rather than floating above it. */
  filter:
    drop-shadow(0 2px 3px rgba(6, 26, 46, .28))
    drop-shadow(0 30px 46px rgba(0, 0, 0, .40));
}

@media (max-width: 1180px) {
  .cd .shots { flex: 0 1 42%; }
  .cd .art,
  /* Below the desktop 380, not above it. This breakpoint used to reduce a 480px card to
     400; now that the base is 380 the same number would make the picture GROW as the window
     narrows, which is backwards. */
  .cd .art-wrap.cut .art { max-height: 360px; }
  .cd .art-wrap.cut { min-height:360px }
}

@media (max-width: 940px) {
  /* Stacked. The card stays large: on a phone it is the fastest answer the page has to
     "what is this course actually about", and it costs nothing to scroll past. */
  .cd .shots { flex: 1 1 auto; width: 100%; max-width: 420px; margin-inline: auto; order: 2; }
  .cd .art,
  .cd .art-wrap.cut .art { max-height: 340px; }
  .cd .art-wrap.cut { min-height:340px }
}

/* ============================================================================
   The banner above the footer.

   Unscoped on purpose: the footer sits outside .cd, and this stylesheet is only loaded
   on the course page, which is the only page that supplies a footer image. It reuses the
   site's own footer-visual frame for width, padding and rounding - the single difference
   is that this image is a 16:9 banner where the site artwork is not, so the ratio is
   stated to keep the page from reflowing as it loads.
   ========================================================================== */

/* Aligned to the content column, and never cropped.

   Three things were wanted here and only two of them can be true at once: full width,
   short, and the whole picture. The banner is a fixed 16:9 file, so at the content width
   its height is decided for you - about 645px at a 1200px wrap. Cropping was the way to
   buy height back, and it cost the top of the subject's head.

   So the crop is gone. The whole frame shows, edge to edge with the section above it, and
   the height is whatever 16:9 gives. That is still well down from where this started: the
   first version ran the full viewport width and came to nearly 800px.

   If you do want it inset and shorter, the lever is max-width below - 1000px brings it to
   about 560px tall, at the cost of a visible margin against the content above. Height and
   crop cannot both be free.

   Search is unaffected either way. The file is the full 1600x900 - that is what the image
   sitemap lists, what og:image points at, and what Google Images shows. */

.footer-visual-page .footer-visual-frame {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 26px;
}

.footer-visual-page img {
  display: block;
  width: 100%;
  height: auto;

  /* No aspect-ratio here, deliberately.
     It used to be hardcoded to 1600/980 with a comment saying "if HeroHeight changes, this
     must change with them" - a coupling maintained by memory, across two files, in a
     different language. It broke the moment the banner moved to 16:9, and it would have
     broken silently: every new 900-tall banner squeezed into a 980-tall box.
     The img now carries real width and height attributes from the image options, so the
     browser derives the ratio per file. That handles a library containing both 980 and 900
     banners at once, which is exactly what a partial regeneration leaves behind. */
  border-radius: 16px;
}

@media (max-width: 760px) {
  .footer-visual-page .footer-visual-frame { padding-inline: 18px; }
}


/* ======================================================================================
   Phones: wide tables scroll instead of being crushed.

   Both designs switch to table-layout:fixed below 760px. That does stop a table pushing
   the page sideways - but it does it by forcing every column into an equal share of a
   360px screen, and a four-column eligibility table then gives "Physics, Chemistry,
   Mathematics" about 80 pixels to live in, which wraps to eight lines.

   Scrolling the table is the honest answer: columns keep a readable width, the reader
   swipes the table, and the PAGE still never moves sideways - which is the thing that
   actually breaks a mobile layout.

   overflow-x rather than overflow:hidden, so the rounded corners survive.
   ====================================================================================== */

@media (max-width: 760px) {
  .cd .tbl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Beats the design's table-layout:fixed on specificity and on order, so the columns
     size to their content again and there is something to scroll. */
  .cd .tbl table {
    table-layout: auto;
    min-width: 30rem;
  }
}


/* ============================================================================
   Phones. Everything above stops at 760px, which is a tablet - a 390px iPhone
   was getting rules written for a screen twice its width.

   Measured on the live page at 390px before writing any of this, so each rule
   below answers something real rather than something imagined.
   ========================================================================== */
@media (max-width:560px) {

  /*  The image sat 63px below the last button. Two separate causes, and the
      second one is the interesting half.

      The obvious half is the 40px flex gap: right for two columns side by
      side on a desktop, just a hole to scroll past once they stack.

      The other 25px was .hero-copy growing. It carries flex-grow:1 so that it
      takes the spare WIDTH on desktop, where the row axis is horizontal. Turn
      the container to flex-direction:column and that same declaration starts
      taking spare HEIGHT instead - so the text column silently stretched 25px
      past its own last child, and the picture was pushed down by it.

      flex:0 0 auto stops the growing. Measured after: an exact 16px gap, and
      the hero down from 1028px to 875px on a 390px screen. */
  .cd .hero-grid { gap:16px }


  /*  Micro-type floor.

      The eyebrows, stat labels and column headings are 10.5px. That reads as
      deliberate restraint on a desktop monitor and as an accessibility failure
      on a phone: Google's mobile usability check flags anything under 12px as
      "text too small to read", and these are the labels that tell a reader
      what the number beside them MEANS. Nudged to 11.5px and given back some
      letter-spacing, which is what actually makes small caps legible. */
  .cd .kind,
  .cd .sec-no,
  .cd .stamp span,
  .cd .box-h em,
  .cd .tag,
  .cd thead th,
  .cd .meter-h em,
  .cd .step .when,
  .cd .next .eyebrow { font-size:11.5px }
  .cd .kind { letter-spacing:.1em; padding:7px 11px }

  /*  Breadcrumbs were 17px tall - three links a thumb cannot reliably hit,
      sitting side by side. Padding rather than a height, so the text stays
      where it is and only the target grows. */
  .cd .crumbs { font-size:12.5px; line-height:1.5 }
  .cd .crumbs a { display:inline-block; padding:4px 0; min-height:24px }
  .cd .crumbs span { padding:0 5px }

  /*  The hero was 1028px tall on an 844px screen, so the entire first view was
      headline and picture and a reader had to scroll before the page said
      anything. Tightening the padding and the art gets the first section above
      the fold on a normal phone. */
  .cd .hero { padding-bottom:26px }
  .cd .hero h1 { font-size:clamp(25px,7.4vw,31px); line-height:1.16 }
  .cd .art,
  .cd .art-wrap.cut .art { max-height:250px }
  .cd .art-wrap.cut { min-height:250px }

  /*  Tables keep the horizontal scroller the 760px block already gives them -
      a four-column table cannot become 354px wide and stay readable. What is
      added here is fitting one more column in before the scroll starts:
      smaller type and tighter cell padding buy roughly 60px, which on these
      tables is the difference between swiping and not.

      No fade mask on the scroller, tempting as it is: .tbl is a bordered card
      with a 14px radius, and a mask would fade out its own right border and
      corner. A hint that looks like a rendering fault is worse than no hint. */
  .cd table { font-size:13.5px }
  .cd td, .cd th { padding-left:11px; padding-right:11px }

  /*  Anything that was a row of equal columns becomes one column. Two 160px
      cards side by side is worse than one readable card. */
  .cd .ribbon { gap:10px }
  .cd .ribbon dt { font-size:11.5px }
}

/* Small phones - 360px and the 320px iPhone SE still in the logs. */
@media (max-width:380px) {
  .cd .hero h1 { font-size:23.5px }
  .cd .art,
  .cd .art-wrap.cut .art { max-height:210px }
  .cd .art-wrap.cut { min-height:210px }
  .cd .crumbs { font-size:12px }
  .cd table { font-size:13px }
}

/* ========================================================================
   THE PAPER SHOWS THROUGH
   ========================================================================

   The same one-line fix already applied to career-detail.css, for the same
   reason.

   The notebook grid and the red margin rule are not new here. They have
   always been on the page - icg-theme.css puts them on body::before and
   body::after, fixed, at z-index:-1, so every page in the site sits on
   them. The course page could not see them because .cd painted
   background:var(--bg) across the whole page, and an opaque box at z-index
   0 covers anything at -1. The paper, the grid and the rule were all there,
   behind an off-white sheet.

   Nothing is redrawn here. A second copy of the grid in this file would be
   a second place to change it and a guarantee that it and the career page
   would eventually disagree.

   What changes visually: the page ground goes from #f8f9fa (cool grey) to
   the site's --paper #fbfaf7 (warm off-white), which is what the home page
   and the career pages already stand on. White cards and tinted panels are
   unaffected - they paint their own backgrounds and simply sit on the grid.
   -------------------------------------------------------------------- */

.cd { background: transparent; }

/* The roadmap dot's halo punches the rail out from behind it, so it has to
   match whatever the dot is standing on. That used to be --bg; it is the
   paper now. Literal fallback because --paper comes from the theme, and
   this file should still look right if it is ever loaded on its own. */
.cd .step .dot { box-shadow: 0 0 0 4px var(--paper, #fbfaf7); }