/* ==========================================================================
   MyCEcredit — mock-site stylesheet
   Rough-draft rebuild, 2026-08-29. Design system: "Ledger".

   Identity summary (full rationale in docs/DESIGN-SYSTEM-2026-08-29.md):
     - Palette : aubergine chrome + plum action + iris / cerise / stone lanes,
                 on warm plum-tinted neutrals. Shares no primary with the
                 Sedation Certification system (navy #0B2545 / teal #0E7C6B /
                 gold #C9882A).
     - Type    : Archivo (display) + Source Sans 3 (text) + IBM Plex Mono
                 (all figures). Sedation uses Inter + Merriweather/Lora.
     - Feel    : squared "record card" geometry, hairline borders instead of
                 soft shadows, colored left rules, left-aligned section heads,
                 a LIGHT hero. Sedation is round, shadowed, centered, dark-hero.

   Font loading (paste in <head> of every page, before this file):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap">

   Every color below was contrast-checked. No value used for body text
   falls under 4.5:1 on its own background; no chip pairing falls under 5.2:1.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---- Brand: direction A "Clinical" (Shade, 2026-09-29) — navy chrome, teal action.
     Token NAMES are the original ones (aubergine = chrome, plum = action) so no component rule
     moved; the VALUES are docs/THEME-DIRECTION-A-2026-09-29.md. ------------------------- */
  --c-aubergine:      #0B2545;  /* header, footer, dark bands (navy) */
  --c-aubergine-deep: #071A33;  /* deepest band / footer legal strip           */
  --c-aubergine-soft: #163A66;  /* dark-band hover / secondary dark surface     */
  --c-plum:           #0E7C6B;  /* PRIMARY action: buttons, links, focus (teal) 5.3:1 */
  --c-plum-hover:     #0A6155;  /* 10.36:1 */
  --c-plum-active:    #084C43;  /* 12.88:1 */
  --c-plum-200:       #B9E0D8;  /* borders on tinted panels */
  --c-plum-100:       #DDF0EB;
  --c-plum-50:        #EEF7F4;

  /* ---- Lanes: wayfinding only. NEVER used to signal state. -------------- */
  --c-crna:        #2F4B8F;  /* iris    9.39:1 on white */
  --c-crna-tint:   #E9EEF9;
  --c-crna-line:   #C1CDEA;
  --c-rn:          #B02A5B;  /* cerise  6.55:1 on white */
  --c-rn-tint:     #FBE9EF;
  --c-rn-line:     #F1C1D2;
  --c-ngh:         #5B5560;  /* stone   7.21:1 on white — deliberately achromatic */
  --c-ngh-tint:    #F2F1F3;
  --c-ngh-line:    #DCD8DE;

  /* ---- Status: RESERVED. Only ever for state, never decoration. --------- */
  --c-ok:        #276749;  --c-ok-bg:   #E7F2EC;  --c-ok-line:   #B8DCC8;
  --c-warn:      #8A5A00;  --c-warn-bg: #FCF1DA;  --c-warn-line: #EBD59D;
  --c-bad:       #B3261E;  --c-bad-bg:  #FBE9E7;  --c-bad-line:  #F1C2BC;
  /* "Info" has no hue of its own on purpose — it borrows the neutral ramp,
     which keeps the three status hues unambiguous at a glance. */

  /* ---- Ink & surfaces: cool, navy-tinted neutrals ----------------------- */
  --c-ink:        #0F1B2D;  /* headings + body            16.93:1 */
  --c-ink-soft:   #3F4B5C;  /* secondary text              9.68:1 */
  --c-ink-mute:   #66717F;  /* muted / meta                5.59:1 */
  --c-line-strong:#C3CAD3;  /* emphasised hairline, form borders */
  --c-line:       #DDE2E8;  /* default hairline */
  --c-surface:    #FFFFFF;
  --c-surface-2:  #F4F6F8;  /* page ground / alternating band */
  --c-surface-3:  #EBEFF3;  /* inset panels, table heads, placeholders */

  /* ---- On-dark ink (for the navy bands) --------------------------------- */
  --c-on-dark:        #F2F5F9;
  --c-on-dark-soft:   #C8D3E0;
  --c-on-dark-mute:   #9FB0C2;
  --c-on-dark-line:   rgba(255,255,255,.16);
  --c-on-dark-accent: #7FD1C1;

  /* ---- Semantic aliases (what components actually reference) ------------ */
  --bg:            var(--c-surface-2);
  --bg-card:       var(--c-surface);
  --bg-inset:      var(--c-surface-3);
  --text:          var(--c-ink);
  --text-soft:     var(--c-ink-soft);
  --text-mute:     var(--c-ink-mute);
  --border:        var(--c-line);
  --border-strong: var(--c-line-strong);
  --accent:        var(--c-plum);
  --accent-hover:  var(--c-plum-hover);
  --accent-tint:   var(--c-plum-50);
  --chrome:        var(--c-aubergine);
  --chrome-deep:   var(--c-aubergine-deep);
  --focus:         var(--c-plum);
  --mark-tick:     var(--c-plum);

  /* ---- Type ------------------------------------------------------------- */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-text:    'Source Sans 3', 'Source Sans Pro', -apple-system,
                  BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-num:     'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono',
                  Menlo, Consolas, 'Liberation Mono', monospace;

  /* Fluid scale, 390px → 1280px. Display sizes are tighter and heavier than
     the reference system; body is a notch larger for on-deadline scanning. */
  --t-eyebrow: 0.8125rem;                                 /* 13px, tracked   */
  --t-micro:   0.875rem;                                  /* 14px            */
  --t-small:   0.9375rem;                                 /* 15px            */
  --t-body:    1.1875rem;                                 /* 19px (2026-09-29: one step up, "make the characters larger") */
  --t-lead:    clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
  --t-h4:      clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
  --t-h3:      clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem);
  --t-h2:      clamp(1.75rem, 1.45rem + 1.1vw, 2.5rem);
  --t-h1:      clamp(2.25rem, 1.7rem + 2vw, 3.5rem);
  --t-display: clamp(2.625rem, 1.85rem + 2.9vw, 4.375rem);

  --lh-tight: 1.12;
  --lh-head:  1.22;
  --lh-body:  1.6;
  --lh-loose: 1.7;
  --track-eyebrow: .1em;
  --track-head: -0.015em;

  /* ---- Space (4px base) -------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px; --s-11: 80px; --s-12: 104px;
  --band-y: clamp(48px, 6vw, 88px);

  /* ---- Geometry: squared. Deliberately tighter than the reference. ------- */
  --r-xs: 2px;  --r-sm: 3px;  --r-md: 5px;  --r-lg: 8px;  --r-xl: 12px;
  --rule: 3px;                 /* the signature colored left rule */
  --hair: 1px solid var(--border);
  --hair-strong: 1px solid var(--border-strong);

  /* ---- Elevation: borders do the work. Shadow only for things that float. */
  --shadow-pop:  0 6px 22px rgba(11, 37, 69, .13), 0 1px 3px rgba(11, 37, 69, .10);
  --shadow-bar:  0 1px 0 rgba(11, 37, 69, .10);

  /* ---- Motion ------------------------------------------------------------ */
  --dur: 120ms;
  --ease: cubic-bezier(.2, .6, .3, 1);

  /* ---- Layout ------------------------------------------------------------ */
  --w-page:  1200px;
  --w-wide:  1360px;
  --w-prose: 68ch;
  --gutter:  clamp(16px, 4vw, 40px);
  --header-h: 78px;   /* 2026-09-29: "make the header larger" (was 66) */
}

/* Opt-in dark theme only — a review draft opened from the filesystem must
   render light by default, so prefers-color-scheme is deliberately not used.
   Add data-theme="dark" to <html> to preview. */
