/*
 * Mentorship pages: /mentorship/, /doula-mentorship/, /doula-agency-owner-mentorship/.
 *
 * Scoped to the mp- prefix so the accepted homepage and the four course landings
 * keep the exact styles they were signed off with. Nothing here re-declares a
 * class that index.css already defines, and index.css is untouched.
 */

.mp-page {
  background: var(--white);

  /* The phone enroll bar is position: fixed, so it covers the last ~72px of
     whatever is underneath it. The bar reports its own height here and the page
     reserves exactly that much, which is the difference between a bar that sits
     below the content and a bar that hides the end of it. It is 0px whenever
     the bar is not showing -- on a desktop width, and on a phone before the page
     has scrolled past the hero -- so nothing is reserved that is not needed. */
  padding-bottom: var(--bbu-sticky-h, 0px);
}

/* Hero ------------------------------------------------------------------ */

.mp-hero {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 64px;
  align-items: center;
  padding-block: 72px 88px;
}

.mp-product {
  margin: 0 0 12px;
  color: var(--cta);
  font: 600 15px/1 'League Spartan', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mp-hero h1 {
  margin: 0 0 20px;
  color: var(--ink);
  font: 600 clamp(38px, 4.4vw, 60px) / 1.06 'League Spartan', sans-serif;
}

.mp-lede {
  margin: 0 0 28px;
  max-width: 60ch;
  color: var(--text);
  font-size: 19px;
  line-height: 1.6;
}

.mp-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: baseline;

  /* The top margin is space for the rule above the price, which otherwise sits
     directly under the eligibility line and reads as if it belonged to it. */
  margin: 22px 0 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.mp-price {
  color: var(--ink);
  font: 600 40px/1 'League Spartan', sans-serif;
}

.mp-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--cloud);
  color: var(--ink);
  font: 600 14px/1 'League Spartan', sans-serif;
}

.mp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--slate);
  font-size: 15px;
}

.mp-facts li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-facts li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cta);
}

.mp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 26px;
}

.mp-hero-media {
  margin: 0;
}

.mp-hero-media img {
  width: 100%;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(24, 53, 76, 0.14);
}

/* Bands ---------------------------------------------------------------- */

.mp-band {
  padding-block: 88px;
}

.mp-band-cloud {
  background: var(--cloud);
}

.mp-band-white {
  background: var(--white);
}

.mp-head {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 24px 64px;
  align-items: end;
  margin-bottom: 44px;
}

.mp-head h2 {
  margin: 0;
  color: var(--ink);
  font: 600 clamp(30px, 3.2vw, 44px) / 1.1 'League Spartan', sans-serif;
}

.mp-head p {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.62;
}

/* For heads that only need the title column. */
.mp-head-single {
  grid-template-columns: minmax(0, 62ch);
}

/* Outcome grid ---------------------------------------------------------- */

.mp-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-outcomes li {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.mp-outcomes h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font: 600 20px/1.25 'League Spartan', sans-serif;
}

.mp-outcomes p {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

/* Live dates ------------------------------------------------------------ */

.mp-dates {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.mp-dates li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
}

.mp-dates-index {
  color: var(--slate);
  font: 600 15px/1 'League Spartan', sans-serif;
  letter-spacing: 0.06em;
}

.mp-dates-date {
  color: var(--ink);
  font: 600 20px/1.3 'League Spartan', sans-serif;
}

.mp-dates-time {
  color: var(--slate);
  font-size: 15px;
}

.mp-dates-aside {
  margin-top: 22px;
  max-width: 62ch;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.6;
}

/* Curriculum ------------------------------------------------------------ */

.mp-themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.mp-themes details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 0;
}

.mp-themes summary {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
}

.mp-themes summary::-webkit-details-marker {
  display: none;
}

.mp-theme-number {
  flex: 0 0 auto;
  color: var(--cta);
  font: 600 15px/1.4 'League Spartan', sans-serif;
  letter-spacing: 0.06em;
}

.mp-theme-title {
  display: block;
  color: var(--ink);
  font: 600 19px/1.3 'League Spartan', sans-serif;
}

.mp-theme-summary {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

.mp-themes ul {
  margin: 0;
  padding: 0 24px 24px 24px;
  list-style: none;
}

.mp-themes li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

.mp-themes li svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--cta);
}

/* FAQ ------------------------------------------------------------------- */

.mp-faqs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: 82ch;
  margin-inline: auto;
}

