/* ═══════════════════════════════════════════════════════════════════════
   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
   ═══════════════════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════════════════
   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;
}

/* "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; }
/* Re-watch the videos — link list on the references screen */
.video-resources { list-style: none; margin: var(--sp-4) 0 0; padding: 0; max-width: var(--measure); }
.video-resource-item { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((15px) * var(--fs-scale)); line-height: 1.4; padding: 12px 4px; border-bottom: 1px solid var(--mim-grey-light); }
.video-resource-item__icon { vertical-align: -2px; margin-right: 10px; }
.video-resource-item a { display: inline-flex; align-items: center; }
.video-resource-item--pending { color: var(--fg-subtle); }
.video-resource-item__pending { font-style: italic; font-size: 0.85em; }
body.night-mode .video-resource-item { border-color: rgba(255,255,255,0.1); }
/* cert-details screen (screen 2) — name + RACGP input form */
.cert-details-form { max-width: 480px; margin-top: var(--sp-5); }
.cert-details-field { margin-bottom: var(--sp-4); }
.cert-details-label { display: block; font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: calc(14px * var(--fs-scale)); color: var(--fg); margin-bottom: 8px; }
.cert-details-opt { font-weight: var(--weight-light); color: var(--fg-muted); }
.cert-details-input { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 16px; font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc(16px * var(--fs-scale)); line-height: 1.4; color: var(--fg); transition: border-color var(--dur-base) var(--ease-standard); }
.cert-details-input:focus { outline: none; border-color: var(--mim-purple); }
.cert-details-input::placeholder { color: var(--fg-muted); }
.cert-details-hint { font-family: var(--font-primary); font-size: 13px; color: var(--fg-muted); margin-top: 6px; min-height: 18px; }
body.night-mode .cert-details-input { background: #0b0b0d; border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.92); }
body.night-mode .cert-details-input::placeholder { color: rgba(255,255,255,0.45); }

/* RACGP Statement of Completion — embedded certificate iframe (final screen) */
.cert-embed { width: 100%; margin-top: var(--sp-4); border: 1px solid var(--mim-grey-light); border-radius: var(--radius-md); overflow: hidden; background: var(--mim-grey-light); }
.cert-embed__frame { width: 100%; border: 0; display: block; height: 560px; background: transparent; }
body.night-mode .cert-embed { border-color: rgba(255,255,255,0.12); }
/* 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 46 (final) — plain white, no photocopy texture. */
#screen-44 { background-image: none; background-color: #fff; }
/* Slides 15 & 22 — left-align the image-quote with the text/accordion boxes (was centred, +36px). */
#screen-14 .image-quote, #screen-21 .image-quote { margin-left: 0; }

/* ── Redesigned client-story slides (Meet Kai 3.1 / Meet David 3.3) ──
   Two-pane portrait + story that fills the screen between the chrome. */
.screen--story { padding: 0 !important; }
.story-redesign { display: flex; min-height: calc(100vh - var(--header-h) - var(--footer-h)); }
.story-redesign__photo { flex: 0 0 44%; position: relative; overflow: hidden; background: var(--ph-bg, #1c2a33); }
.story-redesign__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-redesign__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 28%, rgba(0,0,0,0) 52%); }
.story-redesign__title { position: absolute; left: 0; bottom: 0; margin: 0; padding: clamp(28px,3.4vw,56px); font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(40px,4.4vw,68px); line-height: 1.02; letter-spacing: -0.02em; color: #fff; }
.story-redesign__hl { background: url('./assets/mim/mark-highlighter-line-v2.png') no-repeat center 64% / 104% 70%; padding: 0 0.1em 0.04em; }
.story-redesign__story { flex: 1 1 56%; background: #080808 url('./assets/mim/texture-photocopy-black.png') center / cover; color: #fff; display: flex; overflow-y: auto; padding: clamp(28px,3.4vw,56px) clamp(34px,4.6vw,88px); }
.story-redesign__inner { max-width: 760px; margin: auto 0; width: 100%; }
.story-redesign__inner .eyebrow { display: block; color: var(--mim-purple); margin-bottom: 10px; }
.story-redesign__heading { font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: clamp(26px,2.6vw,38px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 clamp(14px,1.5vw,22px); color: #fff; }
.story-redesign__quote { margin: 0; border-left: 2px solid var(--mim-purple); padding-left: clamp(16px,1.6vw,26px); display: flex; flex-direction: column; gap: 0.72em; }
.story-redesign__quote p { margin: 0; font-family: var(--font-primary); font-weight: 300; font-style: italic; font-size: clamp(13.5px,0.96vw,17px); line-height: 1.55; color: rgba(255,255,255,0.9); }
.story-redesign--david .story-redesign__quote { gap: 0.6em; }
.story-redesign--david .story-redesign__quote p { font-size: clamp(12.5px,0.9vw,15.5px); line-height: 1.5; color: rgba(255,255,255,0.88); }
/* Reflection box ("Pause for a mo'") carried in on David — light card on the dark pane. */
.story-redesign .reflect { margin-top: clamp(16px,2vw,26px); background: #F1F2F2; border: 1px solid rgba(0,0,0,0.10); border-radius: 16px; padding: clamp(15px,1.5vw,22px) clamp(18px,1.7vw,26px); }
@media (max-width: 760px) {
  .story-redesign { flex-direction: column; }
  .story-redesign__photo { flex: 0 0 42vh; }
  .story-redesign__story { flex: 1 1 auto; }
}
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; }

/* [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; } }

/* ═══════════════════════════════════════════════════════════════════════
   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); }
.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; }

/* ═══════════════════════════════════════════════════════════════════════
   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;
}
.hero__inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end;
  overflow: auto;
}
.hero__inner-wrap {
  width: 100%; max-width: 1240px; margin: 0 auto;
  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; }
.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 24%; 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(255,255,255,0), rgba(255,255,255,0.9) 78%, #fff);
  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(--fg);
}
.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(13px, 1.5vw, 22px); line-height: 1.28; letter-spacing: -0.01em;
  margin: 0 0 clamp(8px, 1vw, 14px); max-width: 82ch; color: var(--fg);
}
.lo-leadin {
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: clamp(12px, 1vw, 15px); line-height: 1.4;
  margin: 0 0 clamp(8px, 0.9vw, 13px); color: var(--fg);
}
.lo-list-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 4vw, 56px); 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: clamp(11px, 1vw, 15px); line-height: 1.42;
  padding-left: clamp(14px, 1.6vw, 22px); color: var(--fg);
}
.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); }
}

/* ═══════════════════════════════════════════════════════════════════════
   PART 3 — module-specific component additions
   (story testimony, caveat, try-saying, download, static deck cards)
   ═══════════════════════════════════════════════════════════════════════ */

/* Static (non-interactive) deck cards — the three men, the three stages */
.deck-card--static { cursor: default; }
.deck-card--static:hover { transform: none; }
.deck-card__name {
  position: absolute; left: 0; bottom: 0; z-index: 2; padding: 20px;
  font-family: var(--font-primary); font-weight: var(--weight-bold);
  font-size: calc(22px * var(--fs-scale)); color: var(--mim-purple); text-align: left;
}

/* The shared ul.list arrow bullet points at _components/assets/images (which
   doesn't exist standalone); re-point it at this module's copy. */
ul.list li::before { background-image: url('./assets/images/MIM_Arrow1.png'); }
.deck-card__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 20px;
  font-family: var(--font-primary); font-weight: var(--weight-light);
  font-size: calc(14px * var(--fs-scale)); line-height: 1.35; color: var(--mim-white); text-align: left;
}
.deck-card__caption strong { font-weight: var(--weight-bold); }

/* ── "Hear it from him" gateway cards (screens 6, 15, 22) ──
   One man is unlocked (full colour, clickable → next screen); the others are
   greyed out with a lock until their section is reached. */
.deck-card--gate { cursor: pointer; }
.deck-card__badge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-primary); font-weight: var(--weight-bold);
  font-size: calc(14px * var(--fs-scale)); line-height: 1;
  background: var(--mim-purple); color: var(--mim-black);
}
.deck-card__badge--locked { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.72); }
/* clickable affordance — the ghost arrow fills purple on hover (shared rule) */
.deck-card--gate .deck-card__arrow { background: rgba(255,255,255,0.2); }
/* locked state */
.deck-card--locked { cursor: not-allowed; }
.deck-card--locked .deck-card__img { filter: grayscale(0.85) brightness(0.82); }
.deck-card--locked::after { background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.58) 100%); }
.deck-card__lock {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4); border: 1.5px solid rgba(255,255,255,0.5);
}
.deck-card__lock svg { width: 24px; height: 24px; stroke: rgba(255,255,255,0.9); }
.deck-card__name--locked { color: rgba(255,255,255,0.82); }