[data-theme="dark"] {
  --c-surface:   #1F1824;
  --c-surface-2: #17111A;
  --c-surface-3: #271F2D;
  --c-ink:       #F2EDF5;
  --c-ink-soft:  #C7BDCE;
  --c-ink-mute:  #9C90A5;
  --c-line:      #3B3243;
  --c-line-strong: #4E4457;

  --bg:            var(--c-surface-2);
  --bg-card:       var(--c-surface);
  --bg-inset:      var(--c-surface-3);
  --accent:        #C892DE;
  --accent-hover:  #DBB0EC;
  --accent-tint:   #2B1F35;
  --chrome:        #241A2B;
  --chrome-deep:   #17111A;
  --focus:         #C892DE;
  --mark-tick:     #C892DE;

  --c-crna: #A99BF0;  --c-crna-tint: #26204A;  --c-crna-line: #3C3470;
  --c-rn:   #F396BE;  --c-rn-tint:   #3A1A2B;  --c-rn-line:   #5C2B41;
  --c-ngh:  #BDB3C3;  --c-ngh-tint:  #2C262F;  --c-ngh-line:  #443C48;

  --c-ok:   #6FD09C;  --c-ok-bg:   #152A20;  --c-ok-line:   #23492F;
  --c-warn: #E7B95E;  --c-warn-bg: #2E2312;  --c-warn-line: #4E3B18;
  --c-bad:  #F2918A;  --c-bad-bg:  #331815;  --c-bad-line:  #56271F;

  --c-plum-50:  #2B1F35;
  --c-plum-100: #35263F;
  --c-plum-200: #4A3557;

  --shadow-pop: 0 8px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
  --shadow-bar: 0 1px 0 rgba(0,0,0,.5);
}


/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
/* Not on html itself: a smooth scroll on load is what links to a section of another page failed on (2026-11-02). */
html:focus-within { scroll-behavior: smooth; }

body {
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
h5, h6 { font-size: var(--t-body); }

p, li, dd, dt, figcaption { text-wrap: pretty; }
p + p { margin-top: var(--s-4); }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }

strong, b { font-weight: 700; }
small { font-size: var(--t-small); }
hr { border: 0; border-top: var(--hair); margin: var(--s-7) 0; }

ul, ol { padding-left: 1.15em; }
ul.plain, ol.plain, nav ul { list-style: none; padding-left: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* One focus treatment, everywhere, always visible. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--c-plum-100); color: var(--c-ink); }

@media (prefers-reduced-motion: reduce) {
  html, html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.wrap  { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide  { max-width: var(--w-wide); }
.wrap--prose { max-width: var(--w-prose); }
.wrap--faq { max-width: 900px; }

.band { padding-block: var(--band-y); }
.band--tight { padding-block: clamp(32px, 4vw, 56px); }
.band--alt   { background: var(--bg-inset); }
.band--paper { background: var(--bg-card); }
.band--dark  { background: var(--chrome); color: var(--c-on-dark); }
.band--dark :is(h1,h2,h3,h4) { color: var(--c-on-dark); }
.band--dark p { color: var(--c-on-dark-soft); }
.band--dark a { color: var(--c-on-dark-accent); }

/* Section head: eyebrow + rule + LEFT-aligned title. The reference system
   centers its section titles; this one does not. */
.sec-head { margin-bottom: var(--s-7); max-width: 62ch; }
.sec-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.eyebrow::before {
  content: ""; width: 22px; height: var(--rule);
  background: currentColor; border-radius: var(--r-xs);
}
.sec-head--center .eyebrow::before { display: none; }
.band--dark .eyebrow { color: var(--c-on-dark-accent); }

.sec-head p { margin-top: var(--s-3); font-size: var(--t-lead); color: var(--text-soft); }

/* Grids */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr)); }
/* Content + rail (course page, cart, checkout) */
.grid--rail { grid-template-columns: minmax(0, 1fr) 356px; gap: var(--s-8); align-items: start; }

@media (max-width: 1020px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--rail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.stack > * + * { margin-top: var(--s-4); }
.stack--lg > * + * { margin-top: var(--s-6); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }


/* ==========================================================================
   4. UTILITIES
   ========================================================================== */

.num {
  font-family: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.01em;
}
.lead      { font-size: var(--t-lead); color: var(--text-soft); line-height: var(--lh-loose); }
.muted     { color: var(--text-mute); }
.soft      { color: var(--text-soft); }
.small     { font-size: var(--t-small); }
.micro     { font-size: var(--t-micro); }
.center    { text-align: center; }
.nowrap    { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
.full { width: 100%; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-3); top: var(--s-3);
  transform: translateY(-200%);
  z-index: 200;
  background: var(--c-surface); color: var(--accent);
  border: 2px solid var(--accent); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-5); font-weight: 700; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* Lane theming hook: put data-lane on any container and its children pick up
   the lane color without extra classes. */
[data-lane="crna"] { --lane: var(--c-crna); --lane-tint: var(--c-crna-tint); --lane-line: var(--c-crna-line); }
[data-lane="rn"]   { --lane: var(--c-rn);   --lane-tint: var(--c-rn-tint);   --lane-line: var(--c-rn-line); }
[data-lane="ngh"]  { --lane: var(--c-ngh);  --lane-tint: var(--c-ngh-tint);  --lane-line: var(--c-ngh-line); }
:root { --lane: var(--accent); --lane-tint: var(--accent-tint); --lane-line: var(--c-plum-200); }


/* ==========================================================================
   5. HEADER / NAV
   ========================================================================== */

.utility-bar {
  background: var(--chrome-deep);
  color: var(--c-on-dark-soft);
  font-size: var(--t-micro);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.utility-bar__inner {
  max-width: var(--w-wide); margin-inline: auto; padding: var(--s-2) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-2) var(--s-5);
}
.utility-bar__msg { color: var(--c-on-dark-mute); }
.utility-bar__links { display: flex; gap: var(--s-5); list-style: none; padding: 0; }
.utility-bar__links a { color: var(--c-on-dark-soft); text-decoration: none; }
.utility-bar__links a:hover { color: var(--c-on-dark); text-decoration: underline; }
@media (max-width: 640px) { .utility-bar__msg { display: none; } }

/* Not sticky: the theme wraps this in a template part, so it scrolls away on the site. The mock matches. */
.site-header {
  position: relative; z-index: 100;
  background: var(--chrome);
  color: var(--c-on-dark);
  box-shadow: var(--shadow-bar);
}
.site-header__inner {
  max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--gutter);
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-6);
}

/* --- Wordmark ------------------------------------------------------------ */
.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: var(--c-on-dark); text-decoration: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1;
  padding-block: var(--s-3);
  flex: 0 0 auto;
}
.brand__mark { --mark-tick: var(--c-on-dark-accent); display: block; color: currentColor; }
.brand__mark svg { width: 36px; height: 36px; }
.mark__frame { stroke: currentColor; }
.mark__tick  { stroke: var(--mark-tick); }
.brand__word-accent { color: var(--c-on-dark-accent); }
.brand:hover .brand__word-accent { color: var(--c-on-dark); }
.brand--footer { font-size: 1.5rem; }
.brand--ink { color: var(--c-ink); --mark-tick: var(--accent); }
.brand--ink .brand__word-accent { color: var(--accent); }

/* --- Primary nav (CSS-only, <details>-driven; no JS anywhere) ------------ */
.nav { flex: 1 1 auto; min-width: 0; }
.nav > summary { list-style: none; }
.nav > summary::-webkit-details-marker { display: none; }

.nav__toggle {
  display: none;
  margin-left: auto;
  align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-on-dark-line); border-radius: var(--r-md);
  color: var(--c-on-dark);
  font-family: var(--font-display); font-size: var(--t-small); font-weight: 600;
  cursor: pointer;
}
.nav__toggle-bars { display: grid; gap: 3px; }
.nav__toggle-bars i { display: block; width: 16px; height: 2px; background: currentColor; }

.nav__panel {
  display: flex; align-items: center; gap: var(--s-6);
  width: 100%;
}
.nav__list {
  display: flex; align-items: center; gap: var(--s-2);
  list-style: none; padding: 0; margin: 0;
  margin-right: auto;
}
.nav__link, .menu__label {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  color: var(--c-on-dark-soft); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-small);
  letter-spacing: .005em;
  border-bottom: var(--rule) solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.nav__link:hover, .menu__label:hover { color: var(--c-on-dark); }
.nav__link[aria-current="page"] {
  color: var(--c-on-dark);
  border-bottom-color: var(--c-on-dark-accent);
}

/* Dropdown */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__label::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.menu[open] > summary .menu__label::after { transform: translateY(1px) rotate(225deg); }
.menu[open] > summary .menu__label { color: var(--c-on-dark); border-bottom-color: var(--c-on-dark-accent); }

