/**
 * Melody Magic — homepage patterns.
 *
 * One file, all 11 homepage block patterns. Token-only — every color,
 * spacing, font size references theme.json design tokens.
 *
 * Block order matches templates/front-page.html.
 */

/* =====================================================================
   Page frame (MM-007 P6.5 → P6.5b course-correct)
   Option B: content caps at 1440 via per-section inner max-widths and
   theme.json wideSize, but alignfull section backgrounds escape through
   the frame to viewport edges (cream WhyFamilies, future TryClassBand
   gradient, etc.).

   .mm-page-frame: kept as a no-op wrapper for now; remove in P13 if
   nothing depends on it. The 1440 frame visual was reverted to Option B
   (background full-bleed, content capped at 1440 via section inner
   widths and theme.json wideSize).

   Parent theme voyager-block-theme uses useRootPaddingAwareAlignments
   with root padding = 0, so WP's built-in negation is a no-op here. The
   explicit calc(50% - 50vw) rule below provides the viewport-edge escape
   that alignfull sections need to break out of the frame.
===================================================================== */

.mm-page-frame {
    max-width: 1440px;
    margin-inline: auto;
    width: 100%;
}

/* Allow alignfull sections to escape any container constraint without
   triggering a horizontal scrollbar. overflow-x: clip is non-scrolling
   (unlike `hidden`) and doesn't establish a scroll container, so it
   plays nicely with sticky/fixed children. Scoped to homepage.css. */
html, body {
    overflow-x: clip;
}

/* Standard WP alignfull viewport-edge escape. Parent theme doesn't ship
   this rule (it relies on useRootPaddingAwareAlignments, which is a no-op
   here because root padding = 0). homepage.css only enqueues on front-
   page, so this rule is naturally scoped to the homepage; if a non-home
   page later needs alignfull escape, hoist this to block-styles.css. */
.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}

/* =====================================================================
   Block 1 — Hero (MM-007 — full-width carousel variant)
   Single full-bleed section. The 5-image carousel is the section
   background; a teal→grape gradient scrim rides over it for legibility.
   Content (eyebrow → headline → lede → CTAs → proof bar) stacks
   centered on top and fades up on a stagger. assets/js/hero.js still
   drives slide rotation by toggling .is-active; data-mm-hero-carousel
   now lives on the section.
===================================================================== */

.mm-hero {
    position: relative;
    isolation: isolate;
    /* No overflow:hidden — slides + scrim are explicitly anchored to
       the viewport edges below, so they need to render outside the
       section's own box if the section's escape doesn't take. The
       html/body { overflow-x: clip } rule above keeps any spillage
       from causing a horizontal scrollbar. */
    background-color: var(--mm-teal-900);
    padding-block: clamp(96px, 14vw, 168px);
    padding-inline: var(--mm-s-8);
    color: #fff;
    min-height: clamp(540px, 70vh, 700px);
    max-height: 700px;
    display: flex;
    align-items: center;
    /* Force-escape the .mm-page-frame 1440px cap on the parent <main>. */
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* Neutralize WP core's flow-layout child-margin rule
   (`:root :where(.is-layout-flow) > *`) inside the hero. The hero stacks
   via absolute positioning + flex, not stacked margins, so the default
   1rem margin-block-start on every direct child shifts .mm-hero__inner
   down by 1rem (the absolutely-positioned slides/scrim/dots ignore
   margin, but .mm-hero__inner is relative). Specificity (0,2,1) beats
   the core rule's (0,1,1). */
.mm-hero.is-layout-flow > * {
    margin-block-start: 0;
}

/* Background carousel — 5 slides anchored DIRECTLY to the viewport.
   !important on width + max-width is required because WP core injects
   .alignfull:not(.is-layout-constrained) > * { max-width: 1440px;
   margin-inline: auto } at higher specificity (0,3,0 in Chrome's
   accounting), which capped slides to the page-frame width and was
   the actual root cause of the "image only fills part of the screen"
   bug we chased for the entire MM-007 hero work. JS toggles .is-active
   and CSS opacity-crossfades. */

.mm-hero__slides {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: 0 !important;
    z-index: -2;
}

.mm-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1100ms ease-in-out;
    will-change: opacity;
}

.mm-hero__slide.is-active {
    opacity: 1;
}

/* MM-014 P1-4: slides converted from background-image div to <img>
   element so browser LCP measurement credits the hero photo (was
   previously crediting the smaller logo-mark). object-fit replicates
   the prior background-size:cover + background-position:center. */
.mm-hero__slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    user-select: none;
    pointer-events: none;
}

/* Gradient scrim — uniform horizontal coverage, mild vertical fade.
   Same teal tint left-to-right (no directional gradient) so the photo
   reads identically across the full viewport width; gets slightly
   darker near the bottom for proof-bar legibility. */

.mm-hero__scrim {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: 0 !important;
    z-index: -1;
    /* Ben 6/1: teal→grape→teal diagonal wash over the carousel photos
       (was a dark teal-900 vertical fade). Kept in sync with hero-home.css. */
    background: linear-gradient(135deg, rgba(64, 176, 160, 0.55) 0%, rgba(122, 58, 150, 0.52) 60%, rgba(31, 122, 112, 0.60) 100%);
    pointer-events: none;
}

/* Content */

.mm-hero__inner {
    position: relative;
    max-width: 1440px;
    width: 100%;
    margin-inline: auto;
}

.mm-hero__content {
    max-width: 920px;
    margin-inline-start: 0;
    margin-inline-end: auto;
    text-align: left;
    min-width: 0;
}

.mm-hero__eyebrow {
    margin: 0 0 18px 0;
    font-family: var(--mm-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-teal-300);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Legacy teal dot span (pattern hero only) — superseded by the ::before star. */
.mm-hero__eyebrow-dot { display: none; }

/* Purple logo-style star to the left of the eyebrow. CSS-only via mask-image
   (per design rules — decorative marks are ::before, not content spans). The
   eyebrow is display:inline-flex with gap:10px, so the star is the first flex
   item and the gap separates it from the text. grape-500 = "Grape (logo)". */
.mm-hero__eyebrow::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background-color: var(--wp--preset--color--grape-500);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

.mm-hero__headline {
    /* 48px bottom gap clears the butter squiggle under the accent word so it
       never overlaps the lede. NOTE: this rule duplicates hero-home.css and
       loads AFTER it, so it wins — keep both in sync. */
    margin: 0 0 48px 0;
    font-family: var(--mm-font-display);
    font-size: clamp(34px, 5.5vw, 76px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 2px 28px rgba(14, 63, 58, 0.7), 0 1px 4px rgba(14, 63, 58, 0.55);
}

/* Uniform vertical rhythm for the hero content. WP's global
   :root :where(.is-layout-flow) > * { margin-block-start:1rem; margin-block-end:0 }
   (specificity 0,1,0, loads after theme CSS) governs these children and overrides
   per-element theme margins; a 2-class selector (0,2,0) wins, so we set ONE even
   gap between every hero element. The squiggle is offset to -6px so it hugs the
   word and doesn't push into this gap. */
.mm-hero .mm-hero__content > * {
    margin-block-start: 20px;
    margin-block-end: 0;
}
.mm-hero .mm-hero__content > *:first-child {
    margin-block-start: 0;
}

.mm-hero__accent {
    color: var(--mm-teal-300);
    position: relative;
    display: inline;
}

.mm-hero__squiggle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    width: 100%;
    height: 14px;
    pointer-events: none;
    color: var(--mm-butter);
}

.mm-hero__lede {
    margin: 0 auto 32px 0;
    font-family: var(--mm-font-body);
    font-size: 19px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    max-width: 620px;
    text-shadow: 0 1px 12px rgba(14, 63, 58, 0.5);
}

.mm-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 40px;
}

.mm-hero__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    border-radius: 999px;
    background-color: #fff;
    color: var(--mm-teal-900);
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.35);
    transition: transform var(--mm-dur) var(--mm-ease), box-shadow var(--mm-dur) var(--mm-ease);
}

