/* ═══════════════════════════════════════════════════════════════════════
   MiM GP Part 1 — v3 (Build Key render)
   Built strictly to MiM_Build_Key.md v1.5. Imports the MiM design system,
   adds the two AA-compliant purples the Build Key mandates, then defines
   every Build Key component class. Tokens, not values.
   ═══════════════════════════════════════════════════════════════════════ */
@import url('./mim-design-system.css');
@import url('../../../../_components/mim-gp-shared.css');

/* ═══════════════════════════════════════════════════════════════════════
   MODULE-SPECIFIC SCREEN VARIANTS
   ═══════════════════════════════════════════════════════════════════════ */

/* Resolve the shared CSS --tex-bg variable to this module's asset path */
:root { --tex-bg: url('./assets/images/photocopy-texture.jpg'); }

/* White photocopy texture on all non-dark editorial screens */
.screen:not(.screen--dark):not(.screen--multimedia):not(.screen--closing):not(.screen--lo) {
  background-image: url('./assets/images/MIM_Photocopy-Texture-White.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.night-mode .screen:not(.screen--dark):not(.screen--multimedia):not(.screen--closing):not(.screen--lo) { background-image: none; }

/* ── HEAR IT FROM HIM — full-bleed cover with overlaid text (screen 26) ── */
.hifh-cover { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; }
.hifh-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hifh-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, transparent 32%, rgba(0,0,0,0.78) 100%); }
.hifh-cover__inner { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(28px, 5vw, 56px); max-width: 720px; }
.hifh-cover__title { font-family: var(--font-feature); font-weight: 700; font-size: clamp(46px, 7.5vw, 88px); line-height: 0.96; letter-spacing: -0.02em; color: var(--mim-white); margin: 0 0 var(--s4); text-shadow: 0 2px 28px rgba(0,0,0,0.55); }
.hifh-cover__lead { font-family: var(--font-feature); font-style: italic; font-size: calc(clamp(18px, 2.2vw, 25px) * var(--fs-scale)); line-height: 1.3; color: rgba(255,255,255,0.96); margin: 0; text-shadow: 0 1px 18px rgba(0,0,0,0.5); }
@media (max-width: 720px) { .hifh-cover { aspect-ratio: 3 / 4; } }

/* Screen 26 — Meet Brad: larger text */
#screen-27 .hifh-cover__title { font-size: clamp(38px, 5.5vw, 66px); }
#screen-27 .hifh-cover__lead  { font-size: calc(clamp(24px, 3.2vw, 36px) * var(--fs-scale)); }

/* Screen 8 — "8 in 10" slide: no photocopy texture (flat background) */
#screen-9 { overflow: hidden; background-image: none; }
.screen-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
/* Scrim between the video and its text (design feedback 14 Jul 2026): dimming
   the video itself washed out its colour without reliably protecting text
   contrast against bright frames. A black scrim above the video, below the
   text, does both — full video vibrancy, consistent white-text contrast. */
.screen--dark:has(> .screen-bg-video) { position: relative; }
.screen--dark:has(> .screen-bg-video)::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
}
.screen--dark:has(> .screen-bg-video) > .screen-inner { position: relative; z-index: 2; }
#screen-9 .screen-inner { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   CONTENT BLOCKS — module-specific
   ═══════════════════════════════════════════════════════════════════════ */

/* [stat] */
.stat {
  background: var(--mim-black) var(--tex-photocopy-black) center / cover;
  border-radius: var(--radius-lg); padding: 56px 48px;
  display: grid; grid-auto-rows: auto; gap: 32px; align-items: center;
}
.stat__figure {
  font-family: var(--font-feature); font-weight: var(--weight-regular);
  font-size: calc((clamp(96px, 14vw, 140px)) * var(--fs-scale)); letter-spacing: -0.04em; line-height: 0.9;
  color: var(--mim-white);
}
.stat__sentence {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: calc((17px) * var(--fs-scale)); line-height: 1.4; max-width: 26ch; color: rgba(255,255,255,0.92);
}
.stat__source {
  font-family: var(--font-primary); font-size: 11px; color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em; margin-top: 14px;
}

/* Screen 9 — compact horizontal stat layout */
#screen-10 { background-image: none; }
#screen-9 .stat { grid-template-columns: auto 1fr; gap: 0 28px; padding: 28px 32px; align-items: center; max-width: var(--measure); }
#screen-9 .stat__figure { font-size: calc(clamp(52px, 7vw, 80px) * var(--fs-scale)); }
#screen-9 .stat__sentence { max-width: none; }