/* "Done" card — a man whose section has already been covered: full colour,
   purple tick where the lock used to be. */
.deck-card--done .deck-card__img { filter: none; }
.deck-card__done-tick {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mim-purple); box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.deck-card__done-tick svg { width: 26px; height: 26px; stroke: var(--mim-black); }

/* "Hear it from him" text testimony block (Kai, David) */
.story {
  max-width: var(--measure); margin-top: var(--sp-6); padding: 26px 30px; border-radius: var(--radius-md);
  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: 1px solid rgba(255,255,255,0.12); color: var(--mim-white);
}
.story .eyebrow { color: var(--mim-purple); }
.story .heading { margin-top: 4px; color: var(--mim-white); }
.story__quote { margin: var(--sp-4) 0 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--mim-purple); }
.story__quote p { font-style: italic; line-height: 1.55; margin: 0 0 var(--sp-3); color: rgba(255,255,255,0.92); font-size: calc(15px * var(--fs-scale)); }
.story__quote p:last-child { margin-bottom: 0; }

/* Caveat callout */
.caveat { max-width: var(--measure); margin-top: var(--sp-6); padding: 18px 22px; background: rgba(0,0,0,0.04); border: 1px dashed var(--mim-purple-aa); border-radius: var(--radius-md); }
.caveat__label { display: block; font-family: var(--font-primary); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; font-size: calc(12px * var(--fs-scale)); color: var(--mim-purple-aa-dark); margin-bottom: 8px; }
.caveat .body { margin: 0; }