.mm-hero__cta-primary:hover,
.mm-hero__cta-primary:focus-visible {
    color: var(--mm-teal-900);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.42);
}

.mm-hero__cta-arrow {
    display: inline-flex;
    align-items: center;
}

.mm-hero__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    background-color: transparent;
    color: #fff;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    transition: background-color var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease);
}

.mm-hero__cta-secondary:hover,
.mm-hero__cta-secondary:focus-visible {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.85);
    color: #fff;
    text-decoration: none;
}

/* Proof bar */

.mm-hero__proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    max-width: 620px;
    margin-inline-start: 0;
    margin-inline-end: auto;
    text-align: left;
}

.mm-hero__proof-item {
    font-family: var(--mm-font-body);
    font-size: 13.5px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.72);
}

.mm-hero__proof-strong {
    display: block;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 18px;
    color: #fff;
    margin-bottom: 2px;
}

/* Dot pager — bottom-center of the section */

.mm-hero__dots {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1;
}

.mm-hero__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color 200ms ease, transform 200ms ease;
}

.mm-hero__dot:hover {
    background-color: rgba(255, 255, 255, 0.75);
}

.mm-hero__dot.is-active {
    background-color: #fff;
    transform: scale(1.3);
}

.mm-hero__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Entrance motion — staggered fade-up on each content row. The carousel
   crossfade is handled by the .is-active rule on .mm-hero__slide above;
   assets/js/hero.js drives slide rotation. */

@keyframes mm-hero-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mm-hero__eyebrow,
.mm-hero__headline,
.mm-hero__lede,
.mm-hero__ctas,
.mm-hero__proof {
    animation: mm-hero-fade-up 720ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.mm-hero__eyebrow  { animation-delay:  80ms; }
.mm-hero__headline { animation-delay: 160ms; }
.mm-hero__lede     { animation-delay: 280ms; }
.mm-hero__ctas     { animation-delay: 380ms; }
.mm-hero__proof    { animation-delay: 480ms; }

/* Mobile <768 — tighter padding, smaller headline, stack proof bar */

@media (max-width: 767px) {
    .mm-hero {
        padding-inline: var(--mm-s-4);
        padding-block: clamp(80px, 18vw, 128px);
        min-height: 560px;
    }
    .mm-hero__headline {
        font-size: clamp(32px, 8vw, 44px);
    }
    .mm-hero__lede {
        font-size: 17px;
    }
    .mm-hero__proof {
        grid-template-columns: 1fr;
        gap: 14px;
        text-align: left;
        max-width: 360px;
    }
    .mm-hero__proof-item {
        display: flex;
        gap: 12px;
        align-items: baseline;
        justify-content: flex-start;
    }
    .mm-hero__proof-strong {
        margin-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-hero__cta-primary,
    .mm-hero__cta-secondary {
        transition: none;
    }
    .mm-hero__cta-primary:hover {
        transform: none;
    }
    .mm-hero__eyebrow,
    .mm-hero__headline,
    .mm-hero__lede,
    .mm-hero__ctas,
    .mm-hero__proof {
        animation: none;
    }
    .mm-hero__slide {
        transition: none;
    }
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   Block 2 — Why Families (MM-007 P6 rebuild — comp fidelity)
   Cream banded section between WhatWeOffer and TeacherBlock. 3 white
   cards with colored top accent line + matching icon-wrap.
===================================================================== */

.mm-why {
    /* teal-50 (was paper-2 cream) per Katherine 5/21 — moved here from
       homepage-polish.css so it applies on page 378 + in the editor too,
       not just the front page where polish loads. */
    background-color: var(--mm-teal-50);
    /* margin-block-start: 0 kills WP core's
       `:where(.is-layout-flow) > * { margin-block-start: 1rem }`
       injection so the paper-2 bg butts directly against the programs
       grid gradient above — no 16px page-bg strip showing through.
       The section's own padding-block is the only vertical spacing. */
    margin-block-start: 0 !important;
    /* Roomier top/bottom (was 48px). */
    padding-block: clamp(72px, 8vw, 96px);
    padding-inline: var(--mm-s-8);
    scroll-margin-top: 88px;
}

.mm-why__inner {
    max-width: 1440px;
    margin-inline: auto;
}

/* Header */

.mm-why__header {
    text-align: center;
    margin-bottom: var(--mm-s-12);
}

.mm-why__eyebrow {
    margin: 0 0 14px 0;
    font-family: var(--mm-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-teal-700);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Legacy dot span (front-page pattern) hidden — ::before provides it for both
   the pattern and the page-378 contentOnly blocks. */
.mm-why__eyebrow-dot { display: none; }

.mm-why__eyebrow::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--mm-teal);
}

.mm-why__heading {
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: clamp(30px, 3vw, 42px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--mm-ink);
    text-wrap: balance;
    max-width: 760px;
    margin: 0 auto;
}

/* Grid */

.mm-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mm-s-6);
    align-items: stretch;
}

/* The cards are WP is-layout-flow blocks, so WP's global rules zero the first
   child's margin-block-start but give the others margin-block-start:1rem —
   which in this grid offsets cards 2–3 down and shrinks them, leaving card 1
   taller/higher. Zero it (2-class selector beats WP's (0,1,0)) so the grid gap
   + align-items:stretch give all three identical position, height, and margins. */
.mm-why .mm-why__grid > * {
    margin-block: 0;
}

/* Vertical rhythm (golden-ratio): the eyebrow hugs the title (24px), the title
   gets clear room before the cards (40px ≈ 24 × 1.6). (0,2,0) selectors beat
   WP's is-layout-flow margins that were making eyebrow→title too far and
   title→cards too tight. */
.mm-why .mm-why__heading {
    margin-block-start: 24px;
}
.mm-why .mm-why__grid {
    margin-block-start: 40px;
}

/* The eyebrow is display:inline-flex, so its own margin-bottom does NOT collapse
   with the heading's margin-top — they stack (14px + 24px = too much). Zero the
   eyebrow's bottom margin so the eyebrow→title gap is exactly the heading's 24px. */
.mm-why .mm-why__eyebrow {
    margin-bottom: 0;
}

/* Card */

.mm-why-card {
    position: relative;
    background-color: #fff;
    border-radius: 20px;
    padding: 36px 30px 32px;
    /* Full colored outline per variant (set below) — follows the border-radius
       all the way around, no cut-off ends. */
    border: 2px solid var(--mm-line);
    /* Soft brand-tinted lift (moved from homepage-polish.css so it applies on 378). */
    box-shadow: 0 4px 18px -10px rgba(15, 91, 102, 0.18);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Legacy accent span (front-page pattern) hidden. The accent is now the card's
   full colored border (per variant) — wraps the rounded corners all the way
   around, no cut-off ends. */
.mm-why-card__accent { display: none; }

.mm-why-card--teal    { border-color: var(--mm-teal); }
.mm-why-card--grape   { border-color: var(--mm-grape-700); }
.mm-why-card--apricot { border-color: var(--mm-apricot); }
.mm-why-card--butter  { border-color: var(--mm-butter); }

/* Legacy icon div (front-page pattern) hidden — ::before is the icon box:
   a rounded square (per-variant bg) with the award/book/heart glyph painted
   as a per-variant colored background-image (data-URI SVG). First flex child,
   so it sits above the title like the original div did. */
.mm-why-card__icon { display: none; }

.mm-why-card::before {
    content: "";
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    margin-bottom: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
}

.mm-why-card--teal::before {
    background-color: var(--mm-teal-50);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%231F7A70' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><path d='M8.21 13.89L7 22l5-3 5 3-1.21-8.12'/></svg>");
}

.mm-why-card--grape::before {
    background-color: var(--mm-grape-100);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%235F2C75' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2zM22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z'/></svg>");
}

.mm-why-card--apricot::before {
    background-color: var(--mm-apricot-100);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23B86A1F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z'/></svg>");
}

.mm-why-card--butter::before {
    background-color: var(--mm-butter-100);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23A87E16' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z'/></svg>");
}

.mm-why-card__title {
    margin: 0;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--mm-ink);
}

