/* =====================================================================
 * blocks.css - the Mindvalley-structured funnel block library
 *
 * Depends on tokens.css (custom properties) and base.css (.container,
 * .grid-12, type classes, .btn, .card, .pill-badge, .tabular, .sr-only,
 * .section, visibility helpers). Nothing here redefines those.
 *
 * Every class in this file is prefixed mv- and follows BEM:
 *   .mv-block, .mv-block__element, .mv-block--modifier,
 *   .mv-block__element--modifier
 *
 * Breakpoints: md 768px, lg 992px, xl 1280px. Mobile first throughout.
 * lg is 992px in this build, not Tailwind's default 1024px (DESIGN.md 6).
 *
 * CONTENTS
 *   1.  Shared block primitives
 *   2.  header
 *   3.  countdown-timer
 *   4.  promo-banner
 *   5.  hero-event
 *   6.  hero-sales
 *   7.  hero-two-card
 *   8.  stats
 *   9.  speakers-banner
 *   10. call-out
 *   11. problem-statement
 *   11a. programme-intro
 *   12. mechanism
 *   13. speakers
 *   14. event-date-time
 *   15. what-youll-learn
 *   16. agenda
 *   17. register-form
 *   18. key-highlights
 *   19. runs-once-a-year
 *   20. curriculum
 *   21. total-time-required
 *   22. whats-included
 *   23. bonuses
 *   24. student-stories + modal
 *   25. guarantee
 *   26. checkout-card
 *   27. guild
 *   28. questions-answered
 *   29. faqs
 *   30. help-section
 *   31. get-started-footer
 *   32. footer
 *   33. motion preferences
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. Shared block primitives
 * ------------------------------------------------------------------ */

.mv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Calendar buttons on both thank-you pages, written by build.py. */
.mv-calendar-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* A section that sits flush against its neighbours, for bands. */
.mv-section-flush { padding-top: 0; padding-bottom: 0; }

/* Full-bleed background image behind a section. Every block that uses one
   sets position: relative on itself and z-index on its own .container. */
.mv-bg,
.mv-hero-event__bg,
.mv-hero-sales__bg,
.mv-hero-two__bg,
.mv-get-started__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.mv-hero-event__bg img,
.mv-hero-sales__bg img,
.mv-hero-two__bg img,
.mv-get-started__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Structural children: flex and grid items that only need to shrink.
   Grouped here so no block has to repeat the same two declarations. */
.mv-hero-event__copy,
.mv-hero-sales__copy,
.mv-highlights__copy,
.mv-bonuses__copy,
.mv-guarantee__copy,
.mv-help__copy,
.mv-get-started__copy,
.mv-speakers__meta,
.mv-agenda__detail,
.mv-curriculum__week-body,
.mv-stories__body,
.mv-qa__item { min-width: 0; }

.mv-agenda__detail,
.mv-curriculum__week-body { flex: 1 1 auto; }

.mv-time-required__icon { color: var(--color-primary); }
.mv-header__link--login { font-weight: 600; }
.mv-checkout__member-cta { flex: none; }

/* Tick marks read as the accent, never as body text. */
.mv-hero-two__tick,
.mv-included__tick,
.mv-highlights__tick { flex: none; color: var(--color-accent); }

/* ---------------------------------------------------------------------
 * 2. header
 * ------------------------------------------------------------------ */

/* The source ships two headers: a 50px mobile bar with a black-at-10-percent
   bottom rule, and an 80px desktop bar from lg with no rule at all. One
   element here, two states, same values. Nothing is sticky, on either. */
.mv-header {
  position: relative;
  z-index: 60;
  background: var(--color-surface);
  border-bottom: 1px solid #0000001A;
}

.mv-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h-mobile);
}

.mv-header__logo { display: inline-flex; align-items: center; }
.mv-header__logo img { display: block; height: 20px; width: auto; }

/* Nav and burger are written mobile-first with their own display toggle, on
   purpose: base.css also ships .hidden-md-down/.hidden-md-up on this markup,
   but this file loads after base.css and would beat those helper classes at
   equal specificity regardless of which breakpoint they used, showing the
   desktop nav on phones and the burger on desktop. Setting display for both
   states here, at the header's own lg breakpoint, means the header is
   correct even if the helper classes on header.html are ever removed. */
.mv-header__nav { display: none; align-items: center; gap: var(--space-6); }

.mv-header__link {
  color: var(--color-ink-700);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}
.mv-header__link:hover { color: var(--color-primary); }

.mv-header__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-11);
  height: var(--space-11);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-600);
  cursor: pointer;
  transition: color var(--duration) var(--ease);
}
.mv-header__burger[aria-expanded="true"] { color: var(--color-ink-900); }

.mv-header__menu {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-ink-200);
  box-shadow: var(--shadow-card);
}
.mv-header__menu[hidden] { display: none; }

.mv-header__menu-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-6);
}



/* The header's own breakpoint for the mobile/desktop swap. lg is 992px in
   this build (DESIGN.md section 6), not the 768px the .hidden-md-* helpers
   use, so this is written as an explicit media query rather than reused
   from base.css. Burger and menu below lg, nav from lg. */
@media (min-width: 992px) {
  .mv-header { border-bottom: 0; }
  .mv-header__inner { height: var(--header-h); }
  .mv-header__logo img { height: 24px; }
  .mv-header__nav { display: flex; }
  .mv-header__burger { display: none; }
  .mv-header__menu { display: none; }
}

/* ---------------------------------------------------------------------
 * 3. countdown-timer
 * ------------------------------------------------------------------ */

/* The source countdown bar is py-4 at every width and carries no rule of its
   own. This band keeps a hairline top and bottom because it sits between a
   white header and white page copy rather than above a cream strip, which is
   the one place it departs from the source. */
