/*
 * 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 .mp-theme-static {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.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-hover);
  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%;
  /* SST-1104 (client, row 34: "make this photos fill out the box so we don't have those blue sides"): the picture fills its box edge to edge. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  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.

     It wraps, and the menu button's box is held, BEFORE the script has run. When
     both only happened once the script revealed the button (a second or two later
     on a phone), the header grew by a row and the whole page jumped down by about
     80px (a layout shift of 0.18). The held box is invisible and takes no clicks
     until the script reveals it; with scripting off it is simply an empty gap in
     the bar, the same header as before without a button that cannot open. */
  .mp-page .lp-header-bar {
    flex-wrap: wrap;
  }

  .mp-page .lp-menu-btn[hidden] {
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
    width: 48px;
    height: 48px;
    /* The revealed button carries a 1px border; the held box carries the same one (invisible), so revealing it adds no width. Two pixels were enough
       to push the enrol button onto a second row on a 412px phone and move the page by 14px (a layout shift of 0.14 in some runs). */
    border: 1px solid var(--line);
    visibility: hidden;
    pointer-events: none;
  }

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

  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, .mp-page .mp-themes .mp-theme-static { 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, .mp-page .mp-themes .mp-theme-static > 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; }

/* SST-783 (the client, 23 Oct 2026). A second cohort listed under the first on a dates band (C36), numbered from 01 again. */
.mp-page .mp-dates-later { margin: 36px 0 14px; color: var(--ink); font: 600 24px/1.25 'League Spartan', sans-serif; }
/* The "Who leads it" section centred (C34): the heading and its line, then each person's picture, name, role, credentials, words and video on the
   section's centre line. Set per page by the group's "Centre ..." box. */
.mp-page .mp-instructors-centered .mp-head { display: block; text-align: center; }
.mp-page .mp-instructors-centered .mp-head h2 { margin-inline: auto; text-align: center; }
.mp-page .mp-instructors-centered .mp-head p { margin: 12px auto 0; max-width: 62ch; }
.mp-page .mp-instructors-centered .mp-instructor { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.mp-page .mp-instructors-centered .mp-instructor > div:last-child { width: 100%; max-width: 76ch; margin-inline: auto; }
.mp-page .mp-instructors-centered .mp-instructor li { justify-content: center; text-align: center; }
.mp-page .mp-instructors-centered .mp-instructor p { margin-inline: auto; }
.mp-page .mp-instructors-centered .mp-instructor .lp-video,
.mp-page .mp-instructors-centered .mp-instructor figure { margin-inline: auto; }