.mm-why-card__desc {
    margin: 0;
    font-family: var(--mm-font-body);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--mm-ink-2);
}

/* Tablet 768–1023: 3-up tightens */
@media (max-width: 1023px) and (min-width: 768px) {
    .mm-why__grid {
        gap: var(--mm-s-4);
    }
    .mm-why-card {
        padding: 28px 24px 26px;
    }
}

/* Mobile <768: stacked */
@media (max-width: 767px) {
    .mm-why {
        padding-block: 56px;
    }
    .mm-why__grid {
        grid-template-columns: 1fr;
    }
    .mm-why-card {
        padding: 32px 24px 28px;
    }
}

/* =====================================================================
   Block — What We Offer (P14 rebuild: 6-card 3×2 grid)
   Equal-weight cards, no photos, no pricing. Each card: icon + name +
   age chip + Learn more link. Section closes with a centered "View All
   Programs" link to /programs/.
===================================================================== */

.mm-offer {
    /* Light teal → grape → teal WASH — the same diagonal gradient style as the
       rich version, but low-alpha over white so it reads as a soft tint and the
       section's dark text stays fully legible (no light-text overrides needed).
       .mm-offer is alignfull, so the wash bleeds to the viewport edges. */
    /* Two soft corner glows over white: light teal in the top-left, light grape
       in the top-right — both top corners tinted, fading to white toward the
       middle/bottom. Light enough that the section's dark text stays legible. */
    background:
        radial-gradient(90% 78% at 0% 0%, rgba(21, 92, 85, 0.18) 0%, rgba(21, 92, 85, 0) 62%),
        radial-gradient(90% 78% at 100% 0%, rgba(122, 58, 150, 0.17) 0%, rgba(122, 58, 150, 0) 62%),
        #ffffff;
    padding-block: clamp(72px, 7vw, 120px) clamp(20px, 2vw, 28px);
    position: relative;
    overflow: hidden;
    scroll-margin-top: 88px;
}

.mm-offer__inner {
    /* 1280 content cap + side padding matches the live
       .mm-programs-grid__inner so the tabs/cards align with the rest of the
       page content; the gradient (.mm-offer) still bleeds full-width behind
       it — "wide, not full-bleed" content. */
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--mm-s-8);
}

/* Header */

.mm-offer__header {
    margin-bottom: var(--mm-s-10);
    max-width: 720px;
}

.mm-offer__eyebrow {
    /* Eyebrow is a label for the heading, so it hugs it: the smallest gap of
       the three (6px below, vs the heading's 14px below). line-height:1 trims
       the phantom leading that was padding the eyebrow's box. inline-flex (not
       a full-width block) keeps it content-width, not a 720px row. */
    margin: 0 0 6px 0;
    line-height: 1;
    font-family: var(--mm-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-teal-700);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Page 378 only: eyebrow sits flush on the heading (no bottom margin). The
   front-page eyebrow (.mm-programs-grid--home, not under .mm-offer) keeps the
   shared margin above. */
.mm-offer .mm-offer__eyebrow {
    margin-bottom: 0;
}

.mm-offer__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--mm-teal);
    display: inline-block;
}

/* The native (page-378) eyebrow renders its leading accent via ::before so
   editors only type the text — no decorative <span> in post_content. Scoped
   with :not(:has()) so the live what-we-offer.php eyebrow (which ships an
   explicit .mm-offer__eyebrow-dot span) is left alone. A grape star, not a
   teal dot — glyph so no width/height/radius; the eyebrow's gap:10px spaces
   it from the text. */
.mm-offer__eyebrow:not(:has(.mm-offer__eyebrow-dot))::before {
    content: "\2605"; /* ★ */
    flex: 0 0 auto;
    color: var(--mm-grape);
    font-size: 14px;
    line-height: 1;
}

.mm-offer__heading {
    /* 14px below to the subhead — larger than the eyebrow's 6px above, so the
       eyebrow reads as a tight label on the heading. Sized to match
       .mm-band__heading (the largest section heading) so this primary section
       reads at the same scale as the others, not smaller. */
    margin: 0 0 14px 0;
    font-family: var(--mm-font-display);
    font-size: clamp(34px, 3.6vw, 52px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--mm-ink);
    text-wrap: balance;
}

/* Colored accent for a word in the offer heading (e.g. "Everyone"), applied
   via the melody-magic/offer-accent inline format so the editor preserves it.
   Plain grape text — no highlight box (removed per Katherine). */
.mm-offer__heading-accent {
    color: var(--mm-grape-700);
}

.mm-offer__sub {
    margin: 0;
    font-family: var(--mm-font-body);
    font-size: 17.5px;
    line-height: 1.55;
    color: var(--mm-ink-2);
    max-width: 600px;
}

/* ─────────────────────────────────────────────────────────────────────
   Page-378 program cards ONLY (scoped under .mm-offer).
   The program-grid block reuses the shared .mm-programs-grid__* card CSS,
   but the front-page version (.mm-programs-grid--home in what-we-offer.php)
   must stay untouched — so every tweak here is scoped to .mm-offer and does
   NOT affect the live front page.

   The price block (now label + value only — the schedule note is rendered up
   under the description by render.php) is bottom-pinned via margin-top:auto so
   the "Starting at / price" lines align across every card in a row, with the
   buttons just below. Line-boxes tightened so the price isn't padded.
   ───────────────────────────────────────────────────────────────────── */
/* Bigger gap below the description than the gap below the price block, so the
   price reads as a tight cluster while the description gets breathing room. */
.mm-offer .mm-programs-grid__card-desc {
    margin-bottom: var(--mm-s-6);   /* 24px (was the shared 20px) */
}

.mm-offer .mm-programs-grid__card-meta {
    margin-top: auto;     /* bottom-pin the price block → prices align */
    margin-bottom: 8px;   /* tighter price-block → buttons gap (was 12px) */
}

.mm-offer .mm-programs-grid__card-meta-label {
    line-height: 1;       /* trim the leading beneath "Starting at" */
    margin: 0 0 5px;
}

.mm-offer .mm-programs-grid__card-meta-value {
    line-height: 1;       /* trim the leading around the price number */
    margin-top: 2px;
    color: var(--mm-teal);   /* brand teal, not the dark green (teal-800) */
}

/* Private & Special card prices stay grape (this override names both classes
   so it beats the brand-teal rule above regardless of stylesheet order). */
.mm-offer .mm-programs-grid__card--private .mm-programs-grid__card-meta-value {
    color: var(--mm-grape-700);
}

.mm-offer .mm-programs-grid__card-meta-note {
    margin-top: 3px;
}

/* Active filter tab tinted to its category (Katherine): Early = butter,
   Group = teal, Private = grape. Featured (the overview tab) keeps the shared
   brand teal. Selectors are (0,4,0) via the [data-mm-filter] attribute, so
   they beat the shared .is-active (0,2,0). Scoped to the home (.mm-offer)
   tabs — the /programs/ catalog tabs keep the default teal. */
.mm-offer .mm-programs-grid__tab.is-active[data-mm-filter="early"] {
    background: var(--mm-butter);
    color: var(--mm-ink);   /* butter is too light for white text */
}

.mm-offer .mm-programs-grid__tab.is-active[data-mm-filter="group"] {
    background: var(--mm-teal);
}

.mm-offer .mm-programs-grid__tab.is-active[data-mm-filter="private"] {
    background: var(--mm-grape);
}

/* Active count badge: a translucent-dark pill so it reads on teal, grape AND
   butter alike; text inherits the tab's color (white on teal/grape, ink on
   butter). */
.mm-offer .mm-programs-grid__tab.is-active .mm-programs-grid__tab-count {
    background: rgba(0, 0, 0, 0.16);
    color: inherit;
}

