/**
 * Program template styles (MM-008 walkthrough-blocking minimum).
 *
 * Scope: single-mm_program template only.
 *   - .mm-program-hero        : two-col hero pattern
 *   - .mm-program-glance      : 3-pill quick-facts bar
 *   - .mm-program__body       : post-content wrapper for editor body
 *
 * Tokens used: --mm-* defined in block-styles.css.
 */

/* =====================================================================
   Page frame — single-mm_program
===================================================================== */
.mm-program.mm-page-frame {
    background: #fff; /* white page background (was cream --mm-bg), Ben 6/4 */
    color: var(--mm-fg);
}

/* =====================================================================
   Hero — condensed, animated. Two-col >860, stacks below.
===================================================================== */
.mm-program-hero {
    position: relative;
    padding-block: clamp(28px, 3.5vw, 56px);
    padding-inline: clamp(20px, 4vw, 64px);
    background: linear-gradient(180deg, var(--mm-teal-50) 0%, var(--mm-paper) 100%);
    overflow: hidden;
    isolation: isolate;
}

/* Drifting decorative note glyphs — pure CSS, no DOM. The two pseudo-
   elements ride at opposite corners and bob on independent timings. */
.mm-program-hero::before,
.mm-program-hero::after {
    content: "";
    position: absolute;
    width: 44px;
    height: 44px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.mm-program-hero::before {
    top: 12%;
    left: 3.5%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2342AE9A'><path d='M9 17.5a2.5 2.5 0 11-1.7-2.37V5l11-2.5v10.37a2.5 2.5 0 11-1.7-2.37V5.6L9 7.6v9.9z'/></svg>");
    animation: mm-drift-a 7.5s ease-in-out infinite;
}

.mm-program-hero::after {
    top: 8%;
    right: 6%;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237A3A96'><path d='M9 17.5a2.5 2.5 0 11-1.7-2.37V5l11-2.5v10.37a2.5 2.5 0 11-1.7-2.37V5.6L9 7.6v9.9z'/></svg>");
    opacity: 0.4;
    animation: mm-drift-b 9s ease-in-out infinite;
    animation-delay: -2s;
}

.mm-program-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(24px, 3vw, 56px);
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}

@media (max-width: 860px) {
    .mm-program-hero__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.mm-program-hero__content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Stagger entrance for hero content children. */
.mm-program-hero__content > * {
    opacity: 0;
    transform: translateY(8px);
    animation: mm-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.mm-program-hero__content > *:nth-child(1) { animation-delay: 60ms; }
.mm-program-hero__content > *:nth-child(2) { animation-delay: 140ms; }
.mm-program-hero__content > *:nth-child(3) { animation-delay: 220ms; }
.mm-program-hero__content > *:nth-child(4) { animation-delay: 300ms; }

/* Eyebrow strip */
.mm-program-hero__eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 5px 13px;
    background: var(--mm-white);
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    align-self: flex-start;
    font-size: var(--mm-fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--mm-ls-caps);
    color: var(--mm-fg-2);
    font-family: var(--mm-font-display);
    font-weight: var(--mm-w-bold);
    box-shadow: var(--mm-shadow-xs);
}

.mm-program-hero__eyebrow > .wp-block-group__inner-container,
.mm-program-hero__eyebrow > * {
    margin: 0;
}

.mm-program-hero__eyebrow .mm-program-hero__eyebrow-label,
.mm-program-hero__eyebrow .mm-program-hero__eyebrow-value {
    margin: 0;
    font-size: inherit;
    line-height: 1;
}

.mm-program-hero__eyebrow-label {
    color: var(--mm-fg-3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mm-program-hero__eyebrow-value {
    color: var(--mm-teal-700);
    font-weight: var(--mm-w-black);
}

.mm-program-hero__eyebrow-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mm-teal);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--mm-teal) 70%, transparent);
    animation: mm-pulse 2.4s ease-in-out infinite;
}

/* Headline — slightly more compact than the global h1. */
.mm-program-hero__headline {
    margin: 0;
    font-family: var(--mm-font-display);
    font-size: clamp(34px, 3vw + 18px, 60px);
    line-height: 1.05;
    letter-spacing: var(--mm-ls-display);
    color: var(--mm-fg);
    font-weight: var(--mm-w-black);
    text-wrap: balance;
}

/* Lede */
.mm-program-hero__lede {
    margin: 0;
    max-width: 52ch;
    font-size: var(--mm-fs-lede);
    line-height: var(--mm-lh-normal);
    color: var(--mm-fg-2);
}

/* Actions row: CTA + inline licensed-brand pill. */
.mm-program-hero__actions {
    margin-top: 4px;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
}

.mm-program-hero__buttons {
    margin: 0;
}

.mm-program-hero__cta-primary .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    background: var(--mm-brand);
    color: var(--mm-fg-on-teal);
    border-radius: 999px;
    font-family: var(--mm-font-display);
    font-weight: var(--mm-w-bold);
    font-size: 16px;
    box-shadow: 0 8px 22px -10px rgba(31, 122, 112, 0.55);
    transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.mm-program-hero__cta-arrow {
    display: inline-block;
    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mm-program-hero__cta-primary .wp-block-button__link:hover,
.mm-program-hero__cta-primary .wp-block-button__link:focus-visible {
    background: var(--mm-brand-hover);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(31, 122, 112, 0.6);
}

.mm-program-hero__cta-primary .wp-block-button__link:hover .mm-program-hero__cta-arrow,
.mm-program-hero__cta-primary .wp-block-button__link:focus-visible .mm-program-hero__cta-arrow {
    transform: translateX(4px);
}

/* Licensed brand pill — sits inline with the CTA, no longer its own row. */
.mm-program-hero__brand-mark {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 7px 13px 7px 11px;
    background: var(--mm-grape-100);
    border: 1px solid color-mix(in oklab, var(--mm-grape) 22%, transparent);
    border-radius: 999px;
    margin: 0;
}

.mm-program-hero__brand-mark > * {
    margin: 0;
    line-height: 1;
}

.mm-program-hero__brand-eyebrow {
    font-family: var(--mm-font-display);
    font-size: 11px;
    font-weight: var(--mm-w-bold);
    color: var(--mm-grape-700);
    text-transform: uppercase;
    letter-spacing: var(--mm-ls-caps);
    opacity: 0.75;
}

.mm-program-hero__brand-name {
    font-family: var(--mm-font-display);
    font-size: 14px;
    font-weight: var(--mm-w-black);
    color: var(--mm-grape-700);
    letter-spacing: -0.005em;
}

/* Collapse the brand pill when no licensed_brand_name was bound. */
.mm-program-hero__brand-mark:has(.mm-program-hero__brand-name:empty) {
    display: none !important;
}

/* Visual / featured image — square-ish, decorative blob behind. */
.mm-program-hero__visual {
    position: relative;
    max-width: 460px;
    margin-inline: auto;
    width: 100%;
}

/* Animated grape "blob" behind the photo. */
.mm-program-hero__visual::before {
    content: "";
    position: absolute;
    inset: -14px -18px auto auto;
    width: 78%;
    height: 78%;
    background: radial-gradient(circle at 30% 30%, var(--mm-apricot-100), color-mix(in oklab, var(--mm-grape-100) 80%, transparent));
    border-radius: 56% 44% 62% 38% / 50% 56% 44% 50%;
    z-index: 0;
    transform-origin: center;
    animation: mm-blob 11s ease-in-out infinite;
    filter: blur(0.5px);
}

.mm-program-hero__photo {
    position: relative;
    z-index: 1;
    background: var(--mm-teal-100);
    animation: mm-float-photo 8s ease-in-out infinite;
    will-change: transform;
}

.mm-program-hero__photo,
.mm-program-hero__photo img {
    border-radius: var(--mm-r-lg, 20px);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    box-shadow: 0 28px 56px -28px rgba(15, 63, 58, 0.4);
}

/* When no featured image is set, the post-featured-image block renders
   nothing — collapse the visual column so the hero doesn't have a
   blank gap. */
.mm-program-hero__visual:empty,
.mm-program-hero__visual:not(:has(img)) {
    display: none;
}

@media (max-width: 860px) {
    .mm-program-hero__visual:not(:has(img)) {
        display: block;
    }
    .mm-program-hero__visual:not(:has(img))::after {
        content: "";
        display: block;
        aspect-ratio: 1 / 1;
        background: var(--mm-teal-100);
        border-radius: var(--mm-r-lg, 20px);
    }
}

/* =====================================================================
   Hero animations
===================================================================== */
@keyframes mm-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mm-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in oklab, var(--mm-teal) 60%, transparent);
    }
    50% {
        box-shadow: 0 0 0 6px color-mix(in oklab, var(--mm-teal) 0%, transparent);
    }
}