/* "Save for later" flag button (injected into each evidence paper) */
.fom-tag-btn {
  display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 16px;
  background: none; border: 1.5px solid rgba(183,163,252,0.5); border-radius: var(--radius-pill);
  padding: 6px 14px; font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: 12px; letter-spacing: 0.04em; color: var(--mim-purple-aa-dark); cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.fom-tag-btn:hover { background: rgba(183,163,252,0.14); border-color: var(--mim-purple); }
.fom-tag-btn.is-tagged { background: var(--mim-purple); border-color: var(--mim-purple); color: var(--mim-black); }
.fom-tag-btn.is-tagged svg { fill: var(--mim-black); }
body.night-mode .fom-tag-btn { color: #cdbcff; }
body.night-mode .fom-tag-btn.is-tagged { color: var(--mim-black); }

/* ═══════════════════════════════════════════════════════════════════════
   [additional resources] — collation / email screen
   ═══════════════════════════════════════════════════════════════════════ */
.resources-list { list-style: none; margin: var(--sp-5) 0; padding: 0; }
.summary-resource-item { border-bottom: 1px solid var(--border); transition: background var(--dur-base) var(--ease-standard); }
.summary-resource-item:first-child { border-top: 1px solid var(--border); }
.resource-item__label { display: flex; align-items: flex-start; gap: 14px; padding: 12px 8px; cursor: pointer; margin: 0; }
.resource-item__label:hover { background: var(--mim-grey-light); }
.resource-checkbox { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mim-purple); cursor: pointer; }
.resource-item__text { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((14px) * var(--fs-scale)); line-height: 1.55; color: var(--fg-muted); }
.summary-resource-item.tagged .resource-item__text { font-weight: var(--weight-semibold); color: var(--fg); }
.resources-email-section { margin-top: var(--sp-5); }
.resources-email-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.email-resources-btn svg { width: 14px; height: 14px; }
.resources-email-hint { font-family: var(--font-primary); font-size: 12px; font-style: italic; color: var(--fg-subtle); margin-top: 14px; }
.resources-email-hint.hidden { display: none; }
/* completion confirmation (final wrap-up slide) */
.completion-note { display: flex; align-items: flex-start; gap: 14px; margin-top: var(--sp-7); max-width: var(--measure); background: #B7A3FC; border: 1px solid #B7A3FC; border-radius: var(--radius-md); padding: 20px 22px; }
.completion-note__check { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #1A1A1A; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.completion-note__text { font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: calc((16px) * var(--fs-scale)); line-height: 1.5; color: #1A1A1A; margin: 0; }
body.night-mode .completion-note { background: #B7A3FC; }
body.night-mode .completion-note__text { color: #1A1A1A; }
/* slide 39 (Dane's story): small gap between video stage and title */
#screen-38 .hifh > .heading { margin-top: var(--sp-5); margin-bottom: var(--sp-5); }
/* Slide 9 — cap the infographic black box to the text measure so it doesn't overhang. */
#screen-9 .igs-card { max-width: var(--measure); }
body.night-mode .resource-item__label:hover { background: rgba(255,255,255,0.05); }
body.night-mode .resource-item__text { color: rgba(255,255,255,0.7); }
body.night-mode .summary-resource-item.tagged .resource-item__text { color: #fff; }
body.night-mode .summary-resource-item { border-color: rgba(255,255,255,0.1); }

/* ═══════════════════════════════════════════════════════════════════════
   [navigation tutorial] — onboarding screen 2
   ═══════════════════════════════════════════════════════════════════════ */
.nav-tutorial { margin-top: var(--sp-5); max-width: 720px; }
.tutorial-step {
  display: flex; align-items: flex-start; gap: 18px; width: 100%; text-align: left;
  padding: 20px 22px; margin-bottom: 14px;
  background: var(--mim-grey-light); border: 2px solid var(--border); border-radius: var(--radius-lg);
  cursor: pointer; font-family: inherit;
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.tutorial-step:hover { border-color: var(--mim-purple); background: rgba(183,163,252,0.12); transform: translateY(-1px); }
.tutorial-step__icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-md);
  background: rgba(183,163,252,0.16); border: 1px solid var(--mim-purple);
  display: flex; align-items: center; justify-content: center;
  color: var(--mim-purple-aa-dark); font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 18px;
}
.tutorial-step__icon svg { width: 22px; height: 22px; }
.tutorial-step__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tutorial-step__title { font-family: var(--font-feature); font-size: 18px; color: var(--fg); }
.tutorial-step__text { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: 14px; line-height: 1.55; color: var(--fg-muted); }
body.night-mode .tutorial-step { background: #17171b; }
body.night-mode .tutorial-step__title { color: rgba(255,255,255,0.92); }
body.night-mode .tutorial-step__text { color: rgba(255,255,255,0.7); }
@media (max-width: 640px) { .tutorial-step { flex-direction: column; gap: 12px; } }

/* ═══════════════════════════════════════════════════════════════════════
   [accordion]
   ═══════════════════════════════════════════════════════════════════════ */
.accordion { border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); max-width: var(--measure); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__item:last-child { border-bottom: none; }
.accordion__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; width: 100%; background: none; border: none; cursor: pointer; text-align: left;
}
.accordion__title { font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: calc((17px) * var(--fs-scale)); line-height: 1.3; color: var(--fg); }
.accordion__toggle { font-family: var(--font-primary); font-size: 22px; color: var(--fg-muted); line-height: 1; transition: transform 220ms var(--ease-standard); flex-shrink: 0; }
.accordion__item.open .accordion__toggle { transform: rotate(45deg); }
.accordion__body { display: none; padding: 0 4px 24px; }
.accordion__item.open .accordion__body { display: block; }
.accordion__body .body { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((16px) * var(--fs-scale)); line-height: 1.6; max-width: 62ch; }

/* ═══════════════════════════════════════════════════════════════════════
   MULTIMEDIA — image, image+text
   ═══════════════════════════════════════════════════════════════════════ */

/* [image] */
.image-block { border-radius: var(--radius-lg); overflow: hidden; max-width: var(--measure); }
.image-block img { width: 100%; object-fit: cover; filter: saturate(0.85); }
.image-caption { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((13px) * var(--fs-scale)); color: var(--fg-subtle); margin-top: 8px; }

/* Quotation marks overlay — top-right corner of image-quote figures */
.image-quote .image-quote__marks {
  position: absolute;
  inset: auto;
  top: 20px; right: 24px;
  width: 68px; height: auto;
  object-fit: initial;
  z-index: 3;
  filter: none;
}

/* [image + text] */
.image-text { display: grid; grid-template-columns: 280px 1fr; gap: 28px; max-width: 880px; align-items: center; }
.image-text--right { grid-template-columns: 1fr 280px; }
.image-text--right .image-text__media { order: 2; }

/* ── decorative accent illustration beside a heading / title / text block ──
   Used as a "gap filler" to the right of short headings and bullet lists. */
/* Capped to the content measure so the accent image's right edge never extends
   past the widest text box on the slide. */
.accent-row { display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; max-width: var(--measure); }
.accent-row__main { flex: 1 1 320px; min-width: 0; }
.accent-row__main > * + * { margin-top: var(--sp-3); }
.accent-row__art { flex: 0 0 auto; width: clamp(170px, 26vw, 280px); height: auto; pointer-events: none; user-select: none; }
@media (max-width: 640px) { .accent-row__art { display: none; } }
.image-text__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.image-text__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.image-text__body .heading { font-size: var(--fs-h3); }
.image-text__body .body { margin-top: 12px; }
@media (max-width: 720px) { .image-text, .image-text--right { grid-template-columns: 1fr; } .image-text--right .image-text__media { order: 0; } }

/* ═══════════════════════════════════════════════════════════════════════
   [bricks] — the backpack reveal
   ═══════════════════════════════════════════════════════════════════════ */
.bricks { display: grid; grid-template-columns: 280px 1fr; gap: 28px; max-width: 900px; align-items: start; }
.bricks__reveal {
  position: sticky; top: calc(var(--header-h) + 16px);
  background: var(--mim-grey-light); border-radius: var(--radius-md);
  padding: 24px 26px; min-height: 260px;
}
.bricks__empty { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((14px) * var(--fs-scale)); color: var(--fg-subtle); }
.bricks__reveal-title { font-family: var(--font-feature); font-weight: var(--weight-regular); font-size: calc((22px) * var(--fs-scale)); line-height: 1.2; margin-bottom: 10px; }
.bricks__reveal-body { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((15px) * var(--fs-scale)); line-height: 1.6; }
.bricks__wall { display: flex; flex-wrap: wrap; gap: 14px; }
.brick {
  flex: 1 1 calc(50% - 14px); min-width: 180px; height: 78px;
  background: var(--mim-white); border: 1.5px solid var(--mim-black); border-radius: 4px;
  padding: 14px 18px; font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: calc((14px) * var(--fs-scale)); line-height: 1.25; text-align: left; color: var(--fg); cursor: pointer;
  transition: transform 180ms var(--ease-standard), background 180ms var(--ease-standard), border-color 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}
.bricks__wall .brick:nth-child(even) { margin-left: 7%; }
.brick:hover { background: rgba(183,163,252,0.08); border-color: var(--mim-purple-aa); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.brick.viewed { background: var(--mim-grey-light); border-color: rgba(0,0,0,0.18); color: var(--fg-subtle); }
.brick.selected { background: #f0eaff; border: 2px solid var(--mim-purple-aa); color: var(--fg); padding: 13.5px 17.5px; }
@media (max-width: 720px) {
  .bricks { grid-template-columns: 1fr; }
  .bricks__reveal { position: static; }
  .brick { flex-basis: 100%; }
  .bricks__wall .brick:nth-child(even) { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   [card deck] + popup modal
   ═══════════════════════════════════════════════════════════════════════ */
.card-deck { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; max-width: 840px; }
/* spread variant — distribute a small set of cards evenly across the content width */
.card-deck--spread { max-width: var(--measure); justify-content: space-evenly; gap: 28px; }
/* bigger case-example cards on 1.6 */
.card-deck--spread .deck-card { flex: 1 1 0; max-width: 400px; height: 400px; }
@media (max-width: 720px) { .card-deck--spread { flex-direction: column; align-items: center; overflow: visible; } .card-deck--spread .deck-card { width: 100%; max-width: 100%; height: 320px; } }

.deck-card {
  position: relative; flex: 0 0 280px; height: 417px; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md); cursor: pointer; border: none; padding: 0;
  transition: transform var(--dur-base) var(--ease-standard);
}
.deck-card:hover { transform: translateY(-3px); }
.deck-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deck-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.8)); }
.deck-card__title { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 20px; font-family: var(--font-primary); font-weight: var(--weight-bold); font-size: calc((20px) * var(--fs-scale)); color: var(--mim-white); text-align: left; }
.deck-card__arrow {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-standard);
}
.deck-card__arrow svg { width: 18px; height: 18px; stroke: var(--mim-white); }
.deck-card:hover .deck-card__arrow { background: var(--mim-purple); }
.deck-card:hover .deck-card__arrow svg { stroke: var(--mim-black); }
.deck-card.viewed .deck-card__img { filter: grayscale(0.7); opacity: 0.65; }

/* popup */
.card-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; }
.card-modal.open { display: flex; }
.card-modal__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); animation: fadeIn 220ms var(--ease-standard); }
.card-modal__panel {
  position: relative; z-index: 2; background: var(--mim-white); border-radius: var(--radius-lg);
  max-width: 800px; width: calc(100% - 48px); padding: 56px 64px; margin: 40px auto;
  animation: screenIn 260ms var(--ease-standard);
}
.card-modal__panel > * + * { margin-top: var(--sp-4); }
.card-modal__panel .body { max-width: 62ch; }
.card-modal__close {
  position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--mim-grey-light); border: none; cursor: pointer; color: var(--fg-muted);
  font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 600px) { .card-modal__panel { padding: 40px 24px; } }