/* Category-colored top accent — clipped to the card's rounded corners, with
   the image zoom isolated so it can't flicker that clip.
   Two facts had to be reconciled:
     1. A 4px-tall accent bar CAN'T round to the lg radius on its own — its
        corners render ~square. It must be CLIPPED by the card's rounded corner
        (the shared overflow:hidden), which matches the radius exactly.
     2. The image's transform:scale(1.04) on hover, inside that same
        overflow:hidden, re-rasterizes the rounded clip every frame → corner
        flicker ("blinky / straightens out").
   Fix: KEEP the card's overflow:hidden (so the accent is clipped to match the
   corners), and isolate the zoom onto the photo's OWN compositing layer
   (translateZ(0)) so the scale stays inside the photo and never touches the
   card's clip. Hover is border-tint + the (isolated, smooth) image zoom only —
   no transform/box-shadow on the card itself, so its clip never re-rasterizes.
   Page 378 only. */
.mm-offer .mm-programs-grid__card {
    position: relative;
    /* Keep the base 1px border on all sides — same as the programs-page cards. */
}

.mm-offer .mm-programs-grid__card-photo {
    transform: translateZ(0);   /* isolate the scale(1.04) zoom on its own layer
                                   so it can't re-rasterize the card's clip */
    /* The colored category accent is the photo's OWN top border (set per variant
       below), not a separate ::before bar. A real border-top follows the photo's
       border-radius, so it wraps the rounded top corners natively — no clip to
       defeat. The radius is inset by the card's 1px border so the curve sits
       flush inside it. */
    border-top: 4px solid transparent;
    border-top-left-radius: calc(var(--wp--custom--radius--lg) - 1px);
    border-top-right-radius: calc(var(--wp--custom--radius--lg) - 1px);
}

/* ::before accent retired — the top border now lives on the photo. */
.mm-offer .mm-programs-grid__card::before {
    content: none;
}

.mm-offer .mm-programs-grid__card--group .mm-programs-grid__card-photo {
    border-top-color: var(--mm-teal);
}

.mm-offer .mm-programs-grid__card--private .mm-programs-grid__card-photo {
    border-top-color: var(--mm-grape);
}

.mm-offer .mm-programs-grid__card--early .mm-programs-grid__card-photo {
    border-top-color: var(--mm-butter);
}

/* Hover: border-color tint only on the card (the image zoom is the visible
   effect, now smooth via the photo's isolated layer). No transform/box-shadow
   on the card, so its rounded clip never re-rasterizes → corners stay round. */
.mm-offer .mm-programs-grid__card:hover {
    transform: none;
    box-shadow: none;
}

/* Category-colored CARD BADGE — solid fill per bucket (matches the accent +
   active tab). Early = butter (dark text, butter is light); Group = teal,
   Private = grape (white text). Page 378 only. */
.mm-offer .mm-programs-grid__card--early .mm-programs-grid__card-cat-badge {
    background: var(--mm-butter);
    color: var(--mm-ink);
}

.mm-offer .mm-programs-grid__card--group .mm-programs-grid__card-cat-badge {
    background: var(--mm-teal);
    color: var(--mm-white);
}

.mm-offer .mm-programs-grid__card--private .mm-programs-grid__card-cat-badge {
    background: var(--mm-grape);
    color: var(--mm-white);
}

/* Category-colored ENROLL button. Group already uses brand teal (--primary)
   and Private uses grape (--grape) — both already match. Only the Early bucket
   needs the butter treatment (with dark text, since butter is light). */
.mm-offer .mm-programs-grid__card--early .mm-programs-grid__card-btn--primary {
    background: var(--mm-butter);
    border-color: var(--mm-butter);
    color: var(--mm-ink);
    box-shadow: 0 2px 8px rgba(244, 209, 106, 0.30);
}

.mm-offer .mm-programs-grid__card--early .mm-programs-grid__card-btn--primary:hover {
    color: var(--mm-ink);                              /* keep dark text (override the white-on-hover) */
    box-shadow: 0 6px 16px rgba(244, 209, 106, 0.42);  /* butter glow, not teal */
}

/* Light-purple star divider between the card eyebrow meta parts
   (e.g. "Ages 0–4 ★ 45 min"), replacing the middot. Emitted by the block's
   render.php as .mm-programs-grid__card-eyebrow-sep; only present in the
   page-378 block output, but scoped under .mm-offer to be safe. */
.mm-offer .mm-programs-grid__card-eyebrow-sep {
    color: var(--mm-grape-300);
    margin: 0 7px;
    font-size: 0.9em;
    vertical-align: 1px;
}

/* Grid — mobile 1×6 default, tablet 2×3, desktop 3×2 */

.mm-offer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

/* Card — base (light treatment) */

.mm-offer-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--mm-white);
    border: 1px solid var(--mm-line);
    display: flex;
    flex-direction: column;
    box-shadow: var(--mm-shadow-xs);
    transition: border-color 220ms var(--mm-ease), box-shadow 220ms var(--mm-ease), transform 220ms var(--mm-ease);
    height: 100%;
}

.mm-offer-card:hover,
.mm-offer-card:focus-within {
    border-color: var(--mm-teal-300);
    box-shadow: var(--mm-shadow-md);
    transform: translateY(-2px);
}

/* Top image (light cards) */

.mm-offer-card__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.mm-offer-card__body {
    padding: 22px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mm-offer-card__eyebrow {
    margin: 0 0 10px 0;
    font-family: var(--mm-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-teal-700);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mm-offer-card__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--mm-teal);
    display: inline-block;
}

.mm-offer-card__title {
    margin: 0 0 10px 0;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--mm-ink);
}

.mm-offer-card__desc {
    margin: 0 0 20px 0;
    font-family: var(--mm-font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--mm-ink-2);
}

.mm-offer-card__foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mm-offer-card__pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mm-offer-card__pill {
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mm-ink-2);
    background-color: var(--mm-paper-2);
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.mm-offer-card__pill--price {
    color: var(--mm-teal-800);
    background-color: var(--mm-teal-100);
}

.mm-offer-card__link {
    align-self: flex-start;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--mm-teal-700);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--mm-dur) var(--mm-ease), gap var(--mm-dur) var(--mm-ease);
}

.mm-offer-card__link:hover,
.mm-offer-card__link:focus-visible {
    color: var(--mm-teal-800);
    gap: 10px;
    text-decoration: none;
}

.mm-offer-card__link-arrow {
    display: inline-flex;
    align-items: center;
}

/* Featured card (Jam Band — growth focus) — dark teal gradient body */

.mm-offer-card--feature {
    background: linear-gradient(180deg, #155C55 0%, #0E3F3A 100%);
    color: #fff;
    border: 0;
}

.mm-offer-card--feature:hover,
.mm-offer-card--feature:focus-within {
    border: 0;
    transform: translateY(-2px);
    box-shadow: var(--mm-shadow-md);
}

.mm-offer-card__feature-visual {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.mm-offer-card__feature-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mm-offer-card__feature-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 63, 58, 0.2) 0%, rgba(14, 63, 58, 0.95) 100%);
    pointer-events: none;
}

.mm-offer-card__feature-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0E3F3A;
    background-color: var(--mm-butter);
    padding: 6px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mm-offer-card__feature-badge-star {
    font-size: 12px;
    line-height: 1;
}

.mm-offer-card--feature .mm-offer-card__eyebrow {
    color: var(--mm-teal-300);
}

.mm-offer-card--feature .mm-offer-card__eyebrow-dot {
    background-color: var(--mm-teal-300);
}

.mm-offer-card--feature .mm-offer-card__title {
    color: #fff;
}

.mm-offer-card--feature .mm-offer-card__desc {
    color: rgba(255, 255, 255, 0.82);
}

.mm-offer-card--feature .mm-offer-card__pill {
    color: #E8F5F2;
    background-color: rgba(255, 255, 255, 0.12);
}

.mm-offer-card--feature .mm-offer-card__pill--price {
    color: #0E3F3A;
    background-color: var(--mm-teal-300);
}

.mm-offer-card--feature .mm-offer-card__link {
    color: var(--mm-teal-300);
}

.mm-offer-card--feature .mm-offer-card__link:hover,
.mm-offer-card--feature .mm-offer-card__link:focus-visible {
    color: #fff;
}

/* View All link below the grid */

.mm-offer__view-all {
    margin-top: var(--mm-s-10);
    text-align: center;
}