@keyframes mm-drift-a {
    0%, 100% { transform: translate(0, 0) rotate(-6deg); }
    50%      { transform: translate(6px, -10px) rotate(4deg); }
}

@keyframes mm-drift-b {
    0%, 100% { transform: translate(0, 0) rotate(8deg); }
    50%      { transform: translate(-8px, 12px) rotate(-6deg); }
}

@keyframes mm-blob {
    0%, 100% { transform: rotate(-4deg) scale(1); border-radius: 56% 44% 62% 38% / 50% 56% 44% 50%; }
    50%      { transform: rotate(6deg)  scale(1.04); border-radius: 44% 56% 38% 62% / 56% 50% 50% 44%; }
}

@keyframes mm-float-photo {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .mm-program-hero::before,
    .mm-program-hero::after,
    .mm-program-hero__visual::before,
    .mm-program-hero__photo,
    .mm-program-hero__eyebrow-dot,
    .mm-program-hero__content > * {
        animation: none !important;
    }
    .mm-program-hero__content > * {
        opacity: 1;
        transform: none;
    }
}

/* =====================================================================
   At-a-glance pill bar
===================================================================== */
.mm-program-glance {
    padding-block: clamp(20px, 3vw, 36px);
    padding-inline: clamp(20px, 4vw, 64px);
    background: var(--mm-paper);
    border-bottom: 1px solid var(--mm-line);
}

.mm-program-glance__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .mm-program-glance__inner {
        grid-template-columns: 1fr;
    }
}

.mm-program-glance__pill {
    padding: 16px 20px;
    background: var(--mm-white);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-r-md, 14px);
    text-align: center;
    transition: border-color 150ms ease, transform 150ms ease;
}

.mm-program-glance__pill:hover {
    border-color: var(--mm-teal-300);
    transform: translateY(-1px);
}

.mm-program-glance__pill > * {
    margin: 0;
}

.mm-program-glance__pill-label {
    font-family: var(--mm-font-display);
    font-size: var(--mm-fs-eyebrow);
    font-weight: var(--mm-w-bold);
    text-transform: uppercase;
    letter-spacing: var(--mm-ls-caps);
    color: var(--mm-fg-3);
}

.mm-program-glance__pill-value {
    margin-top: 4px;
    font-family: var(--mm-font-display);
    font-size: clamp(20px, 1.4vw + 14px, 26px);
    font-weight: var(--mm-w-black);
    color: var(--mm-teal-800);
    letter-spacing: var(--mm-ls-tight);
}

/* =====================================================================
   Body wrapper for post-content
===================================================================== */
.mm-program__body {
    padding-block: clamp(48px, 6vw, 96px);
    padding-inline: clamp(20px, 4vw, 64px);
}

/* =====================================================================
   Program — Featured Testimonial (MM-008 finish-out)
   Single mm_testimonial card filtered by program_ids meta. Hides when
   no program-specific quote is seeded.
===================================================================== */

.mm-program-testimonial {
    background-color: var(--mm-paper);
    padding-block: clamp(48px, 6vw, 88px);
    padding-inline: clamp(20px, 4vw, 64px);
    position: relative;
}

.mm-program-testimonial__inner {
    max-width: 820px;
    margin-inline: auto;
    position: relative;
}

.mm-program-testimonial__mark {
    position: absolute;
    top: -18px;
    left: -8px;
    font-family: var(--mm-font-display);
    font-weight: 900;
    font-size: 96px;
    line-height: 1;
    color: var(--mm-grape-300);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.mm-program-testimonial__card {
    background-color: var(--mm-white);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-r-lg);
    padding: clamp(28px, 4vw, 48px);
    box-shadow: var(--mm-shadow-sm);
    position: relative;
    z-index: 1;
    margin: 0;
}

.mm-program-testimonial__quote {
    margin: 0;
    font-family: var(--mm-font-body);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.55;
    color: var(--mm-ink);
    font-style: italic;
}

.mm-program-testimonial__quote p {
    margin: 0;
}

.mm-program-testimonial__cite {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--mm-line);
}

.mm-program-testimonial__cite-name {
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--mm-ink-2);
}

/* =====================================================================
   Program — Why Group Classes (MM-008 finish-out)
   Repeating Group Benefits block on every program page. Cream paper-2
   background, three pillars in a single row on desktop, stacked mobile.
===================================================================== */

.mm-program-why {
    background-color: var(--mm-paper-2);
    padding-block: clamp(56px, 7vw, 96px);
    padding-inline: clamp(20px, 4vw, 64px);
}

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

.mm-program-why__header {
    text-align: center;
    margin-bottom: clamp(32px, 4vw, 56px);
    max-width: 720px;
    margin-inline: auto;
}

.mm-program-why__eyebrow {
    margin: 0 0 12px 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;
}

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

.mm-program-why__heading {
    margin: 0;
    font-family: var(--mm-font-display);
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--mm-ink);
    text-wrap: balance;
}

.mm-program-why__pillars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 2vw, 24px);
}

.mm-program-why__pillar {
    background-color: var(--mm-white);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-r-lg);
    padding: clamp(24px, 3vw, 32px);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--mm-shadow-xs);
}

.mm-program-why__pillar-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--mm-r-md);
    background-color: var(--mm-teal-50);
    color: var(--mm-teal-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mm-program-why__pillar:nth-child(2) .mm-program-why__pillar-icon {
    background-color: var(--mm-grape-100);
    color: var(--mm-grape-700);
}

.mm-program-why__pillar:nth-child(3) .mm-program-why__pillar-icon {
    background-color: var(--mm-apricot-100);
    color: var(--mm-apricot-800);
}

.mm-program-why__pillar-title {
    margin: 0;
    font-family: var(--mm-font-display);
    font-size: clamp(17px, 1.6vw, 20px);
    font-weight: 700;
    color: var(--mm-ink);
    letter-spacing: -0.015em;
}

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

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


/* ===== RECOVERED .mm-prog-hero-snap (session 13ef33f1, May 11) ===== */

@media (max-width: 781px) {
    .mm-prog-hero-snap__inner {
        gap: 28px;
    }
    .mm-prog-hero-snap__visual {
        order: -1;
    }
}

/* ---------------------------------------------------------------
 * Program Hero (Snap) — block-native, content-locked pattern.
 * Mirrors .mm-prog-hero visual but standalone so the PHP-rendered
 * single-program hero stays untouched. Targets native core block
 * markup (core/columns, core/list, core/buttons) so editor copy
 * edits flow straight through.
 * --------------------------------------------------------------- */

.mm-prog-hero-snap {
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px);
    background: linear-gradient(135deg, var(--mm-paper, #fafafa) 0%, var(--mm-grape-100, #f1eaf6) 100%);
}

.mm-prog-hero-snap__inner {
    max-width: 1280px;
    margin: 0 auto;
    gap: clamp(24px, 4vw, 56px);
}

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

.mm-prog-hero-snap__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--mm-teal);
}

.mm-prog-hero-snap__headline {
    margin: 0 0 16px;
    font-family: var(--mm-font-display);
    font-size: clamp(32px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--mm-ink);
}

.mm-prog-hero-snap__lede {
    margin: 0 0 24px;
    font-family: var(--mm-font-body);
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.55;
    color: var(--mm-ink-2);
    max-width: 600px;
}