.mv-timer-band {
  border-top: 1px solid var(--color-ink-200);
  border-bottom: 1px solid var(--color-ink-200);
  background: var(--color-surface);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

/* flex-col-reverse on a phone: the DOM order is digits then sentence, so the
   sentence lands first and the digits sit under it. Four two-digit blocks read
   as decoration until you know what they count. */
.mv-timer-band__inner {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.mv-timer-band__sentence { color: var(--color-ink-900); margin: 0; }

/* gap-4 between the digit blocks in the bar, gap-3 in the card. The sizes come
   from the type classes on the markup: title-bold-4 and title-9 in the bar,
   title-bold-5 and title-10 in the card, exactly as the source sets them. */
.mv-timer { display: flex; align-items: center; gap: var(--space-4); }

.mv-timer__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: var(--space-10);
}

.mv-timer__digit {
  color: var(--color-ink-900);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.mv-timer__label {
  margin-top: var(--space-1);
  color: var(--color-ink-700);
  text-align: center;
}

.mv-timer--compact { gap: var(--space-3); }
.mv-timer--compact .mv-timer__unit { min-width: var(--space-8); }

/* When the deadline passes, app.js sets data-expired and leaves the zeros
   in place. Nothing is hidden, nothing is reset, no price changes. */
.mv-timer[data-expired="true"] .mv-timer__digit { color: var(--color-ink-450); }

@media (min-width: 768px) {
  .mv-timer-band__inner {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-6);
  }
}

/* ---------------------------------------------------------------------
 * 4. promo-banner
 * ------------------------------------------------------------------ */

.mv-promo { background: var(--color-accent-tint); }

.mv-promo__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.mv-promo__message { color: var(--color-ink-900); margin: 0; }
.mv-promo__sub { color: var(--color-ink-600); margin: 0; }
.mv-promo__cta { width: 100%; }

@media (min-width: 768px) {
  .mv-promo__inner { flex-direction: row; justify-content: center; gap: var(--space-5); text-align: left; }
  .mv-promo__cta { width: auto; }
}

/* ---------------------------------------------------------------------
 * 5. hero-event
 * ------------------------------------------------------------------ */

/* DESIGN.md section 5: the dark hero band. Both source heroes sit on dark
   art, and the first light-wash version of this recipe was rejected on
   21 Sep 2026 ("does not look like Mindvalley yet"). The band is a
   two-stop gradient off --hero-dark-start and --hero-dark-end painted as
   the ::before, above .mv-hero-event__bg (z-index 0, the optional
   {{HERO_BG_SRC}} art) and below .mv-hero-event__inner (z-index 1). Art
   shows through at low opacity; with no art the band is still dark, so the
   page never depends on art existing. */
.mv-hero-event { position: relative; isolation: isolate; overflow: hidden; }

.mv-hero-event::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--hero-dark-start) 90%, transparent) 0%,
      color-mix(in srgb, var(--hero-dark-end) 84%, transparent) 100%);
}

.mv-hero-event__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.mv-hero-event__copy { color: var(--hero-on-dark-muted); }
.mv-hero-event__eyebrow { color: var(--hero-on-dark-eyebrow); margin: 0 0 var(--space-4); }
.mv-hero-event__headline { color: var(--hero-on-dark); margin: 0 0 var(--space-5); }
.mv-hero-event__sub { color: var(--hero-on-dark-muted); margin: 0 0 var(--space-6); }

.mv-hero-event__media { position: relative; }
.mv-hero-event__media img { width: 100%; height: auto; border-radius: var(--radius-card); display: block; }

.mv-hero-event__video { position: relative; display: block; }

/* The inline player, when HERO_VIDEO_SRC is set. The frame holds the card
   radius so the native controls cannot square off the corners. */
.mv-hero-event__frame {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .45);
}
.mv-hero-event__player { width: 100%; height: auto; display: block; background: #000; }
.mv-hero-event__play,
.mv-hero-sales__play,
.mv-qa__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-surface);
  transition: transform var(--duration) var(--ease);
}
.mv-hero-event__video:hover .mv-hero-event__play,
.mv-hero-sales__video:hover .mv-hero-sales__play,
.mv-qa__video-link:hover .mv-qa__play { transform: scale(1.06); }

.mv-hero-event__caption { color: var(--color-ink-500); margin: var(--space-3) 0 0; text-align: center; }

/* A light panel floating on the dark band needs no shadow to separate. */
.mv-hero-event__panel { padding: var(--space-6); background: var(--color-card); box-shadow: none; }

.mv-hero-event__panel-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.mv-hero-event__live { display: inline-flex; align-items: center; gap: var(--space-2); }
.mv-hero-event__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-success);
  flex: none;
}

.mv-hero-event__panel-line { color: var(--color-ink-600); margin: 0 0 var(--space-4); }

@media (min-width: 992px) {
  .mv-hero-event__inner {
    display: grid;
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: var(--space-10);
  }
  .mv-hero-event__panel { padding: var(--space-8); }
}

/* ---------------------------------------------------------------------
 * 6. hero-sales
 * ------------------------------------------------------------------ */

/* Same wash as hero-event; see the comment there. */
.mv-hero-sales { position: relative; isolation: isolate; overflow: hidden; }

.mv-hero-sales::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--hero-dark-start) 90%, transparent) 0%,
      color-mix(in srgb, var(--hero-dark-end) 84%, transparent) 100%);
}

/* The source mastery hero is centred: eyebrow, h1, sub, dated line, one
   CTA, then the video or key art under the copy at about 860px. Copy left
   and media right was the first cut of this recipe and was rejected. */
.mv-hero-sales__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-8);
}