/* "View All Programs" — a native core button carrying the mm-view-all block
   style. That style ships no CSS, so the button fell back to the default
   core look (gray pill) and read as off-brand. Style it as a teal outline
   pill matching the card CTAs: brand-teal border + teal-800 label (same as
   the "See details" ghost buttons), filling brand teal with a lift on hover
   — consistent with the brighter-brand button language, no dark green. */
.is-style-mm-view-all .wp-block-button__link {
    background-color: transparent;
    color: var(--mm-teal-800);
    border: 2px solid var(--mm-teal);
    border-radius: 999px;
    padding: 14px 30px;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 15px;
    transition: background-color var(--mm-dur) var(--mm-ease),
                color var(--mm-dur) var(--mm-ease),
                box-shadow var(--mm-dur) var(--mm-ease),
                transform var(--mm-dur) var(--mm-ease);
}

.is-style-mm-view-all .wp-block-button__link:hover,
.is-style-mm-view-all .wp-block-button__link:focus {
    background-color: var(--mm-teal);
    color: var(--mm-white);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(66, 174, 154, 0.35);
}

/* Trailing arrow (CSS, so the editable button text stays just "View All
   Programs"). Inherits the link color — teal-800, white on hover — and
   nudges right on hover. */
.is-style-mm-view-all .wp-block-button__link::after {
    content: "\2192"; /* → */
    margin-left: 8px;
    display: inline-block;
    transition: transform var(--mm-dur) var(--mm-ease);
}

.is-style-mm-view-all .wp-block-button__link:hover::after,
.is-style-mm-view-all .wp-block-button__link:focus::after {
    transform: translateX(3px);
}

.mm-offer__view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    background-color: transparent;
    color: var(--mm-teal-800);
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: 2px solid var(--mm-teal);
    transition: background-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease);
}

.mm-offer__view-all-link:hover,
.mm-offer__view-all-link:focus-visible {
    background-color: var(--mm-teal);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.mm-offer__view-all-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform var(--mm-dur) var(--mm-ease);
}

.mm-offer__view-all-link:hover .mm-offer__view-all-arrow,
.mm-offer__view-all-link:focus-visible .mm-offer__view-all-arrow {
    transform: translateX(2px);
}

/* Tablet 768–1023: 2×3 grid */
@media (min-width: 768px) {
    .mm-offer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mm-offer-card__body {
        padding: 20px 22px 22px;
    }
    .mm-offer-card__img,
    .mm-offer-card__feature-visual {
        height: 190px;
    }
}

/* Desktop ≥1024: 3×2 grid */
@media (min-width: 1024px) {
    .mm-offer {
        padding-block-start: 112px;
    }
    .mm-offer__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .mm-offer-card__body {
        padding: 22px 24px 24px;
    }
    .mm-offer-card__img,
    .mm-offer-card__feature-visual {
        height: 200px;
    }
}

/* Mobile <768 */
@media (max-width: 767px) {
    .mm-offer {
        padding-block: var(--mm-s-12);
        padding-inline: var(--mm-s-4);
    }
    .mm-offer-card__feature-scrim {
        background: linear-gradient(180deg, rgba(14, 63, 58, 0.35) 0%, rgba(14, 63, 58, 0.97) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-offer-card,
    .mm-offer-card__link,
    .mm-offer__view-all-link,
    .mm-offer__view-all-arrow {
        transition: none;
    }
    .mm-offer-card:hover {
        transform: none;
    }
    .mm-offer-card__link:hover {
        gap: 6px;
    }
    .mm-offer__view-all-link:hover {
        transform: none;
    }
}

/* =====================================================================
   Block 6 — How it works
===================================================================== */

.mm-how {
    background-color: var(--wp--preset--color--gray-100);
    padding-block: var(--wp--preset--spacing--80);
    padding-inline: var(--wp--preset--spacing--40);
}

.mm-how__inner {
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-inline: auto;
}

.mm-how__header {
    text-align: center;
    margin-bottom: var(--wp--preset--spacing--60);
}

.mm-how__heading {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--3xl);
    font-weight: 700;
    margin: 0 0 var(--wp--preset--spacing--20) 0;
}

.mm-how__lead {
    margin: 0;
    font-size: var(--wp--preset--font-size--lg);
    color: var(--wp--preset--color--gray-700);
}

.mm-how__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--50);
    counter-reset: mm-step;
}

.mm-how__step {
    position: relative;
    padding: var(--wp--preset--spacing--50);
    background-color: var(--wp--preset--color--white);
    border-radius: var(--wp--preset--spacing--40);
    box-shadow: 0 1px 2px rgba(10,10,10,0.04), 0 4px 12px rgba(10,10,10,0.06);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
}

.mm-how__step-number {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--3xl);
    font-weight: 700;
    color: var(--wp--preset--color--teal-light);
    line-height: 1;
}

.mm-how__step-icon {
    display: inline-flex;
    color: var(--wp--preset--color--teal-base);
}

.mm-how__step-title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 700;
    margin: 0;
    color: var(--wp--preset--color--black);
}

.mm-how__step-body {
    margin: 0;
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.5;
    color: var(--wp--preset--color--gray-700);
}

@media (min-width: 768px) {
    .mm-how__steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .mm-how__steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =====================================================================
   Block 7 — Testimonials carousel (MM-007 P9 rebuild — comp fidelity)
   6 real parent quotes paginated 3-per-page on desktop+tablet, prev/next
   nav + pagination pips. Mobile (<768) collapses to a flat 6-card stack
   with no carousel UI. The 94% retention stat moved to the hero proof
   bar in P4 and is intentionally absent here.
===================================================================== */

.mm-testimonials {
    margin-block-start: 112px;
    padding-inline: var(--mm-s-8);
    scroll-margin-top: 88px;
    position: relative;
}

.mm-testimonials__inner {
    max-width: 1440px;
    margin-inline: auto;
}

/* Header — heading block left, prev/next nav right */

.mm-testimonials__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: var(--mm-s-8);
}

.mm-testimonials__heading-block { min-width: 0; }

.mm-testimonials__eyebrow {
    margin: 0 0 10px 0;
    font-family: var(--mm-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-grape-700);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mm-testimonials__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--mm-grape-700);
    display: inline-block;
}

.mm-testimonials__heading {
    margin: 0;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: clamp(30px, 3vw, 42px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--mm-ink);
    text-wrap: balance;
    max-width: 620px;
}

/* Nav buttons */

.mm-testimonials__nav {
    display: flex;
    gap: 10px;
}

.mm-testimonials__nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 1.5px solid var(--mm-line-strong);
    background-color: #fff;
    color: var(--mm-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease);
}

.mm-testimonials__nav-btn:hover,
.mm-testimonials__nav-btn:focus-visible {
    background-color: var(--mm-teal-50);
    border-color: var(--mm-teal-300);
    color: var(--mm-teal-800);
}

/* Track — holds two pages, only one visible at a time on desktop+tablet */

.mm-testimonials__track {
    position: relative;
}

.mm-testimonials__page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mm-s-6);
    align-items: stretch;
    transition: opacity var(--mm-dur-slow) var(--mm-ease-out);
}

.mm-testimonials__page[aria-hidden="true"] {
    display: none;
}

/* Page 2 holds 2 cards instead of 3 (P12.5). Switch to a 2-col grid
   capped at 2/3 of the inner width and centered, so each card visually
   matches the size of a Page-1 card. The 1fr mobile rule below still
   wins under 768px to flatten both pages into a single stack. */
.mm-testimonials__page[data-page="1"] {
    grid-template-columns: repeat(2, 1fr);
    max-width: 66.667%;
    margin-inline: auto;
}

/* Quote card */