.mm-prog-hero-snap__points {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.mm-prog-hero-snap__points > li {
    position: relative;
    padding-left: 32px;
    font-family: var(--mm-font-body);
    font-size: 15px;
    color: var(--mm-ink-2);
    line-height: 1.5;
}

.mm-prog-hero-snap__points > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background-color: var(--mm-teal-100);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2342AE9A' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

.mm-prog-hero-snap__ctas {
    gap: 12px;
}

.mm-prog-hero-snap__cta .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    transition: transform var(--mm-dur) var(--mm-ease),
                background-color var(--mm-dur) var(--mm-ease),
                box-shadow var(--mm-dur) var(--mm-ease),
                border-color var(--mm-dur) var(--mm-ease);
}

.mm-prog-hero-snap__cta.is-style-fill .wp-block-button__link {
    background-color: var(--mm-teal);
    color: #fff;
    box-shadow: 0 10px 28px -8px rgba(14, 63, 58, 0.4);
}

.mm-prog-hero-snap__cta.is-style-fill .wp-block-button__link:hover,
.mm-prog-hero-snap__cta.is-style-fill .wp-block-button__link:focus-visible {
    background-color: var(--mm-teal-700);
    transform: translateY(-2px);
}

.mm-prog-hero-snap__cta.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--mm-teal-700);
    border: 1.5px solid var(--mm-teal-300);
}

.mm-prog-hero-snap__cta.is-style-outline .wp-block-button__link:hover,
.mm-prog-hero-snap__cta.is-style-outline .wp-block-button__link:focus-visible {
    background-color: var(--mm-teal-50);
    border-color: var(--mm-teal);
    color: var(--mm-teal-900);
}

.mm-prog-hero-snap__visual .wp-block-image {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 48px -16px rgba(14, 63, 58, 0.28);
}

.mm-prog-hero-snap__visual .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
}

.mm-prog-hero-snap {
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px);
    background: linear-gradient(135deg, var(--mm-paper, #fafafa) 0%, var(--mm-grape-100, #f1eaf6) 100%);
}

.mm-prog-hero-snap > .wp-block-columns {
    max-width: 1280px;
    margin: 0 auto;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

@media (max-width: 781px) {
    .mm-prog-hero-snap > .wp-block-columns {
        gap: 28px;
    }
    .mm-prog-hero-snap .wp-block-column:last-child {
        order: -1;
    }
}

.mm-prog-hero-snap .wp-block-buttons {
    gap: 12px;
}

.mm-prog-hero-snap .wp-block-button .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    background-color: var(--mm-teal);
    color: #fff;
    box-shadow: 0 10px 28px -8px rgba(14, 63, 58, 0.4);
    transition: transform var(--mm-dur) var(--mm-ease),
                background-color var(--mm-dur) var(--mm-ease),
                box-shadow var(--mm-dur) var(--mm-ease),
                border-color var(--mm-dur) var(--mm-ease);
}

.mm-prog-hero-snap .wp-block-button .wp-block-button__link:hover,
.mm-prog-hero-snap .wp-block-button .wp-block-button__link:focus-visible {
    background-color: var(--mm-teal-700);
    transform: translateY(-2px);
}

.mm-prog-hero-snap .wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--mm-teal-700);
    border: 1.5px solid var(--mm-teal-300);
    box-shadow: none;
}

.mm-prog-hero-snap .wp-block-button.is-style-outline .wp-block-button__link:hover,
.mm-prog-hero-snap .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
    background-color: var(--mm-teal-50);
    border-color: var(--mm-teal);
    color: var(--mm-teal-900);
    transform: translateY(-2px);
}

.mm-prog-hero-snap .wp-block-column:last-child .wp-block-image {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 48px -16px rgba(14, 63, 58, 0.28);
}

.mm-prog-hero-snap .wp-block-column:last-child .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
}


/* ===== RECOVERED prototype rules (May 12-21) ===== */

.mm-prog-exp__cols {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 4vw, 64px);
}

.mm-prog-exp__col {
    background-color: #fff;
    border-radius: 24px;
    border: 1px solid var(--mm-line);
    overflow: hidden;
    box-shadow: 0 10px 24px -16px rgba(14, 63, 58, 0.12);
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* Right card alternates direction: image right, content left. */
.mm-prog-exp__col--right {
    flex-direction: row-reverse;
}

.mm-prog-exp__img-wrap {
    flex: 0 0 50%;
    overflow: hidden;
    align-self: stretch;
    /* Position relative so the image can fill it absolutely — keeps
       the image from contributing its natural (often portrait) height
       to the flex item's intrinsic size. Card height is then driven
       by the body content (bullets), and the image crops to fit. */
    position: relative;
    min-height: 100%;
}

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

.mm-prog-exp__body {
    flex: 1;
    padding: clamp(28px, 3.5vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 880px) {
    .mm-prog-exp__col,
    .mm-prog-exp__col--right {
        flex-direction: column;
    }
    .mm-prog-exp__img-wrap {
        flex: none;
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

.mm-prog-exp__col {
    background-color: #fff;
    border-radius: 24px;
    border: 1px solid var(--mm-line);
    overflow: hidden;
    box-shadow: 0 10px 24px -16px rgba(14, 63, 58, 0.12);
    display: flex;
    flex-direction: row-reverse;  /* default: image RIGHT, content LEFT */
    align-items: stretch;
}

/* Alternating direction — second card flips: image LEFT, content RIGHT. */
.mm-prog-exp__col--right {
    flex-direction: row;
}

@media (prefers-reduced-motion: reduce) {
    .mm-prog-highlight__pill {
        animation: none;
    }
}

.mm-prog-highlight__pill:nth-child(1) { animation-delay: 80ms; }

.mm-prog-highlight__pill:nth-child(2) { animation-delay: 160ms; }

.mm-prog-highlight__pill:nth-child(3) { animation-delay: 240ms; }

.mm-prog-highlight__pill:nth-child(4) { animation-delay: 320ms; }

.mm-prog-highlight__pill:nth-child(5) { animation-delay: 400ms; }

.mm-prog-highlight__pill:nth-child(6) { animation-delay: 480ms; }

.mm-prog-highlight__pill:nth-child(7) { animation-delay: 560ms; }

.mm-prog-highlight__pill:nth-child(8) { animation-delay: 640ms; }

@media (prefers-reduced-motion: reduce) {
    .mm-prog-exp__col[data-mm-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Scroll-reveal: each card starts hidden + offset, transitions to
   final state when mm-reveal.js adds .is-mm-revealed. The right card
   gets a stagger delay so the two cards cascade rather than fire
   simultaneously. */
.mm-prog-exp__col[data-mm-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mm-prog-exp__col--right[data-mm-reveal] {
    transition-delay: 150ms;
}

.mm-prog-exp__col[data-mm-reveal].is-mm-revealed {
    opacity: 1;
    transform: translateY(0);
}

.mm-prog-exp {
    padding: clamp(28px, 3.5vw, 56px) clamp(20px, 4vw, 64px);
    /* Soft brand wash behind the whole section: a teal glow anchored in the
       top-left corner + a grape glow in the top-right, fading to white toward
       the bottom (Ben 6/4). The [data-mm-has-bg] photo variant below sets its
       own background, so this only styles the plain card-on-color sections. */
    background-color: #fff;
    background-image:
        radial-gradient(85% 75% at 0% 0%, rgba(64, 176, 160, 0.30) 0%, rgba(64, 176, 160, 0) 60%),
        radial-gradient(85% 75% at 100% 0%, rgba(122, 58, 150, 0.24) 0%, rgba(122, 58, 150, 0) 60%);
}

.mm-prog-trial-cta {
    padding: clamp(24px, 3vw, 48px) clamp(20px, 4vw, 64px);
    background-color: var(--mm-paper);
}

/* Optional textured backdrop. When the pattern sets data-mm-has-bg="1"
   the section gains a cover-fitted photo (inlined as background-image)
   with a brand-teal overlay between the photo and the content. The
   colored cards then float over it. Differs from the class-desc band
   (which uses a teal→grape diagonal wash) — here it's an all-teal
   gradient with a vivid teal-500 spotlight in the upper-left, so the
   two photo-backed sections on the same page read as distinct moments.
   Opacities are tuned (0.72–0.86) so the studio photo still reads
   through the overlay instead of looking like flat color. */
.mm-prog-exp[data-mm-has-bg] {
    position: relative;
    background-color: var(--mm-teal-900, #0E3F3A);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
    padding-block: clamp(56px, 6vw, 96px);
}

.mm-prog-exp[data-mm-has-bg]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 80% at 15% 0%, rgba(64, 176, 160, 0.50) 0%, rgba(14, 63, 58, 0) 55%),
        linear-gradient(135deg,
            rgba(14, 63, 58, 0.84) 0%,
            rgba(21, 92, 85, 0.76) 50%,
            rgba(31, 122, 112, 0.88) 100%
        );
}

/* Overlay = the colored wash that tints the photo to brand teal.
   Opacity dialed back so the studio photo reads through clearly. */
.mm-prog-exp[data-mm-has-bg]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 80% at 15% 0%, rgba(64, 176, 160, 0.42) 0%, rgba(14, 63, 58, 0) 55%),
        linear-gradient(135deg,
            rgba(14, 63, 58, 0.72) 0%,
            rgba(21, 92, 85, 0.58) 50%,
            rgba(31, 122, 112, 0.78) 100%
        );
}

/* Vignette = depth layer. Darkens the top and bottom edges so the
   section feels recessed and the photo gains contour, while leaving
   the center brighter so the bg photo shows its detail. Sits ABOVE
   the wash but BELOW the content (z-index: -1 too, but rendered
   second in source order so it stacks on top of ::before). */
.mm-prog-exp[data-mm-has-bg]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(140% 90% at 50% 50%,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 50%,
            rgba(8, 24, 22, 0.55) 100%
        ),
        linear-gradient(180deg,
            rgba(8, 24, 22, 0.45) 0%,
            rgba(8, 24, 22, 0) 18%,
            rgba(8, 24, 22, 0) 82%,
            rgba(8, 24, 22, 0.55) 100%
        );
}

/* Section header — sits above the two cards on the dark teal band.
   Centered, white type with butter eyebrow + dot, mirrors the
   class-descriptions header so the two photo-backed bands feel like
   one family. */
.mm-prog-exp[data-mm-has-bg] .mm-prog-exp__header {
    text-align: center;
    margin: 0 auto clamp(36px, 4.5vw, 64px);
    max-width: 720px;
    display: grid;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.mm-prog-exp__section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin: 0;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--butter, #f4d16a);
}

.mm-prog-exp__section-eyebrow-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--wp--preset--color--butter, #f4d16a);
    box-shadow: 0 0 0 4px rgba(244, 209, 106, 0.18);
}

.mm-prog-exp[data-mm-has-bg] .mm-prog-exp__section-heading {
    margin: 0;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: clamp(28px, 2.4vw + 18px, 44px);
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 24px rgba(8, 24, 22, 0.45);
    text-wrap: balance;
}

.mm-prog-exp[data-mm-has-bg] .mm-prog-exp__section-intro {
    margin: 0 auto;
    max-width: 620px;
    font-family: var(--mm-font-body);
    font-size: clamp(15px, 0.3vw + 14px, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

/* On programs without the bg backdrop, the header still renders but
   uses ink-on-paper styling. Defaults pull from the inheriting type
   scale; we just need centered layout and a butter dot. */
.mm-prog-exp:not([data-mm-has-bg]) .mm-prog-exp__header {
    text-align: center;
    margin: 0 auto clamp(28px, 3.5vw, 48px);
    max-width: 720px;
    display: grid;
    gap: 12px;
}

/* Overlay = the colored wash that tints the photo to brand teal.
   Opacity tuned so the studio photo reads through clearly while the
   wash skews to lighter teal tones (teal-500 / teal-700) rather than
   the dark teal-900 that reads as green. */
.mm-prog-exp[data-mm-has-bg]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 80% at 15% 0%, rgba(64, 176, 160, 0.55) 0%, rgba(31, 122, 112, 0) 55%),
        linear-gradient(135deg,
            rgba(31, 122, 112, 0.62) 0%,
            rgba(64, 176, 160, 0.48) 50%,
            rgba(21, 92, 85, 0.68) 100%
        );
}

/* Overlay = vertical brand-teal wash. Fully transparent at the top so
   the studio photo shows in full clarity, fading to solid teal-900 at
   the bottom so the cards / CTA buttons sit on stable color and
   readability is preserved as the section transitions into the next. */
.mm-prog-exp[data-mm-has-bg]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(14, 63, 58, 0) 0%,
        rgba(21, 92, 85, 0.55) 50%,
        rgba(14, 63, 58, 0.98) 100%
    );
}