.mv-hero-sales__copy { max-width: 860px; }
.mv-hero-sales__eyebrow {
  color: var(--hero-on-dark-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
/* Size and line height come from .title-bold-2 in base.css. */
.mv-hero-sales__headline { color: var(--hero-on-dark); margin: 0 0 var(--space-5); }
.mv-hero-sales__sub { color: var(--hero-on-dark-muted); max-width: 760px; margin: 0 auto var(--space-5); }
.mv-hero-sales__cohort { color: var(--hero-on-dark-line); margin: 0 0 var(--space-6); }
/* A CTA sitting straight on the dark band takes the accent gradient, the
   shadow-md at rest and the shadow-lg on hover, which is .btn-accent in
   base.css. All this rule does is make it full width on a phone. */
.mv-hero-sales__cta { width: 100%; }
.mv-hero-sales__note { color: var(--hero-on-dark-muted); opacity: .8; margin: var(--space-3) 0 0; }

.mv-hero-sales__media { width: 100%; max-width: 860px; }
.mv-hero-sales__media img { width: 100%; height: auto; display: block; border-radius: var(--radius-card); box-shadow: 0 28px 64px rgba(0, 0, 0, .45); }
.mv-hero-sales__video { position: relative; display: block; }

/* The inline player, when HERO_VIDEO_SRC is set. Same radius and shadow as
   the still it replaces; the frame clips the native controls to the corners. */
.mv-hero-sales__frame {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .45);
}
.mv-hero-sales__player { width: 100%; height: auto; display: block; background: #000; }
.mv-hero-sales__caption { color: var(--hero-on-dark-muted); opacity: .8; margin: var(--space-3) 0 0; text-align: center; }

@media (min-width: 768px) { .mv-hero-sales__cta { width: auto; margin-inline: auto; } }


/* ---------------------------------------------------------------------
 * 7. hero-two-card
 * ------------------------------------------------------------------ */

.mv-hero-two { position: relative; overflow: hidden; }

/* The source's two-card hero is an outer cell with column-gap 0 and one
   16px radius plus overflow hidden, so the halves butt together with no seam
   and no shadow. The vertical padding lives on the section, not here. */
.mv-hero-two__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.mv-hero-two__stack {
  padding: var(--space-7);
  background: var(--color-card);
}

.mv-hero-two__headline { color: var(--color-ink-900); margin: 0 0 var(--space-8); }

.mv-hero-two__group {
  color: var(--color-ink-600);
  margin: var(--space-8) 0 var(--space-3);
}
.mv-hero-two__group:first-of-type { margin-top: 0; }

.mv-hero-two__list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.mv-hero-two__item { display: flex; align-items: flex-start; gap: var(--space-4); color: var(--color-ink-600); }

.mv-hero-two__total { margin: var(--space-6) 0 0; color: var(--color-ink-900); }

.mv-hero-two__checkout { display: flex; }
.mv-hero-two__checkout > * { width: 100%; }

/* md:px-14 md:py-12 on the copy half, from 768px as the source sets it. */
@media (min-width: 768px) {
  .mv-hero-two__stack { padding: var(--space-12) var(--space-14); }
}

@media (min-width: 992px) {
  .mv-hero-two__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* ---------------------------------------------------------------------
 * 8. stats
 * ------------------------------------------------------------------ */

.mv-stats__row {
  list-style: none;
  margin: 0;
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-ink-100);
  border-radius: var(--radius-card);
}

.mv-stats__item { display: flex; align-items: center; gap: var(--space-3); }
.mv-stats__icon { flex: none; display: inline-flex; color: var(--color-primary); }
.mv-stats__text { display: flex; flex-direction: column; }
.mv-stats__figure { color: var(--color-ink-900); }
.mv-stats__label { color: var(--color-ink-500); text-transform: uppercase; letter-spacing: .04em; }

@media (min-width: 768px) {
  .mv-stats__row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0; padding: var(--space-9) var(--space-4); }
  .mv-stats__item { padding-inline: var(--space-8); border-left: 1px solid var(--color-ink-250); }
  .mv-stats__item:first-child { border-left: 0; }
}

/* ---------------------------------------------------------------------
 * 9. speakers-banner
 * ------------------------------------------------------------------ */

.mv-speakers-banner__img { width: 100%; height: auto; display: block; border-radius: var(--radius-card); }
.mv-speakers-banner__caption { margin: var(--space-3) 0 0; color: var(--color-ink-500); text-align: center; }

/* ---------------------------------------------------------------------
 * 10. call-out
 * ------------------------------------------------------------------ */

.mv-callout__inner { max-width: 760px; }
.mv-callout__headline { margin: 0 0 var(--space-6); color: var(--color-ink-900); }
.mv-callout__para { margin: 0 0 var(--space-5); color: var(--color-ink-700); }

.mv-callout__quote {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  border-left: 3px solid var(--color-primary);
  background: var(--tint-violet);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.mv-callout__quote-mark { color: var(--color-primary); margin-bottom: var(--space-2); }
.mv-callout__quote blockquote { margin: 0 0 var(--space-3); color: var(--color-ink-900); }
.mv-callout__quote figcaption { color: var(--color-ink-500); }

.mv-callout__closer { margin: var(--space-6) 0 0; color: var(--color-ink-900); }

/* ---------------------------------------------------------------------
 * 11. problem-statement
 * ------------------------------------------------------------------ */

.mv-problem__inner { max-width: 760px; }
.mv-problem__headline { margin: 0 0 var(--space-6); color: var(--color-ink-900); }
.mv-problem__body > p { margin: 0 0 var(--space-5); color: var(--color-ink-700); }
.mv-problem__body > p:last-child { margin-bottom: 0; }
.mv-problem__img { width: 100%; height: auto; display: block; margin-top: var(--space-8); border-radius: var(--radius-card); }

/* ---------------------------------------------------------------------
 * 11a. programme-intro
 * ------------------------------------------------------------------ */

/* Same 760px measure, spacing and colours as problem-statement, because the
   two blocks are read as one movement: the loss, then the thing that fixes
   it, named. The bold phrases inside the paragraphs are the mechanism, the
   credentials and the deliverable, so they step up to ink-900. */
.mv-intro__inner { max-width: 760px; }
.mv-intro__headline { margin: 0 0 var(--space-3); color: var(--color-ink-900); }
.mv-intro__sub { margin: 0 0 var(--space-6); color: var(--color-ink-600); }
.mv-intro__body > p { margin: 0 0 var(--space-5); color: var(--color-ink-700); }
.mv-intro__body > p:last-child { margin-bottom: 0; }
.mv-intro__body strong { color: var(--color-ink-900); }

/* ---------------------------------------------------------------------
 * 12. mechanism
 * ------------------------------------------------------------------ */

.mv-mechanism { background: var(--color-ink-100); }
.mv-mechanism__headline { margin: 0 0 var(--space-3); text-align: center; color: var(--color-ink-900); }
.mv-mechanism__sub { margin: 0 0 var(--space-6); text-align: center; color: var(--color-ink-600); }

.mv-mechanism__seq {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-8);
  color: var(--color-ink-500);
}
.mv-mechanism__seq-item + .mv-mechanism__seq-item::before {
  content: "\2192";
  margin-right: var(--space-2);
  color: var(--color-ink-450);
}

.mv-mechanism__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.mv-mechanism__stage {
  flex: 1 1 100%;
  padding: var(--space-6);
  background: var(--color-card);
}

.mv-mechanism__num { display: block; color: var(--color-primary); margin-bottom: var(--space-2); }
.mv-mechanism__name { color: var(--color-ink-500); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--space-2); }
.mv-mechanism__title { margin: 0 0 var(--space-4); color: var(--color-ink-900); }
.mv-mechanism__problem { margin-bottom: var(--space-4); }
.mv-mechanism__problem p:last-child,
.mv-mechanism__build p:last-child { margin: 0; color: var(--color-ink-600); }
.mv-mechanism__label { margin: 0 0 var(--space-1); text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-450); }
.mv-mechanism__label--build { color: var(--color-accent-text); }