.menu__panel {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 302px;
  background: var(--bg-card);
  border: var(--hair); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  padding: var(--s-3);
  z-index: 110;
}
.menu__item {
  display: grid; grid-template-columns: var(--rule) 1fr; gap: var(--s-4);
  align-items: stretch;
  padding: 0; border-radius: var(--r-md);
  text-decoration: none; color: var(--text);
  transition: background var(--dur) var(--ease);
}
.menu__item + .menu__item { margin-top: 2px; }
.menu__item::before {
  content: ""; display: block; border-radius: var(--r-xs);
  background: var(--lane); opacity: .35;
  transition: opacity var(--dur) var(--ease);
}
.menu__item:hover { background: var(--lane-tint); color: var(--text); }
.menu__item:hover::before { opacity: 1; }
.menu__item-body { padding: var(--s-3) var(--s-3) var(--s-3) 0; }
.menu__item-title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-small); }
.menu__item-note  { display: block; font-size: var(--t-micro); color: var(--text-mute); margin-top: 2px; }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
/* "Sign in" sits in the actions cluster, not the link list, so it must not
   pick up the list's active-underline geometry. */
.nav__link--signin { padding-inline: var(--s-3); border-bottom-color: transparent; }
.nav__cart {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  color: var(--c-on-dark-soft); text-decoration: none;
  font-family: var(--font-display); font-size: var(--t-small); font-weight: 600;
  border: 1px solid var(--c-on-dark-line); border-radius: var(--r-md);
}
.nav__cart:hover { color: var(--c-on-dark); border-color: var(--c-on-dark-accent); }
.nav__cart-count {
  font-family: var(--font-num); font-size: var(--t-micro); font-weight: 600;
  min-width: 20px; padding: 0 5px; height: 20px;
  display: inline-grid; place-items: center;
  background: var(--c-on-dark-accent); color: var(--c-aubergine-deep);
  border-radius: var(--r-sm);
}

/* The cart stays in the phone header, outside the Menu. mcc_header_cart_count fills both counts. */
.nav__cart--bar { display: none; }

/* Mobile: the <details> becomes a real disclosure. The header inner switches
   to block flow so the toggle can be anchored to the wordmark row while the
   panel expands beneath it. */
@media (max-width: 900px) {
  .site-header__inner { display: block; position: relative; padding-block: 0; min-height: 0; }
  .site-header__inner > .brand { height: 64px; padding-block: 0; }
  .nav { display: block; }
  .nav__toggle {
    display: inline-flex;
    position: absolute; top: 9px; right: var(--gutter);
    height: 40px; margin-left: 0;
  }
  .nav[open] .nav__panel { display: block; }
  .nav:not([open]) .nav__panel { display: none; }
  .nav__panel {
    padding: var(--s-3) 0 var(--s-5);
    border-top: 1px solid var(--c-on-dark-line);
    margin-top: var(--s-2);
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav__item, .nav__item > .menu, .nav__item > .menu > summary { display: block; width: 100%; }
  .nav__link, .menu__label {
    display: flex; width: 100%;
    padding: var(--s-3) var(--s-3);
    font-size: var(--t-body);
    border-bottom: 1px solid var(--c-on-dark-line);
    border-left: var(--rule) solid transparent;
    justify-content: space-between;
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--c-on-dark-line); border-left-color: var(--c-on-dark-accent); }
  .menu { position: static; }
  .menu__panel {
    position: static; min-width: 0; margin: var(--s-2) 0 var(--s-3);
    box-shadow: none; border-radius: var(--r-md);
  }
  .nav__actions { margin-top: var(--s-4); flex-wrap: wrap; }
  .nav__actions .btn { flex: 1 1 100%; justify-content: center; order: 3; }
  .nav__link--signin {
    width: auto; flex: 0 0 auto; order: 1;
    border-bottom: 0; border-left: 0; padding-left: 0; padding-block: 0;
    justify-content: flex-start; font-size: var(--t-small);
  }
  .nav__panel .nav__cart { display: none; }
  .nav__cart--bar {
    display: inline-flex;
    position: absolute; top: 9px; right: calc(var(--gutter) + 96px);
    height: 40px; padding-inline: var(--s-1); gap: var(--s-1);
  }
}
@media (max-width: 374px) { .site-header__inner > .brand .brand__mark { display: none; } }
/* Desktop: the panel is always visible whatever the <details> open state.
   Browsers render a closed <details> through a ::details-content box that is
   content-visibility:hidden and zero-height, so BOTH the pseudo-element and
   the panel have to be unlocked. The last two declarations are the fallback
   for engines that don't expose ::details-content. */
@media (min-width: 901px) {
  .nav { display: flex; align-items: center; }
  .nav > summary { display: none; }
  .nav::details-content {
    content-visibility: visible;
    block-size: auto;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }
  .nav__panel {
    display: flex !important;
    content-visibility: visible !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  .nav__panel > nav { flex: 1 1 auto; min-width: 0; }
}


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-small);
  letter-spacing: .005em; line-height: 1;
  padding: 13px var(--s-6);
  border: 1px solid transparent; border-radius: var(--r-md);
  text-decoration: none; text-align: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary   { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--primary:active{ background: var(--c-plum-active); }

.btn--secondary { background: transparent; color: var(--accent); border-color: var(--c-plum-200); }
.btn--secondary:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-hover); }

.btn--ghost { background: transparent; color: var(--text-soft); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--bg-inset); color: var(--text); border-color: var(--text-mute); }

.btn--dark { background: var(--chrome); color: var(--c-on-dark); }
.btn--dark:hover { background: var(--c-aubergine-soft); color: #fff; }

/* For use inside .band--dark */
.btn--on-dark { background: #fff; color: var(--c-aubergine); }
.btn--on-dark:hover { background: var(--c-plum-50); color: var(--c-aubergine-deep); }
.btn--on-dark-ghost { background: transparent; color: var(--c-on-dark); border-color: var(--c-on-dark-line); }
.btn--on-dark-ghost:hover { background: rgba(255,255,255,.09); color: #fff; }

/* Lane-tinted button — picks up the nearest [data-lane] */
.btn--lane { background: var(--lane); color: #fff; }
.btn--lane:hover { background: var(--lane); color: #fff; filter: brightness(.88); }

.btn--sm { padding: 9px var(--s-4); font-size: var(--t-micro); }
.btn--lg { padding: 16px var(--s-7); font-size: var(--t-body); }
.btn--block { display: flex; width: 100%; }
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--bg-inset); color: var(--text-mute);
  border-color: var(--border); pointer-events: none;
}
.btn__note { display: block; margin-top: var(--s-2); font-size: var(--t-micro); color: var(--text-mute); }

/* Text link that behaves like a button target */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-small);
  text-decoration: none; color: var(--accent);
}
.link-arrow::after { content: "→"; transition: transform var(--dur) var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }


/* ==========================================================================
   7. HERO — light. (The reference system's hero is a dark gradient; this is
   the single most visible departure.)
   ========================================================================== */

.hero {
  position: relative; overflow: hidden;
  background: var(--bg-card);
  border-bottom: var(--hair);
  padding-block: clamp(40px, 6vw, 88px);
}
/* Engineered-paper wash: a fine grid + a soft plum bloom. No image files. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--c-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 6%, #000 0%, transparent 68%);
          mask-image: radial-gradient(120% 90% at 78% 6%, #000 0%, transparent 68%);
  opacity: .8;
}
.hero::after {
  content: ""; position: absolute; pointer-events: none;
  top: -220px; right: -180px; width: 620px; height: 620px;
  background: radial-gradient(circle, var(--c-plum-100) 0%, transparent 62%);
  opacity: .85;
}
.hero > * { position: relative; z-index: 1; }

.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }

.hero__title { font-size: var(--t-display); letter-spacing: -0.025em; }
.hero__title em { font-style: normal; color: var(--accent); }
/* the founder's credit under the course title (2026-10-05) */
.hero__credit { margin-top: var(--s-3); font-size: var(--t-lead); color: var(--text); }
.hero__credit strong { font-weight: 700; }
.hero__sub { margin-top: var(--s-5); font-size: var(--t-lead); color: var(--text-soft); max-width: 54ch; }
.hero__actions { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Fact strip under the hero copy — mono figures, hairline dividers. */
.hero__facts {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: var(--hair);
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6);
}
@media (min-width: 901px) { .hero__facts:has(> :nth-child(4)) { flex-wrap: nowrap; } }
.fact__num {
  display: block;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 600; color: var(--c-aubergine); letter-spacing: -0.02em;
}
[data-theme="dark"] .fact__num { color: var(--c-on-dark); }
.fact__label {
  display: block; margin-top: 2px;
  font-size: var(--t-micro); color: var(--text-mute);
  letter-spacing: .04em; text-transform: uppercase;
  font-family: var(--font-display); font-weight: 600;
}

/* Compact hero for interior pages */
.hero--page { padding-block: clamp(28px, 4vw, 52px); }
.hero--page .hero__title { font-size: var(--t-h1); }


/* ==========================================================================
   8. IMAGE PLACEHOLDERS — pure CSS/SVG. No files, no hotlinks.
   "Plate": a specimen card with a hatched field and an index tab.
   ========================================================================== */

.plate {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  border: var(--hair); border-radius: var(--r-md);
  background-color: var(--lane-tint);
  background-image:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--lane) 14%, transparent) 0 1px,
      transparent 1px 11px),
    radial-gradient(130% 100% at 8% 4%,
      color-mix(in srgb, var(--lane) 22%, transparent) 0%, transparent 60%);
  display: grid; place-items: center;
  color: var(--lane);
}
.plate--square { aspect-ratio: 1 / 1; }
.plate--wide   { aspect-ratio: 21 / 9; }
.plate--tall   { aspect-ratio: 4 / 5; }