/* Standalone KC screens */
[data-type="kc"] .kc-host { max-width: var(--measure); }

/* ═══════════════════════════════════════════════════════════════════════
   KNOWLEDGE CHECK options (shared: standalone + hear-it-from-him)
   ═══════════════════════════════════════════════════════════════════════ */
.kc-question { font-family: var(--font-feature); font-weight: var(--weight-regular); font-size: calc((24px) * var(--fs-scale)); line-height: 1.25; max-width: 640px; margin-bottom: 18px; color: var(--fg); }
.kc-options { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.kc-option {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 16px 48px 16px 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--mim-white); font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: calc((16px) * var(--fs-scale)); line-height: 1.4; text-align: left; cursor: pointer; width: 100%; color: var(--fg);
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.kc-option:hover:not(:disabled) { border-color: var(--mim-purple-aa); }
.kc-option__mark { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: none; }
.kc-option__tick { background: url('./assets/mim/mark-tick.png') center / contain no-repeat; }
.kc-option__cross { color: var(--fg); }
.kc-option__cross svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.4; }

/* chosen + correct */
.kc-option.chosen-correct { border: 2.5px solid var(--mim-purple-aa); background: rgba(183,163,252,0.10); }
.kc-option.chosen-correct .kc-option__tick { display: block; }
/* chosen + incorrect */
.kc-option.chosen-incorrect { border: 2.5px solid var(--fg); background: rgba(0,0,0,0.05); color: var(--fg-muted); text-decoration: line-through; }
.kc-option.chosen-incorrect .kc-option__cross { display: block; }
/* revealed correct (when learner picked wrong) */
.kc-option.revealed-correct { border: 1.5px solid var(--mim-purple-aa); background: rgba(183,163,252,0.10); }
.kc-option.revealed-correct .kc-option__tick { display: block; }
.kc-option:disabled { cursor: default; }