@media (min-width: 768px) { .mv-mechanism__stage { flex: 1 1 calc(50% - var(--space-4)); } }
@media (min-width: 992px) { .mv-mechanism__stage { flex: 1 1 calc(33.333% - var(--space-4)); max-width: 380px; } }
/* The source runs all five stages across one row at desktop; three plus two
   reads as two ideas. Five across from 1200px, each stage at least 200px. */
@media (min-width: 1200px) { .mv-mechanism__stage { flex: 1 1 calc(20% - var(--space-4)); min-width: 200px; max-width: none; } }

/* ---------------------------------------------------------------------
 * 13. speakers
 * ------------------------------------------------------------------ */

.mv-speakers__headline { margin: 0 0 var(--space-3); color: var(--color-ink-900); }
.mv-speakers__sub { margin: 0 0 var(--space-8); color: var(--color-ink-600); }

.mv-speakers__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.mv-speakers__card { padding: var(--space-6); background: var(--color-card); }
.mv-speakers__photo { width: 96px; height: 96px; border-radius: var(--radius-card); object-fit: cover; display: block; margin-bottom: var(--space-4); }
.mv-speakers__name { margin: 0 0 var(--space-1); color: var(--color-ink-900); }
.mv-speakers__role { margin: 0 0 var(--space-3); color: var(--color-ink-500); }
.mv-speakers__bio { margin: 0; color: var(--color-ink-600); }

@media (min-width: 768px) { .mv-speakers__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .mv-speakers__grid { grid-template-columns: repeat(3, 1fr); } }

/* One teacher: a single card in a three-column grid looks abandoned, so an
   only child becomes one wide card, photo left, centred at 860px. */
.mv-speakers__card:only-child { grid-column: 1 / -1; max-width: 860px; margin-inline: auto; width: 100%; }
@media (min-width: 600px) {
  .mv-speakers__card:only-child { display: grid; grid-template-columns: 168px 1fr; column-gap: var(--space-6); align-items: center; }
  .mv-speakers__card:only-child .mv-speakers__photo { width: 168px; height: 168px; grid-row: 1 / 3; margin: 0; }
}

/* ---------------------------------------------------------------------
 * 14. event-date-time
 * ------------------------------------------------------------------ */

.mv-times__inner { text-align: center; }
.mv-times__platform { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); color: var(--color-ink-600); }
.mv-times__icon { color: var(--color-primary); }
.mv-times__date { margin: 0 0 var(--space-8); color: var(--color-ink-900); }

.mv-times__grid { margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.mv-times__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink-100);
  border-radius: var(--radius-card);
}
.mv-times__city { margin: 0; color: var(--color-ink-900); }
.mv-times__flag { margin-right: var(--space-1); }
.mv-times__slot { margin: 0; color: var(--color-ink-600); }
.mv-times__note { margin: var(--space-4) 0 0; color: var(--color-ink-500); }

@media (min-width: 768px) { .mv-times__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (min-width: 992px) { .mv-times__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------
 * 15. what-youll-learn
 * ------------------------------------------------------------------ */

.mv-learn__inner { max-width: 860px; }
.mv-learn__headline { margin: 0 0 var(--space-3); color: var(--color-ink-900); }
.mv-learn__sub { margin: 0 0 var(--space-8); color: var(--color-ink-600); }

.mv-learn__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.mv-learn__item { display: flex; align-items: flex-start; gap: var(--space-4); }
.mv-learn__num { flex: none; width: var(--space-10); color: var(--color-primary); }
.mv-learn__title { margin: 0 0 var(--space-2); color: var(--color-ink-900); }
.mv-learn__body p { margin: 0; color: var(--color-ink-600); }

/* ---------------------------------------------------------------------
 * 16. agenda
 * ------------------------------------------------------------------ */

.mv-agenda__headline { margin: 0 0 var(--space-3); color: var(--color-ink-900); }
.mv-agenda__sub { margin: 0 0 var(--space-5); color: var(--color-ink-600); }

.mv-agenda__zones { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mv-agenda__zone { color: var(--color-ink-700); }

.mv-agenda__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.mv-agenda__tabs[hidden] { display: none; }

.mv-agenda__tab {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-ink-250);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-700);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.mv-agenda__tab:hover { border-color: var(--color-ink-450); }
.mv-agenda__tab[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--tint-violet);
  color: var(--color-primary-deep);
}

.mv-agenda__days { display: flex; flex-direction: column; gap: var(--space-10); }
.mv-agenda__day[hidden] { display: none; }

.mv-agenda__banner {
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-primary);
  margin-bottom: var(--space-6);
}
.mv-agenda__banner--accent { background: var(--color-accent); }
.mv-agenda__banner--deep { background: var(--color-primary-deep); }
.mv-agenda__day-title { margin: 0; color: var(--color-surface); }
.mv-agenda__day-sub { margin: var(--space-1) 0 0; color: var(--color-surface); opacity: .82; }

.mv-agenda__sessions { display: flex; flex-direction: column; gap: var(--space-8); }

.mv-agenda__session { display: flex; flex-direction: column; gap: var(--space-3); }
.mv-agenda__when { display: flex; align-items: center; gap: var(--space-3); }
.mv-agenda__time {
  margin: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--color-ink-100);
  border-radius: var(--radius-pill);
  color: var(--color-ink-600);
}
.mv-agenda__zone-note { margin: 0; color: var(--color-ink-500); }

.mv-agenda__what { display: flex; gap: var(--space-3); }
.mv-agenda__face { flex: none; width: 60px; height: 60px; border-radius: var(--radius-card); object-fit: cover; display: none; }
.mv-agenda__session-title { margin: 0 0 var(--space-1); color: var(--color-ink-900); }
.mv-agenda__speaker { margin: 0 0 var(--space-1); color: var(--color-ink-500); }
.mv-agenda__session-text { margin: 0; color: var(--color-ink-600); }