.plate__glyph {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 6vw, 3rem);
  letter-spacing: -0.03em;
  opacity: .55;
  user-select: none;
}
.plate__tab {
  position: absolute; top: 0; left: 0;
  padding: 5px var(--s-3);
  background: var(--lane); color: #fff;
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  border-bottom-right-radius: var(--r-md);
}
.plate__caption {
  position: absolute; right: var(--s-3); bottom: var(--s-3);
  font-family: var(--font-num); font-size: var(--t-micro);
  color: var(--lane); opacity: .75;
}
/* Course cards: a play mark, not letter initials (2026-10-25) — every course on sale is a video course */
.course-card .plate__glyph { display: none; }
.course-card .plate::before,
.course-card .plate::after { content: ""; grid-area: 1 / 1; opacity: .55; }
.course-card .plate::after {
  width: 3.25rem; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid currentColor;
}
.course-card .plate::before {
  width: 0; height: 0; margin-left: .3rem;
  border-style: solid; border-width: .65rem 0 .65rem 1.05rem;
  border-color: transparent transparent transparent currentColor;
}
/* A card with a photograph has no play mark (2026-11-02) */
.course-card .plate--photo::before,
.course-card .plate--photo::after { content: none; }
.filter-pill__soon {
  font-size: var(--t-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .7;
}
/* Fallback when color-mix is unsupported */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .plate { background-image: repeating-linear-gradient(135deg, rgba(33,26,38,.06) 0 1px, transparent 1px 11px); }
}

/* Avatar / portrait stand-in for testimonials */
.avatar-plate {
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: var(--r-md);
  background: var(--lane-tint); color: var(--lane);
  border: 1px solid var(--lane-line);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-small);
}


/* ==========================================================================
   9. CARDS — surface, lane cards, course cards
   ========================================================================== */

.card {
  background: var(--bg-card);
  border: var(--hair); border-radius: var(--r-lg);
  padding: var(--s-6);
}
.card--flush { padding: 0; overflow: hidden; }
.card--inset { background: var(--bg-inset); }
.card__title { font-size: var(--t-h4); }
.card__body { margin-top: var(--s-3); color: var(--text-soft); font-size: var(--t-small); }

/* --- Lane card: the three-lane chooser -------------------------------- */
.lane-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-card);
  border: var(--hair); border-top: var(--rule) solid var(--lane);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lane-card:hover { border-color: var(--lane-line); border-top-color: var(--lane); background: var(--lane-tint); color: inherit; }
.lane-card__kicker {
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--lane);
}
.lane-card__title { margin-top: var(--s-2); font-size: var(--t-h3); }
.lane-card__desc  { margin-top: var(--s-3); color: var(--text-soft); font-size: var(--t-small); }
.lane-card__meta {
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--hair);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-size: var(--t-micro); color: var(--text-mute);
}
.lane-card__meta .num { color: var(--text); font-weight: 600; }
.lane-card__cta { margin-top: var(--s-5); }
/* NGH lane reads as achromatic on purpose — hatch its rule so the lane is
   distinguishable without relying on color at all. */
[data-lane="ngh"] .lane-card { border-top-style: dashed; }

/* --- Course card ------------------------------------------------------ */
.course-card {
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: var(--hair); border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.course-card:hover { border-color: var(--border-strong); }
.course-card:focus-within { border-color: var(--accent); }
.course-card__media { position: relative; }
.course-card__media .plate { border: 0; border-radius: 0; border-bottom: var(--hair); }
.course-card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1 1 auto; }
.course-card__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.course-card__title { font-size: var(--t-h4); line-height: 1.28; }
.course-card__title a { color: inherit; text-decoration: none; }
.course-card__title a:hover { color: var(--accent); text-decoration: underline; }
.course-card__desc {
  margin-top: var(--s-3); font-size: var(--t-small); color: var(--text-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.course-card__foot .btn { flex: 0 0 auto; white-space: nowrap; }
.course-card__foot {
  margin-top: auto; padding-top: var(--s-5);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3);
}
/* Horizontal variant for catalog lists and cart lines */
.course-card--row { flex-direction: row; align-items: stretch; }
.course-card--row .course-card__media { flex: 0 0 200px; }
.course-card--row .course-card__media .plate { height: 100%; aspect-ratio: auto; border-bottom: 0; border-right: var(--hair); }
@media (max-width: 640px) {
  .course-card--row { flex-direction: column; }
  .course-card--row .course-card__media { flex: 1 1 auto; }
  .course-card--row .course-card__media .plate { aspect-ratio: 16/9; border-right: 0; border-bottom: var(--hair); }
}


/* ==========================================================================
   10. BADGES + CHIPS
   Price and CE-hours badges are the signature component: squared, mono,
   tabular. Status chips are visually distinct from lane chips by SHAPE
   (status = icon + solid tint; lane = left rule + tint).
   ========================================================================== */

/* --- CE hours badge ---------------------------------------------------- */
.ce-badge {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px var(--s-3);
  background: var(--lane-tint); color: var(--lane);
  border: 1px solid var(--lane-line); border-radius: var(--r-sm);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-micro); font-weight: 600; line-height: 1.25;
  white-space: nowrap;
}
.ce-badge__n { font-size: var(--t-small); font-weight: 600; }
.ce-badge__u { font-weight: 400; opacity: .85; letter-spacing: .02em; }
.ce-badge--lg { padding: var(--s-2) var(--s-4); }
.ce-badge--lg .ce-badge__n { font-size: 1.125rem; }

/* --- Price ------------------------------------------------------------- */
.price {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  color: var(--text); letter-spacing: -0.02em;
}
.price__cur { font-size: .75em; font-weight: 500; color: var(--text-mute); }
.price__amt { font-size: 1.375rem; font-weight: 600; }
.price--lg  .price__amt { font-size: 2rem; }
.price--sm  .price__amt { font-size: 1.0625rem; }
.price__per { font-family: var(--font-text); font-size: var(--t-micro); color: var(--text-mute); }
.price__was {
  font-family: var(--font-num); font-size: var(--t-small);
  color: var(--text-mute); text-decoration: line-through; margin-right: var(--s-2);
}
/* Prices not yet decided. Never render a DRAFT price without this. */
.price--draft .price__amt { color: var(--text-mute); }
.price__draft-flag {
  display: inline-block; margin-left: var(--s-2);
  padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--c-warn-bg); color: var(--c-warn);
  border: 1px solid var(--c-warn-line);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: middle;
}

