/* MP Suite — Learning Profile. Built to the branded design handoff.
   Mobile-first; desktop promotes land, quiz and reveal to multi-column. */

.mp-lp {
  --teal: #3d8e9f; --teal-dark: #2f7c8c; --ink: #2f4047;
  --purple: #7d4199; --gold: #d8a64e; --green: #8cc04f; --green-cta: #5a9c3e; --blue: #4896a8;
  --body: #3f4d56; --muted: #6d7a82; --muted2: #8a979d;
  --card-mint: #e6f1f3; --card-lilac: #f3eafa; --card-mint2: #e3f3ec; --note-mint: #eef5f3;
  --bd: #e0ebe9; --bd2: #cfe3e2; --bd-input: #d8e6e4;
  --track: #eef3f2; --progress-track: #dceae8;
  --q: 'Filson Pro', 'filson-pro', 'Filson Soft', 'filson-soft', 'Segoe UI', system-ui, sans-serif;
  --o: 'Filson Pro', 'filson-pro', 'Filson Soft', 'filson-soft', system-ui, sans-serif;
  --dim-exploration: #3d8e9f; --dim-creativity: #7d4199; --dim-connection: #d8a64e;
  --dim-movement: #8cc04f; --dim-stories: #4896a8;
  font-family: var(--o); font-weight: 500; color: var(--body); max-width: 460px; margin: 0 auto; line-height: 1.45;
}
.mp-lp * { box-sizing: border-box; }
.mp-lp h1, .mp-lp h2, .mp-lp h3 { font-family: var(--q); margin: 0; }

.mp-lp__btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--q); font-weight: 700; font-size: 16px; border: 0; border-radius: 30px;
  padding: 16px 20px; cursor: pointer; text-decoration: none; width: 100%; line-height: 1.1;
  transition: transform .12s ease, background .12s ease, opacity .12s ease; }