.mm-quote-card {
    margin: 0;
    padding: 32px 30px 28px;
    border-radius: 20px;
    background-color: #fff;
    border: 1px solid var(--mm-line);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.mm-quote-card--teal {
    background: linear-gradient(180deg, #fff 0%, var(--mm-teal-100) 100%);
    border-color: var(--mm-teal-300);
}

.mm-quote-card--grape {
    background: linear-gradient(180deg, #fff 0%, var(--mm-grape-100) 100%);
    border-color: rgba(108, 47, 136, 0.15);
}

/* mm-quote-card--apricot keeps the default white + line border;
   only the avatar gets the apricot treatment. */

.mm-quote-card__mark {
    font-family: var(--mm-font-display);
    font-weight: 900;
    font-size: 56px;
    color: var(--mm-grape-700);
    line-height: 0.6;
    height: 24px;
    user-select: none;
}

.mm-quote-card__quote {
    margin: 0;
    flex: 1;
    border: 0;
    padding: 0;
}

.mm-quote-card__quote p {
    margin: 0;
    font-family: var(--mm-font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--mm-ink);
    font-style: italic;
}

.mm-quote-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--mm-line);
}

.mm-quote-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 14px;
    background-color: var(--mm-teal-100);
    color: var(--mm-teal-800);
}

.mm-quote-card--grape .mm-quote-card__avatar {
    background-color: var(--mm-grape-100);
    color: var(--mm-grape-700);
}

.mm-quote-card--apricot .mm-quote-card__avatar {
    background-color: var(--mm-apricot-100);
    color: var(--mm-apricot-800);
}

.mm-quote-card__cite-block {
    min-width: 0;
}

.mm-quote-card__cite {
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--mm-ink);
    line-height: 1.2;
}

.mm-quote-card__sub {
    margin-top: 1px;
    font-family: var(--mm-font-body);
    font-size: 12.5px;
    color: var(--mm-ink-3);
    font-weight: 500;
    line-height: 1.3;
}

.mm-quote-card__stars {
    color: #E8B94B;
    font-size: 13px;
    letter-spacing: 2px;
    margin-top: 2px;
    line-height: 1;
}

/* "Read more from our families" link — appears below the 3-card grid,
   sends visitors to /testimonials/ for the full list. Replaces the
   prior pagination pips after the 5/4 trim. */
.mm-testimonials__see-all {
    margin: var(--mm-s-8) 0 0;
    text-align: center;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mm-testimonials__see-all a {
    color: var(--mm-teal-800);
    text-decoration: none;
    border-bottom: 1.5px solid var(--mm-teal-300);
    padding-bottom: 2px;
    transition: border-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease);
}

.mm-testimonials__see-all a:hover,
.mm-testimonials__see-all a:focus-visible {
    color: var(--mm-teal);
    border-color: var(--mm-teal);
}

/* Pagination pips */

.mm-testimonials__pips {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--mm-s-8);
}

.mm-testimonials__pip {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--mm-line-strong);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: width var(--mm-dur) var(--mm-ease-out), background-color var(--mm-dur) var(--mm-ease);
}

.mm-testimonials__pip.is-active {
    background-color: var(--mm-teal);
    width: 24px;
}

.mm-testimonials__pip:focus-visible {
    outline: 2px solid var(--mm-teal);
    outline-offset: 3px;
}

/* Tablet 768–1023: 3-up tightens, nav stays visible */
@media (min-width: 768px) and (max-width: 1023px) {
    .mm-testimonials__page {
        gap: var(--mm-s-4);
    }
    .mm-quote-card {
        padding: 28px 24px 24px;
    }
    .mm-quote-card__quote p {
        font-size: 15.5px;
    }
}

/* Mobile <768: flat 6-card stack, no carousel UI */
@media (max-width: 767px) {
    .mm-testimonials {
        margin-block-start: 64px;
        padding-inline: var(--mm-s-5);
    }
    .mm-testimonials__page {
        grid-template-columns: 1fr;
        gap: var(--mm-s-5);
    }
    .mm-testimonials__page[aria-hidden="true"] {
        display: grid;
    }
    .mm-testimonials__nav,
    .mm-testimonials__pips {
        display: none;
    }
}

/* Reduced motion: cards page change is instant, pip transitions skip */
@media (prefers-reduced-motion: reduce) {
    .mm-testimonials__page,
    .mm-testimonials__pip,
    .mm-testimonials__nav-btn {
        transition: none;
    }
}

/* =====================================================================
   Block 8 — Teacher Block (MM-007 P7 rebuild — comp fidelity)
   Two-column Katherine intro on paper background. Left: 4:5 portrait
   placeholder with shadow + scrim + signature overlay. Right: grape
   eyebrow, headline with teal "23 years" accent, expanded-contractions
   bio, 3 credential pills, outline CTA.
===================================================================== */

.mm-teacher {
    background-color: var(--mm-paper);
    margin-block-start: 112px;
    padding-inline: var(--mm-s-8);
    scroll-margin-top: 88px;
}

.mm-teacher__inner {
    max-width: 1440px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

/* Left — portrait wrap */

.mm-teacher__visual { min-width: 0; }

.mm-teacher__photo-wrap {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: 0 22px 44px -18px rgba(21, 92, 85, 0.22), 0 4px 12px rgba(21, 92, 85, 0.06);
}

/* Katherine 5/26 launch: she read "too large"/zoomed-in in the video frame.
   Root cause (Ben 6/1): the source reel (output-web.mp4) is natively
   1280×2276 — a 9:16 vertical phone video — but the 4/5 wrap above cropped
   it under object-fit:cover. Match the wrap's aspect-ratio to the source's
   exact ratio so the full frame shows with zero crop, and trim the desktop
   cap to 360px so the now-taller card stays proportional to the content
   column (mobile keeps its 320px cap below). Still-image portraits keep the
   4/5 wrap above untouched — this only targets the :has(video) case.
   Lives in homepage.css (not the front-page-only polish overlay) so it
   applies on the front page, page 378, and the editor canvas alike — the
   block binds this stylesheet via wp_enqueue_block_style. */
.mm-teacher__photo-wrap:has(video) {
    max-width: 360px;
    margin-inline: auto;
    aspect-ratio: 1280 / 2276;
}

.mm-teacher__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mm-teacher__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(14, 63, 58, 0) 50%, rgba(14, 63, 58, 0.35) 100%);
}

.mm-teacher__sig {
    position: absolute;
    left: 20px;
    bottom: 20px;
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 12px 16px;
    font-family: var(--mm-font-display);
}

.mm-teacher__photo-wrap:has(video) .mm-teacher__sig {
    bottom: 84px; /* lift the founder caption clear of the video controls (Ben 6/1) */
}

/* Descendant selectors (.mm-teacher__sig prefix) are deliberate: WP's
   global-styles rule `:root :where(p){ line-height:1.7; margin-bottom:1em }`
   ties these on specificity (0,1,0) but loads AFTER homepage.css, so a
   single-class selector loses the tie — its 1em bottom margin was the loose
   gap under the name. The two-class selector (0,2,0) wins outright. (Ben 6/1) */
.mm-teacher__sig .mm-teacher__sig-name {
    margin: 0;
    font-weight: 800;
    font-size: 16px;
    color: var(--mm-ink);
    line-height: 1.15;
}

.mm-teacher__sig .mm-teacher__sig-role {
    margin: 0;
    font-family: var(--mm-font-body);
    font-size: 12.5px;
    color: var(--mm-ink-3);
    line-height: 1.2;
}

/* Right — content */

.mm-teacher__content { min-width: 0; }

.mm-teacher__eyebrow {
    margin: 0 0 14px 0;
    font-family: var(--mm-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-grape-700);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mm-teacher__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--mm-grape-700);
    display: inline-block;
}

.mm-teacher__heading {
    margin: 0 0 10px 0; /* tightened from 20px so the bio sits closer to the title (Ben 6/1) */
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: clamp(32px, 3.2vw, 46px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--mm-ink);
    text-wrap: balance;
}

.mm-teacher__heading-accent {
    color: var(--mm-teal);
}

.mm-teacher__bio {
    margin: 0 0 18px 0;
    font-family: var(--mm-font-body);
    font-size: 18px;
    line-height: 1.6;
    color: var(--mm-ink-2);
}