/* --- Lane chip (wayfinding) -------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px var(--s-3) 4px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--lane-tint); color: var(--lane);
  border: 1px solid var(--lane-line);
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.4;
  white-space: nowrap; text-decoration: none;
}
.chip::before {
  content: ""; width: var(--rule); align-self: stretch;
  min-height: 12px; border-radius: 1px; background: currentColor;
}
[data-lane="ngh"] .chip::before,
.chip--ngh::before { background: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 4px); }
.chip--crna { --lane: var(--c-crna); --lane-tint: var(--c-crna-tint); --lane-line: var(--c-crna-line); }
.chip--rn   { --lane: var(--c-rn);   --lane-tint: var(--c-rn-tint);   --lane-line: var(--c-rn-line); }
.chip--ngh  { --lane: var(--c-ngh);  --lane-tint: var(--c-ngh-tint);  --lane-line: var(--c-ngh-line); }
a.chip:hover { filter: brightness(.96); color: var(--lane); }
.chip--plain { --lane: var(--text-soft); --lane-tint: var(--bg-inset); --lane-line: var(--border); }
.chip--plain::before { display: none; }

/* --- Status chip (RESERVED) -------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--s-3); border-radius: var(--r-pill, 999px);
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: .04em; line-height: 1.4; white-space: nowrap;
  border: 1px solid transparent;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--ok   { background: var(--c-ok-bg);   color: var(--c-ok);   border-color: var(--c-ok-line); }
.status--warn { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn-line); }
.status--bad  { background: var(--c-bad-bg);  color: var(--c-bad);  border-color: var(--c-bad-line); }
.status--info { background: var(--bg-inset);  color: var(--text-soft); border-color: var(--border); }
.status--bad::before  { border-radius: var(--r-xs); }   /* shape, not just hue */
.status--warn::before { border-radius: 1px; transform: rotate(45deg); }

/* --- Flag (marketing label) --------------------------------------------
   For "New", "Bundle", "Most popular" and the like. It exists so nobody
   reaches for a status color to decorate a card: .status is state,
   .chip is lane, .flag is everything else. Achromatic by design. */
.flag {
  display: inline-flex; align-items: center;
  padding: 4px var(--s-3); border-radius: var(--r-sm);
  background: var(--c-ink); color: #fff;
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;
  white-space: nowrap;
}
[data-theme="dark"] .flag { background: var(--c-ink); color: var(--c-surface-2); }
.flag--outline { background: transparent; color: var(--text-soft); border: 1px solid var(--border-strong); }

/* --- Meta list (hours · format · lane) --------------------------------- */
.meta-list {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  list-style: none; padding: 0; margin: 0;
  font-size: var(--t-micro); color: var(--text-mute);
}
.meta-list li { display: inline-flex; align-items: center; gap: 6px; }
.meta-list dt, .meta-list .meta-list__k { color: var(--text-mute); }
.meta-list .num { color: var(--text); font-weight: 600; }


/* ==========================================================================
   11. ACCREDITATION / COMPLIANCE BLOCKS
   The approval statement is a fixed, quotable artifact — it gets its own
   component so it can never be restyled into marketing copy.
   ========================================================================== */

.accred {
  border: 1px solid var(--c-plum-200);
  border-left: var(--rule) solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent-tint);
  padding: var(--s-5) var(--s-6);
}
.accred__label {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s-3);
}
.accred__statement {
  font-size: var(--t-body); color: var(--text); line-height: 1.55;
}
.accred__statement .num { font-weight: 600; }
.accred__note { margin-top: var(--s-3); font-size: var(--t-micro); color: var(--text-soft); }

/* Pending-approval placeholder. Must stay conspicuous — it is a literal
   visible placeholder in the draft, not a claim. */
.pending {
  display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 1px var(--s-2);
  background: var(--c-warn-bg); color: var(--c-warn);
  border: 1px dashed var(--c-warn-line); border-radius: var(--r-sm);
  font-family: var(--font-num); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .01em; white-space: normal;
}
.pending-block {
  border: 1px dashed var(--c-warn-line); border-left: var(--rule) solid var(--c-warn);
  background: var(--c-warn-bg); color: var(--text);
  border-radius: var(--r-md); padding: var(--s-5);
}
.pending-block__label {
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--c-warn);
  display: block; margin-bottom: var(--s-2);
}

/* General callouts */
.note {
  border: var(--hair); border-left: var(--rule) solid var(--border-strong);
  border-radius: var(--r-md); background: var(--bg-card);
  padding: var(--s-5);
}
.note--ok   { border-left-color: var(--c-ok);   background: var(--c-ok-bg);   border-color: var(--c-ok-line); }
.note--warn { border-left-color: var(--c-warn); background: var(--c-warn-bg); border-color: var(--c-warn-line); }
.note--bad  { border-left-color: var(--c-bad);  background: var(--c-bad-bg);  border-color: var(--c-bad-line); }
.note--lane { border-left-color: var(--lane); background: var(--lane-tint); border-color: var(--lane-line); }
.note__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-small); margin-bottom: var(--s-2); }
.note p { font-size: var(--t-small); color: var(--text-soft); }


/* ==========================================================================
   12. BREADCRUMBS
   ========================================================================== */

.crumbs {
  padding-block: var(--s-4);
  font-size: var(--t-micro);
  border-bottom: var(--hair);
  background: var(--bg-card);
}
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-mute); }
.crumbs li + li::before { content: "/"; color: var(--border-strong); }
.crumbs a { color: var(--text-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--text); font-weight: 600; }


/* ==========================================================================
   13. FORMS
   ========================================================================== */

.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field--inline { grid-template-columns: auto 1fr; align-items: start; gap: var(--s-3); }

.label {
  font-family: var(--font-display); font-size: var(--t-small); font-weight: 600;
  color: var(--text);
}
.label__req { color: var(--c-bad); margin-left: 2px; }
.hint { font-size: var(--t-micro); color: var(--text-mute); }
.error-text {
  font-size: var(--t-micro); color: var(--c-bad); font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
}
.error-text::before { content: "!"; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: var(--r-xs); background: var(--c-bad); color: #fff; font-size: 10px; }

.input, .select, .textarea {
  width: 100%;
  padding: 11px var(--s-4);
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-size: var(--t-body); line-height: 1.4;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-mute); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-mute); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-bad); background: var(--c-bad-bg); }
.textarea { min-height: 132px; resize: vertical; }
.input--num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.select {
  padding-right: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236E6478' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
}

/* Choice controls: squared, lane-aware */
.choice {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--s-3);
  align-items: start;
  padding: var(--s-4); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--bg-card); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice:hover { border-color: var(--text-mute); }
.choice input { width: 20px; height: 20px; accent-color: var(--accent); margin: 1px 0 0; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--t-small); }
.choice__note  { display: block; font-size: var(--t-micro); color: var(--text-mute); margin-top: 2px; }
/* Third grid column. Put it directly on .choice, as a sibling of the body. */
.choice__price { grid-column: 3; align-self: center; text-align: right; }

.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.fieldset > legend {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-small);
  padding: 0; margin-bottom: var(--s-1);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.form-grid > .field--span { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Catalog filter bar */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  padding: var(--s-4); background: var(--bg-card);
  border: var(--hair); border-radius: var(--r-lg);
}
.filters__group { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filter-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 7px var(--s-4); border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--bg-card);
  font-family: var(--font-display); font-size: var(--t-micro); font-weight: 600;
  color: var(--text-soft); text-decoration: none; cursor: pointer;
}
.filter-pill:hover { border-color: var(--text-mute); color: var(--text); }
.filter-pill[aria-pressed="true"], .filter-pill.is-on {
  background: var(--lane-tint); border-color: var(--lane); color: var(--lane);
}
.filters__count { margin-left: auto; font-size: var(--t-micro); color: var(--text-mute); }
.filters__count .num { color: var(--text); font-weight: 600; }


/* ==========================================================================
   14. TABLES
   ========================================================================== */