.mp-faqs details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.mp-faqs summary {
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font: 600 18px/1.35 'League Spartan', sans-serif;
}

.mp-faqs summary::-webkit-details-marker {
  display: none;
}

.mp-faqs p {
  margin: 0;
  padding: 20px 24px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.62;
}

/* Workbook gallery ------------------------------------------------------ */

.mp-workbook {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 56px;
  align-items: start;
}

.mp-workbook-gallery {
  min-width: 0;
}

.mp-workbook-copy h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font: 600 24px/1.25 'League Spartan', sans-serif;
}

.mp-workbook-copy p {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.62;
}

.mp-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-gallery figure {
  margin: 0;
}

.mp-gallery img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(24, 53, 76, 0.1);
}

.mp-gallery figcaption {
  margin-top: 10px;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.5;
}

.mp-gallery-label {
  display: block;
  color: var(--ink);
  font: 600 14px/1.4 'League Spartan', sans-serif;
}

/* The thumbnail is the enlargement control, so the whole preview is clickable. */
.mp-gallery-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 14px;
}

.mp-gallery-open:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 3px;
}

.mp-gallery-hint {
  display: block;
  margin-top: 4px;
  color: var(--cta);
  font: 600 13px/1.4 'League Spartan', sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/*
 * The two enlargement controls are alternatives, and exactly one of them is
 * shown. The button is rendered hidden and revealed by mentorship.js; the
 * fallback link is rendered visible and hidden by the same script. Both rules
 * below are needed because `display: block` on the class beats the user agent's
 * `[hidden]` rule -- without them a hidden control would still paint.
 */
.mp-gallery-open[hidden],
.mp-gallery-fallback[hidden] {
  display: none;
}

.mp-gallery-dialog {
  width: min(94vw, 1040px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--white);
  color: var(--text);
  overflow: auto;
}

.mp-gallery-dialog::backdrop {
  background: rgba(24, 53, 76, 0.62);
}

.mp-gallery-viewer {
  padding: 22px 24px 28px;
}

.mp-gallery-viewer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.mp-gallery-viewer-title {
  margin: 0;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.5;
}

.mp-gallery-viewer img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.mp-gallery-note {
  margin: 28px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--cta);
  background: var(--white);
  color: var(--slate);
  font-size: 14px;
  line-height: 1.6;
}

/* Instructors ----------------------------------------------------------- */

.mp-instructors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.mp-instructor {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
}

.mp-instructor-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
}

.mp-instructor-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--cloud);
  color: var(--ink);
  font: 600 34px/1 'League Spartan', sans-serif;
}

.mp-instructor h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font: 600 22px/1.25 'League Spartan', sans-serif;
}

.mp-instructor-role {
  margin: 0 0 14px;
  color: var(--cta);
  font: 600 14px/1.4 'League Spartan', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mp-instructor p {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

.mp-instructor ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.mp-instructor li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 4px 0;
  color: var(--slate);
  font-size: 15px;
}

.mp-instructor li svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--cta);
}

/* Checked inclusion list, used in the offer panel. */
.mp-instructor-list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.mp-instructor-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
}

.mp-instructor-list li svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--cta);
}

/* Program video --------------------------------------------------------- */

.mp-video-band .lp-video {
  margin: 0 auto;
  max-width: 900px;
}

/* Interest state -------------------------------------------------------- */

.mp-interest {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 56px;
  align-items: center;
}

.mp-interest-copy h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font: 600 clamp(28px, 3vw, 40px) / 1.1 'League Spartan', sans-serif;
}

.mp-interest-copy p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.62;
}

.mp-panel {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 20px 50px rgba(24, 53, 76, 0.1);
}

.mp-panel h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font: 600 24px/1.25 'League Spartan', sans-serif;
}