.mm-teacher__creds {
    list-style: none;
    margin: 0 0 28px 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mm-teacher__cred {
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}

.mm-teacher__cred--teal {
    color: var(--mm-teal-800);
    background-color: var(--mm-teal-100);
}

.mm-teacher__cred--grape {
    color: var(--mm-grape-700);
    background-color: var(--mm-grape-100);
}

.mm-teacher__cred-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mm-teacher__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    background-color: transparent;
    color: var(--mm-teal-800);
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: 2px solid var(--mm-teal);
    transition: background-color var(--mm-dur) var(--mm-ease), color var(--mm-dur) var(--mm-ease), transform var(--mm-dur) var(--mm-ease);
}

.mm-teacher__cta:hover,
.mm-teacher__cta:focus-visible {
    background-color: var(--mm-teal);
    color: #fff;
    transform: translateY(-1px);
}

.mm-teacher__cta-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform var(--mm-dur) var(--mm-ease);
}

.mm-teacher__cta:hover .mm-teacher__cta-arrow,
.mm-teacher__cta:focus-visible .mm-teacher__cta-arrow {
    transform: translateX(2px);
}

/* Tablet 768–1023: 2-col tightens to closer-to-even */
@media (min-width: 768px) and (max-width: 1023px) {
    .mm-teacher {
        margin-block-start: 88px;
    }
    .mm-teacher__inner {
        grid-template-columns: 1fr 1.15fr;
        gap: 32px;
    }
    /* 4:5 holds — at this width the placeholder reads as a portrait crop,
       not a stretched still life. Phase 13 swaps for Katherine's portrait. */
}

/* Desktop ≥1024 */
@media (min-width: 1024px) {
    .mm-teacher__inner {
        grid-template-columns: 0.85fr 1fr;
        gap: 56px;
    }
}

/* Mobile <768: stack, photo above content, narrower photo */
@media (max-width: 767px) {
    .mm-teacher {
        margin-block-start: 64px;
    }
    .mm-teacher__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .mm-teacher__photo-wrap,
    .mm-teacher__photo-wrap:has(video) {
        max-width: 320px;
        margin-inline: auto;
    }
    .mm-teacher__heading {
        font-size: clamp(26px, 6vw, 32px);
    }
    .mm-teacher__bio {
        font-size: 16px;
    }
    .mm-teacher__cta {
        align-self: stretch;
        justify-content: center;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mm-teacher__cta,
    .mm-teacher__cta-arrow {
        transition: none;
    }
    .mm-teacher__cta:hover,
    .mm-teacher__cta:focus-visible {
        transform: none;
    }
    .mm-teacher__cta:hover .mm-teacher__cta-arrow,
    .mm-teacher__cta:focus-visible .mm-teacher__cta-arrow {
        transform: none;
    }
}

/* =====================================================================
   Block 8.5 — Try a Class Band (MM-007 P8 — comp fidelity)
   Contained gradient card sitting on paper background between Teacher
   and Testimonials. NOT alignfull — the card itself caps at 1200 inside
   the 1440 page-frame, deliberately floats with paper margin around it.
===================================================================== */

.mm-band {
    margin-block-start: 112px;
    padding-inline: var(--mm-s-8);
    scroll-margin-top: 88px;
}

.mm-band__card {
    max-width: 1200px;
    margin-inline: auto;
    /* Comp gradient: #155C55 = teal-800, #1F7A70 = teal-700, #5F2C75 = grape-700.
       Hardcoded hex retained because the comp's specific stops + 130% terminal
       position aren't directly expressible via single-color tokens. Phase 13
       can revisit if a custom gradient token lands. */
    background: linear-gradient(135deg, #155C55 0%, #1F7A70 55%, #5F2C75 130%);
    border-radius: 32px;
    padding: 72px 56px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Atmospheric blobs — clipped quarter-circles via overflow:hidden on the card */

.mm-band__blob {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.mm-band__blob--butter {
    width: 300px;
    height: 300px;
    background-color: rgba(244, 209, 106, 0.12);
    top: -100px;
    right: -60px;
}

.mm-band__blob--teal {
    width: 220px;
    height: 220px;
    background-color: rgba(159, 214, 204, 0.15);
    bottom: -80px;
    left: 40px;
}

/* Inner row */

.mm-band__row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

.mm-band__pitch { min-width: 0; }

.mm-band__eyebrow {
    margin: 0 0 18px 0;
    font-family: var(--mm-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-teal-300);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mm-band__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--mm-teal-300);
    display: inline-block;
}

.mm-band__heading {
    margin: 0 0 14px 0;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: clamp(34px, 3.6vw, 52px);
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: #fff;
    text-wrap: balance;
}

.mm-band__heading-accent {
    color: var(--mm-butter);
}

.mm-band__sub {
    margin: 0;
    font-family: var(--mm-font-body);
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    max-width: 560px;
}

/* CTA stack */

.mm-band__cta-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    min-width: 0;
}

.mm-band__cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 28px;
    border-radius: 999px;
    background-color: #fff;
    color: var(--mm-teal-900);
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 17px;
    text-decoration: none;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.3);
    transition: transform var(--mm-dur) var(--mm-ease), box-shadow var(--mm-dur) var(--mm-ease);
}

.mm-band__cta-primary:hover,
.mm-band__cta-primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.36);
}

.mm-band__cta-icon {
    display: inline-flex;
    align-items: center;
}

.mm-band__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 999px;
    background-color: transparent;
    color: #fff;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    transition: background-color var(--mm-dur) var(--mm-ease), border-color var(--mm-dur) var(--mm-ease);
}

.mm-band__cta-secondary:hover,
.mm-band__cta-secondary:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
}

.mm-band__cta-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform var(--mm-dur) var(--mm-ease);
}

.mm-band__cta-secondary:hover .mm-band__cta-arrow,
.mm-band__cta-secondary:focus-visible .mm-band__cta-arrow {
    transform: translateX(2px);
}

.mm-band__note {
    margin: 4px 0 0 0;
    font-family: var(--mm-font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

/* Tablet 768–1023: stays single-column-stack, padding tightens */
@media (max-width: 1023px) {
    .mm-band__card {
        padding: 56px 40px;
    }
    .mm-band__blob--butter {
        width: 220px;
        height: 220px;
        top: -70px;
        right: -40px;
    }
    .mm-band__blob--teal {
        width: 160px;
        height: 160px;
        bottom: -60px;
        left: 24px;
    }
}

/* Desktop ≥1024: 2-column row, CTA stack right */
@media (min-width: 1024px) {
    .mm-band__row {
        grid-template-columns: 1.1fr auto;
        gap: 40px;
    }
    .mm-band__cta-col {
        min-width: 280px;
    }
}

/* Mobile <768: tighter padding, smaller radius, blobs hidden */
@media (max-width: 767px) {
    .mm-band {
        margin-block-start: 64px;
    }
    .mm-band__card {
        padding: 48px 24px;
        border-radius: 24px;
    }
    .mm-band__blob {
        display: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mm-band__cta-primary,
    .mm-band__cta-secondary,
    .mm-band__cta-arrow {
        transition: none;
    }
    .mm-band__cta-primary:hover,
    .mm-band__cta-primary:focus-visible {
        transform: none;
    }
    .mm-band__cta-secondary:hover .mm-band__cta-arrow,
    .mm-band__cta-secondary:focus-visible .mm-band__cta-arrow {
        transform: none;
    }
}

/* Block 9 — FAQ accordion: styles moved to assets/css/faq.css (shared
   with the /programs/ archive). Both pages enqueue faq.css directly. */

/* =====================================================================
   Block 10 — Final CTA band
===================================================================== */

.mm-final-cta {
    background-color: var(--wp--preset--color--teal-base);
    color: var(--wp--preset--color--white);
    padding-block: var(--wp--preset--spacing--80);
    padding-inline: var(--wp--preset--spacing--40);
    text-align: center;
}

.mm-final-cta__inner {
    max-width: 720px;
    margin-inline: auto;
}

.mm-final-cta__heading {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--3xl);
    font-weight: 700;
    margin: 0 0 var(--wp--preset--spacing--30) 0;
    color: var(--wp--preset--color--white);
}

.mm-final-cta__body {
    margin: 0 0 var(--wp--preset--spacing--50) 0;
    font-size: var(--wp--preset--font-size--lg);
    color: rgba(255,255,255,0.92);
}

.mm-final-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30);
    justify-content: center;
}