.table-wrap { overflow-x: auto; border: var(--hair); border-radius: var(--r-lg); background: var(--bg-card); }
.table {
  width: 100%; min-width: 520px;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.table caption {
  text-align: left; padding: var(--s-4) var(--s-5);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-small);
  border-bottom: var(--hair);
}
.table th, .table td { padding: var(--s-3) var(--s-5); text-align: left; vertical-align: top; }
.table thead th {
  background: var(--bg-inset);
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.table tbody tr + tr td { border-top: var(--hair); }
.table tbody tr:hover td { background: var(--bg-inset); }
.table td.num, .table th.num, .table .num,
.table [data-num] {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.table th[scope="row"] { font-weight: 600; }
.table tfoot td { border-top: 1px solid var(--border-strong); font-weight: 700; background: var(--bg-inset); }
.table--fixed { table-layout: fixed; }
.table--compact th, .table--compact td { padding: var(--s-2) var(--s-4); }
/* Phone: each row becomes a block, each cell labelled from data-label, so no column is cut off (2026-11-02) */
@media (max-width: 640px) {
  .table--stack { display: block; min-width: 0; }
  .table--stack caption { display: block; }
  .table--stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .table--stack tbody, .table--stack tr { display: block; }
  .table--stack tr { padding: var(--s-3) var(--s-4); }
  .table--stack tbody tr + tr { border-top: var(--hair); }
  .table--stack th[scope="row"], .table.table--stack td {
    display: block; padding: 2px 0; text-align: left; white-space: normal;
  }
  .table--stack tbody tr + tr td { border-top: 0; }
  .table--stack tbody tr:hover td { background: none; }
  .table.table--stack td.num { font-family: inherit; }
  .table--stack td[data-label]::before {
    content: attr(data-label) ": ";
    font-family: var(--font-display); font-weight: 600; color: var(--text-soft);
  }
}


/* ==========================================================================
   15. FAQ ACCORDION — CSS only, <details>/<summary>
   ========================================================================== */

.faq { border: var(--hair); border-radius: var(--r-lg); background: var(--bg-card); overflow: hidden; }
.faq__item + .faq__item { border-top: var(--hair); }
.faq__item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-h4);
  line-height: 1.35;
  border-left: var(--rule) solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { background: var(--bg-inset); }
.faq__item[open] > summary { border-left-color: var(--accent); background: var(--accent-tint); }
.faq__icon {
  flex: 0 0 auto; position: relative; width: 18px; height: 18px; margin-top: 4px;
  border: 1px solid var(--border-strong); border-radius: var(--r-xs);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--accent);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.faq__icon::before { width: 9px; height: 1.5px; }
.faq__icon::after  { width: 1.5px; height: 9px; transition: transform var(--dur) var(--ease); }
.faq__item[open] .faq__icon { border-color: var(--accent); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__answer { padding: 0 var(--s-6) var(--s-6); border-left: var(--rule) solid var(--accent); }
.faq__answer > * { max-width: var(--w-prose); }
.wrap--faq .faq__answer > * { max-width: none; }
.faq__answer p { color: var(--text-soft); font-size: var(--t-small); }
.faq__answer > * + * { margin-top: var(--s-3); }


/* ==========================================================================
   16. CART / CHECKOUT SUMMARY PANELS
   ========================================================================== */

.summary {
  position: sticky; top: calc(var(--header-h) + var(--s-5));
  background: var(--bg-card);
  border: var(--hair); border-top: var(--rule) solid var(--accent);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.summary__head {
  padding: var(--s-5) var(--s-6);
  border-bottom: var(--hair);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.summary__title { font-size: var(--t-h4); }
.summary__body { padding: var(--s-5) var(--s-6); }
.summary__foot { padding: var(--s-5) var(--s-6); border-top: var(--hair); background: var(--bg-inset); }

.summary-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  font-size: var(--t-small); color: var(--text-soft);
}
.summary-line + .summary-line { margin-top: var(--s-3); }
.summary-line__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.summary-line--total {
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border-strong);
  font-family: var(--font-display); font-size: var(--t-h4); font-weight: 700; color: var(--text);
}
.summary-line--total .summary-line__v { font-family: var(--font-num); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.summary-line--credit .summary-line__v { color: var(--c-ok); }

/* Line item inside cart / summary */
.cart-line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-4); align-items: start; }
.cart-line + .cart-line { margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--hair); }
.cart-line__thumb {
  aspect-ratio: 1; border-radius: var(--r-sm);
  background: var(--lane-tint); border: 1px solid var(--lane-line); color: var(--lane);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-eyebrow);
}
.cart-line__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-small); line-height: 1.35; }
.cart-line__title a { color: inherit; text-decoration: none; }
.cart-line__title a:hover { color: var(--accent); text-decoration: underline; }
.cart-line__meta { margin-top: var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-micro); color: var(--text-mute); }
.cart-line__price { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cart-line__remove {
  background: none; border: 0; padding: 0; margin-top: var(--s-2);
  font-size: var(--t-micro); color: var(--text-mute); text-decoration: underline;
}
.cart-line__remove:hover { color: var(--c-bad); }

/* Trust rail under the summary CTA */
.assurance { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-2); }
.assurance li {
  display: grid; grid-template-columns: 16px 1fr; gap: var(--s-3);
  font-size: var(--t-micro); color: var(--text-soft); align-items: start;
}
.assurance li::before {
  content: ""; margin-top: 5px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--c-ok); border-bottom: 2px solid var(--c-ok);
  transform: rotate(-45deg);
}

/* Checkout / enrollment progress — flow copied from the reference journey,
   rendered as a numbered rule rather than dots-on-a-line. */
.steps { display: flex; flex-wrap: wrap; gap: var(--s-1); list-style: none; padding: 0; margin: 0 0 var(--s-7); }
.step {
  flex: 1 1 150px; min-width: 132px;
  padding: var(--s-3) var(--s-4);
  border-top: var(--rule) solid var(--border);
  color: var(--text-mute);
}
.step__n {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-micro); font-weight: 600; display: block;
}
.step__label { font-family: var(--font-display); font-weight: 700; font-size: var(--t-small); color: inherit; display: block; margin-top: 2px; }
.step[aria-current="step"] { border-top-color: var(--accent); color: var(--accent); }
.step--done { border-top-color: var(--c-ok); color: var(--c-ok); }
.step--done .step__n::after { content: " ✓"; }

/* Empty state (the live cart refuses out-of-stock lines — this is the panel
   the catalog's out-of-stock products currently land on) */
.empty {
  text-align: center; padding: var(--s-10) var(--s-6);
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--bg-card);
}
.empty__title { font-size: var(--t-h3); }
.empty p { margin-top: var(--s-3); color: var(--text-soft); max-width: 46ch; margin-inline: auto; }
.empty .btn { margin-top: var(--s-6); }


/* ==========================================================================
   17. STICKY COURSE CTA BAR — course · contact hours · price · Add to cart.

   SITE-SPEC's file map assigns the sticky bar to this stylesheet. It had been
   re-authored on each course page instead, in four incompatible variants
   pinned to two opposite screen edges, so the same required component moved
   from the bottom of the screen to the top and back as a reviewer walked the
   course pages in order. This is the top-pinned variant, promoted unchanged
   from the three course pages that already shared it, and it is now the only
   implementation: it sits in normal flow directly beneath the header block
   and pins flush to the top of the screen once the header has scrolled away
   (2026-11-02: it used to allow for a sticky header that the live site does
   not have). On a phone it stays in the flow, because pinned it took 186 to
   218px of the screen. CSS-only — no JavaScript, and fully usable with
   scripting off.

   z-index sits below .site-header (100) on purpose: the header overlays the
   bar, never the other way round.

   Markup contract (page supplies the lane and the content, nothing else):
     <div class="ctabar" data-lane="rn">
       <div class="wrap wrap--wide ctabar__inner">
         <div class="ctabar__id">
           <p class="ctabar__title">Course name</p>
           <p class="ctabar__meta">hours · lane · format</p>   <!-- or __facts -->
         </div>
         <div class="ctabar__buy"> price + button(s) </div>
       </div>
     </div>
   ========================================================================== */

.ctabar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg-card);
  border-block: var(--hair);
  border-top: var(--rule) solid var(--lane, var(--accent));
  box-shadow: var(--shadow-bar);
}
.ctabar__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-3) var(--s-5);
  padding-block: var(--s-3);
}
.ctabar__id { min-width: 0; }
.ctabar__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-small); line-height: 1.25; color: var(--text);
  margin: 0;
}
.ctabar__meta {
  margin-top: 2px; font-size: var(--t-micro); color: var(--text-mute);
}
/* Alternative to __meta for a page whose facts are badges rather than a run
   of text. Same slot, same alignment.
   LEANING: __facts is the one part of this component not lifted from the
   three pages that already shared it — it exists so
   course-pain-management-hypnosis.html keeps its .ce-badge hours line instead
   of being reworded into meta text. Drop it if every bar should read as plain
   text. Logged in docs/decisions-fragments/audit-fix-site-css-sticky-bar.md */