/* Overlay = vertical brand-teal wash. Near-solid teal-900 at the top
   so the section header (white type) sits on stable color, fading to
   fully transparent at the bottom so the studio photo shows in full
   clarity around / below the cards as the section breathes out. */
.mm-prog-exp[data-mm-has-bg]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(14, 63, 58, 0.98) 0%,
        rgba(21, 92, 85, 0.55) 50%,
        rgba(14, 63, 58, 0) 100%
    );
}

/* Optional textured backdrop. When the pattern sets data-mm-has-bg="1"
   the section gains a cover-fitted photo (inlined as background-image)
   with a dark overlay sitting between the photo and the content. The
   colored cards then float over it. Different from the class-desc band
   (which uses a diagonal teal→grape wash) — here it's a vertical deep-
   ink overlay with a teal "spotlight" in the upper-left, so the two
   photo-backed sections on the same page read as distinct moments. */
.mm-prog-exp[data-mm-has-bg] {
    position: relative;
    background-color: var(--mm-teal-900, #082724);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
    padding-block: clamp(56px, 6vw, 96px);
}

.mm-prog-exp[data-mm-has-bg]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 80% at 18% 0%, rgba(20, 142, 134, 0.55) 0%, rgba(8, 39, 36, 0) 55%),
        linear-gradient(180deg, rgba(8, 39, 36, 0.94) 0%, rgba(15, 23, 28, 0.86) 50%, rgba(8, 39, 36, 0.95) 100%);
}

.mm-prog-exp__inner {
    max-width: 1280px;
    margin-inline: auto;
    position: relative;  /* keep content above the ::before overlay */
}

@media (prefers-reduced-motion: reduce) {
    .mm-prog-exp__btn,
    .mm-prog-exp__btn-arrow {
        transition: none;
    }
    .mm-prog-exp__btn:hover,
    .mm-prog-exp__btn:focus-visible {
        transform: none;
    }
    .mm-prog-exp__btn:hover .mm-prog-exp__btn-arrow {
        transform: none;
    }
}

@media (max-width: 480px) {
    .mm-prog-exp__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---- Section 4 trailing CTA actions (inside the dark band) ----
   The "Class Descriptions" + "Try a Class" pair used to live in a
   separate program-buttons pattern below this section. Now inlined at
   the bottom of program-prototype-experience so they share the dark
   backdrop. Treatment is tuned for "pop" against the dark overlay:
   butter-yellow primary with a warm glow, white ghost secondary with a
   fill-on-hover, both bigger than the old paper-bg buttons. */

.mm-prog-exp__actions {
    margin-top: clamp(32px, 4vw, 56px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.6vw, 22px);
}

.mm-prog-exp__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 999px;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.005em;
    text-decoration: none;
    line-height: 1;
    transition:
        transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
        background-color 240ms ease-out,
        color 240ms ease-out,
        border-color 240ms ease-out,
        box-shadow 240ms ease-out;
}