/* "Try saying" suggested phrasing — used inside accordion bodies */
.try-saying { margin-top: var(--sp-4); padding: 16px 18px; background: rgba(183,163,252,0.10); border-radius: var(--radius-md); }
.try-saying__label { display: block; font-family: var(--font-primary); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; font-size: calc(12px * var(--fs-scale)); color: var(--mim-purple-aa-dark); margin-bottom: 10px; }
.try-saying__list { list-style: none; margin: 0; padding: 0; }
.try-saying__list li { position: relative; padding-left: 22px; margin-bottom: 10px; font-style: italic; line-height: 1.5; }
.try-saying__list li:last-child { margin-bottom: 0; }
.try-saying__list li::before { content: "\201C"; position: absolute; left: 0; top: -2px; font-size: 20px; color: var(--mim-purple); font-style: normal; }

/* Click-to-reveal "Try saying" phrases (design feedback 14 Jul 2026), matching
   GP Part 2's example-phrase interaction. Scoped under .try-saying so it
   overrides — rather than inherits — this module's unrelated .reveal-item
   "life-stage card" styling used elsewhere (screen 21). */
.try-saying .reveal-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.try-saying .reveal-item {
  border: none; border-radius: var(--radius-md); overflow: visible;
  position: relative; min-height: 52px; padding: 12px 16px 12px 16px;
  background: #000 url('./assets/mim/texture-photocopy-black.png') center / cover no-repeat;
  color: #fff; cursor: pointer; display: flex; align-items: center;
  transition: box-shadow 180ms var(--ease-standard);
}
.try-saying .reveal-item::before { content: none; }
.try-saying .reveal-item:hover, .try-saying .reveal-item:focus-visible { box-shadow: inset 0 0 0 2px var(--mim-purple); outline: none; }
.try-saying .reveal-item__text { font-style: italic; color: #fff; visibility: hidden; }
.try-saying .reveal-item.revealed .reveal-item__text { visibility: visible; }
.try-saying .reveal-item__hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-primary); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6);
  pointer-events: none;
}
.try-saying .reveal-item.revealed .reveal-item__hint { display: none; }