.ctabar__facts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-2) 0 0; padding: 0; list-style: none;
}
.ctabar__buy { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }

@media (max-width: 760px) { .ctabar { position: static; } }
@media (max-width: 560px) {
  .ctabar__inner { padding-block: var(--s-2); }
  .ctabar__title { font-size: var(--t-micro); }
  .ctabar__buy { width: 100%; justify-content: space-between; }
}
@media print { .ctabar { position: static; box-shadow: none; } }


/* ==========================================================================
   18. MISC PAGE FURNITURE
   ========================================================================== */

/* Prose block for policies / about / long copy */
.prose { max-width: var(--w-prose); }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { margin-top: var(--s-9); padding-top: var(--s-6); border-top: var(--hair); }
.prose h3 { margin-top: var(--s-7); }
.prose ul, .prose ol { display: grid; gap: var(--s-2); }
.prose li { color: var(--text-soft); }
.prose blockquote {
  border-left: var(--rule) solid var(--accent);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  color: var(--text-soft); font-style: italic;
}

/* Module / curriculum list (course page + course dashboard) */
.module-list { list-style: none; padding: 0; margin: 0; border: var(--hair); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-card); }
.module {
  display: grid; grid-template-columns: 46px 1fr auto; gap: var(--s-4);
  align-items: center; padding: var(--s-4) var(--s-5);
}
.module + .module { border-top: var(--hair); }
.module__n {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-small); font-weight: 600; color: var(--lane);
  background: var(--lane-tint); border: 1px solid var(--lane-line);
  border-radius: var(--r-sm); text-align: center; padding: 5px 0;
}
.module__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-small); }
.module__meta { font-size: var(--t-micro); color: var(--text-mute); margin-top: 2px; }
@media (max-width: 560px) {
  .module { grid-template-columns: 40px 1fr; row-gap: var(--s-2); }
  .module > :last-child { grid-column: 2; justify-self: start; }
}

/* Progress bar */
.progress { height: 8px; background: var(--bg-inset); border-radius: var(--r-xs); overflow: hidden; border: 1px solid var(--border); }
.progress__fill { height: 100%; background: var(--lane); border-radius: inherit; }
.progress__label { display: flex; justify-content: space-between; font-size: var(--t-micro); color: var(--text-mute); margin-bottom: 6px; }
.progress__label .num { color: var(--text); font-weight: 600; }

/* Testimonial */
.quote { background: var(--bg-card); border: var(--hair); border-radius: var(--r-lg); padding: var(--s-6); }
.quote__text { font-size: var(--t-body); color: var(--text); }
.quote__by { margin-top: var(--s-5); display: flex; align-items: center; gap: var(--s-3); }
.quote__name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-small); }
.quote__role { font-size: var(--t-micro); color: var(--text-mute); }

/* Call-to-action strip */
.cta-strip {
  background: var(--chrome); color: var(--c-on-dark);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 52px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-6);
}
.cta-strip h2 { color: var(--c-on-dark); max-width: 22ch; }
.cta-strip p { color: var(--c-on-dark-soft); margin-top: var(--s-3); max-width: 46ch; }
.cta-strip__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Pagination */
.pager { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-8); }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 var(--s-3);
  display: inline-grid; place-items: center;
  border: var(--hair); border-radius: var(--r-md);
  font-family: var(--font-num); font-size: var(--t-small);
  text-decoration: none; color: var(--text-soft); background: var(--bg-card);
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }


/* ==========================================================================
   19. FOOTER
   ========================================================================== */

.site-footer { background: var(--chrome); color: var(--c-on-dark-soft); margin-top: var(--band-y); }
.site-footer__inner {
  max-width: var(--w-wide); margin-inline: auto; padding: var(--s-10) var(--gutter) var(--s-8);
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-8) var(--s-7);
}
@media (max-width: 900px) { .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }

.site-footer__blurb { margin-top: var(--s-4); font-size: var(--t-small); color: var(--c-on-dark-mute); max-width: 38ch; }
.site-footer h2 {
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--c-on-dark); margin-bottom: var(--s-4);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.site-footer a { color: var(--c-on-dark-soft); text-decoration: none; font-size: var(--t-small); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__lane {
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.site-footer__lane::before {
  content: ""; width: var(--rule); height: 12px; border-radius: 1px; background: var(--lane); opacity: .95;
}
.site-footer__addr {
  max-width: 96ch; margin-inline: auto; padding: 0 var(--gutter) var(--s-6);
  font-size: var(--t-micro); color: var(--c-on-dark-mute);
}
.site-footer__contact { display: grid; gap: var(--s-3); font-size: var(--t-small); }

.site-footer__legal {
  border-top: 1px solid var(--c-on-dark-line);
  background: var(--chrome-deep);
}
.site-footer__legal-inner {
  max-width: var(--w-wide); margin-inline: auto; padding: var(--s-6) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  font-size: var(--t-micro); color: var(--c-on-dark-mute);
}
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-footer__legal a { font-size: var(--t-micro); }
.site-footer__disclaimer {
  max-width: var(--w-wide); margin-inline: auto;
  padding: 0 var(--gutter) var(--s-8);
  font-size: var(--t-micro); line-height: 1.55; color: var(--c-on-dark-mute);
  max-width: 96ch;
}


/* ==========================================================================
   20. PRINT — receipts, course lists and policy pages get printed.
   ========================================================================== */

@media print {
  :root { --bg: #fff; --bg-card: #fff; --bg-inset: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .utility-bar, .site-header, .site-footer, .cta-strip,
  .filters, .pager, .skip-link, .btn, .nav { display: none !important; }
  .hero { padding-block: 0; border: 0; }
  .hero::before, .hero::after { display: none; }
  .card, .course-card, .summary, .table-wrap, .faq, .accred, .note { border-color: #999; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .faq__item > summary { pointer-events: none; }
  .faq__answer { display: block !important; }
  .plate { display: none; }
}

/* Home chooser: who the site is for, in the lane colours (2026-10-30) */
.who__title { font-size: var(--t-h2); }
.who__list { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.who__btn {
  display: grid; gap: 2px;
  padding: var(--s-4) var(--s-5);
  background: var(--lane); color: #fff;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: filter var(--dur) var(--ease);
}
.who__btn:hover { color: #fff; filter: brightness(1.12); }
.who__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.who__name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.2; }
.who__desc { font-size: var(--t-small); opacity: .92; }
.who__more { margin-top: var(--s-4); font-size: var(--t-small); color: var(--text-soft); }

/* Catalog: a readable list, not a wall of blocks (2026-10-30) */
#cat-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
#cat-grid .course-card__media { display: none; }
#cat-grid .course-card__body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s-7); align-items: center;
  padding: var(--s-5);
}
#cat-grid .course-card__body > * { grid-column: 1; }
#cat-grid .course-card__chips { margin-bottom: var(--s-2); }
#cat-grid .course-card__title a { color: inherit; text-decoration: none; }
#cat-grid .course-card__title a:hover { color: var(--accent); text-decoration: underline; }
#cat-grid .course-card__desc { margin-top: var(--s-2); -webkit-line-clamp: unset; display: block; max-width: 70ch; }
#cat-grid .cat-card__meta { margin-top: var(--s-3); }
#cat-grid .course-card__foot {
  grid-column: 2; grid-row: 1 / span 6;
  margin: 0; padding: 0;
  flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--s-3);
  text-align: right;
}
@media (max-width: 700px) {
  #cat-grid .course-card__body { grid-template-columns: minmax(0, 1fr); }
  #cat-grid .course-card__foot {
    grid-column: 1; grid-row: auto;
    margin-top: var(--s-4); flex-direction: row; align-items: center; justify-content: space-between; text-align: left;
  }
}


/* ==========================================================================
   21. WOOCOMMERCE CART + CHECKOUT (2026-11-02, customer walkthrough)
   WooCommerce owns these two pages, so the markup is its own and only this
   stylesheet dresses it. !important appears where WooCommerce's rules carry
   !important themselves, or load in an order this file cannot rely on.
   ========================================================================== */

body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce { width: 100%; max-width: none !important; }
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce::after,
.woocommerce-checkout form.checkout::after { content: ""; display: table; clear: both; }

/* Buttons */
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce :is(a.button, button.button, input.button) {
  background: var(--accent) !important; color: #fff !important;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.2;
  padding: 14px var(--s-6); text-decoration: none;
  transition: background var(--dur) var(--ease);
}
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce :is(a.button, button.button, input.button):hover {
  background: var(--accent-hover) !important; color: #fff !important;
}
body.woocommerce-cart .woocommerce button.button:is([name="apply_coupon"], [name="update_cart"]) {
  background: transparent !important; color: var(--accent) !important; border-color: var(--c-plum-200);
}
body.woocommerce-cart .woocommerce button.button:is([name="apply_coupon"], [name="update_cart"]):hover {
  background: var(--accent-tint) !important; color: var(--accent-hover) !important; border-color: var(--accent);
}
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce button.button:disabled { opacity: .55; cursor: not-allowed; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #payment #place_order { display: block; width: 100%; float: none; margin: 0; text-align: center; padding-block: 16px; }

/* Fields: at least 16px, which also stops a phone zooming the page on focus */
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce :is(input.input-text, textarea, select),
.woocommerce-checkout .select2-container .select2-selection--single {
  min-height: 46px; padding: 10px var(--s-3);
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-family: var(--font-text); font-size: 1rem; line-height: 1.4;
}
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce :is(input.input-text, textarea, select):focus { border-color: var(--accent); }
.woocommerce-checkout .select2-container .select2-selection--single { padding: 0; }
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered { padding-inline: var(--s-3); line-height: 44px; color: var(--text); }
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; }
.select2-container .select2-dropdown, .select2-container .select2-search__field { font-size: 1rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--accent); color: #fff; }
.woocommerce-checkout .woocommerce form .form-row label { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }

/* Tables and totals */
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce table.shop_table {
  width: 100%;
  background: var(--bg-card); border: var(--hair); border-radius: var(--r-lg);
  border-collapse: separate; font-size: 1rem;
}
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce table.shop_table :is(th, td) { padding: var(--s-3) var(--s-4); border-color: var(--border); }
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce table.shop_table thead th {
  background: var(--bg-inset);
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft);
}
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce table.shop_table .amount { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.woocommerce-cart .woocommerce .cart-collaterals :is(.cart_totals, .cross-sells),
.woocommerce-checkout .woocommerce #customer_details.col2-set :is(.col-1, .col-2) { float: none; width: 100%; }
.woocommerce-cart .cart_totals h2, .woocommerce-checkout h3 { font-size: var(--t-h4); margin-bottom: var(--s-3); }
.woocommerce-cart .coupon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); float: none; }
.woocommerce-cart .woocommerce .coupon .input-text { flex: 1 1 160px; float: none; width: auto; margin: 0; }
.woocommerce-cart .woocommerce .coupon .button { flex: 0 0 auto; float: none; width: auto; }