.mp-panel > p {
  margin: 0 0 20px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

.mp-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.mp-small {
  margin: 16px 0 0;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.55;
}

/* Hub ------------------------------------------------------------------- */

.mp-hub-hero {
  padding-block: 76px 24px;
  text-align: center;
}

/*
 * The band under the hero opens with its own padding, so the hero's bottom
 * padding was being added to it: the gap before the cohorts read as roughly
 * twice the gap between any other two bands on the page. The two numbers below
 * add up to one normal band gap, which is what the reader is expecting by the
 * time they reach it. Only the hub's hero is followed by a band this way, and
 * only the first band after it is affected.
 */
.mp-hub-hero + .mp-band {
  padding-top: 56px;
}

.mp-hub-hero h1 {
  margin: 0 auto 20px;
  max-width: 20ch;
  color: var(--ink);
  font: 600 clamp(38px, 4.6vw, 62px) / 1.05 'League Spartan', sans-serif;
}

/*
 * The hero's paragraphs, but not its eyebrow. The eyebrow is a .mp-product and
 * carries its own rule; without the :not() this group would give it the body
 * paragraph's 19px leading and 68ch measure, which is a different element's
 * typography and pushes the headline away from the label above it.
 */
.mp-hub-hero > p:not(.mp-product) {
  margin: 0 auto 28px;
  max-width: 68ch;
  color: var(--text);
  font-size: 19px;
  line-height: 1.62;
}

.mp-hub-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.mp-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.mp-card {
  display: flex;
  flex-direction: column;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--white);
}

.mp-card-cover {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  margin-bottom: 24px;
  border-radius: 12px;
  background: var(--cloud);
}

.mp-card h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font: 600 28px/1.2 'League Spartan', sans-serif;
}

.mp-card > p {
  margin: 0 0 18px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

.mp-card dl {
  margin: 0 0 24px;
  padding: 0;
}

.mp-card dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.mp-card dt {
  color: var(--slate);
  font-size: 15px;
}

.mp-card dd {
  margin: 0;
  color: var(--ink);
  font: 600 16px/1.4 'League Spartan', sans-serif;
  text-align: right;
}

.mp-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: auto;
}

.mp-difference {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.mp-difference article {
  padding: 30px;
  border-radius: 24px;
  background: var(--white);
}

.mp-difference h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font: 600 21px/1.25 'League Spartan', sans-serif;
}