.kc-feedback {
  display: none; background: var(--mim-white); border-left: 4px solid var(--border-strong);
  padding: 18px 20px; max-width: 620px; margin-top: 18px;
}
.kc-feedback.show { display: block; animation: screenIn 300ms var(--ease-standard); }
.kc-feedback__status { font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: calc((11px) * var(--fs-scale)); letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.kc-feedback__body { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((15px) * var(--fs-scale)); line-height: 1.55; }
.kc-feedback--correct { border-left-color: var(--mim-purple-aa); }
.kc-feedback--correct .kc-feedback__status { color: var(--mim-purple-aa-dark); }
.kc-feedback--incorrect { border-left-color: var(--fg); background: rgba(0,0,0,0.05); }
.kc-feedback--incorrect .kc-feedback__status { color: var(--fg); }

/* ═══════════════════════════════════════════════════════════════════════
   [backpack of bricks] — native interactive (screen 14), rebuilt from the
   standalone. Pack each norm "brick"; the backpack fills bottom-up; gate
   unlocks when all six are packed.
   ═══════════════════════════════════════════════════════════════════════ */
.bob { margin-top: var(--sp-4); max-width: var(--measure); }
.bob__stage { display: grid; grid-template-columns: minmax(300px, 1fr) 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
@media (max-width: 760px) { .bob__stage { grid-template-columns: 1fr; gap: 32px; align-items: start; } }
.bob__left { display: flex; flex-direction: column; }
.bob__right { display: flex; }

.bob__trait { background-color: var(--mim-black); background-image: url('./assets/mim/texture-photocopy-black.png'); background-size: cover; background-position: center; background-blend-mode: screen; border-radius: var(--radius-lg); padding: 26px 28px 30px; flex: 1; min-height: 0; transition: background-color var(--dur-base) var(--ease-standard); }
.bob__eyebrow { display: block; margin-bottom: 14px; font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.bob__trait-title { font-family: var(--font-feature); font-weight: var(--weight-medium); font-size: calc(clamp(26px, 3vw, 34px) * var(--fs-scale)); line-height: 1.08; margin: 0 0 12px; color: var(--mim-white); }
.bob__trait-desc { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc(18px * var(--fs-scale)); line-height: 1.5; color: rgba(255,255,255,0.75); max-width: none; margin: 0; }
.bob__trait--empty .bob__trait-title { color: var(--mim-white); }
.bob__trait--empty .bob__trait-desc { color: rgba(255,255,255,0.75); }
.bob__swap { animation: bobSwapIn 320ms var(--ease-standard); }
@keyframes bobSwapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.bob__pack { margin: clamp(16px, 2vw, 28px) auto 0; position: relative; width: 100%; max-width: 400px; display: flex; justify-content: center; }
.bob__svg { display: block; width: 100%; height: auto; overflow: visible; }
.bob__band { animation: bobBandDrop 460ms var(--ease-out, cubic-bezier(0.16,1,0.3,1)); }
@keyframes bobBandDrop { 0% { opacity: 0; transform: translateY(-22px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
.bob__falling { position: absolute; left: 50%; top: 4%; width: 56px; height: 28px; margin-left: -28px; border-radius: 5px; background: var(--mim-purple); box-shadow: var(--shadow-md); z-index: 5; pointer-events: none; animation: bobBrickFall 640ms cubic-bezier(0.45,0.05,0.55,0.95) forwards; }
@keyframes bobBrickFall { 0% { opacity: 0; transform: translateY(-40px) rotate(-8deg) scale(0.9); } 18% { opacity: 1; } 72% { opacity: 1; transform: translateY(120px) rotate(4deg); } 100% { opacity: 0; transform: translateY(150px) rotate(2deg) scale(0.86); } }

.bob__meta { margin-top: var(--sp-5); display: flex; align-items: center; gap: 14px; }
.bob__count { font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 15px; color: var(--fg); }
.bob__count b { color: var(--mim-purple-aa-dark); }
.bob__reset { margin-left: auto; border: 1px solid var(--border); background: transparent; color: var(--fg-muted); font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.bob__reset:hover:not(:disabled) { border-color: var(--border-strong); color: var(--fg); }
.bob__reset:disabled { opacity: 0.35; cursor: default; }


/* The six bricks stretch to fill the left column's height so the stack's
   bottom edge lines up with the bottom of the backpack illustration. */
.bob__bricks { display: flex; flex-direction: column; gap: 14px; flex: 1; justify-content: space-between; }
.bob__brick { appearance: none; text-align: left; font-family: var(--font-primary); border: 1px solid var(--border); background: var(--mim-grey-light); border-radius: var(--radius-md); padding: 18px 20px; cursor: pointer; color: var(--fg-muted); font-weight: var(--weight-semibold); font-size: calc(clamp(16px, 1.4vw, 18px) * var(--fs-scale)); display: flex; align-items: center; gap: 14px; flex: 1 1 0; min-height: 64px; transition: transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
@media (max-width: 760px) { .bob__right { display: block; } .bob__bricks { display: flex; flex: none; } .bob__brick { flex: none; min-height: 0; } }
.bob__brick:nth-child(2) { margin-left: 34px; }
.bob__brick:nth-child(3) { margin-right: 26px; }
.bob__brick:nth-child(4) { margin-left: 42px; }
.bob__brick:nth-child(5) { margin-right: 38px; }
.bob__brick:nth-child(6) { margin-left: 28px; }
@media (max-width: 760px) { .bob__brick { margin-left: 0 !important; margin-right: 0 !important; } }
.bob__brick:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); color: var(--fg); }
.bob__brick:focus-visible { outline: 3px solid var(--mim-purple-aa-dark); outline-offset: 2px; }
.bob__dot { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 3px; border: 1.5px solid currentColor; opacity: 0.5; transition: all var(--dur-base) var(--ease-standard); }
.bob__label { flex: 1; }
.bob__brick.is-packed { background: var(--mim-white); color: var(--fg); border-color: rgba(183,163,252,0.55); }
.bob__brick.is-packed .bob__dot { background: var(--mim-purple); border-color: var(--mim-purple); opacity: 1; }
.bob__brick.is-active { background: rgba(183,163,252,0.18); border-color: var(--mim-purple); color: var(--fg); box-shadow: 0 0 0 1px var(--mim-purple); }
.bob__brick.is-active .bob__dot { background: var(--mim-purple); border-color: var(--mim-purple); opacity: 1; }
body.night-mode .bob__trait, body.night-mode .bob__brick { background: #17171b; }
body.night-mode .bob__brick.is-packed { background: #232329; }

/* ═══════════════════════════════════════════════════════════════════════
   [reveal stack] — stacked images, click to reveal text (1.2 life stages)
   ═══════════════════════════════════════════════════════════════════════ */
.reveal-stack { display: flex; flex-direction: column; gap: 16px; max-width: var(--measure); }
.reveal-item { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--mim-grey-light); }
.reveal-item__head { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.reveal-item__img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform var(--dur-base) var(--ease-standard); }
.reveal-item__head:hover .reveal-item__img { transform: scale(1.02); }
.reveal-item__head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78)); }
.reveal-item__title { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 20px 24px; font-family: var(--font-feature); font-size: calc((24px) * var(--fs-scale)); line-height: 1.1; color: #fff; text-align: left; }
.reveal-item__chev { position: absolute; right: 20px; bottom: 18px; z-index: 2; color: #fff; font-size: 30px; line-height: 1; transition: transform var(--dur-base) var(--ease-standard); }
.reveal-item.open .reveal-item__chev { transform: rotate(45deg); }
.reveal-item__body { display: none; padding: 24px 28px 28px; }
.reveal-item.open .reveal-item__body { display: block; }
.reveal-item__body > * + * { margin-top: var(--sp-4); }
body.night-mode .reveal-item { background: #17171b; }

/* ═══════════════════════════════════════════════════════════════════════
   [reveal bullets] — click each to reveal a consequence (health literacy gap)
   ═══════════════════════════════════════════════════════════════════════ */
.reveal-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: var(--measure); margin-top: 8px; }
.reveal-bullet {
  min-height: 66px; display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; text-align: left;
  background: var(--mim-grey-light); border: 1.5px solid var(--border); border-radius: var(--radius-md);
  font-family: var(--font-primary); font-size: var(--fs-body); line-height: 1.4; color: var(--fg); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.reveal-bullet:hover:not(.revealed) { border-color: var(--mim-purple); background: rgba(183,163,252,0.08); }
.reveal-bullet__face { font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; font-size: calc((12px) * var(--fs-scale)); color: var(--mim-purple-aa-dark); }
.reveal-bullet.revealed { cursor: default; background: rgba(183,163,252,0.10); border-color: var(--mim-purple-aa); font-weight: var(--weight-light); }
.reveal-bullet.revealed::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--mim-purple-aa); }
@media (max-width: 560px) { .reveal-list { grid-template-columns: 1fr; } }
body.night-mode .reveal-bullet { background: #17171b; }
body.night-mode .reveal-bullet__face { color: #cdbcff; }

/* ═══════════════════════════════════════════════════════════════════════
   [hear it from him]
   ═══════════════════════════════════════════════════════════════════════ */
.hifh__video-stage { transition: opacity 400ms var(--ease-standard); }
.hifh__video-stage.fading { opacity: 0; }
.hifh__controls { margin-top: var(--sp-4); }
.ghost-btn {
  background: var(--mim-grey-light); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 10px 22px; font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: 13px; color: var(--fg-muted); cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.ghost-btn:hover { background: var(--mim-purple); color: var(--mim-black); border-color: var(--mim-purple); }

/* transcript control on standalone video screens (mirrors hifh controls).
   Transcript sits left; the deliberately understated Skip sits far right. */
.video-controls { margin-top: var(--sp-4); }


.hifh__transcript { display: none; margin-top: var(--sp-4); background: var(--mim-grey-light); border-radius: var(--radius-md); padding: 24px 26px; }
.hifh__transcript.open { display: block; }
.hifh__transcript p { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((16px) * var(--fs-scale)); line-height: 1.6; }
/* Blank line between transcript paragraphs so spoken passages read cleanly. */
.hifh__transcript p + p { margin-top: var(--sp-4); }

.hifh__followup { display: none; opacity: 0; transform: translateY(10px); margin-top: var(--sp-8); }
.hifh__followup.show { display: block; }
.hifh__followup.in { animation: hifhIn 900ms var(--ease-standard) forwards; }
@keyframes hifhIn { to { opacity: 1; transform: translateY(0); } }

/* reflect variant — centred */
.hifh__reflect { text-align: center; max-width: 720px; margin: 0 auto; }
.hifh__reflect .reflect__label { text-align: center; }
.hifh__reflect-prompt { font-family: var(--font-feature); font-weight: var(--weight-regular); font-size: calc((clamp(22px, 2.6vw, 30px)) * var(--fs-scale)); line-height: 1.35; max-width: 33rem; margin: 0 auto; color: var(--fg); }
.hifh__actions { display: flex; gap: 14px; justify-content: center; margin-top: var(--sp-6); opacity: 0; }
.hifh__actions.in { animation: actionsIn 600ms var(--ease-standard) forwards; }
@keyframes actionsIn { from { opacity: 0; } to { opacity: 1; } }

/* KC completion screen */
.hifh__complete { text-align: center; max-width: 580px; margin: 0 auto; }
.hifh__complete-mo { width: 120px; height: 76px; margin: 0 auto var(--sp-6); background: url('./assets/images/logo.svg') center / contain no-repeat; }
.hifh__complete-caption { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((15px) * var(--fs-scale)); color: var(--fg-muted); margin-bottom: var(--sp-5); }
body.night-mode .hifh__complete-caption { color: rgba(255,255,255,0.7); }
body.night-mode .video-controls .ghost-btn, body.night-mode .hifh__transcript { color: rgba(255,255,255,0.92); }
body.night-mode .hifh__transcript { background: #17171b; }
.kc-continue { margin-top: var(--sp-5); }

/* ═══════════════════════════════════════════════════════════════════════
   Buttons used in content (downloadable resource etc.)
   ═══════════════════════════════════════════════════════════════════════ */
.btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--mim-black); background: transparent; color: var(--fg);
  padding: 12px 22px; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none;
  font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.btn-secondary svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; }

/* ── Screens 21/24/29: purple arrows on bulleted lists ── */
#screen-22 ul.list li::before,
#screen-25 ul.list li::before,
#screen-29 ul.list li::before {
  background-image: none;
  background-color: var(--mim-purple);
  -webkit-mask: url('./assets/images/MIM_Arrow1.png') center / contain no-repeat;
  mask: url('./assets/images/MIM_Arrow1.png') center / contain no-repeat;
}

/* ── Screen 33: purple left rule on quote ── */
#screen-34 .quote { border-left-color: var(--mim-purple); }

/* ═══════════════════════════════════════════════════════════════════════
   67% Animated Stat Infographic (screen 34)
   ═══════════════════════════════════════════════════════════════════════ */
.stat-igc {
  margin-top: var(--sp-5); max-width: var(--measure);
  background: var(--mim-grey-light); border-radius: var(--radius-lg); overflow: hidden;
}
.stat-igc__grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.95fr);
  gap: clamp(24px,4vw,52px); padding: clamp(28px,4.5vw,56px); align-items: center;
}
@media (max-width: 660px) { .stat-igc__grid { grid-template-columns: 1fr; gap: 28px; } }
.stat-igc__eyebrow {
  display: block; font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-subtle); margin-bottom: 18px;
}
.stat-igc__number {
  display: flex; align-items: baseline; gap: 0.04em;
  font-family: var(--font-primary); font-weight: 900;
  font-size: clamp(66px,8.5vw,112px); line-height: 0.88; letter-spacing: -0.035em; color: var(--mim-black);
}
.stat-igc__pct { font-size: 0.5em; }
.stat-igc__lead {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: clamp(16px,1.9vw,22px); line-height: 1.3; max-width: 32ch;
  color: var(--mim-black); margin-top: 14px;
}
.stat-igc__body {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: clamp(13px,1.3vw,15px); line-height: 1.55; max-width: 52ch;
  color: var(--fg-muted); margin-top: 16px;
}
.stat-igc__dots {
  display: grid; grid-template-columns: repeat(10,1fr); gap: clamp(4px,.7vw,7px);
}
.stat-igc__dot {
  aspect-ratio: 1; border-radius: 3px; background: rgba(0,0,0,0.09);
  transition: background 0.25s var(--ease-standard);
}
.stat-igc__dot.filled { background: var(--mim-purple); }
.stat-igc__legend {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-primary); font-size: 13px; color: var(--fg-subtle); margin-top: 16px;
}
.stat-igc__legend-swatch {
  flex-shrink: 0; width: 12px; height: 12px; border-radius: 3px; background: var(--mim-purple);
}
/* Entrance fade-rise animations */
@keyframes igcFadeRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
[data-igc-fade] { opacity: 0; }
[data-igc-play] [data-igc-fade="0"] { animation: igcFadeRise .62s var(--ease-out) 0s    forwards; }
[data-igc-play] [data-igc-fade="1"] { animation: igcFadeRise .62s var(--ease-out) .08s  forwards; }
[data-igc-play] [data-igc-fade="2"] { animation: igcFadeRise .62s var(--ease-out) .18s  forwards; }
[data-igc-play] [data-igc-fade="3"] { animation: igcFadeRise .62s var(--ease-out) .20s  forwards; }
[data-igc-play] [data-igc-fade="4"] { animation: igcFadeRise .62s var(--ease-out) .30s  forwards; }
@media (prefers-reduced-motion: reduce) { [data-igc-fade] { opacity: 1 !important; animation: none !important; } }

/* Toggle twin of the @media block above — same state, driven by the
   in-course setting. A body class cannot un-match a media query, so the
   two entry points have to be authored in parallel. Keep them in step. */
body.reduced-motion [data-igc-fade] { opacity: 1 !important; animation: none !important; }


/* ── Card modal (screen 38) — centred, matches content column, dark texture ── */
.card-modal { align-items: center; }
.card-modal__panel {
  position: relative; z-index: 2; background: var(--mim-black) var(--tex-photocopy-black) center / cover;
  border-radius: var(--radius-lg); max-width: 820px; width: calc(100% - 48px);
  padding: 64px 80px; margin: 24px auto; animation: screenIn 260ms var(--ease-standard);
}
.card-modal__panel > * + * { margin-top: var(--sp-4); }
.card-modal__panel .body {
  max-width: 62ch; color: rgba(255,255,255,0.88);
  font-size: calc(19px * var(--fs-scale)); line-height: 1.58;
}
.card-modal__panel .heading,
.card-modal__panel .title { color: var(--mim-white); }
.card-modal__close {
  position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none; cursor: pointer;
  color: rgba(255,255,255,0.85); font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.card-modal__close:hover { background: rgba(255,255,255,0.25); }
@media (max-width: 600px) { .card-modal__panel { padding: 44px 28px; } }

/* ── "Already in the System" infographic (screen 9) ── */
@keyframes igsFadeRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes igsSweep { from { background-size: 0% 80%; } to { background-size: 100% 80%; } }
.igs-card [data-anim="fade"] { opacity: 0; }
.igs-card[data-play="true"] [data-anim="fade"] { animation: igsFadeRise .62s cubic-bezier(0.16,1,0.3,1) forwards; }
.igs-card[data-play="true"] [data-anim="sweep"] { animation: igsSweep .8s .45s cubic-bezier(0.2,0.7,0.2,1) both; }
.igs-photo { background-image: url('./assets/images/portrait-book.jpg'); background-position: center 16%; background-size: cover; }
.igs-highlight { background-image: url('./assets/images/mark-highlighter-line-v2.png'); background-repeat: no-repeat; background-position: left 70%; background-size: 0% 80%; padding: 0 .12em .02em; }
@media (prefers-reduced-motion: reduce) {
  .igs-card [data-anim="fade"] { opacity: 1 !important; animation: none !important; }
  .igs-highlight { background-size: 100% 80% !important; }
}

/* Toggle twin of the @media block above — same state, driven by the
   in-course setting. A body class cannot un-match a media query, so the
   two entry points have to be authored in parallel. Keep them in step. */
body.reduced-motion .igs-card [data-anim="fade"] { opacity: 1 !important; animation: none !important; }
body.reduced-motion .igs-highlight { background-size: 100% 80% !important; }

@media (max-width: 720px) {
  .igs-grid { grid-template-columns: 1fr !important; }
  .igs-photo { min-height: 240px !important; max-height: 300px; order: -1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BUILD FLAG (Build Key §Build flag format) — dev/preview only
   ═══════════════════════════════════════════════════════════════════════ */
.build-flag {
  background: var(--flag-bg); border-left: 3px solid var(--flag-border);
  padding: 10px 14px; max-width: 60ch;
  font-family: var(--font-primary); font-weight: var(--weight-regular);
  font-size: 13px; line-height: 1.4; color: var(--flag-fg);
}
.build-flag strong { font-weight: var(--weight-bold); }
/* Visible by default in this REVIEW DRAFT so the writer sees every flagged
   ambiguity. All build flags must be resolved and removed before go-live. */

/* ═══════════════════════════════════════════════════════════════════════
   LANDING / PART DIVIDER / COMPLETION (expressive)
   ═══════════════════════════════════════════════════════════════════════ */
.landing { text-align: left; max-width: 800px; }
.landing__img { width: 100%; max-width: 680px; border-radius: var(--radius-lg); margin-bottom: var(--sp-6); }
.landing .title { margin-bottom: var(--sp-3); }
.landing .heading { color: var(--mim-purple); margin-bottom: var(--sp-5); }
.landing .caption { margin-top: var(--sp-7); }
.outcomes { margin-top: var(--sp-6); }
.outcomes__title { font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: calc((12px) * var(--fs-scale)); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: var(--sp-4); }

/* ── Hero landing (Direction B — full-bleed cinematic) ── */
.screen--hero {
  position: relative;
  height: calc(100vh - var(--header-h) - var(--footer-h));
  overflow: hidden;
  background: var(--mim-black);
  color: var(--mim-white);
}
.screen--hero.active { display: block; animation: none; }
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 42% 42%;
  filter: saturate(0.96) contrast(1.03) brightness(0.94);
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 30%, rgba(0,0,0,0.30) 62%, rgba(0,0,0,0.12) 100%);
}
.hero__tex {
  position: absolute; inset: 0;
  background: var(--tex-photocopy-black) center/cover;
  opacity: 0.45; mix-blend-mode: multiply;
}
/* 2. Hero clipping on short viewports. The copy was bottom-anchored with
   `align-items: flex-end`; when it is taller than the hero box the overflow goes off
   the TOP, under the header, and flexbox start-edge overflow is NOT scrollable (so
   the `overflow:auto` below could never reach it). An auto top margin gives the same
   bottom-anchored look when there is room, but collapses to 0 on overflow so the
   content starts at the top and can be scrolled. */
.hero__inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-start;
  overflow: auto;
}
.hero__inner-wrap {
  width: 100%; max-width: 1240px; margin: auto auto 0;
  padding: 56px 56px 52px;
}
.hero__copy {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 20px;
  max-width: 760px;
}
.hx-kicker {
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mim-purple); display: inline-block;
}
.hx-title {
  font-family: var(--font-feature); font-weight: var(--weight-regular);
  font-size: clamp(44px, 5.6vw, 84px);
  line-height: 1.0; letter-spacing: -0.028em; color: #fff;
  margin: 0; text-wrap: balance;
}
.hx-sub {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: clamp(18px, 1.9vw, 23px); line-height: 1.32;
  color: rgba(255,255,255,0.86); letter-spacing: -0.01em;
  margin: 0; max-width: 44ch;
}
.hx-bodies { display: flex; flex-direction: column; gap: 11px; }
.hx-body {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.62);
  margin: 0; max-width: 52ch;
}
@media (prefers-reduced-motion: no-preference) {
  .screen--hero [data-rise] {
    opacity: 0; transform: translateY(16px);
    animation: hxRise 0.66s var(--ease-out) forwards;
    animation-delay: var(--d, 0ms);
  }
  .screen--hero .hero__media img {
    animation: hxImg 1.2s var(--ease-out) both;
  }
}
@keyframes hxRise { to { opacity: 1; transform: none; } }
@keyframes hxImg { from { transform: scale(1.06); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 600px) {
  .hero__inner-wrap { padding: 60px 22px 36px; }
  .hx-title { font-size: clamp(36px, 12vw, 54px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   [learning-outcomes] — Screen 5 — "Faces first" redesign
   ═══════════════════════════════════════════════════════════════════════ */

/* Override default screen centering so content flows top-to-bottom */
.screen--lo { align-items: stretch; justify-content: flex-start; padding: 0; background: var(--mim-black) var(--tex-photocopy-black) center / cover; }
.lo-wrap { display: flex; flex-direction: column; width: 100%; }

/* Faces band — five portraits read as one panorama */
.lo-band {
  position: relative; flex: none;
  height: clamp(100px, 15vw, 218px);
  display: flex; background: #0d2530;
}
.lo-portrait {
  flex: 1; min-width: 0; height: 100%;
  object-fit: cover; object-position: center top; display: block;
}
.lo-band::after {
  content: ""; position: absolute; inset: auto 0 0 0;
  height: clamp(36px, 5.5vw, 72px);
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.88) 78%, #000);
  pointer-events: none;
}

/* Content body */
.lo-body {
  padding: clamp(14px, 2vw, 26px) clamp(24px, 5.5vw, 80px) clamp(16px, 2vw, 28px);
}
.lo-title {
  font-family: var(--font-feature); font-weight: var(--weight-regular);
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 clamp(6px, 0.8vw, 12px); color: var(--mim-white);
}
.lo-hl {
  background: url('./assets/images/mark-highlighter-line-v2.png') center 64% / 100% 76% no-repeat;
  padding: 0 0.12em 0.04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lo-intro {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: clamp(16px, 1.5vw, 22px); line-height: 1.28; letter-spacing: -0.01em;
  margin: 0 0 clamp(8px, 1vw, 14px); max-width: 82ch; color: rgba(255,255,255,0.9);
}
.lo-leadin {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: calc(16px * var(--fs-scale)); line-height: 1.4;
  margin: 0 0 clamp(8px, 0.9vw, 13px); color: rgba(255,255,255,1);
}

/* Draws the eye to the "8 in 10" moustache graphic (design feedback 14 Jul 2026). */
@keyframes pulse-mo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.pulse-mo { animation: pulse-mo 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pulse-mo { animation: none; } }

/* Toggle twin of the @media block above — same state, driven by the
   in-course setting. A body class cannot un-match a media query, so the
   two entry points have to be authored in parallel. Keep them in step. */
body.reduced-motion .pulse-mo { animation: none; }

.lo-list-wrap {
  display: grid; grid-template-columns: 1fr;
  row-gap: clamp(7px, 0.8vw, 13px); align-items: start;
}
@media (max-width: 620px) { .lo-list-wrap { grid-template-columns: 1fr; } }
.lo-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(7px, 0.8vw, 13px);
}
.lo-list li {
  position: relative;
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: calc(16px * var(--fs-scale)); line-height: 1.42;
  padding-left: clamp(14px, 1.6vw, 22px); color: rgba(255,255,255,0.85);
}
.lo-list li::before {
  content: ""; position: absolute; left: 0; top: 0.25em;
  width: clamp(9px, 1vw, 13px); height: clamp(7px, 0.8vw, 10px);
  border-radius: 0; background: url('./assets/images/MIM_Arrow1.png') center / contain no-repeat;
}

/* Entrance animation — fires when .lo-play is added by JS on screen enter */
@keyframes lo-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lo-fade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.screen--lo.lo-play .lo-portrait { animation: lo-fade 0.8s cubic-bezier(0.16,1,0.3,1) both; }
.screen--lo.lo-play .lo-p1 { animation-delay: 0.05s; }
.screen--lo.lo-play .lo-p2 { animation-delay: 0.14s; }
.screen--lo.lo-play .lo-p3 { animation-delay: 0.23s; }
.screen--lo.lo-play .lo-p4 { animation-delay: 0.34s; }
.screen--lo.lo-play .lo-p5 { animation-delay: 0.45s; }
.screen--lo.lo-play .lo-title  { animation: lo-rise 0.55s cubic-bezier(0.16,1,0.3,1) 0.23s both; }
.screen--lo.lo-play .lo-intro  { animation: lo-rise 0.55s cubic-bezier(0.16,1,0.3,1) 0.34s both; }
.screen--lo.lo-play .lo-leadin { animation: lo-rise 0.55s cubic-bezier(0.16,1,0.3,1) 0.45s both; }
.screen--lo.lo-play .lo-list:nth-child(1) li:nth-child(1) { animation: lo-rise 0.55s cubic-bezier(0.16,1,0.3,1) 0.50s both; }
.screen--lo.lo-play .lo-list:nth-child(1) li:nth-child(2) { animation: lo-rise 0.55s cubic-bezier(0.16,1,0.3,1) 0.56s both; }
.screen--lo.lo-play .lo-list:nth-child(1) li:nth-child(3) { animation: lo-rise 0.55s cubic-bezier(0.16,1,0.3,1) 0.62s both; }
.screen--lo.lo-play .lo-list:nth-child(2) li:nth-child(1) { animation: lo-rise 0.55s cubic-bezier(0.16,1,0.3,1) 0.68s both; }
.screen--lo.lo-play .lo-list:nth-child(2) li:nth-child(2) { animation: lo-rise 0.55s cubic-bezier(0.16,1,0.3,1) 0.74s both; }

/* ═══════════════════════════════════════════════════════════════════════
   "A NOTE ON…" INTERLUDE SCREENS
   ═══════════════════════════════════════════════════════════════════════ */

.screen--note .screen-inner {
  max-width: none;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr clamp(160px, 19.1vw, 280px);
  align-items: center;
  gap: clamp(28px, 4.9vw, 72px);
  padding: clamp(40px, 4.4vw, 64px) clamp(40px, 7.5vw, 110px);
}
.screen--note .screen-inner > * + * { margin-top: 0; }
.anote-body {
  border-left: 3px solid var(--mim-purple);
  padding-left: clamp(20px, 2.7vw, 40px);
  max-width: 52ch;
}
.anote-eyebrow {
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: calc(12px * var(--fs-scale));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mim-purple);
  margin: 0 0 clamp(10px, 1.2vw, 18px);
}
.anote-title {
  font-family: var(--font-feature);
  font-weight: 400;
  font-size: clamp(26px, 3.14vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--mim-white);
  margin: 0 0 clamp(12px, 1.5vw, 22px);
}
.anote-text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(14px, 1.37vw, 20px);
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.82);
  margin: 0;
  max-width: 50ch;
}
.anote-text + .anote-text { margin-top: 1em; }
.anote-figure {
  justify-self: center;
  height: clamp(140px, 25.7vw, 376px);
  width: auto;
  display: block;
}