/* Downloadable resource */
.download { max-width: var(--measure); margin-top: var(--sp-6); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 22px; background: rgba(183,163,252,0.08); border: 1px solid var(--mim-purple-aa); border-radius: var(--radius-md); }
.download__body { flex: 1 1 260px; }
.download__body .body { margin: 0; }
.download__btn { flex: 0 0 auto; text-decoration: none; }
/* Pending download — asset not supplied yet (MDRS-7 / MALE summary). Reads as
   an intentional "coming soon" state, not a broken button. */
.download__btn--pending {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 12px 20px; border-radius: var(--radius-md);
  background: rgba(183,163,252,0.12); border: 1px dashed var(--mim-purple-aa);
  color: var(--mim-ink-soft, #6b6b78); font-weight: 600; cursor: default; white-space: nowrap;
}
.download__soon { font-weight: 500; font-size: 0.82em; font-style: italic; opacity: 0.85; }
body.night-mode .download__btn--pending { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.7); }

/* ── Knowledge checks — match the Module 1 KC look (.kc-*) and sit on the
   light photocopy texture, exactly like Module 1's hear-it-from-him KC. ── */
.screen[data-type="quiz"] {
  background-image: url('./assets/images/MIM_Photocopy-Texture-White.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.quiz-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); }
.quiz-options { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.quiz-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);
}
.quiz-option:hover:not(:disabled) { border-color: var(--mim-purple-aa); }
.quiz-option:disabled { cursor: default; }
.quiz-option.correct { border: 2.5px solid var(--mim-purple-aa); background: rgba(183,163,252,0.10); }
.quiz-option.correct::after { content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: url('./assets/mim/mark-tick.png') center / contain no-repeat; }
.quiz-option.incorrect { border: 2.5px solid var(--fg); background: rgba(0,0,0,0.05); color: var(--fg-muted); text-decoration: line-through; }
.quiz-option.incorrect::after { content: "\00D7"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 24px; line-height: 1; color: var(--fg); text-decoration: none; }
/* The right answer, revealed after a wrong choice (design rule, 2026-07-17).
   Thinner stroke than .correct, so "this was the answer" reads differently
   from "you got it right" — same distinction Part 1 draws between chosen-
   and revealed-correct. */
.quiz-option.revealed-correct { border: 1.5px solid var(--mim-purple-aa); background: rgba(183,163,252,0.10); }
.quiz-option.revealed-correct::after { content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: url('./assets/mim/mark-tick.png') center / contain no-repeat; }
.quiz-feedback {
  background: var(--mim-white); border-left: 4px solid var(--border-strong);
  padding: 18px 20px; max-width: 620px; margin-top: 18px;
  font-family: var(--font-primary); font-weight: var(--weight-light); font-size: calc((15px) * var(--fs-scale)); line-height: 1.55;
}
.quiz-feedback::before { 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; margin-bottom: 8px; }
.quiz-feedback--correct { border-left-color: var(--mim-purple-aa); }
.quiz-feedback--correct::before { content: "Correct"; color: var(--mim-purple-aa-dark); }
.quiz-feedback--incorrect { border-left-color: var(--fg); background: rgba(0,0,0,0.05); }
.quiz-feedback--incorrect::before { content: "Not quite"; color: var(--fg); }
body.night-mode .screen:not(.screen--dark):not(.screen--multimedia):not(.screen--closing) { background-image: none; }
body.night-mode .quiz-question { color: rgba(255,255,255,0.92); }
body.night-mode .quiz-option { background: #17171b; color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.22); }
body.night-mode .quiz-option.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 .quiz-option.incorrect::after { color: rgba(255,255,255,0.9); }
body.night-mode .quiz-option.correct, body.night-mode .quiz-option.revealed-correct { background: rgba(183,163,252,0.14); }
body.night-mode .quiz-feedback { background: #17171b; border-left-color: rgba(255,255,255,0.3); }
body.night-mode .quiz-feedback--incorrect { background: rgba(255,255,255,0.06); border-left-color: rgba(255,255,255,0.5); }

/* ── Dark photocopy texture on heading-transition + statement screens ── */
.screen[data-type="part-divider"],
.screen--note {
  background-color: var(--mim-black);
  background-image: url('./assets/images/photocopy-texture.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* Slide 5 part divider — replace the texture with a muted background video (matches Part 2 slide 5). */
#screen-5 { 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.
   Supersedes the old #screen-5-specific z-index hack this replaced. */
.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; }

/* Tom's backpack dark box — visible photocopy texture */
.bob__trait {
  background-color: var(--mim-black);
  background-image: url('./assets/images/photocopy-texture.jpg');
  background-blend-mode: normal;
}

/* Floated illustration that body text wraps around (e.g. fetal-position art) */
.float-art { float: right; width: clamp(120px, 22vw, 230px); height: auto; margin: 4px 0 var(--sp-4) var(--sp-6); pointer-events: none; user-select: none; }
@media (max-width: 640px) { .float-art { float: none; display: block; margin: 0 auto var(--sp-4); } }

/* Inline image-quote (Module 2 quote treatment used within content screens) */
.image-quote--inline { margin-top: var(--sp-6); max-width: var(--measure); }

/* Story + portrait side-by-side layout (Meet Kai, Meet David) */
.story-layout { display: flex; gap: var(--sp-5); align-items: flex-start; margin-top: var(--sp-6); }
.story-layout .image-quote { flex: 0 0 40%; min-height: 340px; margin-top: 0; }
.story-layout .story { flex: 1 1 0; margin-top: 0; }
@media (max-width: 720px) { .story-layout { flex-direction: column; } .story-layout .image-quote { flex: none; width: 100%; min-height: 0; aspect-ratio: 4/3; } }

/* Feature-size bullet list (screen 6 intro) */
.list--feature li { font-size: calc(18px * var(--fs-scale)); font-weight: var(--weight-semibold); }

/* Caveat box with purple photocopy texture background */
.caveat--purple {
  background-color: var(--mim-black);
  background-image: url('./assets/mim/texture-photocopy-purple.png');
  background-size: cover; background-position: center; background-blend-mode: normal;
  border: none; color: var(--mim-white);
}
.caveat--purple .caveat__label { color: var(--mim-white); }
.caveat--purple .body { color: rgba(255,255,255,0.92); }

/* Cert-details screen: RACGP logo branding bar */
.cert-details-branding { margin-bottom: var(--sp-4); }
.cert-details-racgp-logo { max-height: 56px; width: auto; display: block; }
.cert-details-form--accented { border-left: 3px solid var(--mim-purple); padding-left: var(--sp-4); margin-left: 0; }

/* ── Closing slide (screen 45) — flat rebuild, no intermediate wrappers ── */
.screen--closing {
  position: relative; overflow: hidden;
  height: calc(100vh - var(--header-h) - var(--footer-h));
  background: #000;
}
.screen--closing.active { display: block; animation: none; }
.closing-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.closing-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%),
    linear-gradient(to top, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.10) 100%);
}
.closing-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 64px 56px; gap: 26px;
}
.closing-title {
  font-family: var(--font-feature); font-weight: var(--weight-regular);
  font-size: clamp(56px, 8vw, 120px); line-height: 0.98; letter-spacing: -0.035em;
  color: #fff; margin: 0;
}
.closing-tagline {
  font-family: var(--font-feature); font-weight: var(--weight-regular);
  font-size: clamp(22px, 2.9vw, 40px); line-height: 1.2; letter-spacing: -0.012em;
  color: rgba(255,255,255,0.92); margin: 0; max-width: 22ch;
}
.closing-hl { position: relative; display: inline-block; white-space: nowrap; padding: 0 0.06em; }
.closing-hl > .ink {
  position: absolute; left: -0.05em; right: -0.05em; bottom: 0.02em; height: 0.62em; z-index: -1;
  background: url('./assets/mim/mark-highlighter-line-v2.png') center/100% 100% no-repeat;
  opacity: 0.85; mix-blend-mode: screen;
}
@media (prefers-reduced-motion: no-preference) {
  .screen--closing [data-fin] { opacity: 0; transform: translateY(20px); animation: finRise 0.8s cubic-bezier(0.16,1,0.3,1) forwards; animation-delay: var(--d, 0ms); }
  .closing-hl > .ink { clip-path: inset(0 100% 0 0); animation: finDraw 0.72s cubic-bezier(0.2,0.7,0.2,1) forwards; animation-delay: 1500ms; }
}
@keyframes finRise { to { opacity: 1; transform: none; } }
@keyframes finDraw { to { clip-path: inset(0 0 0 0); } }
@media (max-width: 720px) {
  .closing-content { padding: 40px 24px; gap: 20px; }
  .closing-title { font-size: clamp(46px, 14vw, 76px); }
  .closing-tagline { font-size: clamp(20px, 5vw, 28px); max-width: 18ch; }
}