/* Payment box: WooCommerce's lilac panel in the site's tints */
.woocommerce-checkout #payment { background: var(--bg-card); border: var(--hair); border-radius: var(--r-lg); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: var(--hair); padding: var(--s-4); }
.woocommerce-checkout #payment div.payment_box { background: var(--accent-tint); color: var(--text-soft); border-radius: var(--r-md); font-size: 1rem; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--accent-tint); }
.woocommerce-checkout #payment div.form-row { padding: var(--s-4); }

/* Notices */
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce :is(.woocommerce-message, .woocommerce-info) {
  background: var(--accent-tint); color: var(--text);
  border: 1px solid var(--c-plum-200); border-top: var(--rule) solid var(--accent); border-radius: var(--r-md);
  font-size: 1rem;
}
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce :is(.woocommerce-message, .woocommerce-info)::before { color: var(--accent); }
body:is(.woocommerce-cart, .woocommerce-checkout) .woocommerce .woocommerce-error {
  background: var(--c-bad-bg); color: var(--text);
  border: 1px solid var(--c-bad-line); border-top: var(--rule) solid var(--c-bad); border-radius: var(--r-md);
  font-size: 1rem;
}
/* "View cart" on the cart page leads nowhere */
.woocommerce-cart .woocommerce-message .wc-forward { display: none; }

/* The account line above the checkout form (mcc_checkout_account_note) */
.mcc-checkout-account { margin-bottom: var(--s-5); font-size: 1rem; color: var(--text-soft); }

/* Wallets: the "- OR -" rule, the space above it and the license note wait for a real wallet button. The element ids
   are the Stripe plugin's; assets/site.js adds .mcc-wallet-on to <body> once a button has rendered. Nothing here
   touches the element's display, because Stripe has to be able to mount and measure into it. */
#wc-stripe-express-checkout-button-separator { display: none !important; }
.mcc-wallet-on #wc-stripe-express-checkout-button-separator { display: block !important; }
body:not(.mcc-wallet-on) #wc-stripe-express-checkout-element { margin: 0 !important; }
.mcc-wallet-note { display: none; }
.mcc-wallet-on .mcc-wallet-note { display: block; }

/* Desktop: the page's whole width, totals and order summary in the right rail */
@media (min-width: 1021px) {
  .woocommerce-cart .woocommerce-cart-form { float: left; width: calc(100% - 396px); }
  .woocommerce-cart .woocommerce .cart-collaterals { float: right; width: 356px; }
  .woocommerce-checkout #customer_details { float: left; width: calc(100% - 436px); }
  .woocommerce-checkout :is(#order_review_heading, #order_review) { float: right; clear: right; width: 400px; }
}

/* Phone: WooCommerce's bare red x gets a word (its small-screen sheet applies from 768px) */
@media (max-width: 768px) {
  .woocommerce-cart .woocommerce table.cart td.product-remove::before { display: none; }
  .woocommerce-cart .woocommerce table.cart a.remove {
    display: inline-block; width: auto; height: auto; border-radius: 0;
    font-size: 0; line-height: 1.5;
    background: transparent !important; color: var(--c-bad) !important;
  }
  .woocommerce-cart .woocommerce table.cart a.remove::after { content: "Remove"; font-size: 1rem; font-weight: 600; text-decoration: underline; }
}


/* ==========================================================================
   22. PHOTOGRAPHS (2026-11-02). A .plate--photo keeps the plate's box, tab and
   caption; the picture fills it, so the box is reserved before the file loads.
   ========================================================================== */
.plate--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate--photo .plate__tab, .plate--photo .plate__caption { z-index: 1; }
.plate--photo .plate__caption {
  padding: 2px var(--s-2); border-radius: var(--r-md);
  background: var(--lane); color: #fff; opacity: 1;
}
/* Stacked, a tall or square crop of a landscape picture costs a phone a whole screen. */
@media (max-width: 900px) {
  .plate--photo.plate--tall, .plate--photo.plate--square { aspect-ratio: 3 / 2; }
}
/* A course hero with the picture under its copy. On a phone it falls below the buy panel. */
@media (min-width: 901px) {
  .hero__grid--photo { grid-template-rows: auto 1fr; row-gap: var(--s-6); align-items: start; }
  .hero__grid--photo > .card { grid-column: 2; grid-row: 1 / span 2; }
  .hero__grid--photo > .plate { grid-column: 1; grid-row: 2; }
}
/* Home: a strip above the chooser; stacked, it goes below it, so the chooser stays on the first screen. */
.hero__side { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.hero__banner { width: 100%; aspect-ratio: 42 / 10; object-fit: cover; border-radius: var(--r-md); }
@media (max-width: 900px) {
  .hero__side { flex-direction: column-reverse; }
  .hero__banner { aspect-ratio: 5 / 2; }
}

/* The founder. Round, so the slide lettering at the corner of the square source is cut away. */
.headshot { flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.hero__credit--photo { display: flex; align-items: center; gap: var(--s-3); }
.founder-line { margin-top: var(--s-7); display: flex; align-items: center; gap: var(--s-4); }
.founder-line p { margin: 0; }
.founder__name { font-size: var(--t-h3); margin-top: var(--s-2); }
.founder__bio { margin-top: var(--s-4); }