/* 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 */
@media (min-width: 900px) { .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 */
.mp-lp__blogs { display: grid; gap: 16px; margin-bottom: 16px; }
.mp-lp__blog { display: flex; flex-direction: column; background: var(--card-mint); border-radius: 16px; overflow: hidden; text-decoration: none; }
.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 */
  .mp-lp__blogs { grid-template-columns: 1fr 1fr; }
  .mp-lp__blog { flex-direction: row; }
  .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; }
}