.mm-prog-exp__btn-arrow {
    display: inline-block;
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mm-prog-exp__btn:hover .mm-prog-exp__btn-arrow,
.mm-prog-exp__btn:focus-visible .mm-prog-exp__btn-arrow {
    transform: translateX(3px);
}

/* Primary — butter pop on dark. Layered shadow does the glow: a soft
   warm halo + a tighter contact shadow. */
.mm-prog-exp__btn--primary {
    background-color: var(--mm-butter, #F3CE5C);
    color: var(--mm-teal-900, #082724);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 12px 32px -10px rgba(243, 206, 92, 0.65),
        0 4px 10px -2px rgba(0, 0, 0, 0.25);
}

.mm-prog-exp__btn--primary:hover,
.mm-prog-exp__btn--primary:focus-visible {
    background-color: #FFE091;
    color: var(--mm-teal-900, #082724);
    transform: translateY(-3px);
    text-decoration: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
        0 18px 38px -8px rgba(243, 206, 92, 0.75),
        0 6px 14px -2px rgba(0, 0, 0, 0.3);
}

/* Secondary — ghost outline that's clearly readable on the dark band.
   Hover fills it solid white. Down-arrow nudges down on hover instead
   of right to telegraph that it scrolls to a section below. */
.mm-prog-exp__btn--ghost {
    background-color: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.4);
}

.mm-prog-exp__btn--ghost:hover,
.mm-prog-exp__btn--ghost:focus-visible {
    background-color: #fff;
    color: var(--mm-teal-900, #082724);
    border-color: #fff;
    transform: translateY(-3px);
    text-decoration: none;
    box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.4);
}

.mm-prog-exp__btn--ghost:hover .mm-prog-exp__btn-arrow,
.mm-prog-exp__btn--ghost:focus-visible .mm-prog-exp__btn-arrow {
    transform: translateY(3px);
}

.mm-prog-exp[data-mm-has-bg] {
    position: relative;
    background-color: var(--mm-teal-500, #40B0A0);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
    padding-block: clamp(56px, 6vw, 96px);
}

/* Overlay = vertical brand-teal wash. Dark teal-900 at the top so the
   section header (white type) sits on stable color, lifting to the
   brighter brand teal-500 across the bottom 60% where the cards float
   — keeps the band reading as vibrant teal instead of muddy green. */
.mm-prog-exp[data-mm-has-bg]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(14, 63, 58, 0.65) 0%,
        rgba(64, 176, 160, 0.92) 45%,
        rgba(64, 176, 160, 0.92) 100%
    );
}

/* Highlight pills — equal height across the strip with the small uppercase
   label pinned at the top and the value vertically centered in the rest of
   the card. Min-height keeps single-line and multi-line pills the same
   physical size; the value flexbox handles centering for either case. */
.mm-prog-highlight__pill {
    background-color: #fff;
    border: 1px solid var(--mm-teal-200);
    border-radius: 16px;
    padding: 18px 20px;
    text-align: center;
    box-shadow: 0 6px 18px -10px rgba(14, 63, 58, 0.15);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 104px;
}

.mm-prog-highlight__label {
    display: block;
    flex: 0 0 auto;
    font-family: var(--mm-font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mm-teal-700);
    line-height: 1.2;
    margin: 0;
}

.mm-prog-highlight__value {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    font-family: var(--mm-font-display);
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 800;
    color: var(--mm-ink);
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-wrap: balance;
}

/* Extras pills share the same dimensions as the standard trio — only the
   background changes so they read as secondary info without competing
   visually. Value font-size + label sizing inherit from the base pill. */
.mm-prog-highlight__pill--extra {
    background-color: var(--mm-teal-50);
    border-color: var(--mm-teal-200);
}

.mm-prog-highlight__pill--extra .mm-prog-highlight__label {
    color: var(--mm-teal-800);
}


/* ===== BLANKET RECOVERED .mm-prog-* rules (all sessions) ===== */

@media (max-width: 781px) {
    .mm-prog-hero--branded .wp-block-columns {
        gap: 20px;
    }
    .mm-prog-hero__brand-col .wp-block-image {
        max-width: 160px;
    }
}

/* ---------------------------------------------------------------
 * Program Hero — Section 1 of the locked program-page architecture.
 * Two pattern variants share these styles:
 *   - program-hero-snap            → full-width 2x2 carousel grid
 *   - program-hero-snap-branded    → carousel + brand logo right
 * Carousel is core/gallery with 4 locked image slots (swappable, not
 * removable). v1 renders as a 2x2 grid; v2 may upgrade to a true
 * rotating slideshow once architecture is settled.
 * --------------------------------------------------------------- */

.mm-prog-hero {
    width: 100%;
}

.mm-prog-hero .wp-block-gallery.mm-prog-hero__carousel {
    margin: 0;
    gap: clamp(8px, 1vw, 16px);
}

.mm-prog-hero .wp-block-gallery.mm-prog-hero__carousel .wp-block-image {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--mm-paper, #fafafa);
}

.mm-prog-hero .wp-block-gallery.mm-prog-hero__carousel .wp-block-image img,
.mm-prog-hero .wp-block-gallery.mm-prog-hero__carousel .wp-block-image figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

/* Branded variant: carousel left, brand logo right column. */
.mm-prog-hero--branded .wp-block-columns {
    gap: clamp(24px, 3vw, 56px);
    align-items: center;
}

.mm-prog-hero__brand-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-prog-hero__brand-col .wp-block-image {
    margin: 0;
    max-width: 240px;
    width: 100%;
}

.mm-prog-hero__brand-col .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 240px;
    margin: 0 auto;
}

@media (max-width: 880px) {
    .mm-prog-video__inner { grid-template-columns: 1fr; }
}

/* ---- Video poster / "coming soon" placeholder ---- */
.mm-prog-video__poster {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--mm-ink, #0f172a);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mm-prog-video__poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 63, 58, 0.05) 40%, rgba(14, 63, 58, 0.55) 100%);
}

.mm-prog-video__poster-badge {
    position: relative;
    z-index: 1;
    margin-bottom: clamp(16px, 3vw, 32px);
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--mm-ink, #0f172a);
    font-family: var(--mm-font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 8px 24px -8px rgba(14, 63, 58, 0.4);
}

/* ---- Section 5: CTA buttons (between experience + video) ---- */

.mm-prog-buttons {
    padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 64px);
    background-color: var(--mm-paper);
}

.mm-prog-buttons__inner {
    max-width: 880px;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.5vw, 20px);
}

.mm-prog-buttons__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    transition: transform var(--mm-dur, 200ms) var(--mm-ease, ease),
                background-color var(--mm-dur, 200ms) var(--mm-ease, ease),
                border-color var(--mm-dur, 200ms) var(--mm-ease, ease),
                box-shadow var(--mm-dur, 200ms) var(--mm-ease, ease);
}

.mm-prog-buttons__btn--primary {
    background-color: var(--mm-teal);
    color: #fff;
    box-shadow: 0 10px 28px -8px rgba(14, 63, 58, 0.4);
}

.mm-prog-buttons__btn--primary:hover,
.mm-prog-buttons__btn--primary:focus-visible {
    background-color: var(--mm-teal-700);
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}

.mm-prog-buttons__btn--secondary {
    background-color: transparent;
    color: var(--mm-teal-700);
    border: 1.5px solid var(--mm-teal-300);
}

.mm-prog-buttons__btn--secondary:hover,
.mm-prog-buttons__btn--secondary:focus-visible {
    background-color: var(--mm-teal-50);
    border-color: var(--mm-teal);
    color: var(--mm-teal-900);
    transform: translateY(-2px);
    text-decoration: none;
}

.mm-prog-hero__inner {
    max-width: 1280px;
    margin-inline: auto;
    display: grid;
    /* Image LEFT, content RIGHT. Content column gets the wider track so
       headline + lede + selling points + CTAs have room to breathe. */
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    position: relative;
    z-index: 1;
}

/* The DOM still emits content first, visual second (existing PHP order).
   `order: -1` on the visual moves it to the first grid slot so it renders
   on the LEFT. Mobile breakpoint below stacks to one column with image-
   on-top, content-below (which is what `order: -1` gives us for free). */
.mm-prog-hero__visual {
    order: -1;
}

.mm-prog-hero__visual {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: 0 24px 48px -16px rgba(14, 63, 58, 0.28);
    order: -1; /* Moves visual to the LEFT column (content stays right). */
}

@media (prefers-reduced-motion: reduce) {
    .mm-prog-hero__carousel-slide {
        animation: none;
        opacity: 0;
    }
    .mm-prog-hero__carousel-slide:first-child {
        opacity: 1;
    }
}

.mm-prog-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Hero rotating carousel (JS-driven crossfade) ----
   When hero_gallery_ids has 2+ images, the prototype hero (patterns/
   program-prototype-hero.php) renders a stack of absolutely-positioned
   <img> slides. assets/js/prog-hero-carousel.js advances .is-active
   across them on a 5s interval and the opacity transition below does
   the crossfade. Single-image / 1-slide galleries skip this and render
   .mm-prog-hero__img instead. This is the SOLE carousel implementation —
   earlier CSS-only keyframe experiments (mm-hero-carousel / -pageturn /
   -cascade) were removed: their keyframes were never defined, so they
   rendered the hero static. Don't reintroduce a keyframe driver without
   also defining the @keyframes. */
