/* ═══════════════════════════════════════════════════════════════════════
   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-26 .hifh-cover__title { font-size: clamp(38px, 5.5vw, 66px); }
#screen-26 .hifh-cover__lead  { font-size: calc(clamp(24px, 3.2vw, 36px) * var(--fs-scale)); }

/* Screen 8 — background video */
#screen-9 { overflow: hidden; }
.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; }
/* S8: small gap between the intro text and the video; keep the transcript pill
   centred directly under the (left-aligned, text-measure) video, not the 980px page. */
#screen-9 .video-frame { margin-top: var(--sp-6); }
#screen-9 .video-controls { max-width: var(--measure); margin-left: 0; margin-right: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   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 7 — plain white, no photocopy texture (per feedback 2026-07-04) */
#screen-8 { background-image: none; }

/* Screen 6 — "8 in 10" slide: no photocopy texture (flat background) */
#screen-7 { background-image: none; }

/* Scenario callout (S12) — shaded box, both lines at one (body) size. Theme-safe
   translucent grey reads on both the light texture and night mode; text keeps --fg. */
.scenario-box {
  background: rgba(128,128,128,0.13);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 32px);
  max-width: var(--measure);
  margin: 0 0 var(--sp-5);
}
.scenario-box p { margin: 0; font-size: var(--fs-body); line-height: 1.55; max-width: none; }
.scenario-box p + p { margin-top: 0.9em; }
.scenario-box .section-lead { font-weight: var(--weight-semibold); }


/* Screen 30 (references) — plain white, no photocopy texture */
#screen-30 { background-image: none; background-color: #fff; }

/* Screen 14 — the MIM_Person1 figure sits beside the heading at the heading's
   height, so the accent-row stays as short as the heading. This closes the awkward
   gap that used to sit under the heading (the tall figure was inflating the row)
   and keeps the figure clear of the "None of this is a criticism…" line below. */
#screen-15 .accent-row__art { width: auto; height: clamp(40px, 4.4vw, 52px); align-self: center; }
/* Sit the figure right beside the heading text (not pushed to the far right). */
#screen-15 .accent-row { justify-content: flex-start; align-items: center; gap: clamp(10px, 1.6vw, 18px); }
#screen-15 .accent-row__main { flex: 0 1 auto; }

/* Screen 7 — 87% "opening" black box: portrait fills the box to the edges; the
   white text sits low on the right so the purple highlighter underline isn't clipped. */
#screen-8 .stat--portrait { align-items: stretch; padding: 0; overflow: hidden; gap: 0; max-width: var(--measure); }
#screen-8 .stat--portrait .stat__portrait { width: clamp(150px, 24vw, 280px); align-self: stretch; height: auto; object-fit: cover; border-radius: 0; }
#screen-8 .stat--portrait .stat__text { display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(16px, 2vw, 26px); padding: clamp(26px,3.2vw,44px) clamp(26px,3.2vw,44px) clamp(30px,3.8vw,50px); }


/* Click-to-reveal bullets (slide 23) — revealed marker is the purple arrow, not a dot */
.reveal-bullet.revealed::before {
  content: ""; width: 22px; height: 18px; border-radius: 0; background: none;
  background-image: url('./assets/images/MIM_Arrow1.png');
  background-repeat: no-repeat; background-position: left center; background-size: contain;
}

/* 87% stat box (slide 7) — portrait on the left, figure + sentence on the right */
.stat--portrait { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); }
.stat--portrait .stat__portrait { flex: 0 0 auto; width: clamp(96px, 15vw, 148px); height: auto; border-radius: 12px; object-fit: cover; }
.stat--portrait .stat__text { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) { .stat--portrait { flex-direction: column; align-items: flex-start; } }

/* Infographic decorative portrait, anchored bottom-right (slide 7 igs-card) */
.igs-card { position: relative; }
.igs-card .igs-corner-portrait { position: absolute; right: 0; bottom: 0; width: clamp(110px, 16vw, 190px); height: auto; border-bottom-right-radius: 16px; pointer-events: none; z-index: 1; }
@media (max-width: 720px) { .igs-card .igs-corner-portrait { display: none; } }
#screen-10 .stat { grid-template-columns: auto 1fr; gap: 0 28px; padding: 28px 32px; align-items: center; max-width: var(--measure); }
#screen-10 .stat__figure { font-size: calc(clamp(52px, 7vw, 80px) * var(--fs-scale)); }
#screen-10 .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-39 .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-10 .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 { flex: 0 0 auto; 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; }

/* ── Screen 31: purple arrows on the 3-barriers list ── */
#screen-31 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-33 .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;
}
.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; 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;
  column-gap: clamp(20px, 4vw, 56px); row-gap: clamp(7px, 0.8vw, 13px); align-items: start;
}
/* Centre portrait (3rd of the band) — nudge so the face isn't cropped. */
.lo-p3 { object-position: 42% 28%; }
.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;
}

/* ── PSA accreditation panel on the learning-outcomes screen ──
   Sits under the outcomes in space the screen was already leaving empty, and
   reads as the official footnote it is: stamp, then the competency standards
   this module maps to. Purple hairline, no card fill — the screen is already
   a black photocopy field and a filled box would fight it. */
.lo-accred {
  display: flex; align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  margin-top: clamp(16px, 2.2vw, 30px);
  padding-top: clamp(14px, 1.8vw, 24px);
  border-top: 1px solid rgba(var(--mim-purple-rgb), 0.42);
}
.lo-accred__stamp {
  flex: none; width: clamp(58px, 6.6vw, 100px); height: auto; display: block;
}
.lo-accred__body { min-width: 0; }
.lo-accred__label {
  font-family: var(--font-primary); font-weight: 600;
  font-size: calc(clamp(10px, 0.86vw, 12px) * var(--fs-scale));
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mim-purple);
  margin: 0 0 clamp(7px, 0.9vw, 12px);
}
.lo-accred__stds {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(6px, 0.7vw, 10px);
}
/* Each standard is its own chip — they are five discrete references, not a
   sentence, and chips stop them reading as one number with commas in it. */
.lo-accred__stds li {
  font-family: var(--font-primary); font-weight: 400;
  font-size: calc(clamp(13px, 1.15vw, 16px) * var(--fs-scale));
  line-height: 1;
  color: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 999px;
  padding: clamp(5px, 0.6vw, 8px) clamp(10px, 1.1vw, 15px);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .lo-accred { align-items: flex-start; gap: 14px; }
}

/* 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; }
.screen--lo.lo-play .lo-accred { animation: lo-rise 0.55s cubic-bezier(0.16,1,0.3,1) 0.82s 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); }
}


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


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


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