@media (min-width: 768px) {
  .mv-agenda__session { display: grid; grid-template-columns: 2fr 8fr; gap: var(--space-6); }
  .mv-agenda__when { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .mv-agenda__time { background: transparent; padding: 0; }
  .mv-agenda__face { display: block; }
  .mv-agenda__banner { padding: var(--space-6); }
}

/* ---------------------------------------------------------------------
 * 17. register-form
 * ------------------------------------------------------------------ */

.mv-form { display: flex; flex-direction: column; gap: var(--space-4); }

.mv-form__field { position: relative; }
.mv-form__field--grow { flex: 1 1 auto; min-width: 0; }
.mv-form__field--phone { display: flex; gap: var(--space-2); }

.mv-form__input,
.mv-form__select {
  width: 100%;
  height: 48px;
  padding: var(--space-5) var(--space-4) var(--space-1);
  border: 1px solid var(--color-ink-250);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  font-family: var(--font-body);
  color: var(--color-ink-900);
  transition: border-color var(--duration) var(--ease);
}
.mv-form__select { padding: 0 var(--space-3); }
.mv-form__input:hover { border-color: var(--color-ink-450); }
.mv-form__input:focus { outline: none; border-color: var(--color-primary); }
.mv-form__input[aria-invalid="true"] { border-color: var(--color-accent); }

.mv-form__label {
  position: absolute;
  left: var(--space-4);
  top: var(--space-1);
  font-size: 12px;
  color: var(--color-ink-450);
  pointer-events: none;
  transition: transform var(--duration) var(--ease), font-size var(--duration) var(--ease);
}
.mv-form__input:placeholder-shown + .mv-form__label {
  font-size: 15px;
  transform: translateY(var(--space-3));
}

.mv-form__dial { flex: none; }

/* Honeypot. Hidden from people and from assistive technology, present in the
   DOM for bots. Never display: none on the input itself, some bots skip those. */
.mv-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mv-form__error { margin: 0; color: var(--color-accent-text); }
.mv-form__error[hidden] { display: none; }

.mv-form__submit { width: 100%; }
.mv-form__urgency { margin: 0; text-align: center; color: var(--color-ink-700); }
.mv-form__consent { margin: 0; color: var(--color-ink-500); }
.mv-form__consent a { color: var(--color-primary); }

/* Date choice, added 23 Sep 2026. A required radio group styled as a row of
   selectable cards, the same border/radius language as .mv-form__input, so a
   registration page can collect the date in the same hero form instead of a
   second step. Stacks to one column below 480px. */
.mv-form__dates {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.mv-form__dates-legend {
  position: static;
  display: block;
  width: 100%;
  font-size: 12px;
  color: var(--color-ink-450);
  margin: 0 0 var(--space-1);
}
.mv-form__date-option {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-ink-250);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-ink-900);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.mv-form__date-option:hover { border-color: var(--color-ink-450); }
.mv-form__date-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--tint-violet);
}
.mv-form__date-option:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.mv-form__date-option input { accent-color: var(--color-primary); flex: none; }


/* ---------------------------------------------------------------------
 * 18. key-highlights
 * ------------------------------------------------------------------ */

.mv-highlights__headline { margin: 0 0 var(--space-8); color: var(--color-ink-900); }
.mv-highlights__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); }

.mv-highlights__item { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); border-radius: var(--radius-card); }
/* The source tints each row; rows cycle blue, green, yellow, then primary tint. */
.mv-highlights__item:nth-child(4n+1) { background: var(--tint-blue); }
.mv-highlights__item:nth-child(4n+2) { background: var(--tint-green); }
.mv-highlights__item:nth-child(4n+3) { background: var(--tint-yellow); }
.mv-highlights__item:nth-child(4n+4) { background: var(--tint-violet); }
.mv-highlights__media img { width: 100%; height: auto; display: block; border-radius: var(--radius-card); }
.mv-highlights__num { margin: 0 0 var(--space-2); color: var(--color-primary); }
.mv-highlights__title { margin: 0 0 var(--space-3); color: var(--color-ink-600); }
.mv-highlights__text { margin: 0 0 var(--space-4); color: var(--color-ink-500); }

.mv-highlights__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mv-highlights__point { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-ink-500); }

.mv-highlights__media img { width: 100%; height: auto; display: block; border-radius: var(--radius-card); }

@media (min-width: 992px) {
  .mv-highlights__item { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: var(--space-10); }
  .mv-highlights__item:nth-child(even) .mv-highlights__copy { order: 2; }
}

/* ---------------------------------------------------------------------
 * 19. runs-once-a-year
 * ------------------------------------------------------------------ */

/* The source sets this block as quiet centred text on white, the cohort
   line in primary. The first cut of this recipe put it on a loud primary-tint
   band, which shouted over the checkout card below it. */
.mv-once__inner {
  text-align: center;
}
.mv-once__headline { margin: 0 0 var(--space-2); color: var(--color-ink-900); }
.mv-once__cohort { margin: 0 0 var(--space-4); color: var(--color-primary); }
.mv-once__detail { margin: 0 auto; max-width: 620px; color: var(--color-ink-700); }
.mv-once__cta { margin-top: var(--space-6); }

/* ---------------------------------------------------------------------
 * 20. curriculum
 * ------------------------------------------------------------------ */

.mv-curriculum__headline { margin: 0 0 var(--space-6); color: var(--color-ink-900); }
.mv-curriculum__intro { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-8); }
.mv-curriculum__text { margin: 0; color: var(--color-ink-700); }
.mv-curriculum__img { width: 100%; height: auto; display: block; border-radius: var(--radius-card); }

.mv-curriculum__nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.mv-curriculum__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-ink-250);
  border-radius: var(--radius-pill);
  color: var(--color-ink-700);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.mv-curriculum__pill:hover { border-color: var(--color-primary); color: var(--color-primary-deep); }
.mv-curriculum__weeks { color: var(--color-ink-450); }

.mv-curriculum__list { display: flex; flex-direction: column; gap: var(--space-3); }

.mv-curriculum__pillar {
  border: 1px solid var(--color-ink-250);
  border-radius: var(--radius-card);
  background: var(--color-card);
  overflow: hidden;
}
.mv-curriculum__pillar[data-state="open"] { border-color: var(--color-primary); }

.mv-curriculum__head-wrap { margin: 0; }
.mv-curriculum__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.mv-curriculum__head-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.mv-curriculum__kicker { color: var(--color-primary); text-transform: uppercase; letter-spacing: .06em; }
.mv-curriculum__title { color: var(--color-ink-900); }
.mv-curriculum__promise { color: var(--color-ink-500); }
.mv-curriculum__range { flex: none; color: var(--color-ink-450); }
.mv-curriculum__chevron { flex: none; color: var(--color-ink-500); transition: transform var(--duration) var(--ease); }
.mv-curriculum__head[aria-expanded="true"] .mv-curriculum__chevron { transform: rotate(180deg); }

.mv-curriculum__panel { padding: 0 var(--space-5) var(--space-5); }
.mv-curriculum__panel[hidden] { display: none; }