.mp-difference p {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

/* The hero's white cards would disappear on a white band. */

.mp-band-white .mp-difference article {
  background: var(--cloud);
}

/* Eligibility next to the hero call to action --------------------------- */

.mp-eligibility {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}

.mp-eligibility-link {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.55;
}

/* How it works ---------------------------------------------------------- */

.mp-how .lp-how-title {
  margin-bottom: 18px;
}

.mp-how-intro {
  max-width: 74ch;
  margin: 0 0 40px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.6;
}

/* An instructor's own introduction video, shown with that instructor. */

.mp-instructor-video {
  max-width: 560px;
  margin: 26px 0 0;
}

.mp-instructor-video .lp-video {
  margin: 0;
}

/* A separate offer at its own price ------------------------------------- */

.mp-also-see {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  margin-top: 32px;
  padding: 32px 40px;
  border: 1.5px solid var(--line);
  border-radius: 24px;
  background: var(--white);
}

.mp-also-see h3 {
  margin: 0 0 10px;
  font-size: 24px;
}

.mp-also-see p {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

/*
 * The five inclusions, as five lines. The sentence they came from is the same
 * size as the paragraph under it; a list is read one line at a time, so it is
 * set a shade larger and tighter, and the markers are the ones a reader already
 * expects from a list of what you get.
 */
.mp-also-see-list {
  margin: 0 0 10px;
  padding-left: 1.1em;
  color: var(--text);
  font-size: 17px;
  line-height: 1.5;
}

.mp-also-see-list li {
  margin: 4px 0;
}

.mp-also-see-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* Hub ------------------------------------------------------------------- */

.mp-hub-videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.mp-hub-videos .lp-video {
  margin: 0;
}

.mp-hub-beginner p {
  max-width: 76ch;
}

/* Sticky offer bar ------------------------------------------------------ */

.mp-sticky {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(24, 53, 76, 0.12);
}

.mp-sticky-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mp-sticky-name {
  color: var(--ink);
  font: 600 16px/1.2 'League Spartan', sans-serif;
}

.mp-sticky-price {
  color: var(--slate);
  font-size: 14px;
}

/*
 * A modal dialog is the top layer, and the sticky bar is not in it: the bar
 * paints over the dialog's own backdrop and sits across the bottom of an
 * enlargement the reader opened to look at. The class is set on <html> for the
 * few hundred milliseconds a dialog is open, so the bar disappears for exactly
 * as long as something is on top of it and comes back when it closes.
 */
.bbu-dialog-open .mp-sticky {
  display: none !important;
}

/*
 * The same for the workbook band, which sits in the middle of these pages: the
 * room reserved at the foot of the page does nothing for a section the reader
 * scrolls under the bar. The class goes on while the band is on screen, so the
 * bar is out of the way for exactly that stretch and back after it.
 *
 * Both of these have to be !important. The shared landing script sets the bar's
 * display inline, and an inline declaration is only outranked by a stylesheet
 * rule marked important.
 */
.bbu-workbook-open .mp-sticky {
  display: none !important;
}

/*
 * The agency programme has four steps and the shared rule is three columns,
 * which leaves the fourth alone on a row of its own. The template marks a
 * four-step list and this pairs them up. The width is 761px rather than 901px
 * on purpose: the shared rule only collapses to a single column at 760px, so
 * 761px up is exactly the range where the list is multi-column -- a higher
 * breakpoint would leave the same orphan on a tablet.
 */
@media (min-width: 761px) {
  .mp-how .lp-steps-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1040px) {
  .mp-outcomes,
  .mp-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mp-instructors {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .mp-hero,
  .mp-workbook,
  .mp-interest {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /*
   * The offer, not the cover, is what the reader came for. The hero's copy and
   * its cover are one grid, and .mp-hero-copy is dissolved with
   * `display: contents` so the copy's own children become grid items and can be
   * ordered around the cover individually. The sequence is the reading order
   * the page already implies: label, headline, promise, actions, then the cover
   * those buttons refer to, then the price and the facts that qualify it.
   *
   * `gap: 0` is deliberate. The items are spaced by their own margins below,
   * because one uniform gap cannot give the cover more room above it than the
   * headline has.
   */
  .mp-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    padding-block: 48px 64px;
  }

  .mp-hero-copy {
    display: contents;
  }

  .mp-hero .mp-product {
    order: 1;
  }

  .mp-hero h1 {
    order: 2;
  }

  .mp-lede {
    order: 3;
  }

  .mp-hero-actions {
    order: 4;
  }

  .mp-eligibility,
  .mp-eligibility-link {
    order: 5;
  }

  .mp-hero-media {
    order: 6;
    margin-top: 32px;
  }

  .mp-hero-facts {
    order: 7;
    margin-top: 32px;
  }

  /* Same total gap as the desktop rule above, measured on the phone's numbers. */
  .mp-hub-hero {
    padding-block: 48px 24px;
  }

  .mp-hub-hero + .mp-band {
    padding-top: 48px;
  }

  .mp-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .mp-band {
    padding-block: 64px;
  }

  .mp-cards,
  .mp-difference,
  .mp-themes,
  .mp-hub-videos {
    grid-template-columns: minmax(0, 1fr);
  }

  .mp-also-see {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 26px 24px;
  }

  /*
   * The second offer, the same treatment: the price belongs under the heading it
   * is the price of, not beside a button at the foot of the card. Both of the
   * card's columns dissolve so the heading, the price, the sentence, the small
   * print and the button become one sequence that can be ordered.
   */
  .mp-also-see > div:first-child,
  .mp-also-see-action {
    display: contents;
  }

  .mp-also-see h3 {
    order: 1;
  }

  .mp-also-see .mp-price {
    order: 2;
  }

  .mp-also-see > div:first-child > .mp-also-see-list,
  .mp-also-see > div:first-child > p:not(.mp-small) {
    order: 3;
    margin-bottom: 0;
  }

  .mp-also-see .mp-small {
    order: 4;
    margin-top: 0;
  }

  .mp-also-see .button {
    order: 5;
  }
}

@media (max-width: 640px) {
  .mp-outcomes,
  .mp-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .mp-instructor {
    grid-template-columns: minmax(0, 1fr);
  }

  .mp-instructor-photo,
  .mp-instructor-initials {
    width: 92px;
    height: 92px;
  }

  .mp-dates li {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }

  .mp-dates-time {
    grid-column: 2;
  }

  .mp-price {
    font-size: 32px;
  }

  .mp-faqs summary {
    padding: 18px 20px;
  }

  .mp-faqs p {
    padding: 18px 20px;
  }

  /* On a phone the viewer's heading and its Close button cannot sit side by
   * side without the heading wrapping to a column of three words, so they
   * stack and the button follows the text. */
  .mp-gallery-viewer {
    padding: 18px 16px 22px;
  }

  .mp-gallery-viewer-head {
    flex-direction: column;
    gap: 12px;
  }

  /* The dialog is the enlargement, and it has to actually enlarge. Fitting a
   * 760px workbook page into a phone's dialog renders it narrower than the page
   * it is showing, which is the opposite of what the reader opened it for. At
   * natural size the dialog pans instead, which is why the dialog already
   * carries `overflow: auto` -- nothing here has to add it.
   *
   * Only the dialog's own rendering changes. The gallery thumbnails keep the
   * sizing they have on every other width, and so does the page around them. */
  .mp-gallery-viewer img {
    width: auto;
    max-width: none;
  }
}

/*
 * The header's own navigation, on a phone.
 *
 * The shared header hides its navigation below 760px, and the four course
 * landings live with that: theirs is one link and a button. These pages have a
 * menu -- the hub's four sections, or the chooser, the curriculum and the
 * reviews -- so hiding it left a phone reader with nothing. The answer is not a
 * second menu: it is the same <nav>, shown as a panel under the bar, so the
 * links exist once and are announced once.
 *
 * Every selector here is inside .mp-page, the wrapper this template renders, so
 * no other template's header can match any of it.
 *
 * The button is revealed by a class the script sets, not by the width alone.
 * With scripting off the header is exactly what it is today -- no control is
 * drawn for a panel that could not open, which is the failure direction the
 * rest of this plugin already uses.
 */
.mp-page .lp-menu-btn {
  display: none;
}

@media (max-width: 760px) {
  .mp-page .lp-header {
    position: relative;
  }

  /* The bar wraps rather than overflowing. On these pages the enroll button
     carries a whole phrase -- "Enroll in the October cohort" -- and at a phone
     width logo, button and menu do not fit on one line. */
  html.bbu-lp-js .mp-page .lp-header-bar {
    flex-wrap: wrap;
  }

  html.bbu-lp-js .mp-page .lp-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
  }

  html.bbu-lp-js .mp-page .lp-menu-btn[hidden] {
    display: none;
  }

  html.bbu-lp-js .mp-page .lp-header-cta {
    margin-left: 12px;
  }

  .mp-page .lp-header-nav.is-open {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    inset: 100% 0 auto 0;
    margin: 0;
    padding: 8px 20px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
    z-index: 45;
  }

  .mp-page .lp-header-nav.is-open a {
    min-height: 48px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-page * {
    scroll-behavior: auto;
  }
}

/* Owner's mentorship layout corrections, 2026-10-01. */
.mp-page .mp-video-band .lp-video { margin-inline: auto; }
.mp-page #cohorts .mp-head, .mp-page #faq .mp-head { display: block; text-align: center; }
.mp-page #cohorts .mp-head h2, .mp-page #faq .mp-head h2 { margin-inline: auto; text-align: center; }
.mp-page .mp-faqs { margin-inline: auto; }
.mp-page .mp-faqs summary { padding: 20px 24px; text-align: left; }
.mp-page .mp-faqs details[open] summary { padding-bottom: 10px; }
.mp-page .mp-faqs p { margin: 0; padding: 0 24px 20px; text-align: left; }
.mp-page .lp-cert { display: block; }
.mp-page .lp-cert-intro { margin-bottom: 24px; max-width: 76ch; }
.mp-page .lp-cert-stages { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.mp-page .lp-cert-stages li { margin: 0; }
.mp-page .mp-themes summary { justify-content: flex-start; text-align: left; }
.mp-page .mp-themes summary > span, .mp-page .mp-theme-number, .mp-page .mp-theme-title, .mp-page .mp-theme-summary, .mp-page .mp-themes li { text-align: left; }
.mp-page .mp-themes summary > span:last-child { flex: 1; min-width: 0; }
.mp-page .mp-gallery-note { margin: 24px 0 0; padding: 20px; }
.mp-page .mp-hub-live .mp-difference { grid-template-columns: repeat(3,minmax(0,1fr)); }
.mp-page .mp-hub-live .mp-difference article { padding: 32px 28px; min-height: 190px; }
@media (max-width:760px) {
 .mp-page .lp-cert-stages, .mp-page .mp-hub-live .mp-difference { grid-template-columns: 1fr; }
 .mp-page .mp-faqs summary { padding: 20px; }
 .mp-page .mp-faqs details[open] summary { padding-bottom: 10px; }
 .mp-page .mp-faqs p { padding: 0 20px 20px; }
 .mp-page .mp-hub-live .mp-difference article { min-height: 0; }
}
.mp-page .mp-instructors { align-items: start; }
.mp-page .mp-instructor:only-child { grid-column: 1 / -1; }
.mp-page .mp-instructor:only-child > div:last-child { max-width: 76ch; }