/* Mama Academy partner page — Paper "Mama Academy — Landing Page" (desktop BS3-0 /
   mobile BH1-0). Loaded after home.css: everything below is the delta from the home page. */

/* ---- Hero ---- */
.ma-kicker {
  width: fit-content;
  padding: 0.625rem 1.375rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  box-shadow: 4px 4px 0 var(--purple-500);
}
.ma-hero .home-hero-copy {
  gap: 1.875rem;
}
.ma-hero .home-hero-copy h1 {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: clamp(2.1rem, 3.5vw, 3.125rem);
}
.ma-hero .ma-h1-sub {
  font-size: 0.84em; /* 42px against the 50px brand line, per artboard */
  font-weight: 500;
  line-height: 1.08;
}
.ma-hero .lede {
  color: var(--ink-muted);
  max-width: 37.5rem;
}
.ma-hero .lede p {
  margin: 0;
}
.ma-hero .lede p + p {
  margin-top: 1.5em;
}
.ma-hero .rating-card {
  box-shadow: none;
  padding: 0.75rem 0.5625rem 0.75rem 0.3125rem;
}
.ma-hero .rating-card .score {
  font-size: 1.125rem;
}
.ma-hero .rating-card .caption {
  font-size: 0.6875rem;
}
.ma-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}
.ma-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ma-badges img {
  height: 2.5rem;
  width: auto;
}
/* The phones stay inside the hero here — the next section is white copy, not the cream band
   the home page lets them fall into. */
.ma-hero .container {
  padding-block: 1rem 7rem;
}
.ma-hero .home-hero-visual {
  /* Artboard: back bezel top at y≈130 under the 96px nav, i.e. lower than the home page. */
  top: 3.5rem;
  /* No scroll-drift here (home.css CUB-218): the home page lets the phones sink into an
     empty cream band, but on this page they would slide onto the Wellbeing copy. */
  animation: none;
}
/* "CUBBI X MAMA ACADEMY" is one line on the artboard (693px against a 560px copy column). */
@media (min-width: 80rem) {
  .ma-hero .home-hero-copy h1 {
    /* Artboard: brand line 693px, sub-line 653px — both wider than the 560px copy column. */
    width: max-content;
    max-width: 41rem;
  }
  .ma-hero .ma-h1-brand {
    white-space: nowrap;
  }
}

/* "IN PARTNERSHIP WITH / MAMA ACADEMY" lockup — the design's replacement for the
   Dragons' Den mark. Three placements: beside the phones (mobile only), the cream band
   and the purple testimonial strip. */
.ma-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  text-decoration: none;
  white-space: nowrap;
}
.ma-lockup .pre {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-700);
}
.ma-lockup .show {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-700);
}
.ma-lockup .show .uword-line {
  bottom: -0.3em;
  height: 0.5em;
}
.ma-lockup-hero {
  display: none;
}

/* ---- Wellbeing at our heart ---- */
.ma-wellbeing,
.ma-wallet {
  background: #fff;
  padding: 0 max(4rem, calc((100% - 82rem) / 2));
}
.ma-wellbeing {
  padding-top: 1rem;
  padding-bottom: 4rem;
}
.ma-wellbeing h2,
.ma-wallet h2 {
  color: var(--green-700);
  margin: 0 0 1.5rem;
}
.ma-copy {
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.5;
}
.ma-copy p {
  margin: 0;
}
.ma-copy p + p {
  margin-top: 1.5em;
}
.ma-wellbeing .ma-copy {
  max-width: 70rem;
}

/* ---- Wellbeing Wallet: photo left, copy right (artboard: photo 398×493 at x 120, copy at x 692) ---- */
.ma-wallet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 3rem 4rem;
  padding-top: 1rem;
  padding-bottom: 5rem;
}
.ma-wallet-photo {
  width: min(24.875rem, 100%);
  height: auto;
  justify-self: center;
}
.ma-wallet-copy .ma-copy {
  max-width: 41.75rem;
}
.ma-btn-green {
  display: inline-block;
  margin-top: 2.25rem;
  font-size: 1.25rem;
  padding: 0.9rem 1.75rem;
  background: var(--green-100);
  color: var(--green-700);
  box-shadow: 4px 4px 0 var(--green-500);
}
.ma-btn-green:hover {
  background: #dbe9c9;
}

/* ---- Cream band with the partner lockup, then "Approved in minutes" ---- */
.ma-partner-band {
  background: var(--cream-200);
  display: flex;
  justify-content: flex-end;
  padding: 1.5rem max(4rem, calc((100% - 82rem) / 2)) 0;
  /* The band, not the phones, sits above the steps here. */
  margin-bottom: -1px;
}
.ma-partner-band .ma-lockup {
  flex-direction: row;
  align-items: baseline;
  gap: 0.5rem;
}
.ma-approved {
  padding-top: 3.5rem;
}

/* Testimonial strip: lockup in lilac on purple. */
.testimonial .ma-lockup-purple {
  align-items: center;
  gap: 0.375rem;
}
.testimonial .ma-lockup-purple .pre {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--lilac-100);
}
.testimonial .ma-lockup-purple .show {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--lilac-500);
}

/* ---- Mobile (≤ 63.9rem, tracks the chrome breakpoint like home.css) ---- */
@media (max-width: 63.9rem) {
  .ma-hero .container {
    padding: 1.5rem 1.25rem 2rem;
  }
  .ma-hero .home-hero-copy h1 {
    gap: 1rem;
  }
  .ma-hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .ma-hero .home-hero-visual {
    /* Mobile artboard: lockup top-left of the phone group, phones to its right/below. */
    margin: 5.5rem auto 1rem;
  }
  .ma-lockup-hero {
    display: flex;
    position: absolute;
    left: 0;
    top: -4.75rem; /* clear of the back phone (top -2cqw), in the margin above the group */
    pointer-events: auto;
  }
  .ma-lockup-hero .pre {
    font-size: 0.6875rem;
  }
  .ma-lockup-hero .show {
    font-size: 1.125rem;
  }
  .ma-partner-band {
    display: none;
  }
  .ma-wellbeing,
  .ma-wallet {
    padding-inline: 1.25rem;
  }
  .ma-wellbeing {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
  .ma-wallet {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 3.5rem;
  }
  /* Mobile artboard order: heading, photo, copy, button. */
  .ma-wallet-copy {
    display: contents;
  }
  .ma-wallet-copy h2 {
    order: -1;
    margin-bottom: 0;
  }
  .ma-wallet-photo {
    order: 0;
    width: 100%;
  }
  .ma-btn-green {
    margin-top: 0;
    width: fit-content;
    font-size: 1.125rem;
  }
  .ma-approved {
    padding-top: 3rem;
  }
}