.mv-curriculum__rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.mv-curriculum__week { display: flex; gap: var(--space-4); }
.mv-curriculum__week-num {
  flex: none;
  width: var(--space-8);
  height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--tint-violet);
  color: var(--color-primary-deep);
  font-family: var(--font-display);
}
.mv-curriculum__week-label { margin: 0 0 var(--space-1); color: var(--color-ink-450); text-transform: uppercase; letter-spacing: .06em; }
.mv-curriculum__week-title { margin: 0 0 var(--space-1); color: var(--color-ink-900); }
.mv-curriculum__week-text { margin: 0; color: var(--color-ink-600); }
.mv-curriculum__deliverable { margin: var(--space-2) 0 0; color: var(--color-ink-700); }

/* Who teaches the week. Same treatment as the agenda's session face, round
   rather than square because it sits beside body copy instead of above it,
   and pushed to the right edge so the week number, the text and the face read
   as three columns. Hidden on a phone, where the row has no room for it. */
.mv-curriculum__week-speaker { margin: var(--space-2) 0 0; color: var(--color-ink-500); }
.mv-curriculum__week-face {
  flex: none;
  width: 56px;
  height: 56px;
  margin-left: auto;
  align-self: flex-start;
  border-radius: var(--radius-pill);
  object-fit: cover;
  display: none;
}

@media (min-width: 768px) {
  .mv-curriculum__week-face { display: block; }
}

@media (min-width: 992px) {
  .mv-curriculum__intro { display: grid; grid-template-columns: 7fr 5fr; align-items: center; gap: var(--space-10); }
}

/* ---------------------------------------------------------------------
 * 21. total-time-required
 * ------------------------------------------------------------------ */

.mv-time-required__inner { max-width: 720px; }
.mv-time-required__overline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mv-time-required__figure { margin: 0 0 var(--space-4); color: var(--color-ink-900); }
.mv-time-required__number { color: var(--color-primary-deep); }
.mv-time-required__unit { color: var(--color-ink-700); }
.mv-time-required__breakdown,
.mv-time-required__schedule { margin: 0 0 var(--space-4); color: var(--color-ink-600); }
.mv-time-required__missed { margin: 0; color: var(--color-ink-500); }

/* ---------------------------------------------------------------------
 * 22. whats-included
 * ------------------------------------------------------------------ */

/* A white card on white separates with a hairline, not a shadow. The source
   carries exactly two shadows on the whole page, the story cards and the CTA. */
.mv-included__inner {
  max-width: 760px;
  padding: var(--space-8) var(--space-6);
  background: var(--color-card);
  border: 1px solid var(--color-ink-250);
  border-radius: var(--radius-card);
}
.mv-included__headline { margin: 0 0 var(--space-3); color: var(--color-ink-900); }
.mv-included__sub { margin: 0 0 var(--space-6); color: var(--color-ink-600); }

.mv-included__group { margin-bottom: var(--space-6); }
.mv-included__group-heading { margin: 0 0 var(--space-3); color: var(--color-ink-600); }
.mv-included__worth { color: var(--color-ink-450); }

.mv-included__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mv-included__line { display: flex; align-items: flex-start; gap: var(--space-4); }
.mv-included__text { color: var(--color-ink-600); }
.mv-included__value { color: var(--color-ink-450); }
.mv-included__flag {
  margin-left: var(--space-2);
  background: var(--color-accent-tint);
  color: var(--color-accent-text);
}
.mv-included__total { margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-ink-200); color: var(--color-ink-900); }
.mv-included__cta { margin-top: var(--space-6); width: 100%; }

/* ---------------------------------------------------------------------
 * 23. bonuses
 * ------------------------------------------------------------------ */

.mv-bonuses__headline { margin: 0 0 var(--space-3); color: var(--color-ink-900); }
.mv-bonuses__sub { margin: 0 0 var(--space-8); color: var(--color-ink-600); }
.mv-bonuses__group { margin-bottom: var(--space-12); }
.mv-bonuses__group-heading { margin: 0 0 var(--space-5); color: var(--color-ink-900); }

.mv-bonuses__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-10); }
.mv-bonuses__item { display: flex; flex-direction: column; gap: var(--space-5); }
.mv-bonuses__media img { width: 100%; height: auto; display: block; border-radius: var(--radius-card); }
.mv-bonuses__flag { background: var(--color-accent-tint); color: var(--color-accent-text); margin-bottom: var(--space-2); display: inline-flex; }
.mv-bonuses__title { margin: 0 0 var(--space-1); color: var(--color-ink-900); }
.mv-bonuses__worth { margin: 0 0 var(--space-3); color: var(--color-ink-500); }
.mv-bonuses__text { margin: 0; color: var(--color-ink-600); }
.mv-bonuses__deadline { margin: var(--space-3) 0 0; color: var(--color-ink-700); }

@media (min-width: 992px) {
  .mv-bonuses__item { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: var(--space-8); }
}

/* ---------------------------------------------------------------------
 * 24. student-stories + modal
 * ------------------------------------------------------------------ */

.mv-stories__headline { margin: 0 0 var(--space-3); color: var(--color-ink-900); }
.mv-stories__sub { margin: 0 0 var(--space-6); color: var(--color-ink-600); }

/* Mobile: a snapping rail where the next card peeks at 85%.
   md: two up at 46%. lg: a plain three column grid, no scrolling. */
/* ul.<class> rather than .<class>: base.css zeroes the padding of every
   classed list, and at equal specificity it would win. Without the padding the
   bottom of the rail clips the card shadow. */
ul.mv-stories__rail {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-8) 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(85% - var(--space-2));
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.mv-stories__rail::-webkit-scrollbar { display: none; }

/* The card carries .card for the 16px radius and the one page shadow it is
   allowed, and .card-bare because its own body and footer set the padding. */
.mv-stories__card {
  display: flex;
  flex-direction: column;
  scroll-snap-align: center;
  border: 1px solid var(--color-ink-250);
  background: var(--color-surface);
  overflow: hidden;
}

/* One photo, two crops, never both at once. The source shows the 400px square
   from 768px (hidden md:block) and the 64px face below it (md:hidden). */
.mv-stories__hero { display: none; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.mv-stories__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-6) 0; }
.mv-stories__quote { margin: 0; color: var(--color-ink-900); }
.mv-stories__link { color: inherit; text-decoration: none; }
.mv-stories__link:hover { text-decoration: underline; text-decoration-color: var(--color-primary); }
.mv-stories__excerpt { margin: 0; color: var(--color-ink-600); }

.mv-stories__more {
  align-self: flex-start;
  margin-bottom: var(--space-4);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  cursor: pointer;
}
.mv-stories__more:hover { text-decoration: underline; }