/* ── S50: plain white background, no photocopy texture (design feedback 15 Jul 2026) ── */
#screen-48 { background-image: none; background-color: #ffffff; }


/* ── S42: annotated-portrait used as a hero header above the kept toolkit content (design feedback 15 Jul 2026) ── */
/* Ten moves don't fit the 660px default frame. TomToolkit1 is a 3:4 portrait,
   so at the 720px stack width this height keeps the photo close to its native
   aspect (minimal crop) while leaving room for the head + 10 notes. */
#screen-40 .ap .ap-frame { height: 980px; }
@media (max-width: 720px) { #screen-40 .ap .ap-frame { height: auto; min-height: 900px; } }

/* ═══ A11y: Text-size (--fs-scale) coverage for expressive screens ═══
   Hero / learning-outcome / "A note on…" copy blocks originally hard-coded
   font-size WITHOUT * var(--fs-scale), so the Text-size control had no effect on
   them. Re-declared here (values unchanged, only the scale factor added).
   ⚠ Verify at Text-size 5 (2.1×) that these screens don't overflow/clip. */
.stat__source { font-size: calc(11px * 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(13px,1.5vw,22px) * var(--fs-scale)); }
.lo-leadin    { font-size: calc(clamp(12px,1vw,15px) * var(--fs-scale)); }
.lo-list li   { font-size: calc(clamp(11px,1vw,15px) * var(--fs-scale)); }
.anote-text   { font-size: calc(clamp(14px,1.37vw,20px) * var(--fs-scale)); }

/* A11y (H3): the "hear it from him" GATE deck card sits on a light grey (#F0F0F0)
   surface in both light and night mode, so the light brand purple name was only
   1.91:1. Use the AA-dark purple there. The other deck cards sit over dark photos /
   the dark night bg, where the light purple reads fine — so scope this to --gate. */
.deck-card--gate .deck-card__name { color: var(--mim-purple-aa-dark); }

/* Portrait introducing a "Pause for a mo" reflection (S19 David, S30 Tom) —
   design feedback 17 Jul 2026. Capped at the same --measure as .reflect so it
   sits with the prompt rather than out-sizing it. */
.reflect-portrait {
  display: block; width: 100%; max-width: var(--measure);
  height: auto; border-radius: var(--radius-lg);
  margin: 0 0 var(--sp-6);
}