@keyframes anoteRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes anoteFade {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}
.screen--note .anote-eyebrow,
.screen--note .anote-title,
.screen--note .anote-text,
.screen--note .anote-figure { opacity: 0; }
.screen--note.anote-play .anote-eyebrow { animation: anoteRise 0.55s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
.screen--note.anote-play .anote-title   { animation: anoteRise 0.55s cubic-bezier(0.16,1,0.3,1) 0.16s both; }
.screen--note.anote-play .anote-text    { animation: anoteRise 0.55s cubic-bezier(0.16,1,0.3,1) 0.27s both; }
.screen--note.anote-play .anote-figure  { animation: anoteFade 0.8s  cubic-bezier(0.16,1,0.3,1) 0.38s both; }
@media (prefers-reduced-motion: reduce) {
  .screen--note .anote-eyebrow,
  .screen--note .anote-title,
  .screen--note .anote-text,
  .screen--note .anote-figure { opacity: 1; animation: none !important; }
}

/* Toggle twin of the @media block above — same state, driven by the
   in-course setting. A body class cannot un-match a media query, so the
   two entry points have to be authored in parallel. Keep them in step. */
body.reduced-motion .screen--note .anote-eyebrow, body.reduced-motion .screen--note .anote-title, body.reduced-motion .screen--note .anote-text, body.reduced-motion .screen--note .anote-figure { opacity: 1; animation: none !important; }


body.night-mode .anote-title { color: rgba(255,255,255,0.92); }
body.night-mode .anote-text  { color: rgba(255,255,255,0.75); }

@media (max-width: 600px) {
  .screen--note .screen-inner { grid-template-columns: 1fr; padding: var(--sp-7) var(--sp-5); }
  .anote-figure { height: clamp(100px, 30vw, 160px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   NIGHT MODE — module-specific component overrides
   ═══════════════════════════════════════════════════════════════════════ */

/* Learning outcomes slide */
body.night-mode .lo-band::after {
  background: linear-gradient(to bottom, rgba(11,11,13,0), rgba(11,11,13,0.9) 78%, #0b0b0d);
}
body.night-mode .lo-title,
body.night-mode .lo-intro,
body.night-mode .lo-leadin { color: rgba(255,255,255,0.92); }
body.night-mode .lo-list li { color: rgba(255,255,255,0.85); }
body.night-mode .lo-list li::before { background: none; background-color: #cdbcff; border-radius: 999px; width: clamp(5px, 0.55vw, 8px); height: clamp(5px, 0.55vw, 8px); top: 0.44em; }

/* knowledge-check typography */
body.night-mode .kc-question { color: rgba(255,255,255,0.92); }

/* hifh reflect prompt */
body.night-mode .hifh__reflect-prompt { color: rgba(255,255,255,0.92); }

/* FAQ + accordion */
body.night-mode .accordion { border-color: rgba(255,255,255,0.2); }
body.night-mode .accordion__item { border-color: rgba(255,255,255,0.12); }
body.night-mode .accordion__title { color: rgba(255,255,255,0.92); }
body.night-mode .accordion__toggle { color: rgba(255,255,255,0.7); }

/* click-to-reveal consequence bullets (literacy gap) */
body.night-mode .reveal-bullet { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.14); }

/* stacked reveal panel inner content + bricks reveal panel */
body.night-mode .bricks__reveal { background: #17171b; }
body.night-mode .bricks__empty { color: rgba(255,255,255,0.6); }

/* ghost buttons (transcript / watch again) */
body.night-mode .ghost-btn { background: #17171b; color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.2); }
body.night-mode .ghost-btn:hover { background: var(--mim-purple); color: var(--mim-black); border-color: var(--mim-purple); }

/* knowledge-check options + feedback */
body.night-mode .kc-option { background: #17171b; color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.22); }
body.night-mode .kc-option.chosen-incorrect { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
body.night-mode .kc-feedback { background: #17171b; border-left-color: rgba(255,255,255,0.3); }
body.night-mode .kc-feedback__body { color: rgba(255,255,255,0.9); }
body.night-mode .kc-feedback--incorrect { background: rgba(255,255,255,0.06); border-left-color: rgba(255,255,255,0.5); }
body.night-mode .kc-feedback--incorrect .kc-feedback__status { color: rgba(255,255,255,0.85); }
body.night-mode .kc-option__cross { color: rgba(255,255,255,0.9); }
body.night-mode .kc-feedback--correct .kc-feedback__status { color: #cdbcff; }

/* backpack of bricks (screen 14) */
body.night-mode .bob__eyebrow { color: rgba(255,255,255,0.55); }
body.night-mode .bob__trait-title, body.night-mode .bob__count { color: rgba(255,255,255,0.92); }
body.night-mode .bob__trait-desc { color: rgba(255,255,255,0.7); }
body.night-mode .bob__brick { color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.14); }
body.night-mode .bob__brick:hover, body.night-mode .bob__brick.is-packed, body.night-mode .bob__brick.is-active { color: #fff; }
body.night-mode .bob__reset { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.22); }
body.night-mode .bob__count b { color: #cdbcff; }

/* case-example modal (1.6) */
body.night-mode .card-modal__panel { background: #17171b; }
body.night-mode .card-modal__close { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }

/* Mo logo in HIFH complete screen */
body.night-mode .hifh__complete-mo { filter: invert(1) brightness(2); }

/* ═══════════════════════════════════════════════════════════════════════
   FOCUS STYLES — module-specific additions (a11y)
   (shared components already covered in mim-gp-shared.css)
   ═══════════════════════════════════════════════════════════════════════ */
.btn-icon:focus-visible, .nav-btn:focus-visible, .ghost-btn:focus-visible,
.brick:focus-visible, .deck-card:focus-visible, .tutorial-step:focus-visible,
.kc-option:focus-visible, .evidence__row:focus-visible, .accordion__summary:focus-visible,
.chapter-item:focus-visible, .reflect__save:focus-visible, .reflect__view:focus-visible,
.reflect__toggle:focus-visible, .reveal-item:focus-visible, .fom-tag-btn:focus-visible,
.reflect__input:focus-visible, .video-poster:focus-visible, .text-size-btn:focus-visible,
.settings-toggle:focus-visible {
  outline: 3px solid var(--mim-purple-aa-dark);
  outline-offset: 2px;
}
.resource-item__label:focus-within { outline: 3px solid var(--mim-purple-aa-dark); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES — module-specific additions
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .reveal-item__img { height: 180px; }
  .reveal-item__title { font-size: calc(20px * var(--fs-scale)); padding: 16px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE POLISH (phone widths) — BOB-specific
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .bob__stage { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .bob__trait { min-height: 200px; padding: 20px 22px; }
  .bob__trait-title { font-size: calc(20px * var(--fs-scale)); margin-bottom: 6px; }
  .bob__trait-desc { font-size: calc(13.5px * var(--fs-scale)); }
  .bob__eyebrow { margin-bottom: 8px; }
  .bob__meta { margin-top: var(--sp-4); }
}


/* ── Transcript button on dark screens (e.g. S33): light for contrast ── */
.screen--multimedia .transcript-toggle,
.screen--dark .transcript-toggle {
  border-color: rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.85);
}
.screen--multimedia .transcript-toggle:hover,
.screen--dark .transcript-toggle:hover {
  border-color: var(--mim-purple);
  color: #fff;
}


/* ── S8 moustache infographic: only the 8 dark moustaches pulse; the 2 grey stay static (design feedback 15 Jul 2026) ── */
.mo-8in10 { position: relative; }
.mo-8in10 img { display: block; width: 100%; height: auto; }
.mo-8in10 .mo-8in10__grey { position: absolute; top: 0; left: 0; }


/* ── S8: Cooper photo in the right of the 2-in-5 stat card (design feedback 15 Jul 2026) ── */
#screen-9 .stat.stat--photo { grid-template-columns: 1fr auto; align-items: stretch; gap: 36px; }
#screen-9 .stat--photo .stat__text { display: flex; flex-direction: column; justify-content: center; gap: 28px; min-width: 0; }
#screen-9 .stat--photo .stat__photo { width: clamp(150px, 22vw, 240px); align-self: stretch; object-fit: cover; border-radius: 10px; }
@media (max-width: 640px) {
  #screen-9 .stat.stat--photo { grid-template-columns: 1fr; }
  #screen-9 .stat--photo .stat__photo { width: 100%; max-height: 260px; }
}

/* ═══ A11y: Text-size (--fs-scale) coverage for expressive screens ═══
   These hero / learning-outcome / "A note on…" / stat-infographic copy blocks
   originally hard-coded font-size (clamp or px) WITHOUT * var(--fs-scale), so the
   Text-size control had no effect on them. Re-declared here (values unchanged, only
   the scale factor added) so all body copy responds to the A/A+/A++ control.
   Same base specificity as the originals + appended last = these win.
   ⚠ Verify at Text-size 5 (2.1×) that these screens don't overflow/clip. */
.stat__source    { font-size: calc(11px * var(--fs-scale)); }
.stat-igc__lead  { font-size: calc(clamp(16px,1.9vw,22px) * var(--fs-scale)); }
.stat-igc__body  { font-size: calc(clamp(13px,1.3vw,15px) * var(--fs-scale)); }
.hx-sub          { font-size: calc(clamp(18px,1.9vw,23px) * var(--fs-scale)); }
.hx-body         { font-size: calc(15px * var(--fs-scale)); }
.lo-intro        { font-size: calc(clamp(16px,1.5vw,22px) * var(--fs-scale)); }
.lo-leadin       { font-size: calc(16px * var(--fs-scale)); }
.lo-list li      { font-size: calc(16px * var(--fs-scale)); }
.anote-text      { font-size: calc(clamp(14px,1.37vw,20px) * var(--fs-scale)); }

/* ══ Layout fixes inherited from the ACRRM build (20 Jul 2026) — promote to the shared
   engine once the other courses are done, then delete this block. Kept verbatim so this
   edition stays diffable against ACRRM; geometry only, nothing accreditation-related.
   ══════════════════════════════════════════════════════════════════════════════════ */



/* ════════════════════════════════════════════════════════════════════════
   ACKNOWLEDGEMENT OF COUNTRY — screen 4
   Deliberately plain: flat black (the shared .screen--dark photocopy texture is
   switched off here), purple title, white body copy. No figure, no animation.
   ════════════════════════════════════════════════════════════════════════ */
.screen--aoc { background-image: none; background-color: var(--mim-black); }
.aoc { max-width: 60ch; margin: 0 auto; }
.aoc__title {
  font-family: var(--font-feature);
  font-weight: 400;
  font-size: calc(clamp(28px, 3.4vw, 48px) * var(--fs-scale));
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--mim-purple);
  margin: 0 0 clamp(18px, 2.2vw, 32px);
}
.aoc__text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: calc(clamp(15px, 1.42vw, 21px) * var(--fs-scale));
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.84);
  margin: 0;
}
.aoc__text + .aoc__text { margin-top: 1.1em; }

/* ═══════════════════════════════════════════════════════════════════════════════
   AUDIENCE DISCLAIMER + CRISIS SUPPORT — Health and Community Professionals edition only
   Added 12 Aug 2026. Not present in the GP / ACRRM / Pharmacy / Nurses courses,
   so a diff against ACRRM will show this block as an intended delta.

   Two components:
     .hero-note      short notice on the hero (screen 1)
     .audience-note  the full disclaimer on the onboarding screen
   Conventions these deliberately follow (each one is a documented past defect):
     · Opaque backgrounds, never translucent. Over the hero photograph a
       translucent panel is both genuinely hard to read and unmeasurable —
       qa-contrast composites to the painted backdrop and cannot see the image,
       so it reports a confident false result in either direction.
     · font-size carries * var(--fs-scale) so the A/A+/A++ control actually
       resizes this copy. qa-text-size only samples a fixed list of blocks, so a
       new component that omits the scale sails through the gate (Ph2/Ph3 hero
       copy did exactly that).
     · Explicit body.night-mode overrides. Inheriting --fg in night mode is the
       documented route to ~2.6:1 body copy.
     · NO [data-rise]. The hero rise animation is correctly wrapped in
       @media (prefers-reduced-motion: no-preference), but a disclaimer must not
       depend on an animation having run under any circumstances.
   ═══════════════════════════════════════════════════════════════════════════════ */

.hero-note {
  /* Deliberately loud (Tom, 13 Aug). This is the only thing telling a learner the
     course was not written for their role, so it is sized to be read, not skimmed
     past: body-copy size rather than caption size, a full border plus a heavy left
     rule, and a shadow to lift it off the photograph. Still OPAQUE — a translucent
     panel over the hero image is both hard to read and unmeasurable (qa-contrast
     composites to the painted backdrop and cannot see a photograph). */
  max-width: 62ch;
  background: #141318;
  border: 1px solid rgba(183, 163, 252, 0.42);
  border-left: 6px solid var(--mim-purple);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}
.hero-note__label {
  display: block;
  font-family: var(--font-primary); font-weight: var(--weight-bold);
  font-size: calc(13px * var(--fs-scale));
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mim-purple);
  margin-bottom: 9px;
}
.hero-note__text {
  font-family: var(--font-primary); font-weight: var(--weight-regular);
  font-size: calc(17px * var(--fs-scale)); line-height: 1.5;
  color: #fff;                              /* 19:1 on #141318 */
  margin: 0;
}

.audience-note {
  max-width: var(--measure);
  margin-top: var(--sp-6);
  background: #F4F1FF;                      /* light purple tint, opaque */
  border-left: 3px solid var(--mim-purple);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}
.audience-note__label {
  display: block;
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: calc(11px * var(--fs-scale));
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #4B3A9E;                           /* 7.4:1 on #F4F1FF — --mim-purple is too light here */
  margin-bottom: 10px;
}
.audience-note__text {
  font-family: var(--font-primary); font-weight: var(--weight-regular);
  font-size: calc(15px * var(--fs-scale)); line-height: 1.6;
  color: #1A1A1A; margin: 0;
}
.audience-note__text + .audience-note__text { margin-top: 0.9em; }

body.night-mode .audience-note      { background: #17171b; }
body.night-mode .audience-note__label { color: #cdbcff; }   /* 8.1:1 on #17171b */
body.night-mode .audience-note__text  { color: rgba(255,255,255,0.90); }

/* Short viewports. 1366x768 is the most common laptop resolution and the hero copy
   stack there (kicker + up-to-84px title + sub + note + body paragraphs) overran the
   usable height by ~8px, putting the audience disclaimer behind the Back/Continue
   footer. Measured, not guessed: see tools/qa-hcp-disclaimer.js, which asserts the
   note's real rect against innerHeight minus the footer at every breakpoint.
   Tighten the stack rather than let a disclaimer depend on the learner scrolling. */
@media (max-height: 850px) {
  /* The disclaimer is now bigger, so the space has to come from somewhere. It comes
     from the DISPLAY TITLE, not from the disclaimer: capping the title reclaims ~60px
     across its three lines, which is more than the larger note costs. Verified with a
     real measurement at 1366x768 (the most common laptop size, and the one that
     overran by 8px before), 1440x900, 1280x720 and 1920x1080 — see
     tools/qa-hcp-disclaimer.js, which asserts the note's rect against innerHeight
     minus the footer. Never shrink the note to make it fit. */
  .screen--hero .hx-title         { font-size: clamp(34px, 4.1vw, 54px); }
  .screen--hero .hero__copy      { gap: 12px; }
  .screen--hero .hero__inner-wrap { padding-bottom: 26px; }
  .hero-note                      { padding: 16px 20px; }
  .hero-note__label               { margin-bottom: 7px; }
}

/* .evidence__link is display:block / 11px / uppercase by design. Restore body size for
   the disclaimer's contact link, following the .find-out-more__link precedent in
   mim-gp-shared.css. Explicit calc(), not var(--fs-body): the token form silently
   ignores the text-size control. */
/* Inline, body-size contact link inside the disclaimer copy. Deliberately NOT
   .evidence__link (display:block / 11px / uppercase -- a standalone CTA). Explicit
   calc() rather than var(--fs-body): the token form ignores the text-size control. */
.audience-note__inline-link {
  font-size: calc(15px * var(--fs-scale));
  color: #4B3A9E;                 /* 7.4:1 on #F4F1FF */
  text-decoration: underline;
}
body.night-mode .audience-note__inline-link { color: #cdbcff; }   /* 8.1:1 on #17171b */