.mm-prog-hero__carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.mm-prog-hero__carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.mm-prog-hero__carousel-slide.is-active {
    opacity: 1;
}

/* Dot pager — built by prog-hero-carousel.js (one button per slide) and
   appended inside the carousel. Sits centered over the bottom of the
   image; a soft scrim-via-shadow keeps the dots legible on light or busy
   photos. The active dot widens into a pill so the current position reads
   at a glance even when slide count is high. */
.mm-prog-hero__dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(14, 63, 58, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

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

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

.mm-prog-hero__dot.is-active {
    width: 22px;
    background-color: #fff;
}

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

/* Reduced motion: the script pins slide 1 and never auto-rotates (dots
   remain for manual nav); drop the crossfade transition so there's no
   residual fade on load, and the active-dot pill snaps instead of slides. */
@media (prefers-reduced-motion: reduce) {
    .mm-prog-hero__carousel-slide {
        transition: none;
    }
    .mm-prog-hero__dot {
        transition: background-color 200ms ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-prog-hero__visual:hover .mm-prog-hero__note {
        animation: none;
        opacity: 0;
    }
    .mm-prog-hero__squiggle path {
        transition: none;
    }
}

/* ---- Hero hover effect #4: squiggle draws under the headline ----
   Triggers on hovering anywhere in the hero. Uses stroke-dashoffset
   trick — the squiggle path has dasharray 1000 and dashoffset 1000
   (fully clipped); offset transitions to 0 (fully drawn) on hover. */
.mm-prog-hero__headline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.mm-prog-hero__headline-text {
    display: inline-block;
}

.mm-prog-hero__squiggle {
    display: block;
    width: min(100%, 320px);
    height: 12px;
    color: var(--mm-teal);
    overflow: visible;
}

.mm-prog-hero__squiggle path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 700ms cubic-bezier(0.6, 0.05, 0.3, 1);
}

.mm-prog-hero:hover .mm-prog-hero__squiggle path,
.mm-prog-hero:focus-within .mm-prog-hero__squiggle path {
    stroke-dashoffset: 0;
}

/* ---- Hero hover effect #5: image saturate-pop + soft glow ----
   Image starts slightly desaturated/dimmed. On hover of the visual
   column it pops to full saturation and grows a soft teal/grape
   glow shadow. The radius corner shadow is preserved. */
.mm-prog-hero__visual {
    filter: saturate(0.92) brightness(0.97);
    transition: filter 280ms ease, box-shadow 380ms ease;
}

.mm-prog-hero__visual:hover {
    filter: saturate(1.05) brightness(1.02);
    box-shadow:
        0 24px 60px -16px rgba(122, 58, 150, 0.45),
        0 12px 36px -12px rgba(66, 174, 154, 0.45);
}

/* ---- Hero hover effect #6: floating music notes ----
   Three notes (♪ ♫ ♬) absolutely positioned over the image. Default
   opacity 0; on visual hover, they fade in and drift upward on a
   stagger. Each note has its own size/start position via modifiers. */
.mm-prog-hero__note {
    position: absolute;
    z-index: 2;
    color: var(--mm-teal-700);
    font-family: 'Segoe UI Symbol', 'Apple Symbols', sans-serif;
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 4px 12px rgba(14, 63, 58, 0.35);
    will-change: opacity, transform;
}

.mm-prog-hero__note--1 {
    bottom: 18%;
    left: 14%;
    font-size: clamp(28px, 3vw, 44px);
}

.mm-prog-hero__note--2 {
    bottom: 32%;
    right: 18%;
    font-size: clamp(36px, 3.5vw, 56px);
    color: var(--mm-grape-700);
}

.mm-prog-hero__note--3 {
    bottom: 14%;
    right: 38%;
    font-size: clamp(24px, 2.5vw, 36px);
    color: var(--mm-teal);
}

.mm-prog-hero__visual:hover .mm-prog-hero__note {
    animation: mm-hero-note-float 2.8s ease-in-out infinite;
}

.mm-prog-hero__visual:hover .mm-prog-hero__note--1 { animation-delay: 0s; }

.mm-prog-hero__visual:hover .mm-prog-hero__note--2 { animation-delay: 0.5s; }

.mm-prog-hero__visual:hover .mm-prog-hero__note--3 { animation-delay: 1s; }

.mm-prog-buttons {
    padding: clamp(16px, 2vw, 28px) clamp(20px, 4vw, 64px);
    background-color: var(--mm-paper);
}

.mm-prog-buttons__btn--secondary {
    background-color: #fff;
    color: var(--mm-teal-700);
    border: 1.5px solid var(--mm-teal-300);
    box-shadow: 0 4px 12px -6px rgba(14, 63, 58, 0.18);
}

.mm-prog-buttons__btn--secondary:hover,
.mm-prog-buttons__btn--secondary:focus-visible {
    background-color: var(--mm-teal-50);
    border-color: var(--mm-teal);
    color: var(--mm-teal-900);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(14, 63, 58, 0.28);
    text-decoration: none;
}

.mm-prog-hero__cta-ghost {
    display: inline-flex;
    align-items: center;
    padding: 14px 24px;
    border-radius: 999px;
    background-color: #fff;
    color: var(--mm-teal-700);
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border: 1.5px solid var(--mm-teal-300);
    box-shadow: 0 4px 12px -6px rgba(14, 63, 58, 0.18);
    transition: background-color var(--mm-dur) var(--mm-ease),
                border-color var(--mm-dur) var(--mm-ease),
                box-shadow var(--mm-dur) var(--mm-ease),
                transform var(--mm-dur) var(--mm-ease);
}

.mm-prog-hero {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* Background lives once, in program-polish.css. Removed 2026-06-01. */
    padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 64px);
    color: var(--mm-ink);
    position: relative;
    overflow: hidden;
}

.mm-prog-hero {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* Background lives once, in program-polish.css. Removed 2026-06-01. */
    padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 64px);
    color: var(--mm-ink);
    position: relative;
    overflow: hidden;
}

@media (max-width: 820px) {
    .mm-prog-app-cta__card {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .mm-prog-app-cta__visual {
        order: -1;
        justify-self: center;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .mm-prog-app-cta__visual { display: none; }
    .mm-prog-app-cta__btn { width: 100%; justify-content: center; }
}

/* ---- Kindermusik App CTA (final block on Kindermusik conversion tail) ---- */

.mm-prog-app-cta {
    padding: clamp(24px, 3vw, 48px) clamp(20px, 4vw, 64px) clamp(40px, 5vw, 72px);
    background-color: var(--mm-paper);
}

.mm-prog-app-cta__card {
    max-width: 1100px;
    margin-inline: auto;
    position: relative;
    background:
        radial-gradient(120% 140% at 110% -20%, rgba(243, 206, 92, 0.18) 0%, rgba(243, 206, 92, 0) 55%),
        linear-gradient(180deg, #ffffff 0%, var(--mm-paper-2, #F5F1E8) 100%);
    border-radius: 28px;
    border: 1px solid var(--mm-line, #E6E2D6);
    border-top: 4px solid var(--mm-teal-700);
    padding: clamp(28px, 4vw, 56px);
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    box-shadow: 0 18px 36px -20px rgba(14, 63, 58, 0.25);
    overflow: hidden;
}

.mm-prog-app-cta__eyebrow {
    margin: 0 0 12px;
    font-family: var(--mm-font-display);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mm-teal-700);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mm-prog-app-cta__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--mm-grape);
}

.mm-prog-app-cta__heading {
    margin: 0 0 12px;
    font-family: var(--mm-font-display);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--mm-teal-900, #082724);
}

.mm-prog-app-cta__sub {
    margin: 0 0 20px;
    font-family: var(--mm-font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--mm-ink-2, #3a3a3a);
}

.mm-prog-app-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mm-prog-app-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--mm-font-display);
    font-weight: 700;
    line-height: 1.1;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
    transition: transform var(--mm-dur) var(--mm-ease), box-shadow var(--mm-dur) var(--mm-ease);
}

.mm-prog-app-cta__btn:hover,
.mm-prog-app-cta__btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.38);
    text-decoration: none;
}