.mv-stories__author { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-6); }
.mv-stories__face { width: 64px; height: 64px; border-radius: var(--radius-modal); object-fit: cover; flex: none; }
.mv-stories__name { margin: 0 0 var(--space-1); color: var(--color-ink-600); }
.mv-stories__role { margin: 0 0 var(--space-1); color: var(--color-ink-500); }
.mv-stories__city { margin: 0; color: var(--color-ink-450); }

@media (min-width: 768px) {
  ul.mv-stories__rail { grid-auto-columns: calc(46% - var(--space-3)); }
  .mv-stories__hero { display: block; }
  .mv-stories__face { display: none; }
}
@media (min-width: 992px) {
  ul.mv-stories__rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    gap: var(--space-6);
    overflow: visible;
    padding-right: 0;
  }
}

/* Modal */
.mv-modal__backdrop { position: fixed; inset: 0; z-index: 80; background: var(--color-backdrop); }
.mv-modal__positioner {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
/* rounded-lg is 24px in this build, and the head and the scroll body set the
   padding, so the card's own ladder is switched off with .card-bare. */
.mv-modal__content {
  position: relative;
  width: 100%;
  max-width: 1000px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.mv-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-ink-200);
}
.mv-modal__eyebrow { margin: 0; color: var(--color-ink-500); }
.mv-modal__close {
  flex: none;
  display: inline-flex;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-ink-700);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}
.mv-modal__close:hover { background: var(--color-ink-100); }

.mv-modal__scroll { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); overflow-y: auto; }
.mv-modal__img { width: 120px; height: 120px; border-radius: var(--radius-card); object-fit: cover; flex: none; }
.mv-modal__title { margin: 0 0 var(--space-4); color: var(--color-ink-900); }
.mv-modal__body { margin: 0 0 var(--space-6); color: var(--color-ink-600); }
.mv-modal__name { margin: 0; color: var(--color-ink-700); }
.mv-modal__role { margin: 0; color: var(--color-ink-500); }
.mv-modal__city { margin: 0; color: var(--color-ink-450); }

@media (min-width: 768px) {
  .mv-modal__scroll { flex-direction: row; }
  .mv-modal__img { width: 256px; height: 256px; position: sticky; top: 0; }
  .mv-modal__text { flex: 1 1 auto; min-width: 0; }
}

/* ---------------------------------------------------------------------
 * 25. guarantee
 * ------------------------------------------------------------------ */

/* p-6 md:p-10 lg:p-14, rounded-2xl, and the only inset block on the page:
   ten of twelve columns from 768px, set on the cell in guarantee.html. */
.mv-guarantee__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--tint-violet);
}
.mv-guarantee__badge { width: 80px; height: auto; flex: none; }
.mv-guarantee__name { margin: 0 0 var(--space-2); color: var(--color-ink-900); }
.mv-guarantee__body { margin: 0 0 var(--space-3); color: var(--color-ink-700); }
.mv-guarantee__dates { margin: 0; color: var(--color-ink-900); }
.mv-guarantee__how { margin: var(--space-3) 0 0; color: var(--color-ink-700); }

@media (min-width: 768px) {
  .mv-guarantee__panel { flex-direction: row; align-items: center; gap: var(--space-6); padding: var(--space-10); }
}

@media (min-width: 992px) {
  .mv-guarantee__panel { padding: var(--space-14); }
  .mv-guarantee__badge { width: 160px; }
}

/* ---------------------------------------------------------------------
 * 26. checkout-card
 * ------------------------------------------------------------------ */

/* The source checkout panel carries no shadow and no border. It separates
   from the copy half by its own gradient, white at 90 percent falling to
   #DEDEDECF, and the halves are clipped by the hero card's radius. Padding
   lives on __inner: pt-6 pb-7 px-7, md:pb-12. */
.mv-checkout {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--color-card), #DEDEDECF 156.08%);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.mv-checkout__inner {
  padding: var(--space-6) var(--space-7) var(--space-7);
}

/* Source: flex flex-col lg:flex-row lg:items-center lg:gap-4 mb-5. The clock
   is order-1 lg:order-2 with mb-3 lg:mb-0, the art order-2 lg:order-1, and
   each is lg:w-1/2. flex 1 1 0 gives the same halves and lets the clock take
   the whole row when a brief carries no key art. */
.mv-checkout__top { display: flex; flex-direction: column; margin-bottom: var(--space-5); }
.mv-checkout__clock { order: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.mv-checkout__deadline { margin: 0; color: var(--color-ink-900); text-align: center; }
.mv-checkout__art { order: 2; width: 100%; height: auto; display: block; border-radius: var(--radius-card); }

@media (min-width: 992px) {
  .mv-checkout__top { flex-direction: row; align-items: center; gap: var(--space-4); }
  .mv-checkout__art { order: 1; flex: 1 1 0; min-width: 0; }
  .mv-checkout__clock { order: 2; flex: 1 1 0; min-width: 0; margin-bottom: 0; }
}

/* The price card is the same object as a radio option: p-4, 16px radius,
   white at 90 percent, and the almost invisible option shadow. No border. */
.mv-checkout__price {
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-option);
}
/* py-1 px-2 on a 4px radius, not a pill. The source pill is teal; Sabrina has
   no teal, so it takes the deeper of her two violets, the same step as the
   list tick. */
.mv-checkout__save {
  background: var(--color-success);
  color: var(--color-surface);
  margin-bottom: var(--space-2);
  display: inline-flex;
  border-radius: 4px;
  padding: var(--space-1) var(--space-2);
}
.mv-checkout__figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-1); }
.mv-checkout__anchor { color: var(--color-ink-450); text-decoration: line-through; }
.mv-checkout__now { color: var(--color-ink-900); }
.mv-checkout__terms { margin: 0; color: var(--color-ink-900); }

.mv-checkout__rule { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.mv-checkout__rule::before,
.mv-checkout__rule::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--color-ink-300); }
.mv-checkout__heading { margin: 0; flex: none; color: var(--color-ink-600); }

.mv-checkout__options { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }

.mv-checkout__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px solid var(--color-ink-200);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease);
}
.mv-checkout__option:hover { border-color: var(--color-ink-300); }
.mv-checkout__option--checked,
.mv-checkout__option[data-state="checked"] { border-color: var(--color-accent); }
.mv-checkout__option:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.mv-checkout__control {
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink-300);
  border-radius: var(--radius-pill);
  transition: border-color var(--duration) var(--ease);
}
.mv-checkout__control[data-state="checked"] { border-color: transparent; }
.mv-checkout__indicator { display: none; color: var(--color-accent); }
.mv-checkout__control[data-state="checked"] .mv-checkout__indicator { display: inline-flex; }