.mp-lp__btn--primary { background: var(--purple); color: #fff; box-shadow: 0 8px 18px rgba(125,65,153,.28); }
.mp-lp__btn--primary:hover { transform: translateY(-1px); }
.mp-lp__btn--primary:disabled { background: #dfe7e5; color: #a7b3b1; box-shadow: none; cursor: not-allowed; transform: none; }
.mp-lp__btn--secondary { background: #fff; color: var(--teal-dark); border: 2px solid var(--bd2); }

.mp-lp__h2 { font-size: 25px; font-weight: 700; color: var(--ink); line-height: 1.14; margin-bottom: .6rem; }

/* ===== 1. LAND / INTRO (built to the "Quiz Intro" design handoff) =====
   Reflows intrinsically via grid auto-fit rather than breakpoints. */
.mp-lp__land { display: flex; flex-direction: column; gap: clamp(14px,2.4vw,22px); }
/* A stage panel sets its own display, which would otherwise beat the [hidden] attribute the
   stage machine toggles — keep hidden winning. */
.mp-lp__stage[hidden] { display: none !important; }

/* Intro — heading and opening copy, centred on the page background */
.mp-lp__iintro { text-align: center; }
.mp-lp__iintro .mp-lp__h2 { color: #4896a8; margin: 20px 0 12px; }
#mp-quiz .mp-lp__iintro .mp-lp__h2 { color: #4896a8; margin: 20px 0 12px; }
.mp-lp__iintro p { font-size: clamp(15px,2.1vw,18px); line-height: 1.6; color: #3a4650; font-weight: 500; margin: 0 auto; max-width: 640px; }
.mp-lp__iintro strong { color: #4896a8; font-weight: 800; }

/* What we'll explore together */
.mp-lp__iexplore { background: #fff; border-radius: 26px; padding: clamp(22px,4vw,40px); box-shadow: 0 6px 24px rgba(20,60,66,.08); }
.mp-lp__iexplore-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.mp-lp__iexplore-title { font-family: var(--q); font-weight: 800; font-size: clamp(19px,3vw,26px); color: #4896a8; margin: 0; }
.mp-lp__iexplore-note { font-size: clamp(13px,1.8vw,15px); color: #7f8b92; font-weight: 600; }
.mp-lp__itiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; }
/* Mobile: the head becomes a tap-to-collapse toggle so the Start button rises up the page.
   Desktop always shows the tiles (chevron hidden, head not interactive). */
.mp-lp__iexplore-chev { display: none; }
@media (max-width: 700px) {
  .mp-lp__iexplore-head { flex-wrap: nowrap; align-items: center; cursor: pointer; margin-bottom: 0; }
  .mp-lp__iexplore-head .mp-lp__iexplore-note { display: none; }
  .mp-lp__iexplore-chev { display: block; flex: 0 0 auto; margin-left: auto; width: 11px; height: 11px;
    border-right: 2.5px solid #4896a8; border-bottom: 2.5px solid #4896a8; transform: rotate(45deg); transition: transform .2s ease; }
  .mp-lp__iexplore.is-open .mp-lp__iexplore-chev { transform: rotate(-135deg); }
  .mp-lp__itiles { display: none; margin-top: 18px; }
  .mp-lp__iexplore.is-open .mp-lp__itiles { display: grid; }
}
.mp-lp__itile { border-radius: 18px; padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.mp-lp__itile-badge { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.mp-lp__itile-label { font-family: var(--q); font-weight: 700; font-size: 15px; color: #3a4650; line-height: 1.25; }

/* Guided by our psychologist */
.mp-lp__iexpert { background: #4896a8; border-radius: 26px; padding: clamp(24px,4vw,40px); color: #fff; box-shadow: 0 6px 24px rgba(20,60,66,.10); }
.mp-lp__iexpert-title { font-family: var(--q); font-weight: 800; font-size: clamp(19px,2.8vw,25px); color: #fff; margin: 0 0 clamp(20px,3vw,28px); }
.mp-lp__iexpert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: clamp(22px,4vw,42px); align-items: stretch; }
.mp-lp__iexpert-photo { border-radius: 18px; overflow: hidden; min-height: clamp(240px,30vw,320px); background-size: cover; background-position: center top; background-color: #2e838f; }
.mp-lp__iexpert-copy { position: relative; padding-left: clamp(30px,4vw,44px); display: flex; flex-direction: column; justify-content: center; }
.mp-lp__iexpert-mark { position: static; display: block; align-self: flex-start; font-family: Georgia, serif; font-size: clamp(84px,9vw,124px); line-height: 1; color: rgba(255,255,255,.25); margin: 0 0 -.45em; }
.mp-lp__iexpert-copy p { font-size: clamp(15px,2vw,18px); line-height: 1.6; color: #eef7f7; margin: 0 0 20px; }
.mp-lp__iexpert-copy .mp-lp__iexpert-name { font-family: var(--q); font-weight: 800; font-size: 18px; color: #fff; margin: 0; }
.mp-lp__iexpert-copy .mp-lp__iexpert-cred { font-size: 13px; line-height: 1.4; color: #a9d2d4; margin: 3px 0 0; }
/* The practice link sits on teal in both the intro and the results note — keep it legible */
#mp-quiz .mp-lp__iexpert-cred a, #mp-quiz .mp-lp__feature-cred a { color: #fff !important; text-decoration: underline; text-underline-offset: 2px; }
#mp-quiz .mp-lp__iexpert-cred a:hover, #mp-quiz .mp-lp__feature-cred a:hover { color: #eaf6f6 !important; }

/* Start-the-quiz panel: image background with a translucent card holding the title + button */
.mp-lp__istart-panel { margin-top: clamp(18px,3vw,28px); margin-bottom: clamp(10px,1.8vw,18px); border-radius: 20px; overflow: hidden;
  background: linear-gradient(135deg,#efe6f6,#e4eef0); background-size: cover; background-position: center;
  min-height: clamp(200px,26vw,300px); display: flex; align-items: center; justify-content: center; padding: clamp(24px,4vw,44px); }
.mp-lp__istart-card { background: rgba(255,255,255,.82); border-radius: 16px; text-align: center;
  padding: clamp(28px,4vw,40px) clamp(28px,4.5vw,54px); max-width: 480px; box-shadow: 0 8px 26px rgba(20,60,66,.12); }
.mp-lp__istart-title { font-family: var(--q); font-weight: 800; font-size: clamp(19px,3vw,26px); color: #8246af; margin: 0 0 24px; line-height: 1.15; }
#mp-quiz .mp-lp__istart-title { color: #8246af; font-weight: 800; font-size: clamp(19px,3vw,26px); margin: 0 0 24px; }
.mp-lp__istart-card .mp-lp__istart-btn { margin-top: 6px; }
/* Legacy standalone start CTA (kept harmless if referenced elsewhere) */
.mp-lp__istart { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(6px,2vw,16px); }
/* Mobile: let the card use the panel's full width and slim the button so it never squishes */
@media (max-width: 700px) {
  .mp-lp__istart-panel { padding: 16px 12px; min-height: 190px; }
  .mp-lp__istart-card { width: 100%; padding: 22px 16px; }
  .mp-lp__istart-btn { width: 100%; font-size: 16px; padding: 15px 18px; white-space: nowrap; }
  /* Drop the arrow so the label doesn't wrap to two lines */
  .mp-lp__istart-btn svg { display: none; }
}
.mp-lp__istart-btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; background: #8246af; color: #fff; border: 0;
  font-family: var(--q); font-weight: 800; font-size: 18px; padding: 18px 48px; border-radius: 999px; cursor: pointer; line-height: 1.1;
  transition: background .18s ease, transform .18s ease; }
.mp-lp__istart-btn:hover { background: #6d3a94; transform: translateY(-2px); }

/* Beat the theme's own heading/font rules on the intro, same as the results page */
#mp-quiz .mp-lp__land, #mp-quiz .mp-lp__land * { font-family: var(--q) !important; }
#mp-quiz .mp-lp__iexplore-title { color: #4896a8; font-weight: 800; font-size: clamp(19px,3vw,26px); margin: 0; }
#mp-quiz .mp-lp__iexpert-title { color: #fff; font-weight: 800; font-size: clamp(19px,2.8vw,25px); margin: 0 0 clamp(20px,3vw,28px); }

/* 2. QUIZ */
.mp-lp__quiz-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mp-lp__back { background: none; border: 0; color: var(--teal-dark); font-family: var(--q); font-weight: 600; font-size: 14px; cursor: pointer; padding: 4px 0; }
.mp-lp__step-count { font-family: var(--q); font-weight: 700; font-size: 13px; color: var(--teal-dark); }
.mp-lp__progress { height: 9px; border-radius: 6px; background: var(--progress-track); overflow: hidden; margin-bottom: 18px; }
.mp-lp__progress-fill { display: block; height: 100%; width: 0; background: var(--teal); border-radius: inherit; transition: width .4s ease; }
.mp-lp__q-text { font-size: 25px; font-weight: 700; color: var(--ink); line-height: 1.14; margin-bottom: 6px; }
.mp-lp__q-sub { font-size: 13px; color: var(--muted2); margin-bottom: 16px; }
.mp-lp__options { display: grid; gap: 10px; margin-bottom: 16px; }
.mp-lp__opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left;
  border: 2px solid var(--bd); background: #fff; border-radius: 16px; padding: 15px 16px; font-family: var(--o);
  font-size: 15px; color: #3f4d56; cursor: pointer; transition: all .12s ease; }
.mp-lp__opt-circle { flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; border: 2px solid #cdddda; position: relative; }
.mp-lp__opt.is-selected { border-color: var(--purple); background: #f6eefb; }
.mp-lp__opt.is-selected .mp-lp__opt-circle { border-color: var(--purple); }
.mp-lp__opt.is-selected .mp-lp__opt-circle::after { content: ''; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; border-radius: 50%; background: var(--purple); }
.mp-lp__why { background: var(--note-mint); border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; }
.mp-lp__why-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mp-lp__why-photo { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center top; background-color: #d9e7e4; }
.mp-lp__why-title { font-family: var(--q); font-weight: 700; font-size: 14px; color: var(--teal-dark); margin: 0 0 6px; }
.mp-lp__why-head .mp-lp__why-title { margin: 0; }
.mp-lp__why-body { font-size: 15px; line-height: 1.6; font-weight: 300; color: #5d6b72; margin: 0; }
/* Scoped so the theme's own paragraph weight can't bold this back up */
#mp-quiz .mp-lp__why-body { font-family: var(--q); font-size: 15px; font-weight: 300; }

/* 3. TEASE */
.mp-lp__tease { text-align: center; }
.mp-lp__tease-eyebrow { font-family: var(--q); font-weight: 600; color: var(--ink); margin: 0 0 .4rem; }
#mp-quiz .mp-lp__tease .mp-lp__h2 { color: #4896a8; }
.mp-lp__tease-card { position: relative; background: #fff; border: 1px solid #e7efed; border-radius: 20px; padding: 20px; box-shadow: 0 10px 26px rgba(47,124,140,.10); margin: 16px 0; overflow: hidden; }
.mp-lp__tease-bars { display: grid; gap: 12px; text-align: left; }
/* Unlock-screen image (replaces the old score bars) */
.mp-lp__tease-media { border-radius: 20px; overflow: hidden; margin: 16px 0; box-shadow: 0 10px 26px rgba(47,124,140,.10); }
.mp-lp__tease-img { display: block; width: 100%; height: auto; }
/* Tease: only the result WORDS are blurred, bars and percentages stay sharp */
.mp-lp__blur { filter: blur(6px); user-select: none; -webkit-user-select: none; color: var(--ink); }
.mp-lp__blur--inline { display: inline-block; padding: 0 .12em; }
.mp-lp__tease-summary { text-align: left; background: var(--card-lilac); border-radius: 16px; padding: 16px 18px; margin: 0 0 16px; }
.mp-lp__tease-lead { font-family: var(--q); font-weight: 700; font-size: 16px; color: #8246af; margin: 0 0 6px; }
.mp-lp__tease-sum { font-size: 13.5px; color: #6b5577; margin: 0; }
.mp-lp__tease-body { font-size: 14px; color: var(--muted); margin: 0 0 16px; }

/* 4. GATE */
.mp-lp__gate { text-align: center; display: flex; flex-direction: column; align-items: center; }
.mp-lp__gate .mp-lp__h2 { color: var(--purple); text-align: center; font-size: clamp(24px,3.4vw,30px); margin: 28px 0 16px; }
#mp-quiz .mp-lp__gate .mp-lp__h2 { color: var(--purple); margin: 28px 0 16px; }
.mp-lp__gate-body { font-size: 15px; color: var(--muted); margin: 0 auto 36px; max-width: 460px; text-align: center; line-height: 1.55; }
.mp-lp__notice { color: #c0392b; font-weight: 600; }
/* Gravity form, styled to the finder-pill design */
.mp-lp__form .gfield_label { font-family: var(--q); font-weight: 600; font-size: 12px; color: #7a878d; }
.mp-lp__form input[type=text], .mp-lp__form input[type=email], .mp-lp__form input[type=tel], .mp-lp__form input[type=date], .mp-lp__form select, .mp-lp__form textarea {
  height: 52px; border-radius: 30px; border: 1.5px solid var(--bd2); padding: 0 18px; font-family: var(--o); font-size: 15px; width: 100%; }
.mp-lp__form textarea { height: auto; border-radius: 18px; padding: 14px 18px; }
.mp-lp__form .mp-postcode input { border-color: var(--gold); background: #fdf8ec; }
.mp-lp__form .gsection { border-top: 1px solid var(--bd); margin: 8px 0 2px; padding-top: 14px; }
.mp-lp__form .gsection_title { font-family: var(--q); font-weight: 700; font-size: 14px; color: var(--teal-dark); }
.mp-lp__form .gform_footer input[type=submit], .mp-lp__form .gform_footer button {
  background: var(--purple); color: #fff; border: 0; border-radius: 30px; padding: 16px 20px; font-family: var(--q); font-weight: 700; font-size: 16px; width: 100%; cursor: pointer; box-shadow: 0 8px 18px rgba(125,65,153,.28); }
.mp-lp__form .gform_fields { display: grid; gap: 12px; }

/* Gate form — two columns, soft pink fields, uppercase button (design handoff). Scoped to the
   gate so the reveal enquiry form keeps its own styling. */
.mp-lp__gate .mp-lp__form { width: 100%; max-width: 640px; margin: 0 auto; text-align: left; }
.mp-lp__gate .mp-lp__form .gform_wrapper, .mp-lp__gate .mp-lp__form form { max-width: 100%; margin-left: auto; margin-right: auto; }
.mp-lp__gate .mp-lp__form .gform_fields { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.mp-lp__gate .mp-lp__form .gfield { min-width: 0; }
/* Never let a hidden field take a grid cell and break the two-column flow */
.mp-lp__gate .mp-lp__form .gform_hidden,
.mp-lp__gate .mp-lp__form .gfield--type-hidden,
.mp-lp__gate .mp-lp__form .gfield_visibility_hidden { display: none !important; }
.mp-lp__gate .mp-lp__form .gfield_label { font-family: var(--q); font-weight: 700; font-size: 13px; color: var(--purple); margin-bottom: 7px; }
.mp-lp__gate .mp-lp__form .gfield_required { color: #c0392b; font-style: italic; font-weight: 400; }
/* Consent / opt-in checkbox labels: small print at 12px (both the gate and the reveal
   enquiry form use .mp-lp__form) */
#mp-quiz .mp-lp__form .gfield_consent_label,
#mp-quiz .mp-lp__form .gform-field-label--type-inline { font-size: 12px; line-height: 1.5; font-weight: 400; }

/* Validation messages, restyled off the default red monospace to Filson + brand teal.
   The per-field "This field is required." box: */
#mp-quiz .mp-lp__form .gfield_validation_message,
#mp-quiz .mp-lp__form .validation_message {
  font-family: var(--q) !important; font-weight: 600; font-size: 13px; letter-spacing: 0; color: #4896a8 !important;
  background: #eef7f8; border: 1px solid #bcdfe4; border-radius: 10px; padding: 8px 12px; margin-top: 6px; }
/* The form-level "There was a problem…" banner: */
#mp-quiz .mp-lp__form .gform_validation_errors,
#mp-quiz .mp-lp__form .validation_error {
  font-family: var(--q); background: #eef7f8; border: 1px solid #bcdfe4; border-radius: 12px; box-shadow: none; }
#mp-quiz .mp-lp__form .gform_validation_errors h2,
#mp-quiz .mp-lp__form .gform_submission_error {
  font-family: var(--q) !important; color: #4896a8 !important; font-weight: 700; }
#mp-quiz .mp-lp__form .gform_submission_error .gform-icon,
#mp-quiz .mp-lp__form .gfield_validation_message::before { color: #4896a8; }
/* Errored field labels stay on-brand (purple) rather than flipping to red */
#mp-quiz .mp-lp__form .gfield_error .gfield_label { color: var(--purple) !important; }
/* Errored input gets a teal ring instead of a red border */
#mp-quiz .mp-lp__form .gfield_error input,
#mp-quiz .mp-lp__form .gfield_error select,
#mp-quiz .mp-lp__form .gfield_error textarea { border: 0 !important; box-shadow: 0 0 0 2px #4896a8 !important; }
.mp-lp__gate .mp-lp__form input[type=text],
.mp-lp__gate .mp-lp__form input[type=email],
.mp-lp__gate .mp-lp__form input[type=tel],
.mp-lp__gate .mp-lp__form input[type=date],
.mp-lp__gate .mp-lp__form input[type=number],
.mp-lp__gate .mp-lp__form select {
  height: 52px; border: 0; border-radius: 12px; background: #f7f0f0; padding: 0 16px; }
.mp-lp__gate .mp-lp__form input::placeholder { color: #9aa2a6; }
/* Override the postcode's gold tint to match the rest of the gate fields */
.mp-lp__gate .mp-lp__form .mp-postcode input { border: 0; background: #f7f0f0; }
.mp-lp__gate .mp-lp__form .gform_footer { margin-top: 8px; }
.mp-lp__gate .mp-lp__form .gform_footer input[type=submit],
.mp-lp__gate .mp-lp__form .gform_footer button { text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 560px) {
  .mp-lp__gate .mp-lp__form .gform_fields { grid-template-columns: 1fr; }
}

/* 5. REVEAL */
.mp-lp__bars { display: grid; gap: 13px; margin-bottom: 18px; }
.mp-lp__bar-head { display: flex; align-items: center; gap: 9px; font-family: var(--q); font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 5px; }
.mp-lp__bar-ic { flex: 0 0 auto; display: inline-flex; width: 30px; height: 30px; border-radius: 9px; align-items: center; justify-content: center; background: var(--track); }
.mp-lp__bar-label { flex: 1 1 auto; }
.mp-lp__bar-pct { flex: 0 0 auto; font-weight: 700; }
.mp-lp__bar--exploration .mp-lp__bar-ic { color: var(--dim-exploration); background: #e4f0f2; }
.mp-lp__bar--creativity .mp-lp__bar-ic { color: var(--dim-creativity); background: #f1e7f7; }
.mp-lp__bar--connection .mp-lp__bar-ic { color: var(--dim-connection); background: #faf0d9; }
.mp-lp__bar--movement .mp-lp__bar-ic { color: var(--dim-movement); background: #ecf6e0; }
.mp-lp__bar--stories .mp-lp__bar-ic { color: var(--dim-stories); background: #e7eef7; }
.mp-lp__bar-track { height: 14px; border-radius: 9px; background: var(--track); overflow: hidden; }
.mp-lp__bar-fill { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .6s ease; }
.mp-lp__bar--exploration .mp-lp__bar-fill { background: var(--dim-exploration); }
.mp-lp__bar--creativity .mp-lp__bar-fill { background: var(--dim-creativity); }
.mp-lp__bar--connection .mp-lp__bar-fill { background: var(--dim-connection); }
.mp-lp__bar--movement .mp-lp__bar-fill { background: var(--dim-movement); }
.mp-lp__bar--stories .mp-lp__bar-fill { background: var(--dim-stories); }

/* ===== Expanded results — redesigned top (mock: "Understanding Your Child") ===== */
.mp-lp__result-stack { display: flex; flex-direction: column; gap: clamp(14px,2.4vw,22px); margin: clamp(14px,2.4vw,22px) 0; }

/* Results intro line under the "Understanding your child" heading */
.mp-lp__reveal-lead { font-size: 15px; line-height: 1.55; color: var(--body); margin: 4px 0 clamp(16px,2.4vw,24px); }
.mp-lp__reveal-lead strong { color: var(--teal-dark); font-weight: 700; }

/* Shared quiz-stage banner (land / quiz / tease / gate). Full-bleed: breaks out of the
   centred content column to the full page width, sized for a 2000×500 (4:1) image. Hidden on
   the reveal, which has its own per-profile hero below. */
.mp-lp__qhead { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  aspect-ratio: 2000 / 500; background-image: var(--qhead-d); background-size: cover; background-position: center;
  margin-bottom: clamp(18px,3vw,34px); }
#mp-quiz[data-stage="reveal"] .mp-lp__qhead { display: none; }
/* Mobile: swap to the square 900x900 image when one has been uploaded */
@media (max-width: 700px) {
  .mp-lp__qhead.has-mobile { background-image: var(--qhead-m); aspect-ratio: 1 / 1; }
}

/* Per-profile results hero. The uploaded images already carry their own text, so when one is
   set it's shown clean and uncropped (full-width <img>). Before images are uploaded, the
   fallback is a plain teal banner with the profile name so nothing looks broken. */
/* Full-bleed: breaks out of the centred content column to the full page width, like the quiz
   header banner. The uploaded per-profile images carry their own text, so they're shown
   uncropped; the teal fallback fills the width before an image is set. */
.mp-lp__rhero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  position: relative; overflow: hidden; margin-bottom: clamp(18px,3vw,34px);
  min-height: clamp(180px,25vw,340px); display: flex; align-items: center; justify-content: center; text-align: center;
  padding: clamp(28px,5vw,54px) clamp(20px,4vw,40px); background: linear-gradient(135deg, var(--teal), var(--teal-dark)); }
/* With an image: drop the banner chrome and let the image define the height, uncropped. */
.mp-lp__rhero.has-img { min-height: 0; padding: 0; background: none; display: block; }
.mp-lp__rhero picture { display: block; width: 100%; }
.mp-lp__rhero-img { display: block; width: 100%; height: auto; }
.mp-lp__rhero-inner { position: relative; z-index: 1; }
.mp-lp__rhero-eyebrow { font-family: var(--q); font-weight: 600; font-size: clamp(14px,2vw,18px); color: rgba(255,255,255,.92); margin: 0 0 8px; }
.mp-lp__rhero-title { font-family: var(--q); font-weight: 800; font-size: clamp(30px,6vw,52px); line-height: 1.05; color: #fff; margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,.22); }
#mp-quiz .mp-lp__rhero-eyebrow { color: rgba(255,255,255,.92) !important; }
#mp-quiz .mp-lp__rhero-title { color: #fff !important; font-weight: 800 !important; font-size: clamp(30px,6vw,52px) !important; line-height: 1.05; }

/* Sticky results progress nav: numbered steps with a bar that fills in brand teal (#4797a8)
   as the reader scrolls the sections. Sticks under the banner; steps are click-to-jump. */
.mp-lp__pnav { position: sticky; top: 0; z-index: 30; background: #fff; margin: 0 0 clamp(16px,2.4vw,26px);
  padding: 12px 0; box-shadow: 0 4px 14px rgba(20,60,66,.06); }
/* Clearance under the (taller) desktop nav; mobile sits flush at the top. The logged-in admin
   bar is a fixed 32px at this width and pushes the site nav down with it, so the offset is
   declared for visitors and topped up only when WordPress actually renders the bar. Tune
   against your logged-in view and subtract 32 for the visitor value. */
@media (min-width: 900px) {
  .mp-lp__pnav { top: 118px; }
  body.admin-bar .mp-lp__pnav { top: 150px; }
}
.mp-lp__pnav-inner { position: relative; display: flex; align-items: center; max-width: 620px; margin: 0 auto; padding: 0 6px; }
.mp-lp__pnav-line { position: absolute; left: 22px; right: 22px; top: 50%; height: 4px; background: #e3eceb; border-radius: 4px; transform: translateY(-50%); }
.mp-lp__pnav-fill { display: block; height: 100%; width: 0; background: #4797a8; border-radius: 4px; transition: width .3s ease; }
.mp-lp__pnav-steps { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.mp-lp__pnav-step { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #e3eceb; background: #fff; color: #93a1ad;
  font-family: var(--q); font-weight: 700; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; transition: all .2s ease; }
.mp-lp__pnav-step.is-done { border-color: #4797a8; background: #4797a8; color: #fff; }
.mp-lp__pnav-step.is-active { border-color: #4797a8; color: #4797a8; box-shadow: 0 0 0 3px rgba(71,151,168,.18); }
@media (max-width: 700px) {
  .mp-lp__pnav-step { width: 28px; height: 28px; font-size: 12px; }
  .mp-lp__pnav-line { left: 20px; right: 20px; }
}

/* Activity-pack call to action: the download button sits on the shared (pre-designed) pack
   image, so no overlay wash — the artwork shows as uploaded. */
.mp-lp__pack-cta { position: relative; overflow: hidden; margin-top: 18px; border-radius: 20px; background: var(--card-lilac);
  background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center;
  padding: clamp(28px,5vw,56px) clamp(18px,4vw,32px); }
.mp-lp__pack-cta .mp-lp__home-pack { position: relative; z-index: 1; width: auto; margin: 0; }

/* Score breakdown card */
.mp-lp__breakdown { background: #fff; border-radius: 26px; padding: clamp(20px,4vw,36px); box-shadow: 0 6px 24px rgba(20,60,66,.08); }
.mp-lp__breakdown-title { font-family: var(--q); font-weight: 700; font-size: clamp(19px,3vw,24px); color: #4896a8; margin: 0 0 20px; }
.mp-lp__breakdown .mp-lp__bars { display: flex; flex-direction: column; gap: 20px; }
.mp-lp__brow-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mp-lp__brow-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mp-lp__brow-badge { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(23,85,93,.12); }
.mp-lp__brow-label { font-family: var(--q); font-weight: 700; font-size: clamp(14px,2vw,16px); color: #3a4650; }
.mp-lp__brow-pct { font-family: var(--q); font-weight: 700; font-size: clamp(16px,2.2vw,19px); flex-shrink: 0; }
.mp-lp__brow-track { height: 13px; border-radius: 999px; background: #edf1f1; overflow: hidden; }
.mp-lp__brow-fill { display: block; height: 100%; border-radius: 999px; transition: width .6s ease; }

/* Deep-dive + nurtures image cards (image one side, copy the other) */
.mp-lp__rcard { display: flex; flex-direction: column; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 6px 24px rgba(20,60,66,.08); }
.mp-lp__rcard-media { display: block; width: 100%; min-height: 220px; background-size: cover; background-position: center; background-color: #dcebeb; }
.mp-lp__rcard-body { padding: clamp(22px,3.5vw,38px); display: flex; flex-direction: column; justify-content: center; }
.mp-lp__rcard-pill { align-self: flex-start; display: inline-flex; align-items: center; font-family: var(--q); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; margin-bottom: 14px; }
.mp-lp__rcard-h { font-family: var(--q); font-weight: 700; font-size: clamp(22px,3.2vw,29px); line-height: 1.1; margin: 0 0 14px; }
.mp-lp__rcard-h3 { font-family: var(--q); font-weight: 700; font-size: clamp(19px,2.8vw,25px); line-height: 1.15; color: #4896a8; margin: 0 0 12px; }
.mp-lp__rcard-body p { font-size: clamp(14px,2vw,16px); line-height: 1.6; color: #4a565d; margin: 0 0 12px; }
.mp-lp__rcard-body p:last-child { margin-bottom: 0; }

/* Try this together at home — teal tint, 4 numbered cards */
.mp-lp__home { background: #dcebeb; border-radius: 26px; padding: clamp(22px,4vw,36px); box-shadow: 0 6px 24px rgba(20,60,66,.08); }
.mp-lp__home-title { font-family: var(--q); font-weight: 700; font-size: clamp(19px,2.8vw,25px); color: #4896a8; margin: 0 0 18px; }
.mp-lp__home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 14px; }
/* Tip cards: numbered badge, title, detail. The badge colour cycles through the brand accents. */
.mp-lp__home-card { background: #fff; border-radius: 18px; padding: 20px 20px 22px; display: flex; flex-direction: column; align-items: flex-start; box-shadow: 0 4px 14px rgba(20,60,66,.06); }
.mp-lp__home-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px;
  font-family: var(--q); font-weight: 700; font-size: 14px; line-height: 1; flex-shrink: 0; margin-bottom: 14px; background: #dcebeb; color: #2e838f; }
.mp-lp__home-card--1 .mp-lp__home-num { background: #dcebeb; color: #2e838f; }
.mp-lp__home-card--2 .mp-lp__home-num { background: #f2e6f3; color: #8a3d8f; }
.mp-lp__home-card--3 .mp-lp__home-num { background: #f7edd8; color: #cf9b3f; }
.mp-lp__home-card--4 .mp-lp__home-num { background: #e6f0dd; color: #5f9a45; }
.mp-lp__home-ct { font-family: var(--q); font-weight: 700; font-size: 16px; line-height: 1.25; color: #4896a8; margin: 0 0 8px; }
.mp-lp__home-cb { font-size: 14px; line-height: 1.55; color: #5d6b72; margin: 0; }

/* Good to remember + Dr Morvwen feature — brand teal */
.mp-lp__feature { background: #4896a8; border-radius: 26px; padding: clamp(24px,4.5vw,44px); color: #fff; box-shadow: 0 6px 24px rgba(20,60,66,.10); }
.mp-lp__feature-title { font-family: var(--q); font-weight: 700; font-size: clamp(20px,3vw,27px); color: #fff; margin: 0 0 12px; }
.mp-lp__feature-lead { font-size: clamp(15px,2.1vw,17px); line-height: 1.6; color: #d6eaea; margin: 0; max-width: 640px; }
.mp-lp__feature-expert { margin-top: 4px; display: flex; flex-direction: column; gap: 24px; }
/* Big square photo with the name stacked underneath */
.mp-lp__feature-who { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mp-lp__feature-photo { width: 100%; max-width: 320px; aspect-ratio: 1 / 1; min-height: 200px; border-radius: 18px; background-size: cover; background-position: center top; background-color: #2e838f; flex-shrink: 0; }
/* Mobile: bias the crop to the left so the practice logo (top-left of the photo) is visible */
@media (max-width: 700px) { .mp-lp__feature-photo { background-position: left top; } }
.mp-lp__feature-id { display: flex; flex-direction: column; min-width: 0; }
.mp-lp__feature-name { font-family: var(--q); font-weight: 700; font-size: 19px; color: #fff; }
.mp-lp__feature-cred { font-size: 13px; color: #a9d2d4; margin-top: 3px; }
.mp-lp__feature-quote { position: relative; padding-left: clamp(28px,4vw,42px); }
.mp-lp__feature-mark { position: absolute; left: -4px; top: -26px; font-family: Georgia, serif; font-size: 96px; line-height: 1; color: rgba(255,255,255,.16); }
.mp-lp__feature-quote p { font-size: clamp(15px,2vw,17px); line-height: 1.6; color: #eef7f7; margin: 0; }

.mp-lp__reads-sub { font-size: clamp(13px,1.8vw,15px); color: #7f8b92; margin: 0 0 14px; }

/* Activity-pack button under the "Try this together at home" cards */
.mp-lp__home-pack { margin-top: 18px; }
/* Primary CTA text stays white even though the theme colours <a> links teal */
#mp-quiz .mp-lp__btn--primary { color: #fff; }
/* "Good to remember" lead-in inside the How-Monkey-Puzzle-nurtures card: bold, body text */
#mp-quiz .mp-lp__gtr-title { font-weight: 700; margin: 16px 0 6px; }

/* ===== Numbered results sections =====
   Desktop/tablet: the head reads as a plain numbered heading and the body is always shown.
   Mobile (<=700px): the head becomes a tap-to-expand accordion bar (quiz.js toggles is-open). */
.mp-lp__sec { margin: 0 0 clamp(18px,2.6vw,30px); }
.mp-lp__sec-head { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: 0;
  padding: 0 0 16px; margin: 0; text-align: left; cursor: default; font-family: var(--q); }
.mp-lp__sec-num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--teal); color: #fff;
  font-family: var(--q); font-weight: 700; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.mp-lp__sec-title { min-width: 0; font-family: var(--q); font-weight: 700; font-size: clamp(20px,2.8vw,26px); color: var(--teal); }
.mp-lp__sec .mp-lp__coll-chev { display: none; }
.mp-lp__sec-body { display: flex; flex-direction: column; gap: clamp(14px,2.4vw,22px); }
/* Keep the number badge white and the title teal even against theme heading rules */
#mp-quiz .mp-lp__sec-num { color: #fff !important; }
#mp-quiz .mp-lp__sec-title { color: var(--teal) !important; }

@media (max-width: 700px) {
  .mp-lp__sec-head { padding: 15px 18px; background: #fff; border: 1px solid var(--bd); border-radius: 16px; gap: 12px; cursor: pointer; }
  .mp-lp__sec-title { font-size: 16px; line-height: 1.25; }
  .mp-lp__sec-num { width: 28px; height: 28px; font-size: 14px; }
  .mp-lp__sec .mp-lp__coll-chev { display: block; flex: 0 0 auto; margin-left: auto; width: 9px; height: 9px;
    border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(45deg); transition: transform .2s ease; }
  .mp-lp__sec.is-open .mp-lp__coll-chev { transform: rotate(-135deg); }
  .mp-lp__sec-body { display: none; margin-top: 12px; }
  .mp-lp__sec.is-open .mp-lp__sec-body { display: flex; }
}

/* Results page: force Filson Pro on everything and 300-weight body text, beating any
   theme font/weight rules. Headings/labels/buttons keep their own explicit weights. */
#mp-quiz .mp-lp__reveal, #mp-quiz .mp-lp__reveal * { font-family: var(--q) !important; }
#mp-quiz .mp-lp__reveal { font-weight: 300; }

/* Section headings sized big to match the top-interest header, 20px below each.
   Dark on light boxes (nurtures = white card, try-at-home = light teal); #d6eaea on dark. */
#mp-quiz .mp-lp__breakdown-title { color: #4896a8; margin-bottom: 20px; }
#mp-quiz .mp-lp__feature-name { color: #fff; }
#mp-quiz .mp-lp__rcard-h,
#mp-quiz .mp-lp__rcard-h3,
#mp-quiz .mp-lp__home-title,
#mp-quiz .mp-lp__feature-title,
#mp-quiz .mp-lp__renq-title,
#mp-quiz .mp-lp__reads-title { font-size: clamp(22px,3.2vw,29px); line-height: 1.12; margin-bottom: 20px; }
#mp-quiz .mp-lp__rcard-h3,
#mp-quiz .mp-lp__home-title,
#mp-quiz .mp-lp__renq-title,
#mp-quiz .mp-lp__reads-title { color: #4896a8; }
#mp-quiz .mp-lp__feature-title { color: #d6eaea; }
/* Tip-card title is an <h3>; the theme styles h3 with !important, so match that force to keep
   it bold and on-brand like the section h2s. */
#mp-quiz .mp-lp__home-ct { color: #4896a8 !important; font-weight: 700 !important; font-size: 16px; margin: 0 0 8px; }
/* Dr Morvwen's name/credential now sit under the quote */
.mp-lp__feature-quote .mp-lp__feature-id { margin-top: 16px; }
.mp-lp__primary-card { background: var(--card-mint); border-radius: 18px; padding: 18px 20px; margin-bottom: 14px; }
.mp-lp__primary-card h3 { font-size: 17px; font-weight: 700; color: var(--teal-dark); margin-bottom: 6px; }
.mp-lp__primary-card p { font-size: 13px; color: #5d6b72; margin: 0 0 6px; }
.mp-lp__primary-card .mp-lp__disclaimer { font-style: italic; font-size: 11px; color: var(--muted2); margin: 0; }
.mp-lp__bridge-card { background: var(--card-lilac); border-radius: 18px; padding: 18px 20px; margin-bottom: 14px; }
.mp-lp__bridge-card h3 { font-size: 15px; font-weight: 700; color: var(--purple); margin-bottom: 6px; }
.mp-lp__bridge-card p { font-size: 13px; color: #6b5577; margin: 0; }
.mp-lp__pack { margin-bottom: 14px; }
.mp-lp__pack-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 2px solid #e3f0ec; border-radius: 16px; padding: 14px 16px; text-decoration: none; }
.mp-lp__pack-row .t { font-family: var(--q); font-weight: 700; font-size: 14px; color: var(--ink); }
.mp-lp__pack-row .s { font-size: 12px; color: var(--muted); }
.mp-lp__pack-row .dl { font-family: var(--q); font-weight: 700; font-size: 13px; color: var(--green-cta); white-space: nowrap; }
.mp-lp__book { margin-bottom: 16px; }
.mp-lp__nc { display: grid; grid-template-columns: 1fr; background: #fff; border-radius: 26px; box-shadow: 0 6px 24px rgba(20,60,66,.08); overflow: hidden; }
.mp-lp__nc-illus { position: relative; min-height: 180px; background-image: repeating-linear-gradient(45deg, #e6f1f3 0 10px, #f1f7f6 10px 20px); background-size: cover; background-position: center; }
.mp-lp__nc-dist { position: absolute; top: 12px; left: 14px; background: var(--purple); color: #fff; font-family: var(--q); font-weight: 700; font-size: 12px; padding: 5px 11px; border-radius: 30px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.mp-lp__nc-body { position: relative; padding: 22px 24px; }
.mp-lp__nc-score-wrap { position: absolute; top: 20px; right: 22px; text-align: center; }
.mp-lp__nc-score { display: inline-block; background: var(--review, #7bbf3f); color: #fff; font-family: var(--q); font-weight: 700; font-size: 12px; line-height: 1.2; padding: 3px 8px; border-radius: 6px; }
.mp-lp__nc-score-label { font-size: 10px; color: #9aa7ac; margin-top: 4px; }
.mp-lp__nc-eyebrow { font-family: var(--q); font-weight: 700; font-size: 11px; letter-spacing: .08em; color: var(--muted2); text-transform: uppercase; margin: 0; }
/* Reserve space so the eyebrow doesn't run under the review-score badge */
.mp-lp__nc-body .mp-lp__nc-eyebrow { padding-right: 76px; }
.mp-lp__nc-name { font-family: var(--q); font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--blue); margin: 4px 0 10px; padding-right: 70px; }
#mp-quiz .mp-lp__nc-name { font-size: 28px; font-weight: 700; line-height: 1.14; color: var(--blue) !important; margin-bottom: 20px; }
.mp-lp__nc-desc { font-size: 13.5px; color: var(--body); margin: 0 0 12px; }
.mp-lp__nc-meta { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.mp-lp__nc-ic { display: inline-flex; align-items: center; color: var(--teal); flex: 0 0 auto; }
.mp-lp__nc-meta a { color: inherit; text-decoration: none; }
.mp-lp__nc-meta a:hover { text-decoration: underline; }
.mp-lp__nc-body .mp-lp__btn { width: auto; padding: 13px 24px; }
.mp-lp__nc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.mp-lp__nc-actions .mp-lp__btn--ghost { background: #fff; color: var(--teal-dark); border: 2px solid var(--bd2); }

/* Webinars card: white card — heading + intro, a 3-up grid of the sessions, a closing line
   and the main button. Columns stack on mobile. */
.mp-lp__webinar-cta { display: flex; flex-direction: column; gap: clamp(16px,2.4vw,22px); background: #fff; border-radius: 26px;
  padding: clamp(24px,4vw,40px); box-shadow: 0 6px 24px rgba(20,60,66,.08); }
.mp-lp__webinar-h { font-family: var(--q); font-weight: 800; font-size: clamp(20px,2.8vw,26px); line-height: 1.2; color: #4896a8; margin: 0; }
#mp-quiz .mp-lp__webinar-h { color: #4896a8 !important; }
.mp-lp__webinar-lead { font-size: clamp(14px,2vw,16px); line-height: 1.6; color: #4a565d; margin: 0; }
.mp-lp__webinar-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 4px 0; }
.mp-lp__webinar-col { background: #eef7f8; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 7px; }
.mp-lp__webinar-col-title { font-family: var(--q); font-weight: 700; font-size: 16px; line-height: 1.25; color: #2f7c8c; margin: 0; }
#mp-quiz .mp-lp__webinar-col-title { color: #2f7c8c !important; }
.mp-lp__webinar-col-date { font-family: var(--q); font-weight: 700; font-size: 13px; color: var(--purple); }
.mp-lp__webinar-col-sub { font-size: 14px; line-height: 1.5; color: #4a565d; margin: 0; font-style: italic; }
.mp-lp__webinar-col-link { margin-top: auto; padding-top: 6px; font-family: var(--q); font-weight: 700; font-size: 14px; color: var(--purple); text-decoration: none; align-self: flex-start; }
#mp-quiz .mp-lp__webinar-col-link { color: var(--purple) !important; }
.mp-lp__webinar-col-link:hover { text-decoration: underline; }
.mp-lp__webinar-cta-btn { width: auto; align-self: flex-start; text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 760px) { .mp-lp__webinar-grid { grid-template-columns: repeat(3, 1fr); } }

/* Stage-two inline enquiry in the reveal */
.mp-lp__renq { position: relative; padding: clamp(20px,4vw,32px); margin-bottom: 16px; margin-top: 14px; background: #fff; border-radius: 26px; box-shadow: 0 6px 24px rgba(20,60,66,.08); animation: mpRenqIn .32s ease both; }
@keyframes mpRenqIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.mp-lp__renq-title { font-family: var(--q); font-weight: 700; font-size: 18px; color: var(--ink); margin: 4px 0 14px; }
.mp-lp__form .mp-prefilled input { background: #f2fbf7; border-color: #cdeadf; }

/* 6. LEARN */
.mp-lp__learn-sub { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
/* Blog cards, matched to the site: image, tag, title, date, excerpt, read more */
/* Mobile: swipe across the three reads rather than stacking them into a long scroll. Same
   snap idiom as the nearby-nurseries carousel (.mp-lp__others-list) so both feel alike. */
.mp-lp__blogs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 12px; margin-bottom: 16px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.mp-lp__blogs::-webkit-scrollbar { display: none; }
.mp-lp__blog { display: flex; flex-direction: column; background: var(--card-mint); border-radius: 16px; overflow: hidden; text-decoration: none;
  flex: 0 0 86%; scroll-snap-align: center; }
.mp-lp__blog-thumb { width: 100%; min-height: 165px; background-color: #e6f1f3; background-size: cover; background-position: center;
  background-image: repeating-linear-gradient(45deg, #e6f1f3 0 10px, #f1f7f6 10px 20px); }
.mp-lp__blog-body { padding: 16px 18px 18px; display: flex; flex-direction: column; }
.mp-lp__blog-tag { font-family: var(--q); font-weight: 700; font-size: 12px; color: var(--teal); margin-bottom: 4px; }
.mp-lp__blog-title { font-family: var(--q); font-weight: 700; font-size: 17px; line-height: 1.22; color: var(--teal-dark); margin-bottom: 6px; }
.mp-lp__blog-date { font-family: var(--o); font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.mp-lp__blog-excerpt { font-family: var(--o); font-size: 13px; color: var(--body); line-height: 1.5; margin-bottom: 12px; }
.mp-lp__blog-more { font-family: var(--q); font-weight: 700; font-size: 13px; color: var(--teal-dark); margin-top: auto; }
/* Specialist: half photo, half bio, to make use of the space */
.mp-lp__specialist { display: flex; gap: 0; align-items: stretch; background: var(--card-lilac); border-radius: 18px; padding: 0; margin-bottom: 16px; text-align: left; overflow: hidden; }
.mp-lp__specialist-photo { flex: 0 0 36%; align-self: stretch; min-height: 250px; border-radius: 0; background-color: #d9c6e8;
  background-size: cover; background-position: center top; background-image: repeating-linear-gradient(45deg, #e6dcf2 0 10px, #efe7f7 10px 20px); }
.mp-lp__specialist-text { flex: 1 1 auto; min-width: 0; padding: 22px 26px; align-self: center; }
.mp-lp__specialist-quote { font-family: var(--q); font-weight: 600; font-size: 18px; color: var(--purple); margin: 0 0 10px; line-height: 1.35; }
.mp-lp__specialist-by { font-family: var(--q); font-weight: 700; font-size: 13px; color: #5a3b6b; margin: 0 0 8px; }
.mp-lp__specialist-bio { font-size: 13px; color: #6b5577; margin: 0; line-height: 1.55; }
@media (max-width: 600px) {
  .mp-lp__specialist { flex-direction: column; align-items: stretch; }
  .mp-lp__specialist-photo { flex-basis: auto; min-height: 200px; }
}

/* Desktop */
.mp-lp__book { margin-top: 16px; }

@media (min-width: 900px) {
  .mp-lp { max-width: 1040px; }

  /* The intro reflows on its own (grid auto-fit), so it needs no desktop overrides. */
  .mp-lp__quiz, .mp-lp__tease, .mp-lp__gate, .mp-lp__learn { max-width: 720px; margin: 0 auto; }
  .mp-lp__q-text { font-size: 32px; }

  /* Results use the full width */
  .mp-lp__reveal { max-width: 1040px; margin: 0 auto; }
  .mp-lp__book { margin-top: 18px; }
  .mp-lp__nc { grid-template-columns: 320px 1fr; }
  .mp-lp__nc-illus { min-height: 100%; }
  .mp-lp__reveal .mp-lp__renq { max-width: 100%; }
}

/* Test stepper (only shown with ?mpdebug=1). The [hidden] guard matters: without it this
   display:flex would override the hidden attribute and admins would always see the bar. */
.mp-lp__dev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; padding: 8px 10px; background: #2f4047; border-radius: 10px; }
.mp-lp__dev[hidden] { display: none !important; }
.mp-lp__dev-label { font-family: var(--q); font-weight: 700; font-size: 10px; letter-spacing: .12em; color: #8fd3c8; padding: 0 4px; }
.mp-lp__dev button { font-family: var(--q); font-weight: 600; font-size: 12px; color: #2f4047; background: #fff; border: 0; border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.mp-lp__dev button:hover { background: #d9f2ec; }

/* ---- Reveal grid: mobile single column, desktop 60/40 (see desktop block below) ---- */
.mp-lp__reveal-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.mp-lp__reveal-grid > div { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; min-width: 0; }
.mp-lp__acc { padding: 0; margin: 0; border-radius: 16px; overflow: hidden; }
.mp-lp__primary-card.mp-lp__acc { background: var(--card-mint); }
.mp-lp__bridge-card.mp-lp__acc { background: var(--card-lilac); }
.mp-lp__pack-acc { background: #fff; border: 2px solid #e3f0ec; }
.mp-lp__webinar-acc { background: var(--card-mint2); }
.mp-lp__acc-head { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 15px 18px; font-family: var(--q); font-weight: 700; font-size: 15px; color: var(--ink); }
.mp-lp__primary-card .mp-lp__acc-title { color: var(--teal-dark); }
.mp-lp__bridge-card .mp-lp__acc-title { color: var(--purple); }
.mp-lp__acc-chev { flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease; opacity: .45; margin-bottom: 2px; }
.mp-lp__acc.is-open .mp-lp__acc-chev { transform: rotate(-135deg); margin-bottom: -2px; }
.mp-lp__acc-body { display: none; padding: 0 18px 18px; gap: 14px; align-items: flex-start; }
.mp-lp__acc.is-open > .mp-lp__acc-body { display: flex; }
.mp-lp__pack-acc.is-open > .mp-lp__acc-body { display: block; }
.mp-lp__acc-copy { flex: 1 1 auto; min-width: 0; }
.mp-lp__acc-copy p { margin: 0 0 6px; font-size: 13px; color: #5d6b72; }
.mp-lp__acc-copy .mp-lp__disclaimer { font-style: italic; font-size: 11px; color: var(--muted2); margin: 0; }
.mp-lp__bridge-card .mp-lp__acc-copy p { color: #6b5577; }

/* Image placeholder used in the boxes, pack and reads (uses the set placeholder image if any) */
.mp-lp__media { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 12px; background-color: #e6f1f3;
  background-size: cover; background-position: center;
  background-image: repeating-linear-gradient(45deg, #e6f1f3 0 10px, #f1f7f6 10px 20px); }
.mp-lp__pack-row .mp-lp__media { width: 56px; height: 56px; }
.mp-lp__pack-txt { flex: 1 1 auto; min-width: 0; }
/* The two profile boxes: image on the left half, heading + text on the right */
.mp-lp__primary-card .mp-lp__acc-body, .mp-lp__bridge-card .mp-lp__acc-body { align-items: stretch; gap: 16px; }
.mp-lp__primary-card .mp-lp__media, .mp-lp__bridge-card .mp-lp__media { flex: 0 0 46%; width: 46%; height: auto; min-height: 165px; border-radius: 14px; }
/* Heading inside the right column (shown on desktop; on mobile the accordion head shows it) */
.mp-lp__acc-bodytitle { display: none; font-family: var(--q); font-weight: 700; font-size: 16px; line-height: 1.2; margin: 0 0 8px; }
.mp-lp__primary-card .mp-lp__acc-bodytitle { color: var(--teal-dark); }
.mp-lp__bridge-card .mp-lp__acc-bodytitle { color: var(--purple); }
/* Below desktop the image boxes are collapsible accordions with the image hidden */
@media (max-width: 899px) { .mp-lp__imgcard .mp-lp__media { display: none; } }

/* ---- Other nurseries near you (selectable) ---- */
.mp-lp__others { margin-bottom: 18px; }
.mp-lp__others:empty { display: none; }
.mp-lp__others-title { font-family: var(--q); font-weight: 700; font-size: 18px; color: var(--blue); margin: 0 0 2px; }
.mp-lp__others-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.mp-lp__others-list { display: grid; gap: 12px; }
/* Finder-style result cards: image on top, name + score, address, choose/view */
.mp-lp__other-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 24px rgba(20,60,66,.08); }
.mp-lp__other-illus { position: relative; min-height: 140px; background-size: cover; background-position: center;
  background-image: repeating-linear-gradient(45deg, #e6f1f3 0 10px, #f1f7f6 10px 20px); }
.mp-lp__other-dist { position: absolute; top: 12px; left: 14px; background: var(--purple); color: #fff; font-family: var(--q);
  font-weight: 700; font-size: 12px; padding: 5px 11px; border-radius: 30px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.mp-lp__other-body { padding: 16px 18px; }
.mp-lp__other-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mp-lp__other-name { font-family: var(--q); font-weight: 700; font-size: 20px; line-height: 1.1; color: var(--blue); margin: 2px 0 10px; }
#mp-quiz .mp-lp__other-name { color: var(--blue) !important; font-weight: 700 !important; margin-bottom: 15px; }
.mp-lp__other-body .mp-lp__nc-score { position: static; }
.mp-lp__other-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.mp-lp__other-actions .mp-lp__btn { width: auto; padding: 11px 20px; font-size: 14px; }
.mp-lp__other-actions .mp-lp__btn--ghost { background: #fff; color: var(--teal-dark); border: 2px solid var(--bd2); }
/* Slider dots (mobile only — desktop is a grid) */
.mp-lp__others-dots { display: none; justify-content: center; gap: 7px; margin-top: 10px; }
.mp-lp__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--bd2); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.mp-lp__dot.is-on { background: var(--purple); transform: scale(1.15); }

/* ---- Reads, now inline in the reveal ---- */
.mp-lp__reads { margin-top: 0; }
.mp-lp__reads-title { font-size: 20px; font-weight: 700; color: var(--ink); margin: 6px 0 4px; }

/* ---- Desktop: results 60% left, pack + webinar 40% right, primary/bridge below; and
   every box is open and not collapsible ---- */
@media (min-width: 900px) {
  .mp-lp__reveal-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-areas:
      "bars bars bars bars bars bars pack pack pack pack"
      "bars bars bars bars bars bars webi webi webi webi"
      "prim prim prim prim prim brid brid brid brid brid";
    gap: 18px;
    align-items: start;
  }
  .mp-lp__reveal-grid > #mp-bars { grid-area: bars; }
  .mp-lp__reveal-grid > .mp-lp__pack { grid-area: pack; }
  .mp-lp__reveal-grid > .mp-lp__webinar-mini { grid-area: webi; }
  .mp-lp__reveal-grid > #mp-primary { grid-area: prim; }
  .mp-lp__reveal-grid > #mp-bridge { grid-area: brid; }

  /* Always open and not collapsible on desktop, regardless of the is-open toggle state */
  .mp-lp__acc > .mp-lp__acc-body { display: flex !important; }
  .mp-lp__pack-acc > .mp-lp__acc-body { display: block !important; }
  .mp-lp__acc-chev { display: none; }
  .mp-lp__acc-head { cursor: default; }

  .mp-lp__others-list { grid-template-columns: repeat(3, 1fr); }

  /* Image boxes become cards: image fills the left edge-to-edge, heading + text on the right,
     and the two boxes match height. */
  .mp-lp__reveal-grid > #mp-primary, .mp-lp__reveal-grid > #mp-bridge { align-self: stretch; }
  .mp-lp__imgcard { display: flex; flex-direction: column; height: 100%; }
  .mp-lp__imgcard .mp-lp__acc-head { display: none; }
  .mp-lp__imgcard .mp-lp__acc-bodytitle { display: block; }
  .mp-lp__imgcard .mp-lp__acc-body { flex: 1 1 auto; padding: 0; gap: 0; }
  .mp-lp__imgcard .mp-lp__media { flex: 0 0 46%; width: 46%; border-radius: 0; align-self: stretch; min-height: 100%; }
  .mp-lp__imgcard .mp-lp__acc-copy { padding: 20px 22px; align-self: center; }

  /* Deep-dive card = image left; nurtures card = image right (row-reverse). Equal heights. */
  .mp-lp__rcard { flex-direction: row; align-items: stretch; }
  .mp-lp__rcard--bridge { flex-direction: row-reverse; }
  .mp-lp__rcard-media { flex: 0 0 44%; width: 44%; min-height: 100%; }
  .mp-lp__rcard-body { flex: 1 1 auto; }
  /* Expert note sits beside the photo on desktop */
  .mp-lp__feature-expert { flex-direction: row; align-items: center; gap: clamp(24px,4vw,40px); }
  .mp-lp__feature-who { flex: 0 0 32%; min-width: 0; }
  .mp-lp__feature-quote { flex: 1 1 auto; min-width: 0; }

  /* Blogs: two-up with the image on the left, like the site — the third read slides in
     rather than squeezing all three onto the row. Cards sit just under half width so the
     next one peeks past the edge; on desktop that sliver is the only cue the row scrolls,
     since the scrollbar is hidden and nobody thinks to swipe with a mouse. */
  .mp-lp__blogs { gap: 16px; }
  .mp-lp__blog { flex: 0 0 46%; flex-direction: row; scroll-snap-align: start; }
  .mp-lp__blog-thumb { flex: 0 0 40%; width: 40%; min-height: 100%; }
  .mp-lp__blog-body { flex: 1 1 auto; min-width: 0; }
}

/* ---- Mobile: fill the column, hide the placeholder box images, guard against overflow.
   If side white space remains it is the theme column/page padding — set that container's
   padding to 0 (or use a full-width page template). ---- */
@media (max-width: 700px) {
  /* No overflow-x clip here: the full-bleed banners (.mp-lp__qhead / .mp-lp__rhero) hang
     outside the column via negative margins and a clip would cut them to the content width. */
  .mp-lp { max-width: 100%; width: 100%; margin: 0; }
  .mp-lp__media { display: none; }
  .mp-lp .gform_wrapper, .mp-lp__form input, .mp-lp__form select, .mp-lp__form textarea { max-width: 100%; }

  /* Nearest-nursery title is smaller on mobile so it doesn't wrap word-per-line */
  #mp-quiz .mp-lp__nc-name { font-size: 22px; margin-bottom: 14px; }

  /* Card action buttons stack full-width for clean, thumb-friendly tap targets */
  .mp-lp__nc-actions, .mp-lp__other-actions { flex-direction: column; }
  .mp-lp__nc-body .mp-lp__btn, .mp-lp__other-actions .mp-lp__btn { width: 100%; }
  /* A touch more breathing room inside the nearest-nursery card */
  .mp-lp__nc-body { padding: 20px 20px 22px; }
  .mp-lp__nc-illus { min-height: 200px; }
  /* Slightly larger swipe dots for tappability */
  .mp-lp__dot { width: 9px; height: 9px; }
  .mp-lp__others-dots { margin-top: 12px; }

  /* Other nurseries become a swipeable slider with dots */
  .mp-lp__others-list { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 12px; position: relative;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .mp-lp__others-list::-webkit-scrollbar { display: none; }
  .mp-lp__other-card { flex: 0 0 86%; scroll-snap-align: center; }
  .mp-lp__others-dots { display: flex; }
}