.mm-prog-app-cta__btn--primary {
    background-color: var(--mm-teal);
    color: #fff;
}

.mm-prog-app-cta__btn--primary:hover,
.mm-prog-app-cta__btn--primary:focus-visible {
    background-color: var(--mm-teal-700);
    color: #fff;
}

.mm-prog-app-cta__btn--secondary {
    background-color: var(--mm-grape);
    color: #fff;
}

.mm-prog-app-cta__btn--secondary:hover,
.mm-prog-app-cta__btn--secondary:focus-visible {
    background-color: var(--mm-grape-700, #5C2F89);
    color: #fff;
}

.mm-prog-app-cta__btn-glyph {
    flex: none;
}

.mm-prog-app-cta__btn-small {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
}

.mm-prog-app-cta__btn-big {
    display: block;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.005em;
}

.mm-prog-app-cta__visual {
    justify-self: end;
    width: 100%;
    max-width: 260px;
}

.mm-prog-app-cta__visual-svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 18px 24px rgba(14, 63, 58, 0.18));
}

/* ---- App CTA visual variant: the real Kindermusik App video ----
   When the visual slot holds the Wistia video (not the decorative phone
   SVG), give it more room than the 260px SVG cap and a responsive 16:9
   frame. This CTA is Kindermusik-only, so the overrides are safe. The
   media-query overrides below sit AFTER the base __visual breakpoints
   (≤820px cap to 200px / ≤480px hide) so they win at equal specificity —
   the video must stay visible and full-width on phones, not shrink/hide. */
.mm-prog-app-cta__visual--video {
    justify-self: stretch;
    max-width: 460px;
}

.mm-prog-app-cta__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: var(--mm-teal-900, #082724);
    box-shadow: 0 18px 36px -18px rgba(14, 63, 58, 0.32);
}

.mm-prog-app-cta__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 820px) {
    .mm-prog-app-cta__visual--video {
        order: -1;
        justify-self: center;
        max-width: 520px;
    }
}

@media (max-width: 480px) {
    .mm-prog-app-cta__visual--video {
        display: block;
        max-width: 100%;
    }
}

.mm-prog-hero {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* Background lives once, in program-polish.css (body.single-mm_program
       .mm-prog-hero). The teal→white→grape gradient + ::before overlays
       that used to be here were removed 2026-06-01. */
    padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 64px);
    color: var(--mm-ink);
    position: relative;
    overflow: hidden;
}

.mm-prog-hero__visual {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 24px 48px -16px rgba(14, 63, 58, 0.28);
    order: -1; /* Moves visual to the LEFT column (content stays right). */
}

/* ===== Hand-written CSS for prototype patterns whose layout rules were never written ===== */
/* Source: Friday session left these as work-in-progress; recovered structure + content */
/* but layout CSS doesn't exist in any session. Written from pattern markup analysis.    */