.mv-checkout__option-body { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.mv-checkout__option-copy { display: flex; flex-direction: column; min-width: 0; }
.mv-checkout__option-label { color: var(--color-ink-900); }
.mv-checkout__option-sub { color: var(--color-ink-500); }

.mv-checkout__marks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); flex: none; }
.mv-checkout__mark { color: var(--color-ink-450); }

/* Brand marks paint their own scheme colours instead of currentColor, so the
   resting grey does not reach them. The white plate keeps a red, an amber or a
   deep blue legible whatever surface the card is sitting on. */
.mv-checkout__mark--brand { background: #fff; border-radius: 3px; }

.mv-checkout__cta { width: 100%; margin-bottom: var(--space-3); }

.mv-checkout__fineprint {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-1);
  max-width: 280px;
  margin: var(--space-3) auto 0;
  text-align: center;
  color: var(--color-ink-500);
}
.mv-checkout__lock { flex: none; margin-top: 2px; }

/* mt-auto pins the strip to the foot of the card. px-10 py-4 at every width,
   on solid white, which is what lifts it off the panel gradient above it. */
.mv-checkout__member {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-10);
  background: var(--color-surface);
}
.mv-checkout__member-line { margin: 0; color: var(--color-ink-900); }
.mv-checkout__member-sub { margin: 0; color: var(--color-ink-600); }

@media (min-width: 768px) {
  .mv-checkout__inner { padding-bottom: var(--space-12); }
  .mv-checkout__member { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------------------------------------------------------------------
 * 27. guild
 * ------------------------------------------------------------------ */

.mv-guild { background: var(--tint-violet); }
.mv-guild__inner { max-width: 760px; text-align: center; }
.mv-guild__headline { margin: 0 0 var(--space-4); color: var(--color-ink-900); }
.mv-guild__para { margin: 0 0 var(--space-4); color: var(--color-ink-700); }
.mv-guild__cta { margin-top: var(--space-2); }
.mv-guild__closer { margin: var(--space-4) 0 0; color: var(--color-ink-700); }

/* ---------------------------------------------------------------------
 * 28. questions-answered
 * ------------------------------------------------------------------ */

.mv-qa__inner { max-width: 860px; }
.mv-qa__headline { margin: 0 0 var(--space-4); color: var(--color-ink-900); }
.mv-qa__intro { margin: 0 0 var(--space-6); color: var(--color-ink-600); }
.mv-qa__video { margin-bottom: var(--space-8); }
.mv-qa__video-link { position: relative; display: block; }
.mv-qa__video img { width: 100%; height: auto; display: block; border-radius: var(--radius-card); }
.mv-qa__video-caption { margin: var(--space-2) 0 0; text-align: center; color: var(--color-ink-500); }

.mv-qa__list { display: flex; flex-direction: column; gap: var(--space-6); }
.mv-qa__q { margin: 0 0 var(--space-2); color: var(--color-ink-900); }
.mv-qa__a { margin: 0; color: var(--color-ink-600); }

/* ---------------------------------------------------------------------
 * 29. faqs
 * ------------------------------------------------------------------ */

.mv-faqs { background: var(--color-ink-100); }
.mv-faqs__inner { max-width: 860px; }
.mv-faqs__headline { margin: 0 0 var(--space-2); color: var(--color-ink-900); }
.mv-faqs__intro { margin: 0 0 var(--space-8); color: var(--color-ink-600); }
.mv-faqs__intro a { color: var(--color-primary); }

.mv-faqs__list { display: flex; flex-direction: column; gap: var(--space-2); }
.mv-faqs__item { border-bottom: 1px solid var(--color-ink-250); }
.mv-faqs__head { margin: 0; }

.mv-faqs__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.mv-faqs__q { color: var(--color-ink-900); }
.mv-faqs__chevron { flex: none; color: var(--color-ink-500); transition: transform var(--duration) var(--ease); }
.mv-faqs__trigger[aria-expanded="true"] .mv-faqs__chevron { transform: rotate(180deg); }

.mv-faqs__panel { padding: 0 0 var(--space-5); }
.mv-faqs__panel[hidden] { display: none; }
.mv-faqs__a { color: var(--color-ink-600); }
.mv-faqs__a a { color: var(--color-primary); }

/* ---------------------------------------------------------------------
 * 30. help-section
 * ------------------------------------------------------------------ */

.mv-help { background: var(--tint-violet); }
.mv-help__inner { display: flex; flex-direction: column; gap: var(--space-4); }
.mv-help__headline { margin: 0 0 var(--space-2); color: var(--color-ink-900); }
.mv-help__text { margin: 0; color: var(--color-ink-700); }
.mv-help__cta { align-self: flex-start; }

@media (min-width: 992px) {
  .mv-help__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-8); }
  .mv-help__cta { align-self: center; flex: none; }
}

/* ---------------------------------------------------------------------
 * 31. get-started-footer
 * ------------------------------------------------------------------ */

/* Same wash as hero-event and hero-sales; see the comment there. */
.mv-get-started { position: relative; isolation: isolate; overflow: hidden; }

.mv-get-started::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--hero-dark-start) 90%, transparent) 0%,
      color-mix(in srgb, var(--hero-dark-end) 84%, transparent) 100%);
}

.mv-get-started__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.mv-get-started__kicker { margin: 0 0 var(--space-1); color: var(--hero-on-dark-line); }
.mv-get-started__headline { margin: 0; color: var(--hero-on-dark); }
.mv-get-started__cta { align-self: flex-start; }

@media (min-width: 768px) {
  .mv-get-started__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-8); }
  .mv-get-started__cta { align-self: center; flex: none; }
}

/* ---------------------------------------------------------------------
 * 32. footer
 * ------------------------------------------------------------------ */

.mv-footer { background: var(--color-surface); }
.mv-footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }

.mv-footer__socials { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-5); }
.mv-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-450);
  transition: color var(--duration) var(--ease);
}
.mv-footer__social:hover { color: var(--color-primary); }

.mv-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.mv-footer__link { color: var(--color-ink-600); }
.mv-footer__link:hover { color: var(--color-primary); }

.mv-footer__copy,
.mv-footer__company { margin: 0; color: var(--color-ink-500); }

/* ---------------------------------------------------------------------
 * 33. motion preferences
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .mv-curriculum__chevron,
  .mv-faqs__chevron,
  .mv-hero-event__play,
  .mv-hero-sales__play,
  .mv-qa__play { transition: none; }
  .mv-stories__rail { scroll-behavior: auto; }
}