.mm-final-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--wp--preset--spacing--30);
    padding-inline: var(--wp--preset--spacing--50);
    border-radius: var(--wp--preset--spacing--30);
    font-weight: 600;
    text-decoration: none;
    font-size: var(--wp--preset--font-size--base);
    min-height: 44px;
    transition: background-color 150ms ease, color 150ms ease;
}

.mm-final-cta__button--primary {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--teal-dark);
}
.mm-final-cta__button--primary:hover,
.mm-final-cta__button--primary:focus-visible {
    background-color: var(--wp--preset--color--gray-100);
    color: var(--wp--preset--color--teal-dark);
}

.mm-final-cta__button--secondary {
    background-color: transparent;
    color: var(--wp--preset--color--white);
    border: 2px solid currentColor;
    padding-block: calc(var(--wp--preset--spacing--30) - 2px);
    padding-inline: calc(var(--wp--preset--spacing--50) - 2px);
}
.mm-final-cta__button--secondary:hover,
.mm-final-cta__button--secondary:focus-visible {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--teal-dark);
}

/* =====================================================================
   Block 11 — Seasonal gift cert callout
===================================================================== */

.mm-gift-cert {
    background-color: var(--wp--preset--color--purple-base);
    color: var(--wp--preset--color--white);
    padding-block: var(--wp--preset--spacing--40);
    padding-inline: var(--wp--preset--spacing--40);
}

.mm-gift-cert[hidden] {
    display: none;
}

.mm-gift-cert__inner {
    max-width: var(--wp--style--global--wide-size, 1200px);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--40);
}

.mm-gift-cert__icon {
    font-size: var(--wp--preset--font-size--3xl);
    line-height: 1;
}

.mm-gift-cert__copy {
    flex: 1 1 320px;
}

.mm-gift-cert__heading {
    margin: 0 0 var(--wp--preset--spacing--20) 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 700;
    color: var(--wp--preset--color--white);
}

.mm-gift-cert__body {
    margin: 0;
    font-size: var(--wp--preset--font-size--base);
    color: rgba(255,255,255,0.92);
}

.mm-gift-cert__cta {
    display: inline-flex;
    align-items: center;
    padding-block: var(--wp--preset--spacing--30);
    padding-inline: var(--wp--preset--spacing--50);
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--purple-dark);
    border-radius: var(--wp--preset--spacing--30);
    font-weight: 600;
    text-decoration: none;
    min-height: 44px;
}

.mm-gift-cert__cta:hover,
.mm-gift-cert__cta:focus-visible {
    background-color: var(--wp--preset--color--gray-100);
    color: var(--wp--preset--color--purple-dark);
}

.mm-gift-cert__dismiss {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 0;
    color: var(--wp--preset--color--white);
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    flex: 0 0 auto;
}

.mm-gift-cert__dismiss:hover,
.mm-gift-cert__dismiss:focus-visible {
    background-color: rgba(255,255,255,0.15);
}

/* =====================================================================
   Reduced motion
===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mm-hero__slide,
    .mm-program-card {
        transition: none;
    }
}

/* =====================================================================
   Heading scale lift on larger screens
===================================================================== */

@media (min-width: 1024px) {
    .mm-hero__headline { font-size: var(--wp--preset--font-size--5xl); }
    .mm-programs__heading,
    .mm-private-band__heading,
    .mm-how__heading,
    .mm-final-cta__heading { font-size: var(--wp--preset--font-size--4xl); }
}

/* =====================================================================
   Home reviews widget — live Opus1.io feed (patterns/home-reviews-widget.html)

   Self-contained so the section doesn't depend on the ephemeral
   walkthrough-previews.css. Matches the homepage section rhythm used by
   .mm-testimonials directly above it.
===================================================================== */

.mm-home-reviews {
    margin-block-start: 112px;
    padding-inline: var(--mm-s-8);
    scroll-margin-top: 88px;
}

.mm-home-reviews__inner {
    max-width: 1440px;
    margin-inline: auto;
}

.mm-home-reviews__header {
    max-width: 620px;
    margin-bottom: var(--mm-s-8);
}

.mm-home-reviews__eyebrow {
    margin: 0 0 10px 0;
    font-family: var(--mm-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-grape-700);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mm-home-reviews__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--mm-grape-700);
    display: inline-block;
}

.mm-home-reviews__heading {
    margin: 0 0 10px 0;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: clamp(30px, 3vw, 42px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--mm-ink);
    text-wrap: balance;
}

.mm-home-reviews__sub {
    margin: 0;
    font-family: var(--mm-font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--mm-ink-3);
}

.mm-home-reviews__embed {
    background: var(--mm-white);
    border: 1px solid var(--mm-line);
    border-radius: 16px;
    padding: var(--mm-s-6);
    min-height: 320px;
}

.mm-home-reviews__noscript {
    margin: 0;
    color: var(--mm-ink-3);
    text-align: center;
}

@media (max-width: 767px) {
    .mm-home-reviews {
        margin-block-start: 64px;
        padding-inline: var(--mm-s-5);
    }
    .mm-home-reviews__embed {
        padding: var(--mm-s-4);
    }
}


/* =====================================================================
   2026-05-26 — Home programs grid background

   Teal-dominant diagonal wash with subtle grape accent in the bottom-
   right, matching the visual language of the program-page video
   section. Two radial overlays + a base linear gradient so the
   transitions feel soft and the section reads as a distinct, branded
   moment between the hero and what-follows.

   Scoped to the --home modifier so the dedicated /programs/ page
   (which uses the base .mm-programs-grid without the modifier) keeps
   its flat paper background.
   ===================================================================== */

/* No sitewide blanket margin between .mm-home children. Each section
   pattern owns its own margin-block-start situationally below:
     mm-band / mm-teacher / mm-testimonials / mm-home-reviews → 112px
     mm-why / mm-faq → 112px (added)
     mm-programs-grid--home → 0 (butts against the hero by design)
     mm-hero → no margin (first child)
   WP core's `:where(.is-layout-flow) > * { margin-block-start: 1rem }`
   is left alone because every section's own (higher-specificity) rule
   wins where set; for the few that don't, 16px is acceptable. */

/* Hero butts cleanly against the programs grid below — both have their
   own internal padding that gives them visual separation. */
.mm-home > .mm-programs-grid--home {
    margin-block-start: 0 !important;
}

/* FAQ section lives in faq.css; the wrapper there has no margin. Add
   spacing here so it doesn't crash into the testimonial reviews block
   above it on the homepage only. */
.mm-home > .mm-faq {
    margin-block-start: 112px;
}

.mm-programs-grid.mm-programs-grid--home {
    /* Escape the .mm-page-frame 1440px cap so the gradient bleeds to the
       viewport edges. Same self-escape trick as .mm-prog-hero on the
       program page. The inner (.mm-programs-grid__inner) keeps its
       1280px content cap so the cards/tabs stay aligned with the rest
       of the page content. */
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    background:
        radial-gradient(110% 70% at 0% 0%, rgba(64, 176, 160, 0.20) 0%, rgba(64, 176, 160, 0) 55%),
        radial-gradient(95% 60% at 100% 100%, rgba(122, 58, 150, 0.16) 0%, rgba(122, 58, 150, 0) 60%),
        linear-gradient(160deg, var(--mm-teal-50) 0%, #ffffff 45%, var(--mm-teal-100) 80%, var(--mm-grape-100) 100%);
    padding-block: clamp(72px, 7vw, 120px) clamp(20px, 2vw, 28px);
    position: relative;
    overflow: hidden;
}

/* Subtle decorative top edge — soft teal-to-grape gradient strip that
   reinforces the brand colors without adding a hard border. */
.mm-programs-grid.mm-programs-grid--home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--mm-teal-300) 20%,
        var(--mm-teal) 50%,
        var(--mm-grape-300) 80%,
        transparent 100%);
    opacity: 0.6;
    pointer-events: none;
}