/* ---------- Program Hero (single-mm_program prototype) ---------- */
.mm-prog-hero {
    position: relative;
    padding-block: clamp(48px, 8vw, 96px);
    padding-inline: var(--mm-s-8, 32px);
    max-width: 1440px;
    margin-inline: auto;
}
.mm-prog-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
@media (max-width: 860px) {
    .mm-prog-hero__inner { grid-template-columns: 1fr; }
}
.mm-prog-hero__content { min-width: 0; }
.mm-prog-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mm-font-display, 'Outfit', sans-serif);
    font-weight: 700; font-size: 14px;
    color: var(--mm-teal-700, #0d6f66);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin: 0 0 16px;
}
.mm-prog-hero__eyebrow-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--mm-grape, #7a4caa);
}
.mm-prog-hero__headline {
    font-family: var(--mm-font-display, 'Outfit', sans-serif);
    font-weight: 800;
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.05;
    color: var(--mm-ink, #1a1a1a);
    margin: 0 0 20px;
    position: relative;
}
.mm-prog-hero__headline-text { position: relative; display: inline; }
.mm-prog-hero__squiggle {
    display: block;
    width: 200px; height: 12px;
    color: var(--mm-grape, #7a4caa);
    margin-top: 4px;
}
.mm-prog-hero__lede {
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.55;
    color: var(--mm-ink-2, #404040);
    margin: 0 0 24px;
    max-width: 56ch;
}
.mm-prog-hero__points {
    list-style: none; padding: 0; margin: 0 0 32px;
    display: flex; flex-direction: column; gap: 12px;
}
.mm-prog-hero__point {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 16px; line-height: 1.5;
    color: var(--mm-ink, #1a1a1a);
}
.mm-prog-hero__point-check {
    flex: 0 0 22px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--mm-teal-50, #e8f5f3);
    color: var(--mm-teal-700, #0d6f66);
    margin-top: 2px;
}
.mm-prog-hero__actions {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.mm-prog-hero__cta-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 26px; border-radius: 999px;
    font-family: var(--mm-font-display, 'Outfit', sans-serif);
    font-weight: 800; font-size: 16px;
    text-decoration: none;
    background: var(--mm-teal, #16a394); color: #fff;
    box-shadow: 0 10px 28px -8px rgba(14, 63, 58, 0.4);
    transition: transform .2s, background-color .2s, box-shadow .2s;
}
.mm-prog-hero__cta-primary:hover { background: var(--mm-teal-700, #0d6f66); transform: translateY(-2px); }
.mm-prog-hero__cta-arrow { display: inline-block; transition: transform .2s; }
.mm-prog-hero__cta-primary:hover .mm-prog-hero__cta-arrow { transform: translateX(2px); }
.mm-prog-hero__cta-ghost {
    display: inline-flex; align-items: center; padding: 13px 24px;
    border-radius: 999px;
    border: 1.5px solid var(--mm-teal-300, #92d0c5);
    background: #fff; color: var(--mm-teal-900, #064047);
    font-family: var(--mm-font-display, 'Outfit', sans-serif);
    font-weight: 700; font-size: 16px; text-decoration: none;
    transition: background-color .2s, border-color .2s, transform .2s;
}
.mm-prog-hero__cta-ghost:hover { background: var(--mm-teal-50, #e8f5f3); border-color: var(--mm-teal, #16a394); transform: translateY(-2px); }
.mm-prog-hero__visual {
    position: relative;
    aspect-ratio: 5 / 4; /* landscape carousel — all slides equal height, object-fit:cover (Ben 6/4) */
    border-radius: 24px;
    overflow: hidden;
    background: var(--mm-paper-2, #f6efe0);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.18);
}
/* Carousel + slide rules live once, above (search "JS-driven crossfade"). */
.mm-prog-hero__note {
    position: absolute;
    font-size: 36px;
    color: var(--mm-grape, #7a4caa);
    opacity: 0.7;
    pointer-events: none;
    z-index: 3;
}
.mm-prog-hero__note--1 { top: -10px; right: 12px; }
.mm-prog-hero__note--2 { bottom: 24px; left: -14px; color: var(--mm-butter, #f4cf6a); font-size: 44px; }
.mm-prog-hero__note--3 { bottom: -8px; right: 36px; color: var(--mm-teal-300, #92d0c5); font-size: 30px; }

/* ---------- Program Highlight (pills bar under hero) ---------- */
.mm-prog-highlight {
    padding-block: clamp(20px, 3vw, 32px);
    padding-inline: var(--mm-s-8, 32px);
    background: var(--mm-paper, #fbf6ea);
    border-block: 1px solid rgba(0,0,0,0.06);
}
.mm-prog-highlight__inner {
    max-width: 1200px; margin-inline: auto;
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center; align-items: stretch;
}
.mm-prog-highlight__pill {
    flex: 1 1 160px;
    min-width: 160px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 14px 18px;
    text-align: center;
    display: flex; flex-direction: column; justify-content: center;
    box-shadow: 0 4px 12px -6px rgba(0,0,0,0.08);
}
.mm-prog-highlight__pill--extra {
    background: var(--mm-teal-50, #e8f5f3);
    border-color: var(--mm-teal-300, #92d0c5);
}
.mm-prog-highlight__label {
    font-family: var(--mm-font-display, 'Outfit', sans-serif);
    font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--mm-teal-700, #0d6f66);
    margin: 0 0 4px;
}
.mm-prog-highlight__label:empty { display: none; }
.mm-prog-highlight__value {
    font-family: var(--mm-font-display, 'Outfit', sans-serif);
    font-weight: 800; font-size: 18px; line-height: 1.2;
    color: var(--mm-ink, #1a1a1a);
    margin: 0;
}

/* ---------- Program Buttons (CTA row pattern) ---------- */
.mm-prog-buttons {
    padding-block: clamp(20px, 3vw, 40px);
    padding-inline: var(--mm-s-8, 32px);
}
.mm-prog-buttons__inner {
    max-width: 800px; margin-inline: auto;
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.mm-prog-buttons__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 999px;
    font-family: var(--mm-font-display, 'Outfit', sans-serif);
    font-weight: 800; font-size: 16px;
    text-decoration: none;
    transition: transform .2s, background-color .2s;
}
.mm-prog-buttons__btn--primary {
    background: var(--mm-teal, #16a394); color: #fff;
}
.mm-prog-buttons__btn--primary:hover { background: var(--mm-teal-700, #0d6f66); transform: translateY(-2px); }
.mm-prog-buttons__btn--secondary {
    background: #fff; color: var(--mm-teal-900, #064047);
    border: 1.5px solid var(--mm-teal-300, #92d0c5);
}
.mm-prog-buttons__btn--secondary:hover { background: var(--mm-teal-50, #e8f5f3); transform: translateY(-2px); }

/* ---------- Program Levels (class-levels pattern fallback) ---------- */
.mm-prog-levels {
    max-width: 1200px; margin-inline: auto;
    padding: clamp(24px, 4vw, 48px) var(--mm-s-8, 32px);
}
.mm-prog-levels__eyebrow {
    font-family: var(--mm-font-display, 'Outfit', sans-serif);
    font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--mm-teal-700, #0d6f66);
    margin: 0 0 8px;
}
.mm-prog-levels__details { margin-block: 12px; }
.mm-prog-levels__body { line-height: 1.6; }


/* ===== RECOVERED mm-program-* + mm-prog-video rules (sessions) ===== */

/* ---------------------------------------------------------------
 * Section 3 — Program Overview (program-overview.php).
 * Centered intro paragraphs. Server-rendered from `intro_text` meta.
 * --------------------------------------------------------------- */

.mm-program-overview {
    padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 64px);
    background-color: var(--mm-paper, #fafafa);
}

.mm-program-overview__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    font-family: var(--mm-font-body);
    font-size: clamp(17px, 0.6vw + 14px, 21px);
    line-height: 1.65;
    color: var(--mm-ink-2, #2c2c2e);
}

.mm-program-overview__inner p {
    margin: 0 0 1em;
}

.mm-program-overview__inner p:last-child {
    margin-bottom: 0;
}

.mm-program-overview__inner a {
    color: var(--mm-teal-700);
    text-decoration: underline;
}

rows from `class_descriptions` meta.
 * Native <details>/<summary> — no JS required.
 * --------------------------------------------------------------- */

.mm-program-class-desc {
    padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 64px);
    background-color: #fff;
}

.mm-program-class-desc__inner {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.mm-program-class-desc__item {
    background: #fff;
    border: 1px solid var(--mm-line, #e5e5e7);
    border-radius: 14px;
    padding: 18px clamp(16px, 2.5vw, 24px);
    transition: border-color var(--mm-dur, 200ms) var(--mm-ease, ease),
                background-color var(--mm-dur, 200ms) var(--mm-ease, ease),
                box-shadow var(--mm-dur, 200ms) var(--mm-ease, ease);
}

/* Hovering a closed row → light teal wash (matches FAQ hover). The
   open/active state stays grape, so hover and active read differently. */
.mm-program-class-desc__item:not([open]):hover {
    background-color: var(--mm-teal-50, #f4faf8);
    border-color: var(--mm-teal-300, #b6e0d6);
}

/* Active row leans grape to match the star (matches FAQ open state). */
.mm-program-class-desc__item[open] {
    border-color: var(--mm-grape-300, #b892c9);
    background-color: rgba(128, 64, 160, 0.07);
    box-shadow: 0 8px 24px -16px rgba(95, 44, 117, 0.18);
}

.mm-program-class-desc__item[open] .mm-program-class-desc__summary-label {
    color: var(--mm-grape-700, #5f2c75);
}

.mm-program-class-desc__summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: clamp(16px, 0.4vw + 14px, 19px);
    color: var(--mm-ink, #0f172a);
    user-select: none;
}

.mm-program-class-desc__summary::-webkit-details-marker {
    display: none;
}

/* Indicator is a brand grape star — outline when closed, full-color
   purple when open — matching the FAQ accordions (Ben 6/2). */
.mm-program-class-desc__summary-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    position: relative;
    color: var(--mm-grape-500, #8040a0);
}

.mm-program-class-desc__icon-star {
    position: absolute;
    inset: 0;
    margin: auto;
    fill: none;
    stroke: var(--mm-grape-500, #8040a0);
    transition: fill var(--mm-dur, 200ms) var(--mm-ease, ease),
                transform var(--mm-dur, 200ms) var(--mm-ease, ease);
}

.mm-program-class-desc__item[open] .mm-program-class-desc__icon-star {
    fill: var(--mm-grape-500, #8040a0);
    transform: scale(1.08);
}

.mm-program-class-desc__item:not([open]):hover .mm-program-class-desc__icon-star {
    fill: rgba(66, 174, 154, 0.18);
}

.mm-program-class-desc__body {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--mm-line, #e5e5e7);
    font-family: var(--mm-font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--mm-ink-2, #2c2c2e);
}

.mm-program-class-desc__body p {
    margin: 0 0 1em;
}

.mm-program-class-desc__body p:last-child {
    margin-bottom: 0;
}

.mm-program-class-desc__body ul,
.mm-program-class-desc__body ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}

.mm-program-class-desc__body h3,
.mm-program-class-desc__body h4 {
    margin: 1em 0 0.4em;
    font-family: var(--mm-font-display);
    color: var(--mm-ink, #0f172a);
}

.mm-program-class-desc__body a {
    color: var(--mm-teal-700);
    text-decoration: underline;
}

.mm-program-overview {
    padding: clamp(24px, 3.5vw, 56px) clamp(20px, 4vw, 64px);
    background-color: #fff;
}

.mm-program-why {
    background-color: var(--mm-paper-2);
    padding-block: clamp(32px, 4vw, 64px);
    padding-inline: clamp(20px, 4vw, 64px);
}

.mm-program-class-desc {
    padding: clamp(28px, 3.5vw, 56px) clamp(20px, 4vw, 64px);
    background-color: #fff;
}

.mm-program-class-desc {
    position: relative;
    padding: clamp(56px, 7vw, 112px) clamp(20px, 4vw, 64px);
    /* Flat light lavender — bg photo + teal/grape wash removed (Ben 6/4). */
    background-color: #efe6f7;
    color: var(--mm-ink-2, #2c2c2e);
    isolation: isolate;
}

.mm-program-class-desc__header {
    text-align: center;
    margin: 0 0 clamp(20px, 3vw, 36px);
    display: grid;
    gap: 10px;
}

.mm-program-class-desc__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin: 0;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mm-teal-700, #2c7a6b);
}

.mm-program-class-desc__eyebrow-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--mm-teal, #42ae9a);
    box-shadow: 0 0 0 4px rgba(66, 174, 154, 0.18);
}

.mm-program-class-desc__heading {
    margin: 0;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: clamp(28px, 2.4vw + 18px, 44px);
    line-height: 1.15;
    color: var(--mm-ink, #0f172a);
}

.mm-program-class-desc__intro {
    margin: 0 auto;
    max-width: 620px;
    font-family: var(--mm-font-body);
    font-size: clamp(15px, 0.3vw + 14px, 17px);
    line-height: 1.6;
    color: var(--mm-ink-2, #2c2c2e);
}

.mm-program-class-desc__list {
    display: grid;
    gap: 14px;
}